/* TheQuran.com — one stylesheet for the whole site.
   Red, white, blue and black in an editorial-print register: black carries the
   structure, red is reserved for emphasis and never fills large areas, blue marks the
   second class of signal (repetition, provenance notes) so the two stay distinguishable.
   Light is the default; dark is opt-in via [data-theme="dark"], never the OS setting. */

/* v2 design tokens (2026-10). Warm paper, ink structure, one deep red used for emphasis
   and data, blue for the second signal, a muted gold only for verse ornaments. */
:root{
  --paper:#FAF8F4;--surface:#FFFFFF;--surface-2:#F3F0EA;--surface-3:#ECE7DE;
  --ink:#16181D;--ink-2:#3A404A;--muted:#6E7480;
  --rule:#E5E0D6;--rule-strong:#C8C0B2;
  --accent:#A8132D;--accent-ink:#860F24;--accent-wash:#F8E8EA;--accent-soft:#E7A9B3;
  --blue:#1E4F8A;--blue-wash:#E7EEF7;
  --gold:#9C7A36;
  --ok:#22704A;
  --shadow:0 1px 2px rgba(22,24,29,.04),0 4px 18px rgba(22,24,29,.05);
  --radius:12px;--radius-sm:7px;
  --measure:66ch;
  --sans:"Bricolage Grotesque",system-ui,sans-serif;
  --serif:"Source Serif 4",Georgia,serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --arabic:"Noto Naskh Arabic","Amiri",serif;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --paper:#0F1114;--surface:#171A1F;--surface-2:#1E2228;--surface-3:#262B32;
  --ink:#EEF0F3;--ink-2:#C4CAD3;--muted:#8D95A2;
  --rule:#2A2F37;--rule-strong:#404753;
  --accent:#EE6478;--accent-ink:#F496A4;--accent-wash:#341820;--accent-soft:#7C2B39;
  --blue:#86B2E8;--blue-wash:#16253A;
  --gold:#CDAE6E;
  --ok:#63C08F;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 22px rgba(0,0,0,.25);
  color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);margin:0;
  font-family:var(--serif);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.wrap{max-width:1200px;margin:0 auto;padding-inline:28px}
a{color:var(--accent-ink);text-underline-offset:2px}
a:hover{color:var(--accent)}


/* ---------- the Quran font ----------
   2026-10-14: KFGQPC fonts removed. The Arabic text is the Tanzil Ḥafṣ Uthmani text in plain
   Unicode, so an ordinary OpenType Quran face renders it: Amiri Quran (SIL OFL 1.1), with
   Scheherazade New (SIL OFL 1.1) as fallback. Licences: /fonts/OFL-*.txt. One face for every
   .atext; there is no non-Ḥafṣ running text any more (differences are shown word by word). */
