/* ============================================================
   Darash design system — the SINGLE stylesheet for every page
   (front page, /studies and every study).

   Type scale follows the droide UX Design standard (idd5b1a3c2b3e0d9b5):
   base 22px, everything in rem so the base cascades. The generous base is
   deliberate — content must stay comfortable for readers aged 50+.
     h1 2rem/800 · h2 1.45rem/700 · h3 1.25rem/700 · h4 1.1rem/700
     body 1rem/1.8 · table cell .9rem · table head .8rem upper
     tag .75rem · nav-meta .82rem · badge .68rem · code .86rem
   h2 is Title Case, never uppercase — uppercase removes word shapes and
   slows reading for older adults. Uppercase is reserved for small labels.
   ============================================================ */
:root{
  /* warm ink-black — vellum in low light, not slate. The gold must read as
     gilt on a page, which it cannot do over a blue-grey. */
  --bg:#100d0a; --bg2:#16120e; --surface:#1b1611; --surface2:#221c15;
  --line:#2c241b; --line2:#3d3226;
  --text:#f2ece1; --muted:#bcae99; --faint:#8c7f6c;
  --accent:#d9a441; --accent-soft:rgba(217,164,65,.13);
  /* the rubricator's red — what a scribe used for headings and initials */
  --rubric:#c0503a; --rubric-soft:rgba(192,80,58,.12);
  --cool:#8fb0c9; --ok:#7fb886; --pill-bg:#241d16; --pill-fg:#c6b9a4;
  --display:'EB Garamond',Georgia,'Times New Roman',serif;
  --sans:'Inter Tight',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --serif:'EB Garamond',Georgia,serif;
  --heb:'Frank Ruhl Libre','EB Garamond',serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --r:3px;
}
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;font-size:22px}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:1rem;line-height:1.8;-webkit-font-smoothing:antialiased}
::selection{background:var(--accent-soft);color:var(--accent)}
a{color:var(--accent);text-decoration:underline;text-underline-offset:.12em;text-decoration-color:var(--line2);text-decoration-thickness:1px}
a:hover{color:var(--accent);text-decoration-color:var(--accent)}
/* buttons deliberately break the underline rule — affordance comes from the button */.btn,.btn-gold,.btn-outline{text-decoration:none}
img{max-width:100%}

/* anchors must clear a sticky nav if one is ever injected */
[id]{scroll-margin-top:80px}

.wrap,.wrap-wide,.container{max-width:1120px;margin:0 auto;padding:0 24px}
.container{max-width:920px}
.narrow{max-width:820px;margin-left:auto;margin-right:auto}
.article{max-width:100%}

/* ---------- headings (droide scale) ---------- */
h1{font-family:var(--display);font-size:2rem;font-weight:800;color:var(--text);line-height:1.15;letter-spacing:-.02em;margin-bottom:.5rem}
h2{font-family:var(--display);font-size:1.45rem;font-weight:700;color:var(--accent);line-height:1.25;margin:2rem 0 .6rem}
h3{font-family:var(--display);font-size:1.25rem;font-weight:700;color:var(--text);margin:1.4rem 0 .4rem}
h4{font-size:1.1rem;font-weight:700;color:var(--muted);margin:1.1rem 0 .35rem}
h5,h6{font-size:1rem;font-weight:600;color:var(--faint);margin:1rem 0 .3rem}
p{margin-bottom:.7rem}
ul,ol{margin:0 0 .8rem 1.2rem}
li{margin-bottom:.3rem;line-height:1.8}
strong{color:var(--text)}
em{color:var(--muted)}
blockquote{border-left:3px solid var(--accent);padding:.6rem 1rem;margin:1rem 0;color:var(--muted)}

/* small labels — uppercase is reserved for these; rendered brighter than body
   gold so the tiny size still clears contrast */
