:root{
  --ink0:#0E1C2E; --ink1:#14263C; --ink2:#1C3350; --line:#2C4763;
  --paper:#E9EEF4; --dim:#8FA5BA; --faint:#5E7893;
  --brass:#C9924B; --brass-dim:#9A733F; --cyan:#7FB6CC;
  --ok:#85BD90; --warn:#D8B45C; --bad:#C87F6E; --interp:#A79BC8;
  --disp:Baskerville,"Iowan Old Style","Palatino Linotype",Georgia,serif;
  --body:"Iowan Old Style",Palatino,"Palatino Linotype",Georgia,serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
html{background:var(--ink0);}
body{
  margin:0; color:var(--paper); background:var(--ink0);
  font-family:var(--body); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
.col{max-width:74ch; margin:0 auto; padding:0 24px;}
a{color:var(--cyan);}
::selection{background:var(--brass); color:var(--ink0);}

/* ---------- top bar ---------- */
.topbar{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  flex-wrap:wrap; max-width:78ch; margin:0 auto; padding:20px 24px 0;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.1em;
}
.site-name{color:var(--brass); text-decoration:none; text-transform:uppercase; letter-spacing:.2em;}
.nav-links{display:flex; gap:18px;}
.nav-links a{color:var(--dim); text-decoration:none;}
.nav-links a:hover{color:var(--paper);}
.nav-links .soon{color:var(--faint); cursor:default;}
.nav-links .soon::after{content:" \00B7 soon"; font-size:9px; letter-spacing:.05em;}

/* ---------- hero ---------- */
header.hero{padding:56px 0 0;}
.eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.22em;
  color:var(--brass); text-transform:uppercase; margin:0 0 18px;
}
h1{
  font-family:var(--disp); font-weight:400; font-size:clamp(38px,7vw,64px);
  line-height:1.04; margin:0 0 8px; text-wrap:balance; letter-spacing:.005em;
}
.subtitle{
  font-family:var(--disp); font-style:italic; color:var(--dim);
  font-size:clamp(17px,2.6vw,21px); margin:0 0 30px;
}
.thesis{font-size:18.5px; max-width:66ch;}
.thesis em{color:var(--brass); font-style:italic;}

/* circuit diagram */
.circuit{margin:38px 0 8px; overflow-x:auto;}
.circuit svg{display:block; width:100%; max-width:640px; height:auto;}
.circuit text{font-family:var(--mono); font-size:10px; letter-spacing:.14em; fill:var(--faint);}
.circuit .wire{stroke:var(--cyan); stroke-width:1.4; fill:none;}
.circuit .part{stroke:var(--cyan); stroke-width:1.4; fill:none;}
.circuit .op{stroke:var(--brass); stroke-width:1.6; fill:none;}
.circuit .op-label{fill:var(--brass);}
.circuit .op-gone{stroke:var(--brass-dim); stroke-width:1.4; fill:none; stroke-dasharray:5 5;}

/* ---------- glossing ---------- */
.g{position:relative; cursor:help; border-bottom:1px dotted var(--brass-dim);}
.g:focus-visible{outline:2px solid var(--cyan); outline-offset:1px;}
.tip{
  display:none; position:absolute; left:0; top:calc(100% + 8px); z-index:30;
  width:min(340px,78vw); background:var(--ink2); border:1px solid var(--line);
  border-top:2px solid var(--brass); padding:12px 14px; border-radius:2px;
  font-family:var(--body); font-size:14.5px; line-height:1.5; color:var(--paper);
  font-style:normal; font-weight:400; box-shadow:0 10px 28px rgba(0,0,0,.45);
}
.g:hover .tip,.g:focus .tip,.g:focus-within .tip{display:block;}

/* ---------- section furniture ---------- */
section{padding:44px 0 8px;}
h2{
  font-family:var(--disp); font-weight:400; font-size:30px; line-height:1.15;
  margin:0 0 6px; text-wrap:balance;
}
.kicker{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--faint); margin:0 0 14px;
}
.rule{border:none; border-top:1px solid var(--line); margin:44px 0 0;}

/* badges */
.badge{
  display:inline-block; font-family:var(--mono); font-size:10px;
  letter-spacing:.14em; padding:3px 8px 2px; border-radius:2px;
  border:1px solid; vertical-align:middle; white-space:nowrap;
}
.b-ok{color:var(--ok); border-color:var(--ok);}
.b-warn{color:var(--warn); border-color:var(--warn);}
.b-bad{color:var(--bad); border-color:var(--bad);}
.b-interp{color:var(--interp); border-color:var(--interp);}
.legend{display:grid; gap:10px; margin:18px 0 0;}
.legend div{display:flex; gap:12px; align-items:baseline; font-size:15px; color:var(--dim);}
.legend .badge{flex:0 0 auto;}

/* ---------- figure plates ---------- */
figure.plate{
  margin:24px 0 6px; padding:14px; background:var(--ink1);
  border:1px solid var(--line); border-radius:2px;
}
figure.plate img{display:block; width:100%; height:auto; border:1px solid var(--line);}
figure.plate figcaption{margin-top:12px;}
figure.plate .cap{
  display:block; font-family:var(--disp); font-style:italic;
  font-size:15.5px; line-height:1.5; color:var(--paper);
}
figure.plate .prov{
  display:block; margin-top:6px; font-family:var(--mono);
  font-size:10.5px; letter-spacing:.06em; color:var(--faint); line-height:1.6;
}
figure.plate.narrow{max-width:420px;}
.plate-pair{display:grid; grid-template-columns:3fr 2fr; gap:14px; align-items:start;}
@media (max-width:640px){.plate-pair{grid-template-columns:1fr;}}
.noimage{
  margin:24px 0 6px; padding:16px 18px; border:1px dashed var(--line);
  border-radius:2px; font-family:var(--mono); font-size:12px; line-height:1.7;
  letter-spacing:.04em; color:var(--faint);
}
.noimage b{color:var(--dim); font-weight:600;}

