: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; }
ul.index .n { color:var(--muted); font-size:.85rem; min-width:2.2rem;
  font-family:system-ui,sans-serif; }
.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; } }

.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; }

.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; }

.pblock { margin:3rem 0; position:relative; }
.pblock h2, .hinge h2, .leaveopen h2 { font-size:1.22rem; margin:0 0 .7rem;
  letter-spacing:-.01em; }
.step-n { display:block; font:700 .72rem/1 system-ui,sans-serif;
  letter-spacing:.16em; color:var(--muted); margin-bottom:.45rem; }
.pblock p.note { color:var(--muted); font-size:.95rem; margin:0 0 1.1rem;
  max-width:40rem; }

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; }
}

.hinge { margin:3.2rem 0; padding:1.6rem 1.7rem; border-radius:12px;
  background:var(--card); border:1px solid var(--rule);
  box-shadow:0 1px 0 var(--rule); }
.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; }