/* ═══════════════════════════════════════════════════════════════════════════════════════
   SEVENTY — the chassis graded as an Eastmancolor-era release print running through a
   projector. Tokens after /opt/code/blog/design-explorations/looks/seventy/NOTES.md.
   Fonts vendored; this page makes no third-party request of any kind.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

@font-face { font-family:'Jost'; src:url('fonts/Jost.woff2') format('woff2');
  font-weight:300 700; font-style:normal; font-display:swap; }
@font-face { font-family:'STIX Two Text'; src:url('fonts/STIXTwoText.woff2') format('woff2');
  font-weight:400 700; font-style:normal; font-display:swap; }
@font-face { font-family:'STIX Two Text'; src:url('fonts/STIXTwoText-Italic.woff2') format('woff2');
  font-weight:400 700; font-style:italic; font-display:swap; }
@font-face { font-family:'Courier Prime'; src:url('fonts/CourierPrime.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Courier Prime'; src:url('fonts/CourierPrime-Italic.woff2') format('woff2');
  font-weight:400; font-style:italic; font-display:swap; }

/* latin-ext, so Polish (ą ć ę ł ń ó ś ź ż) has real glyphs. unicode-range means a page with
   no such characters never asks for these files. */
@font-face { font-family:'Jost'; src:url('fonts/Jost-ext.woff2') format('woff2');
  font-weight:300 700; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'STIX Two Text'; src:url('fonts/STIXTwoText-ext.woff2') format('woff2');
  font-weight:400 700; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'STIX Two Text'; src:url('fonts/STIXTwoText-Italic-ext.woff2') format('woff2');
  font-weight:400 700; font-style:italic; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Courier Prime'; src:url('fonts/CourierPrime-ext.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Courier Prime'; src:url('fonts/CourierPrime-Italic-ext.woff2') format('woff2');
  font-weight:400; font-style:italic; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root{
  /* projection black: lamp flare + print D-min. Nothing here reaches #000. */
  --ground:#1a1512;  --screen:#14100d;  --rebate:#100c09;  --hot:#251d16;
  /* warm faded highlights: positive stock, dye fade. Nothing here reaches #fff. */
  --ink:#ecdfc3;     --ink2:#b5a688;    --ink3:#857762;
  --accent:#e07038;  --accent-d:#8a3f1c;
  --line:#2b221b;
  --display:'Jost',Futura,'Century Gothic',system-ui,sans-serif;
  --body:'STIX Two Text',Times,'Times New Roman',serif;
  --mono:'Courier Prime',Courier,monospace;
  --measure:36rem;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--body); font-size:clamp(1.0625rem,1rem + .35vw,1.1875rem); line-height:1.66;
  -webkit-font-smoothing:antialiased;
  padding:0 max(1rem,env(safe-area-inset-left)) 0 max(1rem,env(safe-area-inset-right));
  overflow-x:hidden;
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

/* ── title / end cards: flat matte, centred caps, nothing else ───────────────────────── */
.card{
  max-width:var(--measure); margin:0 auto; padding:min(22vh,7rem) 0 min(16vh,5rem);
  text-align:center;
}
footer.card{ padding:5rem 0 min(20vh,7rem); border-top:1px solid var(--line); margin-top:4rem; }
h1{
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(1.6rem,7.5vw,3rem); letter-spacing:.30em; line-height:1.25;
  margin:0 0 1.6rem; text-indent:.30em;
  text-shadow:0 0 14px rgba(236,200,150,.22), 0 0 42px rgba(224,112,56,.13);
}
.standfirst{ font-size:1.15em; color:var(--ink2); margin:0 auto; max-width:30rem; }
.closing{ font-family:var(--display); text-transform:uppercase; letter-spacing:.24em;
  font-size:.95rem; color:var(--ink2); text-indent:.24em; }
.scrollcue{ font-family:var(--mono); color:var(--accent); margin:3rem 0 0; font-size:1.4rem;
  opacity:.75; }

/* the hole marker — where Sam's words go. Visible on purpose. */
.hole{ color:var(--ink3); }
h1.hole{ text-shadow:none; }
.hole::before{ content:''; }

/* ── a reel ─────────────────────────────────────────────────────────────────────────── */
.reel{ max-width:var(--measure); margin:0 auto; padding:2.5rem 0 4.5rem; }
.reel + .reel{ border-top:1px solid var(--line); }

.edge{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.05em; color:var(--ink3);
  margin:0 0 1.1rem; display:flex; gap:.9rem; align-items:baseline;
}
.edge b{ color:var(--accent); font-weight:400; }
.edge .hole{ color:var(--ink3); font-style:italic; }

/* ── the print frame: rebate + matte around the picture ─────────────────────────────── */
.frame{ margin:0; }
.screen{
  position:relative; aspect-ratio:var(--ar,1.85);
  background:radial-gradient(85% 130% at 50% 44%, var(--hot), var(--screen) 72%);
  border:1px solid #241c15;
  box-shadow:0 0 0 .55rem var(--rebate), 0 18px 48px -28px #000;
  overflow:hidden; touch-action:none; cursor:crosshair;
}
.screen::after{ /* port-glass vignette */
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 120% at 50% 45%, transparent 52%, rgba(16,12,9,.62) 100%);
}
.screen canvas{ display:block; width:100%; height:100%; }

