/* Home worldflight. Tokens for the scrollcraft engine, then the page's own
   markup. Nothing here restyles .sc-stage, .sc-copy or any [data-sc-*]
   selector: those are the mechanism. */

:root {
  --sc-canvas: #070a10;
  --sc-surface: #0f141d;
  --sc-ink: #f3f5f7;
  --sc-ink-soft: #9aa4b3;
  --sc-accent: #d7ff3d;
  --sc-accent-ink: #0a0d12;
  --sc-font-display: "Archivo", system-ui, sans-serif;
  --sc-font-text: "Inter", system-ui, sans-serif;
  --sc-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sc-shadow-color: 220 40% 2%;
}

body { background: var(--sc-canvas); color: var(--sc-ink); }
/* Fixed, not sticky: sticky is still in document flow, and the continuous
   world allows nothing in flow but the spacer. */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 70; }

/* ---- copy blocks (page classes; the engine drives opacity/transform) ---- */
.copy {
  position: absolute; z-index: 20;
  max-width: min(34rem, 82vw);
  will-change: opacity, transform;
}
.copy--lead   { left: clamp(1.25rem, 5vw, 5.5rem); bottom: clamp(3rem, 11vh, 8rem); }
.copy--trail  { right: clamp(1.25rem, 5vw, 5.5rem); bottom: clamp(3rem, 11vh, 8rem); text-align: right; }
.copy--centre { left: 50%; bottom: clamp(3rem, 12vh, 9rem); translate: -50% 0; text-align: center; max-width: min(56rem, 90vw); width: 100%; }

/* Hero: dark ink over the bright morning sky, top-left. The one light
   chapter's copy is the one block on the page that carries dark ink. */
/* Sized to its content, not the frame: the harness grades the block's box,
   and a full-width box reaches the dark stand at the right edge. */
.copy--hero {
  left: clamp(1.25rem, 5vw, 5.5rem); right: auto;
  top: calc(var(--header-h) + clamp(1.5rem, 6vh, 4rem));
  bottom: auto; width: max-content; max-width: min(56rem, 88vw);
  color: #0b1220;
}
/* A second scrim that exists only on the last leg: --sc-seg is 6 there, so
   the opacity resolves to 1, and to 0 or less (clamped) everywhere before.
   Sibling of the copy, so the contrast pass measures it. */
/* The light chapter's scrim washes toward its own sky, it does not darken:
   a corner of density where the dark-ink hero sits, gone by the end of leg
   1 (opacity = (1 - seg) * (1 - segp), so it is only ever on leg 0). */
.scrim-hero {
  opacity: calc((1 - var(--sc-seg, 0)) * (1 - var(--sc-segp, 0)));
  background: linear-gradient(to bottom right,
    rgba(214, 220, 226, 0.92) 0%, rgba(214, 220, 226, 0.78) 34%,
    rgba(214, 220, 226, 0.35) 56%, rgba(214, 220, 226, 0) 74%);
}
.scrim-finale {
  opacity: calc(var(--sc-seg, 0) - 5);
  background:
    radial-gradient(70% 60% at 50% 78%, color-mix(in oklab, var(--sc-canvas) 88%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 55%, transparent) 55%, transparent 100%),
    linear-gradient(to top, color-mix(in oklab, var(--sc-canvas) 92%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 70%, transparent) 30%, color-mix(in oklab, var(--sc-canvas) 25%, transparent) 52%, transparent 66%);
}
/* Leg 1 is the light chapter. Its ground is light before the poster paints
   too, so the dark-ink hero never sits on midnight for a frame. */
