/* SeekersGuidance v4 prototype — base styles.
   Pass 1: enforce reading-face-on-prose, UI-sans-for-chrome, Gamboge-accent-only.
   RTL is achieved with LOGICAL properties only (margin-inline, inset-inline,
   border-inline-*), so one stylesheet mirrors for [dir=rtl]. */

*{box-sizing:border-box}
html,body{margin:0}
/* Italics retired (design system / BUILD-AUDIT B3): emphasis = weight + color, never
   slant. Neutralize the UA italic on these elements site-wide; emphasis uses <b>/weight. */
em,i,cite,blockquote,address{font-style:normal}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-ui);          /* chrome default = UI sans */
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* Global focus discipline (WCAG 2.4.7) — visible focus on every interactive surface. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
.lib-card:focus-visible,.book-card:focus-visible,.scholar:focus-visible,
.stream-row:focus-visible,.recent-card:focus-visible{
  outline:2px solid var(--astral);outline-offset:2px;border-radius:var(--radius);
}

/* Skip-link — bypass the chrome on keyboard nav. */
.skip{position:absolute;inset-inline-start:0;inset-block-start:-40px;background:var(--astral);color:#fff;
  font-family:var(--font-ui);font-weight:500;font-size:14px;padding:8px 14px;text-decoration:none;border-radius:var(--radius);z-index:100}
.skip:focus{inset-block-start:8px;inset-inline-start:8px}

/* Bidi-isolate runs that must always render LTR (times, codes, version strings). */
.ltr-iso{unicode-bidi:isolate;direction:ltr}

/* ---------- chrome (UI sans) ---------- */
.bar{background:var(--card);border-block-end:1px solid var(--rule)}
.bar-inner,.wrap{max-width:1100px;margin-inline:auto;padding-inline:var(--s5)}
.bar-inner{display:flex;align-items:center;gap:var(--s4);height:64px}
.brand{font-family:var(--font-display);font-size:22px;color:var(--astral);text-decoration:none}
.nav{display:flex;gap:var(--s4);margin-inline-start:auto;font-family:var(--font-ui);font-weight:500;font-size:15px}
.nav a{color:var(--astral);text-decoration:none}
.nav a:hover{color:var(--astral-700)}
.langtoggle{font-family:var(--font-ui);font-weight:500;font-size:14px;color:var(--gold-ink);background:none;border:1px solid var(--rule);border-radius:var(--radius);padding:6px 12px;cursor:pointer}

/* ---------- article / answer (reading face) ----------
   REMOVED 2026-06-11: `.page{max-width:var(--measure);…}` — an early reading-
   container utility with ZERO markup consumers (articles use .reader-body /
   .answer-body). WordPress puts `page` on the BODY of every Page, so the rule
   silently constrained ENTIRE Page templates (header, bands, footer) to 68ch
   (~571px) while home/archives rendered full-width — the root of the visible
   "menu bar inconsistency" between surfaces. Never reintroduce a bare `.page`
   selector; WP owns that class on body. */
.eyebrow{font-family:var(--font-ui);font-weight:600;text-transform:uppercase;letter-spacing:.12em;font-size:12px;color:var(--gold-ink)}
:root[lang="ar"] .eyebrow{letter-spacing:0}
h1.q{font-family:var(--font-display);font-weight:400;font-size:40px;line-height:var(--lh-display);margin:var(--s2) 0 var(--s3)}
.meta{font-family:var(--font-ui);font-size:13px;color:var(--muted);display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center}
.chip{font-family:var(--font-ui);font-weight:500;font-size:12px;color:var(--astral);background:var(--paper-alt);border:1px solid var(--hair);border-radius:var(--radius);padding:3px 10px}

.gold-rule{height:3px;width:64px;background:var(--gamboge);margin:var(--s5) 0 var(--s4)}  /* accent use of Gamboge — OK */