@font-face{font-family:"Amiri Quran";src:url(/fonts/amiri-quran.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Scheherazade New";src:url(/fonts/scheherazade-new.woff2) format("woff2");font-display:swap}
:root{--quran:"Amiri Quran","Scheherazade New",serif}
.atext,.atext.hafs,.atext.shouba,.atext.qaloon,.atext.warsh,.atext.bazzi,.atext.qumbul,.atext.doori,.atext.soosi{font-family:var(--quran)}
.rd-form{font-family:"Scheherazade New","Amiri Quran",serif;font-size:1.25em}

/* masthead: see v2 layer at the end of this file */

/* ---------- headline stats ---------- */
.stats{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--rule)}
.stat{padding:15px 24px 14px 0;margin-right:24px;border-right:1px solid var(--rule)}
.stat:last-child{border-right:0;margin-right:0}
.stat b{display:block;font-family:var(--sans);font-size:1.45rem;font-weight:700;
  letter-spacing:-.02em;line-height:1.1}
.stat span{font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.stat.hot b{color:var(--accent)}

/* ---------- go-to: typed reference + explicit picker ---------- */
.goto{padding-block:18px 0}
.sbox{display:flex;align-items:center;border:2px solid var(--ink);border-radius:3px;background:var(--surface)}
.sbox:focus-within{border-color:var(--accent)}
.sbox input{flex:1;font-family:var(--sans);font-size:1rem;padding:13px 14px;border:0;
  background:transparent;color:var(--ink);outline:none;min-width:0}
.sbox .kbd{font-family:var(--mono);font-size:.62rem;color:var(--muted);
  border:1px solid var(--rule-strong);border-radius:3px;padding:2px 6px;margin-inline-end:11px}
.sbox .clear{font-family:var(--mono);font-size:.72rem;background:none;border:0;color:var(--muted);
  cursor:pointer;padding:0 10px 0 0}
.picker{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 12px;padding-block:12px}
.pf{display:flex;flex-direction:column;gap:5px}
.pf>span{font-family:var(--mono);font-size:.56rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.pf select{font-family:var(--sans);font-size:.86rem;padding:7px 9px;border:1px solid var(--rule-strong);
  border-radius:2px;background:var(--surface);color:var(--ink);max-width:260px;cursor:pointer}
.pf select:focus{outline:2px solid var(--accent);outline-offset:-1px}
.pf.narrow select{width:84px}
.dash{font-family:var(--mono);color:var(--muted);padding-bottom:8px}
button.open{font-family:var(--sans);font-weight:600;font-size:.86rem;background:var(--accent);color:#fff;
  border:1px solid var(--accent);border-radius:2px;padding:8px 16px;cursor:pointer}
:root[data-theme="dark"] button.open{color:#0E1013}
button.open:disabled{background:var(--surface-2);border-color:var(--rule-strong);color:var(--muted);cursor:not-allowed}
.wholebtn{font-family:var(--mono);font-size:.62rem;background:none;border:0;color:var(--blue);
  cursor:pointer;padding-bottom:9px;text-decoration:underline}
.preview{border:1px solid var(--accent);background:var(--accent-wash);border-radius:3px;padding:11px 14px;
  margin-bottom:6px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.preview.bad{border-color:var(--rule-strong);background:var(--surface-2)}
.preview b{font-family:var(--mono);font-size:.9rem;font-weight:600;color:var(--accent-ink)}
.preview.bad b{color:var(--ink-2)}
.preview .nm{font-family:var(--sans);font-size:.88rem}
.preview .n2{font-family:var(--mono);font-size:.68rem;color:var(--muted)}
.preview .warn{font-family:var(--mono);font-size:.64rem;color:var(--blue);
  border-inline-start:2px solid var(--blue);padding-inline-start:9px;flex-basis:100%}
.preview .go{margin-inline-start:auto;font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent-ink)}

/* ---------- control bar ---------- */
.bar{display:flex;flex-wrap:wrap;gap:16px 26px;padding-block:12px 14px;align-items:flex-start;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.grp{display:flex;flex-direction:column;gap:6px}
.grp>span{font-family:var(--mono);font-size:.56rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chip{font-family:var(--sans);font-size:.78rem;font-weight:500;background:var(--surface);color:var(--ink-2);
  border:1px solid var(--rule-strong);border-radius:2px;padding:5px 10px;cursor:pointer;
  text-decoration:none;display:inline-block;line-height:1.4}
.chip:hover{border-color:var(--accent);color:var(--accent-ink)}
.chip[aria-pressed="true"],.chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
:root[data-theme="dark"] .chip[aria-pressed="true"],
:root[data-theme="dark"] .chip.on{color:#0E1013}
.count{font-family:var(--mono);font-size:.66rem;color:var(--muted);padding-block:11px 4px}
.count b{color:var(--accent)}

/* ---------- index table ---------- */
table.index{width:100%;border-collapse:collapse;margin-bottom:56px}
table.index thead th{position:sticky;top:0;background:var(--paper);z-index:10;font-family:var(--mono);
  font-size:.57rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:left;
  padding:9px 10px;border-bottom:2px solid var(--ink);cursor:pointer;white-space:nowrap;user-select:none}
table.index thead th:hover{color:var(--accent)}
table.index thead th[aria-sort]{color:var(--accent)}
table.index th.num,table.index td.num{text-align:right}
table.index tbody tr{border-bottom:1px solid var(--rule)}
table.index tbody tr:hover{background:var(--surface-2)}
table.index tbody td{padding:9px 10px;vertical-align:middle}
td.n{font-family:var(--mono);font-size:.82rem;font-weight:600;width:1%}
td.n a{color:var(--accent);text-decoration:none}
td.ar{font-family:"Noto Naskh Arabic","Times New Roman",serif;font-size:1.12rem;direction:rtl;
  text-align:right;white-space:nowrap;width:1%}
td.name{min-width:186px}
td.name a{font-family:var(--sans);font-weight:600;font-size:.92rem;display:block;letter-spacing:-.01em;
  color:var(--ink);text-decoration:none}
td.name a:hover{color:var(--accent)}
td.name i{font-style:normal;color:var(--muted);font-size:.8rem}
.pill{font-family:var(--mono);font-size:.57rem;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid var(--rule-strong);color:var(--muted);border-radius:2px;padding:2px 6px;white-space:nowrap}
.pill.mk{border-color:var(--blue);color:var(--blue);background:var(--blue-wash)}
.pill.md{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-wash)}
td.v{font-family:var(--mono);font-size:.8rem;white-space:nowrap}
td.v .sp{color:var(--accent);font-weight:600;cursor:help}
.bar-cell{min-width:102px}
.bw{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.76rem}
.bw .t{width:3.2em;text-align:right;flex:none}
.bw .r{flex:1;height:7px;background:var(--surface-2);border-radius:1px;overflow:hidden;min-width:32px}
.bw .r i{display:block;height:100%;background:var(--accent);border-radius:1px}
.bw.b .r i{background:var(--blue)}
.bw.z .t{color:var(--rule-strong)}
.bw.z .r{opacity:.35}
tr.gh td{background:var(--surface-2);font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-2);padding:8px 10px;border-bottom:1px solid var(--rule-strong)}
tr.gh td em{font-style:normal;color:var(--muted);text-transform:none;letter-spacing:0;
  font-family:var(--serif);font-size:1.05rem}
.empty{padding:40px 10px;color:var(--muted);font-family:var(--sans)}

/* ---------- reading view ---------- */
.soorahead{padding-block:26px 6px}
.soorahead h1{font-family:var(--sans);font-weight:700;font-size:clamp(1.5rem,1.2rem + 1.4vw,2.1rem);
  margin:0;letter-spacing:-.02em;line-height:1.1}
.soorahead h1 .ar{font-family:"Noto Naskh Arabic",serif;color:var(--accent-ink);margin-inline-start:.5em}
.facts{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:12px;font-family:var(--mono);
  font-size:.68rem;color:var(--muted)}
.facts b{color:var(--ink);font-weight:600}
.intro{color:var(--ink-2);font-size:.95rem;max-width:var(--measure);margin:14px 0 0;font-family:var(--serif)}
.intro .byline{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.nobrief{font-family:var(--mono);font-size:.64rem;color:var(--muted);margin-top:14px;
  border-inline-start:2px solid var(--rule-strong);padding-inline-start:10px;max-width:var(--measure)}

.verses{display:flex;flex-direction:column;padding-block:8px 60px;max-width:820px}
.verse{border-top:1px solid var(--rule);padding-block:20px}
.vhead{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:12px}
.vref{font-family:var(--mono);font-size:.78rem;font-weight:600;letter-spacing:.02em}
.vref a{color:var(--accent);text-decoration:none}
.tag{font-family:var(--mono);font-size:.6rem;letter-spacing:.09em;text-transform:uppercase;padding:2px 7px;
  border-radius:2px;border:1px solid var(--rule-strong);color:var(--muted);background:var(--surface)}
.tag.num{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-wash)}
.tag.rep{border-color:var(--blue);color:var(--blue);background:var(--blue-wash)}
.line{display:grid;grid-template-columns:1fr;gap:4px;padding:11px 0;border-bottom:1px dashed var(--rule)}
.line:last-of-type{border-bottom:0}
.lmeta{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.lname{font-family:var(--sans);font-size:.74rem;font-weight:600;color:var(--muted);min-width:52px}
.lnative{font-family:var(--mono);font-size:.64rem;color:var(--accent-ink);background:var(--accent-wash);
  border:1px solid var(--accent);border-radius:2px;padding:1px 6px}
.lscan{font-family:var(--mono);font-size:.62rem;color:var(--muted)}
.lnone{font-family:var(--mono);font-size:.68rem;color:var(--muted)}
.atext{direction:rtl;text-align:right;font-size:1.62rem;line-height:2.25;color:var(--ink);
  padding-block:2px;overflow-wrap:break-word;font-family:"Noto Naskh Arabic",serif}
/* a transmission with no font of its own falls back above; every riwaya we ship has one */
.trans{margin-top:12px;display:flex;flex-direction:column;gap:9px}
.tr{padding-inline-start:12px;border-inline-start:2px solid var(--rule-strong)}
.tr .lbl{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.tr .lbl .cc{border:1px solid;border-radius:2px;padding:0 5px;font-size:.92em;color:var(--ok)}
.tr .body{font-family:var(--serif);font-size:1rem;color:var(--ink-2);margin-top:3px}

/* ---------- notices & footer ---------- */
.notice{border:1px solid var(--blue);background:var(--blue-wash);border-radius:3px;padding:11px 14px;
  font-family:var(--mono);font-size:.66rem;color:var(--blue);margin-block:14px;max-width:var(--measure)}
.notice b{font-weight:600}
footer.site{border-top:1px solid var(--rule);padding-block:18px 50px;font-family:var(--mono);
  font-size:.62rem;color:var(--muted);line-height:1.8}
footer.site b{color:var(--ink-2)}

@media(max-width:820px){
  table.index thead{display:none}
  table.index,table.index tbody,table.index tr,table.index td{display:block;width:100%}
  table.index tbody tr{padding-block:12px}
  table.index tbody td{padding:2px 0}
  td.n,td.ar{display:inline-block;width:auto;text-align:left;margin-inline-end:10px}
  .bar-cell{min-width:0}
  .bw .t{width:auto}
  .bw::after{content:attr(data-lbl);font-size:.6rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
  .bw .r{display:none}
  .pf select{max-width:100%}
  .atext{font-size:1.38rem;line-height:2.1}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- chronology section ---------- */
.prose{max-width:var(--measure);padding-block:18px 4px}
.prose p{margin:0 0 12px}
.secttl{font-family:var(--sans);font-size:1.05rem;font-weight:700;letter-spacing:-.01em;
  margin:26px 0 10px;padding-bottom:6px;border-bottom:2px solid var(--ink)}
.schemes{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));margin-bottom:10px}
.scheme{border:1px solid var(--rule);border-radius:3px;padding:13px 15px;background:var(--surface)}
.scheme.draft{border-style:dashed;border-color:var(--accent);background:var(--accent-wash)}
.shead{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-bottom:5px}
.shead b{font-family:var(--sans);font-size:.95rem;letter-spacing:-.01em}
.smeta{font-family:var(--mono);font-size:.64rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.scite{font-family:var(--serif);font-size:.82rem;color:var(--ink-2);margin-top:7px;font-style:italic}
.snote{font-family:var(--mono);font-size:.64rem;line-height:1.7;color:var(--ink-2);margin-top:9px;
  padding-top:9px;border-top:1px solid var(--rule);white-space:pre-wrap}
.period{font-family:var(--mono);font-size:.56rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.unplaced{color:var(--rule-strong);cursor:help}

/* ---------- compilation timeline ----------
   Marks encode the KIND of evidence by shape, never by hue. A two-colour split would
   read as scoring the evidence good and bad; filled-vs-hollow is the long-standing
   convention for attested-vs-reported and carries no verdict. Both marks therefore sit
   in ink, and the only colour on the chart is the origin rule. */
.legend{display:flex;flex-wrap:wrap;gap:8px 20px;font-family:var(--mono);font-size:.64rem;
  color:var(--muted);padding-block:10px 4px;align-items:center}
.legend span{display:flex;align-items:center;gap:6px}
figure.chart{margin:8px 0 22px;padding:0}
figure.chart svg{width:100%;height:auto;display:block}
figure.chart figcaption{font-family:var(--mono);font-size:.62rem;color:var(--muted);
  line-height:1.7;margin-top:6px;max-width:var(--measure)}
.tl .axis{stroke:var(--rule-strong);stroke-width:2}
.tl .tick{stroke:var(--rule-strong);stroke-width:1}
.tl .ticklbl{font-family:var(--mono);font-size:10px;fill:var(--muted);text-anchor:middle}
.tl .origin{stroke:var(--accent);stroke-width:1.5;stroke-dasharray:3 3}
.tl .originlbl{font-family:var(--mono);font-size:10px;fill:var(--accent);text-anchor:middle}
.tl .gaplbl{font-family:var(--mono);font-size:10px;fill:var(--muted);text-anchor:middle;font-style:italic}
.tl .stem{stroke:var(--rule-strong);stroke-width:1}
.tl .rangebar{stroke:var(--ink-2);stroke-width:5;stroke-linecap:round;opacity:.28}
.tl .evlbl{font-family:var(--sans);font-size:10.5px;fill:var(--ink-2);text-anchor:middle}
.m-doc {fill:var(--ink);stroke:var(--paper);stroke-width:2}
.m-trad{fill:var(--paper);stroke:var(--ink-2);stroke-width:2}
.m-disp{fill:var(--paper);stroke:var(--ink-2);stroke-width:2;stroke-dasharray:2.5 2}
.phasettl{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin:22px 0 8px}
.ev{border-top:1px solid var(--rule);padding-block:14px;max-width:var(--measure)}
.evhead{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:baseline;margin-bottom:7px}
.evhead b{font-family:var(--sans);font-size:1rem;letter-spacing:-.01em}
.evyear{font-family:var(--mono);font-size:.66rem;color:var(--accent);font-weight:600;
  min-width:11ch}
.evar{font-family:"Noto Naskh Arabic",serif;font-size:.95rem;color:var(--muted);direction:rtl}
.evbody{margin:0 0 9px;color:var(--ink-2);font-size:.95rem}
.evmeta{font-family:var(--mono);font-size:.62rem;line-height:1.8;color:var(--muted);
  border-inline-start:2px solid var(--rule);padding-inline-start:11px}
.evmeta b{color:var(--ink-2)}
.ev-documented .evyear{color:var(--blue)}
@media(max-width:820px){ .tl .evlbl{font-size:13px} .evyear{min-width:0} }

/* ---------- word by word & comparison panel ---------- */
details.wbw,details.cmp{margin-top:10px;border-top:1px dashed var(--rule)}
details.wbw>summary,details.cmp>summary{cursor:pointer;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);padding:8px 0;display:flex;gap:8px;align-items:center}
.heldtag{font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink);
  background:var(--accent-wash);border:1px solid var(--accent);border-radius:2px;padding:0 5px}
.chip.held{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-wash)}
ol.words{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 10px}
ol.words li{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:56px;
  padding:6px 8px;border:1px solid var(--rule);border-radius:3px;background:var(--surface)}
.wa{font-family:"Noto Naskh Arabic",serif;font-size:1.35rem;line-height:1.9;color:var(--ink)}
.wt{font-family:var(--mono);font-size:.66rem;color:var(--muted)}
.wg{font-family:var(--serif);font-size:.8rem;color:var(--ink-2);max-width:14ch}
.wm{font-family:"Noto Naskh Arabic",serif;font-size:.8rem;color:var(--blue);display:flex;gap:6px}
.wn{font-family:var(--mono);font-size:.55rem;color:var(--muted)}
.held{outline:1px dashed var(--accent);outline-offset:1px}
.cmpgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;padding-bottom:6px}
.cmpcol{padding-inline-start:10px;border-inline-start:2px solid var(--rule-strong)}
.cmpcol .lbl{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.cmpcol .lbl .cc{border:1px solid;border-radius:2px;padding:0 5px;color:var(--ok)}
.cmpcol .body{font-family:var(--serif);font-size:.95rem;color:var(--ink-2);margin-top:3px}
.cmpcol .body.gl .sep{color:var(--rule-strong)}
.mapnote{font-family:var(--mono);font-size:.58rem;color:var(--muted);margin-top:3px}

/* =====================================================================================
   v2 DESIGN LAYER (2026-10). Later rules here refine the components above; new
   components (landing, cards, charts) live only here.
   ===================================================================================== */

.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--ink);color:var(--paper);padding:8px 12px;border-radius:6px}
.skip:focus{left:12px}
::selection{background:var(--accent-wash);color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
a{color:var(--accent-ink);text-decoration-thickness:1px;text-underline-offset:3px}
h1,h2,h3{font-family:var(--sans);letter-spacing:-.02em;line-height:1.15;color:var(--ink)}
.eyebrow{display:inline-block;font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent)}

/* ---------- masthead ---------- */
header.masthead{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--rule)}
.mh-row{display:flex;align-items:center;gap:28px;min-height:64px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand-mark{width:30px;height:30px;flex:none}
.bm-bg{fill:var(--accent-ink)}
.bm-ln{stroke:#fff;stroke-width:1.7;fill:none;stroke-linejoin:round}
.bm-dot{fill:#E9C77B}
:root[data-theme="dark"] .bm-bg{fill:var(--accent)}
:root[data-theme="dark"] .bm-ln{stroke:#140A0D}
:root[data-theme="dark"] .bm-dot{fill:#3A1018}
.brand-name{font-family:var(--sans);font-weight:700;font-size:1.22rem;letter-spacing:-.025em}
.brand-name span{color:var(--muted);font-weight:500}
nav.site{display:flex;gap:4px;margin-inline-start:auto;font-family:var(--sans);font-size:.95rem;padding:0;border:0}
nav.site a{color:var(--ink-2);text-decoration:none;padding:8px 13px;border-radius:999px;font-weight:500;transition:background .15s,color .15s}
nav.site a:hover{background:var(--surface-2);color:var(--ink)}
nav.site a[aria-current]{color:var(--accent-ink);background:var(--accent-wash);box-shadow:none;font-weight:600}
.themebtn{width:38px;height:38px;border-radius:999px;border:1px solid var(--rule);background:var(--surface);color:var(--ink-2);
  display:grid;place-items:center;cursor:pointer;flex:none}
.themebtn:hover{border-color:var(--rule-strong);color:var(--ink)}
.themebtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.themebtn .i-sun{display:none}
:root[data-theme="dark"] .themebtn .i-sun{display:block}
:root[data-theme="dark"] .themebtn .i-moon{display:none}

/* ---------- page head (inner pages) ---------- */
.pagehead{padding:34px 0 22px;display:flex;flex-direction:column;gap:8px;border-bottom:1px solid var(--rule)}
.pagehead .lede{margin:0;font-family:var(--serif);font-size:1.15rem;line-height:1.5;color:var(--ink-2);max-width:60ch}

/* ---------- headline stats band (inner pages) ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;border:0;margin:22px 0 6px}
.stat{padding:16px 18px;margin:0;border:1px solid var(--rule);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow)}
.stat:last-child{border:1px solid var(--rule)}
.stat b{font-size:2rem;letter-spacing:-.03em;margin-bottom:4px}
.stat span{font-size:.68rem;letter-spacing:.09em}
.stat.hot b{color:var(--accent)}

/* ---------- controls ---------- */
.sbox{border:1px solid var(--rule-strong);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow)}
.sbox:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)}
.sbox input{font-size:1.05rem;padding:15px 16px}
.pf>span,.grp>span{font-size:.66rem;letter-spacing:.11em}
.pf select{border-radius:var(--radius-sm);padding:8px 10px;font-size:.92rem}
.pf.narrow select{width:92px}
#pToSuraWrap select{width:auto;min-width:190px;max-width:260px}
button.open{border-radius:var(--radius-sm);padding:9px 20px;font-size:.92rem}
.wholebtn{font-size:.72rem}
.preview{border-radius:var(--radius-sm)}
.bar{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding-block:16px;gap:16px 30px}
.chip{border-radius:999px;padding:6px 13px;font-size:.84rem;border-color:var(--rule-strong);transition:all .15s}
.chip[aria-pressed="true"],.chip.on{background:var(--accent-ink);border-color:var(--accent-ink);color:#fff}
:root[data-theme="dark"] .chip[aria-pressed="true"],:root[data-theme="dark"] .chip.on{background:var(--accent);border-color:var(--accent);color:#16080B}
.count{font-size:.72rem}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-weight:600;font-size:1rem;padding:12px 22px;
  border-radius:999px;border:1px solid var(--rule-strong);color:var(--ink);background:var(--surface);text-decoration:none;transition:all .15s}
.btn:hover{border-color:var(--ink);color:var(--ink)}
.btn.primary{background:var(--accent-ink);border-color:var(--accent-ink);color:#fff}
.btn.primary:hover{background:var(--accent);border-color:var(--accent);color:#fff}
:root[data-theme="dark"] .btn.primary{background:var(--accent);border-color:var(--accent);color:#16080B}

/* ---------- index table ---------- */
table.index{border-collapse:separate;border-spacing:0}
table.index thead th{font-size:.66rem;background:var(--paper);border-bottom:1px solid var(--ink);padding:12px 10px}
table.index thead th{top:64px}
table.index tbody tr td{border-bottom:1px solid var(--rule)}
table.index tbody td{padding:11px 10px}
td.ar{font-family:var(--arabic);font-size:1.3rem;line-height:1.5}
td.name a{font-size:1rem}
.pill{font-size:.64rem;border-radius:999px;padding:2px 9px}
.bw .r{height:8px;border-radius:999px}
.bw .r i{border-radius:999px}
td.v,.bw{font-size:.82rem}

/* ---------- reading view ---------- */
.soorahead{padding-block:36px 10px}
.soorahead h1{font-size:clamp(2rem,1.4rem + 2vw,3rem)}
.soorahead h1 .ar{font-family:var(--arabic);font-weight:400;color:var(--accent-ink);font-size:1.05em}
.facts{font-size:.76rem;gap:8px 24px;margin-top:14px}
.verses{max-width:900px;padding-top:14px}
.verse{border:1px solid var(--rule);border-radius:var(--radius);background:var(--surface);padding:22px 26px;margin-bottom:16px;box-shadow:var(--shadow)}
.verse:target{border-color:var(--accent-soft);box-shadow:0 0 0 3px var(--accent-wash)}
.tag{font-size:.64rem;border-radius:999px;padding:2px 9px}
.vref{font-size:.9rem}
.lname{font-size:.8rem}
.lscan{font-size:.68rem}
.atext{font-size:2rem;line-height:2.4;color:var(--ink);word-spacing:.04em;padding-block:6px 2px}
.atext .vnum{color:var(--gold);font-size:.92em;margin-inline-start:.15em;white-space:nowrap}
.tr{border-inline-start:3px solid var(--accent-soft);padding-inline-start:16px}
.tr .lbl{font-size:.66rem}
.tr .body{font-size:1.08rem;line-height:1.65;color:var(--ink)}
.notice{border-radius:var(--radius-sm);font-size:.74rem;line-height:1.6}
.pv-banner,.nk-banner{border:1px dashed var(--accent)!important;background:var(--accent-wash)!important;border-radius:var(--radius-sm);
  padding:12px 16px;margin:18px 0;font-family:var(--mono);font-size:.78rem;color:var(--accent-ink);line-height:1.6}
.pv-tag{display:inline-block;font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);border:1px solid var(--accent-soft);border-radius:999px;padding:0 7px;margin-inline-start:4px;vertical-align:1px}

/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--rule);background:var(--surface-2);margin-top:64px;padding:44px 0 56px;
  font-family:var(--sans);font-size:.88rem;color:var(--muted);line-height:1.65}
.ft-grid{display:grid;grid-template-columns:1.2fr .6fr 1.6fr;gap:36px}
.ft-about p{margin:10px 0 0;max-width:36ch;font-family:var(--serif);font-size:.95rem;color:var(--ink-2)}
.ft-links{display:flex;flex-direction:column;gap:6px}
.ft-links b,.ft-notes b{color:var(--ink);font-weight:600}
.ft-links a{color:var(--ink-2);text-decoration:none}
.ft-links a:hover{color:var(--accent)}
.ft-notes{font-family:var(--mono);font-size:.72rem;line-height:1.8;display:flex;flex-direction:column;gap:10px}
.ft-notes b{font-family:var(--mono)}

/* ---------- section titles, prose ---------- */
.secttl,.sec-h{font-family:var(--sans);font-size:1.45rem;font-weight:700;letter-spacing:-.02em;margin:44px 0 16px;padding:0;border:0}
.prose{font-size:1.06rem}
.legend{font-size:.72rem}
figure.chart figcaption{font-size:.72rem}
.scheme{border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow)}
.ev{padding-block:18px}
.evbody{font-size:1.02rem}
.evmeta{font-size:.7rem}
.phasettl{font-size:.72rem}

/* ---------- compilation: expanded band, numbered marks + key ---------- */
.tl .numlbl{font-family:var(--mono);font-size:11px;font-weight:600;fill:var(--ink);text-anchor:middle;dominant-baseline:central}
.tl .m-doc + .numlbl,.tl .numlbl.inv{fill:var(--paper)}
.tl-key{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:2px 26px}
.tl-key li{display:grid;grid-template-columns:28px 64px 1fr;align-items:baseline;gap:8px;padding:7px 0;border-bottom:1px solid var(--rule);font-size:.95rem}
.tl-key .k{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:999px;font-family:var(--mono);font-size:.72rem;font-weight:600;
  border:2px solid var(--ink-2);color:var(--ink);background:var(--paper)}
.tl-key .k.doc{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.tl-key .k.disp{border-style:dashed}
.tl-key .y{font-family:var(--mono);font-size:.74rem;color:var(--muted)}
.tl-key a{color:var(--ink);text-decoration:none;font-family:var(--sans);font-weight:500}
.tl-key a:hover{color:var(--accent)}

/* ---------- abrogation: authority bars as HTML (used on /naskh and the landing page) ---------- */
.nk-chart{border:1px solid var(--rule)!important;border-radius:var(--radius);background:var(--surface);padding:18px 20px!important;box-shadow:var(--shadow);margin:14px 0!important}
.nk-chart h3{font-size:.7rem!important;margin-bottom:12px!important}
.nk-big{gap:12px!important}
.nk-big a{border-radius:var(--radius);background:var(--surface);padding:16px 18px!important;box-shadow:var(--shadow)}
.nk-big b{font-size:2.1rem!important;letter-spacing:-.03em}
.nk-big span{font-size:.66rem!important;line-height:1.5}
.nk-arow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;padding:12px 0;border-bottom:1px solid var(--rule)}
.nk-arow:last-of-type{border-bottom:0}
.nk-arow .who{font-family:var(--sans);font-size:1rem;font-weight:600;color:var(--ink);text-decoration:none}
.nk-arow .who:hover{color:var(--accent)}
.nk-arow .who small{font-family:var(--serif);font-weight:400;font-size:.88rem;color:var(--muted);margin-inline-start:6px}
.nk-arow .fig{font-family:var(--mono);font-size:.8rem;font-weight:600;color:var(--ink);text-align:end;white-space:nowrap}
.nk-arow .trk{grid-column:1/-1;position:relative;height:12px;background:var(--surface-2);border-radius:999px;overflow:hidden}
.nk-arow .trk i{position:absolute;left:0;top:0;bottom:0;display:block;border-radius:999px}
.nk-arow .trk .bar{background:var(--accent);padding:0;border:0;margin:0;gap:0}
.nk-arow .trk .bar.acc{background:var(--accent-ink);top:2px;bottom:2px}
.nk-arow .trk .bar.exam{background:var(--accent-wash);box-shadow:inset 0 0 0 1px var(--accent-soft)}
.nk-arow .trk .bar.unv{background:repeating-linear-gradient(-45deg,var(--accent) 0 3px,var(--accent-soft) 3px 6px)}
.nk-arow .trk .rng{background:transparent;border-block:2px solid var(--accent);top:5px;bottom:5px;border-radius:0}
.nk-arow .cite{grid-column:1/-1;font-family:var(--mono);font-size:.7rem;color:var(--muted);line-height:1.5}
.nk-arow .cite .tag{font-size:.58rem;color:var(--accent);border-color:var(--accent-soft);background:transparent;margin-inline-start:4px}

/* ---------- LANDING ---------- */
.home .wrap>.pv-banner{margin-top:22px}
.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center;padding:64px 0 44px}
.hero h1{font-size:clamp(2.6rem,1.6rem + 3.4vw,4.3rem);font-weight:700;letter-spacing:-.035em;line-height:1.02;margin:16px 0 18px}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero-lede{font-size:1.25rem;line-height:1.55;color:var(--ink-2);margin:0 0 28px;max-width:34ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.hero-go{display:flex;margin-top:22px;max-width:440px;border:1px solid var(--rule-strong);border-radius:999px;background:var(--surface);overflow:hidden}
.hero-go:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)}
.hero-go input{flex:1;min-width:0;border:0;background:transparent;padding:12px 18px;font-family:var(--mono);font-size:.86rem;color:var(--ink);outline:none}
.hero-go button{border:0;background:transparent;color:var(--accent-ink);font-size:1.2rem;padding:0 18px;cursor:pointer}
.feature{margin:0;background:var(--surface);border:1px solid var(--rule);border-radius:18px;padding:28px 32px 22px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.feature::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,var(--accent-ink),var(--accent),var(--gold))}
.feature-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.feature-note{font-family:var(--serif);font-style:italic;font-size:.92rem;color:var(--muted)}
.feature-ar{font-size:1.95rem;line-height:2.25;text-align:right;color:var(--ink)}
.feature-en{margin:12px 0 0;padding:14px 0 0;border-top:1px solid var(--rule);font-family:var(--serif);font-size:1.02rem;line-height:1.6;color:var(--ink-2)}
.feature-en sup{font-family:var(--mono);font-size:.62rem;color:var(--accent);margin-inline-end:3px}
.feature-foot{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:16px;font-family:var(--mono);font-size:.72rem;color:var(--muted)}
.feature-foot a{text-decoration:none;font-weight:600}

.kpis{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--rule);border-radius:18px;background:var(--surface);box-shadow:var(--shadow);overflow:hidden}
.kpi{display:flex;flex-direction:column;padding:22px 22px 20px;text-decoration:none;color:var(--ink);border-inline-start:1px solid var(--rule);transition:background .15s}
.kpi:first-child{border-inline-start:0}
.kpi:hover{background:var(--surface-2)}
.kpi b{font-family:var(--sans);font-size:clamp(1.9rem,1.4rem + 1.4vw,2.7rem);font-weight:700;letter-spacing:-.035em;line-height:1.05}
.kpi span{font-family:var(--sans);font-weight:600;font-size:.95rem;margin-top:6px}
.kpi small{font-family:var(--mono);font-size:.68rem;color:var(--muted);margin-top:6px;line-height:1.45}
.kpi.hot b{color:var(--accent)}
.kpi.review b{font-size:clamp(1.4rem,1.1rem + 1vw,1.9rem);color:var(--muted);font-weight:600;padding-block:6px 2px}

.dashboard{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:28px}
.card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);padding:24px 26px;box-shadow:var(--shadow);display:flex;flex-direction:column;min-width:0}
.card.span-2{grid-column:span 2}
.card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:6px}
.card-head h2{font-size:1.28rem;font-weight:700;margin:6px 0 0}
.card-head .more,.card-foot a{font-family:var(--sans);font-weight:600;font-size:.88rem;text-decoration:none;white-space:nowrap}
.card-sub{margin:4px 0 14px;font-size:.95rem;color:var(--ink-2)}
.card-foot{margin:auto 0 0;padding-top:16px;font-size:.88rem;color:var(--muted);line-height:1.5}

