/* ============================================================================
   Hibilet — "The room becomes the list"
   Tokens are the mockup's tokens, promoted verbatim after the style gate.
   Art direction lives in design/COMMIT-SHEET.md; the film in design/STORYBOARD.md.
   ========================================================================= */

/* ── Fonts, self-hosted ───────────────────────────────────────────────────
   Served from this origin, not from Google. Two reasons, and the second is
   the one that shows: it removes two third-party connections from a page
   whose whole argument is that your data stays yours, and it lets the files
   be preloaded. Loading them from fonts.gstatic.com cost a single 0.084
   layout shift at 410ms, which was the page's entire CLS.

   `font-display: optional`, after trying the other two. `swap` reflows the
   moment the real file lands. `block` reflows too — it hides the glyphs
   during the block period but still lays the text out on fallback metrics,
   which is the reflow, so CLS did not move (0.127 either way). Hand-guessed
   `size-adjust` fallbacks made it worse (0.086 → 0.126). `optional` is the
   only one that cannot reflow: the browser either has the font before first
   paint and uses it, or uses the fallback for that whole load and never
   swaps. With a same-origin preloaded woff2 the first branch is what happens
   in practice. Latin subsets. */
@font-face{
  font-family:"Archivo";
  src:url("./fonts/archivo-latin.woff2") format("woff2-variations");
  font-weight:400 800; font-stretch:62% 125%; font-style:normal; font-display:optional;
}
@font-face{
  font-family:"Newsreader";
  src:url("./fonts/newsreader-latin.woff2") format("woff2-variations");
  font-weight:300 600; font-style:normal; font-display:optional;
}
@font-face{
  font-family:"Newsreader";
  src:url("./fonts/newsreader-italic-latin.woff2") format("woff2-variations");
  font-weight:300 600; font-style:italic; font-display:optional;
}

:root{
  /* Colour. Revision 2: no black anywhere, at any lightness. Paper is a COOL
     neutral (hue 240) so the yellow stays the only warm thing on screen; the
     ink is a real brown that still clears 8:1 on the brand field. */
  --paper:      oklch(0.972 0.003 240);   /* #f4f6f8 */
  --paper-sunk: oklch(0.941 0.004 240);   /* #e9ecee */
  --ink:        oklch(0.255 0.058 78);    /* #321e00 — brown, not black */
  --ink-soft:   oklch(0.455 0.045 78);    /* 4.9:1 on paper */
  --ink-brand-soft: oklch(0.40 0.05 78);  /* 4.8:1 on brand; --ink-soft is only 3.9:1 there */
  --brand:      #FFD405;                  /* the mark, verbatim */
  --brand-sunk: oklch(0.828 0.163 95);
  --amber:      oklch(0.72 0.155 88);     /* #cd9d00 — the peak's ground, "lights down" in warmth */

  --rule:      color-mix(in oklab, var(--ink) 18%, transparent);
  --rule-mid:  color-mix(in oklab, var(--ink) 34%, transparent);
  --rule-hard: color-mix(in oklab, var(--ink) 62%, transparent);

  --pad: clamp(1.15rem, 4vw, 4rem);
  --gap: clamp(1.25rem, 2.6vw, 2.5rem);
  --maxw: 1560px;

  --ease-out-quart: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:auto }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Newsreader",Georgia,serif;
  font-size:clamp(1rem, 0.955rem + 0.22vw, 1.1875rem);
  line-height:1.55;
  font-optical-sizing:auto;
  overflow-x:hidden;
}
img,svg,canvas{ display:block; max-width:100% }
a{ color:inherit }
::selection{ background:var(--brand); color:var(--ink) }

/* Archivo, expanded, tabular. Every number on this page aligns in a column. */
.wide{
  font-family:"Archivo",system-ui,sans-serif;
  font-variation-settings:"wdth" 112;
  font-feature-settings:"tnum" 1,"lnum" 1;
}
.num{ font-feature-settings:"tnum" 1,"lnum" 1; font-variant-numeric:tabular-nums lining-nums }

.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad) }
.sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip{
  position:absolute;left:-9999px;top:0;z-index:80;
  background:var(--ink);color:var(--paper);padding:.75rem 1rem;
  font-family:"Archivo",system-ui,sans-serif;font-weight:600;
}
.skip:focus{ left:0 }

/* ── Typography scale ─────────────────────────────────────────────────── */
h1,h2,h3{
  font-family:"Archivo",system-ui,sans-serif;
  font-weight:700;
  letter-spacing:-.032em;
  margin:0;
  text-wrap:balance;
}
h1{ font-variation-settings:"wdth" 116 }
h2{
  font-variation-settings:"wdth" 113;
  font-size:clamp(1.9rem, 4.1vw, 3.4rem);
  line-height:.99;
}
h3{
  font-variation-settings:"wdth" 108;
  font-size:clamp(1.05rem, 1.6vw, 1.3rem);
  letter-spacing:-.012em;
  line-height:1.2;
}
p{ margin:0 }
.lede{
  font-size:clamp(1.0625rem, 1.25vw, 1.3125rem);
  line-height:1.5;
  color:var(--ink-soft);
  max-width:56ch;
  text-wrap:pretty;
}
.lede em{ font-style:italic; color:var(--ink) }

