/* ───────────────────────────────────────────────────────────────
   KFS 2.0 — design system
   Dark by default, "Morning run" light theme via [data-theme=light]
   ─────────────────────────────────────────────────────────────── */
:root {
  --bg: #0A0A0B;
  --bg-2: #0F0F11;
  --band: #121215;
  --spark: #4A4A54;
  --surface: #141417;
  --surface-2: #1A1A1E;
  --surface-3: #25252B;
  --line: rgba(255,255,255,.08);
  --line-2: rgba(255,255,255,.15);
  --text: #F5F3EF;
  --text-2: #BAB6AF;
  --muted: #7F7B75;
  --accent: #FC4C02;
  --accent-2: #FF8A3D;
  --accent-soft: rgba(252,76,2,.14);
  --gold: #F4C14F;
  --silver: #C8CDD6;
  --bronze: #D58B5B;
  --up: #3DDC84;
  --down: #FF5F57;
  --glass: rgba(14,14,16,.66);
  /* hero: its own colour set so the nav and copy over it follow the theme */
  --hero-bg: #0A0A0B;
  --hero-ink: #FFFFFF;
  --hero-ink-2: rgba(255,255,255,.78);
  --hero-muted: rgba(255,255,255,.6);
  --hero-glass: rgba(255,255,255,.08);
  --hero-line: rgba(255,255,255,.16);
  --hero-card-shadow: none;
  --print-bg: #F5F3EF;
  --print-ink: #6B665F;
  --print-shadow: 0 50px 90px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.08);
  --shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 24px 48px -28px rgba(0,0,0,.8);
  --radius: 22px;
  --radius-sm: 14px;
  --ease: cubic-bezier(.22,1,.36,1);
  --font-display: 'Archivo', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  /* --sec: the one gap between page sections (hero, ticker, week, leaderboard, footer).
     --tilt: allowance for the ticker's slant (it's rotated 1.4deg, so its ends sit ~1.3vw above/below its middle) */
  --sec: clamp(48px, 6vh, 72px);
  --tilt: 1.3vw;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #F4F1EC;
  --bg-2: #EDE9E2;
  --band: #E9E3D9;
  --spark: #CBC1B2;
  --surface: #FFFFFF;
  --surface-2: #F8F5F0;
  --surface-3: #ECE7DF;
  --line: rgba(24,18,10,.08);
  --line-2: rgba(24,18,10,.16);
  --text: #161412;
  --text-2: #4A4640;
  --muted: #86817A;
  --accent-soft: rgba(252,76,2,.10);
  --gold: #D49C12;
  --silver: #8A93A1;
  --bronze: #B66A38;
  --up: #12A150;
  --down: #E5484D;
  --glass: rgba(250,248,244,.72);
  --hero-bg: #F4F1EC;
  --hero-ink: #161412;
  --hero-ink-2: #4A4640;
  --hero-muted: #75706A;
  --hero-glass: rgba(255,255,255,.72);
  --hero-line: rgba(24,18,10,.12);
  --hero-card-shadow: 0 14px 30px -20px rgba(70,35,10,.35);
  --print-bg: #1A1816;   /* an ink print on paper: the inverse of the dark theme's light print */
  --print-ink: #A59F96;
  --print-shadow: 0 40px 70px -34px rgba(90,40,10,.45), 0 2px 6px rgba(24,18,10,.12);
  --shadow: 0 1px 2px rgba(24,18,10,.04), 0 24px 48px -30px rgba(24,18,10,.25);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; overflow-x: clip; }
html.locked { overflow: hidden; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  transition: background-color .4s var(--ease), color .4s var(--ease);
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
[hidden] { display: none !important; }
.num { font-family: var(--font-display); font-stretch: 80%; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* theme switch = circular reveal */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
/* theme switch: the new theme shows through a soft-edged circle grown from the button (core.js animates size and position) */
html.theme-bleed::view-transition-new(root) {
  -webkit-mask: radial-gradient(closest-side, #000 72%, transparent) 0 0 / 0 0 no-repeat;
  mask: radial-gradient(closest-side, #000 72%, transparent) 0 0 / 0 0 no-repeat;
}
.theme-flood { position: fixed; z-index: 1000; pointer-events: none; border-radius: 50%; will-change: transform; }
html.theme-switching .theme-sun, html.theme-switching .theme-moon { animation: themeIcon .7s var(--ease); }
@keyframes themeIcon { from { transform: rotate(-140deg) scale(.3); opacity: 0; } }

/* ── scroll progress ───────────────────────────────────────── */
.progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transform-origin: 0 50%; transform: scaleX(0);
  z-index: 100; pointer-events: none;
}

/* ── progressive blur behind the floating nav (desktop) ─────────
   Stacked layers blur harder toward the top edge; masks fade each out.
   Note: no opacity on this container — that would cut the backdrop. */
.top-blur { position: fixed; top: 0; left: 0; right: 0; height: 104px; z-index: 55; pointer-events: none; visibility: hidden; }
.top-blur.on { visibility: visible; }
.top-blur i { position: absolute; inset: 0; -webkit-backdrop-filter: blur(var(--b)); backdrop-filter: blur(var(--b)); -webkit-mask-image: linear-gradient(to bottom, #000 var(--m1), transparent var(--m2)); mask-image: linear-gradient(to bottom, #000 var(--m1), transparent var(--m2)); }
.top-blur i:nth-child(1) { --b: 2px; --m1: 45%; --m2: 100%; }
.top-blur i:nth-child(2) { --b: 6px; --m1: 30%; --m2: 80%; }
.top-blur i:nth-child(3) { --b: 14px; --m1: 15%; --m2: 60%; }
.top-blur::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 75%, transparent) 0%, color-mix(in srgb, var(--bg) 30%, transparent) 55%, transparent 100%); }

/* ── top nav ───────────────────────────────────────────────── */
.nav {
  position: fixed; top: 12px; left: 50%;
  translate: -50% 0;
  width: calc(min(var(--wrap), 100% - 2 * var(--gutter)) + 22px);   /* the logo inside lines up with the content column */
  height: 58px;
  display: flex; align-items: center; gap: 14px;
  padding: 0 8px 0 10px;
  border-radius: 18px;
  background: transparent;
  border: 1px solid transparent;
  z-index: 60;
  transition: background .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.nav.scrolled, .nav.solid {
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  border-color: var(--line);
  box-shadow: var(--shadow);
}
.nav:not(.scrolled):not(.solid) { color: var(--hero-ink); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.brand-logo {
  display: block; height: 26px; width: auto;
  filter: drop-shadow(0 4px 14px rgba(252,76,2,.35));
  transition: transform .5s var(--ease);
}
.brand:hover .brand-logo { transform: translateX(3px) skewX(-6deg); } /* a little lean forward, like a sprint start */
.brand-word { font-family: var(--font-display); font-weight: 800; font-stretch: 112%; font-size: 15px; text-transform: uppercase; letter-spacing: .01em; white-space: nowrap; }
.brand-ver { font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); letter-spacing: .04em; }
.nav:not(.scrolled):not(.solid) .brand-ver { background: color-mix(in srgb, var(--hero-ink) 12%, transparent); color: var(--hero-ink); }

.tabs {
  position: relative; display: flex; gap: 2px; margin: 0 auto;
  padding: 4px; border-radius: 13px;
  background: color-mix(in srgb, var(--surface-2) 80%, transparent);
  border: 1px solid var(--line);
}
.nav:not(.scrolled):not(.solid) .tabs { background: color-mix(in srgb, var(--hero-ink) 7%, transparent); border-color: color-mix(in srgb, var(--hero-ink) 12%, transparent); }
.tab {
  position: relative; z-index: 1;
  padding: 7px 14px; border-radius: 9px;
  font-size: 13px; font-weight: 600; white-space: nowrap;
  color: inherit; opacity: .72;
  transition: opacity .2s, color .3s var(--ease);
}
.tab:hover { opacity: 1; }
.tab[aria-selected="true"] { opacity: 1; color: var(--bg); }
.nav:not(.scrolled):not(.solid) .tab[aria-selected="true"] { color: var(--hero-bg); }
.tabs-ind {
  position: absolute; top: 4px; bottom: 4px; left: 0; width: 0;
  border-radius: 9px; background: var(--text);
  transition: transform .45s var(--ease), width .45s var(--ease);
}
.nav:not(.scrolled):not(.solid) .tabs-ind { background: var(--hero-ink); }
.nav-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.tabs + .nav-actions { margin-left: 0; }
.icon-btn {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 12px;
  border: 1px solid var(--line);
  transition: background .2s, transform .2s var(--ease);
}
.nav:not(.scrolled):not(.solid) .icon-btn { border-color: color-mix(in srgb, var(--hero-ink) 18%, transparent); }
.nav:not(.scrolled):not(.solid) .icon-btn:hover { background: color-mix(in srgb, var(--hero-ink) 10%, transparent); }
.icon-btn:hover { background: var(--surface-2); }
.icon-btn:active { transform: scale(.92); }
.icon-btn svg { width: 18px; height: 18px; }
.theme-sun { display: none; }
:root[data-theme="light"] .theme-sun { display: block; }
:root[data-theme="light"] .theme-moon { display: none; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; border-radius: 14px;
  font-weight: 600; font-size: 14px; text-decoration: none; white-space: nowrap;
  transition: transform .35s var(--ease), background .2s, box-shadow .3s, border-color .2s;
}
.btn-sm { height: 40px; padding: 0 16px; border-radius: 12px; font-size: 13px; }
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 10px 30px -12px rgba(252,76,2,.8); }
.btn-primary:hover { background: #ff5a14; box-shadow: 0 14px 34px -10px rgba(252,76,2,.9); }
.btn-ghost { border: 1px solid var(--line-2); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-glass { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.btn-glass:hover { background: rgba(255,255,255,.2); }
.btn:active { transform: scale(.96); }
.btn .arrow { transition: transform .35s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
.nav-team { opacity: .8; font-size: 13px; font-weight: 600; text-decoration: none; padding: 8px 10px; border-radius: 10px; }
.nav-team:hover { opacity: 1; background: var(--surface-2); }
.nav:not(.scrolled):not(.solid) .nav-team:hover { background: color-mix(in srgb, var(--hero-ink) 10%, transparent); }

/* ── hero ──────────────────────────────────────────────────── */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: calc(100vh - 46px); min-height: calc(100svh - 46px);   /* the ticker shows on the first screen */
  display: flex; flex-direction: column; justify-content: center;
  padding: 120px var(--gutter) clamp(28px, 6vh, 56px);
  color: var(--hero-ink); background: var(--hero-bg);
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(55% 65% at 78% 45%, rgba(252,76,2,.22), transparent 65%), radial-gradient(70% 60% at 0% 100%, rgba(252,76,2,.14), transparent 60%);
}
.hero-inner { width: 100%; max-width: var(--wrap); margin: 0 auto; will-change: transform, opacity; }
.live-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 10px; border-radius: 99px;
  background: var(--hero-glass); border: 1px solid var(--hero-line);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
}
.pulse { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.pulse::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--accent); animation: pulse 1.8s var(--ease) infinite; }
@keyframes pulse { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }
.hero-title {
  font-family: var(--font-display); font-weight: 900; font-stretch: 125%;
  font-size: clamp(54px, 12.5vw, 196px);
  line-height: .84; letter-spacing: -.035em; text-transform: uppercase;
}
.hero-title .line { display: block; overflow: hidden; padding-bottom: .04em; white-space: nowrap; }
.hero-title .ch { display: inline-block; transform: translateY(105%); animation: rise 1s var(--ease) forwards; animation-delay: calc(var(--i) * 35ms + 150ms); }
.hero-title .accent { color: var(--accent); }
@keyframes rise { to { transform: none; } }

.hero-sub { max-width: 460px; font-size: clamp(15px, 1.4vw, 18px); color: var(--hero-ink-2); }
.hero-ctas { display: flex; gap: 10px; flex-wrap: wrap; }
.fade-up { opacity: 0; transform: translateY(16px); animation: fadeUp .9s var(--ease) forwards; animation-delay: var(--d, .6s); }
@keyframes fadeUp { to { opacity: 1; transform: none; } }


/* ── marquee ───────────────────────────────────────────────── */
.marquee {
  position: relative; z-index: 2; overflow: hidden;
  background: var(--accent); color: #fff;
  padding: 14px 0; margin: 0 -2%; width: 104%;
  transform: rotate(-1.4deg);
  box-shadow: 0 20px 40px -20px rgba(252,76,2,.6);
}
.marquee-track { display: flex; width: max-content; animation: marquee 48s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
  display: flex; align-items: center; gap: 22px; padding-right: 22px;
  font-family: var(--font-display); font-weight: 800; font-stretch: 112%;
  font-size: clamp(16px, 2vw, 22px); text-transform: uppercase; letter-spacing: .01em; white-space: nowrap;
}
.marquee-item::after { content: "✦"; font-size: .8em; opacity: .75; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ── layout ────────────────────────────────────────────────── */
.main { max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: calc(var(--sec) + var(--tilt)) var(--gutter) 0; min-height: 80vh; }
.view { display: none; }
.view.active { display: block; animation: viewIn .6s var(--ease); }
@keyframes viewIn { from { opacity: 0; transform: translateY(14px); } }
.view-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }
.h2.h2-date { font-size: clamp(28px, 3.2vw, 44px); } /* week date titles: compact so stats + podium fit one screen */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 6px;
}
.h2 {
  font-family: var(--font-display); font-weight: 900; font-stretch: 118%;
  font-size: clamp(34px, 6vw, 72px); line-height: .92; letter-spacing: -.03em; text-transform: uppercase;
}
.h3 {
  font-family: var(--font-display); font-weight: 800; font-stretch: 112%;
  font-size: clamp(20px, 2.4vw, 28px); letter-spacing: -.01em; text-transform: uppercase;
  margin: 56px 0 16px;
}
.lede { color: var(--text-2); max-width: 520px; margin-top: 12px; }
.head-meta { color: var(--muted); font-size: 13px; text-align: right; }
.head-meta strong { color: var(--text); font-weight: 600; }
.section-gap { height: 18px; }

/* headings break into even lines; body copy avoids one-word last lines */
.h2, .sec-title, .earth-title, .footer-cta, .flex-title, .sheet-title, .team-title, .club-week { text-wrap: balance; }
.lede, .hero-sub, .flex-sub, .sheet-sub, .team-intro p, .empty-state p { text-wrap: pretty; }

/* ── section rhythm: headers, bands, spacing ──────────────── */
.sec-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.sec-head.spaced, .band + .sec-head.spaced { margin-top: var(--sec); }
.sec-title {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 800; font-stretch: 112%;
  font-size: clamp(18px, 2vw, 24px); letter-spacing: -.01em; text-transform: uppercase; white-space: nowrap;
}
.sec-title::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--accent); transform: skewX(-12deg); }
.sec-rule { flex: 1; height: 1px; min-width: 24px; background: linear-gradient(90deg, var(--line-2), transparent); }
.sec-meta { color: var(--muted); font-size: 13px; white-space: nowrap; }
.band {
  position: relative; isolation: isolate;
  margin-top: var(--sec);
  padding-block: var(--sec);
}
.band::before {   /* full-bleed tint, wider than the content column */
  content: ""; position: absolute; z-index: -2; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw);
  background: radial-gradient(70% 160px at 50% 0%, var(--accent-soft), transparent), var(--band);
  border-block: 1px solid var(--line);
}
.band::after {    /* oversized outlined word as a section watermark */
  content: attr(data-mark); position: absolute; z-index: -1; right: 0; top: clamp(10px, 2vw, 24px);
  font-family: var(--font-display); font-weight: 900; font-stretch: 118%; font-style: italic;
  font-size: clamp(64px, 12vw, 170px); line-height: .8; letter-spacing: -.03em; text-transform: uppercase;
  color: transparent; -webkit-text-stroke: 1px var(--line-2); pointer-events: none; user-select: none;
}
.band .sec-head { position: relative; }
.band .sec-meta { padding: 4px 12px; border-radius: 99px; background: var(--band); border: 1px solid var(--line); color: var(--text-2); }
.flat-sec { margin-top: 40px; }

