/* ============================================================
   LEONARDO FERNÁNDEZ ROJAS — official site
   Design DNA: charlesleclerc.com (extracted via /taste)
   paper/ink inversion · hairlines · zero shadows · notched corners
   ============================================================ */

/* Kallisto Bold Italic — licensed display face held for the section
   phrases. Falls back to the condensed display stack while unused. */
@font-face {
  font-family: "Kallisto";
  src: url("../fonts/Kallisto-BoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Supertalls — free-for-personal-use display face (Darrell Flood),
   used only for the home title. */
@font-face {
  font-family: "Supertalls";
  src: url("../fonts/Supertalls.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* palette (from design DNA) */
  --ink: #000016;          /* blue-cast near-black — bg AND text */
  --paper: #f1f1f1;        /* off-white — bg AND text (dual-role) */
  --panel-dark: #1a1a26;
  --panel-light: #e3e3e3;
  --accent: #e4032e;       /* rosso — ONE element per screen */
  --muted: #6f6f6f;

  /* type */
  --font-display: "Anton", "Arial Narrow", Impact, sans-serif;
  --font-sans: "Manrope", system-ui, -apple-system, sans-serif;
  --font-kallisto: "Kallisto", var(--font-display);

  /* spacing (4px base) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s7: 28px; --s8: 32px; --s9: 40px; --s10: 52px;

  /* motion (from design DNA) */
  --ease-color: cubic-bezier(0, 0, 0.2, 1);
  --ease-move: cubic-bezier(0.645, 0.045, 0.355, 1);
  --t-color: 0.5s var(--ease-color);
  --t-move: 0.7s var(--ease-move);
  --t-scene: 0.7s var(--ease-move);

  --frame: 12px;           /* inset paper frame around full-bleed media */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  overflow: hidden;        /* fixed-viewport scroll-jack */
  overscroll-behavior: none;
}

body {
  font-family: var(--font-sans);
  background: var(--paper);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent); color: var(--paper); }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.skip-link {
  position: fixed; top: -100px; left: 24px; z-index: 10000;
  background: var(--ink); color: var(--paper);
  padding: 8px 12px; border-radius: 5px; font-size: 12px; font-weight: 700;
}
.skip-link:focus { top: 16px; }

/* ---------- scene theming ---------- */
.scene--dark  { --bg: var(--ink);   --fg: var(--paper); --panel: var(--panel-dark); --hairline: rgba(241,241,241,0.28); --mutedc: rgba(241,241,241,0.55); }
.scene--light { --bg: var(--paper); --fg: var(--ink);   --panel: var(--panel-light); --hairline: rgba(0,0,22,0.9);    --mutedc: var(--muted); }

/* ---------- skewed grid-paper texture (the "drafted sheet") ---------- */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 9990; pointer-events: none;
  background-image:
    repeating-linear-gradient(12deg,  var(--tex) 0 1px, transparent 1px 92px),
    repeating-linear-gradient(102deg, var(--tex) 0 1px, transparent 1px 92px);
  --tex: rgba(0,0,22,0.045);
}
body[data-theme="dark"]::after { --tex: rgba(241,241,241,0.05); }

/* ============================================================
   ENGINE — fixed viewport, sliding scenes
   ============================================================ */
/* ---------- the space the camera flies across ----------
   Ink + the grid-paper texture, drifting at a fraction of the camera
   motion so sections read as sheets flying over a continuous sheet. */
.board__space {
  position: fixed; inset: 0; z-index: 1;
  background-color: var(--ink);
  background-image:
    repeating-linear-gradient(12deg,   var(--tex) 0 1px, transparent 1px 92px),
    repeating-linear-gradient(102deg,  var(--tex) 0 1px, transparent 1px 92px);
  --tex: rgba(241, 241, 241, 0.07);
  will-change: transform;
}

.scenes {
  position: fixed; inset: 0; z-index: 2;
  transform-origin: 0 0;          /* camera maths works from the corner */
  will-change: transform;
  backface-visibility: hidden;
}

/* Each section is a sheet pinned to the board's virtual canvas.
   --cx/--cy = its position on that canvas in viewport units.
   --fs = 1 / camera-scale, so the camera resting on a section
   renders it at exactly 1:1 — pixel-identical to a full-bleed sheet. */
.scene {
  position: absolute; left: 50%; top: 50%;
  width: 100vw; height: 100vh;
  padding: 96px 52px 40px;
  visibility: hidden;
  overflow: hidden;
  transform:
    translate(-50%, -50%)
    translate(var(--cx, 0vw), var(--cy, 0vh))
    scale(var(--fs, 1));
  will-change: transform;
}

/* a sheet being flown away from dissolves into the ink instead of painting
   a hard, shrinking rectangle of page over the board */
.scene.is-departing {
  opacity: 0;
  transition: opacity 0.5s var(--ease-color) 0.04s;
}
.scene.is-visible { visibility: visible; }

.scene--dark  { background: var(--bg); color: var(--fg); }
.scene--light { background: var(--bg); color: var(--fg); }

/* ---------- shared micro-language ---------- */
.micro-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg);
}
.micro-label--paper { color: var(--fg); }
.dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }

.hairline { height: 1px; background: var(--fg); opacity: 0.9; }

.display {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: 0.01em;
}
.display--md { font-size: clamp(44px, 6.5vw, 96px); }
.display--lg { font-size: clamp(56px, 9vw, 132px); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.48px; text-transform: uppercase;
  padding: 12px 16px; border-radius: 5px;
  transition: background-color var(--t-color), color var(--t-color), border-color var(--t-color), transform 0.5s var(--ease-color);
}
.btn__arrow { transition: transform 0.5s var(--ease-color); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--solid  { background: var(--fg); color: var(--bg); }
.btn--solid:hover { background: var(--accent); color: var(--paper); }
.btn--line   { border: 1px solid var(--fg); background: transparent; color: var(--fg); }
.btn--line:hover { background: var(--fg); color: var(--bg); }
.btn--accent { background: var(--accent); color: var(--paper); }
.btn--accent:hover { background: var(--fg); color: var(--bg); }
.btn--small  { padding: 8px 12px; font-size: 10px; }

.cta-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }

/* ============================================================
   TOPBAR
   ============================================================ */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 0 52px;
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }

.logo { display: block; }
/* The mark is the whole button: no plate behind it, the crest sits straight on
   the page in both themes. The box only reserves the mark's footprint, so the
   topbar spacing is identical to the old card. */
.logo__card {
  display: block;
  width: 56px; height: 56px;
  padding: 6px;
}

.logo__crest { display: block; width: 100%; height: auto; }

/* The art is near-black on transparency, so a bare crest would lose its lion
   body on the dark scenes. Those get the reverse lockup — the standard
   dark-ground variant, baked as a second asset so the gold stays bit-identical
   to the brand art instead of being shifted by a filter. Only one is ever
   displayed; both are decorative, the link carries the accessible name. */
.logo__crest--on-dark { display: none; }
body[data-theme="dark"] .logo__crest--on-light { display: none; }
body[data-theme="dark"] .logo__crest--on-dark { display: block; }

.topbar__right { display: flex; align-items: center; gap: 24px; padding-top: 22px; }

.chapters-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--bar-fg);
  transition: color var(--t-color);
}
body[data-theme="dark"] .topbar { --bar-fg: var(--paper); }
body[data-theme="light"] .topbar { --bar-fg: var(--ink); }
/* The chapter overlay is always ink, whatever scene is behind it — so while
   it is open the topbar (and its close glyph) must use the dark palette,
   or ink-on-ink makes the close button disappear over light scenes. */
body.menu-open .topbar { --bar-fg: var(--paper); }
body.menu-open .logo__crest--on-light { display: none; }
body.menu-open .logo__crest--on-dark { display: block; }
.chapters-btn .chev { transition: transform 0.5s var(--ease-color); }
.chapters-btn:hover .chev { transform: translateY(2px); }

.burger {
  display: inline-flex; flex-direction: column; gap: 7px; padding: 8px 2px;
}
.burger span {
  display: block; width: 34px; height: 2px; background: var(--bar-fg);
  transition: transform 0.5s var(--ease-move), opacity var(--t-color), background-color var(--t-color);
}
.menu-open .burger span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.menu-open .burger span:nth-child(2) { transform: translateY(-4.5px) rotate(-45deg); }

/* ============================================================
   MENU OVERLAY
   ============================================================ */
.menu {
  position: fixed; inset: 0; z-index: 80;
  background: var(--ink); color: var(--paper);
  opacity: 0; visibility: hidden;
  transition: opacity 0.5s var(--ease-color), visibility 0s linear 0.5s;
}
.menu.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }

