/* ── Page palette ─────────────────────────── */
:root{
  /* the header floats over the slides rather than sitting above them,
     so a step gets the whole viewport */
  --header-h:0rem;
}

/* ── Site chrome ──────────────────────────
   The ramp runs from daylight to night, and the header lives outside
   the scroller, so it cannot match every stage. Rather than theme it
   twice, it steps aside once you are past the cover — no light bar
   hanging over the night sky, and no seam to explain. */
.site-header{
  left:0;
  position:fixed;
  right:0;
  top:0;
  transition:opacity .4s ease,transform .4s ease;
}
body[data-chrome="hidden"] .site-header{
  opacity:0;
  pointer-events:none;
  transform:translateY(-100%);
}
.slide--cover{padding-top:6.5rem}

/* ── Step dots (floating) ─────────────────── */
.step-dots-wrap{
  pointer-events:none;
  position:fixed;
  right:1.5rem;
  top:50%;
  transform:translateY(-50%);
  z-index:50;
}
.step-dots{
  background:rgba(255,255,255,.82);
  border:1px solid rgba(27,29,33,.1);
  border-radius:999px;
  box-shadow:0 2px 12px rgba(22,28,38,.1);
  display:flex;
  flex-direction:column;
  gap:.4rem;
  padding:.6rem .4rem;
  pointer-events:auto;
}
.step-dot{
  background:rgba(27,29,33,.18);
  border-radius:2px;
  cursor:pointer;
  height:.9rem;
  transition:background .22s ease,height .22s ease;
  width:.38rem;
}
.step-dot.is-active{background:#6b50a2;height:1.6rem}

body[data-tone="dark"] .step-dots{
  background:rgba(16,20,38,.8);
  border-color:rgba(199,209,255,.16);
  box-shadow:0 2px 12px rgba(0,0,0,.35);
}
body[data-tone="dark"] .step-dot{background:rgba(199,209,255,.26)}
body[data-tone="dark"] .step-dot.is-active{background:#b7a4f2}

/* ── Scroll-snap container ─────────────── */
.snap-wrap{
  height:calc(100vh - var(--header-h));
  overflow-y:scroll;
  scroll-behavior:smooth;
  scroll-snap-type:y mandatory;
}

/* ── Each slide ────────────────────────── */
.slide{
  align-items:center;
  display:grid;
  gap:clamp(1.5rem,3vw,3rem);
  grid-template-columns:1fr 1.3fr;
  height:calc(100vh - var(--header-h));
  padding:clamp(1.25rem,3vw,2.5rem) clamp(1.25rem,4vw,3.5rem);
  scroll-snap-align:start;
}

/* ── Tone ramp ─────────────────────────────
   The page walks from things you can measure out to spacetime itself,
   so the ground walks from daylight to night — one step per idea. The
   lights go out at 05, where gravity stops being a pull. Every color
   below is a variable, so a slide only has to name its stage and every
   component follows.

   Color carries one meaning each, never decoration:
     gold   = light, the thing that travels
     violet = time and spacetime
     teal   = mass, and what it does
     pale   = you, the observer
   Anything outside that set stays neutral, so a color on screen
   always answers "which of the four am I looking at?"              */
.slide{
  --t-text:#29231e;
  --t-dim:#4e4941;
  --t-line:rgba(41,35,30,.15);
  --t-rule:rgba(41,35,30,.45);
  --t-card:#fff;
  --t-trough:#efe9e0;
  --t-field:#fffdf8;
  --t-ground:#ffffff;
  --t-light:#935d12;
  --t-light-soft:rgba(147,93,18,.12);
  --t-time:#55407f;
  --t-time-soft:rgba(85,64,127,.09);
  --t-mass:#2c7566;
  --t-mass-soft:rgba(44,117,102,.1);
  --t-warn:#ad4b57;
  --t-warn-soft:rgba(173,75,87,.09);
  --t-observer:#5c6478;
  background:var(--t-ground);
  color:var(--t-text);
}

/* dusk, not a plateau: the ground loses light and warmth together, so
   by 05 the page is visibly overcast and the cut to night is earned */
.slide[data-index="1"]{--t-ground:#faf7f1}
.slide[data-index="2"]{--t-ground:#f2eee4;--t-field:#fdfcf7}
.slide[data-index="3"]{--t-ground:#e7e3d7;--t-field:#fcfbf6}
.slide[data-index="4"]{--t-ground:#d8d7cd;--t-field:#fbfbf7}
.slide[data-index="5"]{--t-ground:#c4c7c3;--t-field:#f9fbf9}

/* nightfall — 05 is where gravity stops being a pull */
.slide[data-index="6"],
.slide[data-index="7"],
.slide[data-index="8"],
.slide[data-index="9"],
.slide[data-index="10"]{
  --t-text:#eceffb;
  --t-dim:#a3accb;
  --t-line:rgba(199,209,255,.15);
  --t-rule:rgba(199,209,255,.34);
  --t-card:rgba(255,255,255,.05);
  --t-trough:rgba(255,255,255,.08);
  --t-light:#f0bd63;
  --t-light-soft:rgba(240,189,99,.15);
  --t-time:#b7a4f2;
  --t-time-soft:rgba(183,164,242,.14);
  --t-mass:#5ec8c0;
  --t-mass-soft:rgba(94,200,192,.13);
  --t-warn:#ec9ba4;
  --t-warn-soft:rgba(236,155,164,.13);
  --t-observer:#cfd8f5;
}
/* the field always sits a shade above its ground, so the figure reads
   as raised on both halves of the ramp */
.slide[data-index="6"]{--t-ground:#2e3448;--t-field:#383f56}
.slide[data-index="7"]{--t-ground:#262c40;--t-field:#2e3448}
.slide[data-index="8"]{--t-ground:#1d2234;--t-field:#262c40}
.slide[data-index="9"]{--t-ground:#141928;--t-field:#1d2234}
.slide[data-index="10"]{--t-ground:#0a0c16;--t-field:#12162a}

/* ── Left: heading ─────────────────────── */
.slide-copy{display:flex;flex-direction:column;justify-content:center}

/* one small marker instead of a 6rem numeral above an eyebrow: the
   step number and what the step is about, on a single line */
.slide-step{
  align-items:baseline;
  color:var(--t-dim);
  display:flex;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.1em;
  margin:0 0 .85rem;
  text-transform:uppercase;
}
.slide-step b{color:var(--t-time);font-variant-numeric:tabular-nums}
.slide-step span{
  border-left:1px solid var(--t-line);
  margin-left:.7rem;
  padding-left:.7rem;
}

.slide-copy h2{
  color:var(--t-text);
  font-family:var(--font-display);
  font-size:clamp(2.2rem,4vw,3.6rem);
  letter-spacing:-.03em;
  line-height:1.08;
  margin-bottom:.6rem;
}

.slide-hint{
  color:var(--t-dim);
  font-size:.95rem;
  line-height:1.6;
  max-width:26rem;
}

.slide-point{
  border-top:1px solid var(--t-line);
  color:var(--t-text);
  font-size:1.02rem;
  line-height:1.55;
  margin:1.15rem 0 0;
  max-width:26rem;
  /* space reserved up front so revealing it cannot shift the headline */
  min-height:4.8em;
  padding-top:1.05rem;
  transition:opacity .45s ease .1s;
}
.slide-point strong{color:var(--t-time);font-weight:700}
.slide-point.is-hidden{opacity:0}

/* secondary control — sits with the readout it replays, not under it */
.ghost-btn{
  background:transparent;
  border:1px solid var(--t-line);
  color:var(--t-dim);
  cursor:pointer;
  font:inherit;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.06em;
  margin-left:auto;
  padding:.25rem .6rem;
  text-transform:uppercase;
  transition:border-color .15s,color .15s;
}
.ghost-btn:hover{border-color:var(--t-light);color:var(--t-light)}
/* the armed second beat, so the eye knows there is more to come */
.ghost-btn.is-cue{border-color:var(--t-mass);color:var(--t-mass)}
.ghost-btn:disabled{cursor:default;opacity:.4}

.slide-link{
  color:var(--t-time);
  display:inline-block;
  font-size:.88rem;
  font-weight:700;
  margin-top:1.25rem;
  text-decoration:none;
  text-underline-offset:.2em;
}
.slide-link:hover{text-decoration:underline}

/* Cover slide */
.slide--cover .slide-copy h2{
  font-size:clamp(2.8rem,5.5vw,5rem);
  max-width:13ch;
}
.slide--cover .slide-hint{font-size:1.05rem}

/* ── Right: the plate ───────────────────────
   Not a window. The figure is presented as a measurement on its own
   ground, captioned underneath the way a plate is. Nothing here has a
   fixed height, so no step can ever scroll inside itself.          */
.plate{display:flex;flex-direction:column;margin:0;min-width:0}

.plate-field{
  background:var(--t-field);
  border-top:2px solid var(--t-rule);
  padding:1.1rem 1.15rem 1.2rem;
}

/* ── Shared plate bits ──────────────────── */
.plabel b{color:var(--t-time)}
.plabel{
  color:var(--t-dim);
  font-size:.74rem;
  font-weight:800;
  letter-spacing:.08em;
  margin:0 0 .7rem;
  text-transform:uppercase;
}

.plate p:not([class]){color:inherit}

.inline-btn{
  background:transparent;
  border:1px solid var(--t-rule);
  color:var(--t-text);
  cursor:pointer;
  font:inherit;
  font-weight:800;
  min-height:2.2rem;
  padding:.45rem .85rem;
}
.inline-btn:hover{background:var(--t-light-soft)}
.inline-btn:disabled{cursor:default;opacity:.45}
/* the button that starts the light moving takes the light color */
.inline-btn--go{border-color:var(--t-light);color:var(--t-light)}
.inline-btn--go:hover{background:var(--t-light-soft)}

.btn-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}

.feedback{
  background:var(--t-time-soft);
  border:1px solid var(--t-line);
  color:var(--t-text);
  font-size:.93rem;
  line-height:1.55;
  margin-top:.75rem;
  padding:.75rem;
}
.feedback.is-warn{background:var(--t-warn-soft)}
.feedback.is-good{background:var(--t-mass-soft)}
.feedback p{color:inherit;margin:0}
.feedback p + p{margin-top:.45rem}
.feedback strong{color:var(--t-text)}
.feedback.is-hidden{display:none}

.stat-strip{
  border-top:1px solid var(--t-line);
  display:grid;
  gap:.5rem;
  grid-template-columns:repeat(3,1fr);
  margin-top:.85rem;
  padding-top:.8rem;
}
.stat-cell{background:var(--t-card);border:1px solid var(--t-line);padding:.6rem .7rem}
.stat-cell b{
  color:var(--t-text);
  display:block;
  font-family:var(--font-display);
  font-size:1.15rem;
  font-variant-numeric:tabular-nums;
  line-height:1.1;
}
.stat-cell small{color:var(--t-dim);display:block;font-size:.76rem;margin-top:.25rem}

/* ── 00 The route ────────────────────────── */
/* vertical, because that is the direction the reader actually travels */
.route{
  border-left:1px solid var(--t-line);
  display:grid;
  gap:2rem;
  list-style:none;
  margin:0;
  padding:.5rem 0 .5rem 1.7rem;
}
.route-step{position:relative}
.route-step::before{
  background:var(--t-field);
  border:2px solid var(--t-time);
  border-radius:50%;
  content:"";
  height:.75rem;
  left:-1.98rem;
  position:absolute;
  top:.5rem;
  width:.75rem;
}
.route-step b{
  color:var(--t-text);
  display:block;
  font-family:var(--font-display);
  font-size:1.5rem;
  line-height:1.2;
}

/* ── 01 Race ─────────────────────────────── */
.race{display:grid;gap:.6rem}
.race-lane{background:var(--t-card);border:1px solid var(--t-line);padding:.7rem .85rem}
.race-lane__head{
  align-items:baseline;
  display:flex;
  justify-content:space-between;
  margin-bottom:.6rem;
}
.race-lane__head b{font-size:.95rem}
.race-lane__head span{
  color:var(--t-dim);
  font-size:.85rem;
  font-variant-numeric:tabular-nums;
}
.race-track{
  background:var(--t-trough);
  height:1.6rem;
  overflow:hidden;
  position:relative;
}
.race-track::after{
  background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),var(--t-line) calc(10% - 1px) 10%);
  content:"";
  inset:0;
  position:absolute;
}
.race-fill{
  height:100%;
  transform:scaleX(0);
  transform-origin:left;
  width:100%;
}
/* light against the fastest thing we ever built: gold against matter */
.race-fill--light{background:var(--t-light)}
.race-fill--voy{background:var(--t-mass)}
.race-marker{
  border-radius:50%;
  height:.7rem;
  left:0;
  position:absolute;
  top:50%;
  transform:translate(-50%,-50%);
  width:.7rem;
  z-index:2;
}
.race-marker--light{background:var(--t-field);box-shadow:0 0 0 3px var(--t-light)}
.race-marker--voy{background:var(--t-field);box-shadow:0 0 0 3px var(--t-mass)}
.race-finish{
  color:var(--t-dim);
  font-size:.74rem;
  font-weight:800;
  letter-spacing:.05em;
  margin-top:.35rem;
  text-align:right;
  text-transform:uppercase;
}

/* ── 02 Signal ───────────────────────────── */
.dest-row{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.9rem}
.dest-btn{
  background:transparent;
  border:1px solid var(--t-line);
  color:var(--t-dim);
  cursor:pointer;
  font:inherit;
  font-size:.85rem;
  padding:.42rem .7rem;
  transition:background .15s,border-color .15s,color .15s;
}
.dest-btn:hover{background:var(--t-light-soft);color:var(--t-text)}
.dest-btn.is-on{border-color:var(--t-light);color:var(--t-light)}

.signal-stage{padding:.35rem 0 0}
.signal-line{
  background:var(--t-line);
  height:1px;
  /* inset so the endpoint labels have room and are not clipped */
  margin:2.4rem 3.6rem 1rem;
  position:relative;
}
/* the light itself — the only thing on the figure that moves */
.signal-pulse{
  background:var(--t-light);
  border-radius:50%;
  box-shadow:0 0 0 4px var(--t-light-soft),0 0 20px var(--t-light-soft);
  height:.6rem;
  left:0;
  opacity:0;
  position:absolute;
  top:50%;
  transform:translate(-50%,-50%);
  width:.6rem;
}
.signal-node{
  position:absolute;
  text-align:center;
  top:50%;
  transform:translate(-50%,-50%);
  width:7rem;
}
.signal-node--a{left:0}
.signal-node--b{left:100%}
.signal-node i{
  background:var(--t-observer);
  border-radius:50%;
  box-shadow:0 0 0 4px var(--t-line);
  display:block;
  height:.7rem;
  margin:0 auto;
  width:.7rem;
}
/* the far end is a source of light, so it reads gold */
.signal-node--b i{
  background:var(--t-light);
  box-shadow:0 0 0 4px var(--t-light-soft),0 0 14px var(--t-light-soft);
}
.signal-node span{
  color:var(--t-dim);
  display:block;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.02em;
  line-height:1.25;
  margin-top:.45rem;
}
.signal-readout{
  align-items:baseline;
  display:flex;
  gap:.6rem;
  margin-top:1.1rem;
}
/* the readout is an elapsed time, so it takes the time color */
.signal-readout b{
  color:var(--t-time);
  font-family:var(--font-display);
  font-size:clamp(1.6rem,3vw,2.3rem);
  font-variant-numeric:tabular-nums;
  line-height:1;
}
.signal-readout small{color:var(--t-dim);font-size:.85rem}
.signal-status{
  color:var(--t-dim);
  font-size:.85rem;
  line-height:1.5;
  margin-top:.6rem;
  /* reserved for the longest arrival line, so nothing shifts when it lands */
  min-height:2.9em;
  transition:color .3s ease;
}
.signal-status.is-note{color:var(--t-text)}

/* ── 03 Routes ───────────────────────────── */
.route-svg{
  background:var(--t-card);
  border:1px solid var(--t-line);
  display:block;
  /* figures shrink on short screens so a step never spills */
  max-height:min(11.5rem,24vh);
  width:100%;
}
.route-path{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:3}
.route-path--home{stroke:var(--t-observer)}
.route-path--trip{stroke:var(--t-mass);stroke-dasharray:4 5}
.route-dot{r:7}
.route-dot--home{fill:var(--t-observer)}
.route-dot--trip{fill:var(--t-mass)}
.route-cap{fill:var(--t-dim);font-family:var(--font-body);font-size:12px}

.tally{display:grid;gap:.5rem;grid-template-columns:1fr 1fr;margin-top:.75rem}
.tally-card{background:var(--t-card);border:1px solid var(--t-line);padding:.7rem .8rem}
.tally-card small{
  color:var(--t-dim);
  display:block;
  font-size:.74rem;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.tally-card b{
  display:block;
  font-family:var(--font-display);
  font-size:1.9rem;
  font-variant-numeric:tabular-nums;
  line-height:1.15;
  margin-top:.25rem;
}
.tally-card--home b{color:var(--t-observer)}
.tally-card--trip b{color:var(--t-mass)}
.tally-card em{
  color:var(--t-dim);
  display:block;
  font-size:.78rem;
  font-style:normal;
  margin-top:.1rem;
}

/* ── 04 GPS ──────────────────────────────── */
.toggle-row.is-cue{border-color:var(--t-mass)}
.toggle-row{
  align-items:center;
  background:var(--t-card);
  border:1px solid var(--t-line);
  display:flex;
  gap:.8rem;
  justify-content:space-between;
  margin:0 0 .85rem;
  padding:.7rem .85rem;
}
.toggle-row span{font-size:.9rem;font-weight:600}
.switch{
  background:var(--t-mass);
  border:none;
  border-radius:999px;
  cursor:pointer;
  flex-shrink:0;
  height:1.6rem;
  padding:0;
  position:relative;
  transition:background .2s ease;
  width:3rem;
}
.switch::after{
  background:var(--t-field);
  border-radius:50%;
  content:"";
  height:1.2rem;
  left:.2rem;
  position:absolute;
  top:.2rem;
  transition:transform .2s ease;
  width:1.2rem;
}
.switch[aria-checked="false"]{background:var(--t-trough)}
.switch[aria-checked="false"]::after{transform:translateX(1.4rem)}

.gps-stage{
  background:var(--t-card);
  border:1px solid var(--t-line);
  height:min(12rem,25vh);
  overflow:hidden;
  position:relative;
}
.gps-grid{
  background-image:linear-gradient(var(--t-line) 1px,transparent 1px),linear-gradient(90deg,var(--t-line) 1px,transparent 1px);
  background-size:2rem 2rem;
  inset:0;
  position:absolute;
}
.gps-truth,.gps-guess{
  border-radius:50%;
  left:50%;
  position:absolute;
  top:50%;
  transform:translate(-50%,-50%);
}
.gps-truth{
  background:var(--t-mass);
  box-shadow:0 0 0 5px var(--t-mass-soft);
  height:.85rem;
  width:.85rem;
}
/* the estimate is a ring, not a disc: corrected, it sits exactly on the
   true position, and a filled dot would paint the green one out */
.gps-guess{
  background:transparent;
  border:2px solid var(--t-warn);
  box-shadow:0 0 0 4px var(--t-warn-soft);
  height:1.55rem;
  transition:transform .35s ease;
  width:1.55rem;
}
.gps-readout{bottom:.45rem;position:absolute;right:.7rem;text-align:right}
.gps-readout b{
  color:var(--t-warn);
  display:block;
  font-family:var(--font-display);
  font-size:1.5rem;
  font-variant-numeric:tabular-nums;
  font-weight:700;
  line-height:1.1;
}
.gps-readout small{color:var(--t-dim);font-size:.74rem}

/* two effects pulling opposite ways, and the number that survives */
.drift-sum{align-items:center;display:flex;gap:.6rem;margin-top:.5rem}
.drift-term{
  background:var(--t-card);
  border:1px solid var(--t-line);
  flex:1;
  padding:.6rem .7rem;
}
.drift-term b{
  display:block;
  font-family:var(--font-display);
  font-size:1.25rem;
  font-variant-numeric:tabular-nums;
  line-height:1.1;
}
.drift-term small{color:var(--t-dim);display:block;font-size:.74rem;line-height:1.35;margin-top:.25rem}
.drift-term--total{border-color:var(--t-warn)}
.drift-term--total b{color:var(--t-warn)}
.drift-op{color:var(--t-dim);font-family:var(--font-display);font-size:1.15rem}

/* ── 04 The inversion ────────────────────── */
.path-svg{
  background:var(--t-card);
  border:1px solid var(--t-line);
  display:block;
  max-height:min(9.5rem,19vh);
  width:100%;
}
.pathline{
  fill:none;
  stroke:var(--t-dim);
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-width:2.5;
  transition:stroke .35s ease,stroke-width .35s ease;
}
/* the winner is the flat one — that is the whole point of the step */
.pathline.is-most{stroke:var(--t-time);stroke-width:5}
.pathdot{fill:var(--t-observer)}

.result-block.is-hidden{display:none}
.ptally-head{align-items:baseline;display:flex;gap:.75rem;margin-top:.85rem}
.ptally-head .plabel{margin:0}
.paths-tally{display:grid;gap:.5rem;grid-template-columns:repeat(3,1fr);margin-top:.5rem}
.ptally{
  background:var(--t-card);
  border:1px solid var(--t-line);
  padding:.6rem .7rem;
  transition:border-color .35s ease;
}
.ptally.is-most{border-color:var(--t-time)}
.ptally small{
  color:var(--t-dim);
  display:block;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.ptally b{
  display:block;
  font-family:var(--font-display);
  font-size:1.55rem;
  font-variant-numeric:tabular-nums;
  line-height:1.15;
  margin-top:.2rem;
}
.ptally.is-most b{color:var(--t-time)}
.ptally em{color:var(--t-dim);display:block;font-size:.76rem;font-style:normal}

/* ── 05 Walkers ──────────────────────────── */
.globe-svg{background:var(--t-card);border:1px solid var(--t-line);display:block;max-height:min(13rem,27vh);width:100%}
.globe-outline{fill:var(--t-trough);stroke:var(--t-line);stroke-width:2}
.globe-lat{fill:none;stroke:var(--t-line);stroke-width:1.5}
.globe-eq{opacity:.6;stroke:var(--t-dim);stroke-width:1.5}
/* the two little arrows are the whole argument: same direction at the start */
.walk-north{fill:none;stroke:var(--t-dim);stroke-linecap:round;stroke-width:1.6}
/* and this is what closes without either of them turning */
.walk-gap{stroke:var(--t-dim);stroke-dasharray:3 4;stroke-width:1.5}
.walk-path{fill:none;stroke-linecap:round;stroke-width:3}
.walk-path--a{stroke:var(--t-observer)}
.walk-path--b{stroke:var(--t-mass)}
.walk-dot--a{fill:var(--t-observer)}
.walk-dot--b{fill:var(--t-mass)}

.ask{
  background:var(--t-card);
  border:1px solid var(--t-line);
  margin-top:.75rem;
  padding:.8rem;
}
.ask p{font-size:.92rem;font-weight:600;margin:0 0 .6rem}
.ask.is-answered{padding:.65rem}
/* the question stays legible after answering — the marked buttons mean
   nothing without it — but steps back so the reveal leads */
.ask.is-answered p{font-size:.82rem;font-weight:400;margin-bottom:.45rem;opacity:.75}
.ask-opts{display:flex;gap:.5rem}
.ask-btn{
  background:transparent;
  border:1px solid var(--t-line);
  color:var(--t-text);
  cursor:pointer;
  flex:1;
  font:inherit;
  font-size:.9rem;
  padding:.5rem;
  transition:background .15s,border-color .15s,color .15s;
}
.ask-btn:hover{background:var(--t-light-soft)}
.ask-btn.is-right{background:var(--t-mass-soft);border-color:var(--t-mass);color:var(--t-text);font-weight:700}
.ask-btn.is-wrong{background:var(--t-warn-soft);border-color:var(--t-warn);color:var(--t-text)}

/* ── 06 Falling time ─────────────────────── */
.height-stage{
  background:var(--t-card);
  border:1px solid var(--t-line);
  display:grid;
  gap:0;
  grid-template-columns:1fr 1fr;
}
.height-cell{padding:.85rem}
.height-cell + .height-cell{border-left:1px solid var(--t-line)}
.height-cell small{
  color:var(--t-dim);
  display:block;
  font-size:.74rem;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.tick-count{
  font-family:var(--font-display);
  font-size:clamp(1.5rem,3vw,2.1rem);
  font-variant-numeric:tabular-nums;
  font-weight:700;
  line-height:1.2;
  margin-top:.3rem;
}
.height-cell--high .tick-count{color:var(--t-time)}
.height-cell--low .tick-count{color:var(--t-mass)}
.height-cell em{
  color:var(--t-dim);
  display:block;
  font-size:.78rem;
  font-style:normal;
  margin-top:.2rem;
}
.fall-svg{
  background:var(--t-card);
  border:1px solid var(--t-line);
  display:block;
  max-height:min(11rem,22vh);
  width:100%;
}
.fall-svg.is-live{border-color:var(--t-mass)}
.fall-axis{stroke:var(--t-line);stroke-width:1.5}
/* each bar is how fast time runs at that height — the tilt is the point */
.rate-bars line{opacity:.75;stroke:var(--t-time);stroke-linecap:round;stroke-width:3}
.rate-slope{fill:none;opacity:.9;stroke:var(--t-time);stroke-dasharray:4 4;stroke-width:1.5}
/* and this is a thing that falls, purely by following the tilt */
.fall-trail{stroke:var(--t-mass);stroke-dasharray:3 3;stroke-width:2}
.fall-dot{fill:var(--t-mass)}
.fall-cap{fill:var(--t-mass);font-family:var(--font-body);font-size:11px;font-weight:700}

.gap-bar{
  align-items:center;
  background:var(--t-trough);
  border:1px solid var(--t-line);
  display:flex;
  gap:.75rem;
  border-top:none;
  font-size:.85rem;
  padding:.6rem .85rem;
}
.gap-bar b{color:var(--t-mass);font-variant-numeric:tabular-nums}

/* ── 08 Waves ────────────────────────────── */
.wave-svg{
  background:var(--t-card);
  border:1px solid var(--t-line);
  display:block;
  max-height:min(11.5rem,24vh);
  width:100%;
}
.arm{stroke:var(--t-dim);stroke-linecap:round;stroke-width:2.5}
.arm-corner{fill:var(--t-dim)}
.arm-mirror{fill:var(--t-observer);stroke:var(--t-time);stroke-width:2}
.wave-note{
  fill:var(--t-time);
  font-family:var(--font-body);
  font-size:11px;
  font-weight:700;
  transition:opacity .3s ease;
}

/* ── 08 Summary ──────────────────────────── */
.sum-flow{display:grid;gap:.6rem}
.sum-box{background:var(--t-card);border:1px solid var(--t-line);padding:.85rem}
.sum-box strong{
  display:block;
  font-family:var(--font-display);
  font-size:1.2rem;
  line-height:1.2;
  margin-bottom:.3rem;
}
.sum-box span{color:var(--t-dim);font-size:.88rem;line-height:1.5}
.sum-quote{
  border-top:1px solid var(--t-line);
  color:var(--t-text);
  font-family:var(--font-display);
  font-size:1.2rem;
  line-height:1.45;
  margin:.35rem 0 0;
  padding-top:.9rem;
}

/* ── Cover scene ─────────────────────────── */
.cover-scene{
  background:var(--t-field);
  /* the floating header takes the top of the cover, so leave it room */
  height:min(calc(100vh - var(--header-h) - 11rem),40rem);
  overflow:hidden;
}
.cover-scene img{display:block;height:100%;object-fit:cover;width:100%}

/* ── Responsive ────────────────────────── */
@media(max-width:64rem){
  .snap-wrap{height:auto;overflow:visible;scroll-snap-type:none}
  .slide{grid-template-columns:1fr;height:auto;min-height:100svh;padding-bottom:3rem;padding-top:2.5rem}
  .slide--cover{padding-top:6.5rem}
  /* one column now, so the conclusion has to land after the figure it
     concludes rather than above it — unwrap the copy and reorder */
  .slide-copy{display:contents}
  .plate{order:2}
  .slide-point{min-height:0;order:3}
  .cover-scene{aspect-ratio:16 / 9;height:auto;min-height:0}
  .step-dots-wrap{display:none}
  .stat-strip{grid-template-columns:1fr}
}

@media(max-width:42rem){
  .slide-copy h2{font-size:1.65rem}
  .tally,.height-stage{grid-template-columns:1fr}
  .height-cell + .height-cell{border-left:none;border-top:1px solid var(--t-line)}
  /* keep the label overhang just inside the shorter line */
  .signal-line{margin-left:2.8rem;margin-right:2.8rem}
  .signal-node{width:5.4rem}
  .signal-node span{font-size:.68rem}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}