:root {
  --bg:#fbfaf7; --fg:#16181d; --muted:#5c6370; --rule:#dcd8cf;
  --accent:#1c3f5e; --card:#fff; --tint:#f3efe7;
  --theo:#F08A3C; --hannah:#8A5AA8;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#101216; --fg:#e9e6e0; --muted:#9aa1ad; --rule:#282c34;
          --accent:#8fb8d8; --card:#171a1f; --tint:#171a1f; }
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--fg);
       font:16px/1.6 Georgia,"Iowan Old Style",serif; }
img { max-width:100%; }
.wrap { max-width:54rem; margin:0 auto; padding:2rem 1.25rem 4rem; }
.wrap.wide { max-width:66rem; }
a { color:var(--accent); }

header.site { border-bottom:1px solid var(--rule); margin-bottom:2.5rem; }
header.site .bar { display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; padding:1rem 0; }
header.site a.brand { display:flex; align-items:center; gap:.6rem;
  font-size:1.35rem; font-weight:700; color:var(--fg); text-decoration:none; }
header.site a.brand img { width:38px; height:38px; display:block; }
nav.sections { display:flex; gap:1.1rem; flex-wrap:wrap;
  font:600 .82rem/1 system-ui,sans-serif; letter-spacing:.04em;
  text-transform:uppercase; }
nav.sections a { color:var(--muted); text-decoration:none; }
nav.sections a:hover, nav.sections a[aria-current] { color:var(--fg); }

h1 { font-size:1.95rem; line-height:1.22; margin:0 0 .4rem; }
h2 { font-size:1.25rem; margin:2.5rem 0 .75rem; }
.meta { color:var(--muted); font-size:.88rem; margin:0 0 1.75rem;
        font-family:system-ui,sans-serif; }
.standfirst { font-size:1.2rem; line-height:1.5; color:var(--fg);
              margin:0 0 2rem; }

figure { margin:0 0 2.25rem; }
figure img { display:block; width:100%; height:auto; border-radius:3px;
  border:1px solid var(--rule); background:var(--card); }
figcaption { margin-top:.85rem; font-size:1.02rem; }
figcaption .ref { color:var(--muted); font-size:.85rem; display:block;
  margin-top:.4rem; font-family:system-ui,sans-serif; }

/* who is speaking */
.who { display:inline-flex; align-items:center; gap:.4rem; font:600 .8rem/1
  system-ui,sans-serif; color:var(--muted); margin-bottom:.5rem; }
.who img { width:26px; height:26px; display:block; }
.who.theophilus { color:var(--theo); }
.who.hannah { color:var(--hannah); }

/* homepage tiles */
/* Exactly two across, so four tiles read as a balanced 2x2 block. auto-fit
   gave three-then-one on a wide screen, which looked like a mistake. */
.tiles { display:grid; gap:1.25rem; grid-template-columns:repeat(2,1fr);
  margin:2.5rem 0 0; padding:0; list-style:none; }
@media (max-width:46rem) { .tiles { grid-template-columns:1fr; } }
.tiles a { display:block; text-decoration:none; color:inherit;
  border:1px solid var(--rule); border-radius:12px; overflow:hidden;
  background:var(--card); }
.tiles a:hover { border-color:var(--accent); }
.tiles img { display:block; width:100%; height:auto; }
.tiles .cap { padding:.9rem 1rem 1.1rem; }
.tiles .cap b { display:block; font-size:1.1rem; margin-bottom:.15rem; }
.tiles .cap span { color:var(--muted); font-size:.86rem;
  font-family:system-ui,sans-serif; }
.tiles .empty { aspect-ratio:4/3; display:grid; place-items:center;
  background:var(--tint); color:var(--muted);
  font:600 .8rem/1 system-ui,sans-serif; letter-spacing:.06em; }

/* lists and cards */
ul.index { list-style:none; padding:0; }
ul.index li { border-bottom:1px solid var(--rule); }
ul.index a { display:flex; gap:1rem; align-items:baseline; padding:.85rem 0;
  text-decoration:none; }
