:root {
  --bg: #F8F7FA;
  --ink: #1E1533;
  --muted: #5A5070;
  --waiting: #736B86;
  --violet: #723CD6;
  --violet-hover: #5F2FC0;
  --gold: #EDB158;
  --gold-hover: #F3C47D;
  --on-dark: #FCFFFF;
  --muted-on-dark: #CDC6E0;
  --line: #E3DFEC;
  --violet-tint: #EEE7FB;
  --surface: #FFFFFF;
}
/* Colours come from the :root tokens that the build prepends (src/tokens.json). */
*, *::before, *::after { box-sizing: border-box; }

html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.125rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  width: 100%;
  max-width: 64rem;
  margin: 0 auto;
  padding-inline: 1.25rem;
}

h1, h2 { line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 1.25rem; text-wrap: balance; }
h1 { font-size: clamp(2.25rem, 6.4vw, 4rem); font-weight: 750; line-height: 1.03; letter-spacing: -0.035em; max-width: 15ch; overflow-wrap: break-word; }
h2 { font-size: clamp(1.625rem, 4.5vw, 2.25rem); font-weight: 650; }
p { margin: 0 0 1rem; max-width: 60ch; }

a { color: var(--violet); text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; border-radius: 4px; }

.skip {
  position: absolute; left: 1rem; top: -4rem;
  background: var(--ink); color: var(--on-dark);
  padding: 0.75rem 1rem; border-radius: 0.5rem; z-index: 10;
}
.skip:focus { top: 1rem; }

/* Header */
.site-header { padding-block: 1.25rem; }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: 0.625rem; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 1.25rem; letter-spacing: -0.01em; min-height: 3rem; }
.brand img { display: block; width: 2rem; height: 2rem; }
.lang-switch { display: inline-flex; align-items: center; min-height: 3rem; padding-inline: 0.5rem; font-size: 1rem; }

/* Hero */
.kicker { margin: 0 0 0.75rem; font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--violet); text-wrap: balance; }
.hero { padding-block: clamp(3rem, 9vw, 6.5rem) clamp(2.5rem, 7vw, 5rem); }
.lead { font-size: clamp(1.1875rem, 2.6vw, 1.375rem); color: var(--ink); max-width: 38rem; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin: 2rem 0 0; max-width: none; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3.25rem; padding: 0.75rem 1.75rem;
  background: var(--violet); color: var(--on-dark);
  font-weight: 650; font-size: 1.0625rem; text-decoration: none;
  border-radius: 0.75rem;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.btn:hover { background: var(--violet-hover); transform: translateY(-1px); }
.btn:active { transform: none; }
.quiet-link { display: inline-flex; align-items: center; min-height: 3rem; font-size: 1.0625rem; }

/* Hero */
.hero-grid { display: grid; gap: clamp(2rem, 6vw, 3rem); align-items: center; }
.hero-preview { display: block; width: 100%; max-width: 35rem; height: auto; aspect-ratio: 560 / 624; border-radius: 1.5rem; justify-self: center; }

/* Sections */
.section { padding-block: clamp(3rem, 8vw, 5.5rem); border-top: 1px solid var(--line); }
.note { color: var(--muted); margin-top: 2rem; }
.emphasis { font-size: 1.25rem; font-weight: 600; margin-top: 1.5rem; }


.calm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; font-size: 1.25rem; }
.calm-list li { padding-left: 1.75rem; position: relative; }
.calm-list li::before { content: ""; position: absolute; left: 0; top: 0.75em; width: 0.75rem; height: 2px; background: var(--violet); }



.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tag { display: inline-block; padding: 0.05rem 0.625rem; border-radius: 999px; background: var(--violet-tint); color: var(--violet); font-size: 0.875rem; font-weight: 700; line-height: 1.5; vertical-align: 0.1em; }
.fineprint { color: var(--muted); font-size: 0.9375rem; margin-top: 1.25rem; }
.muted { color: var(--muted); }
.caption { font-size: 1.25rem; font-weight: 600; max-width: 34rem; }

