/* =================================================================
   KELVIN — style.css
   "The Absolute Scale" — a Victorian precision instrument. Deep
   lacquered near-black ground, warm brass as the primary accent,
   cold cyan reserved only for absolute-zero / thermodynamics
   moments. Hairline rules and tick-mark scales are the structural
   motif. Adapted from Templates/dark-cinematic/, retuned cooler and
   more instrument-like the way Contour/css/style.css did.

   Design tokens live below — reuse these variables everywhere
   rather than hardcoding colors/spacing. Dense house style: several
   declarations per line, section comments as dividers.
   ================================================================= */

:root{
  /* ---- surfaces (lacquered near-black, stepped for depth) ---- */
  --ink:#070a0e;              /* base — instrument lacquer */
  --ink-raised:#0d1117;       /* alternating panels, cards */
  --ink-surface:#141b24;      /* details/lab panels, inputs */
  --ink-hi:#1b222a;           /* selected/raised state above --ink-surface */

  /* ---- accent: brass (primary — engineering, cable, instruments) ---- */
  --brass:#c9a14a;
  --brass-bright:#e8c979;     /* hover, glow, high emphasis */
  --brass-dim:#5c4a1e;        /* borders/tags at rest */

  /* ---- accent: cyan (ONLY for cold / absolute-zero / thermodynamics) ---- */
  --cyan:#6fd3e8;
  --cyan-dim:#1d4a54;

  /* ---- accent: ember (ONLY for heat + "where he was wrong") ---- */
  --ember:#d9673f;

  /* ---- the one variable every accent-coloured element reads —
     never hardcode a hue on a chapter element; override this per
     section instead (see [data-accent] below). ---- */
  --chapter-accent:var(--brass);

  /* ---- text ---- */
  --ivory:#f0ece3;            /* headings, high emphasis */
  --parchment:#c7c2b6;        /* body copy */
  --stone:#8b8579;            /* labels, captions, muted */

  /* ---- lines ---- */
  --line:rgba(240,236,227,.12);
  --line-soft:rgba(240,236,227,.06);

  /* ---- type ---- */
  --font-display:'Playfair Display', Georgia, serif;
  --font-body:'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  /* ---- layout ---- */
  --maxw:1180px;
  --rail-w:56px;
  --ease:cubic-bezier(.22,.61,.2,1);
}

/* per-chapter accent overrides — the page's colour temperature
   genuinely shifts as you move through it. One accent visible at a
   time. Applied to <section data-accent="…"> AND to the matching
   .rail-tick, so the rail glows the same hue as the chapter it
   points to. */
[data-accent="brass"]{--chapter-accent:var(--brass)}
[data-accent="cyan"]{--chapter-accent:var(--cyan)}
[data-accent="ember"]{--chapter-accent:var(--ember)}

/* ---------- reset ---------- */
*{box-sizing:border-box}
/* An author `display` declaration beats the user-agent [hidden] rule
   regardless of specificity, so anything toggled via the hidden
   attribute (the presenter bar, the Q&A sheet) needs this or it is
   visible on every page load. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--ink);color:var(--parchment);
  font-family:var(--font-body);font-weight:400;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
@media(min-width:901px){ body{ padding-right:var(--rail-w) } }

/* fine grain overlay — copied from Templates/dark-cinematic */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:999;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
}

img,canvas,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--font-display);font-weight:600;line-height:1.08;margin:0}
em{color:var(--chapter-accent);font-style:italic}
strong{color:var(--ivory);font-weight:600}
sub,sup{font-size:.7em;line-height:0}
p{margin:0 0 1em}
::selection{background:var(--brass);color:var(--ink)}
.chapter::selection,.hero::selection,.chapter ::selection,.hero ::selection{background:var(--chapter-accent);color:var(--ink)}
:focus-visible{outline:2px solid var(--chapter-accent);outline-offset:2px}