.prompt, .state{
  position:absolute; font-family:var(--mono); font-size:.74rem; letter-spacing:.09em;
  text-transform:uppercase; pointer-events:none; z-index:2;
}
.prompt{
  left:50%; bottom:.85rem; transform:translateX(-50%);
  color:var(--ink); background:rgba(16,12,9,.72); border:1px solid var(--accent-d);
  padding:.42rem .8rem; white-space:nowrap;
  text-shadow:0 0 10px rgba(224,112,56,.5);
  transition:opacity .45s ease;
}
.prompt[hidden]{ display:block; opacity:0; }
.state{ left:.7rem; top:.55rem; color:var(--ink3); }

/* the picture caption sits in the rebate, under the frame — never on it */
.rebate{
  font-family:var(--mono); font-size:.72rem; line-height:1.75; color:var(--ink3);
  margin:1rem 0 0; letter-spacing:.01em;
}
.rebate b{ color:var(--ink2); font-weight:400; }
.rebate.lead{ color:var(--ink2); border-left:1px solid var(--accent-d); padding-left:.85rem;
  margin-top:1.6rem; }

/* ── strip below the picture: controls, numbers, charts ─────────────────────────────── */
.strip{ margin-top:1.6rem; }

.controls{ display:flex; flex-direction:column; gap:.9rem; margin-bottom:1.4rem; }
/* a control and its "what is this" button, side by side. The button lives OUTSIDE the label
   so that pressing it cannot activate the slider it explains. */
.row{ display:flex; align-items:center; gap:.2rem; min-width:0; }
.row > .slider{ flex:1; min-width:0; }
.slider{
  display:flex; align-items:center; gap:.8rem;
  font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.1em;
  color:var(--ink3);
}
.slider.named{ font-size:.7rem; }
.slider.named b{ color:var(--ink); font-weight:400; min-width:6.4em; text-align:right;
  text-transform:none; letter-spacing:0; }
input[type=range]{
  -webkit-appearance:none; appearance:none; flex:1; min-width:0; height:2px; margin:0;
  background:linear-gradient(90deg,#3a2c22,var(--accent-d)); outline:none;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:2rem; height:2rem; border-radius:50%;
  background:var(--ink); border:.5rem solid var(--ground); cursor:pointer;
  box-shadow:0 0 0 1px var(--accent-d);
}
input[type=range]::-moz-range-thumb{
  width:1rem; height:1rem; border-radius:50%; background:var(--ink);
  border:.35rem solid var(--ground); cursor:pointer; box-shadow:0 0 0 1px var(--accent-d);
}
input[type=range]:focus-visible::-webkit-slider-thumb{ box-shadow:0 0 0 3px var(--accent); }

.tellthem{ font-family:var(--mono); font-size:.72rem; line-height:1.7; color:var(--accent);
  margin:.4rem 0 .2rem; }
.toggles{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.4rem; }
.tog, .preset{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink2); background:transparent; border:1px solid var(--line);
  padding:.55rem .8rem; cursor:pointer; min-height:2.5rem;
}
.tog[aria-pressed=true], .preset[aria-pressed=true]{
  color:var(--ink); border-color:var(--accent-d); background:rgba(224,112,56,.09);
}
.tog:hover, .preset:hover{ border-color:var(--accent-d); }
.presets{ display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:.7rem; }
.presetnote{ font-family:var(--mono); font-size:.72rem; color:var(--ink2); margin:0 0 1.3rem; }
.grouphead{ font-family:var(--mono); font-size:.68rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent); margin:1.5rem 0 .8rem; }
.grouphead span{ color:var(--ink3); letter-spacing:.06em; text-transform:none; }

