/* Rowing Buddy tokens. Generated by tools/tokens.mjs from tokens/rowing-buddy.tokens.json: edit the JSON, not this file. */
:root {
  color-scheme: light dark;
  /* --- primitive --- */
  --rb-navy-0: #FFFFFF;
  --rb-navy-25: #F5F8F8;
  --rb-navy-50: #EEF3F4;
  --rb-navy-100: #E6EEF0;
  --rb-navy-150: #D5E0E3;
  --rb-navy-200: #B7C9CF;
  --rb-navy-300: #A2B7C0;
  --rb-navy-400: #869FAB;
  --rb-navy-500: #566E7B;
  --rb-navy-600: #3E5764;
  --rb-navy-650: #335869;
  --rb-navy-700: #244252;
  --rb-navy-750: #183140;
  --rb-navy-800: #142937;
  --rb-navy-850: #0E1D27;
  --rb-navy-900: #0C2A3B;
  --rb-navy-950: #081117;
  --rb-water-300: #A9D3DB;
  --rb-water-500: #5E9FAE;
  --rb-water-800: #1B4757;
  --rb-blade-basis: #2450C9;
  --rb-blade-basis-night: #6E90F5;
  --rb-blade-basis-night-ink: #86A3FF;
  --rb-blade-kracht: #D7312A;
  --rb-blade-kracht-ink: #B8241D;
  --rb-blade-kracht-night: #FF5B4E;
  --rb-blade-kracht-night-ink: #FF7B70;
  --rb-blade-vermogen: #F2B705;
  --rb-blade-vermogen-ink: #7A5A00;
  --rb-blade-vermogen-night: #F7C935;
  --rb-lcd-frame: #16232B;
  --rb-lcd-key: #26363F;
  --rb-lcd-glass: #CCD7C9;
  --rb-lcd-digit: #13221A;
  --rb-lcd-label: #3F5547;
  --rb-lcd-glass-night: #223629;
  --rb-lcd-digit-night: #D8EAD2;
  --rb-lcd-label-night: #8FAA98;
  --font-family-sans: Archivo, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-family-serif: "Instrument Serif", Georgia, serif;
  --font-stretch-condensed: 62%;
  --font-stretch-semi: 75%;
  --font-stretch-button: 88%;
  --font-stretch-normal: 100%;
  --font-stretch-expanded: 112%;
  --font-weight-regular: 450;
  --font-weight-medium: 550;
  --font-weight-semibold: 650;
  --font-weight-bold: 760;
  --font-weight-heavy: 820;
  --font-size-micro: 12.5px;
  --font-size-small: 14px;
  --font-size-body: 16px;
  --font-size-lead: 19px;
  --font-size-h3: 26px;
  --font-size-h2: clamp(40px, 6vw, 84px);
  --font-size-display: clamp(52px, 9vw, 136px);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --radius-board: 3px;
  --radius-glass: 6px;
  --radius-key: 8px;
  --radius-button: 12px;
  --radius-panel: 14px;
  --radius-dock: 24px;
  --radius-pill: 999px;
  --duration-fast: 120ms;
  --duration-medium: 220ms;
  --duration-slow: 600ms;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  /* --- semantic (light) --- */
  --color-page: var(--rb-navy-50);
  --color-surface: var(--rb-navy-0);
  --color-surface-2: var(--rb-navy-25);
  --color-line: var(--rb-navy-150);
  --color-line-strong: var(--rb-navy-200);
  --color-ink: var(--rb-navy-900);
  --color-ink-2: var(--rb-navy-600);
  --color-ink-3: var(--rb-navy-500);
  --color-water: var(--rb-water-300);
  --color-water-deep: var(--rb-water-500);
  --color-buoy: var(--rb-navy-0);
  --color-basis: var(--rb-blade-basis);
  --color-basis-ink: var(--rb-blade-basis);
  --color-kracht: var(--rb-blade-kracht);
  --color-kracht-ink: var(--rb-blade-kracht-ink);
  --color-vermogen: var(--rb-blade-vermogen);
  --color-vermogen-ink: var(--rb-blade-vermogen-ink);
  --color-vermogen-edge: var(--rb-navy-900);
  --color-accent: var(--color-basis);
  --color-on-accent: var(--rb-navy-0);
  --color-accent-ink: var(--color-basis-ink);
  --color-focus: var(--rb-navy-900);
  --color-lcd-frame: var(--rb-lcd-frame);
  --color-lcd-key: var(--rb-lcd-key);
  --color-lcd-glass: var(--rb-lcd-glass);
  --color-lcd-digit: var(--rb-lcd-digit);
  --color-lcd-label: var(--rb-lcd-label);
  /* --- film (always dark) --- */
  --film-bg: var(--rb-navy-850);
  --film-ink: var(--rb-navy-100);
  --film-ink-2: var(--rb-navy-300);
  --film-accent: var(--rb-blade-basis-night-ink);
  /* --- component --- */
  --button-primary-bg: var(--color-accent);
  --button-primary-fg: var(--color-on-accent);
  --button-ghost-border: var(--color-line-strong);
  --button-height: 52px;
  --button-radius-site: var(--radius-board);
  --button-radius-app: var(--radius-button);
  --board-border: var(--color-ink);
  --board-bg: var(--color-surface);
  --board-radius: var(--radius-board);
  --panel-bg: var(--color-surface);
  --panel-border: var(--color-line);
  --panel-radius: var(--radius-panel);
  --pm5-frame: var(--color-lcd-frame);
  --pm5-glass: var(--color-lcd-glass);
  --pm5-digit: var(--color-lcd-digit);
  --pm5-label: var(--color-lcd-label);
  --pm5-radius: var(--radius-glass);
  --device-frame: var(--rb-navy-900);
  --device-radius: 44px;
}
/* --- semantic (dark: night water) --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-page: var(--rb-navy-850);
    --color-surface: var(--rb-navy-800);
    --color-surface-2: var(--rb-navy-750);
    --color-line: var(--rb-navy-700);
    --color-line-strong: var(--rb-navy-650);
    --color-ink: var(--rb-navy-100);
    --color-ink-2: var(--rb-navy-300);
    --color-ink-3: var(--rb-navy-400);
    --color-water: var(--rb-water-800);
    --color-water-deep: var(--rb-water-500);
    --color-buoy: var(--rb-navy-100);
    --color-basis: var(--rb-blade-basis-night);
    --color-basis-ink: var(--rb-blade-basis-night-ink);
    --color-kracht: var(--rb-blade-kracht-night);
    --color-kracht-ink: var(--rb-blade-kracht-night-ink);
    --color-vermogen: var(--rb-blade-vermogen-night);
    --color-vermogen-ink: var(--rb-blade-vermogen-night);
    --color-vermogen-edge: var(--rb-navy-850);
    --color-accent: var(--color-basis);
    --color-on-accent: var(--rb-navy-850);
    --color-accent-ink: var(--color-basis-ink);
    --color-focus: var(--rb-navy-100);
    --color-lcd-frame: var(--rb-navy-950);
    --color-lcd-key: var(--rb-lcd-key);
    --color-lcd-glass: var(--rb-lcd-glass-night);
    --color-lcd-digit: var(--rb-lcd-digit-night);
    --color-lcd-label: var(--rb-lcd-label-night);
  }
}
:root[data-theme="dark"] {
  --color-page: var(--rb-navy-850);
  --color-surface: var(--rb-navy-800);
  --color-surface-2: var(--rb-navy-750);
  --color-line: var(--rb-navy-700);
  --color-line-strong: var(--rb-navy-650);
  --color-ink: var(--rb-navy-100);
  --color-ink-2: var(--rb-navy-300);
  --color-ink-3: var(--rb-navy-400);
  --color-water: var(--rb-water-800);
  --color-water-deep: var(--rb-water-500);
  --color-buoy: var(--rb-navy-100);
  --color-basis: var(--rb-blade-basis-night);
  --color-basis-ink: var(--rb-blade-basis-night-ink);
  --color-kracht: var(--rb-blade-kracht-night);
  --color-kracht-ink: var(--rb-blade-kracht-night-ink);
  --color-vermogen: var(--rb-blade-vermogen-night);
  --color-vermogen-ink: var(--rb-blade-vermogen-night);
  --color-vermogen-edge: var(--rb-navy-850);
  --color-accent: var(--color-basis);
  --color-on-accent: var(--rb-navy-850);
  --color-accent-ink: var(--color-basis-ink);
  --color-focus: var(--rb-navy-100);
  --color-lcd-frame: var(--rb-navy-950);
  --color-lcd-key: var(--rb-lcd-key);
  --color-lcd-glass: var(--rb-lcd-glass-night);
  --color-lcd-digit: var(--rb-lcd-digit-night);
  --color-lcd-label: var(--rb-lcd-label-night);
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
/* --- phase accent (app): the whole UI wears the blade of the phase you are in --- */
:root[data-fase="kracht"] { --color-accent: var(--color-kracht); --color-accent-ink: var(--color-kracht-ink); }
:root[data-fase="vermogen"] { --color-accent: var(--color-vermogen); --color-accent-ink: var(--color-vermogen-ink); --color-on-accent: var(--rb-navy-900); }