/* reveal */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; }

/* ── cards / spotlight ─────────────────────────────────────── */
.card {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.spot::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(252,76,2,.13), transparent 45%);
  opacity: 0; transition: opacity .4s;
}
.spot::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; border-radius: inherit; padding: 1px;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(252,76,2,.55), transparent 50%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .4s;
}
.spot:hover::before, .spot:hover::after { opacity: 1; }
.spot > * { position: relative; z-index: 1; }

/* ── bento stats ───────────────────────────────────────────── */
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tile { padding: 18px 20px; min-height: 120px; display: flex; flex-direction: column; justify-content: space-between; }
.tile.big { grid-column: span 2; grid-row: span 2; padding: 20px 24px; }
.tile-lbl { font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
.tile-val { font-size: clamp(36px, 4vw, 52px); line-height: 1; margin-top: 10px; }
.tile-val small { font-size: .42em; font-weight: 700; color: var(--muted); margin-left: 4px; font-stretch: 100%; }
.tile-sub { font-size: 12px; color: var(--muted); margin-top: 6px; }
.tile.big .tile-val { font-size: clamp(64px, 8vw, 112px); }
.tile.big.no-spark { justify-content: center; }
.big-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.ring { width: 100px; height: 100px; flex-shrink: 0; }
.ring circle { fill: none; stroke-width: 9; }
.ring .track { stroke: var(--surface-3); }
.ring .fill { stroke-linecap: round; stroke-dasharray: 289; stroke-dashoffset: 289; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 1.6s var(--ease) .2s; }
.in .ring .fill, .ring.in .fill { stroke-dashoffset: var(--off, 289); }
.ring text { fill: var(--text); font-family: var(--font-display); font-weight: 800; font-stretch: 80%; font-size: 22px; }
.ring .ring-sub { fill: var(--muted); font-family: var(--font-body); font-weight: 600; font-size: 9px; letter-spacing: .08em; }
.spark-area { position: relative; margin-top: 44px; height: 46px; display: flex; align-items: flex-end; gap: 3px; cursor: crosshair; touch-action: pan-y; outline: none; border-radius: 6px; }
.spark-area:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.spark-area i { flex: 1; height: var(--h); min-height: 3px; border-radius: 3px; background: var(--spark); transform-origin: bottom; transform: scaleY(0); transition: transform .9s var(--ease), background .25s, opacity .25s; transition-delay: calc(var(--i) * 18ms), 0s, 0s; pointer-events: none; }
.spark-area i.cur { background: var(--accent); }
.in .spark-area i { transform: scaleY(var(--s, 1)); }
.spark-area.scrubbing i { transition: transform .32s var(--ease), background .2s, opacity .2s; transition-delay: 0s; opacity: .6; }
.spark-area.scrubbing i.near { opacity: .9; background: color-mix(in srgb, var(--accent) 45%, var(--spark)); }
.spark-area.scrubbing i.cur { opacity: .9; }
.spark-area.scrubbing i.hot { opacity: 1; background: linear-gradient(180deg, var(--accent-2), var(--accent)); box-shadow: 0 0 18px -2px rgba(252,76,2,.75); }
.spark-tip {
  position: absolute; z-index: 3; bottom: calc(100% + 32px); left: 0;
  padding: 6px 10px; border-radius: 10px; white-space: nowrap; pointer-events: none;
  background: var(--text); color: var(--bg); font: 500 12px var(--font-body);
  opacity: 0; transform: translate(-50%, 6px) scale(.94); transition: opacity .18s, transform .3s var(--ease), left .22s var(--ease), bottom .22s var(--ease);
}
.spark-tip b { font-weight: 700; }
.spark-tip.show { opacity: 1; transform: translate(-50%, 0); }
.spark-tip::after { content: ""; position: absolute; top: 100%; left: calc(50% + var(--caret, 0px)); margin-left: -5px; border: 5px solid transparent; border-top-color: var(--text); }

/* ── podium ────────────────────────────────────────────────── */
.podium { display: grid; grid-template-columns: 1fr 1.12fr 1fr; align-items: end; gap: 12px; margin-top: 10px; perspective: 1000px; }
.pod {
  position: relative; text-align: left; width: 100%;
  padding: 16px 18px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 4px; overflow: hidden;
  transform-style: preserve-3d;
  transition: transform .5s var(--ease), border-color .3s;
  --mc: var(--gold);
}
.pod-2 { --mc: var(--silver); min-height: 196px; }
.pod-1 { min-height: 208px; background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 12%, var(--surface)) 0%, var(--surface) 60%); border-color: color-mix(in srgb, var(--gold) 35%, transparent); }
.pod-3 { --mc: var(--bronze); min-height: 180px; }
.pod:hover { border-color: color-mix(in srgb, var(--mc) 55%, transparent); }
.pod-rank {
  position: absolute; right: -6px; bottom: -28px; z-index: 0 !important;
  font-family: var(--font-display); font-weight: 900; font-stretch: 125%; font-size: 150px; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--mc) 40%, transparent);
  transform: translateZ(-20px); pointer-events: none;
}
.pod-medal { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mc); background: color-mix(in srgb, var(--mc) 14%, transparent); }
.pod .av { margin: auto 0 8px; transform: translateZ(30px); }
.pod .av-lg { width: 46px; height: 46px; font-size: 16px; }
.pod-name { font-family: var(--font-display); font-weight: 800; font-stretch: 112%; font-size: clamp(18px, 2.2vw, 26px); text-transform: uppercase; line-height: 1; transform: translateZ(24px); }
.pod-km { font-size: clamp(28px, 3vw, 40px); line-height: 1; margin-top: 6px; transform: translateZ(36px); }
.pod-km small { font-size: .45em; color: var(--muted); font-stretch: 100%; margin-left: 3px; }
.pod-meta { font-size: 12px; color: var(--muted); }
.pod-empty { opacity: .5; justify-content: center; align-items: center; text-align: center; }