.menu__inner {
  height: 100%; padding: 120px 52px 40px;
  display: flex; flex-direction: column; justify-content: space-between;
  max-width: 1080px; margin: 0 auto;
}
.menu__chapters { list-style: none; display: flex; flex-direction: column; }
.menu__chapters button {
  display: flex; align-items: baseline; gap: 18px; width: 100%;
  padding: 6px 0;
  border-bottom: 1px solid rgba(241,241,241,0.18);
  transform: translateY(14px); opacity: 0;
  transition: transform var(--t-move), opacity 0.5s var(--ease-color);
}
.menu.is-open .menu__chapters button { transform: translateY(0); opacity: 1; }
.menu__chapters li:nth-child(1) button { transition-delay: 0.05s; }
.menu__chapters li:nth-child(2) button { transition-delay: 0.1s; }
.menu__chapters li:nth-child(3) button { transition-delay: 0.15s; }
.menu__chapters li:nth-child(4) button { transition-delay: 0.2s; }
.menu__chapters li:nth-child(5) button { transition-delay: 0.25s; }
.menu__chapters li:nth-child(6) button { transition-delay: 0.3s; }
.menu__chapters li:nth-child(7) button { transition-delay: 0.35s; }

.menu__num { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; color: var(--accent); width: 28px; }
.menu__label {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(28px, 4.6vw, 52px); line-height: 1.05;
  transition: color var(--t-color), letter-spacing 0.5s var(--ease-color);
}
.menu__chapters button:hover .menu__label { color: var(--accent); }

.menu__foot {
  display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap;
  padding-top: 24px; border-top: 1px solid rgba(241,241,241,0.25);
}
.menu__social { display: flex; gap: 20px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; }
.menu__social a { color: rgba(241,241,241,0.7); transition: color var(--t-color); }
.menu__social a:hover { color: var(--paper); }

.lang-btn { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; opacity: 0.45; transition: opacity var(--t-color), color var(--t-color); }
.lang-btn.is-active { opacity: 1; }
.menu__lang, .contact-row__lang { display: flex; align-items: center; gap: 8px; color: inherit; }

/* ============================================================
   SCENE 01 — HOME (video hero)
   ============================================================ */
.scene--home { padding: 0; }
.home-media {
  position: absolute; inset: var(--frame);
  overflow: hidden; background: var(--panel-dark);
}
.home-media__video { width: 100%; height: 100%; object-fit: cover; }
.home-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,22,0.25), rgba(0,0,22,0) 30%, rgba(0,0,22,0.35) 88%);
}

.home-hero {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--paper); text-align: center; z-index: 5;
}
.home-hero__label { justify-content: center; margin-bottom: 12px; color: var(--paper); }
.home-hero__title {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700; text-transform: uppercase;
  font-size: clamp(45px, 14.5vw, 220px);
  line-height: 0.95; letter-spacing: 0.01em; text-align: center; white-space: nowrap;
}
.home-hero__title .line { display: block; overflow: hidden; }
.home-hero__title .line > span { display: inline-block; transform: translateY(110%); transition: transform var(--t-move); }
.scene--home.is-in .home-hero__title .line:nth-child(1) > span { transform: translateY(0); transition-delay: 0.15s; }
.scene--home.is-in .home-hero__title .line:nth-child(2) > span { transform: translateY(0); transition-delay: 0.22s; }

.scroll-cue {
  position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  color: var(--paper);
}
.scroll-cue__text { font-size: 10px; font-weight: 700; letter-spacing: 0.16em; }
.scroll-cue__line { width: 1px; height: 72px; background: var(--paper); transform-origin: top; animation: cue 2.2s var(--ease-move) infinite; }
@keyframes cue { 0% { transform: scaleY(0); transform-origin: top; } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

.corner-tag {
  position: absolute; right: var(--frame); bottom: var(--frame); z-index: 30;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent); color: var(--paper);
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 14px 18px;
  border-radius: 8px 0 8px 8px;
  transition: background-color var(--t-color), color var(--t-color);
}
.corner-tag:hover { background: var(--paper); color: var(--ink); }

/* ============================================================
   SCENE 02 — BIOGRAPHY / THE RUNNER
   Photo rail + first-person story + dossier stack
   ============================================================ */
.scene--bio { display: grid; grid-template-rows: auto 1fr; gap: 20px; }

.runner-head__label { display: grid; grid-template-columns: 220px 1fr; gap: 0; align-items: center; }
.runner-head__label .hairline { grid-column: 1 / -1; margin-bottom: 14px; }

.bio-grid {
  display: grid; grid-template-columns: 372px 1fr 316px; gap: 32px;
  align-items: stretch; min-height: 0;
}

/* ---- photo rail (carousel) ---- */
.bio-carousel { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.bio-carousel__frame {
  position: relative; flex: 1; min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(0,0,22,0.5);
  border-radius: 0 8px 0 0;
  background: var(--panel-light);
}
.bio-carousel__frame img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0;
  transition: opacity 0.7s var(--ease-move);
}
.bio-carousel__frame img.is-on { opacity: 1; }
.bio-carousel__bar {
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid rgba(0,0,22,0.5); padding-top: 12px;
}
.bio-carousel__btn {
  width: 40px; height: 34px; display: grid; place-items: center;
  background: transparent; border: 1px solid rgba(0,0,22,0.35);
  border-radius: 4px; color: var(--ink); cursor: pointer;
  transition: border-color var(--t-color), color var(--t-color);
}
.bio-carousel__btn:hover { border-color: var(--ink); color: var(--accent); }
.bio-carousel__count { font-family: var(--font-display); font-size: 30px; line-height: 1; letter-spacing: 0.04em; }
.bio-carousel__idx { color: var(--accent); }
.bio-carousel__total { color: rgba(0,0,22,0.4); font-size: 17px; }

/* ---- story column ---- */
.bio-story {
  overflow-y: auto; min-height: 0;
  padding-right: 24px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,22,0.3) transparent;
}
.bio-story::-webkit-scrollbar { width: 4px; }
.bio-story::-webkit-scrollbar-thumb { background: rgba(0,0,22,0.3); border-radius: 2px; }
.bio-story__lead {
  font-size: clamp(18px, 1.55vw, 21px); font-weight: 500;
  line-height: 1.4; letter-spacing: -0.005em;
  color: var(--ink); margin-bottom: 16px;
}
.bio-story p:not(.bio-story__lead) {
  font-size: 15px; line-height: 1.55;
  color: rgba(0,0,22,0.76); margin-bottom: 14px;
}
.bio-values { margin: 4px 0 16px; }
.bio-value { padding: 10px 0; border-top: 1px solid rgba(0,0,22,0.35); }
.bio-value:last-child { border-bottom: 1px solid rgba(0,0,22,0.35); }
.bio-value dt { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); }
.bio-value dd { font-size: 13.5px; line-height: 1.5; color: rgba(0,0,22,0.72); margin-top: 4px; }

/* ---- dossier stack (right column) ---- */
.dossier--stack { display: flex; flex-direction: column; gap: 20px; min-height: 0; }
.dossier--stack .dossier-card { transform: none; }

/* folder-tab card */
.dossier-card {
  position: relative;
  background: var(--panel-light);
  color: var(--ink);
  padding: 40px 20px 20px;
  border-radius: 0 8px 0 0;
  align-self: start;
}

.dossier-card__tab {
  position: absolute; top: -17px; left: 0;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--panel-light);
  padding: 7px 14px;
  border-radius: 4px 8px 0 0;
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}
.dossier-card__tab .dot { background: var(--ink); }

.rows { display: block; }
.row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 10px 0;
  border-top: 1px solid rgba(0,0,22,0.85);
}
.row:first-child { border-top-width: 1px; }
.row dt { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.row dd { font-size: 13px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; text-align: right; }
.row__num {
  font-family: var(--font-display); text-transform: none;
  font-size: 44px; line-height: 1; letter-spacing: 0.01em;
}
.rows--stat .row { padding: 6px 0 10px; }

.dossier-card--team .cta-row { margin-top: 20px; flex-wrap: wrap; gap: 10px; }

/* ============================================================
   SCENE 03 — COMPETITIONS (dark board)
   ============================================================ */
.scene--comp { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 52px; align-content: start; }

.comp-media { position: absolute; inset: 0; }
.comp-media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.28; }
.comp-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--ink) 8%, rgba(0,0,22,0.55) 60%, rgba(0,0,22,0.2)); }
.scene--comp > :not(.comp-media) { position: relative; z-index: 2; }

.comp-head { padding-top: 12px; }
.comp-head .micro-label { color: var(--paper); margin-bottom: 10px; }

.comp-next { margin-top: 24px; max-width: 560px; }
.comp-next .micro-label { color: var(--mutedc); }
.comp-next__line {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 10px; padding: 14px 0;
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
}
.comp-next__name { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(24px, 2.6vw, 40px); line-height: 1; }
.comp-next__meta { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: var(--mutedc); }

