/* ============================================================
   essay-shell.css — for the four 2026 essays in /revisits/.
   These pages carry their own full stylesheet, so this file deliberately
   contains ONLY the shared palette, the fonts and the site chrome.
   Do not add layout classes here: site.css class names such as .wrap,
   .tally and .plate collide with the essays' own.
   ============================================================ */
:root{
  --ground:#0A0D13;      /* sheet ground, near-black with blue bias */
  --plate:#111621;       /* the drawing sheet */
  --plate-2:#161C29;     /* inset blocks */
  --rule:#202939;        /* hairline */
  --rule-2:#2E3A50;      /* emphasised hairline */
  --ink:#E7EBF3;         /* chalk */
  --ink-2:#93A0B6;       /* blue-biased grey */
  --ink-3:#657288;       /* faintest annotation */
  --then:#C9884F;        /* oxidised brass — the 1996–2002 layer */
  --then-dim:#3A2A1B;
  --then-rule:#4C3722;
  --now:#6BA4F8;         /* steel blue, the u(y) plot line — the 2026 layer */
  --now-dim:#152640;
  --focus:#6BA4F8;
  /* figures are mounted on paper in both themes, so their ink is fixed */
  --mount:#F1F0EB;
  --fig-ink:#20262F; --fig-accent:#1F5FBF; --fig-brass:#8C5320; --fig-dim:#6E737C;
  --sans:"IBM Plex Sans Condensed","Helvetica Neue Condensed","Arial Narrow",Helvetica,Arial,sans-serif;
  --serif:"IBM Plex Serif",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono","SF Mono",Menlo,Consolas,monospace;
  --rail:104px;
  color-scheme:dark;
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --ground:#EEEDE8; --plate:#FCFCFA; --plate-2:#F3F2EE;
    --rule:#D7D5CD; --rule-2:#B3B0A6;
    --ink:#16191F; --ink-2:#5A6070; --ink-3:#878D9B;
    --then:#8C5320; --then-dim:#F0E3D6; --then-rule:#D6BC9C;
    --now:#1F5FBF; --now-dim:#E1EAF8;
    --focus:#1F5FBF;
    color-scheme:light;
  }
}
:root[data-theme="light"]{
  --ground:#EEEDE8; --plate:#FCFCFA; --plate-2:#F3F2EE;
  --rule:#D7D5CD; --rule-2:#B3B0A6;
  --ink:#16191F; --ink-2:#5A6070; --ink-3:#878D9B;
  --then:#8C5320; --then-dim:#F0E3D6; --then-rule:#D6BC9C;
  --now:#1F5FBF; --now-dim:#E1EAF8;
  --focus:#1F5FBF;
  color-scheme:light;
}

header.bar,header.bar *,footer.jcr-foot,footer.jcr-foot *{box-sizing:border-box}
header.bar{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb,var(--ground) 88%,transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
}
header.bar .bar-in{max-width:1148px;margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:20px;height:54px}
header.bar .brand{display:flex;align-items:center;gap:11px;text-decoration:none;border:0;flex:0 0 auto;color:var(--ink)}
header.bar .brand svg{width:19px;height:23px;flex:0 0 auto}
header.bar .brand b{font-family:var(--sans);font-weight:600;font-size:16px;letter-spacing:.005em;color:var(--ink)}
header.bar nav{margin-left:auto;display:flex;gap:2px;align-items:center}
header.bar .back{
  font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-2);text-decoration:none;padding:7px 9px;white-space:nowrap;
  border:1px solid var(--rule);transition:border-color .18s,color .18s;
}
header.bar .back:hover{border-color:var(--then);color:var(--ink)}
header.bar .tgl{
  flex:0 0 auto;margin-left:6px;background:none;border:1px solid var(--rule);
  color:var(--ink-2);font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;padding:6px 9px;cursor:pointer;transition:border-color .18s,color .18s;
}
header.bar .tgl:hover{border-color:var(--rule-2);color:var(--ink)}
header.bar :focus-visible,footer.jcr-foot :focus-visible{outline:2px solid var(--focus);outline-offset:3px}

footer.jcr-foot{border-top:1px solid var(--rule);margin:0;background:var(--plate)}
footer.jcr-foot .foot-in{
  max-width:1148px;margin:0 auto;padding:30px 20px 46px;
  display:flex;flex-wrap:wrap;gap:16px 40px;align-items:baseline;
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
}
footer.jcr-foot .foot-in a{color:var(--now);text-decoration:none;border-bottom:1px solid var(--now-dim)}
footer.jcr-foot .foot-in a:hover{border-bottom-color:var(--now)}

@media (prefers-reduced-motion:reduce){
  header.bar *,footer.jcr-foot *{transition:none!important;animation:none!important}
}

/* ---- button in the essay chrome (namespaced: essays define their own .btn) ---- */
header.bar .jcr-btn{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--now);border:1px solid var(--now);padding:7px 11px;white-space:nowrap;
  transition:background .18s,color .18s,gap .18s;
}
header.bar .jcr-btn:hover{background:var(--now);color:var(--ground);gap:12px}
header.bar .jcr-btn span{transition:transform .18s}
header.bar .jcr-btn:hover span{transform:translateX(2px)}
@media (max-width:620px){header.bar .jcr-btn{display:none}}