/* Small service text lives in the DISPLAY family at small size, never in a
   mono face — the mono corner-label is a house tell this project skips. */
.tag{
  font-family:"Archivo",system-ui,sans-serif;
  font-variation-settings:"wdth" 94;
  font-size:.625rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--ink-soft);
  line-height:1;
}

/* ── The perforation tear: this page's grid break, part one ───────────── */
.tear{
  position:relative;height:0;
  border-top:1.5px dashed var(--rule-hard);
  --notch:var(--paper);
}
.tear::before,.tear::after{
  content:"";position:absolute;top:-13px;
  width:26px;height:26px;border-radius:50%;
  background:var(--notch);
  border:1.5px dashed var(--rule-hard);
  clip-path:inset(0 0 48% 0);
}
.tear::before{ left:-13px }
.tear::after{ right:-13px }
@media (max-width:640px){
  .tear::before,.tear::after{ width:16px;height:16px;top:-8px;left:-8px }
  .tear::after{ left:auto;right:-8px }
}

/* ── Top rail: a ticket header. Not logo/status/action, and no longer a dark
      band: the page opens on the brand field and the ink sits on top of it. ─ */
.rail{ background:var(--brand); color:var(--ink) }
.rail__in{
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);
  display:flex;align-items:stretch;min-height:58px;
}
.rail__cell{
  display:flex;flex-direction:column;justify-content:center;
  padding:.5rem clamp(.7rem,1.5vw,1.5rem);
  border-right:1px solid color-mix(in oklab, var(--ink) 24%, transparent);
}
.rail__cell:first-child{ padding-left:0 }
.rail__cell--end{ border-right:0;margin-left:auto;padding-right:0;text-align:right }
.rail__k{
  font-family:"Archivo",system-ui,sans-serif;font-variation-settings:"wdth" 94;
  font-size:.5625rem;letter-spacing:.15em;text-transform:uppercase;line-height:1;
  color:var(--ink-brand-soft);
}
.rail__v{
  font-family:"Archivo",system-ui,sans-serif;font-variation-settings:"wdth" 106;
  font-weight:600;font-size:.8125rem;line-height:1.25;margin-top:.3rem;
  font-feature-settings:"tnum" 1;
}
.rail__v a{ text-decoration:none }
.rail__v a:hover{ color:var(--ink-brand-soft) }
/* the logotype ships white-filled, so on the yellow rail it is inverted to ink */
.rail__logo{ height:18px;width:auto;margin-top:.25rem;filter:brightness(0) saturate(100%) invert(11%) sepia(38%) saturate(1400%) hue-rotate(8deg) }
@media (max-width:860px){
  .rail__cell--hide{ display:none }
}

/* ── Scene 1 — the crowd walks in and sits down ───────────────────────────
   Centred type over a full-bleed canvas. The crowd is weather: small marks at
   low alpha, sitting behind everything, never competing with the headline. */