.comp-table { margin-top: 20px; }
.comp-row {
  display: grid; grid-template-columns: 56px 1fr 90px 90px 110px;
  align-items: baseline; gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.comp-row__place {
  font-family: var(--font-display); font-size: 34px; line-height: 1; letter-spacing: 0;
  color: var(--paper);
}
.comp-row:nth-child(1) .comp-row__place { color: var(--accent); }
.comp-row__event, .comp-row__mark { text-align: right; }
.comp-row__flag { font-size: 9px; letter-spacing: 0.14em; color: var(--mutedc); text-align: right; }

/* ============================================================
   SCENE 04 — TRAINING / PREPARATION
   ============================================================ */
.scene--train {
  display: grid; grid-template-columns: 1fr;
  grid-template-rows: auto minmax(360px, 1fr) auto;
  gap: 12px; padding-bottom: 12px;
}
.train-head {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(260px, 0.7fr);
  grid-template-rows: auto auto; align-items: end; column-gap: 40px;
}
.train-head .micro-label { grid-column: 1 / -1; margin-bottom: 8px; }
.train-head .display { grid-column: 1; font-size: clamp(42px, 6vw, 82px); }
.train-copy { grid-column: 2; grid-row: 2; justify-self: end; margin-top: 0; max-width: 430px; font-size: 14px; color: var(--muted); }
.scene--dark .train-copy { color: var(--mutedc); }

.train-fan {
  position: relative; min-width: 0; min-height: 0; width: 100%; height: 100%;
  overflow: hidden; isolation: isolate;
}
.train-card {
  position: absolute; left: 50%; top: 50%; z-index: var(--fan-z, 1);
  height: min(100%, 74vh, 588px); aspect-ratio: 9 / 16;
  overflow: hidden; border: 1px solid rgba(0,0,22,0.55);
  border-radius: clamp(24px, 3.2vw, 48px); background: var(--ink);
  opacity: 0; transform: translate(-50%, -50%) translateY(20px) scale(0.76);
  transition: transform 0.9s var(--ease-move), opacity 0.55s var(--ease-color);
  transition-delay: var(--fan-delay, 0s);
  backface-visibility: hidden;
}
.scene--train.is-in .train-card {
  opacity: 1;
  transform: translate(calc(-50% + var(--fan-x, 0px)), calc(-50% + var(--fan-y, 0px)))
    rotate(var(--fan-rot, 0deg)) scale(var(--fan-scale, 1));
}
.train-card video { width: 100%; height: 100%; object-fit: cover; background: var(--ink); }
.train-card__select {
  position: absolute; inset: 0; z-index: 1; display: grid; place-items: center;
  color: var(--paper); background: transparent; cursor: pointer;
}
.train-card.is-selected .train-card__select { inset: auto; left: 50%; top: 50%; width: 64px; height: 64px; transform: translate(-50%, -50%); }
.train-card__select::before {
  content: ""; grid-area: 1 / 1; width: 54px; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(241,241,241,0.8); background: rgba(0,0,22,0.3); opacity: 0; transition: opacity var(--t-color);
}
.train-card__select::after {
  content: ""; grid-area: 1 / 1; width: 0; height: 0; margin-left: 4px;
  border-top: 7px solid transparent; border-bottom: 7px solid transparent;
  border-left: 10px solid var(--paper); opacity: 0; transition: opacity var(--t-color);
}
.train-card:hover .train-card__select::before,
.train-card:hover .train-card__select::after,
.train-card:focus-within .train-card__select::before,
.train-card:focus-within .train-card__select::after { opacity: 1; }
.train-card.has-controls .train-card__select { pointer-events: none; }
.train-card.has-controls .train-card__select::before,
.train-card.has-controls .train-card__select::after { opacity: 0; }

.train-card[data-slot="0"] { --fan-x: 0px; --fan-y: 0px; --fan-rot: 0deg; --fan-scale: 1; --fan-z: 10; }
.train-card[data-slot="1"] { --fan-x: clamp(96px, 11.3vw, 162px); --fan-y: 8px; --fan-rot: 7deg; --fan-scale: 0.935; --fan-z: 8; }
.train-card[data-slot="-1"] { --fan-x: clamp(-162px, -11.3vw, -96px); --fan-y: 8px; --fan-rot: -7deg; --fan-scale: 0.935; --fan-z: 8; }
.train-card[data-slot="2"] { --fan-x: clamp(176px, 21.5vw, 308px); --fan-y: 20px; --fan-rot: 14deg; --fan-scale: 0.85; --fan-z: 6; }
.train-card[data-slot="-2"] { --fan-x: clamp(-308px, -21.5vw, -176px); --fan-y: 20px; --fan-rot: -14deg; --fan-scale: 0.85; --fan-z: 6; }
.train-card[data-slot="3"] { --fan-x: clamp(244px, 30vw, 430px); --fan-y: 36px; --fan-rot: 21deg; --fan-scale: 0.775; --fan-z: 4; }
.train-card[data-slot="-3"] { --fan-x: clamp(-430px, -30vw, -244px); --fan-y: 36px; --fan-rot: -21deg; --fan-scale: 0.775; --fan-z: 4; }
.train-card[data-slot="4"] { --fan-x: clamp(310px, 38.5vw, 552px); --fan-y: 56px; --fan-rot: 28deg; --fan-scale: 0.70; --fan-z: 2; }
.train-card[data-slot="-4"] { --fan-x: clamp(-552px, -38.5vw, -310px); --fan-y: 56px; --fan-rot: -28deg; --fan-scale: 0.70; --fan-z: 2; }
.train-card:focus-within { z-index: 12; }

.cta-row--train { grid-column: 1 / -1; margin-top: 0; }

/* ============================================================
   SCENE 05 — NEWS + INSTAGRAM
   ============================================================ */
/* The news sheet carries two article cards plus a full-width telemetry band and
   can outgrow a fixed 100vh sheet — driven by WIDTH (at <=1100px the Instagram
   card wraps to its own row) as much as by height, so no single media query
   covers it. Instead the sheet is always scrollable: when the content fits,
   scrollHeight === clientHeight, scrollZoneHasRoom() returns false and nothing
   changes; when it does not, the sheet scrolls and the scene only advances at
   its edge. Without this the overflow is silently clipped — and because the
   grid is centred, off the TOP as well as the bottom, hiding the World
   Athletics CTA under the topbar with no scrollbar. `hidden auto` rather than
   `overflow-y` alone, which would promote overflow-x to auto and add a gutter. */
.scene--news { display: grid; grid-template-rows: auto 1fr; gap: 32px; overflow: hidden auto; }

.news-head .micro-label { margin-bottom: 10px; }
/* provenance — the feed is refreshed by a script, so say where it came from
   and when, rather than letting "LATEST" imply a live wire */
.news-head__src {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: 10px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
}
.news-head__sep { opacity: 0.6; }

.news-grid { display: grid; grid-template-columns: 1fr 1fr 0.9fr; gap: 24px 28px; align-items: start; align-self: center; }
/* Feed unreadable: both slots hold the same notice, so keep one and let it
   span the two article columns (the Instagram card keeps its own). */
.news-grid.is-offline [data-news-slot="1"] { display: none; }
.news-grid.is-offline [data-news-slot="0"] { grid-column: span 2; }

.news-card {
  background: var(--panel-light); color: var(--ink);
  --card-pad: 20px;              /* the media slot bleeds against this */
  padding: var(--card-pad);
  border-radius: 0 8px 0 0;
  /* a floor, not a height — on short viewports the fixed 340px used to be
     what pushed the row past the sheet and clipped it */
  min-height: clamp(230px, 31vh, 340px);
  display: flex; flex-direction: column;
}
/* Article thumbnail. Small and fixed-height so the card keeps its shape
   whether or not the picture arrives; `object-fit` absorbs the difference
   between the 2.8:1 source and the wider box. Hidden until app.js has a src,
   so a failed image leaves a card, never a hole. */
.news-card__media {
  /* bleed to the card edge by cancelling the padding it sits inside */
  margin: calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) 16px;
  overflow: hidden;
  border-radius: 0 8px 0 0;      /* match the card's notch */
}
.news-card__media[hidden] { display: none; }
.news-card__media img { display: block; width: 100%; height: 112px; object-fit: cover; object-position: center; background: var(--panel-dark); }
.news-card__date { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; color: var(--muted); padding-bottom: 12px; border-bottom: 1px solid rgba(0,0,22,0.5); }
.news-card__title {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  /* 24px bucket: the 24–46px middle of the scale is banned, and with an
     excerpt under it this is the correct hierarchy anyway */
  font-size: clamp(20px, 1.6vw, 24px); line-height: 1.02; letter-spacing: 0.01em;
  margin: 14px 0 10px;
}
.news-card__excerpt {
  font-size: 15px; font-weight: 400; line-height: 1.5;
  color: var(--muted);
  margin: 0 0 auto;
  /* clamp so one long feed summary cannot blow the card open */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-card__more { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-top: 18px; align-self: flex-start; border-bottom: 1px solid var(--ink); padding-bottom: 2px; transition: color var(--t-color), border-color var(--t-color); }
.news-card:hover .news-card__more { color: var(--accent); border-color: var(--accent); }

/* --- World Athletics profile & ranking — full-width telemetry band --- */
.wa-strip {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(180px, 1.05fr) 3fr auto;
  align-items: center;
  column-gap: clamp(16px, 2vw, 32px);
  padding: clamp(12px, 1.3vw, 18px) clamp(16px, 1.8vw, 24px);
  background: var(--panel-light); color: var(--ink);
  border-radius: 0 8px 0 0;
  border-top: 1px solid var(--hairline);
}
.wa-strip__name { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(18px, 1.6vw, 26px); line-height: 1; margin-top: 6px; }
/* Ink, not accent: the section rail's active dot is already this scene's one
   red element, and the house rule is one accent per screen. The badge reads as
   a stamp by being ink against the muted labels above it, not by being red. */
.wa-strip__badge { margin-top: 8px; font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }

.wa-strip__stats { display: grid; grid-template-columns: repeat(5, 1fr); margin: 0; }
.wa-cell { padding: 0 clamp(8px, 0.9vw, 16px); border-left: 1px solid rgba(0,0,22,0.14); }
.wa-cell:first-child { border-left: 0; padding-left: 0; }
.wa-cell dt { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.wa-cell dd { font-family: var(--font-display); font-size: clamp(22px, 2.2vw, 30px); line-height: 1.05; margin-top: 6px; }
.wa-cell__unit { display: block; margin-top: 4px; font-family: var(--font-sans); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
/* an unconfirmed figure must never read as a number */
.wa-cell .wa-cell__tbd { font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

.wa-strip__cta { display: flex; justify-content: flex-end; }
.wa-strip__cta .btn { text-align: left; white-space: normal; max-width: 260px; }

.ig-card {
  background: var(--panel-dark); color: var(--paper);
  border-radius: 0 8px 8px 8px;
  overflow: hidden;
  display: grid; grid-template-columns: 132px 1fr; gap: 14px;
  padding: 14px;
  transform: translateY(26px);
}
.ig-card__media { aspect-ratio: 9 / 16; overflow: hidden; border-radius: 5px; }
.ig-card__media video { width: 100%; height: 100%; object-fit: cover; }
.ig-card__handle { font-family: var(--font-display); text-transform: uppercase; font-size: 20px; margin: 8px 0 14px; }

/* ============================================================
   SCENE 06 — SPONSORSHIP (dark)
   ============================================================ */
.scene--sponsor { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 52px; align-content: center; }

.sponsor-head .micro-label { margin-bottom: 10px; }
.sponsor-copy { margin-top: 18px; max-width: 460px; color: var(--mutedc); }

.sponsor-rows { display: block; }
.sponsor-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--hairline);
}
.sponsor-row__cat { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mutedc); }
.sponsor-row__name {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(20px, 2.2vw, 32px); line-height: 1;
  transition: color var(--t-color);
}
.sponsor-row:hover .sponsor-row__name { color: var(--accent); }

.scene--sponsor .cta-row { margin-top: 28px; }

/* ============================================================
   SCENE 07 — CONTACTS (footer)
   ============================================================ */
.scene--contact { display: grid; grid-template-rows: auto 1fr auto; gap: 28px; padding-bottom: 76px; }

.contact-head .micro-label--paper { color: var(--mutedc); margin-bottom: 8px; }

.contact-rows { align-self: center; max-width: 900px; }
.contact-row {
  display: grid; grid-template-columns: 180px 1fr; gap: 20px;
  padding: 16px 0;
  border-top: 1px solid var(--hairline);
  align-items: baseline;
}
.contact-row dt { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mutedc); }
.contact-row dd { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.contact-row dd a { border-bottom: 1px solid transparent; transition: color var(--t-color), border-color var(--t-color); }
.contact-row dd a:hover { color: var(--accent); border-color: var(--accent); }
.contact-row--social dd { display: flex; gap: 22px; flex-wrap: wrap; }

.legal {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding-top: 16px; border-top: 1px solid var(--hairline);
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em; color: var(--mutedc);
}

/* ============================================================
   FURNITURE — dots + counter
   ============================================================ */
.dots {
  position: fixed; right: 22px; top: 50%; transform: translateY(-50%);
  z-index: 70; display: flex; flex-direction: column; gap: 10px;
}
.dots button {
  width: 18px; height: 2px; padding: 6px 0; background: none;
  position: relative;
}
.dots button::after {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 18px; height: 2px; background: var(--dot, var(--ink));
  opacity: 0.3; transition: width var(--t-color), opacity var(--t-color), background-color var(--t-color);
}
.dots button.is-active::after { width: 28px; opacity: 1; background: var(--accent); }
body[data-theme="dark"] .dots { --dot: var(--paper); }

.counter {
  position: fixed; left: 52px; bottom: 26px; z-index: 70;
  display: flex; gap: 8px; align-items: baseline;
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em;
  color: var(--counter, var(--ink));
  transition: color var(--t-color);
}
body[data-theme="dark"] .counter { --counter: var(--paper); }
.counter__name { opacity: 0.5; margin-left: 8px; }

/* ============================================================
   REVEAL choreography
   ============================================================ */
[data-reveal] {
  opacity: 0; transform: translateY(22px);
  transition: opacity 0.6s var(--ease-color), transform 0.7s var(--ease-move);
  transition-delay: var(--d, 0s);
}
.scene.is-in [data-reveal] { opacity: 1; transform: translateY(0); }

/* ============================================================
   SPLASH — Lion Forge intro
   A paper sheet is printed by a single hairline pass, then splits
   down the centre to reveal the site. Sits above every fixed element
   (topbar 90, menu 80) but below the grid-paper texture (9990), so
   the sheet carries the same grain as every other one on the site.
   ============================================================ */
.splash {
  /* the mark's width; every other dimension derives from it */
  --lock-w: clamp(160px, min(26vw, 40vh), 380px);
  position: fixed; inset: 0; z-index: 9980;
  overflow: hidden;
}

.splash__panel {
  position: absolute; top: 0; height: 100%;
  overflow: hidden;
  background: var(--paper);
  will-change: transform;
  transition: transform 0.80s var(--ease-move);
}
/* 1px overlap so subpixel rounding can never open a seam down the centre */
.splash__panel--l { left: 0; width: calc(50% + 1px); }
.splash__panel--r { left: 50%; width: 50%; }
.splash.is-done .splash__panel--l { transform: translateX(-100%); }
.splash.is-done .splash__panel--r { transform: translateX(100%); }

/* each stage is a full-viewport sheet clipped by its own half, so the lockup
   lines up across the seam and parts exactly down its centre line */
.splash__stage {
  position: absolute; top: 0; left: 0;
  width: 100vw; height: 100vh;
  display: flex; align-items: center; justify-content: center;
}
.splash__panel--r .splash__stage { left: -50vw; }

/* held invisible until the art is decoded, so the scan never sweeps an
   empty box and the finished lockup never flashes before the intro */
.splash__lockup { display: flex; flex-direction: column; align-items: center; visibility: hidden; }
.splash.is-go .splash__lockup { visibility: visible; }

/* the art's own mark-to-wordmark gap: 52px at 1523px wide */
.splash__markwrap {
  position: relative; overflow: hidden;
  margin-bottom: calc(var(--lock-w) * 0.0341);
}
.splash__mark { display: block; width: var(--lock-w); height: auto; }
.splash__wordmark { display: block; width: calc(var(--lock-w) * 0.941); height: auto; }

.splash__rule {
  display: block; margin-top: calc(var(--lock-w) * 0.055);
  width: calc(var(--lock-w) * 0.941); height: 1px;
  background: var(--ink);
  transform-origin: center;
}

/* the printing pass: a hairline travelling down the mark, with the reveal
   clipped to the same duration and easing so the two stay welded together */
.splash__scan {
  position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: var(--ink); opacity: 0;
}

/* Base state of every animated part is its FINISHED appearance — the
   animations only add the entrance, so a zeroed duration (reduced motion)
   lands on a complete lockup rather than a blank sheet. */
.splash.is-go .splash__mark { animation: splash-mark 0.62s var(--ease-move) 0.08s both; }
.splash.is-go .splash__scan {
  animation: splash-scan 0.62s var(--ease-move) 0.08s both,
             splash-scan-fade 0.62s linear 0.08s both;
}
.splash.is-go .splash__wordmark { animation: splash-wm 0.44s var(--ease-move) 0.60s both; }
.splash.is-go .splash__rule { animation: splash-rule 0.38s var(--ease-move) 0.96s both; }

@keyframes splash-mark {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes splash-scan {
  from { top: 0; }
  to   { top: 100%; }
}
@keyframes splash-scan-fade {
  0% { opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; }
}
@keyframes splash-wm {
  from { opacity: 0; transform: translateY(10px) scaleX(1.05); }
  to   { opacity: 1; transform: translateY(0) scaleX(1); }
}
@keyframes splash-rule {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .scene { padding: 88px 32px 32px; }
  .topbar { padding: 0 32px; }
  .counter { left: 32px; }
  .bio-grid { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(340px, 48vh) auto; }
  .dossier--stack { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .comp-row { grid-template-columns: 44px 1fr 70px 70px; }
  .comp-row__flag { display: none; }
  .news-grid { grid-template-columns: 1fr 1fr; }
  .ig-card { grid-column: 1 / -1; grid-template-columns: 120px 1fr; }
  /* the telemetry band stops being a three-part row and stacks */
  .wa-strip { grid-template-columns: 1fr; row-gap: 14px; }
  .wa-strip__cta { justify-content: flex-start; }
  .wa-strip__cta .btn { max-width: none; }
  .scene--comp, .scene--sponsor { grid-template-columns: 1fr; gap: 28px; }
  .scene--train { grid-template-rows: auto minmax(340px, 1fr) auto; gap: 10px; padding-bottom: 68px; }
  .train-head { grid-template-columns: minmax(0, 1.2fr) minmax(220px, 0.8fr); column-gap: 24px; }
  .train-head .display { font-size: clamp(40px, 6.4vw, 68px); }
  .train-copy { font-size: 13px; }
  .train-card { height: min(100%, 52vh, 470px); border-radius: 32px; }
  .comp-media { opacity: 0.5; }
}

@media (max-width: 720px) {
  .scene { padding: 84px 20px 24px; }
  .topbar { padding: 0 20px; }
  .chapters-btn { display: none; }
  .counter { display: none; }
  .scene--bio { display: flex; flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .scene--bio > * { flex: none; }
  .bio-grid { display: flex; flex-direction: column; gap: 24px; min-height: 0; }
  .bio-carousel { gap: 10px; }
  .bio-carousel__frame { flex: none; aspect-ratio: 4 / 3; }
  .bio-carousel__count { font-size: 24px; }
  .bio-carousel__total { font-size: 14px; }
  .bio-story { overflow: visible; padding-right: 0; }
  .bio-story__lead { font-size: 18px; }
  .dossier--stack { display: grid; grid-template-columns: 1fr; gap: 18px; }
  .dossier-card--stats { transform: none; }
  .home-hero__title { font-size: clamp(40px, 14vw, 120px); }
  .runner-head__label { grid-template-columns: 1fr; }
  .runner-head__label .hairline { display: none; }
  .news-grid { grid-template-columns: 1fr; gap: 16px; align-self: start; }
  .news-grid.is-offline [data-news-slot="0"] { grid-column: auto; }
  .scene--news { gap: 20px; -webkit-overflow-scrolling: touch; }
  .news-card { min-height: 0; --card-pad: 16px; padding: var(--card-pad); }
  .news-card__title { margin: 12px 0 10px; }
  .news-card__more { margin-top: 14px; }
  .ig-card { grid-template-columns: 120px 1fr; transform: none; }
  .ig-card__media { aspect-ratio: auto; height: 120px; }
  .wa-strip__stats { grid-template-columns: 1fr 1fr; gap: 12px 16px; }
  .wa-cell { padding: 0; border-left: 0; }
  .scene--train { display: flex; flex-direction: column; align-items: stretch; gap: 18px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .scene--train > * { flex: none; }
  .train-head { display: block; }
  .train-head .display { font-size: clamp(42px, 12vw, 68px); }
  .train-copy { margin-top: 12px; }
  .train-fan {
    display: flex; align-items: center; gap: 14px;
    width: calc(100% + 40px); height: min(58vh, 440px); min-height: 340px;
    margin-left: -20px; padding: 10px max(20px, calc((100vw - 225px) / 2)) 24px;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: 50%; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .train-fan::-webkit-scrollbar { display: none; }
  .train-card, .scene--train.is-in .train-card {
    position: relative; top: auto; left: auto; z-index: auto;
    flex: 0 0 auto; height: min(54vh, 400px); min-height: 300px;
    opacity: 0; transform: translateY(16px) scale(0.97); scroll-snap-align: center;
    transition-delay: calc(var(--fan-distance, 0) * 0.055s);
  }
  .scene--train.is-in .train-card { opacity: 1; transform: translateY(0) scale(1); }
  .train-card.is-selected .train-card__select { position: absolute; inset: 0; width: auto; height: auto; transform: none; }
  .train-card.is-selected .train-card__select::before,
  .train-card.is-selected .train-card__select::after { opacity: 0; }
  .scene--train .cta-row--train { margin-top: 0; }
  .contact-row { grid-template-columns: 1fr; gap: 6px; padding: 14px 0; }
  .contact-row dd { font-size: 12px; overflow-wrap: anywhere; }
  .contact-row--social dd { gap: 16px; }
  .dots { right: 12px; }
  .corner-tag { padding: 12px 14px; font-size: 10px; }
}

/* ============================================================
   SHORT VIEWPORTS — the news sheet's escape hatch
   ============================================================
   The news scene carries two article cards plus a full-width
   telemetry band, which cannot fit the fixed 100vh sheet on a
   768/720-tall laptop. Rather than clip it (the sheet's
   align-self:center clips off the TOP as well as the bottom, so a
   clipped CTA slides under the topbar with no scrollbar), let the
   sheet scroll. scrollZoneHasRoom() is purely style-driven, so
   overflow alone makes it an internal scroll zone: the wheel
   scrolls it while there is room, and the scene only advances at
   the edge — the same contract the mobile bio/train scenes use.
   Scoped to short viewports on purpose: on a tall desktop, where
   the content fits, a stray pixel of overflow would otherwise eat
   the first wheel tick and make the sheet feel sticky.
   `overflow: hidden auto` (not `overflow-y: auto`) keeps x hidden —
   setting only overflow-y promotes overflow-x to auto and adds a
   horizontal gutter. */
@media (max-height: 820px) and (min-width: 721px) {
  .scene--news { gap: 20px; }
  .news-card { min-height: 210px; }
  /* The article thumbnail is the tallest thing in the card, so on a short
     desktop sheet it is what tips the row into scroll. The picture gives up
     the pixels rather than the copy: 96px still reads as a picture, and the
     card keeps its shape, while the 20px of card padding plus the title and
     CTA margins that follow give back enough to fit 1280x720 exactly. */
  .news-card__media { margin-bottom: 12px; }
  .news-card__media img { height: 96px; }
  .news-card__title { margin: 10px 0 8px; }
  .news-card__more { margin-top: 12px; }
  .wa-strip { padding-top: 10px; padding-bottom: 10px; }
  .wa-cell dd { font-size: 22px; }
}

/* ============================================================
   REDUCED MOTION — instant transitions, no loop
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ============================================================
   SITE REVISION v18 — chapter structure
   Home type · The Athlete · Beginnings · Athletic Journey ·
   Goals · Life as an Athlete
   ============================================================ */

/* ---------- HOME — the name set in Supertalls ----------
   Supertalls has very tall ascenders/descenders: the old 0.9 line-height
   clipped them inside the reveal mask (.line is overflow:hidden) and let the
   two lines touch. Give each line air, and pad the mask so the glyphs keep
   their full height. */
.home-hero__title {
  font-family: "Supertalls", var(--font-display);
  font-weight: 400;
  font-size: clamp(46px, 14vw, 216px);
  line-height: 1.12;
  letter-spacing: 0.01em;
}
.home-hero__title .line { padding: 0.1em 0; }

/* ---------- MENU — nine chapters ---------- */
.menu__inner { overflow-y: auto; }
.menu__chapters li:nth-child(8) button { transition-delay: 0.4s; }
.menu__chapters li:nth-child(9) button { transition-delay: 0.45s; }
.menu__label { font-size: clamp(24px, 3.8vw, 44px); }

/* ---------- shared pattern: a scrolling sheet ----------
   The new chapters can outgrow a fixed 100vh sheet on laptops. They scroll
   internally instead (the engine only advances at the edge), with a thin
   scrollbar that respects the scene's paper/ink theme. */
.scene--athlete, .scene--beginnings, .scene--journey, .scene--goals {
  overflow: hidden auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 22, 0.32) transparent;
}
.scene--beginnings, .scene--goals { scrollbar-color: rgba(241, 241, 241, 0.3) transparent; }
.scene--athlete::-webkit-scrollbar, .scene--beginnings::-webkit-scrollbar,
.scene--journey::-webkit-scrollbar, .scene--goals::-webkit-scrollbar { width: 4px; }
.scene--athlete::-webkit-scrollbar-thumb, .scene--journey::-webkit-scrollbar-thumb { background: rgba(0, 0, 22, 0.28); border-radius: 2px; }
.scene--beginnings::-webkit-scrollbar-thumb, .scene--goals::-webkit-scrollbar-thumb { background: rgba(241, 241, 241, 0.24); border-radius: 2px; }

/* ---------- shared chapter head: label · title · deck ---------- */
.athlete-head, .begin-head, .journey-head, .goals-head {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) minmax(240px, 0.72fr);
  align-items: end;
  column-gap: 32px;
}
.athlete-head__label .hairline, .begin-head__label .hairline,
.journey-head__label .hairline, .goals-head__label .hairline { margin-bottom: 14px; }
.athlete-head .display, .begin-head .display,
.journey-head .display, .goals-head .display { font-size: clamp(38px, 5.2vw, 72px); }
.athlete-head__sub, .begin-head__sub, .journey-head__sub, .goals-head__sub {
  justify-self: end;
  max-width: 380px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}
.scene--dark .athlete-head__sub, .scene--dark .begin-head__sub,
.scene--dark .journey-head__sub, .scene--dark .goals-head__sub { color: var(--mutedc); }

/* ============================================================
   02 · THE ATHLETE
   ============================================================ */
.scene--athlete { display: grid; grid-template-rows: auto 1fr; gap: 20px; }
.athlete-grid {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr) 300px;
  gap: 32px;
  align-items: stretch;
  min-height: 0;
}
.athlete-story {
  overflow-y: auto;
  min-height: 0;
  padding-right: 22px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 22, 0.28) transparent;
}
.athlete-story::-webkit-scrollbar { width: 4px; }
.athlete-story::-webkit-scrollbar-thumb { background: rgba(0, 0, 22, 0.28); border-radius: 2px; }
.athlete-highlights {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 28px;
  margin-top: 20px;
}
.highlight {
  padding: 12px 0 16px;
  border-top: 1px solid rgba(0, 0, 22, 0.45);
}
.highlight__num {
  font-size: 9px; font-weight: 700; letter-spacing: 0.16em;
  color: var(--muted);
}
.highlight h3 {
  font-size: 11px; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink);
  margin: 5px 0 6px;
}
.highlight p:last-child {
  font-size: 13px; line-height: 1.5;
  color: rgba(0, 0, 22, 0.72);
}
.athlete-grid .cta-row { margin-top: 18px; flex-wrap: wrap; gap: 10px; }
.athlete-grid .cta-row .btn { font-size: 10px; padding: 11px 12px; }

/* ============================================================
   03 · BEGINNINGS
   ============================================================ */
.scene--beginnings { display: grid; grid-template-rows: auto 1fr; gap: 20px; }
.begin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  gap: 44px;
  align-items: stretch;
  min-height: 0;
}
.begin-story {
  overflow-y: auto;
  min-height: 0;
  padding-right: 22px;
  scrollbar-width: thin;
  scrollbar-color: rgba(241, 241, 241, 0.26) transparent;
}
.begin-story::-webkit-scrollbar { width: 4px; }
.begin-story::-webkit-scrollbar-thumb { background: rgba(241, 241, 241, 0.26); border-radius: 2px; }
.begin-lead {
  font-size: clamp(18px, 1.55vw, 21px);
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: -0.005em;
  color: var(--paper);
  margin-bottom: 16px;
}
.begin-beat {
  padding: 11px 0 13px;
  border-top: 1px solid var(--hairline);
}
.begin-beat__kicker {
  font-size: 9px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--mutedc);
  margin-bottom: 5px;
}
.begin-beat p:last-child {
  font-size: 13px; line-height: 1.55;
  color: rgba(241, 241, 241, 0.72);
}
.begin-quote {
  margin-top: 16px;
  padding: 2px 0 2px 18px;
  border-left: 2px solid var(--accent);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 34px);
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--paper);
}
.begin-photos {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1.12fr 0.88fr;
  gap: 14px;
  min-height: 0;
  padding: 6px 2px;
}
.begin-photo {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background: var(--panel-dark);
  border: 1px solid rgba(241, 241, 241, 0.32);
  border-radius: 8px 0 8px 8px;
}
.begin-photo img { width: 100%; height: 100%; object-fit: cover; }
.begin-photo--a { grid-column: 1 / -1; transform: rotate(-0.8deg); }
.begin-photo--b { transform: rotate(1.4deg) translateY(5px); }
.begin-photo--c { transform: rotate(-1.1deg) translateY(-4px); }
.begin-photo figcaption {
  position: absolute; left: 10px; bottom: 10px;
  padding: 4px 8px;
  background: rgba(0, 0, 22, 0.84);
  color: var(--paper);
  font-size: 9px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 3px;
}