/* avatar */
.av {
  --c: var(--accent);
  display: grid; place-items: center; flex-shrink: 0;
  width: 40px; height: 40px; border-radius: 50%;
  background: color-mix(in srgb, var(--c) 18%, var(--surface-2));
  color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
  font-weight: 700; font-size: 13px; letter-spacing: .02em;
}
:root[data-theme="light"] .av { color: color-mix(in srgb, var(--c) 80%, #000); }
.av-lg { width: 64px; height: 64px; font-size: 20px; border-width: 2px; }

/* ── leaderboard ───────────────────────────────────────────── */
.board { margin-top: 12px; }
.board-tools { display: flex; align-items: center; gap: 10px; padding: 12px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.search {
  flex: 1 1 200px; display: flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 12px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--line);
  transition: border-color .2s, box-shadow .2s;
}
.search:focus-within { border-color: color-mix(in srgb, var(--accent) 60%, transparent); box-shadow: 0 0 0 4px var(--accent-soft); }
.search svg { width: 16px; height: 16px; color: var(--muted); flex-shrink: 0; }
.search input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; font-size: 14px; }
.search input::placeholder { color: var(--muted); }
.search kbd { font: 600 11px var(--font-body); color: var(--muted); border: 1px solid var(--line-2); border-radius: 6px; padding: 1px 6px; }
.chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  height: 36px; padding: 0 14px; border-radius: 10px; flex-shrink: 0;
  font-size: 13px; font-weight: 600; color: var(--text-2);
  border: 1px solid var(--line); background: var(--surface);
  transition: background .25s, color .25s, border-color .25s, transform .2s var(--ease);
}
.chip:hover { border-color: var(--line-2); color: var(--text); }
.chip:active { transform: scale(.95); }
.chip[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.board-head, .row-main {
  display: grid; align-items: center; gap: 14px;
  grid-template-columns: 34px 40px minmax(0, 1.4fr) minmax(70px, 1fr) 88px 72px 18px;
  grid-template-areas: "rank av who bar dist pace chev";
  padding: 12px 18px;
}
.board-head { padding-top: 10px; padding-bottom: 10px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
.board-head .h-dist, .board-head .h-pace { text-align: right; }
.board-head span:nth-child(1) { grid-area: rank; } .board-head .h-who { grid-area: who; } .board-head .h-bar { grid-area: bar; } .board-head .h-dist { grid-area: dist; } .board-head .h-pace { grid-area: pace; }
.row { position: relative; }
.row + .row { border-top: 1px solid var(--line); }
.row-main { width: 100%; text-align: left; transition: background .2s; }
.row-main:hover { background: var(--surface-2); }
.row.open .row-main { background: var(--surface-2); }
.rank { grid-area: rank; font-family: var(--font-display); font-weight: 800; font-stretch: 80%; font-size: 18px; color: var(--muted); font-variant-numeric: tabular-nums; }
.row.p1 .rank { color: var(--gold); } .row.p2 .rank { color: var(--silver); } .row.p3 .rank { color: var(--bronze); }
.row-main .av { grid-area: av; }
.who { grid-area: who; min-width: 0; }
.nm { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.nm-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sub { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sub b { font-weight: 500; transition: color .3s; }
[data-sort="runs"] .sub b[data-k="runs"], [data-sort="longest"] .sub b[data-k="longest"], [data-sort="weeks"] .sub b[data-k="weeks"] { color: var(--accent); font-weight: 600; }
[data-sort="pace"] .pace { color: var(--accent); }
.delta { font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 6px; flex-shrink: 0; }
.delta.up { color: var(--up); background: color-mix(in srgb, var(--up) 14%, transparent); }
.delta.down { color: var(--down); background: color-mix(in srgb, var(--down) 14%, transparent); }
.delta.new { color: var(--accent); background: var(--accent-soft); }
.bar { grid-area: bar; height: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width 1.2s var(--ease); }
.row.in .bar i { width: var(--w); }
.dist { grid-area: dist; text-align: right; font-size: 22px; line-height: 1; }
.dist small, .pace small { font-size: 11px; font-weight: 600; color: var(--muted); margin-left: 2px; font-family: var(--font-body); font-stretch: 100%; }
.pace { grid-area: pace; text-align: right; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-2); transition: color .3s; }
.chev { grid-area: chev; width: 18px; height: 18px; color: var(--muted); transition: transform .4s var(--ease); }
.row.open .chev { transform: rotate(180deg); color: var(--text); }
.row-detail { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); background: var(--surface-2); }
.row.open .row-detail { grid-template-rows: 1fr; }
.row-detail-inner { overflow: hidden; }
.detail { padding: 6px 18px 20px calc(18px + 34px + 14px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 20px; }
.stat-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-content: start; }
.stat-chip { padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.stat-chip b { display: block; font-family: var(--font-display); font-weight: 800; font-stretch: 85%; font-size: 18px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-chip span { font-size: 11px; color: var(--muted); }
.mini { padding: 12px 14px 10px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.mini-head { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-bottom: 10px; }
.mini-head strong { color: var(--text); font-weight: 600; }
.mini-bars { height: 72px; display: flex; align-items: flex-end; gap: 3px; }
.mini-bars i {
  position: relative; flex: 1; height: var(--h); min-height: 2px; border-radius: 3px 3px 1px 1px;
  background: var(--surface-3); transform-origin: bottom; transform: scaleY(0);
  transition: transform .7s var(--ease), background .2s; transition-delay: calc(var(--i) * 14ms);
}
.mini-bars i.has { background: color-mix(in srgb, var(--accent) 45%, var(--surface-3)); }
.mini-bars i.cur { background: var(--accent); }
.mini-bars i:hover { background: var(--accent-2); }
.row.open .mini-bars i { transform: none; }
.mini-bars i:hover::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; translate: -50% 0;
  padding: 4px 8px; border-radius: 6px; background: var(--text); color: var(--bg);
  font: 600 11px var(--font-body); font-style: normal; white-space: nowrap; pointer-events: none; z-index: 5;
}
.mini-foot { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); margin-top: 6px; }
.board-updated { text-align: center; font-size: 11px; color: var(--muted); opacity: .8; margin: 10px 0 0; letter-spacing: .02em; }
.board-empty { padding: 40px 20px; text-align: center; color: var(--muted); }
.board-more {
  display: flex; width: 100%; align-items: center; justify-content: center; gap: 8px; padding: 16px;
  border: 0; border-top: 1px solid var(--line); background: none; color: var(--text);
  font: 600 14px var(--font-body); cursor: pointer; transition: background .2s;
}
.board-more:hover { background: var(--surface-2); }
.board-more[hidden] { display: none; }
.empty-state { padding: 56px 24px; text-align: center; }
.empty-state .big-emoji { font-size: 44px; margin-bottom: 10px; animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-6px) rotate(-4deg); } }
.empty-state p { color: var(--muted); margin: 6px 0 18px; }
.empty-ctas { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ── history chart ─────────────────────────────────────────── */
.chart-card { padding: 22px 22px 16px; overflow: visible; }
.chart-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.chart-kpi { font-size: 13px; color: var(--muted); }
.chart-kpi .num { display: block; font-size: 40px; line-height: 1; color: var(--text); margin-top: 4px; }
.seg { display: inline-flex; padding: 3px; border-radius: 11px; background: var(--surface-2); border: 1px solid var(--line); }
.seg button { height: 32px; padding: 0 12px; border-radius: 8px; font-size: 12px; font-weight: 600; color: var(--muted); transition: background .25s, color .25s; }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.chart-scroll { overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; margin: 0 -6px; padding: 0 6px; }
.chart { position: relative; height: 240px; display: flex; align-items: stretch; gap: 6px; width: max-content; min-width: 100%; padding-top: 10px; }
.chart-grid { position: absolute; inset: 10px 0 26px; pointer-events: none; display: flex; flex-direction: column; justify-content: space-between; }
.chart-grid span { border-top: 1px dashed var(--line); font-size: 10px; color: var(--muted); }
.wbar { position: relative; flex: 1 0 24px; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 8px; padding: 0; }
.wbar-fill {
  height: var(--h); min-height: 3px; border-radius: 7px 7px 3px 3px;
  background: var(--surface-3); transform-origin: bottom; transform: scaleY(0);
  transition: height .6s var(--ease), transform .9s var(--ease), background .25s;
  transition-delay: 0s, calc(var(--i) * 20ms), 0s;
}
.chart.in .wbar-fill { transform: none; }
.wbar:hover .wbar-fill, .wbar:focus-visible .wbar-fill { background: color-mix(in srgb, var(--accent) 55%, var(--surface-3)); }
.wbar[aria-pressed="true"] .wbar-fill { background: var(--accent); box-shadow: 0 10px 24px -8px rgba(252,76,2,.7); }
.wbar.live .wbar-fill { background-image: repeating-linear-gradient(-45deg, transparent 0 5px, rgba(255,255,255,.18) 5px 10px); }
.wbar.record .wbar-fill::before { content: "★"; position: absolute; top: -18px; left: 50%; translate: -50% 0; font-size: 11px; color: var(--gold); }
.wbar .wbar-fill { position: relative; }
.wbar-lbl { height: 18px; font-size: 10px; font-weight: 600; color: var(--muted); text-align: center; white-space: nowrap; }
.wbar[aria-pressed="true"] .wbar-lbl { color: var(--text); }
.tip {
  position: absolute; z-index: 10; pointer-events: none;
  padding: 10px 12px; border-radius: 12px; min-width: 150px;
  background: var(--text); color: var(--bg); font-size: 12px; box-shadow: 0 12px 30px -10px rgba(0,0,0,.5);
  opacity: 0; transform: translate(-50%, calc(-100% - 6px)) scale(.96); transition: opacity .15s, transform .2s var(--ease);
}
.tip.show { opacity: 1; transform: translate(-50%, calc(-100% - 12px)); }
.tip strong { display: block; font-size: 13px; margin-bottom: 4px; }
.tip-row { display: flex; justify-content: space-between; gap: 14px; opacity: .8; }
.week-chips { margin: 16px 0 0; padding-bottom: 2px; scroll-snap-type: x mandatory; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
.week-chips .chip { scroll-snap-align: start; }
.week-panel { margin-top: 40px; }
.week-panel-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.week-nav { display: flex; gap: 8px; }

/* ── all-time globe progress ───────────────────────────────── */
.earth { padding: 24px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: center; }
.earth-globe { width: 92px; height: 92px; border-radius: 50%; position: relative; overflow: hidden;
  background: radial-gradient(circle at 35% 30%, #4ea3ff, #1f5fbf 55%, #0d2c63);
  box-shadow: inset -12px -10px 24px rgba(0,0,0,.45), 0 0 40px -8px rgba(78,163,255,.5); }
.earth-globe::before { content: ""; position: absolute; inset: 0; width: 200%;
  background: radial-gradient(ellipse 18% 22% at 20% 40%, #4fbf73 60%, transparent 62%), radial-gradient(ellipse 12% 30% at 42% 62%, #4fbf73 60%, transparent 62%), radial-gradient(ellipse 16% 14% at 68% 30%, #4fbf73 60%, transparent 62%), radial-gradient(ellipse 22% 18% at 88% 66%, #4fbf73 60%, transparent 62%);
  animation: spin 14s linear infinite; }
@keyframes spin { to { transform: translateX(-50%); } }
.earth-title { font-family: var(--font-display); font-weight: 800; font-stretch: 112%; font-size: clamp(18px, 2.4vw, 26px); text-transform: uppercase; line-height: 1.1; }
.earth-title em { font-style: normal; color: var(--accent); }
.track { position: relative; height: 10px; border-radius: 99px; background: var(--surface-3); margin-top: 14px; }
.track-fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width 2s var(--ease) .3s; }
.track-fill::after { content: "🏃"; position: absolute; right: -10px; top: 50%; translate: 0 -55%; font-size: 20px; transform: scaleX(-1); }
.earth.in .track-fill { width: var(--w); }
.track-ends { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 8px; }

/* ── records ───────────────────────────────────────────────── */
.rec-podium { margin-top: 16px; }
.rec-podium .pod-km { font-size: clamp(26px, 3.2vw, 40px); }
.rec-list { margin-top: 12px; }
.rec-list .row-main { grid-template-columns: 34px 40px minmax(0, 1fr) 90px 72px 18px; grid-template-areas: "rank av who dist pace chev"; }
.attempts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 16px; }
.attempts li { display: flex; align-items: baseline; gap: 10px; font-size: 13px; color: var(--muted); }
.attempts li span:first-child { min-width: 46px; font-size: 11px; font-weight: 600; }
.attempts li b { color: var(--text); font-weight: 700; }
.attempts li.best span:first-child { color: #FC4C02; }
.ind-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ind { padding: 22px; display: flex; flex-direction: column; min-height: 240px; }
/* record micro-charts (replace the old emoji icons) */
.ind-viz { height: 66px; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; }
.viz-cap { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viz-cap b { color: var(--accent); font-weight: 700; }
.trk { position: relative; height: 30px; }
.trk-line, .trk-fill { position: absolute; left: 0; top: 6px; height: 6px; border-radius: 99px; }
.trk-line { right: 0; background: var(--surface-3); }
.trk-fill { width: 0; background: linear-gradient(90deg, var(--accent-2), var(--accent)); transition: width 1.5s var(--ease) .25s; }
.in .trk-fill { width: var(--w); }
.trk-tick { position: absolute; top: 3px; left: var(--x); width: 2px; height: 12px; margin-left: -1px; border-radius: 1px; background: var(--line-2); }
.trk-tick.passed { background: color-mix(in srgb, var(--accent) 50%, var(--line-2)); }
.trk-tick span { position: absolute; top: 15px; left: 50%; translate: -50% 0; font-size: 9px; font-weight: 700; letter-spacing: .04em; color: var(--muted); }
.trk-dot { position: absolute; top: 2px; left: 0; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--surface); border: 3px solid var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); transition: left 1.5s var(--ease) .25s; }
.in .trk-dot { left: var(--w); }
.cmp { display: grid; gap: 7px; }
.cmp-row { display: grid; grid-template-columns: minmax(0, 1fr) 34px; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; text-align: right; }
.cmp-row.avg { color: var(--muted); }
.cmp-bar { height: 10px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.cmp-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--accent-2), var(--accent)); transition: width 1.3s var(--ease) .25s; }
.cmp-row.avg .cmp-bar i { background: var(--muted); opacity: .55; transition-delay: .45s; }
.in .cmp-bar i { width: var(--w); }
.pills { display: flex; align-items: flex-end; gap: 4px; height: 32px; }
.pill { flex: 1 1 0; max-width: 16px; height: 100%; border-radius: 5px; background: color-mix(in srgb, var(--accent) 45%, var(--surface-3)); transform: scaleY(0); transform-origin: bottom; transition: transform .55s var(--ease); transition-delay: calc(var(--i) * 70ms + .25s); }
.pill.extra { background: var(--accent); box-shadow: 0 0 14px -3px rgba(252,76,2,.8); }
.in .pill { transform: none; }
.pill-sep { align-self: stretch; width: 0; margin: 0 2px; border-left: 1.5px dashed var(--line-2); }
.wgrid { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 3px; }
.wgrid i { aspect-ratio: 1; border-radius: 3px; background: var(--surface-3); opacity: 0; transform: scale(.3); transition: transform .45s var(--ease), opacity .45s; transition-delay: calc(var(--i) * 28ms + .25s); }
.wgrid i.on { background: var(--accent); }
.wgrid i.live { box-shadow: 0 0 0 1.5px var(--accent-2); }
.in .wgrid i { opacity: 1; transform: none; }
.ind-val { font-size: 54px; line-height: 1; margin-top: 16px; }
.ind-val small { font-size: .36em; color: var(--muted); font-stretch: 100%; margin-left: 4px; }
.ind-lbl { font-size: 13px; color: var(--muted); margin-top: 4px; }
.ind-holder { font-weight: 700; margin-top: 14px; }
.ind-week { font-size: 12px; color: var(--muted); }
.ind-ups { margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--line-2); display: grid; gap: 4px; font-size: 12px; color: var(--text-2); }
.ind-ups div { display: flex; justify-content: space-between; gap: 8px; }
.ind-ups span:last-child { color: var(--muted); font-variant-numeric: tabular-nums; }
.club-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.club { padding: 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.club-val { font-size: clamp(48px, 6vw, 84px); line-height: .9; }
.club-val small { font-size: .3em; color: var(--muted); font-stretch: 100%; margin-left: 4px; }
.club-lbl { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.club-week { font-family: var(--font-display); font-weight: 800; font-stretch: 112%; font-size: clamp(16px, 1.6vw, 20px); text-transform: uppercase; margin-top: 6px; white-space: nowrap; }
.club-sub { color: var(--muted); font-size: 13px; }
.rules { margin-top: 28px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); }
.rules summary { cursor: pointer; padding: 14px 18px; font-weight: 600; font-size: 14px; list-style: none; display: flex; justify-content: space-between; }
.rules summary::-webkit-details-marker { display: none; }
.rules summary::after { content: "+"; font-size: 18px; color: var(--muted); transition: transform .3s var(--ease); }
.rules[open] summary::after { transform: rotate(45deg); }
.rules-body { padding: 0 18px 18px; color: var(--text-2); font-size: 13px; display: grid; gap: 6px; }

/* ── footer ────────────────────────────────────────────────── */
.footer { position: relative; overflow: hidden; border-top: 1px solid var(--line); margin-top: var(--sec); padding: var(--sec) var(--gutter) 64px; }
/* when a view ends on a tinted band, the band's edge is the divider: no second hairline, no empty strip */
.main:has(.view.active > .band:last-child, .view.active > [data-league]:last-child > .band:last-child) + .footer { margin-top: 0; border-top: 0; padding-top: var(--sec); }
.footer-inner { max-width: var(--wrap); margin: 0 auto; }
.footer-top { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: flex-end; }
.footer-cta { font-family: var(--font-display); font-weight: 900; font-stretch: 118%; font-size: clamp(28px, 4vw, 48px); text-transform: uppercase; line-height: .95; letter-spacing: -.02em; max-width: 760px; }
.footer-links { display: flex; gap: 8px; flex-wrap: wrap; }
.footer-word {
  font-family: var(--font-display); font-weight: 900; font-stretch: 125%;
  font-size: 12vw; line-height: .78; letter-spacing: -.03em; text-transform: uppercase;
  margin-top: 56px; user-select: none;
}
.fw-line {
  display: block; width: max-content; margin: 0 auto; white-space: nowrap; padding-top: .06em;
  background: linear-gradient(180deg, var(--text) 15%, color-mix(in srgb, var(--text) 25%, transparent) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.fw-line + .fw-line { font-style: italic; padding-right: .12em; /* room for the slanted tops so background-clip text does not cut them */ margin-left: 0; transform-origin: 0 50%; background-image: linear-gradient(180deg, var(--accent) 20%, color-mix(in srgb, var(--accent) 15%, transparent) 100%); }
.footer-meta { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--muted); font-size: 12px; margin-top: 24px; }

/* ── mobile tab bar ────────────────────────────────────────── */
.tabbar {
  position: fixed; z-index: 60;
  left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom));
  height: 66px; padding: 6px;
  display: none; grid-template-columns: repeat(5, 1fr);
  border-radius: 22px; background: var(--glass); border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: 0 20px 40px -16px rgba(0,0,0,.5);
  transition: transform .45s var(--ease);
}
.tabbar.hide { transform: translateY(calc(100% + 24px)); }
.tabbar-ind { position: absolute; top: 6px; bottom: 6px; left: 0; width: 0; border-radius: 16px; background: var(--accent-soft); transition: transform .45s var(--ease), width .45s var(--ease); }
.tb { position: relative; z-index: 1; display: flex; white-space: nowrap; letter-spacing: -.01em; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 16px; font-size: 10px; font-weight: 600; color: var(--muted); transition: color .25s, transform .2s var(--ease); }
.tb svg { width: 22px; height: 22px; }
.tb:active { transform: scale(.9); }
.tb[aria-selected="true"] { color: var(--accent); }