/* ── readouts: the numbers, in the edge strip ───────────────────────────────────────── */
.readouts{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(7.2rem,1fr)); gap:.9rem 1rem;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:.85rem 0; margin:1.2rem 0;
}
.ro{ font-family:var(--mono); line-height:1.3; }
.ro b{ font-weight:400; font-size:1.05rem; color:var(--ink); font-variant-numeric:tabular-nums; }
.ro i{ font-style:normal; color:var(--ink3); font-size:.8rem; margin-left:.25em; }
.ro u{ display:block; text-decoration:none; color:var(--ink3); font-size:.66rem;
  letter-spacing:.06em; text-transform:uppercase; margin-top:.25rem; }
/* the temperature swatch: the colour Planck's law returns at this temperature, with the
   brightness divided out, so the hue stays legible where the picture has clipped to white
   or fallen to black. The fill is computed in story.js from the same table the flame uses —
   it is not a chosen colour, and it is the one readout you can check with your eyes. */
.ro.swatch b{ display:inline-flex; align-items:center; gap:.45em; }
.ro .chip{ width:1.05em; height:1.05em; border-radius:2px; background:#000;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16); flex:0 0 auto; }

/* ── the small charts ───────────────────────────────────────────────────────────────── */
.plot{ margin:1.2rem 0 0; }
.plot canvas{ display:block; width:100%; aspect-ratio:16/7; background:var(--rebate);
  border:1px solid #221a14; }
.plot figcaption{ font-family:var(--mono); font-size:.68rem; color:var(--ink3);
  margin-top:.5rem; line-height:1.6; }
.k-bar{ color:var(--ink2); } .k-line{ color:var(--accent); }
.k-gen{ color:var(--accent); } .k-loss{ color:#12a0bd; }

/* ── the maths, opt-in, closed ──────────────────────────────────────────────────────── */
.maths{ margin-top:1.6rem; border-top:1px solid var(--line); }
.maths summary{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink3); cursor:pointer; padding:.9rem 0; list-style:none; min-height:2.5rem;
}
.maths summary::-webkit-details-marker{ display:none; }
.maths summary::before{ content:'+ '; color:var(--accent); }
.maths[open] summary::before{ content:'− '; }
.maths summary:hover{ color:var(--ink2); }
.mbody{ font-size:.94rem; color:var(--ink2); padding-bottom:1.4rem; }
.mbody p{ margin:0 0 1rem; }
.mbody b{ color:var(--ink); font-weight:600; }
.mbody i{ color:var(--ink); }
.eq{
  font-family:var(--mono); font-size:.9rem; color:var(--ink); background:var(--rebate);
  border-left:1px solid var(--accent-d); padding:.7rem .9rem; overflow-x:auto;
  white-space:nowrap; letter-spacing:.02em;
}
.tier{ font-family:var(--mono); font-size:.72rem; line-height:1.85; color:var(--ink3); }
.tier b{ color:var(--accent); font-weight:400; letter-spacing:.08em; }
.mbody code{ font-family:var(--mono); font-size:.9em; color:var(--ink2); }

/* ── who worked it out. Data in js/people.js; this is only its clothes. ───────────────── */
.person{ border-left:1px solid var(--accent-d); padding:0 0 .2rem 1rem; margin:0 0 1.8rem; }
.personhead{ margin:0 0 .9rem !important; }
.personhead b{ display:block; font-family:var(--display); text-transform:uppercase;
  letter-spacing:.16em; font-size:.9rem; color:var(--ink); font-weight:500; }
.personhead span{ display:block; font-family:var(--mono); font-size:.7rem; color:var(--ink3);
  letter-spacing:.04em; margin-top:.3rem; }
.personhead i{ display:block; font-family:var(--mono); font-size:.7rem; color:var(--accent);
  font-style:normal; letter-spacing:.04em; margin-top:.2rem; }
.person p{ margin:0 0 .9rem; }
.sources{ font-family:var(--mono); font-size:.66rem; color:var(--ink3); line-height:1.7; }
.sources a{ color:var(--ink3); }
.sources a:hover{ color:var(--accent); }
.title-mine{ color:var(--ink2); font-style:normal; }

/* ── the format switch: the frame opens vertically when the fire arrives ─────────────── */
.reel.imax, .reel.lab{ max-width:44rem; }
.reel.imax .frame, .reel.lab .frame{ max-width:24rem; margin-inline:auto; }
.reel.imax .screen, .reel.lab .screen{ box-shadow:0 0 0 .55rem var(--rebate),
  0 0 90px -30px rgba(224,112,56,.55), 0 18px 48px -28px #000; }
.reel.imax .strip, .reel.lab .strip{ max-width:var(--measure); margin-left:auto; margin-right:auto; }

/* ── wider than a phone ─────────────────────────────────────────────────────────────── */
@media (min-width:46rem){
  .reel{ padding:4rem 0 6rem; }
  .controls.wide{ display:grid; grid-template-columns:1fr 1fr; gap:1rem 2rem; }
  .reel.imax, .reel.lab{ max-width:52rem; }
}
@media (min-width:64rem){
  :root{ --measure:38rem; }
}

/* ═══ THE EXPLANATION LAYER ══════════════════════════════════════════════════════════════
   Data in js/explain.js; this is only its clothes. The sheet is FIXED, not in the flow, so
   opening it never pushes the picture off the screen — which is the whole point of it on a
   phone. ─────────────────────────────────────────────────────────────────────────────── */

/* the little i, on any element carrying data-x */
.has-i{ position:relative; }
.i{
  font-family:var(--mono); font-size:.62rem; line-height:1; font-style:italic;
  color:var(--ink3); background:transparent; border:1px solid var(--line); border-radius:50%;
  width:1.35rem; height:1.35rem; padding:0; margin-left:.45rem; cursor:pointer;
  flex:0 0 auto; vertical-align:middle; align-self:center;
}
.i:hover, .i:focus-visible{ color:var(--accent); border-color:var(--accent-d); }
.i.i-open{ color:var(--ground); background:var(--accent); border-color:var(--accent); }
.ro .i{ position:absolute; top:-.15rem; right:0; margin:0; }
.grouphead .i{ vertical-align:baseline; }

.sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  max-height:min(62vh,34rem); display:flex; flex-direction:column;
  background:var(--rebate); border-top:1px solid var(--accent-d);
  box-shadow:0 -18px 60px -24px #000;
  padding-bottom:env(safe-area-inset-bottom);
}
.sheet[hidden]{ display:none; }
.sheethead{ display:flex; align-items:flex-start; gap:1rem; padding:.9rem 1rem .55rem;
  border-bottom:1px solid var(--line); }
.sheettitle{ margin:0; flex:1; min-width:0; }
.sheettitle b{ display:block; font-family:var(--display); text-transform:uppercase;
  letter-spacing:.16em; font-size:.85rem; color:var(--ink); font-weight:500; }
.sheettitle span{ display:block; font-family:var(--mono); font-size:.7rem; color:var(--ink3);
  line-height:1.6; margin-top:.3rem; }
.sheetclose{ font-family:var(--mono); font-size:1.3rem; line-height:1; color:var(--ink2);
  background:transparent; border:1px solid var(--line); width:2.4rem; height:2.4rem;
  flex:0 0 auto; cursor:pointer; }
.sheetclose:hover{ color:var(--accent); border-color:var(--accent-d); }
.sheettabs{ display:flex; gap:0; border-bottom:1px solid var(--line); overflow-x:auto;
  scrollbar-width:none; }
.sheettabs::-webkit-scrollbar{ display:none; }
.sheettab{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink3); background:transparent; border:0; border-bottom:2px solid transparent;
  padding:.75rem .85rem; min-height:2.6rem; cursor:pointer; white-space:nowrap; flex:1 0 auto;
}
.sheettab[aria-selected=true]{ color:var(--ink); border-bottom-color:var(--accent); }
.sheettab.empty{ opacity:.45; }
.sheettab.empty::after{ content:' ·'; }
.sheetbody{ overflow-y:auto; -webkit-overflow-scrolling:touch; padding:1rem 1rem 1.6rem;
  font-size:.92rem; color:var(--ink2); }
.sheetbody p{ margin:0 0 .95rem; }
.sheetbody .person{ margin-bottom:1.2rem; }
.sheetis{ font-family:var(--mono); font-size:.76rem; line-height:1.75; color:var(--ink);
  border-left:2px solid var(--accent); padding:.55rem .85rem; background:rgba(224,112,56,.07); }
.sheetnone{ font-family:var(--mono); font-size:.74rem; color:var(--ink3); line-height:1.8; }
.sheetfoot{ font-family:var(--mono); font-size:.66rem; color:var(--ink3); line-height:1.8;
  border-top:1px solid var(--line); padding-top:.8rem; margin-top:.4rem !important; }
.codehead{ font-family:var(--mono); font-size:.66rem; letter-spacing:.06em; margin-bottom:.4rem !important; }
.codehead b{ color:var(--accent); font-weight:400; }
.codehead span{ color:var(--ink3); display:block; margin-top:.15rem; }
pre.code{
  font-family:var(--mono); font-size:.7rem; line-height:1.65; color:var(--ink);
  background:#0b0806; border-left:1px solid var(--accent-d); padding:.75rem .85rem;
  margin:0 0 .7rem; overflow-x:auto; white-space:pre; -webkit-overflow-scrolling:touch;
}
.codenote{ font-family:var(--mono); font-size:.68rem; line-height:1.8; color:var(--ink3);
  margin-bottom:1.4rem !important; }
.srclist{ list-style:none; margin:0 0 1rem; padding:0; font-family:var(--mono);
  font-size:.72rem; line-height:1.75; }
.srclist li{ margin-bottom:.7rem; }
.srclist a{ color:var(--ink2); }
.srclist a:hover{ color:var(--accent); }
.access{ font-style:normal; font-size:.62rem; letter-spacing:.09em; text-transform:uppercase;
  border:1px solid var(--line); padding:.1rem .35rem; white-space:nowrap; }
.access.free{ color:#12a0bd; border-color:#134a56; }
.access.paywalled{ color:var(--ink3); }

@media (min-width:46rem){
  .sheet{ left:auto; right:1.5rem; width:min(30rem,42vw); bottom:1.5rem;
    max-height:min(76vh,44rem); border:1px solid var(--accent-d); }
}

/* ═══ ONE SCREEN AT A TIME ════════════════════════════════════════════════════════════════
   Sam, on a phone, 2026-07-29: "certain settings are so deep down below that you need to
   scroll down, change the setting, and scroll back up — so we have a failure here."
   Two fixes, and they are independent so either alone would help:
     1. the picture STICKS to the top of the window for as long as its reel is on screen, so
        no control can ever be changed with the thing it changes out of sight;
     2. the sixteen-slider lab is split into named groups and only one is on screen at once.
   `display:contents` on the figure is what lets the canvas stick across the whole reel
   rather than only across the figure — the sticky range is the parent's box.
   ─────────────────────────────────────────────────────────────────────────────────────── */
.tabs{ display:flex; gap:0; margin:0 0 1.1rem; border-bottom:1px solid var(--line);
  overflow-x:auto; scrollbar-width:none; }
.tabs::-webkit-scrollbar{ display:none; }
.tab{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink3); background:transparent; border:0; border-bottom:2px solid transparent;
  padding:.7rem .55rem; min-height:2.6rem; cursor:pointer; white-space:nowrap; flex:1 0 auto;
}
.tab[aria-selected=true]{ color:var(--ink); border-bottom-color:var(--accent); }
.tab:hover{ color:var(--ink2); }
.cgroup.off{ display:none; }

@media (max-width:45.99rem){
  .frame{ display:contents; }
  .screen{ position:sticky; top:0; z-index:6; }
  /* never more than about half the window, whatever the aspect ratio. `vh` is measured
     against the LARGEST possible viewport (toolbar collapsed) and does not shrink back when
     a mobile browser's address bar re-expands — which is exactly what happens when a reader
     stops scrolling at the end of a section. The sticky picture would then be sized for more
     room than is actually on screen, so its release visibly overlaps whatever comes next —
     worst, and most visible, at the last reel, where what comes next is the closing text
     rather than another reel's own sticky picture. `dvh` tracks the real, current viewport;
     kept as a second declaration so a browser without it just keeps the `vh` line above. */
  .screen{ max-width:calc(46vh * var(--ar,1.85)); margin-inline:auto; }
  .screen{ max-width:calc(46dvh * var(--ar,1.85)); margin-inline:auto; }
  .reel > figcaption.rebate, .reel > .rebate{ max-width:var(--measure); margin-inline:auto; }
  .strip{ margin-top:1.1rem; }
}
@media (min-width:46rem){
  .tabs{ display:none; }
  .cgroup.off{ display:block; }
}

/* ═══ THE ICE PANEL ═══════════════════════════════════════════════════════════════════════
   Four questions Sam asked out loud with the cold slider at the bottom, answered where he
   asked them rather than in a footnote. ──────────────────────────────────────────────── */
.qa{ border-top:1px solid var(--line); margin-top:1.6rem; }
.qa > summary{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink3); cursor:pointer; padding:.9rem 0; list-style:none; min-height:2.5rem;
}
.qa > summary::-webkit-details-marker{ display:none; }
.qa > summary::before{ content:'+ '; color:var(--accent); }
.qa[open] > summary::before{ content:'− '; }
.qa > summary:hover{ color:var(--ink2); }
.qbody{ font-size:.94rem; color:var(--ink2); padding-bottom:1rem; }
.q{ font-family:var(--display); text-transform:uppercase; letter-spacing:.13em;
  font-size:.78rem; color:var(--accent); margin:1.7rem 0 .7rem; font-weight:500; }