.eyebrow{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#e7bb6a;margin-bottom:.55rem}
.badge{display:inline-block;font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#e7bb6a;background:var(--accent-soft);padding:.2rem .5rem;border-radius:5px;margin-bottom:.45rem}
.note,.card-meta,.lk{font-size:.86rem;color:var(--faint)}
.subtitle,.lede{font-size:1rem;color:var(--muted);max-width:68ch;margin-bottom:.8rem;line-height:1.8}
.intro{font-size:1rem;color:var(--faint);max-width:70ch;margin-bottom:1.6rem}

/* tags / pills — no opacity reduction (droide) */
.tag,.pill{display:inline-block;font-family:var(--mono);font-size:.78rem;padding:.1rem .4rem;border-radius:5px;background:var(--pill-bg);border:1px solid var(--line2);color:var(--pill-fg)}
.tag.a{color:var(--accent)}
.pill{border-radius:999px;margin-right:.2rem;color:var(--cool)}
.hl{color:var(--accent);font-weight:700}
.he,.heb{font-family:var(--heb);font-size:1.15em;color:var(--accent);direction:rtl;unicode-bidi:isolate}
.gk,.grk{font-family:var(--serif);color:var(--accent)}
.num{font-family:var(--mono);color:var(--accent)}
.on{color:var(--ok)}

/* ---------- layout ---------- */
section{padding:3rem 0;border-top:1px solid var(--line)}
.page{padding:2.6rem 0 3.4rem}
.hero{padding:3.4rem 0 2.6rem;border-top:none}
.hero h1{max-width:26ch;margin-bottom:.6rem}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero .sub{font-size:1rem;color:var(--muted);max-width:60ch;margin-bottom:1.2rem}
.cta{display:flex;gap:.55rem;flex-wrap:wrap;align-items:center}
/* free-tier hint under the buttons — the orphaned inline <span> was easy to miss */
.cta-hero .cta-note{margin:.4rem 0 0;font-size:.82rem;color:var(--faint)}
.cta-hero .cta-dot{display:inline-block;width:.4rem;height:.4rem;border-radius:999px;background:var(--accent);margin-right:.35rem;vertical-align:middle}

/* ---------- buttons ---------- */
.btn,.btn-gold,.btn-outline{display:inline-block;padding:.5rem 1rem;border-radius:8px;font-family:var(--sans);font-size:.9rem;font-weight:700;cursor:pointer;border:1px solid transparent;transition:filter .15s,border-color .15s,color .15s}
.btn-p,.btn-gold{background:var(--accent);color:#14100a}
.btn-p:hover,.btn-gold:hover{filter:brightness(1.08);text-decoration:none}
.btn-s,.btn-outline{background:transparent;color:var(--text);border-color:var(--line2)}
.btn-s:hover,.btn-outline:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.btn+.btn,.btn-gold+.btn-outline{margin-left:.35rem}

/* ---------- stat strip ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:1.6rem}
.stat{background:var(--surface);padding:.8rem .9rem}
.stat b{display:block;font-family:var(--mono);font-size:1.6rem;font-weight:700;color:var(--text);line-height:1.15}
.stat span{display:block;font-size:.75rem;color:var(--faint);margin-top:.15rem}

/* ---------- cards ---------- */
.grid{display:grid;gap:.8rem}
.g2{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.1rem}
.card h3{margin-top:0;font-size:1.1rem}
.card p{color:var(--muted);font-size:.9rem;margin-bottom:0}

/* ---------- TABLES — droide spec, columns aligned ---------- */
table,.dt,.summary-table,.result table{width:100%;border-collapse:collapse;margin:.8rem 0;font-size:.9rem;table-layout:fixed}
th{text-align:left;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);
   padding:.625rem .875rem;border-bottom:2px solid var(--accent);vertical-align:bottom;white-space:normal;
   overflow-wrap:anywhere;line-height:1.35}
td{padding:.625rem .875rem;border-bottom:1px solid var(--line);vertical-align:top;color:var(--text);line-height:1.6;
   overflow-wrap:anywhere}
tr:last-child td{border-bottom:none}
/* first column is the term/reference — keep it tight and consistent */
th:first-child,td:first-child{width:24%}
/* a metric table: label | number | explanation */
table.perf th:first-child,table.perf td:first-child{width:26%}
table.perf th:nth-child(2),table.perf td:nth-child(2){width:12%;white-space:nowrap}
table.perf th:nth-child(3),table.perf td:nth-child(3){width:62%}
/* a 4-column table gets a narrow code column second */
table:not(.cmp) tr:has(td:nth-child(4)) td:nth-child(2),table:not(.cmp) tr:has(th:nth-child(4)) th:nth-child(2){width:14%}
.tbl-scroll{overflow-x:auto}

/* ---------- research steps ---------- */
.step{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);margin:0 0 .8rem;overflow:hidden}
.step-head{display:flex;align-items:center;gap:.1rem;padding:.65rem .9rem;border-bottom:1px solid var(--line);background:var(--surface2);font-family:var(--serif);font-size:1.1rem;font-weight:700;color:var(--text)}
.step-num{display:inline-flex;align-items:center;justify-content:center;width:1.35rem;height:1.35rem;border-radius:6px;background:var(--accent-soft);color:var(--accent);font-family:var(--mono);font-size:.75rem;font-weight:700;margin-right:.5rem;flex:0 0 auto}
.step-title{font-family:var(--serif);font-weight:700}
.cmd{padding:.55rem .9rem;background:#0b1017;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:.86rem;color:var(--cool);overflow-x:auto;white-space:pre-wrap;word-break:break-word;line-height:1.7}
.cmd .p,.p{color:var(--faint)}
.cmd .c,.c{color:var(--accent)}
.cmd .v,.v{color:var(--ok)}
.result{padding:.8rem .9rem;color:var(--text)}
.result p:last-child{margin-bottom:0}

/* ---------- verse / claim / callout blocks ---------- */
.verse-card{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:0 var(--r) var(--r) 0;padding:.85rem 1.1rem;margin:0 0 .8rem}
.verse-ref{font-family:var(--mono);font-size:.8rem;color:var(--accent);letter-spacing:.04em;margin-bottom:.25rem}
.verse-text{font-family:var(--serif);font-size:1rem;line-height:1.75}
.summary-box,.layman-box,.explainer,.root-card,.claim{background:var(--surface);border:1px solid var(--line2);border-radius:var(--r);padding:1.1rem;margin:1.2rem 0}
.layman-label,.claim-label{font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:.35rem}
.creator-push{background:var(--surface2);border:1px solid var(--line2);border-left:3px solid var(--cool);border-radius:0 var(--r) var(--r) 0;padding:.75rem 1rem;margin:0 0 .8rem;font-style:italic;color:var(--muted);font-size:.92rem}
.pattern-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:.7rem;padding:.5rem 0;border-bottom:1px solid var(--line)}
.pattern-row:last-child{border-bottom:none}
.pattern-ref{font-family:var(--mono);font-size:.82rem;color:var(--accent)}
.pattern-detail,.pattern-blood{font-size:.92rem;color:var(--text)}
.root-heb{font-family:var(--heb);font-size:1.6rem;color:var(--accent);direction:rtl;unicode-bidi:isolate}
.root-translit{font-family:var(--heb);font-size:1.25rem;color:var(--accent)}
.root-meaning{color:var(--muted);font-size:.92rem}
.root-gematria{font-family:var(--mono);font-size:.8rem;color:var(--faint)}

/* ---------- sales blocks ---------- */
.ask{background:linear-gradient(180deg,var(--surface2),var(--surface));border:1px solid var(--line2);border-radius:var(--r);padding:1.1rem;margin:0 0 1.4rem}
.ask .q{font-family:var(--serif);font-size:1.1rem;font-weight:700;margin-bottom:.3rem}
.ask p{color:var(--muted);font-size:.92rem;margin:0}
.cta-block{background:var(--surface);border:1px solid var(--accent);border-radius:var(--r);padding:1.4rem;margin:2rem 0 0;text-align:center}
.cta-block h3{margin-top:0}
.cta-block p{color:var(--muted);font-size:.92rem;max-width:62ch;margin:0 auto .9rem}
.lk{margin-top:1.6rem}
.cp{font-size:.8rem;color:var(--faint);margin-top:.7rem}

/* ---------- study index cards ---------- */
.study-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:.8rem;margin:0 0 2rem}
.study-card{display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.1rem;transition:border-color .18s,background .18s}
.study-card:hover{border-color:var(--accent);background:var(--surface2);text-decoration:none}
.card-title{font-family:var(--serif);font-size:1.15rem;font-weight:700;color:var(--text);margin-bottom:.35rem;line-height:1.3}
.study-card:hover .card-title{color:var(--accent)}
.card-hook{font-size:.9rem;color:var(--muted);margin-bottom:.5rem}