.auth-bars{list-style:none;margin:0;padding:0}
.ab-row{display:grid;grid-template-columns:200px minmax(0,1fr) 196px;gap:2px 16px;align-items:center;padding:9px 0;border-bottom:1px solid var(--rule)}
.ab-row:last-child{border-bottom:0}
.ab-who b{font-family:var(--sans);font-weight:600;font-size:.94rem;color:var(--ink)}
.ab-who span{display:block;font-family:var(--mono);font-size:.66rem;color:var(--muted)}
.ab-track{position:relative;height:14px;background:var(--surface-2);border-radius:999px;overflow:hidden}
.ab-track i,.lg{display:block;border-radius:999px}
.ab-track i{position:absolute;left:0;top:0;bottom:0}
.ab-m{background:var(--accent)}
.ab-ex + .ab-m{top:3px!important;bottom:3px!important;background:var(--accent-ink)}
.ab-ex{background:var(--accent-wash);box-shadow:inset 0 0 0 1px var(--accent-soft)}
.ab-m.unv{background:repeating-linear-gradient(-45deg,var(--accent) 0 3px,var(--accent-soft) 3px 6px)}
.ab-track .ab-rng{background:transparent;border-radius:0;border-block:2px solid var(--accent);top:5px;bottom:5px}
.ab-num{font-family:var(--mono);font-size:.76rem;color:var(--muted);text-align:right;line-height:1.35}
.ab-num b{font-family:var(--sans);font-size:1.1rem;color:var(--ink);letter-spacing:-.02em}
.ab-num span{color:var(--accent-ink);font-weight:600}
.ab-num em{display:block;font-style:normal;font-size:.68rem}
.ab-cite{grid-column:2/-1;font-family:var(--mono);font-size:.66rem;color:var(--muted);line-height:1.45}
.ab-cite i{font-family:var(--serif);font-size:.82rem}
.legend-row{display:flex;flex-wrap:wrap;gap:6px 18px;margin:12px 0 0;font-family:var(--mono);font-size:.68rem;color:var(--muted)}
.legend-row span{display:inline-flex;align-items:center;gap:6px}
.lg{width:22px;height:9px}