.leg--kickoff { background: #cfd6dc; }
.hero-name {
  font-family: var(--sc-font-display); font-stretch: 125%; font-weight: 800;
  /* Sized so the longest word (nine characters, wide cut) fits the frame
     at every width: ~0.72em per character. */
  font-size: clamp(2.9rem, 8.4vw, 8rem); line-height: 0.88; letter-spacing: -0.04em;
  margin: 0 0 clamp(0.9rem, 2vw, 1.4rem); text-transform: uppercase;
  /* Break out of .copy--hero's max-content cap so the line mask clips to
     the actual ink width, not to the parent's max-width ceiling. */
  width: max-content;
}
/* The negative tracking is applied after the last glyph too, so a max-content
   box is one tracking unit narrower than the ink: the mask needs room on the
   right or the final letter loses its edge. */
.hero-name .line { display: block; overflow: hidden; padding: 0 0.42em 0.08em 0; margin-bottom: -0.08em; }
.hero-name .line__in { display: inline-block; transform: translate3d(0, 110%, 0); }
.sc-ready .hero-name.is-in .line__in { transition: transform 900ms var(--sc-ease-out); transform: none; }
.sc-ready .hero-name.is-in .line:nth-child(2) .line__in { transition-delay: 90ms; }
.hero-sub { font-weight: 700; font-size: clamp(0.95rem, 1.5vw, 1.15rem); letter-spacing: -0.01em; margin: 0 0 0.5rem; }
.hero-tag { font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.5; max-width: 40ch; margin: 0; color: #2a3446; }

/* Statement and quote, over the match: lead-anchored so the insert on the
   right of the frame stays clear. */
.statement {
  margin: 0; font-family: var(--sc-font-display); font-stretch: 112%; font-weight: 700;
  font-size: clamp(1.35rem, 2.4vw, 2.1rem); line-height: 1.15; letter-spacing: -0.025em;
  text-wrap: balance; max-width: 22ch;
}
.quote-w { margin: 0; }
.quote-w p {
  margin: 0 0 0.9rem; font-family: var(--sc-font-display); font-stretch: 112%; font-weight: 700;
  font-size: clamp(1.25rem, 2.2vw, 1.9rem); line-height: 1.18; letter-spacing: -0.02em;
  text-wrap: balance; max-width: 24ch;
}
.quote-w cite { font-style: normal; font-weight: 600; color: var(--sc-accent); font-size: 0.9rem; letter-spacing: 0.02em; }

/* Numbers */
.stats-w { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 3vw, 2.5rem) clamp(1rem, 4vw, 3rem); }
.stat-w__v {
  display: block; font-family: var(--sc-font-display); font-stretch: 125%; font-weight: 800;
  font-size: clamp(2.6rem, 7vw, 6rem); line-height: 1; letter-spacing: -0.045em; font-variant-numeric: tabular-nums;
}
.stat-w__u { font-size: 0.38em; font-weight: 700; color: var(--sc-ink-soft); margin-left: 0.15em; letter-spacing: 0; }
.stat-w__l { display: block; margin-top: 0.6rem; font-family: var(--sc-font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sc-ink-soft); }
.stats-w__asat { margin: 1.5rem 0 0; color: var(--sc-ink-soft); font-size: 0.85rem; }
@media (min-width: 900px) { .stats-w { grid-template-columns: repeat(4, 1fr); } }

/* Honours: one plate per photo leg, trail-anchored, tilts toward the pointer. */
.copy--honour { max-width: min(26rem, 82vw); }
.honour {
  display: inline-block; text-align: left;
  padding: clamp(1.1rem, 2.5vw, 1.6rem) clamp(1.2rem, 2.8vw, 1.8rem);
  background: color-mix(in oklab, var(--sc-surface) 93%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-radius: 14px; box-shadow: var(--sc-e2), var(--sc-edge);
}
.honour__label { margin: 0; font-family: var(--sc-font-display); font-stretch: 118%; font-weight: 800; font-size: clamp(1.3rem, 2.4vw, 1.9rem); line-height: 1.05; letter-spacing: -0.03em; color: var(--sc-accent); }
.honour__detail { margin: 0.6rem 0 0; font-size: 1rem; line-height: 1.45; color: var(--sc-ink); }
.honour__cap { margin: 0.9rem 0 0; font-family: var(--sc-font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-ink-soft); }

/* The road */
.road {
  list-style: none; margin: 0; padding: clamp(1rem, 2.5vw, 1.5rem) clamp(1.1rem, 2.8vw, 1.8rem); display: grid; gap: 0.9rem;
  background: color-mix(in oklab, var(--sc-surface) 93%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-radius: 14px; box-shadow: var(--sc-e2), var(--sc-edge);
}
.finale__small { margin: 2.5rem 0 0; font-size: 0.8rem; color: var(--sc-ink-soft); }
.finale__small a { color: inherit; }
.road li { display: grid; grid-template-columns: 4.2rem 1fr; gap: 1rem; align-items: baseline; border-top: 1px solid var(--sc-hairline); padding-top: 0.7rem; }
.road__year { font-family: var(--sc-font-display); font-stretch: 125%; font-weight: 800; font-size: 1.4rem; letter-spacing: -0.03em; color: var(--sc-accent); }
.road__item { font-weight: 600; font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.3; text-wrap: balance; }

/* Finale: it holds. */
.finale__h { margin: 0; font-family: var(--sc-font-display); font-stretch: 125%; font-weight: 800; font-size: clamp(2.4rem, 6.5vw, 5.5rem); line-height: 0.95; letter-spacing: -0.04em; text-wrap: balance; text-transform: uppercase; }
.finale__p { margin: 1.25rem auto 0; color: var(--sc-ink-soft); font-size: 1.05rem; max-width: 40ch; }
.finale__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.5rem; margin-top: 2rem; }
.finale__link { color: var(--sc-ink); font-weight: 600; text-decoration: none; opacity: 0.85; }
.finale__link:hover { opacity: 1; }
.button--gold { background: var(--sc-accent); color: var(--sc-accent-ink); }
.button:active { transform: translateY(1px); }

/* Grain that answers the hand: --vel is scroll speed, 0..1, from home.js */
.sc-grain { opacity: calc(0.045 + var(--vel, 0) * 0.12); }

/* ---- the chalk pitch ---- */
.pitch {
  position: fixed; left: clamp(1rem, 3vw, 2.5rem); bottom: clamp(1rem, 3vh, 2rem); z-index: 60;
  width: clamp(120px, 12vw, 168px);
}
.pitch svg { width: 100%; height: auto; display: block; overflow: visible; }
.pitch svg rect, .pitch svg line, .pitch svg circle:not(.pitch__marker) { fill: none; stroke: rgba(243,245,247,0.55); stroke-width: 0.9; vector-effect: non-scaling-stroke; }
.pitch__route { fill: none; stroke: var(--sc-accent); stroke-width: 1.2; stroke-dasharray: 2 2; opacity: 0.5; }
.pitch__marker { fill: var(--sc-accent); stroke: none; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6)); transition: cx 160ms linear, cy 160ms linear; }
.pitch__stops { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.pitch__stop {
  position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; padding: 0;
  border-radius: 50%; border: 1.5px solid rgba(243,245,247,0.7); background: transparent; cursor: pointer;
  transition: background 160ms var(--sc-ease-out), transform 160ms var(--sc-ease-out);
}
.pitch__stop:hover { transform: scale(1.25); }
.pitch__stop.is-passed { background: var(--sc-accent); border-color: var(--sc-accent); }
.pitch__stop[aria-current="true"] { box-shadow: 0 0 0 4px color-mix(in oklab, var(--sc-accent) 35%, transparent); }
.pitch__stop:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
@media (max-width: 860px) {
  /* On a phone the match clip is full-bleed daylight, so the statement and
     the quote take a plate of their own rather than relying on the band. */
  .copy--statement, .copy--quote {
    padding: 1rem 1.1rem; border-radius: 14px;
    background: color-mix(in oklab, var(--sc-surface) 84%, transparent);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: var(--sc-e2), var(--sc-edge);
  }
  .pitch { left: auto; right: 0.9rem; bottom: auto; top: calc(var(--header-h) + 0.75rem); width: 96px; }
  .copy--hero { max-width: 92vw; }
  /* Nine wide-cut characters run ~7.7em; keep that inside the gutters on
     any phone width rather than trusting the desktop floor. */
  .hero-name { font-size: min(11.4vw, 2.9rem); }
  .copy--trail { text-align: left; right: auto; left: clamp(1.25rem, 5vw, 5.5rem); }
  .copy--centre { max-width: 92vw; }
}

/* Reduced motion: the engine drops transforms and never fetches clips; the
   name is simply present. */
@media (prefers-reduced-motion: reduce) {
  .hero-name .line__in { transform: none; }
}