/* Rowing Buddy site. Built on Bas's cinematic template (cinema.css), in the app's design language (roei-kracht/DESIGN.md).
   Colours only through tokens (tokens/rowing-buddy.css is prepended by build.mjs): no hex values in this file.
   Layers: the film (always dark, night water) -> paper sections (light, night water in dark mode) -> dark bands, finale, footer. */

@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url("/assets/fonts/archivo-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/instrument-serif-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --night-rgb: 14 29 39;    /* navy 850, for scrims over photos */
  --ink-rgb: 12 42 59;      /* navy 900 */
  --ice-rgb: 230 238 240;   /* navy 100 */
  --gutter: clamp(16px, 4vw, 56px);
  --max: 1240px;
  --grade: saturate(.86) contrast(1.05) brightness(.82);
  --nav-h: 68px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 12px); }
body {
  margin: 0; background: var(--film-bg); color: var(--film-ink);
  font: var(--font-weight-regular) 17px/1.55 var(--font-family-sans); font-stretch: 100%;
  font-variant-numeric: tabular-nums lining-nums;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
}
img, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p, h1, h2, h3, h4, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--color-accent); color: var(--color-on-accent); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 4px; }
.dark :focus-visible, .cine :focus-visible, .nav :focus-visible { outline-color: var(--film-ink); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 200; background: var(--film-ink); color: var(--film-bg); padding: 10px 16px; border-radius: var(--radius-board); font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }

/* film grain: subtle, only over the film and dark bands */
.cine__stage::before {
  content: ""; position: absolute; inset: -50%; z-index: 2; pointer-events: none; opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain { 0%{transform:translate(0,0)} 25%{transform:translate(-3%,2%)} 50%{transform:translate(2%,-3%)} 75%{transform:translate(-2%,-1%)} 100%{transform:translate(1%,3%)} }

/* ---------- type ---------- */
.display {
  font-family: var(--font-family-sans); font-weight: var(--font-weight-heavy); font-stretch: 62%;
  font-size: var(--font-size-display); line-height: .86; letter-spacing: -.012em; text-wrap: balance;
}
.display--md { font-size: var(--font-size-h2); line-height: .9; }
.display--sm { font-size: clamp(32px, 3.6vw, 48px); line-height: .94; }
/* the signature: one italic serif word per headline, in the blade colour */
.display em, .accent-word {
  font-family: var(--font-family-serif); font-style: italic; font-weight: 400; font-stretch: 100%;
  font-size: 1.04em; letter-spacing: -.01em; color: var(--color-accent-ink);
}
.cine .display em, .dark .display em { color: var(--film-accent); }
.lede { font-size: clamp(17px, 1.3vw, 19px); line-height: 1.5; color: var(--color-ink-2); max-width: 46ch; }
.cine .lede, .dark .lede { color: var(--film-ink-2); }
h3, .h3 { font-weight: 790; font-stretch: 70%; font-size: var(--font-size-h3); line-height: 1.02; letter-spacing: 0; }

/* eyebrow: like a label on the PM5 glass, small, wide and lowercase; a distance board in front of it marks the 500 m sections */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 13px; line-height: 1.2; font-weight: var(--font-weight-semibold); font-stretch: 112%; letter-spacing: .01em;
  color: var(--color-ink-2);
}
.cine .eyebrow, .dark .eyebrow { color: var(--film-ink-2); }
.board {
  display: inline-grid; place-items: center; min-width: 46px; height: 26px; padding: 0 7px;
  border-radius: var(--radius-board); background: var(--color-surface); color: var(--color-ink);
  box-shadow: inset 0 0 0 1.5px var(--color-ink);
  font-size: 14px; font-weight: 780; font-stretch: 75%; letter-spacing: 0; line-height: 1;
}
.dark .board, .cine .board { background: var(--film-ink); color: var(--rb-navy-900); box-shadow: none; }
h1 .eyebrow { display: flex; margin-bottom: 18px; }