.prose{font-family:var(--font-read);font-size:19px;line-height:var(--lh-read);color:#23303A}
:root[lang="ar"] .prose{font-size:22px}
.prose p{margin:0 0 var(--s4)}
.prose h2{font-family:var(--font-display);font-weight:400;font-size:25px;line-height:1.2;margin:var(--s6) 0 var(--s3);color:var(--ink)}
.prose a{color:var(--astral);text-decoration:underline;text-underline-offset:2px}      /* links = Astral, never Gamboge */
.cite{font-family:var(--font-ui);font-size:13px;color:var(--muted)}
.callout{border-inline-start:3px solid var(--gamboge);background:var(--paper-alt);padding:var(--s3) var(--s4);border-radius:var(--radius);margin:var(--s4) 0}

.attrib{margin-block-start:var(--s6);padding-block-start:var(--s4);border-block-start:1px solid var(--rule);display:flex;gap:var(--s3);align-items:center}
.avatar{inline-size:48px;block-size:48px;border-radius:var(--radius);background:var(--astral);color:#fff;display:grid;place-items:center;font-family:var(--font-display);font-size:20px}
.attrib .who{font-family:var(--font-ui)}
.attrib .name{font-weight:600;color:var(--ink)}
.attrib .role{font-size:13px;color:var(--muted)}

.placeholder{font-family:var(--font-ui);font-size:12px;color:var(--subtle);margin-block-start:var(--s6)}
[hidden]{display:none !important}

/* language visibility: show only the active language's content.
   The "All" view (sg-view-all on :root, set by the header 3-way switcher) shows
   BOTH: the :not(.sg-view-all) guard makes these hide-rules stop matching, so each
   .only-* keeps its natural display. Root lang stays VALID (en|ar) — never "all" —
   so the document still passes axe html-lang-valid. State lives in sg-bilingual.js. */
:root[lang="en"]:not(.sg-view-all) .only-ar{display:none}
:root[lang="ar"]:not(.sg-view-all) .only-en{display:none}

/* ============ Pass 2 ============ */

/* --- the All / English / Arabic view switcher --- */
.toolbar{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;margin:var(--s5) 0 var(--s4)}
.viewswitch{display:inline-flex;border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden}
.viewswitch button{font-family:var(--font-ui);font-weight:500;font-size:14px;color:var(--astral);background:var(--card);border:0;padding:8px 16px;cursor:pointer;border-inline-end:1px solid var(--rule)}
.viewswitch button:last-child{border-inline-end:0}
.viewswitch button[aria-pressed="true"]{background:var(--astral);color:#fff}
/* Compact chrome variant — the global All/English/عربي view switch in the header
   util bar + mobile drawer. Reuses the .viewswitch design at a smaller scale;
   min-height keeps each option ≥ the WCAG 2.2 AA 24px target-size. */
.viewswitch.is-chrome button{font-size:12px;padding:5px 10px;min-height:32px}
.count{font-family:var(--font-ui);font-size:13px;color:var(--muted)}

/* --- one unified card component (renders either direction) --- */
.grid2{display:grid;grid-template-columns:repeat(auto-fill,minmax(264px,1fr));gap:var(--s4)}
.lib-card{display:flex;flex-direction:column;gap:var(--s2);background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);padding:var(--s4);text-align:start}
.lib-card:hover{border-color:var(--astral)}
.lib-card .type{font-family:var(--font-ui);font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-ink)}
.lib-card h3{font-family:var(--font-read);font-weight:400;font-size:20px;line-height:1.2;margin:0;color:var(--ink)}
.lib-card[lang="ar"] h3{font-family:"Riwaya",serif}
.lib-card .d{font-family:var(--font-ui);font-size:13.5px;color:var(--muted);line-height:1.5}
.lib-card[lang="ar"] .d{font-family:"Bukra",system-ui,sans-serif}
.lib-card .foot{margin-block-start:auto;padding-block-start:var(--s2);display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap}
.chip-sm{font-family:var(--font-ui);font-weight:500;font-size:11px;color:var(--astral);background:var(--paper-alt);border:1px solid var(--hair);border-radius:var(--radius);padding:2px 8px}
.badge{font-family:var(--font-ui);font-weight:600;font-size:10px;letter-spacing:.08em;border-radius:var(--radius);padding:2px 7px;border:1px solid var(--hair);color:var(--muted)}
.badge.both{color:var(--astral)}
.xlink{font-family:var(--font-ui);font-weight:500;font-size:12.5px;color:var(--astral);text-decoration:none;margin-block-start:var(--s1)}
.xlink::after{content:" \2192"}                 /* arrow; mirrors automatically in RTL */
.lib-card.is-cross{opacity:.78}
.lib-card.is-cross h3{color:var(--muted)}

/* --- classroom shell: built vs embedded --- */
.lesson{display:grid;grid-template-columns:1fr;gap:var(--s5);max-width:820px;margin-inline:auto;padding:var(--s6) var(--s5)}
.video{aspect-ratio:16/9;background:linear-gradient(160deg,var(--astral-700),var(--astral));border-radius:var(--radius);display:grid;place-items:center;color:#fff;font-family:var(--font-ui)}
.video .play{inline-size:64px;block-size:64px;border-radius:999px;background:rgba(255,255,255,.16);display:grid;place-items:center;font-size:24px}
.transcript{font-family:var(--font-read);font-size:18px;line-height:var(--lh-read);color:#23303A}
:root[lang="ar"] .transcript{font-family:"Riwaya",serif;font-size:21px}
.downloads{display:flex;gap:var(--s2);flex-wrap:wrap}
.dl{font-family:var(--font-ui);font-weight:500;font-size:13px;color:var(--astral);text-decoration:none;border:1px solid var(--rule);border-radius:var(--radius);padding:6px 12px}

.embed{border:1px solid var(--rule);border-radius:var(--radius);padding:var(--s4);background:var(--card)}
.embed h3{font-family:var(--font-display);font-weight:400;font-size:22px;margin:0 0 var(--s3)}
.embed .opt{display:flex;align-items:center;gap:var(--s2);font-family:var(--font-ui);font-size:15px;border:1px solid var(--rule);border-radius:var(--radius);padding:10px 14px;margin-block-end:var(--s2)}
.embed .opt .key{inline-size:24px;block-size:24px;border-radius:999px;border:1.5px solid var(--astral);color:var(--astral);display:grid;place-items:center;font-size:12px;font-weight:600}
.btn-primary{display:inline-block;background:var(--astral);color:#fff;font-family:var(--font-ui);font-weight:500;font-size:14px;border:0;border-radius:var(--radius);padding:10px 18px;cursor:pointer}

/* "Show the seam" demo: reveals which regions are built vs embedded */
.region{position:relative}
.seam .region.built{outline:2px dashed var(--astral);outline-offset:4px}
.seam .region.embedded{outline:2px dashed var(--gold-ink);outline-offset:4px}
.seam .region::before{position:absolute;inset-block-start:-10px;inset-inline-start:8px;font-family:var(--font-ui);font-weight:600;font-size:10px;letter-spacing:.08em;padding:1px 7px;border-radius:var(--radius);z-index:2}
.seam .region.built::before{content:"BUILT IN WORDPRESS";background:var(--astral);color:#fff}
.seam .region.embedded::before{content:"EMBEDDED · MOODLE (LTI 1.3)";background:var(--gold-ink);color:#fff}
:root[lang="ar"] .seam .region.built::before{content:"مبني في ووردبريس"}
:root[lang="ar"] .seam .region.embedded::before{content:"مُضمَّن · مودل (LTI 1.3)"}
.seam-note{font-family:var(--font-ui);font-size:12.5px;color:var(--muted);border-inline-start:3px solid var(--gold-ink);background:var(--paper-alt);padding:var(--s2) var(--s3);border-radius:var(--radius)}

/* ============ Pass 3 ============ */

/* --- Seekers Books shelf --- */
.book-card{display:flex;flex-direction:column;gap:var(--s2);text-decoration:none;color:inherit}
.cover{aspect-ratio:3/4;background:var(--paper-alt);border:1px solid var(--rule);border-block-start:3px solid var(--gamboge);border-radius:var(--radius);padding:var(--s4);display:flex;flex-direction:column;justify-content:space-between;text-align:start}
.cover .ct{font-family:var(--font-display);font-weight:400;font-size:21px;line-height:1.15;color:var(--ink)}
.book-card[lang="ar"] .cover .ct{font-family:"Zarid Display","Riwaya",serif}
.cover .ca{font-family:var(--font-ui);font-size:12px;color:var(--muted)}
.book-card[lang="ar"] .cover .ca{font-family:"Bukra",system-ui,sans-serif}
.formats{display:flex;gap:var(--s1);flex-wrap:wrap}
.fmt{font-family:var(--font-ui);font-weight:600;font-size:10px;letter-spacing:.06em;color:var(--gold-ink);border:1px solid var(--hair);border-radius:var(--radius);padding:1px 6px}

/* --- the in-brand reader --- */
.reader{display:grid;grid-template-columns:240px 1fr;gap:var(--s5);max-width:1000px;margin-inline:auto;padding:var(--s5) var(--s5) var(--s7)}
@media(max-width:760px){.reader{grid-template-columns:1fr}}
.toc{font-family:var(--font-ui);font-size:14px;border-inline-end:1px solid var(--rule);padding-inline-end:var(--s4)}
.toc h4{font-family:var(--font-ui);text-transform:uppercase;letter-spacing:.1em;font-size:11px;color:var(--muted);margin:0 0 var(--s2)}
.toc a{display:block;color:var(--astral);text-decoration:none;padding:6px 0;border-block-end:1px solid var(--hair)}
.toc a.on{color:var(--gold-ink);font-weight:600}
.reader-main .rtoolbar{display:flex;gap:var(--s2);align-items:center;margin-block-end:var(--s4)}
.reader-body{font-family:var(--font-read);font-size:19px;line-height:var(--lh-read);color:#23303A;max-width:var(--measure)}
:root[lang="ar"] .reader-body{font-family:"Riwaya",serif;font-size:22px}
.reader-body h2{font-family:var(--font-display);font-weight:400;font-size:26px;margin:0 0 var(--s3)}
.quran-slot{border:1px dashed var(--gold-ink);background:var(--paper-alt);border-radius:var(--radius);padding:var(--s3) var(--s4);margin:var(--s4) 0;font-family:var(--font-ui);font-size:13px;color:var(--gold-ink)}
.quran{font-family:var(--font-quran);direction:rtl;text-align:center;color:var(--ink);font-size:34px;line-height:2.1;margin:0 0 var(--s2)}

/* --- scholars + founder --- */
.scholar-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--s4)}
.scholar{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);padding:var(--s4);text-align:start}
.portrait{aspect-ratio:1/1;border-radius:var(--radius);background:var(--astral);color:#fff;display:grid;place-items:center;font-family:var(--font-display);font-size:40px;margin-block-end:var(--s3);position:relative}
.portrait::after{content:"PORTRAIT SLOT";position:absolute;inset-block-end:6px;font-family:var(--font-ui);font-size:8px;letter-spacing:.1em;color:rgba(255,255,255,.6)}
:root[lang="ar"] .portrait::after{content:"موضع الصورة"}
.scholar .sname{font-family:var(--font-read);font-size:19px;color:var(--ink)}
.scholar[lang="ar"] .sname{font-family:"Riwaya",serif}
.scholar .isnad{font-family:var(--font-ui);font-size:12.5px;color:var(--muted);margin-block-start:4px}
.scholar .courses{margin-block-start:var(--s2);display:flex;gap:var(--s1);flex-wrap:wrap}

.founder{display:grid;grid-template-columns:200px 1fr;gap:var(--s5);background:var(--card);border:1px solid var(--rule);border-block-start:3px solid var(--gamboge);border-radius:var(--radius);padding:var(--s5);margin:var(--s5) 0 var(--s6)}
@media(max-width:680px){.founder{grid-template-columns:1fr}}
.founder .portrait{aspect-ratio:1/1;font-size:56px;margin:0}
.founder .fname{font-family:var(--font-display);font-weight:400;font-size:30px;margin:0}
:root[lang="ar"] .founder .fname{font-family:"Zarid Display","Riwaya",serif}
.founder .frole{font-family:var(--font-ui);font-size:13px;color:var(--gold-ink);font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin:6px 0 var(--s3)}
.founder .fbio{font-family:var(--font-read);font-size:18px;line-height:var(--lh-read);color:#23303A}
:root[lang="ar"] .founder .fbio{font-family:"Riwaya",serif;font-size:20px}
.imagery-note{font-family:var(--font-ui);font-size:12px;color:var(--subtle);margin-block-start:var(--s4)}

/* ============ Pass 3 · Part B ============
   Individual scholar destination + Daily Answer (newsroom register).
   One source, both directions; logical CSS only. */

/* --- scholar destination (the federation rendered at scholar depth) --- */
.scholar-hero{display:grid;grid-template-columns:240px 1fr;gap:var(--s5);background:var(--card);border:1px solid var(--rule);border-block-start:3px solid var(--gamboge);border-radius:var(--radius);padding:var(--s5);margin:var(--s5) 0 var(--s5)}
@media(max-width:680px){.scholar-hero{grid-template-columns:1fr}}
.scholar-hero .portrait{aspect-ratio:1/1;font-size:64px;margin:0}
.scholar-hero .sh-name{font-family:var(--font-display);font-weight:400;font-size:34px;line-height:1.1;margin:0}
:root[lang="ar"] .scholar-hero .sh-name{font-family:"Zarid Display","Riwaya",serif}
.scholar-hero .sh-role{font-family:var(--font-ui);font-size:13px;color:var(--gold-ink);font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin:6px 0 var(--s3)}
.scholar-hero .sh-bio{font-family:var(--font-read);font-size:18px;line-height:var(--lh-read);color:#23303A;max-width:var(--measure)}
:root[lang="ar"] .scholar-hero .sh-bio{font-family:"Riwaya",serif;font-size:20px}

/* --- lineage block: the isnad as structural element, never decoration --- */
.lineage{background:var(--paper-alt);border:1px solid var(--hair);border-radius:var(--radius);padding:var(--s4);margin:var(--s4) 0 var(--s5)}
.lineage h3{font-family:var(--font-ui);text-transform:uppercase;letter-spacing:.1em;font-size:11px;color:var(--gold-ink);margin:0 0 var(--s3);font-weight:600}
.lineage ol{font-family:var(--font-read);font-size:16px;line-height:1.7;color:var(--ink);margin:0;padding-inline-start:0;list-style:none}
:root[lang="ar"] .lineage ol{font-family:"Riwaya",serif;font-size:18px}
.lineage li{padding:4px 0;border-block-end:1px dotted var(--hair);display:flex;gap:var(--s2);align-items:baseline}
.lineage li:last-child{border-block-end:0}
.lineage .yr{font-family:var(--font-ui);font-size:12px;color:var(--muted);min-inline-size:90px}
.lineage .place{font-family:var(--font-ui);font-size:12px;color:var(--muted);margin-inline-start:auto}

/* --- content streams: scholar's output, one row per type --- */
.streams{margin:var(--s5) 0 var(--s4)}
.stream-row{display:grid;grid-template-columns:160px 1fr auto;gap:var(--s4);align-items:baseline;padding:var(--s3) 0;border-block-end:1px solid var(--hair)}
@media(max-width:680px){.stream-row{grid-template-columns:1fr;gap:var(--s1)}}
.stream-row:last-child{border-block-end:0}
.stream-row .stype{font-family:var(--font-ui);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-ink)}
.stream-row .stitle{font-family:var(--font-read);font-size:18px;color:var(--ink);line-height:1.3}
:root[lang="ar"] .stream-row .stitle{font-family:"Riwaya",serif;font-size:20px}
.stream-row .smeta{font-family:var(--font-ui);font-size:12.5px;color:var(--muted);white-space:nowrap}
.stream-row a{color:inherit;text-decoration:none}
.stream-row a:hover .stitle{color:var(--astral)}

.actionbar{display:flex;gap:var(--s2);flex-wrap:wrap;margin:var(--s5) 0 var(--s4)}
.btn-send{display:inline-flex;align-items:center;gap:var(--s2);background:var(--astral);color:#fff;font-family:var(--font-ui);font-weight:500;font-size:14px;border:0;border-radius:var(--radius);padding:10px 18px;cursor:pointer;text-decoration:none}
.btn-send:hover{background:var(--astral-700)}
.btn-ghost{display:inline-flex;align-items:center;gap:var(--s2);background:transparent;color:var(--astral);font-family:var(--font-ui);font-weight:500;font-size:14px;border:1px solid var(--rule);border-radius:var(--radius);padding:10px 18px;cursor:pointer;text-decoration:none}

/* --- Daily Answer / newsroom register --- */
.today-grid{display:grid;grid-template-columns:1fr 280px;gap:var(--s6);max-width:1100px;margin-inline:auto;padding:var(--s5) var(--s5) var(--s7)}
@media(max-width:880px){.today-grid{grid-template-columns:1fr}}

.dateline{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:baseline;font-family:var(--font-ui);font-size:12.5px;color:var(--muted);padding-block:var(--s2);border-block-end:1px solid var(--rule);margin-block-end:var(--s4)}
.dateline .hijri{color:var(--gold-ink);font-weight:600;letter-spacing:.04em}
.dateline .greg{color:var(--ink)}
.dateline .loc{margin-inline-start:auto}

.answer-eyebrow{font-family:var(--font-ui);font-weight:600;text-transform:uppercase;letter-spacing:.12em;font-size:12px;color:var(--gold-ink);margin-block-end:var(--s2)}
:root[lang="ar"] .answer-eyebrow{letter-spacing:0}
.answer-hero h1{font-family:var(--font-display);font-weight:400;font-size:42px;line-height:var(--lh-display);margin:0 0 var(--s3);max-width:22ch}
:root[lang="ar"] .answer-hero h1{font-family:"Zarid Display","Riwaya",serif;font-size:38px}

.answer-attrib{display:flex;gap:var(--s3);align-items:center;margin:var(--s3) 0 var(--s4)}
.answer-attrib .avatar{inline-size:40px;block-size:40px;font-size:16px}
.answer-attrib a{font-family:var(--font-ui);font-weight:600;font-size:14px;color:var(--astral);text-decoration:none}
.answer-attrib .role{font-family:var(--font-ui);font-size:12.5px;color:var(--muted);margin-inline-start:var(--s2)}

.player{aspect-ratio:16/9;background:linear-gradient(160deg,var(--astral-700),var(--astral));border-radius:var(--radius);display:grid;place-items:center;color:#fff;font-family:var(--font-ui);margin-block-end:var(--s4)}
.player .play{inline-size:72px;block-size:72px;border-radius:999px;background:rgba(255,255,255,.18);display:grid;place-items:center;font-size:26px}

.answer-body{font-family:var(--font-read);font-size:19px;line-height:var(--lh-read);color:#23303A;max-width:var(--measure)}
:root[lang="ar"] .answer-body{font-family:"Riwaya",serif;font-size:22px}
.answer-body p{margin:0 0 var(--s4)}
.answer-body .lead{font-size:21px;line-height:1.5;color:var(--ink);font-style:normal}
:root[lang="ar"] .answer-body .lead{font-size:24px}

.citerow{font-family:var(--font-ui);font-size:13px;color:var(--muted);margin-block-start:var(--s5);padding-block-start:var(--s3);border-block-start:1px solid var(--rule);display:flex;gap:var(--s3);flex-wrap:wrap}
.citerow .ck{color:var(--astral)}

/* --- right rail: prayer rail + live indicator + newsletter --- */
.rail{display:flex;flex-direction:column;gap:var(--s4);font-family:var(--font-ui)}
.rail .block{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);padding:var(--s4)}
.rail h3{font-family:var(--font-ui);text-transform:uppercase;letter-spacing:.1em;font-size:11px;color:var(--gold-ink);margin:0 0 var(--s3);font-weight:600}

.prayer-list{margin:0;padding:0;list-style:none;font-size:14px}
.prayer-list li{display:flex;justify-content:space-between;padding:6px 0;border-block-end:1px dotted var(--hair);color:var(--ink)}
.prayer-list li:last-child{border-block-end:0}
.prayer-list .pname{color:var(--muted)}
.prayer-list .ptime{font-variant-numeric:tabular-nums}
.prayer-list .now{color:var(--gold-ink);font-weight:600}
.prayer-list .now .pname{color:var(--gold-ink)}

.live-block{border-block-start:3px solid var(--gamboge)}
.live-dot{display:inline-block;inline-size:8px;block-size:8px;border-radius:999px;background:var(--gamboge);margin-inline-end:var(--s2);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.live-block .when{font-size:13px;color:var(--muted);margin:6px 0 var(--s2)}
.live-block .who{font-size:14px;color:var(--ink);margin-block-end:var(--s3)}

.newsletter{background:var(--paper-alt)}
.newsletter p{font-size:13.5px;line-height:1.55;color:var(--ink);margin:0 0 var(--s3)}
.newsletter form{display:flex;flex-direction:column;gap:var(--s2)}
.newsletter input{font-family:var(--font-ui);font-size:14px;padding:8px 12px;border:1px solid var(--rule);border-radius:var(--radius);background:var(--card);color:var(--ink)}
.newsletter input:focus{outline:2px solid var(--astral);outline-offset:1px}
.newsletter button{font-family:var(--font-ui);font-weight:500;font-size:14px;background:var(--astral);color:#fff;border:0;border-radius:var(--radius);padding:8px 12px;cursor:pointer}

/* --- recent strip below the fold --- */
.recent-strip{margin-block-start:var(--s6);padding-block-start:var(--s5);border-block-start:1px solid var(--rule)}
.recent-strip h2{font-family:var(--font-ui);text-transform:uppercase;letter-spacing:.1em;font-size:12px;color:var(--gold-ink);margin:0 0 var(--s4);font-weight:600}
.recent-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--s4)}
.recent-card{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);padding:var(--s3) var(--s4);text-decoration:none;color:inherit}
.recent-card:hover{border-color:var(--astral)}
.recent-card .rday{font-family:var(--font-ui);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-block-end:var(--s1)}
.recent-card .rtitle{font-family:var(--font-read);font-size:16.5px;line-height:1.3;color:var(--ink)}
:root[lang="ar"] .recent-card .rtitle{font-family:"Riwaya",serif;font-size:18px}
.recent-card .rwho{font-family:var(--font-ui);font-size:12px;color:var(--muted);margin-block-start:var(--s1)}

/* ============ Pass 4 · Institutional Home (Direction V) ============
   The home ties Today, Library, Books, Scholars, Curriculum into one institutional surface.
   Dual hero, Continue Your Path strip, Faculty band, Three Pillars, A Seeker's Word, Donor band. */

.home-wrap{max-width:1100px;margin-inline:auto;padding-inline:var(--s5)}

/* Hero — dual register (institutional + companion) */
.hero{padding:var(--s7) var(--s5) var(--s6);text-align:center}
.hero .est{font-family:var(--font-ui);font-weight:600;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink)}
.hero h1.disp{font-family:var(--font-display);font-weight:400;font-size:54px;line-height:1.08;margin:var(--s3) auto var(--s2);max-width:14ch;color:var(--ink)}
:root[lang="ar"] .hero h1.disp{font-family:"Zarid Display","Riwaya",serif;font-size:48px}
.hero .subframe{font-family:var(--font-read);font-size:22px;color:var(--ink);max-width:42ch;margin:0 auto var(--s3);font-style:normal}
:root[lang="ar"] .hero .subframe{font-family:"Riwaya",serif;font-size:24px}
.hero .dek{font-family:var(--font-read);font-size:18px;color:var(--muted);max-width:48ch;margin:0 auto var(--s6);line-height:1.55}
:root[lang="ar"] .hero .dek{font-family:"Riwaya",serif;font-size:20px}

.doors{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);max-width:760px;margin:0 auto}
@media(max-width:680px){.doors{grid-template-columns:1fr}}
.door{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);padding:var(--s5);text-align:start}
.door.companion{border-color:var(--gamboge);border-block-start:3px solid var(--gamboge);background:var(--paper-alt)}
.door .dlabel{font-family:var(--font-ui);font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-ink);margin-block-end:var(--s2)}
.door .dh{font-family:var(--font-display);font-weight:400;font-size:24px;line-height:1.2;margin:0 0 var(--s2);color:var(--ink)}
:root[lang="ar"] .door .dh{font-family:"Zarid Display","Riwaya",serif;font-size:22px}
.door .dd{font-family:var(--font-read);font-size:16px;line-height:1.55;color:var(--muted);margin:0 0 var(--s4)}
:root[lang="ar"] .door .dd{font-family:"Riwaya",serif;font-size:17px}
.door .dcta{display:inline-block;font-family:var(--font-ui);font-weight:500;font-size:14px;background:var(--ink);color:#fff;text-decoration:none;padding:10px 18px;border-radius:var(--radius)}
.door.companion .dcta{background:var(--gamboge);color:var(--ink)}
.door .dcta:hover{background:var(--astral-700)}
.door.companion .dcta:hover{background:#d99607}

/* Continue Your Path strip — the Companion layer on the home */
.path-strip{background:var(--paper-alt);border-block-start:1px solid var(--rule);border-block-end:1px solid var(--rule);padding:var(--s5) 0;margin:var(--s6) 0}
.path-inner{max-width:1100px;margin-inline:auto;padding-inline:var(--s5);display:grid;grid-template-columns:1fr 280px 280px;gap:var(--s5);align-items:start}
@media(max-width:920px){.path-inner{grid-template-columns:1fr}}
.path-strip .greeting{font-family:var(--font-ui);font-size:13px;color:var(--muted);grid-column:1/-1;text-align:end;margin-block-end:var(--s2)}
:root[lang="ar"] .path-strip .greeting{text-align:start}
.path-main{background:var(--card);border:1px solid var(--gamboge);border-radius:var(--radius);padding:var(--s4)}
.path-main .label{font-family:var(--font-ui);font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-ink)}
.path-main .ptitle{font-family:var(--font-display);font-weight:400;font-size:24px;line-height:1.2;margin:var(--s1) 0 var(--s2);color:var(--ink)}
:root[lang="ar"] .path-main .ptitle{font-family:"Zarid Display","Riwaya",serif;font-size:22px}
.path-main .pwhere{font-family:var(--font-ui);font-size:13px;color:var(--muted);margin-block-end:var(--s3)}
.progress{block-size:6px;background:var(--paper);border-radius:999px;overflow:hidden;margin-block-end:var(--s4)}
.progress .bar{block-size:100%;background:var(--gamboge);inline-size:33%}
.path-main .actions{display:flex;gap:var(--s2);flex-wrap:wrap}

.path-side{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);padding:var(--s4)}
.path-side h4{font-family:var(--font-ui);text-transform:uppercase;letter-spacing:.1em;font-size:11px;color:var(--gold-ink);margin:0 0 var(--s3);font-weight:600}
.path-side .sl-line{display:flex;gap:var(--s2);align-items:center;margin-block-end:var(--s2)}
.path-side .avatar{inline-size:36px;block-size:36px;font-size:14px;border-radius:var(--radius);background:var(--astral);color:#fff;display:grid;place-items:center;font-family:var(--font-display)}
.path-side .sl-name{font-family:var(--font-ui);font-weight:600;font-size:14px;color:var(--ink)}
.path-side .sl-role{font-family:var(--font-ui);font-size:12px;color:var(--muted)}
.path-side .smsg{font-family:var(--font-read);font-size:14.5px;color:#23303A;line-height:1.5;margin:var(--s2) 0 var(--s3);font-style:normal}
:root[lang="ar"] .path-side .smsg{font-family:"Riwaya",serif;font-size:16px}

/* Faculty band */
.faculty-band{text-align:center;padding:var(--s6) var(--s5)}
.faculty-band .eyebrow-dot{display:flex;align-items:center;justify-content:center;gap:var(--s2);margin-block-end:var(--s2);color:var(--gold-ink);font-family:var(--font-ui);font-weight:600;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase}
.faculty-band .eyebrow-dot::before,.faculty-band .eyebrow-dot::after{content:"";block-size:1px;background:var(--rule);flex:1;max-inline-size:120px}
.faculty-band h2{font-family:var(--font-display);font-weight:400;font-size:34px;margin:0 0 var(--s2);color:var(--ink)}
:root[lang="ar"] .faculty-band h2{font-family:"Zarid Display","Riwaya",serif;font-size:32px}
.faculty-band .dek2{font-family:var(--font-read);font-size:17px;color:var(--muted);max-width:48ch;margin:0 auto var(--s5);line-height:1.55}
:root[lang="ar"] .faculty-band .dek2{font-family:"Riwaya",serif;font-size:19px}
.faculty-row{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s4);max-width:880px;margin:0 auto}
@media(max-width:780px){.faculty-row{grid-template-columns:repeat(2,1fr)}}
.fcircle{display:flex;flex-direction:column;align-items:center;gap:var(--s2);text-decoration:none;color:inherit}
.fcircle .fp{aspect-ratio:1/1;inline-size:100%;border-radius:999px;background:var(--paper-alt);border:1px solid var(--rule);display:grid;place-items:center;font-family:var(--font-display);font-size:32px;color:var(--astral)}
.fcircle:hover .fp{border-color:var(--astral)}
.fcircle .fname{font-family:var(--font-read);font-size:15px;color:var(--ink);text-align:center}
:root[lang="ar"] .fcircle .fname{font-family:"Riwaya",serif;font-size:17px}
.fcircle .fspec{font-family:var(--font-ui);font-size:12px;color:var(--muted)}
.faculty-band .meet-all{display:inline-block;margin-block-start:var(--s5);font-family:var(--font-ui);font-weight:500;font-size:14px;color:var(--astral);text-decoration:none;border:1px solid var(--rule);border-radius:var(--radius);padding:8px 16px}
.faculty-band .meet-all::after{content:" \2192"}

/* Three Pillars */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);padding:var(--s5) var(--s5) var(--s7);max-width:1100px;margin:0 auto}
@media(max-width:780px){.pillars{grid-template-columns:1fr}}
.pillar{background:var(--paper-alt);border:1px solid var(--rule);border-radius:var(--radius);padding:var(--s5);text-decoration:none;color:inherit;display:block}
.pillar:hover{border-color:var(--astral)}
.pillar .roman{font-family:var(--font-display);font-size:42px;color:var(--gold-ink);line-height:1;margin-block-end:var(--s2)} /* gamboge->gold-ink: gold text on light must meet WCAG AA (CLAUDE.md). Design may revert + accept as a documented large-display exception. */
.pillar h3{font-family:var(--font-display);font-weight:400;font-size:26px;margin:0 0 var(--s2);color:var(--ink)}
:root[lang="ar"] .pillar h3{font-family:"Zarid Display","Riwaya",serif;font-size:24px}
.pillar .pdek{font-family:var(--font-read);font-size:16px;color:var(--muted);line-height:1.55;margin-block-end:var(--s3)}
:root[lang="ar"] .pillar .pdek{font-family:"Riwaya",serif;font-size:18px}
.pillar .popen{font-family:var(--font-ui);font-weight:500;font-size:13px;color:var(--astral)}
.pillar .popen::after{content:" \2192"}

/* A Seeker's Word — testimonial band */
.testimonial-band{background:var(--paper-alt);border-block-start:1px solid var(--rule);border-block-end:1px solid var(--rule);padding:var(--s7) var(--s5);text-align:center}
.testimonial-band .tl{font-family:var(--font-ui);font-weight:600;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);margin-block-end:var(--s4)}
.testimonial-band blockquote{font-family:var(--font-display);font-weight:400;font-size:32px;line-height:1.28;color:var(--ink);max-width:32ch;margin:0 auto var(--s4);font-style:normal}
:root[lang="ar"] .testimonial-band blockquote{font-family:"Zarid Display","Riwaya",serif;font-size:30px}
.testimonial-band cite{font-family:var(--font-ui);font-size:14px;color:var(--muted);font-style:normal}

/* Donor band — Astral background */
.donor-band{background:var(--astral);color:#fff;padding:var(--s7) var(--s5);text-align:center}
.donor-band .dlabel{font-family:var(--font-ui);font-weight:600;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gamboge);margin-block-end:var(--s3)}
.donor-band h2{font-family:var(--font-display);font-weight:400;font-size:34px;line-height:1.2;margin:0 auto var(--s3);max-width:24ch;color:#fff}
:root[lang="ar"] .donor-band h2{font-family:"Zarid Display","Riwaya",serif;font-size:32px}
.donor-band .ddek{font-family:var(--font-read);font-size:17px;color:rgba(255,255,255,.86);max-width:50ch;margin:0 auto var(--s5);line-height:1.55}
:root[lang="ar"] .donor-band .ddek{font-family:"Riwaya",serif;font-size:19px}
.donate-row{display:flex;gap:var(--s3);justify-content:center;flex-wrap:wrap;margin-block-end:var(--s3)}
.donate-btn{font-family:var(--font-ui);font-weight:600;font-size:14px;background:var(--gamboge);color:var(--ink);border:0;border-radius:var(--radius);padding:12px 24px;cursor:pointer;text-decoration:none;display:inline-block}
.donate-btn.other{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4)}
.donate-btn:hover{background:#d99607}
.donate-btn.other:hover{background:rgba(255,255,255,.08)}
.donor-band .zakat-link{font-family:var(--font-ui);font-size:14px;color:rgba(255,255,255,.86);text-decoration:underline;text-underline-offset:3px}

/* Active nav indicator — set by the header's inline JS (path-segment match) as
   .on + aria-current="page"; the part is static HTML so it can't be server-set.
   .nav-start keeps the design's always-gold "Start here" accent (v4-nav-start)
   WITHOUT faking the current-section marker. */
.nav a.on,.nav a[aria-current="page"]{color:var(--gold-ink);font-weight:600}
.nav a.nav-start{color:var(--gold-ink)}
.nav-drawer a.on,.nav-drawer a[aria-current="page"]{color:var(--gold-ink);font-weight:700}

/* ============ Pass 4 · CANONICAL HOME RE-BASE (2026-06-08) ============
   Re-based from design-export/SeekersGuidance Website v4.html ("Twin Doors").
   Type is bound to the COMMERCIAL token roles (Quarto/Lyon/Sohne · Zarid/Riwaya/Bukra)
   per the 2026-06-08 decision — NOT the export's libre Spectral/Source-Sans.
   The Quran verse is set in --font-quran (certified KFGQPC), honoring THE BRIGHT LINE
   (the export used Scheherazade; the certified mushaf font is the rule). */

/* utility strip above the main bar */
.util{border-block-end:1px solid var(--hair);background:var(--card)}
.util-inner{max-width:1100px;margin-inline:auto;padding:2px var(--s5);display:flex;align-items:center;gap:var(--s4);font-family:var(--font-ui);font-size:13px}
.util .zakat{color:var(--gold-ink);font-weight:600;text-decoration:none}
.util .util-right{margin-inline-start:auto;display:flex;gap:var(--s4);align-items:center}
/* padding-block gives every util link a ≥24px box (13px text + 12px padding) so the
   thin bar clears WCAG 2.5.8 target-size in BOTH directions (the RTL packing was
   flagged by axe). Padding, not min-height/flex-centering — the inflated-hit-box
   approach trips axe's obscuring heuristic. Bar height is unchanged (was 6px
   container padding; now 2px container + 6px link = same visual rhythm). */
.util-inner a,.util-inner button{display:inline-block;padding-block:6px}
.util a{color:var(--astral);text-decoration:none}
.util .langpair{color:var(--muted)}
/* Mobile: the five util items overflow 390px and wrap mid-label. Keep the two that
   are NOT duplicated in the nav drawer's utility section (the Zakat CTA + the
   language toggle); Atlas/Help/Sign-in live in the drawer below 900px. */
@media(max-width:760px){
  .util-inner{gap:var(--s3);padding-inline:var(--s4)}
  .util-inner a,.util-inner button{white-space:nowrap}
  .util .util-right a{display:none}
}

/* main bar: emblem + wordmark + 7-item nav + support button */
.bar-inner{gap:var(--s5)}
.emblem{inline-size:30px;block-size:30px;flex:none}
.brand{display:inline-flex;align-items:center;gap:var(--s2);font-family:var(--font-display);font-size:23px;color:var(--ink);text-decoration:none}
.brand .b-gold{color:var(--gold-ink)}
:root[lang="ar"] .brand{font-family:"Reem Kufi","Bukra",var(--font-ui);font-size:26px;color:var(--gold-ink)}
.nav a.on,.nav a[aria-current="page"]{position:relative}
.nav a.on::after,.nav a[aria-current="page"]::after{content:"";position:absolute;inset-inline:0;inset-block-end:-22px;block-size:2px;background:var(--gamboge)}
.support{margin-inline-start:var(--s3);background:var(--astral);color:#fff;font-family:var(--font-ui);font-weight:600;font-size:14px;text-decoration:none;padding:10px 18px;border-radius:var(--radius)}
.support:hover{background:var(--astral-700)}

/* split hero — text left, emblem-on-dark right */
.hero-split{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;max-width:1280px;margin-inline:auto}
@media(max-width:900px){.hero-split{grid-template-columns:1fr}}
.hero-split .hs-text{padding:var(--s7) var(--s6);display:flex;flex-direction:column;justify-content:center}
.hs-eyebrow{display:flex;align-items:center;gap:var(--s2);font-family:var(--font-ui);font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-block-end:var(--s4)}
:root[lang="ar"] .hs-eyebrow{letter-spacing:0}
.hs-eyebrow::before{content:"";inline-size:24px;block-size:2px;background:var(--gamboge)}
.hs-text h1{font-family:var(--font-display);font-weight:500;font-size:52px;line-height:1.08;margin:0 0 var(--s4);color:var(--ink);max-width:14ch}
:root[lang="ar"] .hs-text h1{font-family:"Zarid Display","Riwaya",serif;font-size:46px}
.hs-dek{font-family:var(--font-read);font-size:19px;line-height:1.55;color:#33424c;max-width:46ch;margin:0 0 var(--s6)}
:root[lang="ar"] .hs-dek{font-family:"Riwaya",serif;font-size:21px}
.hs-cta{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap}
.hs-cta .btn-gold{background:var(--gamboge);color:var(--ink);font-family:var(--font-ui);font-weight:600;font-size:15px;text-decoration:none;padding:13px 26px;border-radius:var(--radius)}
.hs-cta .btn-gold:hover{background:#d99607}
.hs-cta .ghost-link{font-family:var(--font-ui);font-size:15px;color:var(--astral);text-decoration:underline;text-underline-offset:3px}

.hs-panel{background:#13303F;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s5);padding:var(--s7) var(--s5);position:relative;overflow:hidden;min-block-size:420px}
.hs-panel .khatam-bg{position:absolute;inset:0;opacity:.10;background-image:radial-gradient(circle at 30% 30%,transparent 60%,rgba(236,166,8,.4) 61%,transparent 63%);background-size:160px 160px;pointer-events:none}
.hs-panel .emblem-lg{inline-size:150px;block-size:150px;position:relative}
.hs-panel .panel-rule{inline-size:48px;block-size:1px;background:rgba(236,166,8,.5)}
.hs-panel .panel-label{font-family:var(--font-ui);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gamboge);position:relative}
:root[lang="ar"] .hs-panel .panel-label{letter-spacing:0;font-family:var(--font-ui)}

/* verse band — Quran in the certified mushaf font, gold rule, English gloss */
.verse-band{max-width:1100px;margin-inline:auto;padding:var(--s5) var(--s6);display:flex;align-items:center;gap:var(--s4);border-block-start:1px solid var(--hair)}
.verse-band .vrule{inline-size:3px;align-self:stretch;background:var(--gamboge);flex:none}
.verse-band .ayah{font-family:var(--font-quran);direction:rtl;font-size:30px;line-height:2;color:var(--ink);margin:0}
.verse-band .gloss{font-family:var(--font-read);font-size:15px;color:var(--muted)}
:root[lang="ar"] .verse-band .gloss{font-family:"Riwaya",serif;font-size:17px}

/* ============ Footer (manuscript colophon) — .foot-* layout ============
   parts/footer.html uses de-prefixed .foot-* classes, but canonical.css styles
   only the v4-prefixed .v4-foot-* (and has no foot-col/foot-sign-brand), so the
   footer rendered unstyled. Self-contained layout here — base layer, no canonical
   conflict (different selectors). (BUILD-AUDIT — mobile/footer P0.) */
.foot{background:var(--paper-alt);border-block-start:1px solid var(--rule);color:var(--ink);padding:var(--s7) var(--s5) var(--s5)}
.foot-sign{display:grid;grid-template-columns:1.3fr 1fr;gap:var(--s6);max-width:1100px;margin-inline:auto;align-items:start}
.foot-mark{display:flex;align-items:center;gap:var(--s2);margin-block-end:var(--s3)}
.foot-wm{font-family:var(--font-display);font-size:24px;color:var(--ink)}
.foot-wm .guid{color:var(--gold-ink)}
:root[lang="ar"] .foot-wm{font-family:"Reem Kufi","Bukra",var(--font-ui);color:var(--gold-ink)}
.foot-tag{font-family:var(--font-read);font-size:15px;line-height:1.6;color:var(--muted);max-width:46ch;margin:0 0 var(--s4)}
:root[lang="ar"] .foot-tag{font-family:"Riwaya",serif;font-size:17px;line-height:1.9}
.foot-begin{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-ui);font-weight:600;font-size:14px;color:var(--astral);text-decoration:none}
.foot-verse{margin:0;text-align:end}
.foot-verse .ayah{font-family:var(--font-quran);direction:rtl;font-size:28px;line-height:2;color:var(--ink);margin:0 0 var(--s2)}
.foot-verse-gloss{font-family:var(--font-read);font-size:14px;color:var(--muted);display:flex;flex-direction:column;gap:4px}
.foot-inner{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5);max-width:1100px;margin:var(--s5) auto 0}
.foot-col h2{font-family:var(--font-ui);font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-ink);margin:0 0 var(--s3)} /* footer section headings: h2 (was h4) for heading-order; styled small by class */
.foot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.foot-col a{font-family:var(--font-ui);font-size:14px;color:var(--astral);text-decoration:none}
.foot-col a:hover{text-decoration:underline;text-underline-offset:3px}
.foot-legal{max-width:1100px;margin:var(--s5) auto 0;padding-block-start:var(--s4);border-block-start:1px solid var(--rule);display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);font-family:var(--font-ui);font-size:13px;color:var(--muted)}
.foot-cities{margin-inline-start:auto}
.keep-ltr{unicode-bidi:isolate;direction:ltr}
@media(max-width:900px){.foot-sign{grid-template-columns:1fr}.foot-verse{text-align:start}.foot-inner{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.foot-inner{grid-template-columns:1fr}.foot-legal{flex-direction:column}.foot-cities{margin-inline-start:0}}

/* ============ Mobile nav — burger + off-canvas drawer (<900px) ============
   The bar nav is 7 links + a support pill; below 900px collapse to a burger that
   opens a slide-in drawer (toggled by sgToggleNav() in parts/header.html via the
   [hidden] attribute). RTL slides from the inline-start. (BUILD-AUDIT — mobile P0.)
   900px matches the DESIGN masthead's collapse point (canonical .v4-nav-items is
   hidden at max-width:900px) — at 760px the 7 links + pill wrapped to two lines in
   the 761-900 band, worse in Arabic where the labels run longer. */
.burger{display:none}
.nav-scrim[hidden],.nav-drawer[hidden]{display:none}
@media(max-width:900px){
  .bar .nav,.bar .support{display:none}
  .burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;inline-size:44px;block-size:44px;margin-inline-start:auto;background:none;border:0;cursor:pointer}
  .burger span{inline-size:24px;block-size:2px;background:var(--ink);display:block}
  .nav-scrim{position:fixed;inset:0;background:rgba(15,27,34,.45);z-index:90}
  .nav-drawer{position:fixed;inset-block:0;inset-inline-end:0;inline-size:min(84vw,360px);background:var(--paper);border-inline-start:1px solid var(--rule);box-shadow:-8px 0 28px rgba(15,27,34,.14);z-index:91;padding:var(--s5) var(--s4);display:flex;flex-direction:column;gap:2px;overflow-y:auto}
  /* Position + border are logical (inset-inline-end / border-inline-start) so they
     auto-mirror to the LEFT under RTL; only the box-shadow's physical x-offset must flip. */
  [dir="rtl"] .nav-drawer{box-shadow:8px 0 28px rgba(15,27,34,.14)}
  .nav-drawer a,.nav-drawer .langpair{display:flex;align-items:center;min-block-size:44px;padding:6px 4px;font-family:var(--font-ui);font-size:16px;color:var(--ink);text-decoration:none;border-block-end:1px solid var(--hair)}
  .nav-drawer .langpair{background:none;border-inline:0;border-block-start:0;inline-size:100%;text-align:start;cursor:pointer;color:var(--muted)}
  .nav-drawer a.support{margin-block-start:var(--s3);background:var(--astral);color:#fff;justify-content:center;border-radius:var(--radius);border:0;font-weight:600}
  .nav-drawer hr{border:0;border-block-start:1px solid var(--rule);margin:var(--s3) 0}
}
@media(min-width:901px){.burger,.nav-drawer,.nav-scrim{display:none}}