/* ---------- timeline ---------- */
.rail{position:relative; margin-top:26px;}
.rail::before{
  content:""; position:absolute; left:7px; top:0; bottom:0;
  width:0; border-left:1.4px solid var(--cyan); opacity:.5;
}
.stop{position:relative; padding:0 0 40px 40px;}
.stop::before{
  content:""; position:absolute; left:0; top:8px; width:15px; height:15px;
  border-radius:50%; background:var(--ink0); border:1.6px solid var(--cyan);
}
.stop.op-node::before{border-color:var(--brass); background:var(--brass); box-shadow:0 0 0 4px rgba(201,146,75,.18);}
.era{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  color:var(--cyan); text-transform:uppercase;
}
.stop h3{
  font-family:var(--disp); font-weight:400; font-size:23px; line-height:1.2;
  margin:6px 0 2px; text-wrap:balance;
}
.stop h3 .badge{margin-left:10px; position:relative; top:-2px;}
.strand{margin:14px 0 0;}
.strand-label{
  font-family:var(--mono); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; margin:0 0 4px;
}
.s-rec .strand-label{color:var(--cyan);}
.s-read .strand-label{color:var(--brass);}
.strand p{margin:0; font-size:16.5px;}
blockquote{
  margin:16px 0 0; padding:2px 0 2px 18px; border-left:2px solid var(--brass);
  font-family:var(--disp); font-style:italic; font-size:17.5px; line-height:1.55;
  color:#F2E9DC;
}
blockquote .q-src{
  display:block; margin-top:8px; font-family:var(--mono); font-style:normal;
  font-size:11px; letter-spacing:.05em; color:var(--faint);
}
.cite{font-family:var(--mono); font-size:11px; color:var(--faint); letter-spacing:.03em;}

/* ---------- both-readings panel ---------- */
.split{
  display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line);
  border:1px solid var(--line); margin:22px 0 0;
}
.split>div{background:var(--ink1); padding:20px 22px;}
.split h4{
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; font-weight:400;
  text-transform:uppercase; margin:0 0 10px;
}
.split .inv h4{color:var(--cyan);} .split .rec h4{color:var(--brass);}
.split p{font-size:15.5px; margin:0 0 10px;}
.split-foot{
  border:1px solid var(--line); border-top:none; background:var(--ink2);
  padding:14px 22px; font-family:var(--disp); font-style:italic;
  font-size:16.5px; color:var(--dim);
}
@media (max-width:640px){.split{grid-template-columns:1fr;}}

/* ---------- quiz ---------- */
.quiz{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:22px 0 0;}
@media (max-width:640px){.quiz{grid-template-columns:1fr;}}
.q-card{
  background:var(--ink1); border:1px solid var(--line); border-radius:2px;
  padding:18px 18px 16px; text-align:left; cursor:pointer; color:var(--paper);
  font-family:var(--body); font-size:15.5px; line-height:1.5; display:block; width:100%;
}
.q-card:hover{border-color:var(--brass-dim);}
.q-card:focus-visible{outline:2px solid var(--brass); outline-offset:2px;}
.q-claim{margin:0;}
.q-claim em{font-family:var(--disp); color:#F2E9DC;}
.q-hint{font-family:var(--mono); font-size:10px; letter-spacing:.18em; color:var(--faint); text-transform:uppercase; display:block; margin-top:12px;}
.q-ans{display:none; margin-top:12px; border-top:1px solid var(--line); padding-top:12px;}
.q-card.open .q-ans{display:block;}
.q-card.open .q-hint{display:none;}
.q-ans p{margin:8px 0 0; font-size:14.5px; color:var(--dim);}
.q-ans .cite{display:block; margin-top:8px;}

/* ---------- next / footer ---------- */
.next-list{list-style:none; padding:0; margin:16px 0 0; display:grid; gap:10px;}
.next-list li{
  border:1px solid var(--line); background:var(--ink1); padding:13px 16px;
  font-size:15.5px; color:var(--dim);
}
.next-list b{color:var(--paper); font-weight:600;}
.colophon-foot{padding:56px 0 72px; color:var(--faint); font-size:13.5px;}
.colophon{font-family:var(--mono); font-size:11px; letter-spacing:.06em; line-height:1.8;}

/* ---------- homepage ---------- */
.lesson-card{
  display:block; margin:26px 0 0; padding:20px 22px; background:var(--ink1);
  border:1px solid var(--line); border-radius:2px; text-decoration:none; color:var(--paper);
}
.lesson-card:hover{border-color:var(--brass-dim);}
.lesson-card .lc-kicker{font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--brass); text-transform:uppercase;}
.lesson-card h3{font-family:var(--disp); font-weight:400; font-size:24px; margin:6px 0 6px;}
.lesson-card p{margin:0; font-size:15.5px; color:var(--dim);}

@media (prefers-reduced-motion:no-preference){
  .stop{transition:opacity .3s ease;}
}