/* ---------- buttons (component tokens: pill on the site) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--button-height); padding: 0 26px; border-radius: var(--button-radius-site);
  font-size: 16px; font-weight: var(--font-weight-bold); font-stretch: 88%; line-height: 1; text-decoration: none; white-space: nowrap;
  border: 1.5px solid transparent; cursor: pointer;
  transition: transform var(--duration-medium) var(--ease), background-color var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast);
}
.btn svg { width: 18px; height: 18px; flex: none; transition: transform var(--duration-medium) var(--ease); }
.btn:hover { transform: translateY(-2px); }
.btn:hover svg.arr { transform: translateX(4px); }
.btn:active { transform: translateY(0); }
.btn--solid { background: var(--button-primary-bg); color: var(--button-primary-fg); }
.btn--solid:hover { background: color-mix(in srgb, var(--button-primary-bg) 90%, black); }
.btn--ghost { border-color: var(--button-ghost-border); color: var(--color-ink); background: transparent; }
.btn--ghost:hover { border-color: var(--color-ink); }
.cine .btn--solid, .dark .btn--solid, .nav .btn--solid { background: var(--rb-blade-basis); color: var(--rb-navy-0); }
.cine .btn--solid:hover, .dark .btn--solid:hover, .nav .btn--solid:hover { background: color-mix(in srgb, var(--rb-blade-basis) 86%, white); }
.cine .btn--ghost, .dark .btn--ghost { border-color: rgb(var(--ice-rgb) / .38); color: var(--film-ink); background: rgb(var(--night-rgb) / .25); backdrop-filter: blur(8px); }
.cine .btn--ghost:hover, .dark .btn--ghost:hover { border-color: var(--film-ink); }
.btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.soon { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 650; color: var(--film-ink-2); }
.soon svg { width: 18px; height: 18px; }
.paper .soon { color: var(--color-ink-2); }

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--nav-h); padding: 0 var(--gutter);
  display: flex; align-items: center; gap: 24px; color: var(--film-ink);
  transition: background-color .4s, border-color .4s; border-bottom: 1px solid transparent;
}
.nav--solid { background: rgb(var(--night-rgb) / .97); backdrop-filter: blur(14px) saturate(1.2); border-color: rgb(var(--ice-rgb) / .1); }
.wordmark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; white-space: nowrap; }
.wordmark b { font-weight: 820; font-stretch: 66%; font-size: 24px; letter-spacing: 0; line-height: 1; }
.wordmark svg { width: 44px; height: 14px; }
.nav__links { display: flex; gap: 26px; margin-left: auto; font-size: 15px; font-weight: 600; font-stretch: 92%; }
.nav__links a { text-decoration: none; color: var(--film-ink-2); padding: 8px 0; }
.nav__links a:hover { color: var(--film-ink); }
.nav__lang { font-size: 14px; font-weight: 700; font-stretch: 100%; text-decoration: none; padding: 10px 6px; color: var(--film-ink-2); }
.nav__lang:hover { color: var(--film-ink); }
.nav .btn { min-height: 42px; padding: 0 18px; font-size: 15px; }
.nav__end { display: flex; align-items: center; gap: 14px; margin-left: 24px; }
@media (max-width: 980px) { .nav__links { display: none; } .nav__end { margin-left: auto; } }
@media (max-width: 400px) { .wordmark b { font-size: 21px; } .wordmark svg { width: 36px; } .nav__end { gap: 8px; } .nav .btn { padding: 0 14px; } }

/* ---------- the scroll film (frame sequence on a canvas, after cinema.js; poster underneath) ---------- */
.cine { position: relative; height: var(--length, 560vh); background: var(--film-bg); }
.cine__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.cine__stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 50%, rgb(var(--night-rgb) / .6) 100%),
    linear-gradient(to bottom, rgb(var(--night-rgb) / .55), transparent 20%, transparent 72%, var(--film-bg));
}
.cine__poster { position: absolute; inset: 0; margin: 0; overflow: hidden; }
.cine__poster img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 80% 30%; }
.cine__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* the graded frames are the poster's colours: once the canvas draws, the poster underneath is no longer needed */
.cine--live .cine__poster { visibility: hidden; }
.beat {
  --v: 0; --dir: 1;
  position: absolute; z-index: 3; inset: 0; display: grid; align-content: center; gap: 22px;
  padding: 110px max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))) 130px;
  opacity: var(--v); transform: translate3d(0, calc((1 - var(--v)) * 26px * var(--dir)), 0);
  filter: blur(calc((1 - var(--v)) * 8px)); pointer-events: none; text-shadow: 0 2px 24px rgb(var(--night-rgb) / .5);
}
.beat[data-on] { pointer-events: auto; }
.beat > * { max-width: min(640px, 100%); }
.beat--left { justify-items: start; background: linear-gradient(90deg, rgb(var(--night-rgb) / .82) 0%, rgb(var(--night-rgb) / .55) 36%, rgb(var(--night-rgb) / .12) 60%, transparent 72%); }
.beat--right { justify-items: end; text-align: right; background: linear-gradient(270deg, rgb(var(--night-rgb) / .82) 0%, rgb(var(--night-rgb) / .55) 36%, rgb(var(--night-rgb) / .12) 60%, transparent 72%); }
.beat--right .actions { justify-content: end; }
.beat--right .eyebrow { justify-content: end; }
.beat .display { font-size: clamp(54px, 8.4vw, 132px); }
/* beat--low: for top-down shots with the boat across the middle, the story sits in the lower third */
@media (min-width: 761px) {
  .beat--low { align-content: end; padding-bottom: 104px; background: linear-gradient(to top, rgb(var(--night-rgb) / .88) 0%, rgb(var(--night-rgb) / .6) 30%, transparent 55%); }
  .beat--low .display--md { font-size: clamp(46px, 5.6vw, 88px); }
  .beat--low > * { max-width: min(760px, 100%); }
}
.beat .display--md { font-size: clamp(46px, 6.6vw, 104px); }
/* squarer landscape screens (4:3 tablets, small laptops): the 16:9 film loses its sides, so the boats come closer to the
   text; a narrower column wraps the headline onto two lines, like on a wide screen */
@media (min-width: 761px) and (max-aspect-ratio: 3/2) and (orientation: landscape) { .beat > * { max-width: min(500px, 100%); } }

/* HUD: the film is a 2000 m race; a little boat rows along the bottom lane as you scroll */
.cine__hud { position: absolute; z-index: 4; left: var(--gutter); right: var(--gutter); bottom: 22px; pointer-events: none; display: grid; gap: 10px; }
.lane { position: relative; height: 34px; max-width: 520px; margin-inline: auto; width: 100%; }
.lane__water { position: absolute; left: 0; right: 0; top: 9px; height: 4px; border-radius: 2px; background: rgb(var(--ice-rgb) / .16); overflow: hidden; }
.lane__water::after { content: ""; position: absolute; inset: 0; background: var(--film-accent); transform-origin: left; transform: scaleX(var(--p, 0)); }
.lane__mark { position: absolute; top: 21px; transform: translateX(-50%); font-size: 11px; font-weight: 700; font-stretch: 80%; color: var(--film-ink-2); line-height: 1;
  pointer-events: auto; cursor: pointer; background: none; border: 0; padding: 0; font-family: inherit; transition: color .2s; }