.hero{
  position:relative;
  min-height:min(92vh, 940px);
  display:grid;place-items:center;
  padding:clamp(3rem,7vw,6rem) var(--pad) clamp(2.5rem,5vw,4rem);
  overflow:hidden;
}
.hero__crowd{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;
  /* The crowd clears out from behind the reading matter. Big display type wins
     against a field of dots; a 1.3rem serif does not, and the lede was the
     first thing to become hard work. A mask, not a colour wash, so the paper
     underneath stays exactly one value. */
  -webkit-mask-image:radial-gradient(ellipse 48% 42% at 50% 60%, transparent 26%, #000 100%);
  mask-image:radial-gradient(ellipse 48% 42% at 50% 60%, transparent 26%, #000 100%);
}
/* On a phone the hero is nearly all type, and the centre-clearing mask left
   the crowd as a few stray marks behind the lede, which reads as an artefact.
   It becomes a band at the foot of the scene instead: still the motif, out of
   the way of every line of text. */
@media (max-width:760px){
  .hero{ padding-bottom:0 }
  .hero__inner{ padding-bottom:8.5rem }
  .hero__crowd{
    top:auto;bottom:0;height:9rem;
    -webkit-mask-image:linear-gradient(transparent 0%, #000 62%);
    mask-image:linear-gradient(transparent 0%, #000 62%);
  }
}
.hero__inner{
  position:relative;z-index:1;
  max-width:56rem;margin-inline:auto;text-align:center;
}
.flag{
  display:inline-block;background:var(--brand);color:var(--ink);
  font-family:"Archivo",system-ui,sans-serif;font-variation-settings:"wdth" 102;
  font-weight:700;font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.35rem .6rem;margin-bottom:1.5rem;
}
.h1-a{
  display:block;
  font-size:clamp(2.35rem, 5.9vw, 4.6rem);
  line-height:.94;
}
.h1-b{
  display:block;
  font-size:clamp(1.7rem, 3.9vw, 3rem);
  line-height:1.02;letter-spacing:-.028em;
  margin-top:.45rem;
  color:var(--ink-soft);
}
.hero__sub{ margin:1.75rem auto 0; max-width:52ch }

.compose{ margin-top:2rem; max-width:33rem }
.hero__inner .compose,
.door .compose{ margin-inline:auto }
.compose__field{
  display:flex;align-items:stretch;
  border:1.5px solid var(--ink);background:var(--paper);
}
.compose__field:focus-within{ box-shadow:0 0 0 3px var(--brand) }
.compose__field input{
  flex:1;min-width:0;border:0;outline:0;background:transparent;
  font:inherit;color:var(--ink);padding:.9rem 1rem;
}
.compose__field input::placeholder{ color:var(--ink-soft);opacity:1 }
.compose__go{
  border:0;background:var(--brand);color:var(--ink);cursor:pointer;
  font-family:"Archivo",system-ui,sans-serif;font-variation-settings:"wdth" 106;
  font-weight:700;font-size:.875rem;padding:0 1.4rem;white-space:nowrap;
  transition:background-color 140ms var(--ease-out-quart);
}
.compose__go:hover{ background:var(--brand-sunk) }
.compose__go:active{ transform:scale(.985) }
.compose__note{ margin-top:.8rem;font-size:.875rem;color:var(--ink-soft);max-width:48ch }
.hero__inner .compose__note,
.door .compose__note{ margin-inline:auto }
.compose__note[data-answered]{ color:var(--ink) }



/* The whole setup, as three lines. Not a numbered-section scaffold: these are
   an actual sequence, which is the one case where numbering earns its place. */
.steps{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1.5px solid var(--ink);
}
.steps li{
  /* Left padding on every step but the first: without it, two and three sat
     hard against the rule that divides them. */
  padding:1.15rem clamp(1.25rem,2.4vw,2.5rem) 1.35rem clamp(1.25rem,2.4vw,2.5rem);
  font-size:.9375rem;line-height:1.45;color:var(--ink-soft);
  border-right:1px solid var(--rule);
}
.steps li:first-child{ padding-left:0 }
.steps li:last-child{ border-right:0;padding-right:0 }
.steps b{
  display:block;color:var(--ink);margin-bottom:.3rem;
  font-family:"Archivo",system-ui,sans-serif;font-variation-settings:"wdth" 106;
  font-weight:700;font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;
}
@media (max-width:760px){
  .steps{ grid-template-columns:1fr }
  .steps li{ border-right:0;border-bottom:1px solid var(--rule);padding-inline:0 }
  .steps li:last-child{ border-bottom:0 }
}

@media (max-width:960px){
  .hero{ grid-template-columns:1fr;padding-right:var(--pad);min-height:0 }
  .hero__copy,.hero__plan{ grid-column:1 / -1 }
  .hero__plan{ margin-right:0;margin-top:2.5rem }
  .plan__stage{ border-right:1.5px solid var(--ink);min-height:0;aspect-ratio:4/3 }
}

/* ── Scene 2 — the manifest ───────────────────────────────────────────── */
.sec{ padding-block:clamp(3.5rem,7vw,6.5rem) }
.sec--tight{ padding-block:clamp(2.75rem,4.5vw,4rem) }
.sec--sunk{ background:var(--paper-sunk) }

.manifest__head{
  display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);
  align-items:end;
  border-top:1.5px solid var(--ink);padding-top:1.25rem;   /* hairline-rule opening */
}
.manifest__head h2{ grid-column:1 / span 6 }
.manifest__head .lede{ grid-column:8 / -1;font-size:1rem }
@media (max-width:960px){
  .manifest__head{ grid-template-columns:1fr }
  .manifest__head h2,.manifest__head .lede{ grid-column:1 / -1 }
  .manifest__head .lede{ margin-top:1rem }
}

.tabs{ display:flex;flex-wrap:wrap;gap:0;margin-top:2.25rem;border-bottom:1.5px solid var(--ink) }
.tab{
  appearance:none;border:0;background:transparent;cursor:pointer;
  font-family:"Archivo",system-ui,sans-serif;font-variation-settings:"wdth" 106;
  font-weight:600;font-size:.8125rem;letter-spacing:.03em;text-transform:uppercase;
  color:var(--ink-soft);padding:.7rem 1.05rem;position:relative;
  transition:color 140ms var(--ease-out-quart);
}
.tab:hover{ color:var(--ink) }
.tab[aria-selected="true"]{ color:var(--ink);background:var(--brand) }
.tab:focus-visible{ outline:2px solid var(--ink);outline-offset:-2px }

.manifest__body{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,320px);
  gap:clamp(1.5rem,3vw,3rem);margin-top:1.75rem;align-items:start;
}
@media (max-width:1080px){ .manifest__body{ grid-template-columns:1fr } }

/* A manifest is a wide document. Below ~700px it scrolls sideways in its own
   box rather than folding "148 / 168" onto three lines, which is what a real
   run-sheet on a phone does and is the only way the columns stay comparable. */
[role="tabpanel"]{ overflow-x:auto;overscroll-behavior-x:contain }
@media (max-width:700px){ table.sheet{ min-width:600px } }

table.sheet{ width:100%;border-collapse:collapse;font-feature-settings:"tnum" 1 }
table.sheet caption{ text-align:left;padding-bottom:.6rem }
.sheet th,.sheet td{
  text-align:left;padding:.6rem .75rem .6rem 0;
  border-bottom:1px solid var(--rule);vertical-align:baseline;
}
.sheet th{
  font-family:"Archivo",system-ui,sans-serif;font-variation-settings:"wdth" 94;
  font-size:.625rem;letter-spacing:.13em;text-transform:uppercase;
  font-weight:600;color:var(--ink-soft);border-bottom-color:var(--rule-mid);
  white-space:nowrap;
}
.sheet td{
  font-family:"Archivo",system-ui,sans-serif;font-variation-settings:"wdth" 104;
  font-size:.875rem;line-height:1.35;
}
.sheet td:first-child{ font-weight:700 }
.sheet .n{ text-align:right;font-variant-numeric:tabular-nums }
.sheet tbody tr{ transition:background-color 120ms var(--ease-out-quart) }
@media (hover:hover) and (pointer:fine){
  .sheet tbody tr:hover{ background:var(--brand) }
  .sheet tbody tr:hover td{ border-bottom-color:var(--rule-mid) }
}
.pill{
  display:inline-block;font-size:.6875rem;font-weight:700;
  padding:.12rem .4rem;border:1px solid var(--rule-mid);white-space:nowrap;
}
.pill--on{ background:var(--ink);color:var(--paper);border-color:var(--ink) }
.pill--hot{ background:var(--brand);border-color:var(--ink) }

.aside-plan{ position:sticky;top:1.5rem }
.aside-plan__stage{
  border:1.5px solid var(--ink);background:var(--paper);
  aspect-ratio:5/4;position:relative;
}
.aside-plan__stage canvas{ position:absolute;inset:0;width:100%;height:100% }
.aside-plan p{ margin-top:.7rem;font-size:.8125rem;color:var(--ink-soft) }
@media (max-width:1080px){ .aside-plan{ position:static;max-width:420px } }

/* ── Scene 3 — four numbers ───────────────────────────────────────────── */
.figures{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);
  margin-top:2.5rem;
}
.figure{ border-top:1.5px solid var(--ink);padding-top:.9rem }
/* the column the money leaks out of gets the brand rule, everything else a hairline */
.figure--loss{ border-top-width:4px;border-top-color:var(--brand);margin-top:-2.5px }
.figure__n{
  font-family:"Archivo",system-ui,sans-serif;font-variation-settings:"wdth" 108;
  font-weight:700;font-size:clamp(1.9rem,3.9vw,3.1rem);line-height:.95;
  letter-spacing:-.035em;font-variant-numeric:tabular-nums;
}
.figure__l{ margin-top:.5rem;font-size:.9375rem;color:var(--ink-soft);line-height:1.35 }
@media (max-width:820px){ .figures{ grid-template-columns:repeat(2,1fr) } }

.ticker{
  margin-top:2.75rem;border-block:1.5px solid var(--ink);
  overflow:hidden;padding-block:.7rem;
}
.ticker__track{
  display:flex;gap:2.5rem;width:max-content;
  animation:ticker-run 64s linear infinite;
}
.ticker__track:hover{ animation-play-state:paused }
.ticker__i{
  font-family:"Archivo",system-ui,sans-serif;font-variation-settings:"wdth" 100;
  font-size:.8125rem;color:var(--ink-soft);white-space:nowrap;
  font-feature-settings:"tnum" 1;
}
.ticker__i b{ color:var(--ink);font-weight:700 }
@keyframes ticker-run{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

/* ── Scene 5 — one year, as a ticket stub ────────────────────────────────
   A stub, not a stat row: a paper counterfoil with a perforated spine, the
   figures as line items and one total set large. Two identical stat rows on
   one page is the template this project bans, and the stub also delivers the
   "divide it like a ticket" idea somewhere other than the section joins. */
.stub{
  display:grid;grid-template-columns:minmax(0,7fr) 0 minmax(0,5fr);
  background:var(--paper);border:1.5px solid var(--ink);
}
.stub__main{ padding:clamp(1.5rem,3.2vw,2.75rem) }
.stub__name{
  font-family:"Archivo",system-ui,sans-serif;font-variation-settings:"wdth" 106;
  font-weight:700;font-size:.8125rem;letter-spacing:.09em;text-transform:uppercase;
}
.stub__fig{
  min-height:1ch;                          /* the figure counts up; hold its line */
  font-family:"Archivo",system-ui,sans-serif;font-variation-settings:"wdth" 112;
  font-weight:700;font-size:clamp(3rem,7.5vw,5.75rem);line-height:.9;
  letter-spacing:-.042em;font-variant-numeric:tabular-nums;margin-top:.6rem;
}
.stub__cap{ margin-top:.9rem;max-width:44ch;color:var(--ink-soft);font-size:1rem;line-height:1.5 }
.stub__rows{ margin:2rem 0 0;display:grid;gap:0;border-top:1.5px solid var(--ink) }
/* Fixed value column, for the same reason: these count up on entry, and an
   auto-width column moves while they do. */
.stub__rows > div{
  display:grid;grid-template-columns:1fr 8ch;align-items:baseline;gap:1.5rem;
  padding:.85rem 0;border-bottom:1px solid var(--rule);
}
.stub__rows > div:last-child{ border-bottom:0 }
.stub__rows dt{ font-size:.9375rem;color:var(--ink-soft) }
.stub__rows dd{
  margin:0;
  font-family:"Archivo",system-ui,sans-serif;font-variation-settings:"wdth" 108;
  font-weight:700;font-size:clamp(1.15rem,2vw,1.6rem);letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right;
}
/* the spine: a perforated fold, the same language as the section tears */
.stub__tear{
  border-left:1.5px dashed var(--rule-hard);
  position:relative;
}
.stub__tear::before,.stub__tear::after{
  content:"";position:absolute;left:-11px;width:22px;height:22px;border-radius:50%;
  background:var(--paper-sunk);border:1.5px dashed var(--rule-hard);
}
.stub__tear::before{ top:-12px;clip-path:inset(50% 0 0 0) }
.stub__tear::after{ bottom:-12px;clip-path:inset(0 0 50% 0) }
.stub__side{
  padding:clamp(1.5rem,3.2vw,2.75rem);
  display:grid;gap:1rem;align-content:start;
}
.stub__side p{ font-size:.9375rem;line-height:1.55;color:var(--ink-soft) }
.stub__side b{ color:var(--ink);font-weight:600 }
@media (max-width:900px){
  .stub{ grid-template-columns:1fr }
  .stub__tear{
    border-left:0;border-top:1.5px dashed var(--rule-hard);height:0;
  }
  .stub__tear::before{ top:-12px;left:-12px;clip-path:inset(0 0 50% 0) }
  .stub__tear::after{ top:-12px;bottom:auto;left:auto;right:-12px;clip-path:inset(0 0 50% 0) }
}

/* ── Scene 4 — PEAK ───────────────────────────────────────────────────────
   Revision 1 put this scene on a near-black field, arguing "the room with the
   lights down". The no-black direction exposed that as the reflex it was: the
   drop into the peak is carried by warmth (brand → amber) instead of by
   darkness, and the scene is now the deepest-saturated thing on the page
   rather than the darkest. */
.peak{ background:var(--amber);color:var(--ink);position:relative }
.peak__pin{
  height:100vh;                 /* svh below: mobile toolbars make vh taller than the screen */
  height:100svh;
  position:relative;display:grid;place-items:stretch;overflow:hidden;
}
.peak__canvas{ position:absolute;inset:0;width:100%;height:100% }
.peak__beats{
  position:relative;z-index:2;
  max-width:var(--maxw);margin-inline:auto;width:100%;
  padding:clamp(1.5rem,4vw,3.5rem) var(--pad);
  display:flex;align-items:flex-end;
  pointer-events:none;
}
/* The beat is a lower third. It sits ON a paper plate rather than floating over
   the crowd, because 640 moving points will cross any line of type you put over
   them and legibility beats atmosphere every time. */
.beat{
  position:absolute;left:var(--pad);
  /* clears the bottom letterbox bar: a lower third belongs inside the frame,
     not behind it. Without the 5.5vh the bar crops the last line. */
  bottom:calc(5.5vh + clamp(1rem,2.5vw,1.75rem));
  max-width:min(24ch, calc(100% - var(--pad) * 2));
  background:var(--paper);color:var(--ink);
  padding:.85rem 1.15rem 1rem;
  font-family:"Archivo",system-ui,sans-serif;font-variation-settings:"wdth" 114;
  font-weight:700;font-size:clamp(1.35rem,3.1vw,2.5rem);line-height:1.02;
  letter-spacing:-.03em;
  opacity:0;
}
.beat em{ font-style:normal;color:var(--amber) }
.peak__label{
  position:absolute;top:calc(5.5vh + clamp(0.9rem,2vw,1.5rem));left:var(--pad);z-index:2;
  color:var(--ink-brand-soft);
}
/* Letterbox. The bars are the scene's own amber, so the ink hairline is what
   makes the frame read as closing rather than as nothing happening. */
.peak__bar{
  position:absolute;left:0;right:0;height:0;background:var(--amber);z-index:3;
  transition:height 500ms var(--ease-out-quart);
}
.peak__bar--t{ top:0;border-bottom:1px solid color-mix(in oklab, var(--ink) 40%, transparent) }
.peak__bar--b{ bottom:0;border-top:1px solid color-mix(in oklab, var(--ink) 40%, transparent) }
.peak.is-cinema .peak__bar{ height:5.5vh }

/* ── The record card ──────────────────────────────────────────────────────
   HTML, not painted into the canvas. It was canvas-drawn at first, which
   meant hand-positioned baselines, no real type features and a redraw on
   every scroll frame. As an element it gets the page's own typography, it
   costs nothing to move, and the same card can serve both jobs: the beat the
   scene stops on, and whichever of the thousand you are pointing at. */
.rec{
  position:absolute;z-index:4;
  width:min(23rem, calc(100% - 2 * var(--pad)));
  background:var(--paper);color:var(--ink);
  border:1.5px solid var(--ink);
  box-shadow:6px 6px 0 color-mix(in oklab, var(--ink) 26%, transparent);
  padding:1rem 1.15rem 0.9rem;
  pointer-events:none;
}
.rec__name{
  font-family:"Archivo",system-ui,sans-serif;font-variation-settings:"wdth" 110;
  font-weight:700;font-size:1.0625rem;letter-spacing:-.02em;line-height:1.1;
  padding-bottom:.6rem;margin-bottom:.6rem;border-bottom:1.5px solid var(--ink);
}
.rec__rows{ margin:0;display:grid;gap:.34rem }
.rec__rows > div{ display:grid;grid-template-columns:6.6rem 1fr;gap:.6rem;align-items:baseline }
.rec__rows dt{
  font-family:"Archivo",system-ui,sans-serif;font-variation-settings:"wdth" 94;
  font-size:.5625rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-soft);line-height:1.5;
}
.rec__rows dd{
  margin:0;font-size:.8125rem;line-height:1.35;
  font-feature-settings:"tnum" 1;
}
.rec__foot{
  margin-top:.8rem;padding-top:.55rem;border-top:1px solid var(--rule);
  font-family:"Archivo",system-ui,sans-serif;font-variation-settings:"wdth" 94;
  font-size:.5625rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);
}
.peak__hint{ display:none }
@media (hover:hover) and (pointer:fine){ .peak__hint{ display:inline } }