/* ---------- library browser (front page) ---------- */
.tabs{display:flex;gap:.15rem;flex-wrap:wrap;margin-bottom:.8rem;border-bottom:1px solid var(--line)}
.tab{padding:.5rem .8rem;font-family:var(--sans);font-size:.88rem;font-weight:700;color:var(--muted);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer}
.tab:hover{color:var(--text)}
.tab[aria-selected="true"]{color:var(--accent);border-bottom-color:var(--accent)}
.tab .rt{font-family:var(--mono);font-size:.75rem;color:var(--faint);margin-left:.2rem}
.filters{display:flex;gap:.45rem;flex-wrap:wrap;align-items:center;margin-bottom:.7rem}
.search{flex:1;min-width:220px;padding:.45rem .65rem;background:var(--surface);border:1px solid var(--line2);border-radius:8px;color:var(--text);font-family:var(--sans);font-size:.88rem}
.search:focus{outline:none;border-color:var(--accent)}
.chip{padding:.3rem .6rem;font-family:var(--sans);font-size:.8rem;border-radius:999px;background:var(--surface);border:1px solid var(--line2);color:var(--muted);cursor:pointer}
.chip:hover{color:var(--text);border-color:var(--faint)}
.chip[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.count{font-size:.82rem;color:var(--faint);margin-bottom:.5rem}
.rows{border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.row{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1fr) minmax(0,auto);gap:.7rem;align-items:baseline;padding:.5rem .8rem;border-bottom:1px solid var(--line);background:var(--surface);font-size:.88rem}
.row:last-child{border-bottom:none}
.row:nth-child(even){background:var(--surface2)}
.row .nm{min-width:0}
.row .mt{color:var(--faint);font-size:.82rem;min-width:0}
.row .rt{color:var(--faint);font-family:var(--mono);font-size:.78rem;white-space:nowrap;text-align:right}
.row.tool{grid-template-columns:minmax(0,1fr);gap:.15rem}
.row.tool .nm{font-family:var(--mono);font-size:.82rem;color:var(--cool)}
.empty{padding:1.2rem;text-align:center;color:var(--faint);background:var(--surface);font-size:.88rem}

/* ---------- steps / plans ---------- */
.steps{counter-reset:s;display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.steps .step{padding:1.1rem;border-radius:var(--r)}
.steps .step::before{counter-increment:s;content:counter(s);display:flex;align-items:center;justify-content:center;width:1.3rem;height:1.3rem;border-radius:6px;background:var(--accent-soft);color:var(--accent);font-family:var(--mono);font-size:.78rem;font-weight:700;margin-bottom:.5rem}
.steps .step p{color:var(--muted);font-size:.9rem;margin-bottom:0}
.plans{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.plan{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.3rem;display:flex;flex-direction:column}
.plan.f{border-color:var(--accent)}
.plan h3{margin-top:0}
.plan p{color:var(--muted);font-size:.9rem;margin-bottom:.8rem;flex:1}
.plan ul{list-style:none;margin:0 0 .9rem}
.plan li{color:var(--muted);font-size:.86rem;padding:.2rem 0 .2rem .9rem;position:relative}
.plan li::before{content:'';position:absolute;left:0;top:.75rem;width:.4rem;height:2px;background:var(--accent)}

/* ---------- demo panel ---------- */
.demo{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.demo-h{padding:.55rem .9rem;border-bottom:1px solid var(--line);background:var(--surface2);font-size:.82rem;color:var(--faint);font-family:var(--mono)}
.demo-b{padding:.9rem}

@media(max-width:760px){
  html{font-size:20px}
  .page{padding:1.8rem 0 2.4rem}
  .hero{padding:2rem 0 1.6rem}
  h1{font-size:1.7rem}
  h2{font-size:1.3rem}
  table{table-layout:auto;font-size:.85rem}
  th:first-child,td:first-child{width:auto}
  .row{grid-template-columns:1fr;gap:.15rem}
  .row .rt{text-align:left}
  .pattern-row{grid-template-columns:1fr;gap:.15rem}
}

/* ---------- the voice section: an open road at dusk ----------
   A real photograph (CC0) rather than a drawn approximation: the road runs to
   a horizon under an orange sky, which is the scene the copy describes. It is
   toned into the page's warm palette and dropped behind a scrim so the text
   never fights it. Credits: static/img/CREDITS.md */
.scene{position:relative;overflow:hidden;isolation:isolate;padding-bottom:20rem}
.scene>.wrap{position:relative;z-index:2}
.road{position:absolute;left:0;right:0;bottom:0;height:22rem;z-index:0;pointer-events:none}
.road img{width:100%;height:100%;object-fit:cover;object-position:center 62%;display:block;
  filter:saturate(.72) contrast(1.04) brightness(.78) sepia(.18)}
/* feather the top so the photograph emerges out of the page rather than cutting in */
.road::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,var(--bg) 0%,rgba(16,13,10,.86) 22%,rgba(16,13,10,.34) 52%,rgba(16,13,10,.12) 100%)}
@media(max-width:760px){.scene{padding-bottom:13rem}.road{height:15rem}}

/* hero stats sit in the narrower left column — 3x2 reads better than 4+2 */
.hero .stats{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.hero .stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.hero .stats{grid-template-columns:1fr}}

/* ============================================================
   DE-BOXING PASS
   The study pages had become boxes inside boxes: every step a card, every
   card holding a bordered disclosure, a bordered table and often a bordered
   summary box inside that. Editorial pages separate with RULES and SPACE,
   not with outlines. Boxes are now reserved for the two things genuinely set
   apart from the argument — the verse quoted, and the call to action.
   ============================================================ */

/* steps become article sections */
.article .step{
  background:none;border:0;border-radius:0;overflow:visible;
  padding:0;margin:0 0 2.6rem;
  border-top:1px solid var(--line);padding-top:1.5rem}
.article .step:first-of-type{border-top:0;padding-top:.4rem}
.article .step-head{
  background:none;border:0;padding:0 0 .7rem;
  font-family:var(--display);font-size:1.35rem;font-weight:600;color:var(--text);
  display:flex;align-items:baseline;gap:.55rem}
.step-num{background:none;color:var(--rubric);width:auto;height:auto;
  font-family:var(--sans);font-size:.78rem;font-weight:700;letter-spacing:.1em;
  margin:0;flex:0 0 auto}
.article .result{padding:0;background:none}
.article .step > p,.article .step > ul,.article .step > ol,
.article .step > table,.article .step > blockquote{padding-left:0;padding-right:0}
.article .step > p:first-of-type{padding-top:0}
.article .step > .verse-card,.article .step > .summary-box,.article .step > .creator-push{
  margin-left:0;margin-right:0}
.article .step > table{width:100%;margin-left:0;margin-right:0}

/* the disclosure: a quiet line, not a strip */
details.bg{background:none;border:0;border-bottom:0;margin:0 0 1rem}
details.bg>summary{padding:.25rem 0;font-size:.76rem;color:var(--faint);
  border-bottom:1px dotted var(--line2);display:inline-flex;width:auto}
details.bg>summary:hover{color:var(--accent);border-bottom-color:var(--accent)}
details.bg .cmd{border:0;border-left:2px solid var(--line2);background:rgba(0,0,0,.28);
  margin:.6rem 0 0;padding:.7rem .9rem;border-radius:0}

/* summary/conclusion: a ruled panel, not a nested card */
.article .summary-box,.article .explainer{
  background:none;border:0;border-radius:0;padding:0;
  border-top:2px solid var(--accent);padding-top:1.1rem;margin:1.6rem 0 0}
.article .explainer{border-top:1px solid var(--line);color:var(--muted)}
.ask{
  background:none;border:0;border-left:2px solid var(--rubric);border-radius:0;
  padding:.2rem 0 .2rem 1.1rem;margin:0 0 1.8rem}
.ask .q{font-family:var(--display);font-size:1.15rem;font-weight:600;color:var(--text)}
.explainer{background:none;border:0;border-radius:0;
  border-top:1px solid var(--line);padding:1rem 0 0;margin:0 0 2rem;color:var(--muted)}

/* reasoning note: keep the tint, lose the weight */
.think{background:none;border-left:2px solid var(--cool);padding:.1rem 0 .1rem .95rem;
  margin:0 0 1rem;font-style:italic}

/* tables: rules only, no surrounding frame */
.article table{margin:1rem 0 1.2rem}

/* verse: the one thing still framed, and only on one edge */
.article .verse-card{background:rgba(217,164,65,.04);border:0;
  border-left:2px solid var(--rubric);border-radius:0;padding:.9rem 0 .9rem 1.1rem;margin:1rem 0}

/* study index cards keep a light frame but lose the heavy fill */
.study-card{background:rgba(255,255,255,.012)}

/* ============================================================
   COMPOSITION PASS
   Audit found ten sections, every one transparent, every one the same
   two-or-three-column grid, stacked to 15,500px. That is a wall, not a
   composition. Three fixes: TONAL RHYTHM so the eye has somewhere to rest,
   a FULL-BLEED feature so one moment dominates, and real compression.
   ============================================================ */

/* --- 1. tonal rhythm: sections alternate ground --- */
section{position:relative}
section.band{background:var(--bg2)}
section.band::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 70% at 50% 0%,rgba(217,164,65,.045),transparent 65%)}
section.band > *{position:relative}

