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

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

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