/* ============================================================
   04 · ATHLETIC JOURNEY
   ============================================================ */
.scene--journey { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto auto; gap: 18px; }
.journey-pb {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  align-items: stretch;
  border-top: 1px solid var(--hairline);
  padding-top: 12px;
}
.journey-pb__label { align-self: start; padding-top: 6px; }
.pb-cells { display: grid; grid-template-columns: repeat(3, 1fr); }
.pb-cell { padding: 2px 0 6px 22px; border-left: 1px solid rgba(0, 0, 22, 0.18); }
.pb-cell:first-child { border-left: 0; padding-left: 0; }
.pb-cell dt {
  font-size: 9px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
}
.pb-cell dd {
  font-family: var(--font-display);
  font-size: clamp(38px, 4vw, 56px);
  line-height: 0.95;
  letter-spacing: 0.01em;
  margin-top: 2px;
}

.seasons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; min-height: 0; }
.season {
  display: flex; flex-direction: column;
  min-height: 0;
  padding: 12px 14px 14px;
  background: var(--panel-light);
  color: var(--ink);
  border-radius: 0 8px 0 0;
}
.season__media {
  height: clamp(82px, 13vh, 132px);
  flex: none;
  overflow: hidden;
  border-radius: 0 6px 0 0;
  margin-bottom: 10px;
}
.season__media img { width: 100%; height: 100%; object-fit: cover; }
.season__body { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.season__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.season__year {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.5vw, 38px);
  line-height: 1;
  letter-spacing: 0.01em;
}
.season__tag {
  font-size: 8px; font-weight: 800; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--muted);
  text-align: right;
}
.season__copy { font-size: 12px; line-height: 1.45; color: rgba(0, 0, 22, 0.72); margin: 6px 0 8px; }
.season__rows { margin-top: auto; }
.season__row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 5px 0;
  border-top: 1px solid rgba(0, 0, 22, 0.18);
  font-size: 10px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase;
}
.season__row dt { color: var(--muted); }
.season__row dd { text-align: right; }
.season__watch {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 8px;
  font-size: 9px; font-weight: 800; letter-spacing: 0.13em;
  text-transform: uppercase;
  align-self: flex-start;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
  transition: color var(--t-color), border-color var(--t-color);
}
.season__watch:hover { color: var(--accent); border-color: var(--accent); }

