/* ============================================================
   My Works — stylesheet
   Sections: 1 tokens · 2 base · 3 typography · 4 header & nav
   5 hero · 6 author · 7 library · 8 fatawa · 9 contact
   10 footer · 11 work page · 12 responsive
   ============================================================ */

/* 1 ── Tokens ─────────────────────────────────────────────── */

:root {
  --ink: #1b2521;
  --muted: #5d6863;
  --paper: #faf8f2;
  --paper-warm: #f1ebdf;
  --card: #fffdf8;
  --line: #dcdfd4;
  --moss: #2d5749;
  --moss-deep: #15342b;

  /* Gold has two values: one that passes contrast on cream,
     one that passes on the dark green. Never swap them. */
  --gold-on-light: #86601f;
  --gold-on-dark: #e8c882;
  --gold-rule: #b8863a;

  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-ui: "DM Sans", system-ui, -apple-system, sans-serif;
  --font-urdu: "Noto Nastaliq Urdu", serif;
  --font-arabic: "Amiri", "Noto Naskh Arabic", serif;

  --gutter: clamp(20px, 8vw, 152px);
  /* Widest the reading column ever gets. Backgrounds still run edge to
     edge; only the words stop here, so lines stay readable on a large
     monitor instead of running to 90-odd characters. */
  --shell: 1180px;
  --block: clamp(56px, 8vw, 118px);
}

/* 2 ── Base ───────────────────────────────────────────────── */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 128px; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
img { max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--gold-rule);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 50;
  padding: 12px 18px;
  background: var(--moss-deep);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

/* 3 ── Typography ─────────────────────────────────────────── */

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0;
}

.eyebrow,
.section-label {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-on-light);
}
/* The author's name, above the heading. It was the gold used for small
   labels, which reads as a caption; it is the one name on the page and
   should be legible at a glance. */
.eyebrow {
  color: #f7f4ec;
  text-transform: none;
  letter-spacing: 0.04em;
  font-size: clamp(15px, 1.5vw, 18px);
  margin-bottom: 14px;
}

/* Urdu and Arabic need their own size and leading, everywhere. */
.urdu {
  font-family: var(--font-urdu);
  font-size: clamp(18px, 1.9vw, 25px);
  font-weight: 500;
  line-height: 2.05;
  text-align: right;
}
.arabic {
  font-family: var(--font-arabic);
  font-size: clamp(21px, 2.1vw, 29px);
  font-weight: 700;
  line-height: 1.65;
  text-align: right;
}

/* Latin tracking pulls joined Arabic-script letterforms apart, and there is
   no such thing as an uppercase Nastaliq. Neither ever applies to these two,
   whatever a heading or label rule elsewhere asks for. */
.urdu,
.arabic {
  letter-spacing: normal;
  text-transform: none;
}

/* A label that happens to be Urdu or Arabic keeps label proportions —
   it must not inflate to title size — but takes the right script. The
   same goes for a download button whose label is Urdu. */
.section-label.urdu,
.section-label.arabic {
  font-size: 16px;
  line-height: 1.9;
}
/* .document-link sets --font-ui and is declared after .urdu, so it wins on
   source order. These have to name the script font again to take it back. */
.document-link.urdu,
.button.urdu {
  font-family: var(--font-urdu);
  font-size: 15px;
  line-height: 1.9;
  font-weight: 500;
}
.document-link.arabic,
.button.arabic {
  font-family: var(--font-arabic);
  font-size: 15px;
  line-height: 1.9;
  font-weight: 500;
}

.button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  background: #f4eddc;
  color: var(--moss-deep);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  border-radius: 3px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.button:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.16); }