ul.index a:hover { text-decoration:underline; }
/* Wide enough for "1:15-16" and tabular so the colons line up down the column;
   it holds a verse reference now, not a running count. */
ul.index .n { color:var(--muted); font-size:.85rem; min-width:5rem;
  font-family:system-ui,sans-serif; font-variant-numeric:tabular-nums;
  white-space:nowrap; }
.cards { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  list-style:none; padding:0; }
.cards a { display:block; border:1px solid var(--rule); border-radius:10px;
  padding:1.1rem 1.15rem; text-decoration:none; color:inherit;
  background:var(--card); height:100%; }
.cards a:hover { border-color:var(--accent); }
.cards b { display:block; font-size:1.05rem; line-height:1.3; }
.cards span { display:block; color:var(--muted); font-size:.82rem;
  margin-top:.4rem; font-family:system-ui,sans-serif; }

/* annotated verse under a panel */
.verse { border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  padding:1.4rem 0; margin:0 0 2rem; }
.verse .heb { font-size:1.9rem; line-height:2.1; direction:rtl; text-align:right;
  font-family:"SBL Hebrew","Ezra SIL","Times New Roman",serif; margin:0 0 .3rem; }
.verse .heb[dir=ltr] { direction:ltr; text-align:left; }
.verse .tk { padding:0 .06em; border-radius:3px; }
.verse .tk.pivot { background:#FFD23F; color:#16181d; padding:.05em .18em;
  box-shadow:0 0 0 1px rgba(0,0,0,.12); }