.record {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.record summary {
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
  padding: 11px 0;
  cursor: pointer;
  list-style: none;
  font-size: 10px; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase;
}
.record summary::-webkit-details-marker { display: none; }
.record summary::after {
  content: "+";
  font-family: var(--font-display);
  font-size: 24px; line-height: 0.8;
  color: var(--ink);
}
.record[open] summary::after { content: "–"; }
.record__hint { color: var(--muted); margin-left: 10px; letter-spacing: 0.1em; }
.record__table { padding-bottom: 12px; }
.rec-row {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) 90px 90px 50px;
  align-items: baseline;
  gap: 12px;
  padding: 6px 0;
  border-top: 1px solid rgba(0, 0, 22, 0.16);
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase;
}
.rec-row--head {
  border-top: 0;
  padding-top: 0;
  color: var(--muted);
  font-size: 8px; letter-spacing: 0.14em;
}
.rec-row span:nth-child(4) { text-align: right; }
.rec-row span:nth-child(5) { text-align: right; }
.rec-row__mark { font-family: var(--font-display); font-size: 19px; line-height: 1; letter-spacing: 0.01em; }
.record__link {
  display: inline-block;
  margin-top: 10px;
  font-size: 9px; font-weight: 800; letter-spacing: 0.13em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
  transition: color var(--t-color), border-color var(--t-color);
}
.record__link:hover { color: var(--accent); border-color: var(--accent); }
.cta-row--journey { flex-wrap: wrap; }