/* With scripting off there is no canvas to draw into, so the peak would be a
   100vh void. The prose cut is the default and JS hides it, never the reverse. */
.peak__static{ display:block;padding-block:clamp(3.5rem,7vw,6rem) }
[data-auteur-js] .peak__static{ display:none }
html:not([data-auteur-js]) .peak__pin{ display:none }
.peak__static p{ max-width:60ch;margin-top:1rem;color:var(--ink-brand-soft) }

/* ── Scene 5 — ask the room ───────────────────────────────────────────── */
.ask{ background:var(--brand);color:var(--ink) }
.ask .lede{ color:var(--ink-brand-soft) }
.ask__grid{
  display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);align-items:start;
}
.ask__head{ grid-column:1 / span 5 }
.ask__demo{ grid-column:7 / -1 }
@media (max-width:1080px){
  .ask__head,.ask__demo{ grid-column:1 / -1 }
  .ask__demo{ margin-top:2.5rem }
}
/* Every box in this demo reserves room for its longest state. The questions
   rotate and they are not the same length: without these, each rotation
   rewrapped a line and shifted the column, which is a layout shift every few
   seconds for as long as the section is on screen. */
.query{
  border:1.5px solid var(--ink);background:var(--brand);
  padding:1rem 1.15rem;display:flex;gap:.7rem;align-items:baseline;
  min-height:5.5rem;
}
.query__q{
  font-family:"Archivo",system-ui,sans-serif;font-variation-settings:"wdth" 106;
  font-weight:600;font-size:clamp(.9375rem,1.4vw,1.125rem);line-height:1.35;
}
.query__caret{
  display:inline-block;width:.55em;height:1.05em;background:var(--ink);
  vertical-align:-.15em;animation:caret 1.06s steps(1) infinite;
}
@keyframes caret{ 50%{ opacity:0 } }
.answer{
  border:1.5px solid var(--ink);border-top:0;padding:1.15rem;
  display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;
}
.answer > div{ min-height:5.25rem }
.answer__n{
  font-family:"Archivo",system-ui,sans-serif;font-variation-settings:"wdth" 108;
  font-weight:700;font-size:clamp(1.4rem,2.6vw,2rem);line-height:1;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;
}
.answer__l{ font-size:.8125rem;color:var(--ink-brand-soft);margin-top:.35rem;line-height:1.3 }
/* The rows behind the count. This is the difference between a chatbot and a
   query layer: the answer is a segment you can open, so the page opens it. */