.container{max-width:var(--maxw);margin:0 auto;padding:0 1.5rem;width:100%}
.visually-hidden{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* ---------- top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:150;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.9rem 1.5rem;
  background:rgba(7,10,14,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.wordmark{display:flex;align-items:baseline;gap:.55rem;color:var(--ivory)}
.wordmark-mark{font-family:var(--font-display);font-weight:600;font-size:1.2rem;letter-spacing:.02em}
.wordmark-sub{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--stone)}
.btn-presenter{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--parchment);background:transparent;border:1px solid var(--line);
  padding:.5rem 1rem;cursor:pointer;transition:border-color .25s var(--ease),color .25s var(--ease);
}
.btn-presenter:hover{border-color:var(--brass);color:var(--brass-bright)}

/* ---------- chapter rail — ruled measuring scale, right edge ---------- */
.rail{
  position:fixed;top:0;right:0;height:100vh;width:var(--rail-w);z-index:200;
  display:flex;align-items:stretch;justify-content:center;
  padding:11vh 0;pointer-events:none;
}
.rail-line{
  position:absolute;top:11vh;bottom:11vh;left:50%;width:1px;
  background:var(--line);transform:translateX(-50%);
}
.rail-fill{
  --progress:0;
  position:absolute;top:11vh;left:50%;width:1px;max-height:78vh;
  height:calc(var(--progress) * 78vh);
  background:var(--brass-bright);transform:translateX(-50%);
  transition:height .12s linear;
}
.rail-ticks{
  position:relative;list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;justify-content:space-between;
  height:100%;width:100%;pointer-events:auto;
}
.rail-ticks li{display:flex}
.rail-tick{
  display:flex;align-items:center;gap:.5rem;
  padding:.3rem 1rem .3rem 0;color:var(--stone);
}
.rail-tick-mark{
  width:10px;height:1px;background:var(--line);flex:none;
  transition:background .3s var(--ease),width .3s var(--ease),box-shadow .3s var(--ease);
}
.rail-tick-num{
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.08em;
  opacity:0;transform:translateX(4px);white-space:nowrap;
  transition:opacity .25s var(--ease),transform .25s var(--ease),color .25s var(--ease);
}
.rail-tick:hover .rail-tick-num,.rail-tick.active .rail-tick-num{opacity:1;transform:none}
.rail-tick:hover .rail-tick-mark{background:var(--chapter-accent)}
.rail-tick.active .rail-tick-mark{
  width:18px;background:var(--chapter-accent);
  box-shadow:0 0 6px var(--chapter-accent),0 0 2px var(--chapter-accent);
}
.rail-tick.active .rail-tick-num{color:var(--chapter-accent)}

@media(max-width:900px){
  body{padding-right:0}
  .rail{
    top:0;right:0;left:0;height:3px;width:auto;padding:0;z-index:300;
    align-items:flex-start;background:var(--ink-raised);
  }
  .rail-line{display:none}
  .rail-ticks{display:none}
  .rail-fill{
    position:static;top:auto;left:auto;max-height:none;transform:none;
    height:3px;width:calc(var(--progress) * 100%);
    background:var(--brass-bright);transition:width .12s linear;
  }
}

/* ---------- hero ---------- */
.hero{
  position:relative;min-height:100vh;display:flex;align-items:center;
  overflow:hidden;isolation:isolate;background:var(--ink);
}
#hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(60% 55% at 50% 25%, rgba(201,161,74,.10), transparent 70%);
}
.hero-inner{position:relative;z-index:2;padding:clamp(6rem,14vh,9rem) 0 clamp(4rem,10vh,6rem)}
.hero-kicker{color:var(--brass);margin:0}
.hero-title{
  font-size:clamp(4rem,17vw,11.5rem);font-weight:600;letter-spacing:.005em;
  color:var(--ivory);line-height:.86;margin:.5rem 0 1.1rem;
}
.hero-lede{
  font-family:var(--font-display);font-weight:400;font-style:italic;
  font-size:clamp(1.2rem,2.6vw,1.7rem);color:var(--parchment);max-width:30ch;margin:0 0 2.2rem;
}
.hero-readout{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap}
.hero-readout .readout{color:var(--cyan)}
.hero-readout-label{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--stone);
}
.scroll-cue{
  position:absolute;left:50%;bottom:2.4rem;transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:.6rem;
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.32em;text-transform:uppercase;color:var(--stone);
}
.scroll-cue::after{content:"";width:1px;height:28px;background:linear-gradient(var(--brass),transparent);animation:scroll-cue-drop 2.4s ease-in-out infinite}
@keyframes scroll-cue-drop{
  0%{transform:scaleY(0);transform-origin:top}
  50%{transform:scaleY(1);transform-origin:top}
  50.01%{transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}
}