/* a 44 px tap area around each small distance label */
.lane__mark::before { content: ""; position: absolute; inset: -18px -14px -12px; }
.lane__mark:hover { color: var(--film-ink); }
.lane__mark:focus-visible { outline: 2px solid var(--film-ink); outline-offset: 4px; border-radius: 3px; }
.lane__mark::after { content: ""; position: absolute; left: 50%; top: -9px; width: 1.5px; height: 6px; background: rgb(var(--ice-rgb) / .5); }
.lane__mark:first-of-type { transform: none; } .lane__mark:first-of-type::after { left: 0; }
.lane__mark:last-of-type { transform: translateX(-100%); } .lane__mark:last-of-type::after { left: auto; right: 0; }
.lane__mark.is-on { color: var(--film-ink); }
.lane__boat { position: absolute; top: 2px; left: 0; width: 34px; height: 18px; margin-left: -32px; transform: translateX(calc(var(--p, 0) * var(--lane-w, 520px))); color: var(--film-ink); }
.cine__cue { justify-self: center; display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 650; font-stretch: 112%; color: var(--film-ink-2); opacity: calc(1 - var(--p, 0) * 14); }
/* scroll sign: a mouse with a rolling wheel on desktop, two chevrons on touch screens; fades out as the film starts */
.cue__icon { width: 18px; height: 28px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; overflow: visible; }
.cue__wiel { fill: currentColor; stroke: none; animation: cue-wiel 1.8s ease-in-out infinite; }
.cue__pijl { display: none; stroke-linecap: round; stroke-linejoin: round; }
@keyframes cue-wiel { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 70% { transform: translateY(9px); opacity: 0; } 100% { opacity: 0; } }
@keyframes cue-pijl { 0%, 100% { transform: translateY(-3px); opacity: .45; } 50% { transform: translateY(3px); opacity: 1; } }
@media (hover: none), (pointer: coarse) {
  .cue__muis, .cue__wiel { display: none; }
  .cue__pijl { display: inline; animation: cue-pijl 1.6s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce) { .cue__wiel, .cue__pijl { animation: none; } }
@media (max-width: 760px) {
  .beat, .beat--left, .beat--right { align-content: end; justify-items: start; text-align: left; padding-bottom: 104px; gap: 16px;
    background: linear-gradient(to top, rgb(var(--night-rgb) / .92) 0%, rgb(var(--night-rgb) / .7) 45%, rgb(var(--night-rgb) / .3) 64%, transparent 80%); }
  .beat--right .actions, .beat--right .eyebrow { justify-content: start; }
  .cine__cue { order: -1; } .cue__tekst { display: none; } .cue__icon { width: 22px; height: 30px; }
  .beat .display { font-size: clamp(48px, 14vw, 72px); }
  .beat .display--md { font-size: clamp(42px, 12vw, 64px); }
  .beat .lede { font-size: 16px; }
}
/* short landscape phones: the beat text sits in the left half, smaller */
@media (max-height: 500px) and (orientation: landscape) {
  .beat, .beat--left, .beat--right { align-content: center; justify-items: start; text-align: left; padding: 76px var(--gutter) 60px; gap: 10px;
    background: linear-gradient(90deg, rgb(var(--night-rgb) / .86) 0%, rgb(var(--night-rgb) / .6) 45%, transparent 75%); }
  .beat > * { max-width: 56%; }
  .beat .display, .beat .display--md { font-size: clamp(34px, 6.4vw, 54px); }
  .beat .lede { font-size: 14.5px; max-width: 44ch; }
  .beat--right .actions, .beat--right .eyebrow { justify-content: start; }
  h1 .eyebrow { margin-bottom: 8px; }
  .cine__hud { bottom: 10px; } .cine__cue { display: none; }
  .btn { min-height: 44px; }
}
.is-capture .cine__cue { display: none; }
.cine--still { height: 100vh; height: 100svh; }
.cine--still .beat:not(:first-of-type), .cine--still .cine__hud { display: none; }
/* reduced motion: a poster and the beats stacked as a normal page */
.cine--static { height: auto; }
.cine--static .cine__stage { position: relative; height: auto; overflow: clip; }
.cine--static .cine__poster { position: sticky; top: 0; height: 100vh; height: 100svh; margin-bottom: -100vh; margin-bottom: -100svh; }
.cine--static .cine__canvas, .cine--still .cine__canvas { display: none; }
.cine--static .beat { position: relative; inset: auto; min-height: 80svh; opacity: 1; transform: none; filter: none; }
.cine--static .cine__hud, .cine--static .cine__stage::after, .cine--static .cine__stage::before { display: none; }
.cine--static .cine__poster img { filter: brightness(.45); }
.cine--static .beat { background: none; }

/* ---------- paper: the information layer (light; night water in dark mode) ---------- */
.paper { background: var(--color-page); color: var(--color-ink); }
.dark { background: var(--film-bg); color: var(--film-ink); }
.band { background: var(--rb-navy-900); color: var(--film-ink); }
.section { padding: clamp(80px, 11vw, 160px) var(--gutter); }
.section > .in { max-width: var(--max); margin: 0 auto; }
.sec-head { display: grid; gap: 22px; margin-bottom: clamp(40px, 6vw, 80px); max-width: 860px; }
.sec-head--split { max-width: none; grid-template-columns: 1.15fr 1fr; align-items: end; gap: 22px 64px; }
.sec-head--split .lede { padding-bottom: 6px; }
@media (max-width: 900px) { .sec-head--split { grid-template-columns: 1fr; } }
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
[data-reveal].in { opacity: 1; transform: none; }

/* intro split with proof numbers */
.split { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.split__media { border-radius: 6px; overflow: hidden; background: var(--color-surface-2); }
.split__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }
.split__body { display: grid; gap: 24px; }
.split__body p:not(.lede) { color: var(--color-ink-2); max-width: 56ch; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } .split__media img { aspect-ratio: 16 / 10; } }
.facts { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1.5px solid var(--color-ink); margin-top: 8px; }
.facts > div { padding: 16px 16px 4px 0; border-right: 1px solid var(--color-line); }
.facts > div + div { padding-left: 16px; }
.facts > div:last-child { border-right: 0; }
.facts b { display: block; font-weight: 820; font-stretch: 62%; font-size: clamp(40px, 4.6vw, 60px); line-height: .9; }
.facts span { display: block; margin-top: 6px; font-size: 14px; color: var(--color-ink-2); line-height: 1.3; }
@media (max-width: 620px) { .facts { grid-template-columns: 1fr 1fr; } .facts > div:nth-child(2) { border-right: 0; } .facts > div:nth-child(3) { padding-left: 0; } .facts > div:nth-child(n+3) { border-top: 1px solid var(--color-line); } }