@media (prefers-color-scheme:dark){ .verse .tk.pivot { background:#C79A17; color:#0e1013; } }
.verse .gl { color:var(--muted); font-size:.82rem; font-family:system-ui,sans-serif;
  margin:.2rem 0 0; }
.pivot-note { display:grid; grid-template-columns:auto 1fr; gap:.2rem 1rem;
  margin-top:1rem; font-family:system-ui,sans-serif; font-size:.86rem; }
.pivot-note dt { color:var(--muted); }
.pivot-note dd { margin:0; }
.pivot-note .lex { font-family:"SBL Hebrew","Ezra SIL",serif; font-size:1.15rem; }
.pivot-why { margin:.9rem 0 0; font-size:.95rem; }

/* interlinear reader */
.reader { border-top:1px solid var(--rule); margin:0 0 2rem; padding:1.5rem 0 0; }
.reader h3 { font:700 .74rem/1 system-ui,sans-serif; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted); margin:0 0 .9rem; }
.il { display:flex; flex-wrap:wrap-reverse; gap:.15rem .55rem; direction:rtl;
  justify-content:flex-start; margin:0 0 1.4rem; }
.il[dir=ltr] { direction:ltr; flex-wrap:wrap; }
.w { text-align:center; padding:.3rem .3rem .35rem; border-radius:5px; min-width:2.2rem; }
.w .heb { font:400 1.7rem/1.5 "SBL Hebrew","Ezra SIL","Times New Roman",serif;
  display:block; }
.w .tr { font:400 .62rem/1.3 system-ui,sans-serif; color:var(--muted);
  display:block; direction:ltr; letter-spacing:.02em; }
.w .gl { font:400 .68rem/1.3 system-ui,sans-serif; display:block; direction:ltr; }
.w.rare { background:var(--tint); box-shadow:inset 0 -2px 0 var(--hannah); }
.w.pivot { background:#FFD23F; color:#16181d; }
@media (prefers-color-scheme:dark){ .w.pivot { background:#C79A17; color:#0e1013; } }

/* ------------------------------------------------ controversies + curiosities

   Both reuse .pblock, so a reader moving between sections meets one layout.
   What differs is what goes INSIDE the rail, which is the only thing that
   should differ. */

/* positions: identical weight for every side. Which one was right is a claim,
   and claims live in the prose and the stance block — never in the styling. */
.posgrid { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)); }
.pos { border:1px solid var(--rule); border-radius:10px; padding:1rem 1.1rem;
  background:var(--card); }
.pos h3 { margin:0 0 .15rem; font-size:1.02rem; }
.pos-who { margin:0 0 .6rem; color:var(--muted); font-size:.8rem;
  font-family:system-ui,sans-serif; }
.pos p { margin:0 0 .6rem; }
.pos .pos-why { margin:0; color:var(--muted); font-size:.92rem; }
.pos .pos-why b { color:var(--fg); font:600 .68rem/1 system-ui,sans-serif;
  letter-spacing:.07em; text-transform:uppercase; display:block; margin-bottom:.25rem; }

ol.timeline { list-style:none; padding:0; margin:0 0 1.2rem; }
ol.timeline li { display:flex; gap:1rem; padding:.55rem 0;
  border-bottom:1px solid var(--rule); }
ol.timeline li:last-child { border-bottom:0; }
ol.timeline .yr { flex:0 0 5.5rem; color:var(--muted); font-size:.85rem;
  font-family:system-ui,sans-serif; font-variant-numeric:tabular-nums; }

/* the stance: unmistakably a different register from everything above it */
.pblock.stance > .step-n { color:var(--hannah); }
.pblock.stance h2 { color:var(--hannah); }
.pblock.stance .pbody { border-left:3px solid var(--hannah); padding-left:1.15rem;
  margin-left:-1.15rem; }
.stance-flag { font:600 .72rem/1.5 system-ui,sans-serif; letter-spacing:.03em;
  text-transform:uppercase; color:var(--hannah); margin:0 0 .8rem; }
.stance-sign { margin:.9rem 0 0; color:var(--muted); font-style:italic; }

/* curiosities: the answer first, then the working */
.shortans { border:1px solid var(--rule); border-left:4px solid var(--accent);
  border-radius:10px; padding:1rem 1.2rem; margin:0 0 2rem; background:var(--card); }
.shortans .lab { display:block; font:700 .68rem/1 system-ui,sans-serif;
  letter-spacing:.09em; text-transform:uppercase; color:var(--accent);
  margin-bottom:.5rem; }
.shortans p { margin:0; font-size:1.12rem; line-height:1.5; }

ul.claims { list-style:none; padding:0; margin:0; }
ul.claims .claim { display:flex; gap:.9rem; align-items:baseline;
  padding:.7rem 0; border-bottom:1px solid var(--rule); }
ul.claims .claim:last-child { border-bottom:0; }
.claim-t { flex:1; }
.conf { flex:0 0 auto; min-width:6.5rem; padding:.14rem .5rem; border-radius:99px;
  font:600 .62rem/1.5 system-ui,sans-serif; letter-spacing:.06em;
  text-transform:uppercase; text-align:center; cursor:help;
  border:1px solid var(--rule); color:var(--muted); }
.conf.attested    { border-color:var(--accent); color:var(--accent); }
.conf.probable    { border-color:var(--muted); }
.conf.disputed    { border-style:dashed; }
.conf.speculative { border-style:dotted; }
.conf.popular-myth{ border-style:dotted; text-decoration:line-through; }

blockquote { margin:0 0 1.1rem; padding:.6rem 0 .6rem 1.1rem;
  border-left:3px solid var(--rule); font-size:1.06rem; }
blockquote cite { display:block; margin-top:.45rem; font-style:normal;
  color:var(--muted); font-size:.82rem; font-family:system-ui,sans-serif; }

.sources { margin:3rem 0 0; border-top:1px solid var(--rule); padding-top:1.2rem; }
.sources h2 { font-size:.95rem; margin:0 0 .6rem; }
.sources ol { margin:0; padding-left:1.2rem; color:var(--muted); font-size:.88rem; }
.sources li { margin-bottom:.35rem; }

/* reading level. Three weights of the same neutral chip — a learner picking a
   verse should not be told in red that they are not ready for it. */
.lvl { margin-left:.7rem; padding:.16rem .5rem; border-radius:99px;
  font:600 .62rem/1.5 system-ui,sans-serif; letter-spacing:.07em;
  text-transform:uppercase; vertical-align:.14em; cursor:help;
  border:1px solid var(--rule); color:var(--muted); background:none; }
.lvl.beginner     { border-color:var(--accent); color:var(--accent); }
.lvl.intermediate { border-color:var(--muted); }
.lvl.advanced     { border-color:var(--muted); background:var(--tint); }

/* the read-aloud row */
.say { display:flex; align-items:center; gap:.9rem; flex-wrap:wrap;
  margin:0 0 1.3rem; padding:.7rem .85rem; background:var(--tint);
  border-radius:8px; }
.say audio { height:32px; flex:0 0 auto; max-width:100%; }
.say span { flex:1 1 16rem; color:var(--muted); font-size:.78rem; line-height:1.45;
  font-family:system-ui,sans-serif; }

.fluent { font-size:1.05rem; margin:0 0 1.4rem; }
.fluent .lang { font:600 .7rem/1 system-ui,sans-serif; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted); display:block; margin-bottom:.35rem; }
.fluent .pending { color:var(--muted); font-style:italic; font-size:.92rem; }

/* Scoped to ul deliberately. As a bare `.vocab` this rule reached into the
   practice guides' vocabulary SECTION and laid its heading, number and body out
   as three grid columns — the "02 is indented" bug. A layout rule this
   aggressive has no business matching on a name alone. */
ul.vocab { list-style:none; padding:0; margin:0 0 1.4rem; display:grid;
  gap:.55rem; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); }
