@font-face { font-family:Onest; font-style:normal; font-weight:400 700; font-display:swap; src:url(/assets/fonts/onest-cyrillic.woff2) format('woff2'); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:Onest; font-style:normal; font-weight:400 700; font-display:swap; src:url(/assets/fonts/onest-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:'Archivo Black'; font-style:normal; font-weight:400; font-display:swap; src:url(/assets/fonts/archivo-black-sub.woff2) format('woff2'); unicode-range:U+41,U+44-45,U+49,U+4C-4F,U+52-55,U+57; }
:root { color-scheme: light; --paper:#eeede8; --ink:#20221f; --muted:#64665e; --line:#c9cbc2; font-family:Onest,Arial,sans-serif; color:var(--ink); background:var(--paper); }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; }
button { font:inherit; color:inherit; cursor:pointer; }
a:focus-visible,button:focus-visible { outline:2px solid var(--ink); outline-offset:5px; }
.page { min-height:100svh; display:flex; flex-direction:column; overflow:hidden; }
.masthead { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:25px 4vw; border-bottom:1px solid var(--line); }
.logo { display:inline-flex; align-items:center; color:inherit; text-decoration:none; font-size:clamp(23px,2.5vw,34px); font-weight:700; letter-spacing:-.065em; line-height:1; white-space:nowrap; }
.logo-mark { width:.8em; height:1.06em; margin-right:-.015em; flex:none; transform:translateY(-.045em); }
.purpose { margin:0; max-width:260px; font-size:13px; line-height:1.4; text-align:right; color:var(--muted); }
.hero { flex:1; display:flex; flex-direction:column; }
.intro { padding:27px 4vw 0; display:flex; align-items:baseline; justify-content:space-between; gap:20px; position:relative; z-index:3; }
h1 { margin:0; font-size:clamp(21px,2.5vw,36px); font-weight:500; line-height:1.2; letter-spacing:-.04em; }
.format { margin:0; font:12px/1.5 ui-monospace,'SF Mono',Menlo,Consolas,monospace; text-align:right; color:var(--muted); }
.stage { position:relative; isolation:isolate; flex:1; min-height:450px; height:calc(100svh - 245px); overflow:hidden; }
.frame { position:absolute; inset:0; --shadow-left:43%; --shadow-bottom:5%; --shadow-width:43%; --shadow-height:9%; opacity:0; visibility:hidden; transition:opacity 650ms ease,visibility 650ms; }
.frame.is-active { opacity:1; visibility:visible; }
.word { position:absolute; z-index:1; left:3%; bottom:1%; font-family:'Archivo Black',Impact,'Arial Black',sans-serif; font-size:clamp(140px,23vw,360px); letter-spacing:-.09em; line-height:.78; color:var(--ink); user-select:none; }
.frame::before { content:""; position:absolute; top:25%; left:15%; width:66%; height:40%; border-top:1px solid var(--line); transform:rotate(-12deg); }
.frame::after { content:""; position:absolute; z-index:0; left:var(--shadow-left); bottom:var(--shadow-bottom); width:var(--shadow-width); height:var(--shadow-height); border-radius:50%; background:radial-gradient(ellipse at center,rgba(32,34,31,.2) 0%,rgba(32,34,31,.08) 42%,transparent 74%); filter:blur(8px); pointer-events:none; }
.athlete { display:block; position:absolute; z-index:2; width:76%; height:98%; object-fit:contain; object-position:center; left:23%; bottom:0; filter:drop-shadow(7px 12px 9px rgba(32,34,31,.12)); transform:translateX(16px); transition:transform 900ms cubic-bezier(.2,.7,.2,1); }
.is-active .athlete { transform:translateX(0); }
[data-sport="trail"] { --shadow-left:37%; --shadow-width:45%; --shadow-bottom:5%; }
[data-sport="trail"] .word { left:3%; top:12%; bottom:auto; font-size:clamp(100px,18vw,280px); color:#b8bbb0; }
[data-sport="trail"] .athlete { width:80%; left:16%; }
[data-sport="trail"]::before { transform:rotate(-22deg); top:58%; }
[data-sport="ride"] { --shadow-left:31%; --shadow-width:61%; --shadow-bottom:3%; --shadow-height:8%; }
[data-sport="ride"] .word { left:3%; top:12%; bottom:auto; font-size:clamp(130px,21vw,325px); color:#b8bbb0; }
[data-sport="ride"] .athlete { width:82%; left:15%; height:96%; }
[data-sport="ride"]::before { transform:none; top:62%; }
[data-sport="swim"] .word { font-size:clamp(120px,20vw,320px); }
[data-sport="swim"] .athlete { width:90%; left:8%; height:82%; bottom:13%; }
[data-sport="swim"]::before { transform:none; top:43%; border-bottom:1px solid var(--line); height:11%; }
[data-sport="swim"]::after { left:19%; bottom:35%; width:72%; height:18%; border-radius:0; background:radial-gradient(ellipse at center,rgba(105,129,135,.14),transparent 72%); filter:blur(15px); }
[data-sport="orient"] { --shadow-left:42%; --shadow-width:42%; --shadow-bottom:4%; }
[data-sport="orient"] .word { font-size:clamp(90px,16vw,255px); }
[data-sport="orient"] .athlete { width:77%; left:21%; }
[data-sport="tri"] { --shadow-left:36%; --shadow-width:55%; --shadow-bottom:3%; --shadow-height:8%; }
[data-sport="tri"] .word { font-size:clamp(160px,25vw,380px); }
[data-sport="tri"] .athlete { width:79%; left:20%; }
.controls { position:relative; z-index:4; margin:0 4vw; padding:15px 0 20px; display:flex; align-items:center; justify-content:space-between; gap:24px; border-top:1px solid var(--line); }
.sports { display:flex; flex-wrap:wrap; gap:3px 22px; }
.sport { position:relative; min-height:44px; padding:10px 0; border:0; background:transparent; font-size:14px; color:var(--muted); white-space:nowrap; }
.sport[aria-pressed="true"] { color:var(--ink); font-weight:600; }
.sport::after { content:""; position:absolute; right:0; bottom:3px; left:0; height:2px; background:var(--ink); transform:scaleX(0); transform-origin:left; }
.sport[aria-pressed="true"]::after { transform:scaleX(1); }
.playing .sport[aria-pressed="true"]::after { animation:progress 7s linear both; }
.toggle { min-height:44px; padding:10px 0 10px 16px; border:0; background:transparent; color:var(--muted); font-size:12px; white-space:nowrap; }
.toggle:hover,.sport:hover { color:var(--ink); }
@keyframes progress { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@media(min-width:1800px) { .stage { min-height:700px; } }
@media(max-width:760px) {
  .masthead { padding:22px 20px; gap:16px; }
  .purpose { max-width:140px; font-size:12px; }
  .intro { padding:23px 20px 0; display:block; }
  h1 { max-width:310px; font-size:27px; }
  .format { margin-top:10px; text-align:left; }
  .stage { height:calc(100svh - 310px); min-height:340px; }
  .frame { --shadow-left:20%; --shadow-bottom:12%; --shadow-width:65%; --shadow-height:9%; }
  .word { left:4%; bottom:7%; font-size:36vw; }
  .athlete { width:125%; left:-8%; height:95%; bottom:6%; }
  [data-sport="trail"] .word { top:12%; font-size:27vw; }
  [data-sport="trail"] { --shadow-left:17%; --shadow-bottom:12%; --shadow-width:68%; }
  [data-sport="trail"] .athlete { width:125%; left:-10%; }
  [data-sport="ride"] .word { top:12%; font-size:32vw; }
  [data-sport="ride"] { --shadow-left:10%; --shadow-bottom:8%; --shadow-width:80%; }
  [data-sport="ride"] .athlete { width:120%; left:-8%; height:85%; }
  [data-sport="swim"] .word { font-size:31vw; }
  [data-sport="swim"] .athlete { width:105%; left:-2%; height:72%; bottom:22%; }
  [data-sport="swim"]::after { left:7%; bottom:39%; width:86%; height:13%; }
  [data-sport="orient"] .word { font-size:24vw; }
  [data-sport="orient"] { --shadow-left:20%; --shadow-bottom:11%; --shadow-width:62%; }
  [data-sport="orient"] .athlete { width:125%; left:-10%; }
  [data-sport="tri"] .word { font-size:38vw; }
  [data-sport="tri"] { --shadow-left:16%; --shadow-bottom:8%; --shadow-width:70%; }
  [data-sport="tri"] .athlete { width:120%; left:-8%; height:88%; }
  .controls { margin:0 20px; gap:8px; padding:10px 0 15px; align-items:flex-end; }
  .sports { gap:0 16px; }
  .sport { font-size:12px; }
  .toggle { font-size:12px; padding-left:3px; }
}
@media(max-width:390px) {
  .logo { font-size:21px; }
  .purpose { max-width:108px; font-size:11px; }
}
@media(prefers-reduced-motion:reduce) {
  .frame,.athlete { transition:none; transform:none; }
  .playing .sport[aria-pressed="true"]::after { animation:none; }
}
.not-found { margin:0; padding:20px 4vw; font-size:15px; }
.not-found a { color:var(--ink); text-underline-offset:4px; }
@media(max-width:760px) { .not-found { padding:20px; } }