/* the 12-week course (drawn by site.js with the app's drawCourse) */
.course { margin: 8px 0 0; }
.course svg { display: block; width: 100%; height: auto; }
.course text { font-family: var(--font-family-sans); font-variant-numeric: tabular-nums; }
.c-board { font-size: 12.5px; font-weight: 760; font-stretch: 75%; fill: var(--color-ink); }
.c-note { font-size: 12px; font-weight: 600; fill: var(--color-ink-3); }
.c-lane { font-size: 13px; font-weight: 800; font-stretch: 75%; fill: var(--color-ink-2); }
.c-wk { font-size: 13px; font-weight: 700; font-stretch: 88%; fill: var(--color-ink-2); }
.c-wk.is-cur { fill: var(--color-page); }
.c-phase { font-size: 13.5px; font-weight: 600; font-stretch: 88%; fill: var(--color-ink-2); }
.c-phase.is-cur { font-weight: 800; fill: var(--color-ink); }
.course__note { margin-top: 14px; font-size: 14px; color: var(--color-ink-2); }
.course__fallback { font-size: 15px; color: var(--color-ink-2); }
.course.is-drawn .course__fallback { display: none; }

.phases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
.phase { background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: var(--panel-radius); padding: 20px; display: grid; gap: 10px; align-content: start; }
.phase__top { display: flex; align-items: center; gap: 12px; }
.phase__top svg { width: 50px; height: 16px; flex: none; }
.phase h3 { font-size: 24px; }
.phase .wk { font-size: 14px; font-weight: 650; color: var(--color-ink-2); }
.phase p { font-size: 15.5px; color: var(--color-ink-2); }
@media (max-width: 860px) { .phases { grid-template-columns: 1fr; } }

/* features with app screenshots in drawn phone frames */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 40px 28px; margin-top: clamp(56px, 8vw, 104px); }
.feature { display: grid; gap: 18px; align-content: start; }
.feature h3 { font-size: 24px; }
.feature p { font-size: 15.5px; color: var(--color-ink-2); }
.feature .phone { margin: 0 auto 6px; }

.phone {
  --w: 260px;
  position: relative; width: var(--w); max-width: 100%; padding: 12px 10px; border-radius: calc(var(--w) * .16);
  background: var(--device-frame);
  box-shadow: 0 0 0 1px rgb(var(--ice-rgb) / .14) inset, 0 30px 60px -28px rgb(var(--ink-rgb) / .55), 0 2px 0 0 rgb(var(--ice-rgb) / .08) inset;
}
.phone::before { content: ""; position: absolute; top: 5px; left: 50%; width: 22%; height: 3px; border-radius: 3px; transform: translateX(-50%); background: rgb(var(--ice-rgb) / .16); }
.phone picture, .phone img { display: block; width: 100%; height: auto; border-radius: calc(var(--w) * .12); overflow: hidden; }
.phone--land { --w: 720px; padding: 10px 14px; border-radius: 34px; }
.phone--land::before { top: 50%; left: 5px; width: 3px; height: 18%; transform: translateY(-50%); }
.phone--land picture, .phone--land img { border-radius: 24px; }
.phone--sm { --w: 230px; }