.vocab li { border:1px solid var(--rule); border-radius:7px; padding:.6rem .75rem;
  background:var(--card); }
.vocab .heb { font:400 1.3rem/1.3 "SBL Hebrew","Ezra SIL",serif; direction:rtl;
  display:block; }
.vocab .meta2 { font:400 .74rem/1.4 system-ui,sans-serif; color:var(--muted);
  display:block; margin-top:.2rem; }
.vocab .count { color:var(--hannah); font-weight:600; }
.gram { list-style:none; padding:0; margin:0; }
.gram li { border-left:3px solid var(--rule); padding:.2rem 0 .2rem .8rem;
  margin:0 0 .55rem; font:400 .88rem/1.5 system-ui,sans-serif; }
.gram .heb { font:400 1.1rem/1 "SBL Hebrew","Ezra SIL",serif; }

/* book index */
.books { list-style:none; padding:0; margin:0; display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); }
.books a { display:block; border:1px solid var(--rule); border-radius:10px;
  padding:1.2rem 1.25rem; text-decoration:none; color:inherit; background:var(--card); }
.books a:hover { border-color:var(--accent); }
.books b { display:block; font-size:1.35rem; }
.books span { display:block; color:var(--muted); font-size:.84rem; margin-top:.35rem;
  font-family:system-ui,sans-serif; }

/* tags */
.tags { display:flex; flex-wrap:wrap; gap:.4rem; margin:0 0 1.75rem; padding:0;
  list-style:none; }
.tags a { display:inline-block; font:600 .74rem/1 system-ui,sans-serif;
  letter-spacing:.04em; text-transform:uppercase; color:var(--muted);
  border:1px solid var(--rule); border-radius:999px; padding:.35rem .7rem;
  text-decoration:none; }
.tags a:hover { color:var(--fg); border-color:var(--accent); }
.tagbar { display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 2rem; padding:0;
  list-style:none; }
.tagbar a { font:600 .8rem/1 system-ui,sans-serif; color:var(--muted);
  text-decoration:none; border-bottom:2px solid transparent; padding-bottom:.2rem; }
.tagbar a:hover { color:var(--fg); border-bottom-color:var(--accent); }
.tagbar .n { opacity:.6; }

/* explainer body */
.block { margin:0 0 1.5rem; }

/* ---------------------------------------------------------- practice guides

   A field guide, not an article. The reader is going to be standing in
   someone's home with this in their head, so: numbered blocks they can hold in
   order, a short measure, and nothing that reads as a scoreboard.

   The two-column strip deliberately gives both columns identical type, weight
   and background. No green, no red, no ticks. The moment one column looks like
   the answer key, the page is teaching the opposite of the method it describes.
*/
.pnative { font-size:1.3rem; margin:0 0 .1rem; color:var(--fg); }
.pnative i { color:var(--muted); font-size:1rem; }
.pwhen { font-size:.92rem; color:var(--muted); margin:.9rem 0 0;
  padding:.55rem .8rem; background:var(--tint); border-radius:6px; }
