/* The gliding scene sits behind everything. Text stays on near-solid panels so it remains easy to read. */
:root { --bar-h: 104px; --panel: rgb(250 253 254 / .93); --bg: #f4f8fa; --ink: #12314a; color-scheme: light }
html { background: #bfe0f2; scroll-behavior: smooth }
body { background: transparent; margin: 0 }
#scene, #front-snow { position: fixed; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none }
#scene { z-index: -1; background: linear-gradient(#5aa7dc, #d8eef8 50%, #f3f8fb) }
#front-snow { z-index: 20 }

.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; padding-block: max(36px, 7vh) 24vh; background: none; border: 0; color: var(--ink) }
.hero::before { content: ""; position: absolute; z-index: -1; inset: 0 auto 12vh -40vw; width: min(95vw, calc(40vw + 720px)); background: radial-gradient(closest-side at 62% 45%, rgb(255 255 255 / .9), rgb(255 255 255 / .72) 58%, rgb(255 255 255 / 0)) }
.hero h1 { font-size: clamp(66px, 13vw, 168px); line-height: .86; letter-spacing: -.015em }
.hero .lede { font-size: clamp(17px, 2vw, 21px); max-width: 36ch; margin-top: 14px; line-height: 1.35 }
.stats { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 18px 0 0; padding: 0; list-style: none }
.stats b { display: block; font: 700 36px/1 var(--display) }
.stats span { font: 600 13px var(--display); letter-spacing: .08em; text-transform: uppercase }
.next-up { margin: 14px 0 0; font-size: 15px; font-weight: 600; max-width: 46ch }
.glide-in { align-self: flex-start; margin-top: 18px; display: inline-flex; gap: 10px; align-items: center; font: 700 20px var(--display); letter-spacing: .04em; text-transform: uppercase; color: #fff; background: #b5261e; border-radius: 999px; padding: 11px 22px; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease }
.glide-in:hover { transform: translateX(5px); box-shadow: 0 8px 22px rgb(18 49 74 / .3) }
.glide-in svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4 }

/* Season trail: weekly race counts drawn as a ridgeline, with a skier marking your place. */
.season { position: sticky; top: 0; z-index: 5; height: var(--bar-h); background: #fafdfe; border-block: 1px solid var(--line) }
.season .wrap { padding-block: 8px 4px }
.season-top { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; min-height: 20px; font: 600 14px var(--display); letter-spacing: .05em; text-transform: uppercase }
.season-top #week-clear { font: 600 13px var(--body); letter-spacing: 0; text-transform: none; color: var(--accent); white-space: nowrap }
.ridge { position: relative; height: 48px; margin-top: 2px }
.ridge svg.line { position: absolute; inset: 0; width: 100%; height: 100%; display: block }
.ridge path.fill { fill: #5aa7dc; opacity: .32 }
.ridge path.top { fill: none; stroke: var(--ink); stroke-width: 1.6; vector-effect: non-scaling-stroke }
.weeks { position: absolute; inset: 0; display: flex }
.weeks button { flex: 1 1 0; min-width: 0; padding: 0; background: none; border: 0; cursor: pointer; border-radius: 2px }
.weeks button:disabled { cursor: default }
.weeks button:not(:disabled):hover, .weeks button:focus-visible { background: rgb(18 49 74 / .12) }
.weeks button[aria-pressed=true] { background: rgb(181 38 30 / .25) }
.skier { position: absolute; width: 40px; height: 34px; margin: 0 0 -2px -20px; pointer-events: none; transition: left .45s ease, bottom .45s ease }
.skier svg { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 1px #fafdfe) drop-shadow(0 0 1px #fafdfe) }
.skier .fill { fill: var(--ink); stroke: none }
.skier .limb { stroke-width: 6.5 }
.skier .pole { stroke-width: 2.6 }
.skier .ski { stroke-width: 4 }
@media (max-width: 800px) { .skier { width: 34px; height: 29px; margin-left: -17px } }
.season .months { height: 16px }
.season .months span { top: 0 }

.layout { background: var(--panel); margin-top: 28px; margin-bottom: 28px; border-radius: 6px; padding-top: 22px; padding-inline: clamp(16px, 2.4vw, 28px) !important; max-width: 1180px; width: calc(100% - 32px); box-shadow: 0 10px 34px rgb(18 49 74 / .12) }
.rail { top: calc(var(--bar-h) + 16px) }
.month { top: var(--bar-h); background: #f7fafb; padding-top: 6px; z-index: 3 }
input[type=search], select { background: #fff }

.race { position: relative; grid-template-columns: 78px minmax(0, 1fr); padding: 15px 12px 15px 16px; border-bottom: 0; border-radius: 4px; margin-top: 8px; background: rgb(230 241 247 / .72); transition: transform .24s ease, background .24s ease, opacity .5s ease }
.race::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 4px; border-radius: 3px; background: var(--race-color) }
.race:hover { background: #dcebf3; transform: translateX(4px) }
.race.pre { opacity: 0; transform: translateX(26px) }
.race h3 { font-size: 17px }
.place b { display: none }

/* Each race's distances are marked along a small trail, scaled from 0 to 60 km. */
.course { position: relative; height: 16px; max-width: 320px; margin-top: 8px; background: linear-gradient(#a9bfcc, #a9bfcc) 0 50% / 100% 2px no-repeat }
.course i { position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--race-color); border: 1.5px solid #fff }

footer { background: var(--panel); padding-block: 22px 32px; color: var(--muted) }
#motion-toggle { position: fixed; right: max(14px, env(safe-area-inset-right, 0px)); bottom: max(14px, env(safe-area-inset-bottom, 0px)); z-index: 21; font: 600 14px var(--display); letter-spacing: .05em; text-transform: uppercase; color: var(--ink); background: rgb(255 255 255 / .92); border: 1px solid #8fa9b9; border-radius: 999px; padding: 8px 14px; cursor: pointer; display: inline-flex; gap: 8px; align-items: center }
#motion-toggle i { width: 10px; height: 12px; border-inline: 3px solid currentColor }
#motion-toggle[data-playing=false] i { width: 0; height: 0; border-block: 6px solid transparent; border-inline: 10px solid currentColor; border-right-width: 0 }

@media (max-width: 800px) {
  .hero { padding-block: 32px 26vh }
  /* On phones the button shrinks to an icon so it doesn't cover race links. */
  #motion-toggle { width: 40px; height: 40px; padding: 0; justify-content: center }
  #motion-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%) }
  .race { padding-bottom: 18px }
  .hero::before { inset: 0 0 42vh 0; width: auto; background: linear-gradient(rgb(255 255 255 / .72), rgb(255 255 255 / .82) 70%, rgb(255 255 255 / 0)) }
  .stats b { font-size: 30px }
  .layout { width: calc(100% - 16px); margin-top: 14px; padding-inline: 10px !important }
  .race { grid-template-columns: 62px minmax(0, 1fr); padding: 13px 8px 13px 13px }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  .race, .skier, .glide-in { transition: none }
  .race:hover, .glide-in:hover { transform: none }
}
@media print {
  #scene, #front-snow, #motion-toggle { display: none }
}