/* Scenes: a poster always fills the box; the canvas, when it exists, sits on top. */
.stage { position: relative; width: 100%; border-radius: 1.5rem; overflow: hidden; background: var(--surface); }
.stage-race { aspect-ratio: 800 / 500; --ar: 1.6; }
.stage-split { aspect-ratio: 1600 / 830; }
.stage-clock { aspect-ratio: 1600 / 900; --ar: 1.7778; }
.stage .poster { display: block; width: 100%; height: 100%; }
.stage picture { display: contents; }
/* Phones: the portrait artboards (RaceTall, SplitTall, ClockTall). Keep this query equal to TALL_QUERY in pages.mjs and scenes.mjs. */
@media (max-width: 43.74rem) {
  .stage-race { aspect-ratio: 800 / 1100; --ar: 0.7273; }
  .stage-split, .stage-clock { aspect-ratio: 800 / 1100; }
  .stage-clock { --ar: 0.7273; }
}
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; }
.stage.is-live canvas { opacity: 1; }
.stage.is-live .poster { visibility: hidden; }
/* The race stage holds four stills, one per moment: K1 (6:47, start), K2 (tomorrow 9:00, lost), K2b (the pit stop) and K3 (the win). The loader writes
   data-act (lost until the rewind heading, then win), data-take (1 until the tomorrow-9:00 row, then 2) and data-pit (stop until the call card, then go). */