/* --- 2. the feature: full-bleed, darker, framed by rules --- */
section.feature{
  background:linear-gradient(180deg,#0a0806 0%,#120e0a 55%,#0a0806 100%);
  border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
section.feature h2{color:var(--accent)}

/* --- 3. compression --- */
section{padding:3.4rem 0}
section.tight{padding:2.2rem 0}
.hero{padding:3rem 0 2.4rem}
.hero h1{font-size:2.5rem;line-height:1.06;max-width:20ch}
.hero .sub{font-size:1.02rem;max-width:52ch;margin-bottom:1.1rem}
.hero-grid{gap:2.4rem;align-items:center}
.grid{gap:.7rem}
.card{padding:1rem 1.1rem}
.card h3{font-size:1.05rem;margin-bottom:.3rem}
.card p{font-size:.88rem}
h2{margin:0 0 .6rem}
.lede{margin-bottom:1.4rem}

/* --- pull-quote: the one typographic moment on the page --- */
.pull{max-width:22ch;font-family:var(--display);font-size:2.1rem;font-weight:600;
  line-height:1.14;color:var(--accent);letter-spacing:-.015em;margin:0}
.pull small{display:block;font-family:var(--sans);font-size:.68rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--rubric);margin-top:.7rem}
.split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:2.6rem;align-items:center}
@media(max-width:860px){.split{grid-template-columns:1fr;gap:1.2rem}.pull{font-size:1.6rem;max-width:none}}

/* --- the library: a browsable panel, not a 4,000px scroll --- */
.rows{max-height:26rem;overflow-y:auto;scrollbar-width:thin;
  scrollbar-color:var(--line2) transparent}
.rows::-webkit-scrollbar{width:9px}
.rows::-webkit-scrollbar-thumb{background:var(--line2);border-radius:9px}
.rows::-webkit-scrollbar-track{background:transparent}
.pane{position:relative}
/* a hint that the list continues */
.rows::after{content:''}
.feature .rows{border-color:var(--line2)}

/* --- hero: cap the frontispiece so the fold stays reachable --- */
.frontis figure{max-width:24rem;margin-left:auto}
.frontis img{max-height:22rem;object-fit:cover;object-position:center 12%}