.q:first-child{ margin-top:0; }
.a{ margin:0 0 .95rem; }
.a b{ color:var(--ink); font-weight:600; }
.a-hard{ font-family:var(--mono); font-size:.76rem; line-height:1.8; color:var(--ink);
  border-left:2px solid var(--accent); padding:.6rem .9rem; background:rgba(224,112,56,.07);
  margin:0 0 1rem; }

/* the wall — shown only when the reader drags below zero kelvin */
.wall{ border:1px solid var(--accent); background:rgba(224,112,56,.08); padding:1rem 1.1rem;
  margin:1.1rem 0; }
.wall[hidden]{ display:none; }
.wall h4{ font-family:var(--display); text-transform:uppercase; letter-spacing:.16em;
  font-size:.82rem; color:var(--accent); margin:0 0 .8rem; font-weight:500; }
.wall p{ font-size:.9rem; color:var(--ink2); margin:0 0 .85rem; }
.wall p:last-child{ margin-bottom:0; }
.wall .lede{ font-family:var(--mono); font-size:.78rem; line-height:1.8; color:var(--ink); }

.act{ font-family:var(--mono); font-size:.72rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink); background:transparent; border:1px solid var(--accent-d);
  padding:.65rem .95rem; cursor:pointer; min-height:2.6rem; }