/* ---------- Kelvin in 60 seconds — summary card ---------- */
.summary-card{border:1px solid var(--line);background:var(--ink-raised);padding:clamp(1.6rem,4vw,2.6rem)}
.summary-facts{
  margin:1.4rem 0 0;padding:0;border-top:1px solid var(--line);
  display:grid;grid-template-columns:1fr 1fr;gap:0;
}
.summary-facts>div{
  padding:.95rem 1.2rem .95rem 0;border-bottom:1px solid var(--line-soft);
  display:flex;flex-direction:column;gap:.3rem;
}
.summary-facts>div:nth-child(odd){border-right:1px solid var(--line-soft)}
.summary-facts>div:nth-child(even){padding-left:1.2rem}
.summary-facts dt{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);margin:0}
.summary-facts dd{margin:0;font-size:.95rem;line-height:1.5;color:var(--parchment)}
.summary-note{margin:1.5rem 0 0;font-family:var(--font-display);font-style:italic;color:var(--stone);font-size:1rem}
@media(max-width:640px){
  .summary-facts{grid-template-columns:1fr}
  .summary-facts>div:nth-child(odd){border-right:0}
  .summary-facts>div:nth-child(even){padding-left:0}
}

/* ---------- chapter shell ---------- */
.chapter{padding:clamp(4rem,9vw,7.5rem) 0;position:relative;border-top:1px solid var(--line-soft)}
.chapter:first-of-type{border-top:0}
.chapter-head{display:flex;flex-direction:column;gap:.55rem;margin-bottom:clamp(2rem,5vw,3.2rem);max-width:56rem}
.folio{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.24em;color:var(--chapter-accent)}
.kicker{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--stone);margin:0}
.chapter-title{
  font-size:clamp(1.9rem,4.6vw,3.2rem);color:var(--ivory);letter-spacing:-.01em;
}
.lede{
  font-family:var(--font-display);font-weight:400;font-style:italic;
  font-size:clamp(1.2rem,2.4vw,1.5rem);line-height:1.5;color:var(--parchment);
  max-width:42rem;margin:1rem 0 0;
}
.prose{max-width:64ch;font-size:1rem;line-height:1.75;color:var(--parchment)}
.prose p{margin:0 0 1.1em}
.prose strong{color:var(--ivory)}
.prose a{color:var(--chapter-accent);border-bottom:1px solid currentColor}

/* ---------- "Before Kelvin, people believed…" card ---------- */
.before-card{
  border:1px solid var(--line);border-left:3px solid var(--chapter-accent);
  background:var(--ink-raised);padding:1.4rem 1.6rem;margin:2rem 0;max-width:52rem;
}
.before-card .before-label{
  display:block;font-family:var(--font-mono);font-size:.64rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--chapter-accent);margin-bottom:.55rem;
}
.before-card p{margin:0;font-size:.95rem;line-height:1.65;color:var(--parchment)}