.review-state{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:28px;align-items:center;padding:18px 0 6px}
.review-state b{font-family:var(--sans);font-size:1.15rem}
.review-state p{margin:6px 0 10px;color:var(--ink-2);font-size:.98rem}
.review-state a{font-family:var(--sans);font-weight:600;font-size:.9rem;text-decoration:none}
.ghost-bars{display:flex;flex-direction:column;gap:9px}
.ghost-bars i{display:block;height:12px;border-radius:999px;background:linear-gradient(90deg,var(--surface-3),var(--surface-2));
  border:1px dashed var(--rule-strong)}

.donut-wrap{display:flex;align-items:center;gap:22px;margin:12px 0 4px}
.donut{width:150px;height:150px;flex:none}
.donut circle{fill:none;stroke-width:13}
.d-track{stroke:var(--surface-2)}
.d-mk{stroke:var(--accent)}
.d-md{stroke:var(--blue)}
.d-big{font-family:var(--sans);font-size:19px;font-weight:700;fill:var(--ink);text-anchor:middle;letter-spacing:-.5px}
.d-sm{font-family:var(--mono);font-size:6.4px;fill:var(--muted);text-anchor:middle;letter-spacing:.3px;text-transform:uppercase}
.split{margin:0;display:flex;flex-direction:column;gap:14px}
.split dt{font-family:var(--sans);font-weight:600;font-size:.95rem;display:flex;align-items:center;gap:8px}
.split dd{margin:2px 0 0 18px;font-family:var(--mono);font-size:.74rem;color:var(--muted)}
.split dd b{font-family:var(--sans);font-size:1.05rem;color:var(--ink)}
.sw{width:10px;height:10px;border-radius:3px;display:inline-block}
.sw.mk{background:var(--accent)}.sw.md{background:var(--blue)}

.dotplot{display:flex;flex-direction:column;gap:12px;margin:16px 0 4px}
.dp-row{display:grid;grid-template-columns:52px minmax(0,1fr);grid-template-areas:"n line" ". who";gap:2px 12px;align-items:center}
.dp-n{grid-area:n;font-family:var(--sans);font-weight:700;font-size:1.02rem}
.dp-line{grid-area:line;position:relative;height:2px;background:var(--rule);margin-inline:7px}
.dp-line i{position:absolute;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:999px;background:var(--accent);box-shadow:0 0 0 3px var(--surface)}
.dp-who{grid-area:who;font-family:var(--mono);font-size:.68rem;color:var(--muted)}

.gapbars{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.gapbars li{display:grid;grid-template-columns:230px minmax(0,1fr) 90px;align-items:center;gap:16px}
.gb-lbl{font-family:var(--sans);font-weight:600;font-size:.95rem}
.gb-lbl em{display:block;font-style:normal;font-family:var(--mono);font-weight:400;font-size:.68rem;color:var(--muted)}
.gb-track{height:14px;background:var(--surface-2);border-radius:999px;overflow:hidden}
.gb-track i{display:block;height:100%;background:var(--ink-2);border-radius:999px}
.gapbars li.hot .gb-track i{background:var(--accent)}
.gb-n{font-family:var(--sans);font-size:1.3rem;text-align:right;letter-spacing:-.02em}
.gb-n small{font-family:var(--mono);font-size:.62rem;color:var(--muted);font-weight:400}
.gapbars li.hot .gb-n{color:var(--accent)}

.explore .sec-h{margin-top:56px}
.tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.tile{display:flex;flex-direction:column;gap:6px;padding:22px 20px;border:1px solid var(--rule);border-radius:var(--radius);background:var(--surface);
  text-decoration:none;color:var(--ink);box-shadow:var(--shadow);transition:transform .15s,border-color .15s}
.tile:hover{transform:translateY(-2px);border-color:var(--accent-soft);color:var(--ink)}
.tile b{font-family:var(--sans);font-size:1.15rem;margin-top:6px}
.tile p{margin:0;font-size:.92rem;line-height:1.5;color:var(--ink-2);flex:1}
.t-go{font-family:var(--sans);font-weight:600;font-size:.85rem;color:var(--accent-ink);margin-top:8px}
.t-ic{width:44px;height:44px;border-radius:11px;background:var(--accent-wash);color:var(--accent-ink);display:grid;place-items:center;
  font-family:var(--arabic);font-size:1.5rem;line-height:1}
.t-ic.num{font-family:var(--sans);font-weight:700;font-size:.95rem}
.t-ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.t-ic svg path[d^="M4 18h4"]{fill:currentColor;stroke:none}
.t-ic svg circle{fill:var(--surface)}
.t-ic svg circle.h{fill:currentColor}
.method-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px;padding:26px 0 0;border-top:1px solid var(--rule)}
.method-strip div{display:flex;flex-direction:column;gap:4px}
.method-strip b{font-family:var(--sans);font-size:1rem}
.method-strip span{color:var(--ink-2);font-size:.95rem}