.pwhen b { color:var(--fg); font:600 .74rem/1 system-ui,sans-serif;
  letter-spacing:.07em; text-transform:uppercase; margin-right:.5rem; }

/* EVERY numbered block is the same component: a fixed rail carrying the number,
   then the body. Uniformity here is the readability fix — when 03 was a full
   width strip and 04 was a filled card, the numbers stopped reading as one
   sequence and started reading as three unrelated things that happened to have
   digits on them. The hinge still stands out, but through weight on the shared
   rail rather than by becoming a different component. */
.pblock, .hinge { display:grid; grid-template-columns:3.25rem minmax(0,1fr);
  column-gap:1.25rem; margin:2.9rem 0; padding:0; background:none; border:0;
  box-shadow:none; border-radius:0; }
.pblock > .step-n, .hinge > .step-n { grid-column:1; grid-row:1; }
.pblock > h2, .hinge > h2 { grid-column:2; grid-row:1; }
.pbody { grid-column:2; grid-row:2; }
.pblock h2, .hinge h2, .leaveopen h2 { font-size:1.22rem; margin:0 0 .9rem;
  letter-spacing:-.01em; }
.step-n { font:700 .78rem/1.35 system-ui,sans-serif; letter-spacing:.1em;
  color:var(--muted); padding-top:.28rem; }
.pbody p.note { color:var(--muted); font-size:.95rem; margin:0 0 1.15rem;
  max-width:40rem; }
@media (max-width:640px) {
  .pblock, .hinge { grid-template-columns:1fr; }
  .pblock > .step-n, .hinge > .step-n { grid-row:auto; margin-bottom:.35rem; }
  .pblock > h2, .hinge > h2, .pbody { grid-column:1; grid-row:auto; }
}

ul.seen { list-style:none; padding:0; margin:0; }
ul.seen li { padding:.62rem 0 .62rem 1.5rem; border-bottom:1px solid var(--rule);
  position:relative; }
ul.seen li:last-child { border-bottom:0; }
ul.seen li::before { content:""; position:absolute; left:.25rem; top:1.15rem;
  width:6px; height:6px; border-radius:50%; background:var(--muted); }

dl.terms { margin:0; }
dl.terms dt { font-weight:700; margin:1.1rem 0 .2rem; }
dl.terms dt:first-child { margin-top:0; }
dl.terms dd { margin:0; color:var(--muted); max-width:42rem; }

aside.distinction { margin:2.5rem 0; padding:1.3rem 1.4rem;
  background:var(--tint); border-radius:10px; border:1px solid var(--rule); }
aside.distinction h3 { margin:0 0 .5rem; font-size:1.02rem; }
aside.distinction p { margin:0; color:var(--muted); }

aside.caution { margin:1.4rem 0 0; padding:1.1rem 1.3rem; border-radius:10px;
  background:var(--tint); border:1px solid var(--rule);
  border-left:4px solid var(--hannah); }
aside.caution b { display:block; font:700 .74rem/1 system-ui,sans-serif;
  letter-spacing:.07em; text-transform:uppercase; color:var(--hannah);
  margin-bottom:.45rem; }
aside.caution p { margin:0; }

/* the strip. Rows on desktop, stacked cards on a phone. */
.meeting { border-top:1px solid var(--rule); }
.mrow { display:grid; gap:.3rem 1.6rem; padding:1.15rem 0;
  border-bottom:1px solid var(--rule);
  grid-template-columns:1fr 1fr; grid-template-areas:"q q" "a b" "v v"; }
.mq { grid-area:q; font-weight:700; margin:0 0 .45rem; }
.mcol:nth-of-type(1) { grid-area:a; }
.mcol:nth-of-type(2) { grid-area:b; }
.mcol p { margin:0; }
.mlab { display:block; font:600 .68rem/1 system-ui,sans-serif;
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
  margin-bottom:.3rem; }