/* ============================================================
   05 · GOALS
   ============================================================ */
.scene--goals { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 24px; }
.goals-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 44px;
  align-items: start;
}
.goals-lead {
  font-size: clamp(18px, 1.5vw, 21px);
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: -0.005em;
  color: var(--paper);
  margin-bottom: 14px;
}
.goals-now > p:not(.goals-lead) {
  max-width: 580px;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(241, 241, 241, 0.68);
}
.goals-team {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 24px; flex-wrap: wrap;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
}
.goals-team .micro-label { margin-bottom: 6px; }
.goals-team__name {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.8vw, 42px);
  line-height: 1;
  text-transform: uppercase;
}
.goals-team__meta {
  font-size: 9px; font-weight: 700; letter-spacing: 0.12em;
  line-height: 1.7; text-align: right; color: var(--mutedc);
}
.goal-target {
  padding: 20px 22px 22px;
  background: var(--panel-dark);
  border: 1px solid var(--hairline);
  border-radius: 0 8px 0 0;
}
.goal-target .micro-label { color: var(--mutedc); }
.goal-target__year {
  font-family: var(--font-display);
  font-size: clamp(64px, 7vw, 104px);
  line-height: 0.85;
  letter-spacing: 0.01em;
  color: var(--accent);
  margin: 8px 0 4px;
}
.goal-target h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1;
  text-transform: uppercase;
}
.goal-target__copy {
  margin-top: 8px;
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(241, 241, 241, 0.66);
}
.goal-path { margin-top: 12px; }
.goal-path > div {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 5px 0;
  border-top: 1px solid rgba(241, 241, 241, 0.17);
}
.goal-path dt {
  font-size: 8px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--mutedc);
}
.goal-path dd {
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; text-align: right;
}
.goals-bottom {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 44px;
  align-items: start;
}
.challenge-row {
  padding: 8px 0 10px;
  border-top: 1px solid var(--hairline);
}
.challenge-row h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(18px, 1.8vw, 26px);
  line-height: 1;
  text-transform: uppercase;
}
.challenge-row p {
  max-width: 450px;
  margin-top: 4px;
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(241, 241, 241, 0.64);
}
.upcoming-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 12px;
  padding: 7px 0;
  border-top: 1px solid var(--hairline);
}
.upcoming-row__idx {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1;
  color: var(--mutedc);
}
.upcoming-row__name {
  font-size: 11px; font-weight: 800; letter-spacing: 0.07em;
  text-transform: uppercase;
}
.upcoming-row__meta {
  font-size: 8px; font-weight: 700; letter-spacing: 0.12em;
  color: var(--mutedc); text-align: right;
}