.seg{ border:1.5px solid var(--ink);border-top:0 }
.seg__h{
  padding:.55rem 1.15rem;border-bottom:1px solid var(--rule-mid);
  display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
}
.seg table{ width:100%;border-collapse:collapse;table-layout:fixed }
.seg td{
  padding:.5rem 1.15rem;border-bottom:1px solid var(--rule);
  font-family:"Archivo",system-ui,sans-serif;font-variation-settings:"wdth" 104;
  font-size:.8125rem;font-feature-settings:"tnum" 1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.seg td:first-child{ font-weight:700;width:34% }
.seg tbody tr{ height:2.6rem }
.seg td:last-child{ text-align:right;color:var(--ink-brand-soft) }
.seg tr:last-child td{ border-bottom:0 }

.answer__do{
  border:1.5px solid var(--ink);border-top:0;padding:.85rem 1.15rem;
  font-size:.875rem;display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;
  min-height:3.75rem;
}
.answer__do b{ font-family:"Archivo",system-ui,sans-serif;font-weight:700;font-size:.8125rem }
.ask__list{ margin:2rem 0 0;padding:0;list-style:none;display:grid;gap:.55rem }
.ask__list li{ font-size:.9375rem;padding-left:1.1rem;position:relative;color:var(--ink-brand-soft) }
.ask__list li::before{ content:"";position:absolute;left:0;top:.62em;width:.5rem;height:1.5px;background:var(--ink) }
.ask__list b{ color:var(--ink);font-weight:600 }
@media (max-width:560px){ .answer{ grid-template-columns:1fr } }

/* ── Scene 6 — three refusals ─────────────────────────────────────────── */
.refuse{ display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap) }
/* four columns, not three: "The money is yours." set at display size needs the
   width, and at three it broke to six cramped lines. */