/* ---------- "The physics" expandable panel ---------- */
details.physics{
  border:1px solid var(--line);border-left:3px solid var(--chapter-accent);
  background:var(--ink-surface);margin:2rem 0;max-width:56rem;
}
details.physics>summary{
  list-style:none;cursor:pointer;padding:1rem 1.3rem;
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--chapter-accent);display:flex;align-items:center;gap:.7rem;user-select:none;
}
details.physics>summary::-webkit-details-marker{display:none}
details.physics>summary::marker{content:""}
details.physics>summary::before{
  content:"+";font-size:1rem;line-height:1;width:1em;text-align:center;flex:none;
}
details.physics[open]>summary::before{content:"–"}
details.physics>*:not(summary){padding:0 1.3rem 1.3rem;margin:0}
details.physics .eq{margin:.6rem 0 1rem}
details.physics p{color:var(--parchment);font-size:.95rem;line-height:1.7}

/* ---------- hand-set equations ---------- */
.eq{
  display:flex;flex-wrap:wrap;align-items:center;gap:.35em;
  font-family:var(--font-mono);font-size:1.05rem;color:var(--ivory);padding:.4rem 0;
}
.frac{
  display:inline-flex;flex-direction:column;align-items:center;text-align:center;
  vertical-align:middle;margin:0 .3em;font-size:.9em;line-height:1.3;
}
.frac .num{padding:0 .15em .12em;border-bottom:1.5px solid currentColor}
.frac .den{padding:.12em .15em 0}

/* ---------- slider controls ---------- */

.control{display:flex;flex-direction:column;gap:.45rem}
.control label{
  display:flex;justify-content:space-between;gap:.6rem;
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--stone);
}
.control label .control-value{color:var(--chapter-accent);font-size:.72rem}

input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:2px;
  background:var(--line);outline:none;margin:.5rem 0;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;
  background:var(--chapter-accent);border:2px solid var(--ink);cursor:pointer;
  box-shadow:0 0 0 1px var(--chapter-accent);transition:transform .2s var(--ease);
}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}
input[type=range]::-moz-range-thumb{
  width:14px;height:14px;border-radius:50%;background:var(--chapter-accent);
  border:2px solid var(--ink);cursor:pointer;box-shadow:0 0 0 1px var(--chapter-accent);
}
input[type=range]::-moz-range-track{height:2px;background:var(--line);border:0}
input[type=range]:focus-visible{outline:2px solid var(--chapter-accent);outline-offset:4px}

/* ---------- readouts ---------- */
.readout{
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:clamp(1.5rem,3.6vw,2.2rem);color:var(--chapter-accent);letter-spacing:.01em;
}
.readout-lg{font-size:clamp(2.2rem,7vw,3.8rem)}
.readout-unit{font-size:.5em;color:var(--stone);margin-left:.3em;letter-spacing:.08em;text-transform:uppercase}

/* ---------- figures ---------- */
.figure{margin:2.2rem 0}
.figure img,.figure canvas{width:100%;display:block;border:1px solid var(--line-soft)}
.figcap{margin:.6rem 0 0;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.03em;color:var(--stone);line-height:1.6}

/* ---------- pullquote ---------- */
.pullquote{
  font-family:var(--font-display);font-weight:500;font-style:italic;
  font-size:clamp(1.4rem,3vw,2rem);line-height:1.4;color:var(--ivory);
  border-left:3px solid var(--chapter-accent);padding:.2rem 0 .2rem 1.6rem;
  margin:2.4rem 0;max-width:44rem;
}
.pullquote cite{
  display:block;margin-top:.9rem;font-family:var(--font-mono);font-size:.68rem;
  letter-spacing:.12em;text-transform:uppercase;font-style:normal;color:var(--stone);
}

/* ---------- grid / card / tag ---------- */

.card{border:1px solid var(--line);background:var(--ink-raised);padding:clamp(1.2rem,3vw,1.8rem)}
.tag{
  display:inline-flex;align-items:center;font-family:var(--font-mono);font-size:.64rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--chapter-accent);
  border:1px solid currentColor;padding:.25rem .6rem;opacity:.9;
}
.card>.tag{margin-bottom:.8rem}

/* ---------- scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---------- small-screen tightening (down to 400px) ---------- */
@media(max-width:480px){
  .container{padding:0 1.1rem}
  .chapter{padding:3rem 0}
  
  .summary-facts>div{padding:.8rem 0}
  .hero-inner{padding:5rem 0 3rem}
}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
  .scroll-cue::after{animation:none}
}