/* ============================================================
   RESTORED — critical-edition + hero spread
   These blocks were destroyed by a truncating edit while the voice section
   was being replaced, which is why the hero grid collapsed and the gilt
   numerals reverted to mono. Re-appended here (after the de-boxing pass, so
   that pass still governs the study pages).
   ============================================================ */

/* vellum grain */
body::before{
  content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay}
body{font-feature-settings:"kern" 1,"liga" 1,"onum" 1}
.num,.stat b,.tag,.pill,td.num,.cmd,.perf-strip b{font-feature-settings:"kern" 1,"tnum" 1,"lnum" 1}

h1{font-weight:600;letter-spacing:-.012em}
h2{font-weight:600;letter-spacing:-.006em;color:var(--accent)}
h3{font-weight:600;letter-spacing:-.004em}

/* drop caps open the argument */
#berean > .wrap > p:first-of-type::first-letter,
#why .lede::first-letter{
  float:left;font-family:var(--display);font-weight:600;color:var(--accent);
  font-size:3.4em;line-height:.82;padding:.06em .12em 0 0;margin-top:.04em}

/* tables as a critical apparatus */
th{font-family:var(--sans);font-size:.8rem;font-weight:700;text-transform:uppercase;
   letter-spacing:.12em;color:var(--rubric);border-bottom:1px solid var(--rubric-soft)}
tr:hover td{background:rgba(217,164,65,.035)}

/* gilt numerals */
.stat b{font-family:var(--display);font-weight:600;font-size:1.9rem;color:var(--accent);letter-spacing:-.01em}
.stat span{font-family:var(--sans);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}

/* buttons pressed in */
.btn-p,.btn-gold{box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.btn-s:hover,.btn-outline:hover{background:var(--accent-soft)}

.verse-ref{color:var(--rubric);font-family:var(--sans);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase}
.verse-text{font-family:var(--display);font-size:1.08rem;line-height:1.62}
.card-title{font-family:var(--display)}

/* manuscript plates */
.plate-fig{margin:1.4rem 0;border:1px solid var(--line);overflow:hidden;background:var(--surface)}
.plate-fig img{display:block;width:100%;height:auto;max-height:20rem;object-fit:cover;object-position:center 20%}
.plate-fig figcaption{padding:.65rem .9rem;font-size:.8rem;color:var(--faint);border-top:1px solid var(--line);line-height:1.5}
.pd{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--pill-fg);background:var(--pill-bg);border:1px solid var(--line2);border-radius:4px;padding:.05rem .35rem;margin-left:.35rem}

/* ---- the hero as an editorial spread (the block that was lost) ---- */
.hero-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.9fr);
  gap:2.4rem;align-items:center}
.hero-copy{min-width:0}
.frontis{min-width:0}
.frontis figure{position:relative;margin:0;border:1px solid var(--line2);background:var(--surface);
  padding:.5rem;max-width:23rem;margin-left:auto;
  box-shadow:0 24px 60px -24px rgba(0,0,0,.9),0 2px 0 rgba(217,164,65,.12);
  transform:rotate(-1.05deg)}
.frontis figure::after{content:'';position:absolute;inset:.5rem;pointer-events:none;
  border:1px solid rgba(217,164,65,.22)}
.frontis img{display:block;width:100%;height:auto;max-height:21rem;object-fit:cover;object-position:center 12%;
  filter:sepia(.16) contrast(1.06) brightness(.94)}
.frontis figcaption{display:block;padding:.55rem .2rem .1rem;font-family:var(--sans);text-align:center}
.fx-t{display:block;font-size:.76rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.fx-s{display:block;font-size:.72rem;letter-spacing:.06em;color:var(--faint);margin-top:.15rem}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:1.6rem}
  .frontis figure{transform:none;max-width:20rem;margin:0 auto}
}

/* one orchestrated load */
@media(prefers-reduced-motion:no-preference){
  .hero .eyebrow,.hero h1,.hero .sub,.hero .cta,.hero .stats,.frontis{
    opacity:0;transform:translateY(10px);animation:rise .7s cubic-bezier(.2,.7,.3,1) forwards}
  .hero h1{animation-delay:.06s} .hero .sub{animation-delay:.13s}
  .hero .cta{animation-delay:.2s} .hero .stats{animation-delay:.27s}
  .frontis{animation-delay:.34s}
}
@keyframes rise{to{opacity:1;transform:none}}
::selection{background:rgba(217,164,65,.26);color:var(--text)}

/* ---------- latency chart ----------
   Bare numerals in boxes read as counts, not durations ("34 / cross-refs"
   looked like 34 cross-references). A proportional bar shows the SHAPE of the
   timing instantly — everything short, one slightly longer — and the unit
   travels with the number. Widths are relative to the slowest call, 75 ms. */