.mv { grid-area:v; margin:.6rem 0 0; font:600 .72rem/1 system-ui,sans-serif;
  letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
/* The only difference between a shared row and a parting one is a rule down
   the left. Not a colour that means correct. */
.mrow.shared { border-left:3px solid var(--rule); padding-left:1rem; }
.mrow.parts  { border-left:3px solid var(--accent); padding-left:1rem; }
.mrow.parts .mv { color:var(--accent); }
@media (max-width:640px) {
  .mrow { grid-template-columns:1fr; grid-template-areas:"q" "a" "b" "v"; }
  .mcol:nth-of-type(2) { margin-top:.8rem; }
}

/* The hinge is the point of the page, so it gets emphasis — but from the SAME
   rail every other block uses, not from a card. Accent number, accent rule,
   larger claim. Same system, more weight. */
.hinge > .step-n { color:var(--accent); }
.hinge .pbody { border-left:3px solid var(--accent); padding-left:1.15rem;
  margin-left:-1.15rem; }
.hinge .hclaim { font-size:1.3rem; line-height:1.35; font-weight:700;
  margin:0 0 .8rem; }
.hinge p:last-child { margin:0; color:var(--muted); }

ul.says { list-style:none; padding:0; margin:0; }
ul.says li { margin:0 0 .75rem; padding:.85rem 1rem; border-radius:9px;
  background:var(--tint); border:1px solid var(--rule);
  font-style:italic; }
ul.says li:last-child { margin-bottom:0; }

.leaveopen { margin:3rem 0 0; padding-top:1.6rem;
  border-top:3px solid var(--hannah); }
.leaveopen h2 { color:var(--hannah); }
.leaveopen p { margin:0; }
.psource { margin:2.5rem 0 0; font-size:.82rem; color:var(--muted);
  border-top:1px solid var(--rule); padding-top:.9rem; }

/* conversation steps */
ol.steps { list-style:none; padding:0; margin:0 0 2rem;
  counter-reset:step; }
ol.steps > li { counter-increment:step; border-left:3px solid var(--rule);
  padding:0 0 1.6rem 1.25rem; margin:0; position:relative; }
ol.steps > li:last-child { padding-bottom:0; }
.step-label { display:block; font:700 .74rem/1 system-ui,sans-serif;
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
  margin-bottom:.45rem; }
.step-label::before { content:counter(step) ". "; }
ol.steps li.open { border-left-color:var(--hannah); }
ol.steps li.open .step-label { color:var(--hannah); }
.open-note { font-style:italic; color:var(--muted); font-size:.9rem;
  margin-top:.6rem; }

nav.pager { display:flex; justify-content:space-between; gap:1rem;
  border-top:1px solid var(--rule); padding-top:1.25rem;
  font-family:system-ui,sans-serif; font-size:.9rem; }
details.gen { margin-top:2rem; font-family:system-ui,sans-serif;
  font-size:.82rem; color:var(--muted); }
details.gen pre { overflow-x:auto; background:var(--card);
  border:1px solid var(--rule); padding:.8rem; border-radius:3px; }
.stance { border-left:3px solid var(--hannah); background:var(--tint);
  padding:.85rem 1.1rem; margin:0 0 2rem; border-radius:0 6px 6px 0; }
.stance b { display:block; font:700 .74rem/1 system-ui,sans-serif;
  letter-spacing:.08em; text-transform:uppercase; color:var(--hannah);
  margin-bottom:.4rem; }
.stance p { margin:0; font-size:.95rem; }
.scaffold { border:1px dashed var(--rule); border-radius:8px; padding:.9rem 1rem;
  color:var(--muted); font:400 .86rem/1.5 system-ui,sans-serif; margin:0 0 2rem; }
footer.site { margin-top:4rem; padding-top:1.25rem; border-top:1px solid var(--rule);
  color:var(--muted); font-size:.82rem; font-family:system-ui,sans-serif; }
footer.site p { margin:.35rem 0; }