/* ---------- print — the report + the standalone reference page ---------- */
@media print{
  *{box-shadow:none!important;text-shadow:none!important;background:transparent}
  html,body{background:#fff!important;color:#111!important;overflow:visible!important}
  body::after{display:none!important}
  .topbar,.rail,.scroll-cue,#hero-canvas,.btn-presenter{display:none!important}
  .hero{min-height:0;padding:0}
  .chapter{border:0;padding:1rem 0;page-break-inside:avoid}
  .chapter-title,.lede,.prose,.kicker,.folio,.readout,.eq,dt,dd{color:#111!important}
  .before-card,details.physics,.card,.pullquote{border-color:#999!important;background:#fff!important}
  a{color:#111!important;text-decoration:underline}
  details.physics>summary::before{display:none}
  details.physics>*{display:block!important}
  /* scroll-reveal content is invisible until scrolled into view, and
     printing never scrolls — without this, printed pages come out
     with headings and no body text */
  .reveal{opacity:1!important;transform:none!important}
  /* light-on-dark greys are near-invisible on white paper */
  body *{color:#111!important}
  /* experiments can't be driven on paper; the report is the text */
  .exp,.btn-lab,.print-cta{display:none!important}

  body.print-refs-only .topbar,
  body.print-refs-only .rail,
  body.print-refs-only .hero,
  body.print-refs-only .chapter{display:none!important}
  body.print-refs-only #ch11{display:block!important}
}

/* small warning line inside an experiment (e.g. "no engine possible") */
.inline-note{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.02em;color:var(--ember);margin:.4rem 0 0}

.print-cta{margin-bottom:2rem}
/* solid action button ("Print reference page") */
.btn-lab{
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);background:var(--chapter-accent);border:1px solid var(--chapter-accent);
  padding:.65rem 1.1rem;cursor:pointer;align-self:flex-start;
  transition:opacity .2s var(--ease),transform .2s var(--ease);
}
.btn-lab:hover{opacity:.85}
.btn-lab:active{transform:scale(.97)}
.btn-lab:disabled{opacity:.4;cursor:not-allowed;transform:none}

/* ---------- sources + rubric map ---------- */
.sources-head{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--chapter-accent);
  margin:2.4rem 0 .8rem;font-weight:400;
}
.sources-list{margin:0;padding-left:1.4rem;font-size:.88rem;line-height:1.7}
.sources-list li{margin-bottom:.7rem;color:var(--parchment)}
.sources-list a{color:var(--chapter-accent);text-decoration:underline;text-underline-offset:2px}
.rubric-table{width:100%;border-collapse:collapse;font-size:.85rem;margin-top:.6rem}
.rubric-table th,.rubric-table td{
  text-align:left;padding:.55rem .7rem;border-bottom:1px solid var(--line-soft);
  vertical-align:top;
}
.rubric-table th{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--stone);font-weight:400;
}
.rubric-table td{color:var(--parchment)}
.rubric-table td a{color:var(--chapter-accent);text-decoration:underline;text-underline-offset:2px}
@media(max-width:600px){
  .rubric-table,.rubric-table tbody,.rubric-table tr,.rubric-table td{display:block;width:100%}
  .rubric-table thead{display:none}
  .rubric-table tr{border-bottom:1px solid var(--line-soft);padding:.5rem 0}
  .rubric-table td{border:0;padding:.15rem 0}
  .rubric-table td:last-child{color:var(--chapter-accent);font-family:var(--font-mono);font-size:.75rem}
}

/* =================================================================
   EXPERIMENTS — one consistent layout for all five
   Header (number, title, one-line instruction) → a full-width stage
   → readouts → controls → one sentence on what you're seeing.
   Full width because the old side-by-side layout squeezed the canvas
   and left a tall, empty controls column beside it.
   ================================================================= */
.exp{
  margin:2.6rem 0;border:1px solid var(--line);background:var(--ink-raised);
  padding:clamp(1.1rem,3vw,2rem);display:flex;flex-direction:column;gap:1.3rem;
}
.exp-head{display:flex;flex-direction:column;gap:.4rem}
.exp-tag{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--chapter-accent)}
.exp-title{font-size:clamp(1.4rem,3vw,1.9rem);color:var(--ivory);text-wrap:balance}
.exp-hint{margin:0;color:var(--parchment);font-size:.95rem;line-height:1.55;max-width:46rem}
.exp-stage{
  position:relative;width:100%;aspect-ratio:16/7;
  background:var(--ink);border:1px solid var(--line-soft);overflow:hidden;
}
.exp-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.exp-stage-tall{aspect-ratio:16/8}
.exp-stage-short{aspect-ratio:16/6}
.exp-stage-label{
  position:absolute;left:.9rem;top:.75rem;pointer-events:none;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ivory);text-shadow:0 1px 6px var(--ink);
}
.exp-readouts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem 1.5rem}
.exp-readout{display:flex;flex-direction:column;gap:.25rem;min-width:0}
.exp-label{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--stone)}
.exp-readouts .readout-lg{font-size:clamp(1.25rem,2.4vw,2rem);line-height:1.15;white-space:nowrap}
.exp-readouts .figcap{margin:0}
.exp-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 2rem}
.exp-controls-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.control-wide{grid-column:1/-1}
.range-ends{
  display:flex;justify-content:space-between;margin-top:-.2rem;
  font-family:var(--font-mono);font-size:.64rem;letter-spacing:.06em;color:var(--stone);
}
.exp-chips{display:flex;flex-wrap:wrap;gap:.45rem}
.chip{
  cursor:pointer;background:transparent;color:var(--parchment);
  border:1px solid var(--line);padding:.42rem .7rem;
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.06em;
  transition:border-color .2s var(--ease),color .2s var(--ease),background-color .2s var(--ease);
}
.chip:hover{border-color:var(--chapter-accent);color:var(--ivory)}
.chip.is-on{background:var(--chapter-accent);border-color:var(--chapter-accent);color:var(--ink)}
.exp-checks{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem}
.check{
  display:inline-flex;align-items:center;gap:.55rem;cursor:pointer;
  font-size:.9rem;color:var(--parchment);
}
.check input{width:1.05rem;height:1.05rem;accent-color:var(--chapter-accent);margin:0;cursor:pointer}
.exp-note{
  margin:0;padding-top:1rem;border-top:1px solid var(--line-soft);
  font-size:.88rem;line-height:1.6;color:var(--stone);max-width:52rem;
}