.lat{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.lat li{display:grid;grid-template-columns:minmax(0,1fr) minmax(70px,.85fr) auto;
  gap:.9rem;align-items:center;padding:.6rem 0;border-bottom:1px solid var(--line)}
.lat-k{font-size:.9rem;color:var(--text);min-width:0}
.lat-bar{position:relative;height:5px;border-radius:999px;background:rgba(255,255,255,.05);overflow:hidden}
.lat-bar i{position:absolute;inset:0 auto 0 0;display:block;border-radius:999px;
  background:linear-gradient(90deg,var(--accent),#e7bb6a)}
.lat-v{font-family:var(--display);font-size:1.25rem;font-weight:600;color:var(--accent);
  white-space:nowrap;text-align:right;font-feature-settings:"tnum" 1,"lnum" 1}
.lat-v em{font-style:normal;font-family:var(--sans);font-size:.62rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-left:.15rem}
@media(prefers-reduced-motion:no-preference){
  .lat-bar i{transform-origin:left;animation:latgrow .8s cubic-bezier(.2,.7,.3,1) both}
  .lat li:nth-child(2) .lat-bar i{animation-delay:.06s}
  .lat li:nth-child(3) .lat-bar i{animation-delay:.12s}
  .lat li:nth-child(4) .lat-bar i{animation-delay:.18s}
  .lat li:nth-child(5) .lat-bar i{animation-delay:.24s}
}
@keyframes latgrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(max-width:860px){
  .lat li{grid-template-columns:minmax(0,1fr) auto;row-gap:.3rem}
  .lat-bar{grid-column:1/-1;order:3}
}
.split .pull{margin-bottom:.7rem}

/* the blink reference row: the comparison IS the point, so it is drawn as the
   full scale and everything else is measured against it */
.lat-ref{border-bottom:0;padding-top:.85rem}
.lat-ref .lat-k{color:var(--faint);font-style:italic}
.lat-ref .lat-bar{background:rgba(255,255,255,.04)}
.lat-ref .lat-bar i{background:repeating-linear-gradient(90deg,var(--line2) 0 5px,transparent 5px 10px)}
.lat-ref .lat-v{color:var(--faint);font-size:1.05rem}
.lat-ref .lat-v em{color:var(--faint)}
/* top-align the split so the two columns actually relate */
.split{align-items:start}
.split > div:first-child{padding-top:.2rem}

/* language badge on study cards — nine of the ten are English and one is
   Norwegian; without a marker the reader only finds out after clicking */
.lang-badge{display:inline-block;font-family:var(--sans);font-size:.62rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;padding:.14rem .42rem;border-radius:3px;
  margin-bottom:.5rem;border:1px solid var(--line2);background:var(--pill-bg);color:var(--pill-fg)}
.lang-badge.nb{border-color:rgba(217,164,65,.45);color:#e7bb6a;background:rgba(217,164,65,.10)}
.study-card .card-meta{margin-top:.1rem}
/* flag sits with the language badge — emoji renders in colour on every OS,
   so no image request and no icon font */
.lang-badge .flag{margin-right:.32rem;font-size:.86rem;line-height:1;
  vertical-align:-.08em;letter-spacing:0}

/* ---------- droide type-scale compliance ----------
   Measured against the spec rather than eyeballed. Two deviations found:
   heading WEIGHTS were rendering 600 because only EB Garamond 400-600 was
   being fetched, so 700/800 fell back silently; and the hero h1 had drifted
   to 2.5rem against the 2rem spec. Both corrected. */
h1{font-weight:800}
h2{font-weight:700}
h3{font-weight:700}
h4{font-weight:700;font-size:1.1rem}
h5,h6{font-weight:600;font-size:1rem}
.hero h1{font-size:2rem}
@media(max-width:760px){.hero h1{font-size:1.7rem}}

/* body copy back to the 1rem droide floor.
   Several paragraph rules had drifted to .88-.92rem while chasing density —
   that is body text, and droide puts body at 1rem/1.8 precisely so it stays
   readable for 50+. Small sizes stay ONLY where droide allows them: table
   cells (.9), nav/meta/notes (.82-.86), tags (.75), labels (.68). */
.card h3{font-size:1.25rem;margin-top:0;margin-bottom:.35rem}
.card p,
.ask p,
.cta-block p,
.creator-push,
.pattern-detail,.pattern-blood,
.root-meaning,
.card-hook,
.steps .step p,
.plan p{font-size:1rem;line-height:1.7}
.plan li{font-size:.95rem}
.think{font-size:1rem}

/* ---------- studies index: give it a front page ----------
   Thirteen identical cards is a list, not an invitation. One lead study gets
   real estate and a proper hook; two runners-up sit beside it; the full grid
   follows underneath for anyone browsing rather than choosing. */
.feat-row{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:1rem;margin:0 0 .5rem}
.feat{display:flex;flex-direction:column;gap:.4rem;background:var(--surface);
  border:1px solid var(--line);padding:1.3rem 1.4rem;transition:border-color .18s,background .18s}
.feat:hover{border-color:var(--accent);background:var(--surface2);text-decoration:none}
.feat-eyebrow{font-family:var(--sans);font-size:.68rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--rubric)}
.feat-title{font-family:var(--display);font-size:1.5rem;font-weight:700;color:var(--text);line-height:1.2}
.feat:hover .feat-title{color:var(--accent)}
.feat-hook{font-size:1rem;line-height:1.65;color:var(--muted)}
.feat-meta{font-family:var(--sans);font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-top:.15rem}
.feat.lead{border-left:2px solid var(--accent)}
.feat-side{display:grid;grid-template-rows:1fr 1fr;gap:1rem;min-width:0}
.feat-side .feat-title{font-size:1.18rem}
.feat-side .feat-hook{font-size:.95rem}
@media(max-width:860px){
  .feat-row{grid-template-columns:1fr}
  .feat-side{grid-template-rows:auto auto}
  .feat.lead .feat-title{font-size:1.3rem}
}
/* card-shaped links opt out of the inline-underline affordance, exactly as
   buttons do — the card IS the affordance, and underlining every line of a
   hook paragraph reads as damage rather than as a link */
.feat,.study-card,.plate-fig a{text-decoration:none}
.feat:hover,.study-card:hover{text-decoration:none}

/* ---------- grid columns should mean what they say ----------
   .g2 was declared as auto-fit/minmax(340px), which at desktop width resolves
   to THREE tracks. Every two-card section therefore rendered as two cards in a
   three-column grid with a dead third column, and the four-card "who" section
   orphaned its last card onto a row of its own. Named grids now have named
   column counts, and collapse explicitly. */
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:980px){.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.g2,.g3{grid-template-columns:1fr}}

/* ---------- word plate ----------
   For studies whose subject is a WORD rather than a scene. Hanging a narrative
   engraving on a lexical argument is decoration; setting the word itself large
   is the honest illustration — and it costs no bytes, which matters because
   every photographic plate adds ~300 KB to an embedded binary. */
.wordplate{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:1.4rem;align-items:center;margin:1.4rem 0 1.6rem;padding:1.5rem 1.6rem;
  background:linear-gradient(135deg,rgba(217,164,65,.07),rgba(192,80,58,.04) 60%,transparent);
  border:1px solid var(--line2);overflow:hidden}
.wordplate::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 120% at 12% 50%,rgba(217,164,65,.10),transparent 70%)}
.wordplate > *{position:relative}
.wp-word{font-family:var(--heb);font-size:3.4rem;line-height:1;color:var(--accent);
  direction:rtl;unicode-bidi:isolate;text-shadow:0 2px 24px rgba(217,164,65,.22);white-space:nowrap}