/* ============================================================
   06 · LIFE AS AN ATHLETE
   The fan keeps its exact geometry; it now sits above a life band,
   so the sheet scrolls internally.
   ============================================================ */
.scene--train {
  grid-template-rows: auto minmax(0, min(74vh, 588px)) auto auto;
  overflow: hidden auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 22, 0.32) transparent;
}
.scene--train::-webkit-scrollbar { width: 4px; }
.scene--train::-webkit-scrollbar-thumb { background: rgba(0, 0, 22, 0.28); border-radius: 2px; }

.life-band {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
  padding-top: 18px;
  margin-top: 10px;
  border-top: 1px solid var(--hairline);
}
.life-band__copy {
  max-width: 300px;
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}
.life-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.life-item { padding-top: 2px; border-top: 1px solid rgba(0, 0, 22, 0.4); }
.life-item h3 {
  padding-top: 9px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--ink);
}
.life-item p {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(0, 0, 22, 0.72);
}

/* ============================================================
   RESPONSIVE — revised chapters
   ============================================================ */
@media (max-width: 1200px) {
  .athlete-grid { grid-template-columns: 320px minmax(0, 1fr) 280px; gap: 24px; }
  .athlete-head, .begin-head, .journey-head, .goals-head { grid-template-columns: 190px minmax(0, 1fr) minmax(220px, 0.75fr); column-gap: 24px; }
  .goals-grid, .goals-bottom, .begin-grid { gap: 32px; }
  .life-grid { gap: 16px; }
}

@media (max-width: 1100px) {
  .athlete-head, .begin-head, .journey-head, .goals-head {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 0.7fr);
    row-gap: 8px;
  }
  .athlete-head__label, .begin-head__label, .journey-head__label, .goals-head__label { grid-column: 1 / -1; }
  .athlete-head__label .hairline, .begin-head__label .hairline,
  .journey-head__label .hairline, .goals-head__label .hairline { margin-bottom: 10px; }
  .athlete-head__sub, .begin-head__sub, .journey-head__sub, .goals-head__sub { justify-self: stretch; max-width: none; }

  .athlete-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(330px, 46vh) auto; }
  .athlete-grid .dossier--stack { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .athlete-grid .dossier-card { align-self: stretch; }

  .begin-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); }
  .begin-photos { grid-template-rows: 1fr 1fr; }

  .seasons { gap: 14px; }
  .season { padding: 10px 11px 12px; }
  .season__media { height: clamp(74px, 11vh, 110px); }

  .goals-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
  .goals-bottom { gap: 28px; }

  .life-band { grid-template-columns: 190px minmax(0, 1fr); gap: 24px; }
  .life-grid { grid-template-columns: 1fr 1fr; gap: 16px 24px; }
}

@media (max-width: 900px) {
  .seasons { grid-template-columns: 1fr 1fr; }
  .season:nth-child(3) { grid-column: 1 / -1; }
  .season:nth-child(3) .season__media { height: clamp(90px, 15vh, 140px); }
  .goals-grid, .goals-bottom { grid-template-columns: 1fr; gap: 24px; }
  .goal-target { max-width: none; }
  .begin-grid { gap: 24px; }
  .begin-quote { font-size: 24px; }
}

@media (max-width: 720px) {
  .home-hero__title { font-size: clamp(40px, 14vw, 120px); }

  .menu__inner { padding: 92px 24px 28px; }
  .menu__label { font-size: clamp(22px, 6.4vw, 34px); }
  .menu__chapters button { padding: 5px 0; }

  /* the revised chapters turn into vertically scrolling sheets */
  .scene--athlete, .scene--beginnings, .scene--journey, .scene--goals {
    display: flex;
    flex-direction: column;
    gap: 18px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 56px;
  }
  .scene--athlete > *, .scene--beginnings > *, .scene--journey > *, .scene--goals > * { flex: none; }

  .athlete-head, .begin-head, .journey-head, .goals-head { display: block; }
  .athlete-head .display, .begin-head .display,
  .journey-head .display, .goals-head .display { font-size: clamp(36px, 11vw, 58px); margin-top: 4px; }
  .athlete-head__sub, .begin-head__sub, .journey-head__sub, .goals-head__sub { margin-top: 10px; max-width: none; }

  .athlete-grid { display: flex; flex-direction: column; gap: 22px; }
  .athlete-grid .bio-carousel__frame { flex: none; aspect-ratio: 4 / 3; }
  .athlete-story { overflow: visible; padding-right: 0; }
  .athlete-highlights { grid-template-columns: 1fr; column-gap: 0; margin-top: 14px; }
  .athlete-grid .dossier--stack { display: flex; flex-direction: column; gap: 18px; }

  .begin-grid { display: flex; flex-direction: column; gap: 22px; }
  .begin-story { overflow: visible; padding-right: 0; }
  .begin-photos { grid-template-rows: 180px 200px; }
  .begin-quote { font-size: clamp(22px, 6.2vw, 30px); }

  .journey-pb { grid-template-columns: 1fr; gap: 8px; }
  .pb-cells { grid-template-columns: 1fr; }
  .pb-cell { padding: 8px 0; border-left: 0; border-top: 1px solid rgba(0, 0, 22, 0.16); }
  .pb-cell:first-child { border-top: 0; }
  .pb-cell dd { font-size: clamp(40px, 12vw, 54px); }

  .seasons { display: flex; flex-direction: column; gap: 18px; }
  .season:nth-child(3) { grid-column: auto; }
  .season__media, .season:nth-child(3) .season__media { height: 150px; }
  .rec-row { grid-template-columns: 44px minmax(0, 1fr) 56px 56px 26px; gap: 8px; font-size: 9px; }
  .rec-row__mark { font-size: 16px; }
  .rec-row--head span:nth-child(1) { overflow: hidden; }
  .record__hint { display: block; margin-left: 0; }

  .goals-team { align-items: flex-start; }
  .goals-team__meta { text-align: left; }
  .goal-target { padding: 18px; }
  .goal-target__year { font-size: clamp(66px, 22vw, 92px); }
  .upcoming-row { grid-template-columns: 24px minmax(0, 1fr); row-gap: 2px; }
  .upcoming-row__meta { grid-column: 2; text-align: left; }

  /* life band stacks under the unchanged gallery */
  .scene--train { gap: 18px; padding-bottom: 56px; }
  .life-band { grid-template-columns: 1fr; gap: 16px; }
  .life-band__copy { max-width: none; }
  .life-grid { grid-template-columns: 1fr; gap: 14px; }
  .life-item p { font-size: 12.5px; }
}