/* ergo: zones from your 2k, on PM5 glass */
.ergo-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
@media (max-width: 980px) { .ergo-grid { grid-template-columns: 1fr; } }
.pm { background: var(--pm5-frame); border-radius: 18px; padding: 10px; display: grid; gap: 8px; color: var(--pm5-digit); }
.pm__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 10px 12px 12px; color: var(--rb-navy-100); }
.pm__in label { font-size: 13px; font-weight: 650; font-stretch: 112%; color: var(--rb-navy-300); }
.pm__in input {
  width: 9ch; min-height: 48px; padding: 0 14px; border-radius: var(--radius-key); border: 0; background: var(--rb-lcd-key);
  color: var(--rb-navy-0); font: 800 26px/1 var(--font-family-sans); font-stretch: 70%; text-align: center;
  box-shadow: inset 0 -2px 0 rgb(0 0 0 / .28);
}
.pm__in input:focus-visible { outline: 2px solid var(--rb-navy-100); outline-offset: 2px; }
.pm__hint { flex-basis: 100%; font-size: 13px; color: var(--rb-navy-300); }
.zone { display: grid; grid-template-columns: 54px 1fr auto; gap: 4px 14px; align-items: center; background: var(--pm5-glass); border-radius: var(--pm5-radius); padding: 10px 14px; }
.zone .tag { grid-row: span 2; display: grid; place-items: center; height: 30px; border-radius: var(--radius-board); background: var(--pm5-digit); color: var(--pm5-glass); font-size: 14px; font-weight: 800; font-stretch: 75%; }
.zone .nm { font-size: 13px; font-weight: 650; font-stretch: 112%; color: var(--pm5-label); }
.zone .rt { font-size: 13px; font-weight: 650; font-stretch: 112%; color: var(--pm5-label); text-align: right; }
.zone .sp { grid-column: 2; font-size: 30px; line-height: 1; }
.zone .gv { grid-column: 3; font-size: 13px; color: var(--pm5-label); text-align: right; max-width: 22ch; line-height: 1.25; }
@media (max-width: 480px) { .zone { grid-template-columns: 46px 1fr; } .zone .rt, .zone .gv { grid-column: 2; text-align: left; } .zone .sp { font-size: 26px; } .zone .tag { grid-row: span 4; } }
.lcd { display: inline-block; height: 1em; vertical-align: -.08em; overflow: visible; fill: currentColor; }
.lcd .off { opacity: .09; }
.note { font-size: 14px; color: var(--color-ink-2); margin-top: 14px; max-width: 60ch; }
.ergo-side { display: grid; gap: 22px; }
.ergo-side figure img { border-radius: 6px; aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.ticks { display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 22px; color: var(--color-ink-2); font-size: 16px; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 8px; height: 8px; background: var(--color-accent); border-radius: 1px; }
.ticks li b { color: var(--color-ink); font-weight: 700; }
.dark .ticks li, .band .ticks li { color: var(--film-ink-2); }
.dark .ticks li b, .band .ticks li b { color: var(--film-ink); }
.dark .ticks li::before, .band .ticks li::before { background: var(--film-accent); }
.figcap { font-size: 13px; color: var(--color-ink-3); margin-top: 8px; }

/* PM5 + water: dark band */
.water-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.water-grid > *, .crew-grid > *, .ergo-grid > *, .split > * { min-width: 0; }
.water-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 64px; }
@media (max-width: 860px) { .water-cols { grid-template-columns: 1fr; } }
.band .lede, .band p { color: var(--film-ink-2); }
.band .phone--land { margin: 0 auto; }
.start-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 18px; }
.start-row figure { display: grid; gap: 10px; }
.start-row figcaption { font-size: 14px; color: var(--film-ink-2); }
.start-row figcaption b { color: var(--film-ink); font-weight: 760; font-stretch: 80%; font-size: 18px; margin-right: 6px; }
.start-row .phone--land { --w: 100%; padding: 6px 8px; border-radius: 18px; }
.start-row .phone--land picture, .start-row .phone--land img { border-radius: 12px; }
@media (max-width: 760px) { .start-row { grid-template-columns: 1fr; } }
.aside { font-size: 14.5px; color: var(--film-ink-2); border-left: 2px solid var(--film-accent); padding: 4px 0 4px 14px; max-width: 64ch; }
.aside a { color: var(--film-ink); }

/* crew */
.crew-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
@media (max-width: 900px) { .crew-grid { grid-template-columns: 1fr; } }
.panel { background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: var(--panel-radius); padding: 22px; display: grid; gap: 14px; }
.panel h3 { font-size: 22px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .two { grid-template-columns: 1fr; } }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: var(--radius-board); box-shadow: inset 0 0 0 1.5px var(--color-line-strong); font-size: 14.5px; font-weight: 620; color: var(--color-ink); }
.crew-photo img { border-radius: 6px; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* nutrition and sources */
.soon-tag { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--radius-board); box-shadow: inset 0 0 0 1.5px var(--color-ink); font-size: 13px; font-weight: 700; }
.cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 860px) { .cols-3 { grid-template-columns: 1fr; } }
.cols-3 .panel p { font-size: 15.5px; color: var(--color-ink-2); }
.sources { display: grid; gap: 0; border-top: 1.5px solid var(--color-ink); }
.sources li { display: grid; grid-template-columns: 170px 1fr; gap: 6px 24px; padding: 16px 0; border-bottom: 1px solid var(--color-line); }
.sources .what { font-size: 13px; font-weight: 650; font-stretch: 112%; color: var(--color-ink-2); padding-top: 3px; }
.sources .ref { font-size: 15.5px; color: var(--color-ink); }
.sources .ref a { color: var(--color-accent-ink); text-underline-offset: 3px; overflow-wrap: anywhere; }
@media (max-width: 640px) { .sources li { grid-template-columns: 1fr; } }

/* FAQ */
.faq { border-top: 1.5px solid var(--color-ink); max-width: 900px; }
.faq details { border-bottom: 1px solid var(--color-line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 0; font-size: 19px; font-weight: 700; font-stretch: 92%; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 14px; height: 14px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-3px, -3px); transition: transform var(--duration-medium) var(--ease); }
.faq details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq .a { padding: 0 0 22px; color: var(--color-ink-2); max-width: 68ch; display: grid; gap: 10px; }
.faq .a a { color: var(--color-accent-ink); }

/* finale */
.finale { position: relative; overflow: hidden; min-height: 86svh; display: grid; place-items: center; text-align: center; padding: 120px var(--gutter); }
.finale picture, .finale > img { position: absolute; inset: 0; }
.finale picture img { width: 100%; height: 100%; object-fit: cover; filter: var(--grade) brightness(.62); }
.finale::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, var(--film-bg), rgb(var(--night-rgb) / .35) 30%, rgb(var(--night-rgb) / .5) 70%, var(--film-bg)); }
.finale > div { position: relative; z-index: 1; display: grid; gap: 24px; justify-items: center; }
.finale .actions { justify-content: center; }
.finale .lede { margin-inline: auto; }