.wordplate.gk .wp-word{font-family:var(--display);direction:ltr;font-weight:600;font-size:2.9rem}
.wp-meta{min-width:0}
.wp-translit{font-family:var(--display);font-size:1.5rem;font-style:italic;color:var(--text);line-height:1.2}
.wp-gloss{font-size:1rem;color:var(--muted);margin-top:.3rem;line-height:1.6}
.wp-tag{display:inline-block;margin-top:.5rem;font-family:var(--mono);font-size:.78rem;
  padding:.12rem .45rem;border-radius:4px;background:var(--pill-bg);border:1px solid var(--line2);color:var(--accent)}
@media(max-width:640px){
  .wordplate{grid-template-columns:1fr;gap:.7rem;text-align:center;padding:1.2rem}
  .wp-word{font-size:2.6rem}
}

/* ---------- the bleed spread ----------
   The page was a single column of stacked sections; this is the one place it
   breaks. The plate runs off the LEFT viewport edge while the argument holds
   the content column — the way a fine edition opens facing its illustration.
   Below 900px it collapses to plate-over-text and stops bleeding. */
.spread-sec{padding:0;overflow:hidden}
.spread{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.6rem,4vw,3.4rem);align-items:center;
  max-width:1120px;margin:0 auto;padding:0 24px 0 0}
.spread-plate{position:relative;margin:0;
  /* pull the plate out of the container and off the viewport edge */
  margin-left:calc((100vw - min(100vw,1120px))/-2 - 24px);
  align-self:stretch;display:flex;flex-direction:column;justify-content:center}
.spread-plate img{display:block;width:100%;height:100%;max-height:30rem;object-fit:cover;
  object-position:center 18%;filter:sepia(.14) contrast(1.05) brightness(.9)}
.spread-plate::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(22,18,14,.55) 0%,rgba(22,18,14,0) 28%,rgba(22,18,14,0) 72%,var(--bg2) 100%)}
.spread-plate figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:1.6rem 1.4rem .8rem;font-size:.8rem;color:#cfc3ad;line-height:1.5;
  background:linear-gradient(180deg,rgba(10,8,6,0) 0%,rgba(10,8,6,.86) 55%,rgba(10,8,6,.94) 100%)}