/* ---------- responsive ---------- */
@media(max-width:1100px){
  .kpis{grid-template-columns:repeat(3,1fr)}
  .kpi:nth-child(4){border-inline-start:0}
  .kpi:nth-child(n+4){border-top:1px solid var(--rule)}
  .tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dashboard{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card.span-2{grid-column:1/-1}
}
@media(max-width:900px){
  .hero{grid-template-columns:1fr;gap:32px;padding:40px 0 30px}
  .ft-grid{grid-template-columns:1fr 1fr}
  .ft-notes{grid-column:1/-1}
}
@media(max-width:760px){
  .wrap{padding-inline:18px}
  .mh-row{flex-wrap:wrap;gap:0 12px;min-height:56px;padding-top:8px}
  nav.site{order:3;width:100%;margin:0 -18px;padding:4px 14px 8px;overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap}
  nav.site::-webkit-scrollbar{display:none}
  nav.site a{white-space:nowrap;padding:6px 11px;font-size:.9rem}
  .themebtn{margin-inline-start:auto}
  table.index thead th{top:0}
  .hero h1{font-size:2.5rem}
  .hero-lede{font-size:1.1rem}
  .feature{padding:22px 20px 18px}
  .feature-ar{font-size:1.6rem;line-height:2.15}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .kpi{border-inline-start:0!important;border-top:1px solid var(--rule);padding:18px}
  .kpi:nth-child(-n+2){border-top:0}
  .kpi:nth-child(2n){border-inline-start:1px solid var(--rule)!important}
  .kpi:last-child{grid-column:1/-1}
  .dashboard{grid-template-columns:1fr}
  .card{padding:20px 18px}
  .ab-row{grid-template-columns:minmax(0,1fr) auto}
  .ab-track{grid-column:1/-1;grid-row:2}
  .ab-cite{grid-column:1/-1}
  .review-state{grid-template-columns:1fr}
  .gapbars li{grid-template-columns:minmax(0,1fr) 70px;gap:6px 10px}
  .gb-track{grid-column:1/-1;grid-row:2}
  .tiles{grid-template-columns:1fr 1fr}
  .tile:last-child{grid-column:1/-1}
  .method-strip{grid-template-columns:1fr}
  .ft-grid{grid-template-columns:1fr}
  .verse{padding:18px 16px}
  .atext{font-size:1.6rem;line-height:2.2}
  .stats{grid-template-columns:1fr 1fr}
}
.card.tall{grid-row:span 2}
.card.span-3{grid-column:1/-1}
@media(max-width:1100px){ .card.tall{grid-row:auto} }
@media(max-width:760px){
  nav.site{flex-wrap:wrap;overflow:visible;margin:0;padding:2px 0 10px;gap:2px}
  nav.site a{padding:5px 9px;font-size:.86rem}
}
@media(max-width:760px){ nav.site{flex-wrap:nowrap;justify-content:space-between;gap:0} nav.site a{padding:5px 6px;font-size:.8rem} }
@media(max-width:360px){ nav.site{overflow-x:auto} }
.ab-cite{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ab-who .pv-tag{font-style:normal;margin:0 0 0 4px;font-size:.56rem}
.ab-row{padding:10px 0}
.ab-num{white-space:nowrap}
/* abrogation layer in the reading view */
.nk-reading{border:1px solid var(--rule);border-radius:var(--radius);background:var(--surface);padding:14px 20px 12px;margin:18px 0 6px;box-shadow:var(--shadow);max-width:900px}
.nk-reading .pv-banner{margin:0 0 12px}
.nk-reading .nk-compact{font-size:.74rem;gap:6px 16px;margin:2px 0 8px}
.nk-reading .nk-compact b{font-size:1.1rem}
.nk-reading .nk-legend{font-size:.7rem;gap:8px 12px}
.nk-reading .nk-pill{border-radius:999px;padding:2px 9px}
.nk-reading #nk-hl{font-size:.8rem}
.nk-mini i{border-radius:2px}
.soorahead h1 > span[style]{font-size:.55em!important}
.tl-key li{grid-template-columns:30px 1fr;align-items:start;padding:9px 0}
.tl-key .y{display:block;margin-top:1px}
.tl .numlbl{font-size:12.5px}
.tl .ticklbl,.tl .originlbl,.tl .gaplbl{font-size:12px}
.stats{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
#pSura{max-width:340px}
.nk-barrow:last-of-type .nk-arow{border-bottom:0}

/* =====================================================================================
   v3 — SECTION COLOURS + MODERN EDITORIAL LAYER (2026-10-12)
   One colour per section, used everywhere that section appears. Each token has a fill
   (--s-x), an AA text tone (--s-x-ink) and a wash (--s-x-wash), for light and dark.
   Colour is never the only signal: every marker carries an icon and a label.
   The brand is now ink + gold, so red belongs to Differences alone.
   ===================================================================================== */
:root{
  --s-red:#C8283A;   --s-red-ink:#A31D2E;   --s-red-wash:#FBEAEC;   --s-red-deep:#5E0F18;
  --s-green:#1D8A55; --s-green-ink:#146B41; --s-green-wash:#E5F4EC; --s-green-deep:#0B3D25;
  --s-blue:#2563C9;  --s-blue-ink:#1A4FA6;  --s-blue-wash:#E7EFFC;  --s-blue-deep:#0E2A5C;
  --s-amber:#D08A0E; --s-amber-ink:#8A5A00; --s-amber-wash:#FCF2DE; --s-amber-deep:#4A3104;
  --s-purple:#7A4BC9;--s-purple-ink:#5F35A8;--s-purple-wash:#F0EAFB;--s-purple-deep:#2D1858;
  --s-teal:#0E8A86;  --s-teal-ink:#0A6B68;  --s-teal-wash:#E1F4F3;  --s-teal-deep:#063B3A;
  --s-slate:#5B6779; --s-slate-ink:#46505F; --s-slate-wash:#EDEFF3; --s-slate-deep:#232934;
  --s-ink:#2A2E39;   --s-ink-ink:#1B1E26;   --s-ink-wash:#EFEDE8;
  --accent:#2A2E39; --accent-ink:#1B1E26; --accent-wash:#EFEDE8; --accent-soft:#C9C3B6;
  --gold:#B08A3E; --gold-2:#D9B76A;
  --night:#0D1220; --night-2:#141B2E;
  --radius:16px; --shadow-lg:0 2px 6px rgba(13,18,32,.06),0 18px 50px rgba(13,18,32,.12);
}
:root[data-theme="dark"]{
  --s-red:#F0606F;   --s-red-ink:#FF8C98;   --s-red-wash:#3A1519;
  --s-green:#3DC283; --s-green-ink:#6FDCA6; --s-green-wash:#10301F;
  --s-blue:#6EA2F5;  --s-blue-ink:#9BC0FA;  --s-blue-wash:#13264A;
  --s-amber:#F2B544; --s-amber-ink:#F7CB76; --s-amber-wash:#3A2A08;
  --s-purple:#B192F5;--s-purple-ink:#C9B3FA;--s-purple-wash:#281A49;
  --s-teal:#3CCBC5;  --s-teal-ink:#79E0DB;  --s-teal-wash:#0C302F;
  --s-slate:#A3AFC2; --s-slate-ink:#C3CCDA; --s-slate-wash:#232934;
  --s-ink:#E9E4D8;   --s-ink-ink:#F3EFE6;   --s-ink-wash:#23262E;
  --accent:#E9E4D8; --accent-ink:#F3EFE6; --accent-wash:#23262E; --accent-soft:#4A4D57;
  --gold:#D9B76A; --night:#080B14; --night-2:#0F1424;
  --shadow-lg:0 2px 6px rgba(0,0,0,.4),0 18px 50px rgba(0,0,0,.45);
}
body{font-size:17.5px}
a{color:var(--accent-ink);text-decoration-color:var(--gold);text-decoration-thickness:1.5px}
a:hover{color:var(--gold)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- masthead: dark glass, coloured section nav ------------------------------------ */
header.masthead{position:sticky;top:0;z-index:50;background:rgba(13,18,32,.86);backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid rgba(255,255,255,.08);color:#fff}
.masthead .brand-name{color:#fff}.masthead .brand-name span{color:var(--gold-2)}
.masthead .bm-bg{fill:var(--gold)} .masthead .bm-ln{stroke:#0D1220} .masthead .bm-dot{fill:#0D1220}
.masthead .themebtn{color:#fff;border-color:rgba(255,255,255,.2)}
nav.site{display:flex;gap:2px;flex-wrap:wrap}
nav.site a{display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border-radius:10px;color:rgba(255,255,255,.82);
  text-decoration:none;font-family:var(--sans);font-weight:600;font-size:.92rem;position:relative;transition:background .2s,color .2s}
nav.site a .nv-ic{width:17px;height:17px;flex:none}
nav.site a:hover{background:rgba(255,255,255,.08);color:#fff}
nav.site a[aria-current="page"]{color:#fff;background:rgba(255,255,255,.1)}
nav.site a::after{content:"";position:absolute;left:11px;right:11px;bottom:3px;height:3px;border-radius:3px;background:var(--c,transparent);
  transform:scaleX(0);transition:transform .25s}
nav.site a:hover::after,nav.site a[aria-current="page"]::after{transform:scaleX(1)}
nav.site a .nv-ic{color:var(--c,currentColor)}
.nv-red{--c:#FF6B7A}.nv-green{--c:#4CD493}.nv-blue{--c:#7FB0FF}.nv-amber{--c:#FFC24F}.nv-purple{--c:#BFA0FF}.nv-teal{--c:#4FE0D9}.nv-ink{--c:var(--gold-2)}

/* ---- section colour helpers --------------------------------------------------------- */
.sx-red{--sc:var(--s-red);--sc-ink:var(--s-red-ink);--sc-wash:var(--s-red-wash);--sc-deep:#5E0F18}
.sx-green{--sc:var(--s-green);--sc-ink:var(--s-green-ink);--sc-wash:var(--s-green-wash);--sc-deep:#0B3D25}
.sx-blue{--sc:var(--s-blue);--sc-ink:var(--s-blue-ink);--sc-wash:var(--s-blue-wash);--sc-deep:#0E2A5C}
.sx-amber{--sc:var(--s-amber);--sc-ink:var(--s-amber-ink);--sc-wash:var(--s-amber-wash);--sc-deep:#4A3104}
.sx-purple{--sc:var(--s-purple);--sc-ink:var(--s-purple-ink);--sc-wash:var(--s-purple-wash);--sc-deep:#2D1858}
.sx-teal{--sc:var(--s-teal);--sc-ink:var(--s-teal-ink);--sc-wash:var(--s-teal-wash);--sc-deep:#063B3A}
.sx-slate{--sc:var(--s-slate);--sc-ink:var(--s-slate-ink);--sc-wash:var(--s-slate-wash);--sc-deep:#232934}
.sx-kicker{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-weight:700;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--sc-ink,var(--ink))}
.sx-kicker .sx-ic{width:20px;height:20px}
.sx-btn{background:var(--sc)!important;border-color:var(--sc)!important;color:#fff!important}
.sx-btn:hover{filter:brightness(1.08)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:999px;font-family:var(--sans);font-weight:700;
  text-decoration:none;border:1.5px solid var(--rule-strong);color:var(--ink);transition:transform .15s,box-shadow .2s,filter .2s}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.15)}
.btn.primary{background:var(--gold);border-color:var(--gold);color:#14161C}
.btn.ghost{border-color:rgba(255,255,255,.4);color:#fff}

/* ---- landing hero ------------------------------------------------------------------- */
.hero3{position:relative;color:#fff;background:var(--night);overflow:hidden;padding:64px 0 28px;isolation:isolate}
.hero3-bg{position:absolute;inset:0;z-index:-1}
.hero3-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 40%;opacity:.55;filter:saturate(1.15)}
.hero3-shade{position:absolute;inset:0;background:radial-gradient(1200px 600px at 15% 30%,rgba(8,12,24,.94),rgba(8,12,24,.72) 55%,rgba(8,12,24,.45)),linear-gradient(180deg,rgba(8,12,24,.2),rgba(8,12,24,.92))}
.pattern-star{position:absolute;inset:0;background:url(/images/art/star-pattern.svg) repeat;background-size:80px;opacity:.07;mix-blend-mode:screen}
.hero3-in{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero3 h1{font-family:var(--sans);font-size:clamp(2.4rem,1.6rem + 3.4vw,4.4rem);line-height:1.02;letter-spacing:-.035em;margin:.25em 0 .35em;color:#fff}
.hero3 h1 em{font-style:normal;background:linear-gradient(90deg,var(--gold-2),#F4E3B5);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero3 .hero-lede{font-size:1.2rem;color:rgba(255,255,255,.82);max-width:34ch}
.eyebrow.light{color:var(--gold-2)}
.hero3 .hero-go{margin-top:22px;max-width:420px;display:flex;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:999px;overflow:hidden}
.hero3 .hero-go input{flex:1;background:transparent;border:0;color:#fff;padding:12px 18px;font:inherit;font-family:var(--sans)}
.hero3 .hero-go input::placeholder{color:rgba(255,255,255,.6)}
.hero3 .hero-go button{background:var(--gold);border:0;color:#14161C;font-weight:800;padding:0 18px;cursor:pointer}
.challenge{margin:0;background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.18);
  border-top:4px solid var(--sc);border-radius:20px;padding:22px 24px 22px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 30px 80px rgba(0,0,0,.35)}
.challenge .sx-kicker{color:#fff}.challenge .sx-kicker .sx-ic{color:var(--sc)}
.ch-head{display:flex;justify-content:space-between;align-items:center}
.ch-ref{color:#fff;font-family:var(--sans);font-weight:800;text-decoration:none;background:rgba(255,255,255,.12);padding:3px 10px;border-radius:999px}
.ch-ar{font-size:1.75rem;line-height:2.1;margin:12px 0 6px;color:#fff;text-align:right}
.ch-en{margin:0 0 12px;font-size:1rem;color:rgba(255,255,255,.88);border:0;padding:0}
.ch-en cite{font-size:.82rem;color:rgba(255,255,255,.6)}
.ch-also{font-size:.88rem;color:rgba(255,255,255,.75);margin:0 0 10px}
.ch-facts{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:10px}
.ch-facts li{display:grid;gap:2px;padding:10px 12px;border-radius:12px;background:rgba(0,0,0,.22);border-left:3px solid var(--sc)}
.ch-facts b{font-family:var(--sans);font-size:1.15rem;color:#fff}
.ch-facts span{font-size:.9rem;color:rgba(255,255,255,.8)}
.kpis-hero{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:40px;border:0}
.kpis-hero .kpi{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:16px 18px;color:#fff;text-decoration:none;transition:background .2s,transform .2s}
.kpis-hero .kpi:hover{background:rgba(255,255,255,.12);transform:translateY(-2px)}
.kpis-hero .kpi b{display:block;font-family:var(--sans);font-size:clamp(1.7rem,1.2rem + 1.4vw,2.5rem);letter-spacing:-.03em;color:#fff;line-height:1.05}
.kpis-hero .kpi span{display:block;font-family:var(--sans);font-weight:600;color:rgba(255,255,255,.9)}
.kpis-hero .kpi small{display:block;color:rgba(255,255,255,.6);font-size:.8rem;margin-top:2px}
.kpis-hero .kpi.hot{border-top:3px solid var(--s-green)}
.kpis-hero .kpi:nth-child(3){border-top:3px solid #7FB0FF}

/* ---- section bands ------------------------------------------------------------------ */
.sx-hero{position:relative;color:#fff;overflow:hidden;padding:52px 0 30px;margin-bottom:34px;isolation:isolate;
  background:linear-gradient(135deg,var(--sc-deep) 0%,color-mix(in srgb,var(--sc) 78%,#000) 60%,var(--sc) 130%)}
.sx-hero-bg{position:absolute;inset:0;z-index:-1;background:url(/images/art/star-pattern.svg) repeat;background-size:90px;opacity:.09}
.sx-hero-in{display:grid;grid-template-columns:1.4fr .8fr;gap:40px;align-items:center}
.sx-hero h1{font-family:var(--sans);font-size:clamp(2rem,1.4rem + 2.6vw,3.4rem);letter-spacing:-.03em;line-height:1.05;margin:.3em 0 .3em;color:#fff}
.sx-hero .sx-kicker{color:#fff;background:rgba(255,255,255,.14);padding:6px 12px;border-radius:999px}
.sx-lede{font-size:1.15rem;color:rgba(255,255,255,.88);max-width:52ch;margin:0}
.sx-hero-fig{margin:0;justify-self:end;max-width:400px;transform:rotate(1.5deg)}
.sx-hero-fig img{width:100%;height:240px;object-fit:cover;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.45);border:4px solid rgba(255,255,255,.9)}
.sx-hero-fig figcaption{font-size:.75rem;color:rgba(255,255,255,.7);margin-top:8px;text-align:right}
.sx-hero-fig a{color:inherit}
.sx-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:28px 0 0}
.sx-kpi{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:14px 16px;margin:0}
.sx-kpi dt{font-family:var(--sans);font-weight:600;font-size:.85rem;color:rgba(255,255,255,.85);order:2}
.sx-kpi dd{margin:0}.sx-kpi b{display:block;font-family:var(--sans);font-size:clamp(1.6rem,1.1rem + 1.4vw,2.4rem);letter-spacing:-.03em;line-height:1.05}
.sx-kpi small{display:block;font-size:.78rem;color:rgba(255,255,255,.7)}
.sx-kpi{display:flex;flex-direction:column-reverse}
.tier-badge{display:inline-block;margin-left:8px;font-family:var(--sans);font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;background:#fff;color:var(--s-red-ink);vertical-align:middle}
.tier-badge.sm{margin:0;padding:2px 8px;font-size:.66rem;background:var(--s-slate-wash);color:var(--s-slate-ink)}
.sec-differences .sx-hero{--sc:var(--s-red);--sc-deep:#4A0B13} .sec-readings .sx-hero{--sc:var(--s-blue);--sc-deep:#0B2049}
.sec-repetitions .sx-hero{--sc:var(--s-amber);--sc-deep:#3D2803}

/* ---- section cards on the landing page --------------------------------------------- */
.sx-cards{margin:56px 0 24px}
.sx-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.sx-card{position:relative;display:flex;flex-direction:column;border-radius:20px;overflow:hidden;text-decoration:none;color:#fff;min-height:330px;
  background:var(--sc-deep);box-shadow:var(--shadow-lg);transition:transform .25s,box-shadow .25s;isolation:isolate}
.sx-card:hover{transform:translateY(-4px);color:#fff}
.sx-card-img{position:absolute;inset:0;z-index:-2}
.sx-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s;filter:saturate(.9)}
.sx-card:hover .sx-card-img img{transform:scale(1.05)}
.sx-card::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,color-mix(in srgb,var(--sc-deep) 30%,transparent) 0%,color-mix(in srgb,var(--sc-deep) 88%,transparent) 55%,var(--sc-deep) 100%)}
.sx-card::after{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--sc)}
.sx-card-body{margin-top:auto;padding:20px 22px 20px;display:grid;gap:6px}
.sx-card .sx-kicker{color:#fff}.sx-card .sx-kicker .sx-ic{color:var(--sc);filter:brightness(1.4)}
.sx-card-n{font-family:var(--sans);font-size:2.4rem;letter-spacing:-.03em;line-height:1}
.sx-card-n small{font-size:.9rem;font-weight:600;margin-left:8px;color:rgba(255,255,255,.8);letter-spacing:0}
.sx-card-p{color:rgba(255,255,255,.86);font-size:.95rem;line-height:1.45}
.sx-card .t-go{font-family:var(--sans);font-weight:700;color:#fff;opacity:.9}

/* ---- tinted cards and charts --------------------------------------------------------- */
.card{border:0;border-radius:var(--radius);box-shadow:var(--shadow-lg)}
.tint-red{background:linear-gradient(180deg,var(--s-red-wash),var(--surface) 60%);border-top:4px solid var(--s-red)}
.tint-blue{background:linear-gradient(180deg,var(--s-blue-wash),var(--surface) 60%);border-top:4px solid var(--s-blue)}
.tint-amber{background:linear-gradient(180deg,var(--s-amber-wash),var(--surface) 60%);border-top:4px solid var(--s-amber)}
.tint-green{background:linear-gradient(180deg,var(--s-green-wash),var(--surface) 60%);border-top:4px solid var(--s-green)}
#h-naskh{border-top:4px solid var(--s-green)} #h-timeline{border-top:4px solid var(--s-teal)} #h-counts{border-top:4px solid var(--s-blue)} #h-place{border-top:4px solid var(--s-purple)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}
section.card{margin-bottom:20px}
.hbars{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:10px}
.hbars li{display:grid;grid-template-columns:minmax(150px,38%) 1fr auto;gap:12px;align-items:center}
.hbars.compact{gap:6px}.hbars.compact li{font-size:.9rem}
.hb-lbl{font-family:var(--sans);font-weight:600;color:var(--ink);text-decoration:none;font-size:.95rem}
.hb-lbl em{font-weight:400;color:var(--muted);font-style:normal;font-size:.82rem}
.hb-track{height:14px;background:var(--surface-3);border-radius:999px;overflow:hidden;display:block}
.hb-track i{display:block;height:100%;border-radius:999px;transition:width .8s cubic-bezier(.2,.8,.2,1)}
.hb-track.stack{display:flex;background:none;gap:2px}.hb-track.stack i{border-radius:3px}
.hb-n{font-family:var(--sans);font-size:1.05rem;white-space:nowrap}.hb-n small{color:var(--muted);font-weight:500;margin-left:4px}
.fill-red{background:linear-gradient(90deg,var(--s-red),color-mix(in srgb,var(--s-red) 70%,#fff))}
.fill-blue{background:linear-gradient(90deg,var(--s-blue),color-mix(in srgb,var(--s-blue) 70%,#fff))}
.fill-amber{background:linear-gradient(90deg,var(--s-amber),color-mix(in srgb,var(--s-amber) 70%,#fff))}
.fill-green{background:linear-gradient(90deg,var(--s-green),color-mix(in srgb,var(--s-green) 70%,#fff))}
.k-dots{background:var(--s-blue)}.k-letters{background:var(--s-blue-deep,#0E2A5C)}.k-added{background:var(--s-teal)}.k-omitted{background:var(--s-slate)}
:root[data-theme="dark"] .k-letters{background:#BFD5FB}
.kind{display:inline-block;padding:2px 8px;border-radius:999px;color:#fff;font-family:var(--sans);font-size:.75rem;font-weight:700}
:root[data-theme="dark"] .kind.k-letters{color:#0E2A5C}
.tick{color:var(--s-blue);margin-left:4px;font-size:.7rem}
.vbars{display:flex;gap:12px;align-items:flex-end;height:200px;padding-top:10px}
.vb{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%}
.vb-bar{flex:1;width:100%;display:flex;align-items:flex-end;background:var(--surface-3);border-radius:10px;overflow:hidden}
.vb-bar i{width:100%;border-radius:10px 10px 0 0}
.vb b{font-family:var(--sans)}.vb span{font-size:.78rem;color:var(--muted);text-align:center}
.stackbar{display:flex;height:22px;border-radius:999px;overflow:hidden;gap:3px;margin:10px 0 12px}
.q1{background:var(--s-green)}.q2{background:var(--s-amber)}.q3{background:var(--s-red)}
.legend{list-style:none;padding:0;margin:0 0 6px;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.9rem}
.legend .sw{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.mini-figs{display:grid;gap:6px;margin:14px 0 0}.mini-figs div{display:flex;justify-content:space-between;border-top:1px dashed var(--rule);padding-top:6px}
.mini-figs dt{color:var(--ink-2)}.mini-figs dd{margin:0;font-family:var(--sans);font-weight:700}
/* heat strips */
.heat{display:grid;grid-template-columns:repeat(57,1fr);gap:3px}
.heat .hc{aspect-ratio:1;border-radius:3px;background:var(--surface-3);display:block}
.heat-red{--h:var(--s-red)}.heat-blue{--h:var(--s-blue)}.heat-amber{--h:var(--s-amber)}.heat-green{--h:var(--s-green)}
.hc.b1,.heat-scale .b1{background:color-mix(in srgb,var(--h) 22%,var(--surface))}
.hc.b2,.heat-scale .b2{background:color-mix(in srgb,var(--h) 40%,var(--surface))}
.hc.b3,.heat-scale .b3{background:color-mix(in srgb,var(--h) 60%,var(--surface))}
.hc.b4,.heat-scale .b4{background:color-mix(in srgb,var(--h) 80%,var(--surface))}
.hc.b5,.heat-scale .b5{background:var(--h)}
.heat .hc:hover{outline:2px solid var(--ink);outline-offset:1px}
.heat-legend{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--muted);margin-top:10px;flex-wrap:wrap}
.heat-scale{display:inline-flex;gap:2px}.heat-scale i{width:16px;height:10px;border-radius:2px;display:inline-block}

/* ---- lists, filters, tabs ----------------------------------------------------------- */
.filter-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:26px 0 14px;font-family:var(--sans)}
.filter-row select{font:inherit;padding:8px 12px;border-radius:10px;border:1px solid var(--rule-strong);background:var(--surface);color:var(--ink);max-width:260px}
.filter-row .count{margin-left:auto;color:var(--muted)}
.tabs{display:flex;gap:8px;margin:0 0 22px;flex-wrap:wrap}
.tabs a{padding:12px 18px;border-radius:14px;text-decoration:none;font-family:var(--sans);font-weight:700;color:var(--ink);background:var(--surface);box-shadow:var(--shadow);border:2px solid transparent}
.tabs a small{display:block;font-weight:500;color:var(--muted);font-size:.78rem}
.tabs a[aria-current="page"]{border-color:var(--s-blue);background:var(--s-blue-wash)}
.dlist{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.ditem-a{display:grid;grid-template-columns:72px 1fr 24px;gap:14px;padding:14px 18px;border-radius:14px;background:var(--surface);
  box-shadow:var(--shadow);text-decoration:none;color:var(--ink);border-left:4px solid var(--s-red);transition:transform .15s,box-shadow .2s}
.ditem-a:hover{transform:translateX(3px);color:var(--ink)}
.dref b{font-family:var(--sans);font-size:1.2rem;color:var(--s-red-ink)}
.dcats{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:5px}
.chip-cat{display:inline-block;padding:2px 9px;border-radius:999px;background:var(--s-red-wash);color:var(--s-red-ink);font-family:var(--sans);font-size:.74rem;font-weight:700;text-decoration:none}
.flag-tag{display:inline-block;padding:2px 8px;border-radius:6px;border:1px dashed var(--rule-strong);color:var(--muted);font-family:var(--sans);font-size:.7rem}
.flag-tag.prop{border-color:var(--s-purple);color:var(--s-purple-ink)}
.dex{display:block;color:var(--ink-2);font-size:.95rem}
.dtitle{display:block;font-family:var(--sans)}
.dgo{align-self:center;color:var(--s-red)}
.review-box{display:flex;gap:22px;align-items:flex-start;padding:28px;border-radius:20px;background:var(--s-red-wash);border-left:5px solid var(--s-red);margin-bottom:24px}
.review-box .sx-ic.big{width:48px;height:48px;color:var(--s-red);flex:none}
.review-box h2{margin:0 0 6px;font-family:var(--sans)}
.pager{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0}.pager a{padding:6px 11px;border-radius:8px;background:var(--surface);text-decoration:none;font-family:var(--sans)}
.pager a[aria-current="page"]{background:var(--s-blue);color:#fff}

/* ---- verse cards and markers -------------------------------------------------------- */
.vcard{background:var(--surface);border-radius:16px;padding:16px 20px;margin:0 0 14px;box-shadow:var(--shadow);border-left:4px solid var(--mc,var(--rule-strong))}
.mark-red{--mc:var(--s-red)}.mark-blue{--mc:var(--s-blue)}.mark-amber{--mc:var(--s-amber)}.mark-green{--mc:var(--s-green)}
.vc-head{display:flex;gap:12px;align-items:center;margin-bottom:6px}.vc-head a{text-decoration:none;font-family:var(--sans)}
.vcard .atext{font-size:1.65rem;line-height:2.1;text-align:right}
.loci{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:8px}
.loci>li{display:grid;grid-template-columns:minmax(120px,22%) 1fr;gap:12px;padding-top:8px;border-top:1px dashed var(--rule)}
.lw{font-family:var(--arabic);font-size:1.3rem;color:var(--s-blue-ink);font-weight:600}
.rdgs{list-style:none;padding:0;margin:0;display:grid;gap:4px}
.rdgs li{display:flex;flex-wrap:wrap;gap:4px 12px;justify-content:space-between}
.rd-ar{font-family:var(--arabic);font-size:1.02rem}.rd-who{font-family:var(--sans);font-size:.78rem;color:var(--muted)}
.wdiff{width:100%;border-collapse:collapse;margin-top:8px;font-size:.92rem}
.wdiff th{text-align:left;font-family:var(--sans);font-size:.75rem;color:var(--muted);font-weight:600;padding:4px 6px}
.wdiff td{padding:6px;border-top:1px solid var(--rule)}
.wdiff td.atext,.wdiff td .atext{font-size:1.35rem}
.all8{margin-top:10px}.all8 summary{cursor:pointer;font-family:var(--sans);font-weight:600;color:var(--s-blue-ink)}
.all8 .line{display:grid;grid-template-columns:90px 1fr;gap:10px;align-items:center;border-top:1px dashed var(--rule);padding:4px 0}
.all8 .atext{font-size:1.4rem;line-height:2}
mark.hl-blue{background:color-mix(in srgb,var(--s-blue) 22%,transparent);color:inherit;border-radius:6px;padding:0 3px;box-shadow:inset 0 -3px 0 var(--s-blue)}
.vmarks{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 8px}
.mk{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;font-family:var(--sans);font-size:.8rem;font-weight:700;
  text-decoration:none;background:var(--mkw);color:var(--mki);border:1.5px solid var(--mkc)}
.mk:hover{background:var(--mkc);color:#fff}
.mk .mk-ic{width:15px;height:15px}
.mk-red{--mkc:var(--s-red);--mkw:var(--s-red-wash);--mki:var(--s-red-ink)}
.mk-green{--mkc:var(--s-green);--mkw:var(--s-green-wash);--mki:var(--s-green-ink)}
.mk-blue{--mkc:var(--s-blue);--mkw:var(--s-blue-wash);--mki:var(--s-blue-ink)}
.mk-blue.alt{border-style:dashed}
.mk-amber{--mkc:var(--s-amber);--mkw:var(--s-amber-wash);--mki:var(--s-amber-ink)}
.mk .pv-tag{margin-left:4px}
.verse.has-marks{position:relative;padding-left:18px}
.verse.has-marks::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:5px;border-radius:5px;background:linear-gradient(180deg,var(--edge))}
.vm-detail{font-size:.9rem;margin:0 0 8px}.vm-detail summary{cursor:pointer;color:var(--s-blue-ink);font-family:var(--sans);font-weight:600}
.vm-detail .atext{font-size:1.25rem}
/* differences item page */
.crumbs{font-family:var(--sans);margin:24px 0 12px}.crumbs a{text-decoration:none;color:var(--s-red-ink);display:inline-flex;gap:6px;align-items:center}
.crumbs .sx-ic{width:16px;height:16px}
.band-red{background:linear-gradient(135deg,#4A0B13,var(--s-red));color:#fff;border-radius:20px;padding:26px 28px;margin-bottom:24px}
.band-red h1{color:#fff;font-family:var(--sans);margin:.3em 0 .2em}.band-red .byline{color:rgba(255,255,255,.85);margin:0}
.band-red .chip-cat{background:rgba(255,255,255,.18);color:#fff}.band-red .tier-badge{margin-left:0}
.band-red .flag-tag{color:#fff;border-color:rgba(255,255,255,.5)}
.dp-tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.dp-body p,.dp-sources,.dp-responses{max-width:var(--measure)}
.refs{padding-left:1.2em}.refs[dir="rtl"]{font-family:var(--arabic);padding-right:1.2em}
.warn{color:var(--s-red-ink);font-weight:600}
.resp{padding:12px 16px;border-radius:12px;background:var(--s-green-wash);margin-bottom:10px}
.dp-responses .note{padding:14px 16px;border:1.5px dashed var(--s-green);border-radius:12px;color:var(--ink-2)}
.ar-prose{font-family:var(--arabic);font-size:1.1rem;line-height:2}
.ven{color:var(--ink-2);margin:4px 0 0;font-size:.98rem}.ven cite{color:var(--muted);font-size:.8rem}
/* repetitions */
.pairs{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:28px}
.pair{background:var(--surface);border-radius:16px;padding:14px 18px;box-shadow:var(--shadow);border-top:4px solid var(--s-amber)}
.pair header{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:6px}
.op{font-family:var(--arabic);padding:1px 8px;border-radius:6px;font-size:.95rem}
.op-insert{background:var(--s-green-wash);color:var(--s-green-ink)}.op-delete{background:var(--s-red-wash);color:var(--s-red-ink)}.op-replace{background:var(--s-amber-wash);color:var(--s-amber-ink)}
.pair .pv{border-top:1px dashed var(--rule);padding-top:6px;margin-top:6px}.pair .pv a{font-family:var(--sans);font-weight:700;text-decoration:none}
.pair .atext{font-size:1.4rem;line-height:2;text-align:right}.pair .ven{font-size:.88rem}
.idgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:28px}
.idc{background:var(--surface);border-radius:14px;padding:12px 16px;box-shadow:var(--shadow);border-left:4px solid var(--s-amber)}
.idc .atext{font-size:1.3rem;line-height:2}
.refs-inline{display:flex;flex-wrap:wrap;gap:4px 10px;font-family:var(--sans);font-size:.85rem;margin:6px 0 0}
.refs-inline a{text-decoration:none}
.shared{display:grid;gap:8px}.shared li{display:flex;flex-wrap:wrap;gap:10px;align-items:baseline}
.ar-inline{font-family:var(--arabic);font-size:1.15rem}
.sec-h small{font-weight:500;color:var(--muted);font-size:.85rem;margin-left:8px}
.method{margin:24px 0}
.credit-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.credit{margin:0;background:var(--surface);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.credit img{width:100%;height:180px;object-fit:cover;display:block}.credit figcaption{padding:12px 14px;font-size:.88rem}
footer.site .ft-links a{display:inline-flex;align-items:center;gap:6px}
footer.site .ft-links .dot{width:9px;height:9px;border-radius:50%;background:var(--fc,transparent)}
.ft-red{--fc:var(--s-red)}.ft-green{--fc:var(--s-green)}.ft-blue{--fc:var(--s-blue)}.ft-amber{--fc:var(--s-amber)}.ft-purple{--fc:var(--s-purple)}.ft-teal{--fc:var(--s-teal)}
/* the existing naskh page and landing abrogation chart are the green section */
#h-naskh .ab-main,.sec-naskh .ab-main{background:var(--s-green)}
/* scroll reveal (only when JS + motion allowed) */
.js-reveal .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.js-reveal .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}
/* mobile */
@media (max-width: 960px){
  .hero3-in,.sx-hero-in{grid-template-columns:1fr}
  .kpis-hero{grid-template-columns:repeat(2,1fr)}
  .sx-kpis{grid-template-columns:repeat(2,1fr)}
  .sx-grid{grid-template-columns:1fr 1fr}
  .grid-2,.pairs{grid-template-columns:1fr}.idgrid{grid-template-columns:1fr 1fr}
  .sx-hero-fig{justify-self:start;transform:none}
  nav.site{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  nav.site a span{white-space:nowrap}
}
@media (max-width: 640px){
  .sx-grid,.idgrid{grid-template-columns:1fr}
  .heat{grid-template-columns:repeat(19,1fr)}
  .hbars li{grid-template-columns:1fr auto;}.hbars .hb-track{grid-column:1/-1;order:3}
  .ditem-a{grid-template-columns:52px 1fr}.dgo{display:none}
  .loci>li{grid-template-columns:1fr}
  .ch-ar{font-size:1.45rem}
  .hero3{padding-top:36px}
  .sx-hero-fig img{height:170px}
}
/* v3 fixes */
.btn.ghost{background:transparent}
.btn.ghost:hover{background:rgba(255,255,255,.1);color:#fff;border-color:#fff}
.btn.primary:hover{background:var(--gold-2);border-color:var(--gold-2);color:#14161C}
.kpis-hero{background:transparent;box-shadow:none;overflow:visible;border-radius:0}
.kpis-hero .kpi{border-inline-start:1px solid rgba(255,255,255,.12)}
.kpis-hero .kpi small{font-family:var(--sans)}
.kpis-hero .kpi.review b{color:rgba(255,255,255,.7)}
header.masthead .themebtn{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#fff}
header.masthead .mh-row{gap:18px}
nav.site{flex-wrap:nowrap}
nav.site a{padding:7px 9px;font-size:.86rem;gap:6px}
@media (max-width: 1240px){ nav.site a .nv-ic{display:none} }
#h-naskh .review-state .ghost-bars i{background:linear-gradient(90deg,var(--s-green-wash),var(--surface-2))}
#h-naskh .review-state a{color:var(--s-green-ink)}
.kpi.hot b{color:inherit}
nav.site a span{white-space:nowrap}
.hero3-img{opacity:.8;object-position:right 35%;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 55%);mask-image:linear-gradient(90deg,transparent 0%,#000 55%)}
.hero3-shade{background:linear-gradient(90deg,rgba(8,12,24,.97) 0%,rgba(8,12,24,.8) 45%,rgba(8,12,24,.35) 100%),linear-gradient(180deg,rgba(8,12,24,0) 60%,rgba(8,12,24,.95))}
#h-timeline .gb-track i{background:linear-gradient(90deg,var(--s-teal),color-mix(in srgb,var(--s-teal) 65%,#fff))}
#h-timeline li.hot .gb-track i{background:var(--s-teal-ink)}
#h-counts .dp-line i{background:var(--s-blue);border-color:var(--s-blue)}
#h-place .d-mk{stroke:var(--s-purple)} #h-place .d-md{stroke:color-mix(in srgb,var(--s-purple) 40%,var(--surface))}
#h-place .sw.mk{background:var(--s-purple)} #h-place .sw.md{background:color-mix(in srgb,var(--s-purple) 40%,var(--surface))}
.band-red .pv-tag{background:#fff;color:var(--s-red-ink);border-color:#fff}
.pager-red a[aria-current="page"]{background:var(--s-red)}
/* existing section pages: coloured page head + section accent scoped to the page */
body.sec-naskh,.nk-reading,.nk-mark{--accent:var(--s-green);--accent-ink:var(--s-green-ink);--accent-wash:var(--s-green-wash);--accent-soft:color-mix(in srgb,var(--s-green) 40%,var(--surface))}
body.sec-chronology{--accent:var(--s-purple);--accent-ink:var(--s-purple-ink);--accent-wash:var(--s-purple-wash)}
body.sec-timeline{--accent:var(--s-teal);--accent-ink:var(--s-teal-ink);--accent-wash:var(--s-teal-wash)}
body.sec .pagehead{position:relative;margin:28px 0 26px;padding:30px 30px 26px;border-radius:22px;color:#fff;overflow:hidden;isolation:isolate;
  background:linear-gradient(135deg,var(--sc-deep),color-mix(in srgb,var(--sc) 80%,#000) 65%,var(--sc))}
body.sec .pagehead::after{content:"";position:absolute;inset:0;z-index:-1;background:url(/images/art/star-pattern.svg) repeat;background-size:90px;opacity:.09}
body.sec .pagehead .eyebrow{color:#fff;opacity:.9}
body.sec .pagehead .lede{color:rgba(255,255,255,.92);font-size:1.15rem;margin:.4em 0 0}
/* differences round 2 */
.fill-red-new{background:repeating-linear-gradient(135deg,var(--s-red) 0 5px,color-mix(in srgb,var(--s-red) 45%,var(--surface)) 5px 9px)}
.hb-track{display:flex}
.q4{background:var(--s-blue)}
.card-foot .sw{display:inline-block;width:.9em;height:.9em;border-radius:3px;vertical-align:-.1em;margin:0 .25em 0 .5em}
.dref small{display:block;font-size:.72rem;color:var(--muted);font-weight:500;white-space:nowrap}
.refs-added .chk{color:var(--muted);margin-left:.4em}
.sub-h{font-size:1rem;margin:1.1em 0 .4em}
.merged-note{margin-top:1.4em}

/* Differences — evidence tiers (2026-10-12) */
.ev-tier{display:inline-block;padding:2px 9px;border-radius:999px;font-family:var(--sans);font-size:.7rem;font-weight:800;letter-spacing:.04em;background:#fff;color:#333;border:1px solid #ccc}
.ev-tier.sm{font-size:.64rem;padding:1px 7px}
.ev-classicalcontext,.sw.ev-classicalcontext,.stackbar .ev-classicalcontext{background:#1f7a4d;color:#fff;border-color:#1f7a4d}
.ev-classical,.sw.ev-classical,.stackbar .ev-classical{background:#4fae7c;color:#fff;border-color:#4fae7c}
.ev-modern-only,.sw.ev-modern-only,.stackbar .ev-modern-only{background:#e0a33a;color:#222;border-color:#e0a33a}
.ev-none,.sw.ev-none,.stackbar .ev-none{background:#b9b9b9;color:#222;border-color:#b9b9b9}
.dp-sources.tiered{display:grid;gap:14px}
.tier-block{border-left:5px solid #ccc;padding:10px 14px;border-radius:6px;background:var(--paper,#fafafa)}
.tier-block.t-classical{border-color:#1f7a4d;background:#eef7f1}
.tier-block.t-contrary{border-color:#6b5bb5;background:#f2f0fa}
.tier-block.t-context{border-color:#9a9a9a}
.tier-block .sec-h small,.dp-rachid .sec-h small,.sub-h small{font-weight:400;color:var(--muted);font-size:.8em;margin-left:.4em}
.tnum{display:inline-grid;place-items:center;width:1.5em;height:1.5em;border-radius:50%;background:#333;color:#fff;font-size:.75em;margin-right:.35em}
.t-classical .tnum{background:#1f7a4d}.t-contrary .tnum{background:#6b5bb5}
.literal dl div{display:flex;gap:10px;margin:4px 0}.literal dt{font-weight:800;min-width:4.5em}.literal dd{margin:0;font-style:italic}
.dp-rachid{margin-top:14px;padding:10px 14px;border:1px dashed #bbb;border-radius:6px}
.nk-chart .tag.ok{background:#e6f4ea;color:#1f6b3a;border-color:#9fd3b0}

/* ---------- Share bar (partials/share, js/share.js) ---------- */
.shr{--sc:var(--ink-2,#555);display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:14px 0}
.shr-red{--sc:var(--s-red)}.shr-green{--sc:var(--s-green)}.shr-blue{--sc:var(--s-blue)}.shr-amber{--sc:var(--s-amber)}.shr-purple{--sc:var(--s-purple)}.shr-teal{--sc:var(--s-teal)}.shr-ink{--sc:var(--accent,#9a7a2a)}
.shr-lbl{font:600 .78rem/1 var(--mono,monospace);letter-spacing:.06em;text-transform:uppercase;color:var(--sc);margin-inline-end:4px}
.shr-b{position:relative;display:inline-flex;align-items:center;gap:6px;height:34px;min-width:34px;padding:0 8px;justify-content:center;border-radius:999px;border:1px solid color-mix(in srgb,var(--sc) 35%,transparent);background:color-mix(in srgb,var(--sc) 8%,transparent);color:var(--sc);cursor:pointer;text-decoration:none;font:600 .85rem/1 inherit}
.shr-b svg{width:17px;height:17px}
.shr-b:hover,.shr-b:focus-visible{background:var(--sc);color:#fff;outline:none}
.shr-b:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--sc) 40%,transparent)}
.shr-b.copied{background:var(--sc);color:#fff}
.shr-ok{position:absolute;top:-26px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:.72rem;background:#14161c;color:#fff;border-radius:6px;padding:0 6px;line-height:20px}
.shr-ok:empty{display:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sx-hero .shr{margin-top:18px}.sx-hero .shr-b{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.35);color:#fff}.sx-hero .shr-lbl{color:#fff;opacity:.85}
.sx-hero .shr-b:hover{background:#fff;color:var(--sc)}
.shr-item{--sc:var(--ink-2,#666);display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;color:var(--sc);opacity:.75;vertical-align:middle;margin-inline-start:6px}
.shr-item svg{width:15px;height:15px}
.shr-item:hover,.shr-item:focus-visible{opacity:1;background:color-mix(in srgb,var(--sc) 14%,transparent);outline:none}
.shr-item.shr-red{--sc:var(--s-red)}.shr-item.shr-green{--sc:var(--s-green)}.shr-item.shr-blue{--sc:var(--s-blue)}.shr-item.shr-amber{--sc:var(--s-amber)}.shr-item.shr-purple{--sc:var(--s-purple)}.shr-item.shr-teal{--sc:var(--s-teal)}.shr-item.shr-ink{--sc:var(--accent,#9a7a2a)}
.shr-pop{position:absolute;z-index:60;background:var(--paper,#fff);border:1px solid var(--line,#ddd);border-radius:14px;box-shadow:0 12px 32px rgba(0,0,0,.18);padding:10px 12px}
.shr-pop .shr{margin:0}.shr-pop .shr-lbl{flex-basis:100%;text-transform:none;letter-spacing:0;font-family:inherit;font-size:.86rem;margin-bottom:4px}
.verse:target,.nk-verse:target,article:target,tr:target{scroll-margin-top:80px;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent,#c9a24a) 50%,transparent)}
@media (max-width:640px){.shr-b{height:38px;min-width:38px}.shr-compact .shr-lbl{display:none}}

/* ---------- Clickable figures (App\Support\StatLists) ---------- */
.statlink{--sc:var(--accent,#9a7a2a);color:inherit;text-decoration:none;border-bottom:2px solid transparent;transition:border-color .15s,color .15s;cursor:pointer}
.statlink.sl-red{--sc:var(--s-red)}.statlink.sl-green{--sc:var(--s-green)}.statlink.sl-blue{--sc:var(--s-blue)}.statlink.sl-amber{--sc:var(--s-amber)}.statlink.sl-purple{--sc:var(--s-purple)}.statlink.sl-teal{--sc:var(--s-teal)}
.statlink:hover,.statlink:focus-visible{color:var(--sc);border-bottom-color:var(--sc);outline:none}
.statlink::after{content:" →";font-size:.7em;opacity:0;transition:opacity .15s}
.statlink:hover::after,.statlink:focus-visible::after{opacity:.9}
@media (hover:none){.statlink{border-bottom:1px dotted color-mix(in srgb,var(--sc) 60%,transparent)}}
a.hb-row{display:contents;color:inherit;text-decoration:none}
.hbars li:has(> a.statlink-row):hover .hb-track i{filter:brightness(1.1)}
.ex-head{padding:18px 0 8px;border-bottom:3px solid var(--sc,var(--accent))}
.ex-head h1{margin:0 0 4px}.ex-count{margin:0;font-size:1.05rem}.ex-count b{font-size:1.6rem}
.ex-list{list-style:decimal;padding-inline-start:2.6em;margin:16px 0}
.ex-list li{border-bottom:1px solid var(--rule,#e5e5e5)}
.ex-list a{display:flex;gap:12px;align-items:baseline;padding:9px 4px;text-decoration:none;color:inherit}
.ex-list a:hover{background:color-mix(in srgb,var(--sc,#999) 8%,transparent)}
.ex-ref{font-family:var(--mono);min-width:6rem}
.ex-list .t-go{margin-inline-start:auto;color:var(--sc,var(--accent))}
.explore.sx-red{--sc:var(--s-red)}.explore.sx-green{--sc:var(--s-green)}.explore.sx-blue{--sc:var(--s-blue)}.explore.sx-amber{--sc:var(--s-amber)}.explore.sx-purple{--sc:var(--s-purple)}.explore.sx-teal{--sc:var(--s-teal)}
.kpi.statlink{border-bottom:0}.kpi.statlink::after{content:none}
.kpi.statlink:hover b{color:var(--accent);text-decoration:underline;text-underline-offset:4px}
.nk-big a.statlink,.nk-funnel.statlink{border-bottom:0}.nk-big a.statlink::after,.nk-funnel.statlink::after{content:none}
.nk-big a.statlink:hover b,.nk-funnel.statlink:hover b{color:var(--s-green);text-decoration:underline;text-underline-offset:4px}
.shr-b[hidden]{display:none}
.nk-ours{display:block;font-size:.78em;color:var(--ink-2,#666);margin-top:2px}

/* ---------- Clickable figures: hover/focus contrast (WCAG AA) ----------
   Light cards: the section's -ink tone (≥4.5:1 on surface in light and dark mode; the base tone, e.g. amber, is not).
   Dark contexts (landing hero, section heroes, dark kpi tiles): light gold / white, never a dark tone. */
.statlink{--sh:var(--accent-ink)}
.statlink.sl-red{--sh:var(--s-red-ink)}.statlink.sl-green{--sh:var(--s-green-ink)}.statlink.sl-blue{--sh:var(--s-blue-ink)}
.statlink.sl-amber{--sh:var(--s-amber-ink)}.statlink.sl-purple{--sh:var(--s-purple-ink)}.statlink.sl-teal{--sh:var(--s-teal-ink)}
.statlink:hover,.statlink:focus-visible{color:var(--sh);border-bottom-color:var(--sh)}
.statlink:focus-visible{outline:2px solid var(--sh);outline-offset:2px;border-radius:3px}
.kpi.statlink:hover b,.kpi.statlink:focus-visible b{color:var(--accent-ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.kpi.statlink b::after{content:" →";font-size:.55em;opacity:0;transition:opacity .15s}
.kpi.statlink:hover b::after,.kpi.statlink:focus-visible b::after{opacity:1}
.nk-big a.statlink:hover b,.nk-funnel.statlink:hover b,.nk-big a.statlink:focus-visible b,.nk-funnel.statlink:focus-visible b{color:var(--s-green-ink)}
/* dark contexts */
.hero3 .statlink,.kpis-hero .statlink,.sx-hero .statlink{--sh:#F5D98B}
.kpis-hero .kpi.statlink:hover b,.kpis-hero .kpi.statlink:focus-visible b{color:#F5D98B}
.kpis-hero .kpi.statlink:focus-visible{outline:2px solid #F5D98B;outline-offset:2px}
.sx-hero .statlink:hover,.sx-hero .statlink:focus-visible{color:#fff;border-bottom-color:#fff}
.sx-hero .statlink:focus-visible{outline-color:#fff}
/* Differences: category grid (old-site categories, shades of red) */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin-top:8px}
.cat-tile{display:flex;flex-direction:column;gap:3px;padding:14px 14px 12px;border-radius:12px;background:var(--cs);color:#fff;text-decoration:none;box-shadow:0 1px 3px rgba(0,0,0,.15);transition:transform .15s,box-shadow .15s}
.cat-tile:hover,.cat-tile:focus-visible{transform:translateY(-2px);box-shadow:0 6px 16px rgba(94,15,24,.3);color:#fff}
.cat-tile.is-on{outline:3px solid #5E0F18;outline-offset:2px}
.cat-tile.is-empty{opacity:.55}
.cat-tile .ct-n{font-size:2rem;font-weight:800;line-height:1}
.cat-tile .ct-name{font-weight:700;font-size:1.05rem}
.cat-tile .ct-pct{font-size:.85rem;opacity:.95}
.cat-tile .ct-bar{height:5px;background:rgba(255,255,255,.3);border-radius:3px;overflow:hidden;margin:4px 0}
.cat-tile .ct-bar i{display:block;height:100%;background:#fff}
.cat-tile .ct-sub{font-size:.75rem;opacity:.9}
.cat-blurb{margin:.2rem 0 .6rem}
.cat-badge{display:inline-block;background:var(--cs,#A31B2E);color:#fff;border-radius:999px;padding:3px 11px;font-weight:700;font-size:.85rem;text-decoration:none}
.cat-badge.sm{font-size:.72rem;padding:2px 8px}
a.cat-badge:hover{color:#fff;filter:brightness(1.1)}

/* share3: clickable charts (home donut, verse-count dot plot, compilation gaps), explore share header */
.dp-row.statlink{border-bottom:0;border-radius:8px;padding:4px 6px;margin:0 -6px;transition:background .15s}
.dp-row.statlink::after{content:none}
.dp-row.statlink:hover,.dp-row.statlink:focus-visible{background:color-mix(in srgb,var(--accent) 12%,transparent);color:inherit}
.dp-row.statlink:hover .dp-n{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px}
.gapbars li:has(> a.gb-a){display:block}
.gb-a{display:grid;grid-template-columns:230px minmax(0,1fr) 90px;align-items:center;gap:16px;color:inherit;text-decoration:none;border-radius:8px;padding:4px 6px;margin:0 -6px;transition:background .15s}
.gb-a:hover,.gb-a:focus-visible{background:color-mix(in srgb,var(--s-teal,#0e8a86) 12%,transparent)}
.gb-a:hover .gb-n{color:var(--s-teal-ink,#0e8a86);text-decoration:underline;text-underline-offset:3px}
@media (max-width:760px){.gb-a{grid-template-columns:minmax(0,1fr) 70px;gap:6px 10px}}
.donut .d-link circle{cursor:pointer;transition:stroke-width .15s,filter .15s}
.donut .d-link:hover circle,.donut .d-link:focus-visible circle{stroke-width:14;filter:brightness(1.08)}
a.stat.stat-a{color:inherit;text-decoration:none;transition:transform .15s,box-shadow .15s}
a.stat.stat-a:hover,a.stat.stat-a:focus-visible{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.08)}
a.stat.stat-a:hover b{color:var(--s-teal-ink,#0e8a86);text-decoration:underline;text-underline-offset:4px}
.ex-head .shr{margin-top:14px}

/* ---- Open data: download/share tools, Downloads page, licence (opendata1) ---- */
.fig-tools{display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap;margin:4px 0}
.card-head .fig-tools{margin-left:auto}
.ft-b{font:600 .72rem/1 var(--sans);letter-spacing:.04em;padding:5px 8px;border:1px solid var(--line,#d9d6cf);border-radius:999px;text-decoration:none;color:inherit;background:transparent;cursor:pointer}
.ft-b:hover,.ft-b:focus-visible{border-color:currentColor;background:rgba(127,127,127,.08)}
.fig-tools .shr-item{width:26px;height:26px}
.dl-all{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin:8px 0 28px}
.dl-zip{display:grid;grid-template-columns:44px 1fr;gap:2px 14px;align-items:center;padding:16px 22px;border-radius:14px;background:#14161C;color:#fff;text-decoration:none;box-shadow:0 6px 24px rgba(0,0,0,.15)}
.dl-zip svg{grid-row:span 2;width:40px;height:40px;fill:none;stroke:#C9A24A;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dl-zip b{font-size:1.25rem}.dl-zip small{opacity:.75}
.dl-badges{display:flex;gap:8px;list-style:none;padding:0;margin:0;flex-wrap:wrap}
.dl-badges li{font:600 .75rem var(--sans);padding:5px 10px;border-radius:999px;background:rgba(127,127,127,.12)}
.dl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.dl-card{border:1px solid var(--line,#e2dfd8);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:10px;border-top-width:5px}
.dl-card header{display:flex;align-items:center;gap:10px}.dl-card h2{font-size:1.08rem;margin:0;flex:1}
.dl-n{font:800 1.6rem var(--sans)}
.dl-card p{margin:0;font-size:.92rem;opacity:.85}
.dl-fmt{display:flex;gap:8px}
.dl-b{flex:1;display:flex;flex-direction:column;align-items:center;padding:10px 6px;border-radius:10px;text-decoration:none;color:inherit;border:1px solid var(--line,#e2dfd8)}
.dl-b:hover{border-color:currentColor}.dl-b b{font:700 .9rem var(--sans)}.dl-b small{opacity:.65;font-size:.75rem}
.dl-card footer{display:flex;justify-content:space-between;gap:8px;font-size:.8rem;opacity:.85;flex-wrap:wrap}
.dl-fields{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;margin:8px 0;font-size:.8rem}.dl-fields dd{margin:0}
.dl-soon{font-style:italic}
.dl-credit{font-size:.75rem}
.chart-gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.cg{margin:0}.cg img{width:100%;height:auto;border-radius:10px;display:block}
.cg figcaption{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:.85rem;margin-top:6px;flex-wrap:wrap}
.cite-box{margin:28px 0 12px;padding:14px 18px;border-left:4px solid #C9A24A;background:rgba(201,162,74,.08);border-radius:8px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.cite-h{font:700 .8rem var(--sans);text-transform:uppercase;letter-spacing:.08em;width:100%}
.cite-t{margin:0;flex:1;min-width:240px;font-family:var(--mono,monospace);font-size:.82rem}
.cite-lic{font-size:.78rem;opacity:.8;width:100%}
.dl-foot{font-size:.8rem;opacity:.75}
.lic-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin:10px 0 24px}
.lic{border-radius:14px;padding:22px;border:1px solid var(--line,#e2dfd8);display:flex;flex-direction:column;gap:10px}
.lic-open{border-top:6px solid #1D8A55}.lic-closed{border-top:6px solid #14161C}
.lic-tag{font:700 .75rem var(--sans);letter-spacing:.06em;text-transform:uppercase;opacity:.8}
.lic h2{margin:0}
.lic-list{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:0}
.lic-list li{padding:4px 10px;border-radius:999px;background:rgba(127,127,127,.12);font-size:.85rem}
.lic-rules{display:flex;flex-direction:column;gap:4px;margin:0}
.lic-legal{font-size:.8rem}
.lic-credits{font-size:.9rem}
.ft-lic{margin-bottom:8px}
.dlc-red{border-top-color:#C8283A}.dlc-green{border-top-color:#1D8A55}.dlc-blue{border-top-color:#2563C9}.dlc-amber{border-top-color:#D08A0E}.dlc-purple{border-top-color:#7A4BC9}.dlc-teal{border-top-color:#0E8A86}.dlc-ink{border-top-color:#C9A24A}