/* ---------- simple content components ---------- */
.split{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:start;margin:2rem 0}
.split > div:not(.prose){display:flex;flex-direction:column;gap:1.2rem}
.split .figure img{max-height:540px;object-fit:cover;object-position:50% 35%}
.split .figure{margin:0}
.split .prose p:first-child{margin-top:0}
.cards-2,.cards-3{display:grid;gap:1.2rem;margin:2rem 0}
.cards-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cards-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.card > .tag{margin-bottom:.9rem}
.card p{margin:.6rem 0 0;line-height:1.6}
.card > .tag + p,.card > .tag + ul,.card > .tag + dl,.card > .tag + ol,.card > .tag + table{margin-top:.2rem}
.sub-head{font-size:clamp(1.3rem,2.6vw,1.7rem);color:var(--ivory);margin:3rem 0 0;text-wrap:balance}
.verdict{margin:1.4rem 0 0;font-size:1.05rem;color:var(--ivory);max-width:48rem;line-height:1.6}

.today-card{
  border:1px solid var(--line);border-left:3px solid var(--ivory);
  background:var(--ink-raised);padding:1.3rem 1.6rem;margin:2rem 0;max-width:52rem;
}
.cards-2 .today-card{margin:0;max-width:none}
.today-label{
  display:block;font-family:var(--font-mono);font-size:.64rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ivory);margin-bottom:.5rem;
}
.today-card p{margin:0;line-height:1.6;color:var(--parchment)}