.spread-plate figcaption .pd{color:#e0d5bf;border-color:rgba(255,255,255,.22);background:rgba(0,0,0,.45)}
.spread-copy{padding:3.4rem 0;min-width:0}
.spread-copy h2{margin-top:.2rem}
@media(max-width:900px){
  .spread{grid-template-columns:1fr;gap:0;padding:0 24px}
  .spread-plate{margin-left:-24px;margin-right:-24px}
  .spread-plate img{max-height:16rem}
  .spread-plate::after{background:linear-gradient(180deg,rgba(22,18,14,0) 55%,var(--bg2) 100%)}
  .spread-copy{padding:1.6rem 0 2.4rem}
}

/* ---------- reading measure ----------
   droide: line length 60-80 characters (45-75ch), line-height 1.5-1.8,
   paragraph spacing 1.5x line height. Several paragraphs were running to
   ~94ch because their container is full-width; a measure cap fixes that
   without changing any layout. Elements that are deliberately wide — tables,
   code, rows, the latency chart — are exempt. */
.article p,
.result > p,
.summary-box p,
.explainer p,
.demo-b p,
.spread-copy p,
.wrap > p,
.wrap-wide > p,
.narrow p{max-width:62ch}
/* paragraph rhythm: droide asks for 1.5x line height between paragraphs */
p{margin-bottom:1.05rem}
.result > p:last-child,.card p:last-child,.summary-box p:last-child{margin-bottom:0}
/* body line-height stays inside the 1.5-1.8 band everywhere */
.article p,.result p,.summary-box p,.explainer p{line-height:1.75}
/* the two body-copy classes the measure cap had not reached */
.subtitle{max-width:62ch}
.ask p{max-width:62ch}

/* ---------- a little more room on large desktops ----------
   droide allows up to 1280px. Widening the shell only — the reading measure
   stays capped at 62ch, so lines do not get longer; the extra width goes to
   grids, tables and the library rows, which is where it is useful. */
@media(min-width:1400px){
  .wrap,.wrap-wide{max-width:1240px}
  .container{max-width:1000px}
  .spread{max-width:1240px}
  .spread-plate{margin-left:calc((100vw - min(100vw,1240px))/-2 - 24px)}
}

/* ============================================================
   PHONES
   The 22px base is right for a desktop reader, but at 390px it yields about
   THIRTY characters a line — well under droide's own 45-75 character rule,
   and short lines force constant re-fixation, which is worse for the same
   50+ reader the big base is meant to serve. On phones the measure rule wins:
   a smaller base buys back the line length, and the leading tightens with it.
   ============================================================ */
@media(max-width:560px){
  html{font-size:18px}
  body{line-height:1.62}
  .wrap,.wrap-wide,.container{padding:0 16px}

  h1{font-size:1.65rem;line-height:1.16}
  .hero h1{font-size:1.65rem;max-width:none}
  h2{font-size:1.3rem;line-height:1.22;margin:1.5rem 0 .5rem}
  h3{font-size:1.12rem}
  .article p,.result p,.summary-box p,.explainer p{line-height:1.62}
  p{margin-bottom:.85rem}
  /* the measure caps are desktop guards; on a phone the viewport is the cap */
  .article p,.result>p,.summary-box p,.explainer p,.demo-b p,.spread-copy p,
  .wrap>p,.wrap-wide>p,.narrow p,.subtitle,.ask p{max-width:none}

  section{padding:2.2rem 0}
  .page{padding:1.4rem 0 2rem}
  .hero{padding:1.6rem 0 1.4rem}

  /* blocks lose their inset so text keeps the full line */
  .ask{padding:.1rem 0 .1rem .8rem}
  .think{padding:.1rem 0 .1rem .75rem}
  .verse-card{padding:.7rem 0 .7rem .8rem}
  .article .step{margin-bottom:1.8rem;padding-top:1.1rem}
  .card,.summary-box,.layman-box,.explainer,.root-card,.claim{padding:.9rem 1rem}
  .cta-block{padding:1.2rem 1rem}

  /* tap targets: droide accessibility — nothing interactive under 44px */
  .btn,.btn-gold,.btn-outline{padding:.7rem 1.1rem;font-size:.92rem}
  details.bg>summary{padding:.62rem 0;min-height:44px;display:flex;align-items:center}
  .tab{padding:.7rem .7rem;min-height:44px}
  .chip{padding:.5rem .8rem;min-height:40px;display:inline-flex;align-items:center}
  .search{padding:.65rem .8rem;min-height:44px}
  .study-card,.feat{padding:1rem}
  .lk a{display:inline-block;padding:.35rem 0}

  /* tables: let them scroll rather than crush the columns */
  .tbl-scroll,.result{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table{table-layout:auto;font-size:.86rem;min-width:0}
  th,td{padding:.5rem .55rem}
  th{white-space:normal}

  /* word plate reads better stacked and a little smaller */
  .wp-word{font-size:2.2rem}
  .wordplate.gk .wp-word{font-size:1.9rem}
  .wp-translit{font-size:1.25rem}

  .plate-fig img,.frontis img{max-height:14rem}
  .cmd{font-size:.8rem;padding:.6rem .8rem}
}

/* ---------- table headers must not break mid-word ----------
   `overflow-wrap:anywhere` was inherited by th and split "STRONG'S" into
   "STRONG'" / "S". Headers wrap at spaces only; and the narrow second column
   was 14% (133px), too tight for a letter-spaced uppercase label, so the
   fixed-layout column ratios are rebalanced. */
th{overflow-wrap:normal;word-break:keep-all;hyphens:none;text-wrap:balance}
td{overflow-wrap:break-word;word-break:normal}
/* 4-column tables: term | code | meaning | count */
table:not(.cmp) tr:has(th:nth-child(4)) th:nth-child(1),table:not(.cmp) tr:has(td:nth-child(4)) td:nth-child(1){width:22%}
table:not(.cmp) tr:has(th:nth-child(4)) th:nth-child(2),table:not(.cmp) tr:has(td:nth-child(4)) td:nth-child(2){width:17%}
table:not(.cmp) tr:has(th:nth-child(4)) th:nth-child(3),table:not(.cmp) tr:has(td:nth-child(4)) td:nth-child(3){width:38%}
table:not(.cmp) tr:has(th:nth-child(4)) th:nth-child(4),table:not(.cmp) tr:has(td:nth-child(4)) td:nth-child(4){width:23%}
/* 3-column tables: term | code/number | explanation */
table:not(.cmp) tr:has(th:nth-child(3)):not(:has(th:nth-child(4))) th:nth-child(1),
table:not(.cmp) tr:has(td:nth-child(3)):not(:has(td:nth-child(4))) td:nth-child(1){width:26%}
table:not(.cmp) tr:has(th:nth-child(3)):not(:has(th:nth-child(4))) th:nth-child(2),
table:not(.cmp) tr:has(td:nth-child(3)):not(:has(td:nth-child(4))) td:nth-child(2){width:20%}
/* slightly less letter-spacing so headers fit their columns */
th{letter-spacing:.08em}
/* comparison tables read label | option A | option B — the two options must be
   equal, and the generic term/code/explanation ratio starves them */
table.cmp tr th:nth-child(1),table.cmp tr td:nth-child(1){width:24%}
table.cmp tr th:nth-child(2),table.cmp tr td:nth-child(2){width:38%}
table.cmp tr th:nth-child(3),table.cmp tr td:nth-child(3){width:38%}

/* ---------- the newsletter box (nor/anews) ----------
   anews ships theme-NEUTRAL: every colour in it routes through an --anews-*
   custom property with an inherit/currentColor fallback, so the box takes the
   host page's own palette. This is that palette, declared ONCE — every surface
   that carries the box (/, /news, /news/subscribe) loads this stylesheet, so
   the three cannot drift into three colour schemes. Custom properties inherit,
   so declaring them on .anews reaches every element inside it.

   Darash is a DARK site: there is no prefers-color-scheme block anywhere in
   this file, so there is one palette and no second set that could drift.

   THE ONE PAIR THE LIBRARY CANNOT GET RIGHT ALONE is the submit button. It
   defaults to #fff on --anews-accent and its README says so: a site whose
   accent is PALE must choose its own label colour. Darash's gold #d9a441 is
   pale, and white on it is 1.90:1 — unreadable. The label is therefore the
   site's own near-black --bg, which is what every filled control here already
   does, and it clears AA by a wide margin:

     #100d0a on #d9a441 = 8.75:1   (WCAG 2.x; news_test.go re-derives it)

   --anews-check-fg is the same pair on the same fill (the tick inside a checked
   pill sits on the accent) and it defaults to #fff too, so it needs the same
   correction or the tick vanishes. */
.anews{
  --anews-fg:var(--text);
  --anews-heading-fg:var(--text);
  --anews-accent:var(--accent);
  --anews-border:var(--line2);
  --anews-input-bg:var(--surface);
  --anews-submit-bg:var(--accent);
  --anews-submit-fg:var(--bg);
  --anews-check-fg:var(--bg);
  --anews-pill-checked-bg:var(--accent-soft);
  --anews-pill-hover-bg:rgba(217,164,65,.07);
  --anews-radius:var(--r);
}
/* The wrapper on a host page owns only the space around the box and the rule
   that separates it from what came before; everything inside is anews'. */
.newsbox{margin:3rem 0 0;padding:2rem 0 0;border-top:1px solid var(--line)}
@media (max-width:560px){.newsbox{margin-top:2rem;padding-top:1.5rem}}