/* footer */
.footer { background: var(--film-bg); color: var(--film-ink-2); padding: 64px var(--gutter) 32px; border-top: 1px solid rgb(var(--ice-rgb) / .1); }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.25fr; gap: 32px; max-width: var(--max); margin: 0 auto; font-size: 15px; }
.footer__grid h2 { font-size: 13px; font-weight: 650; font-stretch: 112%; color: var(--film-ink); margin: 0 0 14px; }
.footer__grid a { display: block; padding: 5px 0; text-decoration: none; }
.footer__grid a:hover { color: var(--film-ink); text-decoration: underline; text-underline-offset: 3px; }
.footer__grid p { max-width: 36ch; margin-top: 14px; }
.footer__mail { white-space: nowrap; }
@media (max-width: 760px) { .footer__mail { white-space: normal; } }
.footer .wordmark { color: var(--film-ink); }
.footer__mark { font-weight: 830; font-stretch: 62%; font-size: clamp(72px, 17vw, 250px); line-height: .8; letter-spacing: -.01em; text-align: center; margin: 64px 0 28px; color: transparent; -webkit-text-stroke: 1px rgb(var(--ice-rgb) / .22); white-space: nowrap; overflow: hidden; }
.footer__legal { max-width: var(--max); margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; font-size: 13px; }
.footer__legal p { max-width: 70ch; }
@media (max-width: 760px) { .footer__grid { grid-template-columns: 1fr 1fr; } .footer__grid > :first-child { grid-column: 1 / -1; } }

/* plain pages: privacy, colofon, 404 */
.page-hero { padding: calc(var(--nav-h) + clamp(56px, 8vw, 110px)) var(--gutter) clamp(48px, 6vw, 80px); position: relative; overflow: hidden; }
.page-hero picture { position: absolute; inset: 0; }
.page-hero picture img { width: 100%; height: 100%; object-fit: cover; filter: var(--grade) brightness(.5); }
.page-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgb(var(--night-rgb) / .5), rgb(var(--night-rgb) / .3) 50%, var(--film-bg)); }
.page-hero .in { position: relative; z-index: 1; max-width: var(--max); margin: 0 auto; display: grid; gap: 18px; }
.page-hero .credit { font-size: 13px; color: var(--film-ink-2); margin-top: 10px; }
.page-hero .credit a { color: inherit; text-underline-offset: 3px; }
.prose { max-width: 760px; margin: 0 auto; display: grid; gap: 16px; font-size: 17px; }
.prose h2 { font-size: clamp(28px, 3vw, 36px); font-weight: 800; font-stretch: 70%; line-height: 1; margin-top: 28px; }
.prose h3 { font-size: 21px; margin-top: 8px; }
.prose p, .prose li { color: var(--color-ink-2); }
.prose ul { display: grid; gap: 8px; }
.prose ul li { position: relative; padding-left: 20px; }
.prose ul li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; background: var(--color-accent); border-radius: 1px; }
.prose a { color: var(--color-accent-ink); text-underline-offset: 3px; overflow-wrap: anywhere; }
.prose strong { color: var(--color-ink); }
.prose .meta { font-size: 14px; color: var(--color-ink-3); }
.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th, .table td { text-align: left; vertical-align: top; padding: 12px 12px 12px 0; border-bottom: 1px solid var(--color-line); color: var(--color-ink-2); }
.table th { color: var(--color-ink); font-weight: 700; }
.credits-list { display: grid; gap: 0; border-top: 1.5px solid var(--color-ink); }
.credits-list li { display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--color-line); }
.credits-list img { width: 120px; height: 80px; object-fit: cover; border-radius: 4px; }
.credits-list p { font-size: 15px; color: var(--color-ink-2); }
.credits-list p b { color: var(--color-ink); }
@media (max-width: 480px) { .credits-list li { grid-template-columns: 88px 1fr; } .credits-list img { width: 88px; height: 64px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1; transform: none; }
}
.prose .credits-list li { padding-left: 0; }
.prose .credits-list li::before { content: none; }

/* meters: what you can connect (dark band) */
.meters { display: grid; gap: 20px; }
.meters__head p { margin-top: 10px; max-width: 64ch; color: var(--film-ink-2); }
.meters__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1100px) { .meters__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .meters__grid { grid-template-columns: 1fr; } }
.meters .panel { background: rgb(var(--ice-rgb) / .05); border-color: rgb(var(--ice-rgb) / .14); align-content: start; gap: 10px; }
.meters .panel h4 { font-size: 20px; font-weight: 800; font-stretch: 80%; color: var(--film-ink); line-height: 1.1; }
.meters .panel p { font-size: 15px; color: var(--film-ink-2); }
.meter-tag { justify-self: start; display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--radius-board); font-size: 12.5px; font-weight: 700; color: var(--film-ink-2); box-shadow: inset 0 0 0 1.5px rgb(var(--ice-rgb) / .35); }
.meter-tag--nu { color: var(--rb-navy-0); background: var(--film-accent); box-shadow: none; }

/* race preparation on the home page: copy next to the plan screenshot */
.race__grid { display: grid; grid-template-columns: 1fr minmax(0, 320px); gap: clamp(40px, 7vw, 112px); align-items: center; }
.race__grid > * { min-width: 0; }
.race__body { display: grid; gap: 24px; max-width: 680px; }
.race__list { gap: 14px; }
.race__body .note { color: var(--color-ink-2); font-size: 15px; max-width: 62ch; }
.race__media .phone { --w: 300px; margin: 0 auto; }
@media (max-width: 860px) { .race__grid { grid-template-columns: 1fr; } .race__media .phone { --w: 280px; } }