/* ── sheet / modal ─────────────────────────────────────────── */
.sheet-overlay {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center; padding: 20px;
  background: rgba(0,0,0,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility 0s .35s;
}
.sheet-overlay.open { opacity: 1; visibility: visible; transition: opacity .35s var(--ease); }
.sheet {
  position: relative; width: min(460px, 100%); max-height: 90vh; overflow: auto;
  padding: 28px; border-radius: 26px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 40px 80px -30px rgba(0,0,0,.6);
  transform: translateY(24px) scale(.97); transition: transform .5s var(--ease);
  outline: none;
}
.sheet-overlay.open .sheet { transform: none; }
.sheet-grab { display: none; width: 40px; height: 5px; border-radius: 99px; background: var(--line-2); margin: -12px auto 16px; }
.sheet-close { position: absolute; top: 16px; right: 16px; }
.sheet-title { font-family: var(--font-display); font-weight: 900; font-stretch: 118%; font-size: 34px; text-transform: uppercase; line-height: .95; letter-spacing: -.02em; }
.sheet-sub { color: var(--muted); font-size: 14px; margin: 8px 0 20px; }
.share-sheet { width: min(440px, 100%); }
.share-preview { position: relative; display: flex; justify-content: center; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.share-arrow {
  position: absolute; z-index: 1; top: 50%; translate: 0 -50%;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--line-2); box-shadow: var(--shadow);
}
.share-arrow.prev { left: 0; }
.share-arrow.next { right: 0; }
.share-arrow[hidden] { display: none; }
.share-arrow svg { width: 18px; height: 18px; }
.share-pager { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 12px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.share-dots { display: flex; gap: 6px; }
.share-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: var(--line-2); cursor: pointer; transition: width .3s var(--ease), background .3s; }
.share-dots button.on { width: 22px; background: var(--accent); }
.share-preview img { display: block; width: auto; max-width: calc(100% - 108px); height: auto; max-height: min(60vh, calc(90vh - 330px)); border-radius: 16px; border: 1px solid var(--line); box-shadow: 0 20px 40px -24px rgba(0,0,0,.6); }
.share-actions { display: flex; gap: 8px; margin-top: 14px; }
.share-actions .btn { flex: 1; gap: 8px; padding: 0 12px; min-width: 0; }
.share-actions [data-share-native] { flex: 1.4; }
.share-actions .btn[hidden] { display: none; }
.share-actions svg { width: 18px; height: 18px; flex: none; }
.share-note { min-height: 20px; margin-top: 10px; text-align: center; font-size: 13px; color: var(--muted); }
.head-side { display: flex; align-items: flex-end; gap: 16px; }
.share-seg { display: flex; margin: 0 0 14px; }
.share-seg[hidden] { display: none; }
.share-seg button { flex: 1; }
.share-actions .btn:disabled { opacity: .5; pointer-events: none; }
/* "Flex your week": the two share buttons, just below the full leaderboard */
.flex-strip {
  display: flex; align-items: center; justify-content: space-between; gap: 18px 24px; flex-wrap: wrap;
  margin-top: 20px; padding: 22px 24px; border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  background: radial-gradient(120% 160% at 0% 0%, var(--accent-soft), transparent 60%), var(--surface);
}
.flex-title { font-family: var(--font-display); font-weight: 900; font-stretch: 118%; font-size: clamp(22px, 2.6vw, 30px); line-height: 1; text-transform: uppercase; letter-spacing: -.01em; }
.flex-sub { color: var(--muted); font-size: 14px; margin-top: 6px; }
.flex-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.flex-btns .btn { gap: 8px; }
.flex-btns svg { width: 18px; height: 18px; }
.share-btn { gap: 8px; }
.share-btn svg { width: 16px; height: 16px; }
.join-opt {
  display: flex; align-items: center; gap: 14px; padding: 14px; margin-top: 8px;
  border-radius: 16px; border: 1px solid var(--line); background: var(--surface-2); text-decoration: none;
  transition: transform .35s var(--ease), border-color .2s, background .2s;
}
.join-opt:hover { transform: translateX(4px); border-color: var(--line-2); }
.join-opt:active { transform: scale(.98); }
.join-ico { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; flex-shrink: 0; background: color-mix(in srgb, var(--c) 15%, transparent); }
.join-ico svg { width: 22px; height: 22px; }
.join-txt { flex: 1; min-width: 0; }
.join-txt b { display: block; font-size: 15px; }
.join-txt span { font-size: 12px; color: var(--muted); }
.join-arrow { color: var(--muted); transition: transform .3s var(--ease), color .2s; }
.join-opt:hover .join-arrow { transform: translateX(3px); color: var(--text); }

/* confetti */
.confetti { position: fixed; z-index: 120; width: 8px; height: 12px; border-radius: 2px; pointer-events: none; }

/* ── team page ─────────────────────────────────────────────── */
.team-hero { max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 150px var(--gutter) 30px; }
.team-title { font-family: var(--font-display); font-weight: 900; font-stretch: 125%; font-size: clamp(56px, 12vw, 170px); line-height: .84; letter-spacing: -.04em; text-transform: uppercase; }
.team-title .line { display: block; overflow: hidden; white-space: nowrap; }
.team-title .ch { display: inline-block; transform: translateY(105%); animation: rise 1s var(--ease) forwards; animation-delay: calc(var(--i) * 35ms + 100ms); }
.team-title .accent { color: var(--accent); }
.team-intro { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-top: 28px; }
.team-intro p { max-width: 460px; color: var(--text-2); font-size: 17px; }
.only-touch { display: none; }
@media (hover: none) { .only-hover { display: none; } .only-touch { display: inline; } }
.team-wrap { max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 20px var(--gutter) 0; }
.team-label { display: flex; align-items: center; gap: 14px; margin: 48px 0 18px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.team-label::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.team-label b { color: var(--accent); }
.team-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; perspective: 1200px; }
.crew-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.member { border-radius: var(--radius); padding: 8px; transform-style: preserve-3d; transition: transform .5s var(--ease); cursor: pointer; }
.member-photos { position: relative; aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden; background: var(--surface-2); }
.member-photos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .6s var(--ease), transform 1.2s var(--ease), filter .6s; }
.member-photos .alt { opacity: 0; transform: scale(1.08); }
.member.flipped .member-photos .photo-main { opacity: 0; transform: scale(1.06); }
.member.flipped .member-photos .alt { opacity: 1; transform: scale(1); }
.member-photos::after { content: ""; position: absolute; inset: 50% 0 0; background: linear-gradient(180deg, transparent, rgba(0,0,0,.55)); pointer-events: none; }
.member-tag { position: absolute; z-index: 2; left: 12px; top: 12px; padding: 5px 10px; border-radius: 99px; font-size: 11px; font-weight: 700; color: #fff; background: rgba(0,0,0,.35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.2); }
.member-swap { position: absolute; z-index: 2; right: 12px; top: 12px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(0,0,0,.35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.2); transition: transform .6s var(--ease); }
.member.flipped .member-swap { transform: rotate(180deg); }
.member-swap svg { width: 14px; height: 14px; }
.member-info { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding: 14px 8px 8px; transform: translateZ(20px); }
.member-name { font-family: var(--font-display); font-weight: 900; font-stretch: 118%; font-size: 26px; text-transform: uppercase; line-height: .95; letter-spacing: -.01em; }
.member-role { font-size: 13px; color: var(--muted); margin-top: 4px; }
.member-idx { font-family: var(--font-display); font-weight: 800; font-stretch: 80%; font-size: 15px; color: var(--muted); }
.join-band { margin: 72px 0 0; padding: clamp(28px, 5vw, 56px); border-radius: 28px; background: var(--accent); color: #fff; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; overflow: hidden; position: relative; }
.join-band h2 { font-family: var(--font-display); font-weight: 900; font-stretch: 122%; font-size: clamp(32px, 5vw, 64px); text-transform: uppercase; line-height: .9; letter-spacing: -.03em; position: relative; }
.join-band p { opacity: .85; margin-top: 10px; position: relative; }
.join-band .btn { background: #fff; color: #0A0A0B; position: relative; }
.join-band::before {
  content: ""; position: absolute; right: -3%; bottom: -22%; width: 560px; aspect-ratio: 613 / 201;
  background: url("brand/kfs-logo-white.svg") no-repeat center / contain; opacity: .14; pointer-events: none;
}

/* ── intro: logo reveal → flies into the nav logo ─────────────
   Only rendered while <html class="intro"> (set in <head>, once per visit).
   The failsafe hides it after 7s even if intro.js never runs. */
.intro-screen { display: none; }
html.intro { overflow: hidden; }
html.intro .intro-screen {
  display: block; position: fixed; inset: 0; z-index: 200; cursor: pointer;
  animation: intro-failsafe .01s 7s forwards;
}
@keyframes intro-failsafe { to { visibility: hidden; pointer-events: none; } }
.intro-screen::before { content: ""; position: absolute; inset: 0; background: #000; transition: opacity .7s var(--ease) .1s; }
.intro-screen.out::before { opacity: 0; }
.intro-stage { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 28px; }
.intro-mark { position: relative; width: min(62vw, 460px); aspect-ratio: 613 / 201; transform-origin: 0 0; will-change: transform; }
.intro-mark img {
  display: block; width: 100%; height: 100%;
  clip-path: inset(0 100% 0 0);
  transform: translateX(-28px) skewX(-14deg);
  animation: intro-wipe .75s cubic-bezier(.7,0,.2,1) .3s forwards, intro-settle .9s cubic-bezier(.22,1.4,.36,1) .3s forwards;
}
@keyframes intro-wipe { to { clip-path: inset(0 0 0 0); } }
@keyframes intro-settle { to { transform: none; } }
.intro-streak {
  position: absolute; top: -12%; bottom: -12%; left: 0; width: 10px; margin-left: -5px;
  background: linear-gradient(180deg, transparent, #FFB38A 20%, #fff 50%, #FFB38A 80%, transparent);
  box-shadow: 0 0 24px 6px rgba(252,76,2,.8); border-radius: 6px;
  transform: skewX(-14deg); opacity: 0;
  animation: intro-streak .75s cubic-bezier(.7,0,.2,1) .3s forwards;
}
@keyframes intro-streak { 0% { left: 0; opacity: 1; } 85% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.intro-bar { width: 140px; height: 2px; border-radius: 2px; background: rgba(255,255,255,.1); overflow: hidden; transition: opacity .3s; }
.intro-bar i { display: block; height: 100%; width: 0; background: #FC4C02; animation: intro-bar 1.4s cubic-bezier(.3,0,.2,1) .4s forwards; }
.intro-screen.ready .intro-bar i { width: 100% !important; animation: none; transition: width .2s; }
@keyframes intro-bar { to { width: 85%; } }
.intro-lines i {
  position: absolute; right: 0; height: 2px; width: var(--w); top: var(--y); border-radius: 2px;
  background: linear-gradient(90deg, #FC4C02, rgba(252,76,2,0));
  transform: translateX(110vw); opacity: .9;
  animation: intro-line var(--t) cubic-bezier(.6,0,.3,1) var(--d) forwards;
}
.intro-lines i:nth-child(1) { --y: 38%; --w: 34vw; --d: 0s;   --t: .7s; }
.intro-lines i:nth-child(2) { --y: 46%; --w: 52vw; --d: .08s; --t: .65s; height: 3px; }
.intro-lines i:nth-child(3) { --y: 55%; --w: 28vw; --d: .16s; --t: .7s; }
.intro-lines i:nth-child(4) { --y: 61%; --w: 44vw; --d: .05s; --t: .8s; opacity: .5; }
.intro-lines i:nth-child(5) { --y: 32%; --w: 22vw; --d: .2s;  --t: .6s; opacity: .5; }
@keyframes intro-line { to { transform: translateX(-120vw); } }
.intro-screen.out .intro-bar, .intro-screen.out .intro-lines { opacity: 0; }
/* hold the nav logo and the hero's own entrance until the intro hands over */
html.intro .brand-logo { opacity: 0; }
html.intro:not(.intro-leaving) .hero .ch,
html.intro:not(.intro-leaving) .hero .fade-up,
html.intro:not(.intro-leaving) .hero-frame { animation-play-state: paused; }

@media (max-width: 980px) { :root { --sec: clamp(36px, 4svh, 48px); } }
@media (max-width: 640px) { :root { --sec: clamp(24px, 3.6svh, 34px); } }

/* ── responsive ────────────────────────────────────────────── */
@media (max-width: 980px) {
  .tabs { display: none; }
  .nav-actions { margin-left: auto !important; }
  .tabbar { display: grid; }
  .footer { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }   /* exactly clears the tab bar */
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ind-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team-grid, .crew-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail { grid-template-columns: 1fr; padding-left: 18px; }
  .club { flex-direction: column; align-items: flex-start; gap: 14px; }
  .club-week { white-space: normal; }
}

/* tablet only: one row of four stat tiles under the full-width distance card */
@media (min-width: 641px) and (max-width: 980px) {
  .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tile.big { grid-column: 1 / -1; grid-row: auto; }
  .tile-val { font-size: 34px; }
}
@media (max-width: 640px) {
  .sec-head { gap: 10px; }
  .sec-title { white-space: normal; min-width: 0; line-height: 1.05; }
  .sec-rule { min-width: 12px; }
  .band .sec-meta { padding: 3px 9px; font-size: 12px; }
  body { font-size: 14px; }
  /* docked header on phones: flush to the top edge, full width */
  .nav {
    top: 0; left: 0; translate: none; width: 100%;
    height: calc(56px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) var(--gutter) 0;
    border-radius: 0; border-width: 0 0 1px;
  }
  .nav.scrolled, .nav.solid { box-shadow: 0 8px 24px -16px rgba(0,0,0,.5); }
  .top-blur { display: none; }
  .brand-word { display: none; }
  .nav-team { display: none; }
  .nav .btn { height: 38px; padding: 0 14px; }
  .hero-title { font-size: 15vw; font-stretch: 100%; }
  .marquee { padding: 11px 0; }
  .main { min-height: 0; }
  .meta-winner { display: none; }   /* the podium right below already shows the winner */
  /* ── screenshot frame: week title → top 3 fills one phone screen ──────────
     app.js sets --fx on the week views: the room left between the podium and
     the tab bar. It's shared out across the gaps, the bar chart and the podium
     cards (shares add up to 1), so the top 3 always ends just above the tab bar. */
  .view-head { margin-bottom: max(8px, calc(14px + var(--fx, 0px) * .08)); gap: 4px; }
  .view-head > div:first-child { flex: 1 1 100%; min-width: 0; }
  .h2.h2-date { white-space: nowrap; font-size: 28px; }   /* app.js fits it to the column */
  .head-meta { text-align: left; font-size: 12px; }
  .head-meta br { display: none; }
  .view-head { position: relative; }
  .share-btn { position: absolute; top: -9px; right: 0; height: 32px; padding: 0 12px 0 10px; border-radius: 99px; }
  .view-head .eyebrow { min-height: 32px; margin-bottom: 8px; padding-top: 0; }   /* the pill gets its own row above the date */
  .share-sheet .sheet-title { font-size: 26px; }
  .share-sheet .sheet-sub { margin-bottom: 14px; }
  .share-preview img { max-height: min(52vh, calc(88vh - 330px)); }   /* leaves room for the switch, pager and buttons */
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
  .tile { min-height: 0; }
  .tile.big { grid-column: 1 / -1; grid-row: auto; padding: 16px 18px 14px; margin-bottom: max(8px, calc(10px + var(--fx, 0px) * .04)); }
  .tile.big .tile-val { font-size: 56px; margin-top: 4px; }
  .tile.big .tile-sub { margin-top: 4px; }
  .ring { width: 72px; height: 72px; }
  .spark-area { margin-top: 14px; height: max(24px, calc(40px + var(--fx, 0px) * .26)); }
  /* the four small stats: one joined 2×2 card, every label and detail kept */
  .tile:not(.big) { padding: max(7px, calc(11px + var(--fx, 0px) * .02)) 13px; border-radius: 0; box-shadow: none; justify-content: flex-start; }
  .bento > :nth-child(1 of .tile:not(.big)) { border-radius: 16px 0 0 0; }
  .bento > :nth-child(2 of .tile:not(.big)) { border-radius: 0 16px 0 0; border-left-width: 0; }
  .bento > :nth-child(3 of .tile:not(.big)) { border-radius: 0 0 0 16px; border-top-width: 0; }
  .bento > :nth-child(4 of .tile:not(.big)) { border-radius: 0 0 16px 0; border-left-width: 0; border-top-width: 0; }
  .tile:not(.big) .tile-lbl { font-size: 10px; letter-spacing: .05em; white-space: nowrap; }
  .tile:not(.big) .tile-val { font-size: 25px; margin-top: 5px; white-space: nowrap; }
  .tile:not(.big) .tile-sub { font-size: 10.5px; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* podium: winner full width, 2nd and 3rd side by side, avatar beside the name */
  .podium { grid-template-columns: 1fr 1fr; grid-template-areas: "first first" "second third"; align-items: stretch; gap: max(8px, calc(10px + var(--fx, 0px) * .04)) 10px; margin-top: max(8px, calc(10px + var(--fx, 0px) * .04)); }
  .pod { padding: max(6px, calc(13px + var(--fx, 0px) * .11)) 16px; border-radius: 18px; min-height: 0; }
  .pod-1 { grid-area: first; } .pod-2 { grid-area: second; } .pod-3 { grid-area: third; }
  .pod:not(.pod-empty) {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; row-gap: 2px; align-items: center; align-content: center;
    grid-template-areas: "medal av" "name name" "km km" "meta meta";
  }
  .pod-medal { grid-area: medal; justify-self: start; margin: 0; font-size: 10px; padding: 3px 9px; }
  .pod .av, .pod .av-lg { grid-area: av; margin: 0 0 6px; width: 34px; height: 34px; font-size: 12px; }
  .pod-name { grid-area: name; font-size: 16px; align-self: end; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pod-km { grid-area: km; font-size: 26px; margin-top: 0; align-self: start; }
  .pod-meta { grid-area: meta; font-size: 11px; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pod-rank { font-size: 56px; top: auto; bottom: -10px; right: 4px; }   /* small enough to clear the meta line */
  .pod-1:not(.pod-empty) { grid-template-columns: 58px minmax(0, 1fr); column-gap: 16px; grid-template-areas: "av medal" "av name" "av km" "av meta"; padding-inline: 18px; padding-block: max(6px, calc(13px + var(--fx, 0px) * .12)); }
  .pod-1 .pod-medal { margin-bottom: 6px; }
  .pod-1 .av, .pod-1 .av-lg { width: 54px; height: 54px; font-size: 18px; margin: 0; }
  .pod-1 .pod-name { font-size: 22px; }
  .pod-1 .pod-km { font-size: 35px; }
  .pod-1 .pod-meta { margin-top: 4px; font-size: 12px; }
  .pod-1 .pod-rank { font-size: 132px; top: auto; bottom: -30px; right: 8px; }
  .flex-strip { margin-top: 14px; padding: 20px; }
  .flex-btns { width: 100%; flex-direction: column; }
  .flex-btns .btn { width: 100%; }
  .board-tools { padding: 10px; }
  .search { flex-basis: 100%; }
  .board-head { display: none; }
  .board-head, .row-main {
    grid-template-columns: 26px 36px minmax(0, 1fr) auto;
    grid-template-areas: "rank av who dist" "rank av bar pace";
    column-gap: 10px; row-gap: 5px; padding: 11px 14px;
  }
  .row-main .av { width: 34px; height: 34px; font-size: 12px; align-self: center; }
  .rank { font-size: 16px; align-self: center; }
  .nm { font-size: 14px; }
  .sub { font-size: 11px; }
  .dist { font-size: 20px; }
  .pace { font-size: 12px; }
  .chev { display: none; }
  .bar { height: 4px; align-self: center; }
  .detail { padding: 4px 14px 16px; gap: 12px; }
  .stat-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stat-chip { padding: 8px 10px; }
  .stat-chip b { font-size: 16px; }
  .chart-card { padding: 16px 14px 12px; }
  .chart { height: 200px; gap: 5px; }
  .wbar { flex: 0 0 30px; }
  /* individual records: swipeable row, next card peeks in */
  .ind-grid {
    display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter) 6px; scroll-padding-inline: var(--gutter);
  }
  .ind-grid::-webkit-scrollbar { display: none; }
  .ind { flex: 0 0 80%; scroll-snap-align: start; padding: 20px; min-height: 0; }
  .ind-val { font-size: 46px; }
  .ind-viz { height: 80px; }
  .viz-cap { white-space: normal; line-height: 1.3; }
  .trk-tick.t5 span { display: none; }
  .club-grid { grid-template-columns: 1fr; }
  .club { flex-direction: column; align-items: flex-start; gap: 14px; padding: 22px; }
  .club-val { font-size: 64px; }
  .club-week { font-size: 17px; }
  .earth { grid-template-columns: 1fr; padding: 20px; gap: 16px; }
  .earth-globe { width: 64px; height: 64px; }
  .rec-list .row-main { grid-template-columns: 26px 36px minmax(0, 1fr) auto 18px; grid-template-areas: "rank av who dist chev" "rank av who pace chev"; }
  .footer-word { margin-top: 40px; }

  /* join modal → bottom sheet */
  .sheet-overlay { place-items: end stretch; padding: 0; }
  .sheet { width: 100%; max-height: 88vh; border-radius: 26px 26px 0 0; padding: 24px 18px calc(24px + env(safe-area-inset-bottom)); transform: translateY(100%); transition: transform .5s var(--ease); }
  .sheet-grab { display: block; }
  .sheet-title { font-size: 30px; }

  .team-hero { padding-top: 110px; }
  .team-title { font-size: clamp(52px, 17vw, 90px); }
  .team-grid, .crew-grid { gap: 10px; }
  .member { padding: 6px; border-radius: 18px; }
  .member-photos { border-radius: 13px; }
  .member-name { font-size: 20px; }
  .member-role { font-size: 12px; }
  .member-info { padding: 10px 4px 4px; }
  .join-band::before { width: 320px; bottom: -12%; }
}
/* short phones: a slightly tighter screenshot frame so the top 3 still clears the tab bar */
@media (max-width: 640px) and (max-height: 820px) {
  .tile.big { padding: 13px 16px 11px; }
  .tile.big .tile-val { font-size: 48px; }
  .ring { width: 62px; height: 62px; }
  .spark-area { margin-top: 10px; }
  .tile:not(.big) { padding-block: 7px 8px; }
  .tile:not(.big) .tile-val { font-size: 23px; margin-top: 3px; }
  .pod .av, .pod .av-lg { width: 30px; height: 30px; font-size: 11px; margin-bottom: 4px; }
  .pod-name { font-size: 15px; }
  .pod-meta { margin-top: 2px; }
  .pod-1 .av, .pod-1 .av-lg { width: 48px; height: 48px; font-size: 16px; }
  .pod-1 .pod-km { font-size: 31px; }
  .pod-km { font-size: 24px; }
}
@media (hover: none) {
  .spot::before, .spot::after { display: none; }
  .row-main:hover { background: transparent; }
  .row.open .row-main { background: var(--surface-2); }
  .row-main:active { background: var(--surface-2); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .marquee-track { animation: none; }
  .hero-title .ch, .team-title .ch { transform: none; }
  .fade-up, .reveal { opacity: 1; transform: none; }
}


/* ── hero photo: the group shot uncropped, as a tilted print beside the title ──
   (a full-screen crop of this photo cut through faces on every screen size) */
.hero-frame {
  position: relative; margin: 0; padding: 12px 12px 0; border-radius: 10px;
  background: var(--print-bg); transform: rotate(2.5deg);
  box-shadow: var(--print-shadow);
  animation: frameIn 1.1s var(--ease) .35s both;
}
@keyframes frameIn { from { opacity: 0; transform: rotate(9deg) translateY(48px) scale(.94); } }
.hero-frame img { display: block; width: 100%; height: auto; aspect-ratio: 1079 / 841; object-fit: cover; border-radius: 4px; }
.hero-frame figcaption { display: flex; justify-content: space-between; gap: 12px; padding: 13px 4px 15px; font: 700 12px var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--print-ink); }
.frame-sticker {
  position: absolute; top: -24px; right: -20px; transform: rotate(9deg);
  padding: 12px 16px; border-radius: 16px; background: var(--accent); color: #fff; text-align: center;
  font: 800 11px var(--font-body); letter-spacing: .08em; text-transform: uppercase; line-height: 1.15;
  box-shadow: 0 16px 30px -12px rgba(252,76,2,.9);
}
.frame-sticker b { display: block; font-family: var(--font-display); font-stretch: 80%; font-weight: 800; font-size: 30px; letter-spacing: -.01em; line-height: 1; }

/* ── hero layout ─────────────────────────────────────────────
   Blocks: live chip, title, photo, intro, button. --hg is the minimum gap between them;
   any spare height is shared out evenly between all the gaps (and the top and bottom
   edges), so the spacing stays even on every screen. Phones and tablets stack the blocks
   in that order. On desktop the text column stretches to the photo's height: the chip
   lines up with the top of the photo, the button with its bottom. */
.hero { --hg: clamp(18px, 3vh, 36px); --nav-h: 82px; padding: calc(var(--nav-h) + var(--hg)) var(--gutter) calc(var(--sec) + var(--tilt)); }
.hero-inner { flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; gap: var(--hg); }
.hero-inner { width: 100%; max-width: var(--wrap); margin-inline: auto; }   /* same column as the rest of the site */
.hero-copy { display: contents; }
.hero-inner > *, .hero-copy > * { margin: 0; }
.live-chip { order: 1; align-self: flex-start; }
/* the title and its one-line intro are one block: a small fixed gap inside, the section gap around it */
.hero-head { order: 2; display: flex; flex-direction: column; gap: clamp(12px, 1.8vh, 20px); }
.hero-head > * { margin: 0; }
.hero-frame { order: 3; align-self: center; }
.hero-sub { max-width: 32rem; }
.hero-ctas { order: 4; }

@media (min-width: 981px) {
  /* the hero is as tall as its content plus an even margin, so no empty bands above and below */
  /* on desktop the content column is a fixed width, so the ticker's slant near it is a fixed ~12px;
     the tilted photo hangs another ~13px below its box */
  .hero { min-height: 0; padding-top: calc(var(--nav-h) + var(--sec)); padding-bottom: calc(var(--sec) + 26px); }
  .main { padding-top: calc(var(--sec) + 12px); }
  .hero-inner {
    flex: 0 1 auto;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); column-gap: clamp(40px, 6vw, 96px); align-items: stretch;
  }
  .hero-copy { display: flex; flex-direction: column; justify-content: space-between; gap: var(--hg); padding-block: 4px; }
  .hero-frame { align-self: center; justify-self: center; width: min(100%, calc((100svh - 230px) * 1.3)); }
}

@media (max-width: 980px) {
  .hero { min-height: calc(100svh - 46px - 86px - 2 * var(--tilt) - env(safe-area-inset-bottom)); --hg: clamp(18px, 2.4svh, 30px); }   /* ticker + its slant + tab bar */
  .hero-title { max-width: 72%; }
  .hero-frame { width: min(560px, 84%, calc((100svh - 730px) * 1.3)); margin-top: 14px; margin-bottom: 8px; }   /* sticker above, tilt below */
}
@media (max-width: 640px) {
  .hero { --hg: clamp(14px, 2.4svh, 22px); --nav-h: calc(56px + env(safe-area-inset-top)); }
  .hero-title { max-width: 84%; }
  .hero-frame { width: clamp(58%, calc((100svh - 590px) * 1.3), 88%); margin-top: 16px; margin-bottom: 6px; padding: 8px 8px 0; transform: rotate(-2deg); }
  .hero-frame figcaption { padding: 9px 2px 11px; font-size: 9.5px; }
  .frame-sticker { top: -10px; right: -6px; padding: 8px 11px; font-size: 9px; }
  .frame-sticker b { font-size: 22px; }
  .hero-ctas { align-self: stretch; }
  .hero-ctas .btn { flex: 1; }
}
/* short phones (iPhone SE size): a smaller title and photo so the ticker still shows */
@media (max-width: 640px) and (max-height: 700px) {
  .hero-title { max-width: 70%; }
  .hero-frame { width: clamp(40%, calc((100svh - 520px) * 1.2), 64%); }
  .hero-frame figcaption { font-size: 8px; letter-spacing: .06em; white-space: nowrap; padding: 7px 0 9px; }
}

/* ── light-theme hero: the hero is a track infield. Lanes curve round the print,
   with lane numbers and an orange start line. (Dark theme keeps the light print on black.) */
:root[data-theme="light"] .hero::before { background: radial-gradient(55% 65% at 70% 50%, rgba(252,76,2,.08), transparent 65%); }
/* desktop: the track is anchored to the photo (not the screen edge), so the lanes curve round it at every width */
@media (min-width: 981px) {
  :root[data-theme="light"] .hero-inner { position: relative; }
  :root[data-theme="light"] .hero-inner::before {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    top: 50%; height: 130%; aspect-ratio: 4000 / 1020;
    left: calc((100% - clamp(40px, 6vw, 96px)) * .7632 + clamp(40px, 6vw, 96px));   /* centre of the photo column (columns are 1fr / .9fr) */
    transform: translate(-85.00%, -50%);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4000 1020'%3E%3Cg fill='none' stroke='%23161412' stroke-opacity='.11' stroke-width='2.2' vector-effect='non-scaling-stroke'%3E%3Cpath d='M-20 118 H3400 A392 392 0 0 1 3400 902 H-20'/%3E%3Cpath d='M-20 100 H3400 A410 410 0 0 1 3400 920 H-20'/%3E%3Cpath d='M-20 82 H3400 A428 428 0 0 1 3400 938 H-20'/%3E%3Cpath d='M-20 64 H3400 A446 446 0 0 1 3400 956 H-20'/%3E%3Cpath d='M-20 46 H3400 A464 464 0 0 1 3400 974 H-20'/%3E%3Cpath d='M-20 28 H3400 A482 482 0 0 1 3400 992 H-20'/%3E%3Cpath d='M-20 10 H3400 A500 500 0 0 1 3400 1010 H-20'/%3E%3C/g%3E%3Cg font-family='Helvetica Neue,Arial,sans-serif' font-weight='800' font-size='17' fill='%23161412' fill-opacity='.32' text-anchor='end'%3E%3Ctext x='2895' y='917'%3E1%3C/text%3E%3Ctext x='2895' y='935'%3E2%3C/text%3E%3Ctext x='2895' y='953'%3E3%3C/text%3E%3Ctext x='2895' y='971'%3E4%3C/text%3E%3Ctext x='2895' y='989'%3E5%3C/text%3E%3Ctext x='2895' y='1007'%3E6%3C/text%3E%3C/g%3E%3Cpath d='M2905 902 V1010' stroke='%23FC4C02' stroke-width='4.5' stroke-opacity='.9'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  }
}
:root[data-theme="light"] .frame-sticker { box-shadow: 0 14px 26px -12px rgba(252,76,2,.6); }
@media (min-width: 641px) and (max-width: 980px) {
  :root[data-theme="light"] .hero::before {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 820 1180'%3E%3Cg fill='none' stroke='%23161412' stroke-opacity='.11' stroke-width='2'%3E%3Cpath d='M-20 225.0 H620 A175.0 175.0 0 0 1 620 575.0 H-20'/%3E%3Cpath d='M-20 207.5 H620 A192.5 192.5 0 0 1 620 592.5 H-20'/%3E%3Cpath d='M-20 190.0 H620 A210.0 210.0 0 0 1 620 610.0 H-20'/%3E%3Cpath d='M-20 172.5 H620 A227.5 227.5 0 0 1 620 627.5 H-20'/%3E%3Cpath d='M-20 155.0 H620 A245.0 245.0 0 0 1 620 645.0 H-20'/%3E%3Cpath d='M-20 137.5 H620 A262.5 262.5 0 0 1 620 662.5 H-20'/%3E%3Cpath d='M-20 120.0 H620 A280.0 280.0 0 0 1 620 680.0 H-20'/%3E%3C/g%3E%3Cg font-family='Helvetica Neue,Arial,sans-serif' font-weight='800' fill='%23161412' text-anchor='end' font-size='13' fill-opacity='.3'%3E%3Ctext x='610' y='221'%3E1%3C/text%3E%3Ctext x='610' y='204'%3E2%3C/text%3E%3Ctext x='610' y='186'%3E3%3C/text%3E%3Ctext x='610' y='169'%3E4%3C/text%3E%3Ctext x='610' y='151'%3E5%3C/text%3E%3Ctext x='610' y='134'%3E6%3C/text%3E%3C/g%3E%3Cpath d='M620 120.0 V225' stroke='%23FC4C02' stroke-width='4' stroke-opacity='.9'/%3E%3C/svg%3E") left top / 100% auto no-repeat, radial-gradient(90% 40% at 55% 45%, rgba(252,76,2,.09), transparent 70%);
  }
}
@media (max-width: 640px) {
  :root[data-theme="light"] .hero::before {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 844'%3E%3Cg fill='none' stroke='%23161412' stroke-opacity='.12' stroke-width='1.5'%3E%3Cpath d='M-20 130 H262 A214 214 0 0 1 262 558 H-20'/%3E%3Cpath d='M-20 117 H262 A227 227 0 0 1 262 571 H-20'/%3E%3Cpath d='M-20 104 H262 A240 240 0 0 1 262 584 H-20'/%3E%3Cpath d='M-20 91 H262 A253 253 0 0 1 262 597 H-20'/%3E%3Cpath d='M-20 78 H262 A266 266 0 0 1 262 610 H-20'/%3E%3Cpath d='M-20 65 H262 A279 279 0 0 1 262 623 H-20'/%3E%3Cpath d='M-20 52 H262 A292 292 0 0 1 262 636 H-20'/%3E%3C/g%3E%3Cg font-family='Helvetica Neue,Arial,sans-serif' font-weight='800' fill='%23161412' text-anchor='middle' font-size='10' fill-opacity='.3'%3E%3Ctext x='250' y='128'%3E1%3C/text%3E%3Ctext x='250' y='114'%3E2%3C/text%3E%3Ctext x='250' y='102'%3E3%3C/text%3E%3Ctext x='250' y='88'%3E4%3C/text%3E%3Ctext x='250' y='76'%3E5%3C/text%3E%3Ctext x='250' y='62'%3E6%3C/text%3E%3C/g%3E%3Cpath d='M262 52 V130' stroke='%23FC4C02' stroke-width='3' stroke-opacity='.9'/%3E%3C/svg%3E") left top / 100% auto no-repeat, radial-gradient(95% 42% at 60% 46%, rgba(252,76,2,.1), transparent 70%);
  }
}

/* share: an orange-tinted pill, the one accent in the heading row */
.share-btn { border: 0; background: var(--accent-soft); color: var(--accent); font-weight: 700; transition: background .2s, transform .2s var(--ease); }
.share-btn:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.share-btn svg { width: 15px; height: 15px; stroke-width: 2.4; }
/* caption link on the hero print: quiet, same type as the caption, underline on hover */
.frame-link { color: inherit; text-decoration: none; text-underline-offset: 3px; transition: color .2s; }
.frame-link:hover, .frame-link:focus-visible { color: var(--accent); text-decoration: underline; }

/* team page: tighter rhythm, the footer follows the join band without a big empty gap */
.team-label { margin: 36px 0 16px; }
body:has(.team-wrap) .footer { margin-top: 40px; border-top: 0; }
@media (max-width: 640px) {
  body:has(.team-wrap) .footer { margin-top: 24px; padding-top: 28px; }
  .footer-word { margin-top: 24px; }
}
body:has(.team-wrap) .footer { padding-bottom: calc(32px + env(safe-area-inset-bottom)); }   /* no tab bar on the team page */
body:has(.team-wrap) .footer-word { margin-top: 0; }
.member-info > div:first-child { min-width: 0; }

/* ── team page: no empty space ──────────────────────────────
   The join card sits in the Crew row next to the last member and fills what's left of it:
   3 of 4 columns on desktop, the second column on tablets and phones. */
.team-hero { padding-bottom: 0; }
.team-wrap { padding-top: 0; padding-bottom: 0; }
.team-wrap > .team-label:first-child { margin-top: 32px; }
.crew-grid .join-band { margin: 0; grid-column: 1 / -1; align-items: center; }   /* full row, under the last member */
@media (max-width: 980px) {
  .crew-grid .join-band { grid-column: span 1; flex-direction: column; align-items: flex-start; justify-content: space-between; flex-wrap: nowrap; padding: 26px 24px; }
  .crew-grid .join-band h2 { font-size: clamp(26px, 5.4vw, 44px); }
  .crew-grid .join-band::before { width: 120%; right: -30%; bottom: -6%; }
}
@media (max-width: 640px) {
  .team-hero { padding-top: 92px; }
  .team-intro { margin-top: 18px; gap: 16px; }
  .team-wrap > .team-label:first-child { margin-top: 26px; }
  .team-label { margin: 26px 0 12px; }
  .crew-grid .join-band { padding: 16px 14px 14px; border-radius: 18px; gap: 10px; }
  .crew-grid .join-band h2 { font-size: clamp(19px, 6vw, 24px); line-height: .92; }
  .crew-grid .join-band p { font-size: 12px; line-height: 1.35; margin-top: 8px; }
  .crew-grid .join-band .btn { height: 36px; padding: 0 12px; font-size: 12.5px; border-radius: 11px; }
  body:has(.team-wrap) .footer { margin-top: 28px; padding-top: 0; }
}

/* phones: the name gets the card's full width (number moves down beside the role), so long names stay on one line */
@media (max-width: 640px) {
  .member-info { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 8px; }
  .member-info > div:first-child { display: contents; }
  .member-name { grid-column: 1 / -1; font-size: clamp(15px, 4.6vw, 20px); white-space: nowrap; }
  .member-role { grid-column: 1; }
  .member-idx { grid-column: 2; grid-row: 2; }
}
/* desktop: the intro sits beside the title instead of under it, so the space right of "THE CREW" is used */
@media (min-width: 981px) {
  .team-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 400px); column-gap: 56px; align-items: end; padding-top: 128px; }
  .team-hero .eyebrow, .team-title { grid-column: 1; }
  .team-intro { grid-column: 2; grid-row: 1 / span 2; flex-direction: column; align-items: flex-start; justify-content: flex-end; margin: 0 0 6px; gap: 20px; }
  body:has(.team-wrap) .footer { margin-top: 24px; padding-top: 24px; }
  body:has(.team-wrap) .footer-meta { margin-top: 16px; }
}
@media (min-width: 641px) and (max-width: 980px) {
  body:has(.team-wrap) .footer { margin-top: 28px; padding-top: 24px; }
}
/* phones and tablets: the join card goes full width under Rishendra */
@media (max-width: 980px) {
  .crew-grid .join-band { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: flex-end; padding: 24px 22px; }
  .crew-grid .join-band h2 { font-size: clamp(28px, 8vw, 48px); }
  .crew-grid .join-band p { font-size: 14px; }
  .crew-grid .join-band .btn { height: 42px; padding: 0 18px; font-size: 14px; }
  .crew-grid .join-band::before { width: 70%; right: -6%; bottom: -14%; }
}

@media (max-width: 640px) {
  .footer-meta { margin-top: 16px; gap: 6px; }
}

/* second look: hover on mouse devices only (a tap would leave :hover stuck on phones); taps toggle .flipped */
@media (hover: hover) {
  .member:hover .member-photos .photo-main { opacity: 0; transform: scale(1.06); }
  .member:hover .member-photos .alt { opacity: 1; transform: scale(1); }
  .member:hover .member-swap { transform: rotate(180deg); }
}
/* title + intro read as one block: on small screens the inner gap must sit well below the section gap */
@media (max-width: 980px) { .hero-head { gap: 8px; } }
@media (max-width: 640px) { .hero-head { gap: 2px; } }
@media (min-width: 641px) and (max-width: 980px) { .hero-frame { margin-top: 26px; } }   /* the sticker pokes ~24px above the print here */

/* soft section snapping (phones and tablets, leaderboard page): hero, week heading, full leaderboard.
   "proximity" only snaps when a scroll stops near one of these edges, so long lists scroll freely. */
@media (max-width: 980px) {
  html:has(.hero) { scroll-snap-type: y proximity; scroll-padding-top: calc(56px + env(safe-area-inset-top) + 12px); }
  .hero { scroll-snap-align: start; scroll-margin-top: 999px; }   /* the hero snaps to the very top */
  .view.active > .view-head, .view.active .band { scroll-snap-align: start; }
}