.stage-race .poster-extra { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
.stage-race[data-act="lost"][data-take="2"] .poster-start { visibility: hidden; }
.stage-race[data-act="lost"][data-take="2"] .poster-lost { opacity: 1; visibility: visible; }
.stage-race[data-act="win"] .poster-start { visibility: hidden; }
.stage-race[data-act="win"][data-pit="stop"] .poster-rewind { opacity: 1; visibility: visible; }
.stage-race[data-act="win"][data-pit="go"] .poster-win { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: no-preference) {
  .stage-race .poster-extra { transition: opacity 0.35s ease, visibility 0s linear 0.35s; }
  .stage-race[data-act="lost"][data-take="2"] .poster-lost, .stage-race[data-act="win"][data-pit="stop"] .poster-rewind, .stage-race[data-act="win"][data-pit="go"] .poster-win { transition: opacity 0.35s ease; }
}

/* Chapters 1 and 2: the race. The stage is pinned the whole time the story scrolls: beside the text on wide screens (see the 60rem block),
   as a band across the top on phones and tablets, with the text scrolling beneath it. The loader maps progress to the text's position (data-beats). */
.race-story { padding-block: clamp(3rem, 8vw, 5.5rem); border-top: 1px solid var(--line); }
.story-grid { display: flex; flex-direction: column; }
.story-grid::after { content: ""; order: 3; height: 8svh; }
.visuals {
  order: 0; position: sticky; top: 0; z-index: 5;
  margin-inline: -1.25rem; padding: 0.5rem 1.25rem; background: var(--bg); border-bottom: 1px solid var(--line);
}
.visuals .stage-race { width: min(100%, calc(55svh * var(--ar))); margin-inline: auto; }
.chapter:first-child { order: 1; margin-top: 1.5rem; }
#rewind { order: 2; margin-top: 3rem; }
.chapter p { max-width: 36rem; }
.timeline { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1rem; max-width: 36rem; }
.timeline li { display: grid; grid-template-columns: 6.5rem 1fr; gap: 0 1rem; align-items: baseline; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.timeline time { font-weight: 700; color: var(--violet); font-variant-numeric: tabular-nums; }
.timeline span { overflow-wrap: break-word; min-width: 0; }
/* Rows below the reading line wait in the soft "waiting" grey and take their colours as each reaches it (watchRows in scenes.mjs writes --row-a: ROW_MIN
   below the line, 1 at it, and --board-a for the FINAL board; --row-k maps --row-a to 0-100%). Only colour moves on text, never opacity, so a waiting row
   still reads at WCAG AA: an sRGB mix of two colours is never lighter than the lighter one, and the grey is 4.7:1 on the page, 5.0:1 on cards.
   The rails, ticks and gold check fade by opacity: they are decoration. Without script, and under reduced motion, every row is in full colour. */
.race-story .timeline li, .race-story .booked, .owner-line, .checks[data-beat-gate], .lap-mark {
  --row-k: clamp(0%, calc((var(--row-a, 1) - 0.35) / 0.65 * 100%), 100%);
  color: color-mix(in srgb, var(--ink) var(--row-k), var(--waiting));
}
.race-story .timeline time, .lap-mark b { color: color-mix(in srgb, var(--violet) var(--row-k, 100%), var(--waiting)); }
.race-story .timeline li::before, .checks[data-beat-gate] li::before, .race-story .booked .gold-check { opacity: var(--row-a, 1); }
.race-story .booked .stamp { color: inherit; border-color: currentColor; }
.race-story .timeline li { position: relative; }
.race-story .timeline li::before { content: ""; position: absolute; left: -0.875rem; top: 0.3rem; bottom: 1.25rem; width: 4px; border-radius: 2px; background: var(--violet); }
.race-story .board { opacity: var(--board-a, 1); }
/* polish p4: the BOOKED chip waits with the 6:54 row until the stamp slams (data-stamp-gate; watchRows writes --row-a; the colour rule above) */
/* The owner's own line at the win: the column beside the BOOKED chip is no longer empty. */
.owner-line { margin: 0.75rem 0 0; padding-left: 0.875rem; border-left: 4px solid var(--violet); font-size: 1.1875rem; font-weight: 650; line-height: 1.4; }
.call { margin: 1.75rem 0 0; padding: 1.25rem; background: var(--surface); border: 1px solid var(--line); border-radius: 1.25rem; max-width: 36rem; }
.call figcaption { color: var(--muted); font-size: 0.9375rem; font-weight: 600; margin-bottom: 0.625rem; }
.bubble { margin: 0 0 1.25rem; padding: 0.875rem 1.125rem; background: var(--violet-tint); color: var(--ink); border-radius: 1.125rem 1.125rem 1.125rem 0.25rem; font-size: 1.0625rem; line-height: 1.5; }
.checks-label { color: var(--muted); font-size: 0.9375rem; font-weight: 600; margin-bottom: 0.5rem; }
.checks { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 0.375rem; }
.checks li { position: relative; padding-left: 1.75rem; }
.checks li::before { content: ""; position: absolute; left: 0.1rem; top: 0.4em; width: 0.4rem; height: 0.8rem; border-right: 3px solid var(--violet); border-bottom: 3px solid var(--violet); transform: rotate(40deg); }
.booked { display: flex; align-items: center; gap: 0.75rem; margin: 0; font-weight: 700; font-size: 1.1875rem; }
.gold-check { flex: none; position: relative; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--gold); }
.gold-check::after { content: ""; position: absolute; left: 0.5rem; top: 0.3rem; width: 0.4rem; height: 0.8rem; border-right: 3px solid var(--ink); border-bottom: 3px solid var(--ink); transform: rotate(40deg); }

/* Chapter 3: you and Dialed on one clock. On phones the cards below carry it; the poster is too small to read. */
.split .stage { margin: 0 auto 2rem; }
/* The poster or canvas carries the three highlights; the text cards stay for screen readers and come back if the poster fails to load. */
.split:not([data-poster-failed]) .day { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.day { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.day li { display: grid; gap: 0.5rem 1.5rem; padding: 1.125rem 1.25rem; background: var(--surface); border: 1px solid var(--line); border-radius: 1.25rem; }
.day time { font-weight: 700; color: var(--violet); font-variant-numeric: tabular-nums; }
.day p { margin: 0; max-width: none; overflow-wrap: break-word; }
.day .who { display: block; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.day-dialed { font-weight: 650; }
.day-dialed .who { color: var(--violet); }

/* Chapter 4: the stopwatch */
.clock-grid { display: grid; gap: 2rem; }
/* The timing screen is pinned like the race: a band across the top on phones and tablets, beside the text on wide screens. The lap rows scroll
   past it and drive its progress (data-beats on the section), so 0:00 to 7:00 and the gold final lap play while the whole screen is in view. */
.clock-pin {
  position: sticky; top: 0; z-index: 5;
  margin-inline: -1.25rem; padding: 0.5rem 1.25rem; background: var(--bg); border-bottom: 1px solid var(--line);
}
.clock-pin .stage-clock { width: min(100%, calc(55svh * var(--ar))); margin-inline: auto; }
.clock .laps tbody tr { height: clamp(6rem, 20svh, 12rem); opacity: var(--row-a, 1); }
.clock .laps tfoot { opacity: var(--row-a, 1); }
.clock .laps tbody th, .clock .laps tbody td { vertical-align: top; padding-top: 0.75rem; }
.clock .laps tbody tr:last-child { height: auto; }
.clock-hold { height: 2rem; }
/* polish p4: the lap table repeats the stopwatch screen, so beside it each lap is a one-line mark (lap and time) that keeps the scroll spacing; the real table is
   screen-reader only while the picture shows, and the visible version if the picture fails. */
.lap-marks { list-style: none; margin: 0; padding: 0; }
.lap-mark { height: clamp(6rem, 20svh, 12rem); padding-top: 0.75rem; border-top: 1px solid var(--line); font-size: 0.9375rem; }
.lap-mark b { font-weight: 700; }
.lap-mark:last-child { height: auto; padding-bottom: 1rem; }
.clock[data-poster-failed] .lap-marks { display: none; }
.clock:not([data-poster-failed]) .laps { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* The first lap row starts below the reading line when the band pins, so the screen opens on 0:00 and the rows then drive it. */
.clock-text { padding-top: 26svh; }
.clock-head p { margin-bottom: 0.5rem; }
.big-number { margin: 0 0 0.5rem; font-size: 1.5rem; font-weight: 700; color: var(--ink); }
.big-number span { font-size: 2.5rem; line-height: 1; letter-spacing: -0.03em; color: var(--violet); margin-right: 0.25rem; }

/* Closing band */
.closing { background: var(--ink); color: var(--on-dark); padding-block: clamp(3.5rem, 9vw, 6rem); }
.closing .lead { color: var(--muted-on-dark); }
.closing :focus-visible { outline-color: var(--on-dark); }
/* Violet on the ink band is 2.8:1, so the closing button gets a light edge (the label itself is 6:1). */
.closing .btn { box-shadow: 0 0 0 2px var(--muted-on-dark); }

/* Footer */
.site-footer { padding-block: 2.5rem 3rem; font-size: 1rem; }
.footer-links { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0 1.75rem; }
.footer-links a { display: inline-flex; align-items: center; min-height: 3rem; }
.copyright { color: var(--muted); margin: 0; }

/* Legal pages */
.legal { border-top: 0; }
.legal h1 { font-size: clamp(2rem, 6vw, 3rem); max-width: none; margin-bottom: 0.5rem; }
.legal h2 { font-size: 1.375rem; margin: 2.25rem 0 0.5rem; letter-spacing: -0.01em; }
.updated { color: var(--muted); margin-bottom: 1.5rem; }

@media (min-width: 48rem) {
  .wrap { padding-inline: 2rem; }
  .visuals, .clock-pin { margin-inline: -2rem; padding-inline: 2rem; }
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes rise { from { transform: translateY(10px); } to { transform: none; } }
  .hero-preview { animation: rise 0.7s ease both; }
  .hero .actions { animation: rise 0.7s ease 0.12s both; }
}

/* Text reveals on scroll, only where the browser can do it without script. The hero is never faded. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* Small items only, never whole text blocks, and transform only (opacity stays 1), so text keeps full contrast at every scroll position. */
    @keyframes reveal { from { transform: translateY(1rem); } to { transform: none; } }
    .timeline li, .day li, .calm-list li {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 25%;
    }
  }
}

@media (max-width: 59.99rem) {
  /* polish p2: on a phone the owner (the hero art) sits right under the headline, so the roof shot is in the first screen */
  .hero-grid { display: flex; flex-direction: column; gap: 0; }
  .hero-text { display: contents; }
  .hero-text > .kicker { order: 0; }
  .hero-text > h1 { order: 1; }
  /* polish p5: the button comes right under the picture (the lead follows it) and the picture is 86% wide, so the CTA is inside the first screen at 390 x 844 */
  .hero-grid > .hero-preview { order: 2; width: 86%; margin: 1rem auto; }
  .hero-text > .actions { order: 3; }
  .hero-text > .lead { order: 4; margin-top: 1.25rem; }
  .hero-text > .cta-note { order: 5; }
}

@media (min-width: 60rem) {
  .hero-grid { grid-template-columns: 1.05fr 0.95fr; }
  /* polish p4: the Spanish headline is longer; a slightly smaller size keeps it to four lines so the button and the race link stay above the fold at 1440 x 900 */
  html[lang="es"] .hero h1 { font-size: clamp(2.25rem, 3.6vw, 3.25rem); max-width: 20ch; }
  /* The race section is wider than the page column: a narrow text column and a big stage (at 1440 px the stage is about 910 px wide). */
  .race-story > .wrap { max-width: 90rem; }
  .split > .wrap { max-width: 76rem; }
  /* Three rows: chapter 1, chapter 2 and a tail. The tail keeps the stage pinned until the last line of the story has passed the reading line,
     so the end of the text and the end of the scene (progress 100) coincide with the whole stage still in view (5svh + 24rem >= stage bottom - reading line). */
  .story-grid { display: grid; grid-template-columns: minmax(20rem, 26rem) minmax(0, 1fr); grid-template-rows: auto auto calc(5svh + 24rem - max(0px, (50svh - 19rem) * 0.85)); gap: 0 3rem; align-items: start; }
  .story-grid::after { display: none; }
  .chapter, .chapter:first-child, #rewind { order: 0; margin-top: 0; min-height: 60vh; }
  /* The sticky stage runs beside both chapters and the tail: the lost night, then (data-act="win") the Dialed win.
     It is capped at 36rem tall (57.6rem wide at 8:5) and centred in the viewport, so it stays fully in view while the text scrolls. */
  /* Even pacing across the acts (docs/owner-story.md M7): Act 1 about 22 px per progress point, the rewind about 26, Act 2 at least 26
     at 1440 x 900, so the picture never races ahead of the reading. The extra room is anticipation and hold; tools/measure-beats.mjs checks it. */
  #rewind-title { margin-bottom: 2.5rem; }
  /* polish p4: about 50% more scroll between the rewind heading and the 6:49 row (367 -> about 550 px at 1440 x 900), so the crane lift and the car drop play out */
  #rewind .lane-label { margin-bottom: 19.5rem; }
  .call .bubble { margin-bottom: 5.5rem; }
  #rewind-e2 { margin-bottom: 14.5rem; }
  #rewind-e3 { margin-bottom: 13rem; }
  /* polish p2: room after the win so the three hits and the idle hold play out (about 14 progress points) before Highlights scrolls in */
  .booked[data-after] { margin-bottom: 0; }
  .owner-line { margin-bottom: 11rem; }
  .visuals { order: 0; grid-column: 2; grid-row: 1 / span 3; top: max(1rem, calc(50svh - 18rem)); z-index: auto; align-self: start; width: 100%; max-width: 57.6rem; margin: 0; padding: 0; background: none; border: 0; }
  .visuals .stage-race { width: 100%; }
  .day li { grid-template-columns: 7rem 1fr 1fr; align-items: baseline; }
  /* The clock: head and lap rows in a narrow column, the timing screen pinned beside them. The tail row keeps the stage pinned until the last line
     (the example note) has passed the reading line, so the scene holds 7:00 and the gold lap for the last ~20 progress points with the whole screen in view. */
  .clock > .wrap { max-width: 90rem; }
  .clock-grid { grid-template-columns: minmax(18rem, 22rem) minmax(0, 1fr); grid-template-rows: auto auto calc(5svh + 17rem); gap: 0 3rem; align-items: start; }
  .clock-head { grid-column: 1; grid-row: 1; }
  .clock-text { grid-column: 1; grid-row: 2; padding-top: 4svh; }
  .clock-pin { grid-column: 2; grid-row: 1 / span 3; top: max(1rem, calc(50svh - 17rem)); z-index: auto; width: 100%; max-width: 60rem; margin: 0; padding: 0; background: none; border: 0; }
  .clock-pin .stage-clock { width: 100%; }
  .clock .laps tbody tr, .lap-mark { height: 28svh; }
  .clock .laps tbody tr:last-child, .lap-mark:last-child { height: auto; }
  .clock-hold { height: 0; }
}


/* Race Day personality layer. Gold is for the win only: the BOOKED stamp, split row 3's check, the clock's final-lap arc and the closing CTA's third lamp. Buttons are violet. */
.cta { display: inline-flex; flex-direction: column-reverse; align-items: flex-start; gap: 0.625rem; }
.cta-note { margin: 0.875rem 0 0; font-size: 0.9375rem; color: var(--muted); }
.closing .cta-note { color: var(--muted-on-dark); }
.footer-note { margin: 0 0 0.75rem; }

/* Start lamps: lit by default (no-JS, reduced motion); they light up once on load and again on hover or focus of the button. */
.lights { --lamp: var(--ink); --go: var(--violet); --off: var(--line); display: inline-flex; gap: 0.5rem; padding-left: 0.25rem; }
.lights-close { --lamp: var(--muted-on-dark); --go: var(--gold); --off: rgb(255 255 255 / 0.16); }
.lights i { --on: var(--lamp); display: block; width: 0.875rem; height: 0.875rem; border-radius: 50%; background-color: var(--on); }
.lights i:nth-child(3) { --on: var(--go); }

/* The ticker: real text, static, one line of commentary. */
.ticker { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin: 0 0 1.25rem; padding: 0.5rem 1rem 0.5rem 0.875rem; max-width: 36rem; background: var(--ink); color: var(--on-dark); font-weight: 600; font-size: 1.0625rem; line-height: 1.4; clip-path: polygon(0 0, 100% 0, calc(100% - 0.625rem) 100%, 0 100%); }
.ticker-tag, .board-label, .chyron .replay { background: var(--violet); color: var(--on-dark); font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.5; padding: 0.125rem 0.875rem 0.125rem 0.75rem; clip-path: polygon(0 0, 100% 0, calc(100% - 0.5rem) 100%, 0 100%); }

/* The FINAL board: a real table dressed as split-flap tiles. */
.board { border-collapse: separate; border-spacing: 0.25rem; width: 100%; max-width: 36rem; margin: 1.5rem 0 0; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }
.board caption { text-align: left; padding: 0 0 0.375rem; }
.board th, .board td { padding: 0; text-align: left; font-weight: 700; vertical-align: top; }
.board th { width: 28%; }
.board .when { width: 34%; }
.board .when .flap { white-space: nowrap; }
.flap { position: relative; display: block; height: 100%; padding: 0.5rem 0.625rem; background: var(--ink); color: var(--on-dark); border-radius: 0.375rem; font-size: 0.875rem; line-height: 1.3; letter-spacing: 0.04em; text-transform: uppercase; overflow-wrap: anywhere; }
.flap::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgb(0 0 0 / 0.55); }

.lane-label { display: flex; align-items: center; gap: 0.5rem; margin: 1rem 0 0; font-weight: 700; color: var(--violet); }
.lane-mark { flex: none; display: block; width: 1.5rem; height: 1.5rem; }
.booked { flex-wrap: wrap; }
.booked[data-after] { margin-top: 1.25rem; }
@media (max-width: 59.99rem) { .booked[data-after] { margin-bottom: 0; } .owner-line { margin-bottom: 5.5rem; } }
/* the 6:52 -> 7:55 (13 -> 22) and 7:55 -> 9:00 (22 -> 33: A crosses at 27, pit board) stretches get room at every size */
.race-story #race-e2 { margin-bottom: 9rem; }
.race-story #race-e3 { margin-bottom: 10rem; }
/* polish p3: on a phone the rewind scrub (crane lift, car drop) and the Act 2 cruise get more scroll so they don't flash past */
@media (max-width: 59.99rem) { #rewind .lane-label { margin-bottom: 15.75rem; } #rewind-e2 { margin-bottom: 8rem; } }
.stamp { flex: none; display: inline-block; padding: 0.25rem 0.875rem; background: transparent; color: var(--ink); border: 2px solid var(--ink); border-radius: 0.125rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; font-size: 1rem; transform: skewX(-10deg); }

/* Narrow phones: the FINAL flaps stay on one line each. */
@media (max-width: 24.99rem) {
  .board { border-spacing: 0.1875rem; }
  .board tbody tr { display: grid; grid-template-columns: 1fr 0.95fr 1.45fr; gap: 0.1875rem; }
  .board th, .board td, .board .when { width: auto; display: block; }
  .flap { font-size: 0.6875rem; letter-spacing: 0; white-space: nowrap; padding: 0.5rem 0.4rem; overflow-wrap: normal; }
}

/* Highlights */
.day .chyron { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 0.25rem; font-weight: 700; font-size: 0.9375rem; }
.chyron .replay { background: var(--ink); }
.chyron span:last-child { padding: 0.125rem 0.875rem 0.125rem 0.625rem; background: var(--violet); color: var(--on-dark); clip-path: polygon(0 0, 100% 0, calc(100% - 0.5rem) 100%, 0 100%); }
.day .gold-check { display: inline-block; vertical-align: middle; margin-left: 0.25rem; }
.day .tag { margin-left: 0.25rem; }

/* Lap table */
.laps { width: 100%; max-width: 34rem; margin: 1.25rem 0 0; border-collapse: collapse; font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.laps caption { text-align: left; font-weight: 700; padding-bottom: 0.5rem; }
.laps th, .laps td { padding: 0.5rem 0.5rem 0.5rem 0; text-align: left; border-bottom: 1px solid var(--line); vertical-align: baseline; overflow-wrap: break-word; }
.laps thead th { font-size: 0.8125rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.laps tbody th { font-weight: 700; color: var(--violet); }
.laps .lap-n, .laps .lap-time, .laps .lap-split { white-space: nowrap; }
.laps tfoot th, .laps tfoot td { border-bottom: 0; border-top: 2px solid var(--ink); font-size: 1.125rem; font-weight: 800; }
.laps tfoot td { color: var(--violet); }
.dnf { margin: 1rem 0 0; color: var(--muted); }
.dnf strong { color: var(--ink); }

/* The chores you skip: the crew's pit board (dark board, white slot letters). Each strike-through draws on and lands with a small wheel-gun shake;
   the loader arms the list (data-armed) and strikes one row at a time as the board comes into view. Without script, or under reduced motion, the list is struck. */
.chores { list-style: none; margin: 0; padding: 1.25rem 1.5rem; display: grid; gap: 0.5rem; max-width: 34rem; background: var(--ink); color: var(--on-dark); border: 3px solid var(--muted); border-radius: 0.75rem; font-size: 1.25rem; font-weight: 700; letter-spacing: 0.01em; }
.chores li { padding-bottom: 0.5rem; border-bottom: 1px solid rgb(255 255 255 / 0.16); }
.chores li:last-child { border-bottom: 0; padding-bottom: 0; }
/* polish p3: a thin line in a soft violet, low across the letters, so each struck chore stays readable */
.chores { --strike: color-mix(in srgb, var(--violet) 62%, var(--on-dark)); }
.chores s { position: relative; display: inline-block; text-decoration: none; color: var(--muted-on-dark); }
.chores s::after { content: ""; position: absolute; left: -0.25rem; right: -0.5rem; top: 68%; height: 2px; border-radius: 1px; background: var(--strike); transform: rotate(-1.5deg); transform-origin: left center; }
.chores s::before { content: ""; position: absolute; right: -1rem; top: calc(68% - 5px); width: 0.75rem; height: 2px; border-radius: 1px; background: var(--strike); transform: rotate(-40deg); transform-origin: left center; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes strike { from { transform: rotate(-1.5deg) scaleX(0); } to { transform: rotate(-1.5deg) scaleX(1); } }
  @keyframes flick { from { transform: rotate(-40deg) scale(0); } to { transform: rotate(-40deg) scale(1); } }
  @keyframes brrp { 0%, 100% { transform: none; } 25% { transform: translateX(2px); } 50% { transform: translateX(-2px); } 75% { transform: translateX(1px); } }
  .chores[data-armed] li:not(.struck) s::after, .chores[data-armed] li:not(.struck) s::before { transform: rotate(-1.5deg) scaleX(0); }
  .chores[data-armed] li:not(.struck) s::before { transform: rotate(-40deg) scale(0); }
  .chores li.struck s::after { animation: strike 0.35s ease-out both; }
  .chores li.struck s::before { animation: flick 0.15s ease-out 0.3s both; }
  .chores li.struck { animation: brrp 0.15s linear 0.32s 1; }
}

/* The pit crew line: an ink, slanted chyron in the right half on wide screens (the same sentence is already in the text beside it). */
.crew { display: none; margin: 0; }
@media (min-width: 60rem) {
  .dont-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 4rem; align-items: center; }
  .crew { display: block; justify-self: center; margin-top: 0; }
  .crew span { display: inline-block; padding: 0.625rem 2.25rem 0.625rem 1.5rem; background: var(--ink); color: var(--on-dark); font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; clip-path: polygon(0 0, 100% 0, calc(100% - 0.875rem) 100%, 0 100%); transform: rotate(-2deg); }
}

/* Industries: "Where's your 6:47 pm?" Real buttons (pennants) swap the owner's prop and place in the small Team Principal Cam beside them. */
.trades-grid { display: grid; gap: 2rem; align-items: center; }
.industries { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.pennant { display: flex; align-items: center; gap: 0.625rem; width: 100%; min-height: 3.25rem; padding: 0.625rem 2rem 0.625rem 0.875rem; background: var(--violet-tint); color: var(--ink); border: 0; font: inherit; font-size: 1.0625rem; font-weight: 650; text-align: left; cursor: pointer; clip-path: polygon(0 0, 100% 0, calc(100% - 1.25rem) 50%, 100% 100%, 0 100%); }
.pennant[aria-pressed="true"] { background: var(--violet); color: var(--on-dark); }
.pennant[aria-pressed="true"] .pennant-icon, .pennant[aria-pressed="true"] .where { color: var(--on-dark); }
.pennant:focus-visible { outline-offset: -3px; clip-path: none; }
.pennant-icon { flex: none; color: var(--violet); }
.pennant .where { margin-left: auto; font-weight: 500; color: var(--muted); font-size: 0.9em; }
.trade-cam { margin: 0; }
.trade-art { display: block; width: 100%; height: auto; max-width: 32rem; }
.trade-art .trade { display: none; }
.trade-cam[data-active="solar"] .trade[data-trade="solar"], .trade-cam[data-active="insurance"] .trade[data-trade="insurance"], .trade-cam[data-active="realestate"] .trade[data-trade="realestate"], .trade-cam[data-active="construction"] .trade[data-trade="construction"] { display: inline; }
.trade-where { margin-top: 0.5rem; font-weight: 650; color: var(--ink); }
@media (min-width: 60rem) { .trades-grid { grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); gap: 3rem; } }
@media (prefers-reduced-motion: no-preference) {
  @keyframes settle { from { transform: translateY(4px); } to { transform: none; } }
  .trade-cam.swapped .trade { animation: settle 0.2s ease-out both; }
}

/* 404: the clunker stuck in the gravel trap */
.trap-art { display: block; max-width: 100%; height: auto; margin: 2rem 0 0; }
.trap-art .trap-wobble { transform-box: fill-box; transform-origin: 50% 100%; }

@media (min-width: 60rem) {
  .day li { align-items: baseline; }
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes lamp-a { from { background-color: var(--off); transform: scale(0.7); } 55% { transform: scale(1.25); } to { background-color: var(--on); transform: none; } }
  @keyframes lamp-b { from { background-color: var(--off); transform: scale(0.7); } 55% { transform: scale(1.25); } to { background-color: var(--on); transform: none; } }
  .lights i { animation: lamp-a 0.5s ease-out both; }
  .lights i:nth-child(2) { animation-delay: 0.35s; }
  .lights i:nth-child(3) { animation-delay: 0.7s; }
  .btn:hover ~ .lights i, .btn:focus-visible ~ .lights i { animation-name: lamp-b; }

  @keyframes wobble { 0% { transform: rotate(0); } 25% { transform: rotate(2.5deg); } 55% { transform: rotate(-1.5deg); } 80% { transform: rotate(0.6deg); } 100% { transform: none; } }
  .trap-art .trap-wobble { animation: wobble 0.9s ease-out 0.3s 1; }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    @keyframes flip { from { transform: perspective(500px) rotateX(-90deg); } 70% { transform: perspective(500px) rotateX(3deg); } to { transform: none; } }
    .flap { transform-origin: 50% 0; animation: flip linear both; animation-timeline: view(); animation-range: entry 5% entry 60%; }
    .board tr:nth-child(2) .flap { animation-range: entry 15% entry 70%; }
    .board tr:nth-child(3) .flap { animation-range: entry 25% entry 80%; }
    @keyframes slam { from { transform: translateY(-14px) scale(1.15) skewX(-10deg); } 60% { transform: scaleY(0.85) scaleX(1.08) skewX(-10deg); } to { transform: skewX(-10deg); } }
    .stamp { animation: slam linear both; animation-timeline: view(); animation-range: entry 30% entry 100%; }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .stage canvas { display: none; }
  .btn { transition: none; }
}

/* Close: the empty seat with the handset hung back up, the trophy shelf and the owner back on the roof (an inline drawing beside the call to action). */
.closing-grid { display: grid; gap: 2rem; align-items: center; }
.close-art { display: block; width: 100%; height: auto; max-width: 46rem; }
@media (min-width: 60rem) { .closing-grid { grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); gap: 3rem; } }
.close-art .next { fill: none; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes next-pulse { 0%, 100% { stroke-width: 4; } 50% { stroke-width: 7; } }
  .closing.is-seen .close-art .next { animation: next-pulse 0.7s ease-in-out 2; }
}