.button-dark { background: var(--moss-deep); color: #f6f1e4; }

.text-link,
.document-link {
  position: relative;
  color: var(--moss);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

/* These links are the point of the site and they are only 21px tall.
   The invisible pad brings the touch area to ~44px without moving the
   underline or the layout by a pixel. Kept narrower than the 18px gap
   between neighbouring links so no link steals another's taps. */
.text-link::after,
.document-link::after {
  content: "";
  position: absolute;
  inset: -11px -8px;
}
.text-link:hover,
.document-link:hover { color: var(--gold-on-light); }

.toggle {
  color: var(--gold-on-light);
  font-family: var(--font-ui);
  font-size: 24px;
  line-height: 1;
  transition: transform 0.2s ease;
}
details[open] > summary .toggle { transform: rotate(45deg); }

.availability-note {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 14px;
  font-style: italic;
}

/* 4 ── Header & category nav ──────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 72px;
  padding: 0 var(--gutter);
  background: rgba(250, 248, 242, 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

/* Four words rather than two, so it is allowed to wrap. It used to be
   nowrap, which on a phone pushed the whole page sideways. */
.brand {
  display: flex;
  align-items: center;
  max-width: 22ch;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
}
/* The author's calligraphic seal. The PNG is neutral black with the white
   knocked out, so it takes a colour from the CSS filter and sits on any
   background. */
.brand-mark {
  width: 26px;
  height: 26px;
  margin-right: 8px;
  vertical-align: -7px;
  /* black ink -> the gold rule colour */
  filter: invert(48%) sepia(58%) saturate(560%) hue-rotate(2deg) brightness(92%);
}

.header-nav { display: flex; gap: 22px; }
.header-nav a {
  position: relative;
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
}
/* Vertical only — the gap between these shrinks to 12px on a phone, so
   widening them sideways would make neighbours overlap. */
.header-nav a::after { content: ""; position: absolute; inset: -8px 0; }
.header-nav a:hover { color: var(--moss-deep); border-bottom-color: var(--gold-rule); }

.category-nav {
  position: sticky;
  top: 72px;
  z-index: 19;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 11px var(--gutter);
  background: rgba(255, 253, 248, 0.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  scrollbar-width: thin;
}
.category-nav a {
  flex: none;
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: #45534d;
  font-size: 13px;
  text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.category-nav a:hover { background: var(--paper-warm); border-color: #d5c29e; color: var(--moss-deep); }

/* 5 ── Hero ───────────────────────────────────────────────── */

.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(64px, 11vw, 140px) var(--gutter) clamp(60px, 8vw, 104px);
  /* The warm glow used to sit at 80% 18% — directly behind the author's
     name and the first line of the heading. Measured against the rendered
     pixels, the name fell to 1.2:1 where it crossed the bright centre.
     Moved to the lower right, where nothing is set over it: the same
     warmth, and every line of hero text now clears 5:1. */
  background:
    radial-gradient(circle at 94% 92%, rgba(237, 218, 170, 0.6) 0, rgba(237, 218, 170, 0.24) 12%, transparent 26%),
    linear-gradient(118deg, #102f27 0%, #17483c 68%, #1c5346 100%);
  color: #f7f4ec;
}
.hero::after {
  content: "";
  position: absolute;
  right: -130px;
  bottom: -190px;
  width: 380px;
  height: 380px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
}
.hero > * { position: relative; z-index: 1; }

.hero h1 {
  max-width: 15ch;
  font-size: clamp(42px, 6.6vw, 84px);
  letter-spacing: -0.035em;
}
.hero h1 em { color: #ecd9b0; font-style: italic; }

.hero-copy {
  max-width: 52ch;
  margin: 26px 0 14px;
  color: #d3ddd7;
  font-size: 17px;
}
/* This was the smallest and faintest text on the page, and it is
   Nastaliq — the script that suffers most from both. It now starts at
   19px, the same floor the rest of the site's Urdu keeps, and takes the
   same colour as the paragraph above it. */
.hero-urdu {
  max-width: 40ch;
  margin: 0 0 30px;
  color: #dce6e0;
  font-family: var(--font-urdu);
  font-size: clamp(19px, 1.9vw, 23px);
  line-height: 2.1;
}

/* 6 ── Author ─────────────────────────────────────────────── */

.intro {
  display: grid;
  grid-template-columns: 72px minmax(0, 780px);
  gap: 32px;
  padding: var(--block) var(--gutter);
  background: var(--paper-warm);
  border-top: 3px solid var(--gold-rule);
}
.intro-mark {
  width: 60px;
  height: 60px;
  object-fit: contain;
  /* black ink -> the deep moss of the headings */
  filter: invert(24%) sepia(19%) saturate(830%) hue-rotate(112deg) brightness(94%);
}
.intro h2 { font-size: clamp(30px, 3.6vw, 46px); margin-bottom: 16px; }
/* The name in the author's own calligraphy, above the same name set in
   type. Decorative, so the heading below it stays the real text. */
.bio-calligraphy {
  display: block;
  width: min(100%, 420px);
  height: auto;
  margin: 0 0 6px auto;
}
.intro-body > p { margin: 0 0 24px; color: #4c5651; }

.bio { border-top: 1px solid #cfd3c6; }
.bio > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
  color: var(--moss-deep);
}
.bio > summary::-webkit-details-marker { display: none; }
.bio > summary .section-label { display: block; margin-bottom: 4px; }
.bio > summary strong { font-family: var(--font-display); font-size: clamp(23px, 2.6vw, 32px); font-weight: 600; }

.bio-body { padding: 34px 0 8px; }
.bio-heading { margin-bottom: 30px; }
.bio-heading h3 { color: var(--moss-deep); font-size: inherit; }
.bio-byline { color: var(--muted); font-size: clamp(15px, 1.4vw, 19px); margin: 10px 0 0; }
.bio-prose p { margin: 0 0 26px; color: #36443f; }

.bio-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0 0 28px;
  background: var(--line);
  border: 1px solid var(--line);
}
.bio-facts div { padding: 16px 20px; background: var(--card); }
/* نام, کنیت, مرشدِ گرامی — Urdu words that were set in the Latin UI font
   at 12px with 0.08em tracking, which pulls the joined letters apart. */
.bio-facts dt {
  font-family: var(--font-urdu);
  font-size: 15px;
  line-height: 1.9;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: var(--gold-on-light);
  direction: rtl;
  text-align: right;
}
.bio-facts dd { margin: 8px 0 0; color: #2f3d38; }

.bio-panels { border-top: 1px solid #cfd3c6; }
.bio-panels details { border-bottom: 1px solid #cfd3c6; }
.bio-panels summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
  cursor: pointer;
  list-style: none;
  color: var(--moss-deep);
}
.bio-panels summary::-webkit-details-marker { display: none; }
.bio-panels ol,
.bio-panels ul,
.bio-panels details > div { margin: 0; padding: 0 22px 20px 0; color: #3d4b45; }
.bio-panels li { margin: 0 0 10px; }
.bio-source { margin: 26px 0 0; }

/* 7 ── Library ────────────────────────────────────────────── */

.library { padding: var(--block) var(--gutter); }

.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  padding-bottom: 20px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--line);
}
.section-heading h2,
.rulings h2,
.contact h2 { font-size: clamp(30px, 3.6vw, 48px); }
.section-note { max-width: 26ch; margin: 0; color: var(--muted); font-size: 14px; }
.section-note-light { max-width: 44ch; margin: 14px 0 34px; color: #c3d0c9; font-size: 15px; }

.search-row { margin-bottom: 30px; }
.search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid #b8beb5;
  border-radius: 4px;
  color: var(--gold-on-light);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.search-box:focus-within { border-color: var(--gold-on-light); box-shadow: 0 8px 22px rgba(134, 96, 31, 0.12); }
.search-box input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
}
.search-box input::placeholder { color: #7b857d; }
.search-count { margin: 10px 2px 0; min-height: 20px; color: var(--muted); font-size: 13px; }

.work-category {
  padding: 22px 24px 6px;
  margin-bottom: 30px;
  background: var(--card);
  border: 1px solid #e5e2d9;
  box-shadow: 0 6px 20px rgba(24, 62, 51, 0.035);
}
.work-category-head { padding-bottom: 14px; border-bottom: 2px solid var(--gold-rule); margin-bottom: 4px; }
.work-category-head h3 { font-size: clamp(21px, 2.3vw, 29px); color: #2b3a34; }
.category-urdu { margin: 2px 0 0; color: var(--gold-on-light); font-size: clamp(16px, 1.6vw, 21px); }
.category-blurb { margin: 8px 0 0; color: var(--muted); font-size: 14px; }

.work { border-bottom: 1px solid var(--line); transition: background 0.18s ease; }
.work:last-child { border-bottom: 0; }
.work:hover { background: #faf6ed; }
.work[open] { background: #f6f1e6; }

/* Aligned to the top, not the middle: a title that wraps to two or three
   lines left its kind label and its toggle floating halfway down beside
   it, attached to nothing. */
.work summary {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr) 24px;
  align-items: start;
  gap: 16px;
  padding: 16px 0;
  cursor: pointer;
  list-style: none;
}
.work summary .work-kind,
.work summary .toggle { padding-top: 6px; }
.work summary::-webkit-details-marker { display: none; }

/* The small label says what kind of thing it is — that is real
   information, unlike a sequence number. */
/* Nastaliq carries more detail per glyph than Latin does, so it needs
   more size for the same legibility. 13px was below what the script can
   hold on a phone. */
.work-kind {
  font-family: var(--font-urdu);
  font-size: 15px;
  line-height: 1.9;
  color: var(--gold-on-light);
  text-align: right;
  direction: rtl;
}

.work-detail { padding: 0 34px 22px 134px; max-width: 78ch; color: var(--muted); }
.work-detail p { margin: 0 0 12px; }

/* The tags now come after the download links, so the space goes above. */
.tag-row { display: flex; flex-wrap: wrap; gap: 7px; margin: 22px 0 0; padding: 0; list-style: none; }
.tag {
  padding: 3px 11px 5px;
  background: var(--paper-warm);
  border-radius: 999px;
  color: #5d4a25;
  font-family: var(--font-urdu);
  font-size: 14px;
  line-height: 1.9;
}

/* 24px, not 18px: it has to clear the invisible touch padding on the
   links above, or a wrapped second row steals taps from the first. */
.work-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.work-pending summary { opacity: 0.72; }

.empty-state { padding: 28px; background: var(--card); border: 1px solid var(--line); color: var(--muted); }

/* 8 ── Fatawa ─────────────────────────────────────────────── */

.rulings {
  padding: var(--block) var(--gutter);
  background: var(--moss-deep);
  color: #f6f3ea;
}
.rulings .section-label { color: var(--gold-on-dark); }

/* The cards used to be the same green as the panel behind them, divided
   by hairlines — five rectangles that read as one flat slab, which is
   why the eye slid straight past the section. They are paper now: the
   green stays as the backdrop, and the fatawa sit on top of it as
   objects you can see and count. */
.ruling-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.ruling {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  min-height: 170px;
  padding: 22px 24px;
  background: var(--card);
  border-top: 3px solid var(--gold-rule);
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.ruling:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22); }
.ruling h3 { font-size: 20px; line-height: 1.3; color: var(--moss-deep); }
/* 1.3 is a Latin leading. Nastaliq and Naskh keep their own, or a
   two-line Urdu title collides with itself. */
.ruling h3.urdu { font-size: 24px; line-height: 2.05; }
.ruling h3.arabic { font-size: 25px; line-height: 1.65; }
/* On paper now, so these take the on-light values. The section's own
   heading and note stay on the green and keep the on-dark ones — which
   is the whole reason the two gold variables exist. */
.ruling p { margin: 0; color: var(--muted); font-size: 14px; }
.ruling-open { color: var(--gold-on-light); font-size: 13px; font-weight: 700; }

/* 9 ── Contact ────────────────────────────────────────────── */

.contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: var(--block) var(--gutter);
  background: var(--paper-warm);
}
.contact h2 { margin-bottom: 14px; }
.contact p { max-width: 52ch; margin: 0; color: #4c5651; }

/* 10 ── Footer ────────────────────────────────────────────── */

footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px;
  padding: 24px var(--gutter);
  background: #10281f;
  color: #b6c2ba;
  font-size: 13px;
}
footer a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.4); }

/* 11 ── Work detail page ──────────────────────────────────── */

.work-page-main { min-height: calc(100vh - 190px); }
.work-hero { max-width: 1100px; padding: clamp(56px, 10vw, 128px) var(--gutter); }
.back-link {
  display: inline-block;
  margin-bottom: 34px;
  color: var(--moss);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.work-hero h1 { max-width: 22ch; color: var(--moss-deep); font-size: clamp(32px, 4.4vw, 58px); }
.work-hero h1.urdu { font-size: clamp(26px, 3.6vw, 48px); line-height: 1.95; }
.work-hero h1.arabic { font-size: clamp(30px, 4vw, 54px); line-height: 1.6; }
.work-page-description { max-width: 62ch; margin: 24px 0 18px; color: #4b5852; font-size: 17px; }
.work-page-files { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 22px; }
.work-page-files .button { background: var(--moss-deep); color: #f6f1e4; }

/* Charts and pamphlets shown, not just offered. Each one links to the
   full-size file, so the thumbnail only has to be legible enough to tell
   the sheets apart. */
.work-page-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 18px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}
.work-page-gallery a {
  display: block;
  border: 1px solid var(--line);
  background: var(--card);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.work-page-gallery a:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(24, 62, 51, 0.16); }
.work-page-gallery img { display: block; width: 100%; height: auto; }

/* 11a ── Posts ────────────────────────────────────────────── */

.work-date {
  margin: 10px 0 0;
  color: var(--gold-on-light);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.work-detail .work-date { margin: 0 0 10px; }

/* A written piece, not a record of a file. The measure is deliberately
   narrower than the page — prose wants 60-odd characters a line, and
   Nastaliq wants the leading it always wants. */
.post-body {
  max-width: 62ch;
  margin: 34px 0 0;
  color: #38443f;
  font-size: 17px;
  line-height: 1.75;
}
.post-body.urdu,
.post-body.arabic { max-width: 44ch; margin-left: auto; }
.post-body.urdu { font-size: 19px; line-height: 2.15; }
.post-body.arabic { font-size: 21px; line-height: 1.9; }
.post-body > * { margin: 0 0 1.1em; }
.post-body > *:last-child { margin-bottom: 0; }
.post-body h2 {
  margin-top: 1.7em;
  font-size: 1.32em;
  line-height: 1.35;
  color: var(--moss-deep);
}
.post-body.urdu h2 { line-height: 2.05; }
.post-body blockquote {
  padding: 2px 0 2px 18px;
  border-left: 3px solid var(--gold-rule);
  color: var(--muted);
}
.post-body.urdu blockquote,
.post-body.arabic blockquote {
  padding: 2px 18px 2px 0;
  border-left: 0;
  border-right: 3px solid var(--gold-rule);
}
.post-body .arabic,
.post-body .urdu { display: block; }

.post-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

/* 11b ── The reading column ───────────────────────────────── */

/* Full-bleed sections, centred contents. Declared after the sections
   themselves so it wins over the padding shorthand each one sets. */
.site-header,
.category-nav,
.hero,
.intro,
.library,
.rulings,
.contact,
footer {
  padding-inline: max(var(--gutter), calc((100% - var(--shell)) / 2));
}

/* 12 ── Responsive & motion ───────────────────────────────── */

@media (max-width: 820px) {
  html { scroll-padding-top: 116px; }
  .intro { grid-template-columns: 1fr; gap: 18px; }
  .section-heading { display: block; }
  .section-note { margin-top: 12px; max-width: none; }
  .bio-facts { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .site-header { height: auto; min-height: 62px; padding-block: 10px; }
  .header-nav { gap: 14px; }
  .header-nav a { font-size: 13px; }
  /* Library and Fatawa are both in the category strip directly below, so
     on a phone the header keeps only what the strip does not repeat and
     gives the width back to the wordmark. */
  .header-nav .nav-echo { display: none; }
  .brand { max-width: 15ch; font-size: 11px; }
  .category-nav { top: 62px; padding-inline: 16px; }
  .hero { padding-top: 56px; }
  .hero h1 { font-size: clamp(34px, 10vw, 46px); }
  /* On a phone the ring crossed straight through the Urdu line. Drop it
     below the text rather than behind it. */
  .hero::after { right: -210px; bottom: -260px; }

  .work-category { padding: 16px 16px 4px; }
  .work summary { grid-template-columns: minmax(0, 1fr) 22px; gap: 10px; padding: 14px 0; }
  .work-kind { grid-column: 1 / -1; margin-bottom: -8px; }
  .work-detail { padding: 0 0 20px; }

  .urdu { font-size: 18px; line-height: 2.1; }
  .arabic { font-size: 20px; }
  .ruling-grid { grid-template-columns: 1fr; }
  .contact { display: block; }
  .contact .button { margin-top: 24px; }
}

/* Below ~380px the four English header links no longer fit beside the
   brand. They shrink, then scroll within the header like the category
   strip does — the page itself never scrolls sideways. */
@media (max-width: 420px) {
  .site-header { gap: 12px; padding-inline: 16px; }
  .brand { font-size: 12px; }
  .brand-mark { font-size: 17px; margin-right: 5px; }
  .header-nav {
    gap: 12px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .header-nav::-webkit-scrollbar { display: none; }
  .header-nav a { flex: none; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}