/* Fonts are linked from index.html , not @imported here: an @import
chains html > css > css > font and pushes back first paint. */
:root{
--ink:#0a0a0c;
--rosso:#d40000;
--rosso-deep:#9a0000;
--silver:#c8ccd2;
--paper:#f3f0ea;
--line:rgba(255,255,255,.14);
--muted:#8a8d94;
--pad:20px; /* mobile gutter */
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
background:var(--ink);
color:var(--paper);
font-family:'Archivo',system-ui,sans-serif;
line-height:1.5;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
::selection{background:var(--rosso);color:#fff}
/* mobile-first wrap: full-bleed gutters, env() for notches */
.wrap{
width:100%;
margin:0 auto;
padding-left:max(var(--pad),env(safe-area-inset-left));
padding-right:max(var(--pad),env(safe-area-inset-right));
}
/* ---------- HERO ---------- */
.hero{
position:relative;
padding:44px 0 36px;
border-bottom:1px solid var(--line);
overflow:hidden;
}
.hero::before{
content:attr(data-bg);
position:absolute;
right:-6vw;top:58%;transform:translateY(-50%);
font-family:'Archivo Black',sans-serif;
font-size:46vw;
color:rgba(212,0,0,.07);
line-height:.8;letter-spacing:-.04em;
pointer-events:none;user-select:none;z-index:0;
transition:color .4s ease;
}
.hero > *{position:relative;z-index:1}
.eyebrow{
font-family:'Space Mono',monospace;
font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
color:var(--rosso);
display:flex;align-items:center;gap:10px;
margin-bottom:22px;
}
.eyebrow::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,var(--rosso),transparent)}
.bignum{
font-family:'Archivo Black',sans-serif;
font-size:34vw;
line-height:.82;
letter-spacing:-.05em;
}
.bignum .pct{font-size:.4em;vertical-align:super;color:var(--rosso);margin-left:.04em}
.heroclaim{
font-size:clamp(19px,5.6vw,30px);
font-weight:600;
max-width:18ch;
margin-top:12px;
}
.herosub{
color:var(--muted);
margin-top:16px;max-width:54ch;
font-size:14.5px;
}
.stamp{
font-family:'Space Mono',monospace;font-size:10px;
color:var(--muted);margin-top:22px;letter-spacing:.04em;line-height:1.6;
}
.stamp .live{color:var(--rosso)}
.stamp .live.stale{color:var(--muted)}
/* ---------- CONTENDER BARS ---------- */
.field{padding:40px 0;border-bottom:1px solid var(--line)}
/* ---------- CHART ---------- */
.chartwrap{margin-bottom:18px}
.chart{width:100%;height:230px;display:block;overflow:visible}
.chart .grid{stroke:rgba(255,255,255,.07);stroke-width:1}
.chart .nowline{stroke:rgba(255,255,255,.28);stroke-width:1;stroke-dasharray:3 4}
/* wayback scrubber marker: the round currently being inspected */
.chart .markline{stroke:var(--rosso);stroke-width:1.5;opacity:.7}
.chart .markdot{stroke:var(--ink);stroke-width:2}
/* dashed teammate line keeps the team colour but can't share the draw-in animation */
.chart path.line.alt{animation:none;stroke-dashoffset:0}
.chart .axlabel{fill:var(--muted);font-family:'Space Mono',monospace;font-size:11px}
.chart path.line{fill:none;stroke-width:3;stroke-linejoin:round;stroke-linecap:round;
stroke-dasharray:1400;stroke-dashoffset:1400;animation:draw 1.4s cubic-bezier(.16,1,.3,1) forwards}
.chart path.proj{stroke-dasharray:4 5;opacity:.65;animation:none}
.chart .dot{stroke:var(--ink);stroke-width:2}
@keyframes draw{to{stroke-dashoffset:0}}
.chartx{display:flex;justify-content:space-between;font-family:'Space Mono',monospace;
font-size:10px;color:var(--muted);letter-spacing:.08em;margin-top:6px}
.chartx .xnow{color:var(--rosso)}
/* race scrubber (wayback seasons only) */
.racepick{margin:22px 0 6px}
.racehead{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:6px}
.racelbl{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.raceval{font-family:'Space Mono',monospace;font-size:12px;font-weight:700;color:var(--rosso);white-space:nowrap}
.legend{display:flex;gap:18px;flex-wrap:wrap;font-family:'Space Mono',monospace;font-size:11px;color:var(--paper)}
.legend .lg{display:flex;align-items:center;gap:8px}
.legend i{width:18px;height:4px;border-radius:2px;display:inline-block}
@media(prefers-reduced-motion:reduce){.chart path.line{animation:none;stroke-dashoffset:0}}
.sectlabel{
font-family:'Space Mono',monospace;font-size:11px;
letter-spacing:.24em;text-transform:uppercase;color:var(--muted);
margin-bottom:26px;
}
.driver{margin-bottom:22px}
.drow{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px;gap:10px}
.dname{font-weight:800;font-size:17px;letter-spacing:-.01em}
.dteam{display:block;font-family:'Space Mono',monospace;font-size:10px;color:var(--muted);margin-top:2px;letter-spacing:.08em}
.dpct{font-family:'Space Mono',monospace;font-weight:700;font-size:17px;white-space:nowrap}
.dpct .dpts{color:var(--muted);font-weight:400;font-size:.76em;margin-right:9px} /* real points beside the title chance (wayback) */
.track{height:13px;background:rgba(255,255,255,.06);border-radius:2px;overflow:hidden}
.bar{height:100%;width:0;border-radius:2px;transition:width 1.1s cubic-bezier(.16,1,.3,1)}
#bars.instant .bar{transition:none} /* wayback scrubbing updates bars instantly */
/* ---------- DRIVER PICKER ---------- */
.picker{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:8px}
.chip{
font-family:'Space Mono',monospace;font-size:12px;font-weight:700;
letter-spacing:.04em;
display:flex;align-items:center;gap:8px;
background:transparent;color:var(--paper);
border:1px solid var(--line);border-radius:999px;
padding:9px 15px;cursor:pointer;width:auto;
text-transform:none;
transition:border-color .15s ease,background .15s ease;
}
.chip:hover{background:rgba(255,255,255,.05)}
.chip .swatch{width:10px;height:10px;border-radius:3px;flex:none}
.chip[aria-pressed="true"]{border-color:var(--paper);background:rgba(255,255,255,.08)}
.chip .num{color:var(--muted);font-size:11px}
.chip .num.live{color:var(--rosso)}
/* season switcher: same chips, a touch more breathing room below */
.picker.seasons{margin-bottom:0}
/* ---------- SIM ---------- */
.sim{padding:40px 0;border-bottom:1px solid var(--line)}
.simhead h2{font-family:'Archivo Black',sans-serif;font-size:clamp(26px,8vw,40px);letter-spacing:-.03em;line-height:1}
.simhead p{color:var(--muted);font-size:14px;max-width:42ch;margin-top:12px}
.tuning{font-family:'Space Mono',monospace;font-size:12px;color:var(--muted);
letter-spacing:.04em;margin:26px 0 0}
.tuning b{color:var(--paper);font-weight:700}
.controls{display:grid;grid-template-columns:1fr;gap:26px;margin:18px 0 28px}
.ctrl label{display:flex;justify-content:space-between;font-size:13px;font-weight:600;margin-bottom:12px;gap:12px}
.ctrl label span{font-family:'Space Mono',monospace;color:var(--rosso);white-space:nowrap}
.ctrl .hint{font-size:11.5px;color:var(--muted);margin-top:9px;font-weight:400;line-height:1.5}
.ctrl.hidden{display:none}
/* Native range input, kept fully stock so touch-drag works on every
browser. We only recolor it via accent-color and give it room to tap. */
input[type=range]{
width:100%;
accent-color:var(--rosso);
height:28px; /* taps/drags land easily on mobile */
cursor:pointer;
}
input[type=range]:focus-visible{outline:2px solid var(--rosso);outline-offset:4px}
.simbtns{display:flex;flex-direction:column;gap:12px}
button{
font-family:'Space Mono',monospace;font-weight:700;font-size:13px;
letter-spacing:.06em;text-transform:uppercase;
background:var(--rosso);color:#fff;border:none;
padding:18px 24px;border-radius:4px;cursor:pointer;width:100%;
transition:transform .15s ease,background .15s ease;
-webkit-tap-highlight-color:transparent;
}
button:hover{background:var(--rosso-deep)}
button:active{transform:scale(.985)}
button:disabled{opacity:.55;cursor:default}
button.ghost{background:transparent;color:var(--paper);border:1px solid var(--line)}
button.ghost:hover{background:rgba(255,255,255,.06)}
.runstate{font-family:'Space Mono',monospace;font-size:12px;color:var(--muted);text-align:center;min-height:1.4em}
/* progress bar for big runs */
.progwrap{height:3px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden;margin-top:4px;opacity:0;transition:opacity .2s}
.progwrap.on{opacity:1}
.progbar{height:100%;width:0;background:var(--rosso);transition:width .12s linear}
/* ---------- METHOD ---------- */
.method{padding:40px 0}
.method h2{font-family:'Archivo Black',sans-serif;font-size:clamp(24px,7vw,36px);letter-spacing:-.03em;margin-bottom:10px}
.method .lead{color:var(--muted);max-width:60ch;margin-bottom:28px;font-size:14.5px}
.vars{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.var{background:var(--ink);padding:22px}
.var .n{font-family:'Space Mono',monospace;font-size:11px;color:var(--rosso);letter-spacing:.1em}
.var h3{font-size:16px;margin:9px 0 7px;letter-spacing:-.01em}
.var p{font-size:13.5px;color:var(--muted);line-height:1.55}
footer{padding:36px 0 calc(48px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
.disclaim{font-size:12.5px;color:var(--muted);line-height:1.6}
.disclaim + .disclaim{margin-top:12px}
.disclaim strong{color:var(--silver);font-weight:600}
/* ===== TABLET / DESKTOP SCALE-UP ===== */
@media(min-width:680px){
:root{--pad:24px}
.wrap{max-width:920px}
.hero{padding:72px 0 48px}
.hero::before{font-size:clamp(180px,42vw,560px);right:-2vw;top:50%}
.eyebrow{font-size:12px;letter-spacing:.32em;gap:12px;margin-bottom:28px}
.bignum{font-size:clamp(120px,22vw,260px)}
.herosub{font-size:15px;margin-top:18px}
.stamp{font-size:11px;margin-top:24px}
.field,.sim,.method{padding:56px 0}
.sectlabel{font-size:12px;letter-spacing:.28em;margin-bottom:32px}
.driver{margin-bottom:26px}
.dname{font-size:20px}
.dteam{display:inline;margin-left:10px;margin-top:0;font-size:11px;letter-spacing:.1em}
.dpct{font-size:18px}
.track{height:14px}
.controls{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:28px;margin:24px 0 32px}
/* span the run controls full width on the grid */
.ctrl.wide{grid-column:1/-1}
.simbtns{flex-direction:row;align-items:center;flex-wrap:wrap;gap:14px}
button{width:auto;padding:15px 30px}
.chip{width:auto}
.runstate{text-align:left}
.vars{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.var{padding:24px}
}
@media(min-width:680px){
.simhead{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:16px}
.simhead p{margin-top:0}
}
@media(prefers-reduced-motion:reduce){
.bar,.progbar{transition:none}
html{scroll-behavior:auto}
}