.fact-list{margin:0;display:flex;flex-direction:column}
.fact-list > div{display:grid;grid-template-columns:6.5rem 1fr;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--line-soft)}
.fact-list > div:last-child{border-bottom:0}
.fact-list dt{font-family:var(--font-mono);font-size:.8rem;color:var(--chapter-accent);font-variant-numeric:tabular-nums}
.fact-list dd{margin:0;line-height:1.55;color:var(--parchment)}

.timeline-list{list-style:none;margin:0;padding:0}
.timeline-list li{
  display:grid;grid-template-columns:6.5rem 1fr;gap:1rem;padding:.55rem 0;
  border-bottom:1px solid var(--line-soft);line-height:1.5;color:var(--parchment);
}
.timeline-list li:last-child{border-bottom:0}
.timeline-list b{font-family:var(--font-mono);font-size:.8rem;font-weight:500;color:var(--chapter-accent);font-variant-numeric:tabular-nums}

.plain-list{margin:0;padding-left:1.1rem;line-height:1.6;color:var(--parchment)}
.plain-list li{margin-bottom:.55rem}

.mini-table{border-collapse:collapse;margin:.2rem 0 0;font-variant-numeric:tabular-nums}
.mini-table th,.mini-table td{text-align:left;padding:.5rem 2.2rem .5rem 0;border-bottom:1px solid var(--line-soft)}
.mini-table th{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--stone);font-weight:400}
.mini-table td{font-family:var(--font-mono);font-size:1rem;color:var(--ivory)}

.peer-grid{margin:1.4rem 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.8rem}
.peer-grid > div{border:1px solid var(--line-soft);background:var(--ink-raised);padding:1rem 1.1rem}
.peer-grid dt{color:var(--ivory);font-weight:600;margin-bottom:.3rem}
.peer-grid dd{margin:0;font-size:.9rem;line-height:1.5;color:var(--parchment)}

.verdicts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1rem}
.verdicts li{display:grid;grid-template-columns:4.2rem 1fr;gap:1rem;align-items:start}
.verdicts p{margin:0}
.verdict-tag{
  font-family:var(--font-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  text-align:center;padding:.3rem 0;border:1px solid currentColor;margin-top:.15rem;
}
.verdict-tag.is-false{color:var(--ember)}
.verdict-tag.is-true{color:var(--brass)}
.verdict-tag.is-mixed{color:var(--stone)}
.fact-check{margin:2.4rem 0 0}
.pullquote cite{
  display:block;margin-top:.8rem;font-family:var(--font-mono);font-style:normal;
  font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--stone);
}
.cite-inline{font-family:var(--font-mono);font-size:.72rem;color:var(--stone)}

@media(max-width:860px){
  .split,.cards-2,.cards-3{grid-template-columns:1fr}
  .exp-controls-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
  .exp-stage,.exp-stage-tall{aspect-ratio:4/3}
  .exp-stage-short{aspect-ratio:4/3}
  .exp-controls,.exp-controls-3{grid-template-columns:1fr}
  .exp-readouts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fact-list > div,.timeline-list li{grid-template-columns:5rem 1fr;gap:.7rem}
  .verdicts li{grid-template-columns:1fr;gap:.4rem}
  .verdict-tag{justify-self:start;padding:.25rem .6rem}
}

/* ---------- web interface guideline fixes ---------- */
:root{color-scheme:dark}
.chapter{scroll-margin-top:4.5rem}           /* sticky top bar would cover anchor targets */
h1,h2,h3{text-wrap:balance}
button,input,.chip,a{touch-action:manipulation}
a,button,input{-webkit-tap-highlight-color:transparent}

/* =================================================================
   PRESENTER MODE
   A curated ~4:20 route for a timed 3-5 minute talk. Bottom bar with
   talking points and a run clock; Q&A sheet over the top; and a
   projector-safe treatment of the page itself.
   ================================================================= */