.refuse__margin{ grid-column:1 / span 4 }
.refuse__main{ grid-column:6 / span 7 }
.refusal{ padding-block:clamp(1.5rem,3vw,2.5rem);border-top:1px solid var(--rule) }
.refusal:first-child{ border-top:0;padding-top:0 }
.refusal__say{
  font-family:"Newsreader",Georgia,serif;font-style:italic;font-weight:400;
  font-size:clamp(1.35rem,2.9vw,2.25rem);line-height:1.15;letter-spacing:-.01em;
  text-wrap:balance;
}
.refusal__how{
  margin-top:.85rem;max-width:58ch;color:var(--ink-soft);font-size:1rem;line-height:1.5;
}
.refusal__how b{ color:var(--ink);font-weight:600 }
.rail-mark{
  width:1.5px;background:var(--ink);height:0;
  transition:height 900ms var(--ease-out-quart);
  margin-bottom:1rem;
}
.refusal.is-in .rail-mark{ height:2.5rem }
@media (max-width:960px){
  .refuse{ grid-template-columns:1fr }
  .refuse__margin,.refuse__main{ grid-column:1 / -1 }
  .refuse__main{ margin-top:1.75rem }
}
.whofor{ margin-top:2.5rem;font-size:.9375rem;color:var(--ink-soft);line-height:1.7 }
.whofor b{ color:var(--ink);font-weight:600;font-family:"Archivo",system-ui,sans-serif;font-size:.875rem }