@media (max-width: 420px) {
  .athlete-head .display, .begin-head .display,
  .journey-head .display, .goals-head .display { font-size: clamp(32px, 10.5vw, 48px); }
  .begin-photos { grid-template-rows: 150px 170px; }
  .upcoming-row__name { font-size: 10px; }
}

/* ---------- v18 fixes — flow expansion + counter clearance ---------- */
.scene--athlete, .scene--beginnings, .scene--journey, .scene--goals { padding-bottom: 68px; }

/* Grid rows must be allowed to grow: a fixed 1fr row compresses the season
   cards when the complete record expands, so both sheets flow instead. */
.scene--journey { display: flex; flex-direction: column; gap: 18px; }
.scene--goals { display: flex; flex-direction: column; gap: 24px; }
.scene--journey .seasons { flex: none; }
.scene--journey .record { flex: none; }

.record summary::after {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 20px;
  line-height: 1;
  color: var(--ink);
}

@media (max-width: 720px) {
  .scene--athlete, .scene--beginnings, .scene--journey, .scene--goals { padding-bottom: 56px; }
}

/* ============================================================
   CHAPTER OPENERS — photo · phrase · content
   Every chapter after Home opens on a full-bleed photograph carrying one
   line. The photograph is cut into two curtain halves that unfurl from the
   centre seam; the first scroll drives them shut again while the photo
   zooms and fades, surfacing the editorial sheet beneath in layers.
   `--intro-p` (0 → 1) is written by the engine each frame from the scroll
   gesture's momentum, so the reveal follows the hand rather than a clock.
   ============================================================ */
.scene.intro-active { overflow: hidden !important; }

/* the editorial sheet waits beneath, slightly enlarged, and settles as the
   photograph gives way — a focus pull rather than a sliding card */
.scene.intro-active > :not(.scene-intro) {
  opacity: 0; visibility: hidden; transform: scale(1.02);
}
.scene.intro-out > :not(.scene-intro) {
  /* the sheet surfaces with the gesture, not on a fixed fade clock */
  opacity: calc(var(--intro-p, 0) * 1.15);
  visibility: visible; transform: none;
  transition: transform 1.1s var(--ease-move);
}

.scene-intro {
  position: absolute; inset: 0; z-index: 12;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 96px 52px 84px;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
  opacity: calc(1 - var(--intro-p, 0));
}

.scene-intro__media {
  position: absolute; inset: 0;
  overflow: hidden;
  background: var(--ink);
}

/* two halves of the same photograph; together they tile the viewport
   exactly, so the seam disappears once the curtain is open */
.scene-intro__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  will-change: clip-path, transform;
  transform: scale(1.08);
  transition:
    clip-path 1s cubic-bezier(0.16, 1, 0.3, 1),
    transform 11s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* shut means shut: a zero-width window, so not even a hairline of the photo
   can show while the camera is still flying the sheet in */
.scene-intro__img--l { clip-path: inset(0 50% 0 50%); }
.scene-intro__img--r { clip-path: inset(0 50% 0 50%); }
.scene.intro-in .scene-intro__img--l { clip-path: inset(0 50% 0 0); transform: scale(1); }
.scene.intro-in .scene-intro__img--r { clip-path: inset(0 0 0 49.9%); transform: scale(1); }

/* dismissal: the halves retract into the seam while the photograph zooms
   toward the viewer and fades — no edge travels across the frame */
.scene.intro-out .scene-intro__img--l {
  clip-path: inset(0 50% 0 calc(var(--intro-p, 0) * 50%));
  transform: scale(calc(1 + var(--intro-p, 0) * 0.07));
  transition: none;
}
.scene.intro-out .scene-intro__img--r {
  clip-path: inset(0 calc(var(--intro-p, 0) * 50%) 0 50%);
  transform: scale(calc(1 + var(--intro-p, 0) * 0.07));
  transition: none;
}

.scene-intro__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(0, 0, 22, 0.64) 0%,
    rgba(0, 0, 22, 0.28) 26%,
    rgba(0, 0, 22, 0.24) 55%,
    rgba(0, 0, 22, 0.9) 100%);
  opacity: calc(1 - var(--intro-p, 0) * 0.8);
}

/* the words are the first layer to go — a beat ahead of the photograph */
.scene.intro-out .scene-intro__meta,
.scene.intro-out .scene-intro__phrase,
.scene.intro-out .scene-intro__cue { transition: none; }
.scene.intro-out .scene-intro__meta {
  opacity: calc(1 - var(--intro-p, 0) * 1.8);
  transform: translateY(calc(var(--intro-p, 0) * -10px));
}
.scene.intro-out .scene-intro__phrase {
  opacity: calc(1 - var(--intro-p, 0) * 1.5);
  transform: translateY(calc(var(--intro-p, 0) * -16px));
}
.scene.intro-out .scene-intro__cue { opacity: calc(1 - var(--intro-p, 0) * 2); }

.scene-intro__meta {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(241, 241, 241, 0.32);
  opacity: 0; transform: translateY(-10px);
  transition: opacity 0.6s var(--ease-color), transform 0.7s var(--ease-move);
}
.scene.intro-in .scene-intro__meta { opacity: 1; transform: none; transition-delay: 0.16s; }
.scene-intro__meta .micro-label { color: var(--paper); }
.scene-intro__index {
  font-size: 10px; font-weight: 700; letter-spacing: 0.16em;
  color: rgba(241, 241, 241, 0.72);
  font-variant-numeric: tabular-nums;
}

.scene-intro__foot {
  position: relative;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 40px;
}

.scene-intro__phrase {
  max-width: 15ch;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(46px, 8.4vw, 132px);
  line-height: 0.94;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--paper);
  text-wrap: balance;
  opacity: 0; transform: translateY(30px);
  transition: opacity 0.7s var(--ease-color), transform 0.95s var(--ease-move);
}
.scene.intro-in .scene-intro__phrase { opacity: 1; transform: none; transition-delay: 0.4s; }

.scene-intro__cue {
  flex: none;
  display: flex; flex-direction: column; align-items: flex-end; gap: 14px;
  padding-bottom: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(241, 241, 241, 0.82);
  opacity: 0;
  transition: opacity 0.6s var(--ease-color);
}
.scene.intro-in .scene-intro__cue { opacity: 1; transition-delay: 0.8s; }
.scene-intro__cue-line {
  width: 1px; height: 64px;
  background: var(--paper);
  transform-origin: top;
  animation: cue 2.2s var(--ease-move) infinite;
}

@media (max-width: 1100px) {
  .scene-intro { padding: 88px 32px 78px; }
}

@media (max-width: 720px) {
  .scene-intro { padding: 84px 20px 72px; }
  .scene-intro__phrase { font-size: clamp(42px, 12vw, 84px); max-width: 100%; }
  .scene-intro__cue { display: none; }
  .scene-intro__foot { display: block; }
}

/* the fixed chrome reads over the photograph, not the sheet beneath it */
body.intro-up .topbar { --bar-fg: var(--paper); }
body.intro-up .logo__crest--on-light { display: none; }
body.intro-up .logo__crest--on-dark { display: block; }
body.intro-up .dots { --dot: var(--paper); }
body.intro-up .counter { opacity: 0; }
.counter { transition: color var(--t-color), opacity 0.4s var(--ease-color); }

/* the opener's own label must not wait for the sheet's reveal choreography */
.scene-intro__meta .micro-label { opacity: 1; transform: none; }

/* the photograph exists only while the chapter is opening; once the opener
   is dismissed it must stay gone, not snap back when .intro-out clears */
.scene:not(.intro-active) .scene-intro { opacity: 0; visibility: hidden; }

/* ============================================================
   THE OPENER, BACKWARDS — content · photo · previous chapter
   Going back up, a chapter is met at its content; its photograph
   belongs to the departure. The whole opener sweeps back in from the
   centre seam over the sheet (the mirror of the forward curtain),
   `.is-covering` driving the sweep, before the camera pulls up.
   ============================================================ */
.scene.intro-return { overflow: hidden !important; }
.scene.intro-return .scene-intro {
  opacity: 1; visibility: visible;
  clip-path: inset(0 50% 0 50%);
  transition: clip-path 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: clip-path;
}
.scene.intro-return.is-covering .scene-intro { clip-path: inset(0 0 0 0); }

/* inside the sweeping window the photograph is already whole — the container
   clip is the curtain, so the halves must not run a second, competing one */
.scene.intro-return .scene-intro__img--l {
  clip-path: inset(0 50% 0 0);
  transform: scale(1);
  transition: none;
}
.scene.intro-return .scene-intro__img--r {
  clip-path: inset(0 0 0 49.9%);
  transform: scale(1);
  transition: none;
}