.pres-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:900;
  display:grid;grid-template-columns:minmax(180px,1fr) 2.2fr auto;
  gap:1.4rem;align-items:start;
  padding:.9rem clamp(1rem,3vw,2rem) calc(.9rem + env(safe-area-inset-bottom,0px));
  background:rgba(7,10,14,.96);border-top:1px solid var(--brass-dim);
  backdrop-filter:blur(8px);
}
.pres-left{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.pres-step{
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;
  color:var(--brass);
}
.pres-title{font-family:var(--font-display);font-size:1.02rem;color:var(--ivory);line-height:1.25}
.pres-points{margin:0;padding-left:1.1rem;list-style:disc}
.pres-points li{
  color:var(--parchment);font-size:.92rem;line-height:1.45;margin-bottom:.28rem;
}
.pres-right{display:flex;align-items:center;gap:.55rem;white-space:nowrap}
.pres-clock{font-family:var(--font-mono);font-size:1.5rem;color:var(--brass-bright)}
.pres-clock.is-warn{color:#e0b44a}
.pres-clock.is-over{color:var(--ember)}
.pres-target{font-family:var(--font-mono);font-size:.78rem;color:var(--stone)}
.pres-nav{display:flex;gap:.35rem;margin-left:.5rem}
.pres-nav button{
  cursor:pointer;background:var(--ink-surface);color:var(--parchment);
  border:1px solid var(--line);padding:.35rem .55rem;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;
  transition:border-color .2s var(--ease),color .2s var(--ease);
}
.pres-nav button:hover{border-color:var(--brass);color:var(--ivory)}

.pres-sheet{
  position:fixed;inset:0;z-index:950;overflow-y:auto;overscroll-behavior:contain;
  background:rgba(7,10,14,.985);padding:clamp(1.5rem,5vw,3rem);
}
.pres-sheet-inner{max-width:1100px;margin:0 auto;padding-bottom:6rem}
.pres-sheet h2{
  font-family:var(--font-display);font-size:clamp(1.4rem,3vw,2rem);
  color:var(--ivory);margin:0 0 1.6rem;
}
.pres-sheet h3{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brass);font-weight:400;
  margin:1.9rem 0 .7rem;
}
.pres-sheet dl{margin:0;display:grid;grid-template-columns:minmax(160px,.8fr) 2fr;gap:.45rem 1.4rem}
.pres-sheet dt{color:var(--ivory);font-size:.9rem;font-weight:600}
.pres-sheet dd{margin:0;color:var(--parchment);font-size:.9rem;line-height:1.6}
.pres-sheet-hint{
  margin-top:2.5rem;font-family:var(--font-mono);font-size:.72rem;
  letter-spacing:.12em;color:var(--stone);
}

/* --- the page itself, while presenting --- */
body.presenting{padding-bottom:12rem}
body.presenting::after{display:none}            /* grain off for projectors */
body.presenting .rail{display:none}
body.presenting .prose,
body.presenting details.physics,
body.presenting .figure,
body.presenting .sources-list,
body.presenting .pullquote,
body.presenting .exp-note,
body.presenting .fact-check{display:none}         /* nothing to read aloud */
body.presenting .chapter{padding-block:clamp(2rem,4vw,3rem)}
body.presenting .chapter-title{font-size:clamp(2rem,5vw,3.4rem)}
body.presenting .lede{font-size:clamp(1.1rem,2.2vw,1.5rem);color:var(--ivory)}
body.presenting .readout-lg{font-size:clamp(2.4rem,6vw,4rem)}
body.presenting .control label,
body.presenting .figcap{font-size:.85rem}

@media(max-width:900px){
  .pres-bar{grid-template-columns:1fr;gap:.6rem}
  .pres-points{display:none}
  .pres-right{justify-content:space-between}
  .pres-sheet dl{grid-template-columns:1fr;gap:.2rem 0}
  .pres-sheet dd{margin-bottom:.8rem}
}
@media print{ .pres-bar,.pres-sheet{display:none!important} }