.act:hover{ background:rgba(224,112,56,.12); }

/* the answers to the questions Sam asked about the flame itself */
.answer{ border-left:1px solid var(--accent-d); padding:0 0 .2rem 1rem; margin:1.6rem 0 0; }
.answer h4{ font-family:var(--display); text-transform:uppercase; letter-spacing:.15em;
  font-size:.76rem; color:var(--accent); margin:0 0 .7rem; font-weight:500; }
.answer p{ font-family:var(--mono); font-size:.72rem; line-height:1.8; color:var(--ink3);
  margin:0 0 .8rem; }
.answer p b{ color:var(--ink2); font-weight:400; }
.answer p.verdict{ color:var(--ink); }

/* one still, meaningful frame when motion is unwelcome */
@media (prefers-reduced-motion:reduce){
  .prompt{ transition:none; }
}
::selection{ background:rgba(224,112,56,.3); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

/* ── the opening: Sam's words, first thing anyone sees ───────────────────────── */
.opening{ min-height:auto; padding-block:clamp(4rem,14vh,9rem) }
.opening .letter{ max-width:34ch; margin:0 auto 1.1em; font-size:clamp(1.06rem,2.4vw,1.3rem); line-height:1.62 }
.opening .sign{ max-width:34ch; margin:1.6em auto 0; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; opacity:.5 }