/* ── Scene 7 — the door ───────────────────────────────────────────────── */
.door{ background:var(--brand);color:var(--ink);text-align:center }
/* Visible by default. Only the animated build hides it first, or the reduced
   and no-JS cuts would lose the one place the brand mark appears. */
.door__mark{ width:60px;height:60px;margin:0 auto 1.75rem }
.js-anim .door__mark{ transform:scale(.96);opacity:0 }
.door h2{ font-size:clamp(2rem,5vw,4rem);max-width:18ch;margin-inline:auto }
.door .lede{ color:var(--ink-brand-soft);margin:1.5rem auto 0;max-width:52ch }
.door .compose{ margin-inline:auto;margin-top:2.25rem }
.door .compose__field{ background:var(--paper) }
.door .compose__go{ background:var(--ink);color:var(--brand) }
.door .compose__go:hover{ background:oklch(0.33 0.06 78) }
.door .compose__note{ color:var(--ink-brand-soft) }

/* ── The year, as twelve months ───────────────────────────────────────────
   The total counts up; the months grow under it. Transform only, staggered
   off a custom property, so twelve bars cost one composited animation each
   and nothing touches layout. */
.months{ margin-top:1.75rem }
.months__bars{
  display:flex;align-items:flex-end;gap:clamp(3px,0.7vw,8px);
  height:clamp(56px,9vw,104px);
  border-bottom:1.5px solid var(--ink);
}
.months__bars span{
  flex:1;height:var(--h);background:var(--brand);
  border:1px solid var(--ink);border-bottom:0;
  transform-origin:50% 100%;
}
.js-anim .months__bars span{ transform:scaleY(0.04) }
.js-anim .months.is-in .months__bars span{
  transform:scaleY(1);
  transition:transform 760ms var(--ease-out-quart);
  transition-delay:calc(var(--i) * 55ms);
}
.months__axis{
  display:flex;justify-content:space-between;margin-top:.55rem;
  font-family:"Archivo",system-ui,sans-serif;font-variation-settings:"wdth" 94;
  font-size:.5625rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);
}

/* ── Scene 7a — what it costs ─────────────────────────────────────────────
   Two panels of equal weight, as asked. The differentiation is carried by
   hover and focus instead of by size: point at one and it comes forward
   while the other steps back, so the page never decides for you which one
   you are supposed to want. */
