@font-face{font-family:"Fraunces";src:url("fonts/Fraunces-display.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Atkinson";src:url("fonts/AtkinsonHyperlegibleNext.woff2") format("woff2");font-weight:400 700;font-display:swap}
:root{
--paper:#faf3e3;--card:#fffdf6;--ink:#2a1f14;--soft:#57503f;--line:#ddd0b8;
--accent:#7a1c11;--accent-deep:#5f130c;--accent-ink:#7a1c11;
--cta-bg:#7a1c11;--cta-ink:#ffffff;
--hot:#8a5a00;--hot-deep:#6e4600;
--track:#e8ddc8;--track-line:#ffffff;--ghost:rgba(122,28,17,.32);
--good:#175c31;
--bar:rgba(250,243,227,.94);--panel:rgba(250,243,227,.9);
--serif:"Fraunces",Georgia,serif;--sans:"Atkinson",system-ui,-apple-system,"Segoe UI",sans-serif;
--py:0;
}
[data-theme="dark"]{
--paper:#0c1410;--card:#131e18;--ink:#e9efe4;--soft:#a9b6a6;--line:#2c3b32;
--accent:#e8b04b;--accent-deep:#f4c876;--accent-ink:#eec27a;
--cta-bg:#e8b04b;--cta-ink:#241a08;
--hot:#7fd4c1;--hot-deep:#a5e6d4;
--track:#1d2b23;--track-line:#3d5247;--ghost:rgba(232,176,75,.35);
--good:#7fd79a;
--bar:rgba(12,20,16,.94);--panel:rgba(12,20,16,.9);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:4.2rem}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:1.06rem;line-height:1.62;overflow-x:clip;-webkit-text-size-adjust:100%}
main{display:block;overflow-x:clip}
h1,h2,h3{font-family:var(--serif);line-height:1.12;letter-spacing:-.01em;text-wrap:balance}
h2{font-size:clamp(1.7rem,4.6vw,2.5rem);margin:0 0 .6rem}
h3{font-size:1.25rem;margin:0 0 .4rem}
p{margin:0 0 1rem}
a{color:var(--accent-ink)}
img{max-width:100%;height:auto;display:block;border-radius:.6rem}
[hidden]{display:none!important}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.num,.lane-time,.ktime,.you-out,.conv-out{font-variant-numeric:tabular-nums}
.note{font-size:.95rem;color:var(--soft)}
.wrap{max-width:46rem;margin:0 auto;padding:0 1.2rem}
.wide{max-width:62rem;margin:0 auto;padding:0 1.2rem}
.kicker{font-size:.85rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);margin:0 0 .5rem}
.lede{font-size:1.15rem}
.skip{position:absolute;left:.6rem;top:-3rem;background:var(--cta-bg);color:var(--cta-ink);padding:.5rem 1rem;border-radius:.5rem;z-index:60;transition:top .15s}
.skip:focus{top:.6rem}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:.3rem}
/* topbar + rail */
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:.9rem;padding:.55rem 1rem;background:var(--bar);border-bottom:1px solid var(--line);backdrop-filter:blur(8px)}
.topbar .home{font-weight:700;font-size:.95rem;color:var(--ink);text-decoration:none;white-space:nowrap}
.topnav{display:flex;gap:.9rem}
.topnav a{font-size:.92rem;color:var(--ink);text-decoration:none}
.topnav a:hover{text-decoration:underline}
.spacer{flex:1}
.chip{border:1px solid var(--line);border-radius:2rem;padding:.1rem .8rem;font-size:.85rem;text-decoration:none;color:var(--ink);background:var(--card);white-space:nowrap}
.icon-btn{background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:50%;width:2rem;height:2rem;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
.rail{position:fixed;right:.7rem;top:50%;translate:0 -50%;z-index:40;display:flex;flex-direction:column;gap:.55rem}
.rail-dot{display:flex;align-items:center;gap:.5rem;flex-direction:row-reverse;text-decoration:none}
.rail-dot .dot{width:.6rem;height:.6rem;border-radius:50%;background:var(--line);border:1px solid var(--soft)}
.rail-dot.current .dot{background:var(--accent);border-color:var(--accent)}
.rail-label{font-size:.72rem;color:var(--soft);opacity:0;transition:opacity .15s;white-space:nowrap}
.rail-dot:hover .rail-label,.rail-dot.current .rail-label{opacity:1}
/* hero */
.hero{position:relative;min-height:92svh;display:flex;align-items:flex-end;overflow:clip}
.scene{position:absolute;inset:0;background:linear-gradient(#bcd6e8 0%,#e9e2cd 34%,#c96f4a 34.2%,#a83c22 60%,#7a1f12 100%)}
[data-theme="dark"] .scene{background:linear-gradient(#060b0e 0%,#0c1a20 34%,#17352c 34.2%,#10231c 62%,#0a1512 100%)}
.scene .layer{position:absolute;inset:0}
.flood{position:absolute;top:2%;width:34vmin;height:34vmin;border-radius:50%;background:radial-gradient(closest-side,rgba(255,244,214,.95),rgba(255,244,214,0));opacity:.35}
.f1{left:6%}.f2{right:6%}
[data-theme="dark"] .flood{opacity:.8}
.stands{position:absolute;left:0;right:0;top:6%;width:100%;height:26%}
.stands path{fill:#8a97a3;opacity:.75}
.stands .crowd circle{fill:#5c686f;opacity:.8}
[data-theme="dark"] .stands path{fill:#101d26}
[data-theme="dark"] .stands .crowd circle{fill:#2b3f4d}
.track{position:absolute;left:-10%;right:-10%;bottom:-4%;width:120%;height:66%}
.track rect{fill:#b34a2e}
[data-theme="dark"] .track rect{fill:#1c3a2e}
.lane-lines line{stroke:rgba(255,255,255,.85);stroke-width:2}
.finish{fill:#fdfdfd}
[data-theme="dark"] .finish{fill:#e8f0e4}
.runners{position:absolute;left:0;right:0;bottom:9%;display:flex;justify-content:space-around;padding:0 4%}
.lane-run{width:clamp(1.6rem,4.5vw,2.6rem);color:#fff8ea;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35));animation:bob 1.1s ease-in-out infinite alternate}
.lane-run svg{width:100%;height:auto;display:block}
.lane-run.r2{animation-delay:-.2s}.lane-run.r3{animation-delay:-.5s}.lane-run.r4{animation-delay:-.8s}
.lane-run.r5{animation-delay:-.35s}.lane-run.r6{animation-delay:-.65s}.lane-run.r7{animation-delay:-.1s}.lane-run.r8{animation-delay:-.9s}
@keyframes bob{from{translate:0 0}to{translate:0 -6px}}
.hero-copy{position:relative;width:100%;padding:0 1.2rem 2.5rem}
.hero-copy .panel{max-width:46rem;margin:0 auto;background:var(--panel);border:1px solid var(--line);border-radius:1rem;padding:1.4rem 1.5rem;backdrop-filter:blur(8px)}
.hero h1{font-size:clamp(2rem,6.4vw,3.4rem);margin:0 0 .7rem}
.deck{font-size:clamp(1.05rem,2.6vw,1.3rem);margin:0 0 1.1rem}
.deck strong{color:var(--accent-ink)}
.cta{display:inline-flex;align-items:center;gap:.5rem;background:var(--cta-bg);color:var(--cta-ink);font-weight:700;font-size:1.05rem;padding:.7rem 1.3rem;border:none;border-radius:2rem;cursor:pointer;text-decoration:none}
.cta:hover{filter:brightness(1.06)}
.cta:disabled{opacity:.55;cursor:default}
.byline{font-size:.92rem;color:var(--soft);margin:1rem 0 0}
/* chapters + figures */
.chapter{padding:3.2rem 0 1rem}
.chapter-head{margin-bottom:.4rem}
figure{margin:1.6rem auto;max-width:62rem;padding:0 1.2rem}
figure img{width:100%}
figcaption{font-size:.92rem;color:var(--soft);margin-top:.5rem}
.credit{display:block;font-size:.85rem}
.reveal{opacity:0;translate:0 14px;transition:opacity .5s ease,translate .5s ease}
.reveal.in{opacity:1;translate:0 0}
html.no-js .reveal{opacity:1;translate:none}
/* share */
.share{padding:1.2rem}
.share-row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.share-row .lab{font-size:.9rem;color:var(--soft);margin-right:.3rem}
.share-row a,.share-row button{font-size:.9rem;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:2rem;padding:.3rem .9rem;text-decoration:none;cursor:pointer;font-family:var(--sans)}
.share-status{font-size:.9rem;color:var(--soft);margin:.4rem 0 0}
/* your time */
.youpanel{background:var(--card);border:1px solid var(--line);border-radius:1rem;padding:1.2rem 1.3rem;margin:0 auto;max-width:46rem}
.yrow{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;margin-bottom:.9rem}
.ylab{font-weight:700;font-size:.95rem;min-width:9rem}
.seg{display:flex;gap:.4rem;flex-wrap:wrap}
.seg button{font:inherit;font-size:.95rem;padding:.35rem 1rem;border-radius:2rem;border:1px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--cta-bg);color:var(--cta-ink);border-color:var(--cta-bg)}
.persona{font-weight:700;margin:0 0 .8rem}
.yrow.inputs>div{flex:1 1 12rem}
.youpanel label,.conv label{display:block;font-weight:700;font-size:.95rem;margin-bottom:.3rem}
input[type="number"]{font:inherit;font-size:1.05rem;padding:.45rem .7rem;border-radius:.6rem;border:2px solid var(--line);background:var(--paper);color:var(--ink);width:100%;max-width:12rem}
input[type="number"]:focus{border-color:var(--accent);outline:none}
.youpanel .note{margin:.3rem 0 0}
.you-out{font-size:1.2rem;font-weight:700;margin:1rem 0 .2rem}
.you-out-km{margin:0}
/* percentile chart */
.pct-wrap{background:var(--card);border:1px solid var(--line);border-radius:1rem;padding:.8rem;max-width:46rem;margin:0 auto}
.pct{width:100%;height:auto;display:block}
.pct text{font-family:var(--sans);font-size:13px;fill:var(--soft)}
.pct .grid line{stroke:var(--line);stroke-width:1}
.pct .band.outer{opacity:.16}
.pct .band.mid{opacity:.28}
.pct .band.boys,.pct .sw.boys{fill:var(--accent)}
.pct .band.girls,.pct .sw.girls{fill:var(--hot)}
.pct .p50{fill:none;stroke-width:2.5}
.pct .p50.boys{stroke:var(--accent)}
.pct .p50.girls{stroke:var(--hot);stroke-dasharray:7 4}
.pct .legend-t text{font-size:13px}
#you-dot circle{fill:var(--accent-deep);stroke:var(--card);stroke-width:2.5}
[data-theme="dark"] #you-dot circle{fill:var(--accent-deep)}
#you-dot text{fill:var(--ink);font-weight:700}
/* race */
.race{max-width:46rem;margin:0 auto}
.predict{border:1px solid var(--line);border-radius:1rem;background:var(--card);padding:1rem 1.1rem;margin:0 0 1.2rem}
.predict legend{font-weight:700;padding:0 .5rem}
.picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:.5rem;margin-top:.4rem}
.pick-check{display:flex;align-items:center;gap:.55rem;border:1px solid var(--line);border-radius:.7rem;padding:.4rem .6rem;cursor:pointer;background:var(--paper);font-size:.95rem}
.pick-check input{position:absolute;opacity:0;width:1px;height:1px}
.pick-check .box{width:2.2rem;flex:none;color:var(--ink)}
.pick-check .box svg{width:100%;height:auto;display:block}
.pick-check:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset}
.pick-check:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:2px}
.pick-check:has(input:disabled){opacity:.6;cursor:default}
.pick-radio{display:flex;align-items:center;gap:.5rem;border:1px solid var(--line);border-radius:.7rem;padding:.45rem .7rem;cursor:pointer;background:var(--paper);font-size:.95rem}
.pick-radio input{accent-color:var(--accent);width:1.1rem;height:1.1rem;margin:0}
.pick-radio:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset}
.race-top{display:flex;flex-wrap:wrap;gap:.8rem 1.2rem;align-items:center;margin-bottom:.6rem}
.race-top .note{margin:0;flex:1 1 20rem}
.lanes{list-style:none;margin:0 0 1rem;padding:0;display:flex;flex-direction:column;gap:.55rem}
.lane{background:var(--card);border:1px solid var(--line);border-radius:.8rem;padding:.6rem .8rem .7rem}
.lane-head{display:flex;align-items:center;gap:.6rem}
.lane-head svg{width:2.4rem;flex:none;color:var(--ink)}
.lane-name{font-weight:700}
.lane.you{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.lane.ghost .lane-head svg{opacity:.75}
.badge{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--accent);color:var(--accent-ink);border-radius:2rem;padding:.05rem .55rem;white-space:nowrap}
.badge.pace,.badge.band{border-style:dashed}
.badge.unknown{border-style:dotted;border-color:var(--soft);color:var(--soft)}
.lane-time{margin-left:auto;font-weight:700}
.lane .track{position:relative;height:1.5rem;background:var(--track);border-radius:2rem;margin-top:.45rem;overflow:hidden}
.lane.ghost .track{border:1.5px dashed var(--accent)}
.lane .track::after{content:"";position:absolute;top:0;bottom:0;right:6px;width:3px;background:var(--track-line)}
.marker{position:absolute;top:50%;left:0;width:1.1rem;height:1.1rem;margin:-.55rem 0 0 -.55rem;border-radius:50%;background:var(--cta-bg);border:2px solid var(--card)}
.lane.ghost .marker{background:transparent;border:2px dashed var(--accent)}
.lane .band{position:absolute;top:0;bottom:0;left:0;width:0;background:var(--ghost);border-right:2px dashed var(--accent)}
.lane .track.q{display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--soft);border:1.5px dotted var(--soft);background:transparent}
.lane-fact{margin:.45rem 0 0}
.lane-verdict{margin:.4rem 0 0;font-weight:700}
.lane-verdict.beats{color:var(--accent-ink)}
.lane-verdict.loses{color:var(--good)}
.lane-verdict.na,.lane-verdict.span{color:var(--soft)}
.race-score{font-size:1.25rem;font-weight:700}
.race-static .fin{margin:0 0 1rem;padding-left:1.4rem}
.race-static .fin li{margin-bottom:.3rem}
.race-static h3{margin:1.1rem 0 .4rem}
.btn{font:inherit;padding:.5rem 1.1rem;border-radius:2rem;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer}
.btn.solid{background:var(--cta-bg);color:var(--cta-ink);border-color:var(--cta-bg);font-weight:700}
/* stopwatch cards */
.wcards{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;max-width:62rem;margin:0 auto}
.wcards.three{grid-template-columns:repeat(3,1fr)}
.wcard{background:var(--card);border:1px solid var(--line);border-radius:1rem;padding:1.1rem 1.2rem}
.wcard p:last-child{margin-bottom:0}
/* kilometre */
.km{max-width:46rem}
.km fieldset{border:1px solid var(--line);border-radius:1rem;background:var(--card);padding:1rem 1.1rem;margin:0 0 1rem}
.km legend{font-weight:700;padding:0 .5rem}
.kbars{margin:1rem 0}
.krow{margin-bottom:.9rem}
.kname{display:flex;flex-wrap:wrap;gap:.4rem .7rem;align-items:center;font-weight:700}
.ktime{margin-left:auto}
.kbar{display:block;width:100%;height:1.6rem;background:var(--track);border-radius:2rem;margin-top:.3rem}
.kbar rect{fill:url(#kgrad)}
#kgrad stop:first-child{stop-color:var(--accent-deep)}
#kgrad stop:last-child{stop-color:var(--accent)}
.kbars.on .kbar rect{transition:width 1.2s ease}
.krow.dnf .kname{font-weight:700}
.knote{margin:.15rem 0 0;display:block}
.km-verdict{font-size:1.2rem;font-weight:700}
/* game */
.game{max-width:46rem}
.game-progress{list-style:none;display:flex;gap:.4rem;padding:0;margin:0 0 .6rem}
.game-progress li{width:1.6rem;height:.45rem;border-radius:1rem;background:var(--line)}
.game-progress li.right{background:var(--good)}
.game-progress li.wrong{background:var(--accent)}
.q{font-size:1.3rem;font-weight:700}
.answers{display:flex;flex-wrap:wrap;gap:.6rem;margin:.8rem 0}
.answers button{font:inherit;font-weight:700;padding:.55rem 1.2rem;border-radius:2rem;border:2px solid var(--accent);background:var(--card);color:var(--ink);cursor:pointer}
.answers button.picked.right{border-color:var(--good);box-shadow:0 0 0 2px var(--good) inset}
.answers button.picked.wrong{border-color:var(--accent);background:var(--accent);color:var(--cta-ink)}
.answers button:disabled{cursor:default;opacity:.85}
.explain{background:var(--card);border:1px solid var(--line);border-radius:1rem;padding:1rem 1.2rem;margin-top:.4rem}
.explain .tag{font-weight:700;font-size:1.05rem}
.explain .tag.ok{color:var(--good)}
.explain .tag.no{color:var(--accent-ink)}
.explain .why{margin:.4rem 0}
.all-answers{list-style:none;padding:0;margin:.8rem 0 0}
.all-answers li{margin-bottom:.8rem}
.all-answers .tag{font-weight:700;color:var(--accent-ink)}
.result .score{font-size:1.6rem;font-weight:700;margin:0}
.result .rank{font-size:1.4rem;margin:.3rem 0}
/* converter */
.conv{background:var(--card);border:1px solid var(--line);border-radius:1rem;padding:1.1rem 1.2rem;margin-top:1rem}
.conv-row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:flex-end}
.conv-out{font-size:1.15rem;font-weight:700;margin:.9rem 0 .3rem}
/* sources + footer + 404 */
.sources ul{padding-left:1.3rem}
.sources li{margin-bottom:.5rem;font-size:.98rem}
.sources h3{margin:1.4rem 0 .5rem}
.site-footer{border-top:1px solid var(--line);margin-top:3rem;padding:1.4rem 1.2rem;text-align:center;font-size:.95rem;color:var(--soft)}
.nf-main{padding:4rem 1.2rem;text-align:center}
/* contact-sheet helpers */
.defs{position:absolute}
/* confetti */
.confetti{position:fixed;inset:0;pointer-events:none;z-index:70;overflow:hidden}
.confetti i{position:absolute;top:-4%;width:.6rem;height:.9rem;border-radius:.15rem;background:var(--accent);animation:fall 3s ease-in forwards}
.confetti i:nth-child(2n){background:var(--hot)}
.confetti i:nth-child(3n){background:var(--good)}
@keyframes fall{to{transform:translateY(110vh) rotate(540deg)}}
@media(max-width:1100px){.rail{display:none}}
@media(max-width:760px){
body{font-size:1rem}
.topbar{gap:.5rem;padding:.5rem .7rem}
.topbar .home{display:none}
.topnav{gap:.55rem}
.topnav a{font-size:.85rem}
.topbar .home{font-size:.85rem}
.hero{min-height:88svh}
.wcards,.wcards.three{grid-template-columns:1fr}
.picks{grid-template-columns:1fr 1fr}
.chapter{padding:2.4rem 0 .6rem}
.yrow.inputs>div{flex-basis:100%}
}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.reveal{opacity:1;translate:none;transition:none}
.lane-run,.confetti i{animation:none}
.kbars.on .kbar i{transition:none}
}