.price{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1rem,2vw,1.75rem);
  margin-top:2.75rem;text-align:left;
}
@media (max-width:820px){ .price{ grid-template-columns:1fr } }
.price__card{
  background:var(--paper);border:1.5px solid var(--ink);
  padding:clamp(1.5rem,2.6vw,2.25rem);
  display:flex;flex-direction:column;
  transition:transform 220ms var(--ease-out-quart),
             box-shadow 220ms var(--ease-out-quart),
             opacity 220ms var(--ease-out-quart);
  outline:0;
}
@media (hover:hover) and (pointer:fine){
  /* Dim the CONTENT, never the card. Putting opacity on the card itself made
     its paper background translucent over the yellow field, so the unfocused
     plan turned yellow and read as a different design rather than a quieter
     one. The card stays opaque; only what is printed on it steps back. */
  .price:has(.price__card:hover) .price__card:not(:hover) > *,
  .price:has(.price__card:focus-visible) .price__card:not(:focus-visible) > *{
    opacity:.42;
  }
  .price__card:hover,
  .price__card:focus-visible{
    transform:translateY(-6px);
    box-shadow:8px 8px 0 var(--ink);
  }
}
.price__card > *{ transition:opacity 220ms var(--ease-out-quart) }
.price__card:focus-visible{ box-shadow:8px 8px 0 var(--ink), 0 0 0 3px var(--amber) }
.price__name{
  font-family:"Archivo",system-ui,sans-serif;font-variation-settings:"wdth" 106;
  font-weight:700;font-size:.8125rem;letter-spacing:.09em;text-transform:uppercase;
}
.price__fig{
  font-family:"Archivo",system-ui,sans-serif;font-variation-settings:"wdth" 112;
  font-weight:700;font-size:clamp(2.4rem,4.6vw,3.6rem);line-height:.92;
  letter-spacing:-.04em;font-variant-numeric:tabular-nums;margin-top:.65rem;
}
.price__fig span{ font-size:.3em;letter-spacing:-.005em;font-weight:600;white-space:nowrap }
.price__list{ margin:1.5rem 0 0;padding:0;list-style:none;display:grid;gap:.6rem;flex:1 }
.price__list li{ font-size:.9375rem;line-height:1.5;padding-left:1.2rem;position:relative;color:var(--ink-soft) }
.price__list li::before{
  content:"";position:absolute;left:0;top:.62em;width:.6rem;height:1.5px;background:var(--ink);
}
.price__list b{ color:var(--ink);font-weight:600 }
.price__go{ margin-top:1.75rem }
.price__go a{ font-weight:600;text-underline-offset:4px }

.foot{ background:var(--amber);color:var(--ink);padding-block:2.5rem }
.foot__slogan{
  font-family:"Archivo",system-ui,sans-serif;font-variation-settings:"wdth" 114;
  font-weight:700;font-size:clamp(1.75rem,4.6vw,3.5rem);line-height:1;
  letter-spacing:-.035em;margin-bottom:1.75rem;
}
.foot__in{
  display:flex;flex-wrap:wrap;gap:1.25rem 2.5rem;align-items:center;
  border-top:1.5px solid var(--ink);padding-top:1.5rem;
}
.foot img{ height:20px;width:auto;filter:brightness(0) saturate(100%) invert(11%) sepia(38%) saturate(1400%) hue-rotate(8deg) }
.foot a{ color:var(--ink);text-decoration:none;font-size:.875rem }
.foot a:hover{ text-decoration:underline;text-underline-offset:4px }
.foot__end{ margin-left:auto;font-size:.8125rem;color:var(--ink-brand-soft) }
@media (max-width:720px){ .foot__end{ margin-left:0 } }

/* ── Reveals. Every one enhances an already-visible default: the base
      state has full opacity so the page reads with JS off. JS adds
      .js-anim to <html>, which is the only thing that hides anything. ─── */
.js-anim [data-rise]{ opacity:0;transform:translateY(9px);filter:blur(4px) }
.js-anim [data-rise].is-in{
  opacity:1;transform:none;filter:blur(0);
  transition:opacity 620ms var(--ease-out-quart),
             transform 620ms var(--ease-out-quart),
             filter 620ms var(--ease-out-quart);
}
/* The panel carries the state, the row carries its index. One class toggle
   staggers the whole table; nothing writes per-row styles at switch time. */
.js-anim [role="tabpanel"] [data-row]{ opacity:0;transform:translateX(-10px) }
.js-anim [role="tabpanel"].is-in [data-row]{
  opacity:1;transform:none;
  transition:opacity 380ms var(--ease-out-quart), transform 380ms var(--ease-out-quart);
  transition-delay:calc(var(--i, 0) * 38ms);
}
.js-anim .door__mark.is-in{
  opacity:1;transform:scale(1);
  transition:opacity 700ms var(--ease-out-quart), transform 700ms var(--ease-out-quart);
}

/* ── Reduced motion: a different cut of the same film, not an absence.
      Nothing pins, nothing scrubs, nothing loops. Everything is legible. ─ */
@media (prefers-reduced-motion: reduce){
  .js-anim [data-rise],
  .js-anim [data-row],
  .js-anim .door__mark{ opacity:1;transform:none;filter:none;transition:none }
  .ticker__track{ animation:none }
  .query__caret{ animation:none;opacity:0 }
  .peak__bar{ transition:none }
  .rail-mark{ transition:none;height:2.5rem }
  .compose__go:active{ transform:none }
}