/* Flat Out F1 — design system (ui-ux-pro-max: Data-Dense Dashboard · Sports Team palette · Barlow + Fira Code) */
:root {
  --bg: #0a0b0e;
  --surface: #111318;
  --surface-2: #171a21;
  --surface-3: #1f232c;
  --border: #262b35;
  --border-strong: #353b48;
  --text: #f4f5f7;
  --text-2: #c3c9d2;
  --muted: #9aa3b0;
  --logo-red: #d61f36;   /* brand crimson #be1b2f, lifted slightly for contrast on near-black */
  --primary: #dc2626;
  --primary-hi: #ef4444;
  --primary-soft: rgba(220, 38, 38, .14);
  --gold: #fbbf24;
  --gold-soft: rgba(251, 191, 36, .12);
  --data: #e8eaed;   /* data highlight is neutral: red stays the only accent */
  --good: #22c55e;
  --bad: #f87171;
  --silver: #cbd5e1;
  --bronze: #d97706;
  --soft: #ef4444; --medium: #facc15; --hard: #f1f5f9;
  --display: "Tektur", "Bahnschrift", system-ui, sans-serif;   /* octagonal motorsport face (closest open match to the reference) */
  --body: "Tektur", "Bahnschrift", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Fira Code", ui-monospace, SFMono-Regular, Consolas, monospace;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --radius: 12px; --radius-sm: 8px; --radius-ctl: 8px;
  --z-header: 40; --z-scrim: 55; --z-drawer: 60; --z-tip: 80;
  --shadow: 0 12px 32px rgba(0, 0, 0, .45);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --t-fast: 150ms; --t-med: 250ms; --t-slow: 400ms;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: dark; }
a, button, [role=button], select { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
table, .mono, .stat .v, .pbar span, .countdown b { font-variant-numeric: tabular-nums; }
.skip { position: absolute; left: 12px; top: -48px; z-index: 100; padding: 10px 14px; border-radius: var(--radius-ctl); background: var(--primary); color: #fff; font-weight: 600; text-decoration: none; transition: top var(--t-fast); }
.skip:focus { top: 12px; }
[id] { scroll-margin-top: 88px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.5 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
button { font: inherit; color: inherit; }
img { display: block; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 6px; }
.bg-glow { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(1100px 560px at 82% -14%, rgba(220, 38, 38, .13), transparent 62%), linear-gradient(180deg, #0e0f12, var(--bg) 520px); }
.bg-glow::before { content: ""; position: absolute; inset: 0; background: url(assets/contours.svg) center / cover no-repeat; opacity: .055; }
.bg-glow::after { content: ""; position: absolute; inset: 0; opacity: .08; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------------------------------------------------------------- header */
.topbar { position: sticky; top: 0; z-index: var(--z-header); display: flex; align-items: center; gap: var(--s5); padding: 0 clamp(16px, 3vw, 40px); height: 64px; background: rgba(10, 11, 14, .88); backdrop-filter: blur(12px) saturate(140%); border-bottom: 1px solid var(--border); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; min-height: 44px; }
.logo { font: 500 23px/1 var(--mono); letter-spacing: -.02em; color: #fff; white-space: nowrap; }
.logo b { color: var(--logo-red); font-weight: 600; }
.tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; flex: 1; align-self: stretch; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { position: relative; display: flex; align-items: center; min-height: 44px; padding: 0 14px; text-decoration: none; font: 600 16px/1 var(--display); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); white-space: nowrap; transition: color var(--t-fast) var(--ease); }
.tabs a:hover, .tabs a.active { color: var(--text); }
.tabs a.active::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--primary); }
.mode-switch { position: relative; display: flex; padding: 3px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border-strong); flex-shrink: 0; }
.mode-switch button { position: relative; z-index: 1; display: flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 16px; background: none; border: 0; border-radius: var(--radius-ctl); cursor: pointer; font: 600 15px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); transition: color var(--t-med) var(--ease); }
.mode-switch button svg { width: 16px; height: 16px; }
.mode-switch button[aria-checked="true"] { color: #fff; }
.mode-thumb { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: var(--radius-ctl); background: var(--primary); transition: transform var(--t-slow) var(--ease), background var(--t-slow); }
body[data-mode="nerd"] .mode-thumb { transform: translateX(100%); background: #f4f5f7; }
body[data-mode="nerd"] .mode-switch button[aria-checked="true"] { color: #0a0b0e; }
body[data-mode="fan"] .nerd-only { display: none !important; }
body[data-mode="nerd"] .fan-only { display: none !important; }

/* ---------------------------------------------------------------- layout */
main { padding: var(--s6) clamp(16px, 3vw, 40px) 64px; max-width: 1440px; margin: 0 auto; }
.view { display: none; }
.view.active { display: block; animation: enter var(--t-slow) var(--ease) both; }
@keyframes enter { from { opacity: 0; transform: translateY(8px); } }
.grid { display: grid; gap: var(--s4); }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-main { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.stack { display: flex; flex-direction: column; gap: var(--s4); }
.mt { margin-top: var(--s4); }
.mt-l { margin-top: var(--s6); }
@media (max-width: 1100px) { .g-main, .g-3 { grid-template-columns: 1fr; } .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .g-2, .g-4 { grid-template-columns: 1fr; } }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s5); }
.section-head h1 { margin: 0; font: 700 clamp(34px, 4.6vw, 56px)/.95 var(--display); text-transform: uppercase; letter-spacing: -.01em; }
.section-head h1 em { font-style: italic; font-weight: 500; color: var(--text-2); }
.section-head p { max-width: 62ch; }
.section-head p { margin: 10px 0 0; color: var(--text-2); }
.eyebrow { font: 600 13px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--primary-hi); }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s5); min-width: 0; position: relative; }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s4); flex-wrap: wrap; }
.panel h2 { margin: 0; font: 600 22px/1.15 var(--display); letter-spacing: .005em; }
.panel h2 small { margin-left: 10px; font: 400 14px/1.3 var(--body); letter-spacing: 0; text-transform: none; color: var(--muted); }
.sub { color: var(--muted); font-size: 14px; margin: 0; }
.kicker { font: 600 13px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* ---------------------------------------------------------------- hero + waving flag */
.hero { position: relative; overflow: hidden; border-radius: 16px; margin-bottom: var(--s5); padding: clamp(24px, 4vw, 44px); border: 1px solid var(--border); background: linear-gradient(180deg, #16191f, #101217); isolation: isolate; }
.flag-wave { position: absolute; right: -2%; top: 50%; width: 58%; aspect-ratio: 3 / 2; transform: translateY(-50%) perspective(900px) rotateY(-16deg); display: flex; z-index: -2; opacity: .5; }
.flag-wave i { flex: 1; height: 100%; background-image: var(--flag); background-size: calc(var(--n) * 100%) 100%; background-position: calc(var(--k) * 100% / (var(--n) - 1)) 0; animation: wave 3.2s ease-in-out infinite; animation-delay: calc(var(--k) * -110ms); filter: brightness(calc(.82 + .18 * var(--shade, 1))); }
@keyframes wave { 0%, 100% { transform: translateY(-3.2%); filter: brightness(.78); } 50% { transform: translateY(3.2%); filter: brightness(1.06); } }
.hero::before { /* fade the flag into the card so text stays readable (≥ 4.5:1) */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, #111318 36%, rgba(17, 19, 24, .78) 58%, rgba(17, 19, 24, .25) 100%), linear-gradient(0deg, rgba(17, 19, 24, .9), transparent 45%);
}
.hero .eyebrow { color: #fca5a5; display: flex; align-items: center; gap: 10px; }
.hero h1 { margin: 12px 0 var(--s4); font: 700 clamp(40px, 6.5vw, 82px)/.92 var(--display); text-transform: uppercase; letter-spacing: -.005em; text-shadow: 0 2px 24px rgba(0, 0, 0, .6); }
.hero-row { display: flex; flex-wrap: wrap; gap: var(--s5); align-items: flex-end; justify-content: space-between; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 12px; border-radius: var(--radius-ctl); background: rgba(0, 0, 0, .45); border: 1px solid var(--border-strong); font: 500 13px/1 var(--mono); color: var(--text-2); white-space: nowrap; }
.chip svg { width: 14px; height: 14px; color: var(--muted); }
.chip.red { background: rgba(127, 29, 29, .55); border-color: rgba(220, 38, 38, .55); color: #fecaca; }
.countdown { display: flex; gap: var(--s3); }
.countdown div { min-width: 58px; padding: 10px 8px; border-radius: var(--radius-sm); background: rgba(0, 0, 0, .5); border: 1px solid var(--border); text-align: center; }
.countdown b { display: block; font: 600 26px/1 var(--mono); }
.countdown span { font: 600 11px/1 var(--display); letter-spacing: .14em; color: var(--muted); }
.hero-note { margin: var(--s4) 0 0; color: var(--text-2); max-width: 700px; }
.flag { display: inline-block; flex-shrink: 0; width: 28px; height: 19px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(255, 255, 255, .15); background: var(--surface-3); }
.flag.sm { width: 22px; height: 15px; border-radius: 2px; }
@media (max-width: 700px) { .flag-wave { width: 110%; right: -30%; opacity: .32; } }

/* ---------------------------------------------------------------- avatars */
.avatar { display: inline-block; vertical-align: middle; position: relative; flex-shrink: 0; overflow: hidden; border-radius: 30%; background: linear-gradient(160deg, color-mix(in srgb, var(--team) 70%, #000), color-mix(in srgb, var(--team) 25%, #0b0c10)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--team) 80%, transparent); }
.avatar img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.avatar .ini { position: absolute; inset: 0; display: grid; place-items: center; font: 700 14px var(--display); color: #fff; }
.drv { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.drv .code { font: 700 17px/1.1 var(--display); letter-spacing: .04em; }
.drv .nm { color: var(--muted); font-size: 13px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------------------------------------------------------------- podium */
.podium { display: grid; grid-template-columns: 1fr 1.1fr 1fr; gap: var(--s4); align-items: end; }
.pod { position: relative; overflow: hidden; border-radius: 14px; cursor: pointer; text-align: left; padding: 0; border: 1px solid color-mix(in srgb, var(--team) 45%, var(--border)); background: linear-gradient(165deg, color-mix(in srgb, var(--team) 38%, #111318) 0%, #111318 62%); transition: border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease); }
.pod:hover { border-color: var(--team); box-shadow: 0 0 0 1px var(--team), var(--shadow); }
.pod .shot { position: relative; height: 176px; }
.pod.p1 .shot { height: 214px; }
.pod .shot img { position: absolute; right: 0; bottom: 0; height: 100%; width: auto; max-width: 70%; object-fit: contain; object-position: bottom right; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .5)); }
.pod .shot .ini { position: absolute; right: 18px; bottom: 12px; font: 700 64px var(--display); color: rgba(255, 255, 255, .18); }
.pod .num { position: absolute; left: 18px; top: 10px; font: 700 76px/1 var(--display); color: rgba(255, 255, 255, .12); }
.pod .shot::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 58%; background: linear-gradient(0deg, rgba(10, 11, 14, .92), rgba(10, 11, 14, 0)); pointer-events: none; }
.pod .who { position: absolute; left: 18px; bottom: 14px; right: 12px; z-index: 1; }
.pod .code { font: 700 38px/1 var(--display); letter-spacing: .03em; text-shadow: 0 2px 10px rgba(0, 0, 0, .5); }
.pod .name { color: var(--text-2); font-size: 14px; }
.pod .body { padding: var(--s4) 18px 18px; border-top: 1px solid rgba(255, 255, 255, .06); background: rgba(0, 0, 0, .28); }
.pod .big { font: 600 40px/1 var(--mono); }
.pod .big small { font-size: 16px; color: var(--muted); margin-left: 2px; }
.pod .lbl { font: 600 13px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
.pod .mini { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: var(--s3); font: 500 13px var(--mono); color: var(--muted); }
.pod .mini b { color: var(--text); font-weight: 600; }
@media (max-width: 700px) { .podium { grid-template-columns: 1fr; } .pod.p1 { order: -1; } .pod .shot, .pod.p1 .shot { height: 150px; } }

/* ---------------------------------------------------------------- stat tiles */
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s4) var(--s5); }
.stat .v { font: 600 34px/1.05 var(--mono); letter-spacing: -.02em; }
.stat .v small { font-size: 15px; color: var(--muted); margin-left: 4px; }
.stat .l { margin-top: 8px; font: 600 14px/1.2 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.stat .d { margin-top: 4px; color: var(--muted); font-size: 14px; }
.stat.good .v { color: var(--good); } .stat.accent .v { color: var(--primary-hi); } .stat.cyan .v { color: var(--data); } .stat.gold .v { color: var(--gold); }

/* ---------------------------------------------------------------- tables */
.table-wrap { overflow-x: auto; margin: 0 calc(-1 * var(--s5)); padding: 0 var(--s5); }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th { text-align: left; padding: 0 10px 10px; font: 600 12px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
th.sortable { cursor: pointer; } th.sortable:hover, th.sorted { color: var(--text); }
th.num, td.num { text-align: right; }
td { padding: 8px 10px; border-top: 1px solid var(--border); white-space: nowrap; vertical-align: middle; }
tbody tr { transition: background var(--t-fast); }
tbody tr.click { cursor: pointer; }
tbody tr:hover { background: rgba(255, 255, 255, .03); }
.mono { font-family: var(--mono); font-size: 14px; }
.muted { color: var(--muted); }
.pos { font: 700 18px var(--display); color: var(--muted); display: inline-block; min-width: 24px; }
.pbar { position: relative; height: 24px; min-width: 64px; border-radius: 6px; background: var(--surface-3); overflow: hidden; }
.pbar > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; background: var(--c, var(--primary)); opacity: .85; transform-origin: left; animation: grow .7s var(--ease) both; }
.pbar > span { position: relative; z-index: 1; font: 500 13px/24px var(--mono); padding: 0 8px; text-shadow: 0 1px 2px rgba(0, 0, 0, .7); }
@keyframes grow { from { transform: scaleX(0); } }
.tyres { display: inline-flex; align-items: center; gap: 3px; }
.tyre { width: 20px; height: 20px; border-radius: 50%; border: 3.5px solid var(--tc); background: #0b0c10; display: inline-grid; place-items: center; font: 700 9px/1 var(--display); color: var(--tc); }
.tyre.S { --tc: var(--soft); } .tyre.M { --tc: var(--medium); } .tyre.H { --tc: var(--hard); }
.tyres .arrow { color: var(--muted); font-size: 11px; }
.strat-txt { font: 500 13px var(--mono); color: var(--muted); margin-left: 8px; }
.range { position: relative; width: 104px; height: 18px; }
.range .track { position: absolute; left: 0; right: 0; top: 8px; height: 2px; background: var(--border-strong); }
.range .span { position: absolute; top: 5px; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--team) 60%, transparent); }
.range .med { position: absolute; top: 2px; width: 3px; height: 14px; border-radius: 2px; background: #fff; }
.range .mean { position: absolute; top: 5px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; border: 2px solid var(--data); background: var(--bg); }
.stackbar { display: flex; width: 110px; height: 10px; border-radius: 5px; overflow: hidden; background: var(--surface-3); }
.stackbar i { display: block; height: 100%; }
.heat { display: grid; gap: 2px; font: 500 12px var(--mono); }
.heat .hc { height: 24px; border-radius: 3px; display: grid; place-items: center; color: #fff; }
.heat .hl { display: flex; align-items: center; gap: 8px; padding-right: 8px; white-space: nowrap; font: 700 14px var(--display); }
.heat .hh { color: var(--muted); text-align: center; font-size: 11px; }

/* controls */
.seg { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border-strong); flex-wrap: wrap; }
.seg button { min-height: 38px; padding: 0 14px; border: 0; border-radius: var(--radius-ctl); background: none; cursor: pointer; font: 600 15px var(--display); letter-spacing: .03em; color: var(--muted); transition: background-color var(--t-fast), color var(--t-fast), transform var(--t-fast); }
.seg button:hover { color: var(--text); }
.seg button.on { background: var(--surface-3); color: var(--text); box-shadow: inset 0 0 0 1px var(--border-strong); }
select { min-height: 40px; padding: 0 12px; border-radius: var(--radius-ctl); background-color: var(--surface-2); color: var(--text); border: 1px solid var(--border-strong); font: 500 14px var(--mono); }
.pill-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 10px; border-radius: var(--radius-ctl); border: 1px solid var(--border-strong); background: var(--surface-2); cursor: pointer; font: 600 15px var(--display); letter-spacing: .02em; color: var(--muted); transition: color var(--t-fast), border-color var(--t-fast), background-color var(--t-fast), transform var(--t-fast); }
.pill-toggle[aria-pressed="true"] { color: var(--text); border-color: var(--team); background: color-mix(in srgb, var(--team) 18%, var(--surface-2)); }
.pill-toggle i { width: 14px; height: 14px; border-radius: 4px; background: var(--team); }

/* charts */
svg.chart { width: 100%; height: auto; display: block; overflow: visible; }
svg.chart text { fill: var(--muted); font: 12px var(--mono); }
svg.chart .axis { stroke: var(--border-strong); }
svg.chart .gridl { stroke: var(--border); }
.legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: var(--s3); font: 500 13px var(--mono); color: var(--muted); align-items: center; }
.legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.legend i.hollow { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--text-2); background: none; }
.legend i.filled { width: 12px; height: 12px; border-radius: 50%; background: var(--text-2); }

/* strategy lanes */
.lanes { display: grid; gap: 4px; }
.lane { display: grid; grid-template-columns: 150px minmax(0, 1fr) 110px; gap: var(--s3); align-items: center; min-height: 44px; border-radius: 8px; padding: 0 6px; cursor: pointer; transition: background var(--t-fast); }
.lane:hover { background: rgba(255, 255, 255, .03); }
.lane-track { position: relative; height: 20px; border-radius: 5px; background: var(--surface-3); overflow: hidden; }
.lane-stint { position: absolute; top: 3px; bottom: 3px; border-radius: 4px; }
.lane-stint.S { background: var(--soft); } .lane-stint.M { background: var(--medium); } .lane-stint.H { background: var(--hard); }
.lane-win { position: absolute; top: 0; bottom: 0; background: rgba(56, 189, 248, .22); border-left: 2px solid var(--data); border-right: 2px solid var(--data); }
.lane-axis { display: grid; grid-template-columns: 150px minmax(0, 1fr) 110px; gap: var(--s3); padding: 0 6px; font: 500 12px var(--mono); color: var(--muted); }
.lane-axis div:nth-child(2) { display: flex; justify-content: space-between; }

/* standings strips */
.strip { display: flex; gap: 3px; }
.strip i { width: 22px; height: 22px; border-radius: 4px; display: grid; place-items: center; font: 600 11px/1 var(--mono); font-style: normal; background: var(--surface-3); color: var(--text-2); }
.strip i.p1 { background: var(--gold); color: #1c1400; } .strip i.p2 { background: var(--silver); color: #0f172a; } .strip i.p3 { background: var(--bronze); color: #1c0f00; }
.strip i.pts { background: rgba(34, 197, 94, .18); color: #86efac; } .strip i.dnf { background: rgba(248, 113, 113, .16); color: var(--bad); }

/* awards */
.award { display: flex; gap: var(--s4); align-items: center; }
.award .ico { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary-hi); flex-shrink: 0; }
.award .ico svg { width: 22px; height: 22px; }
.award .who { font: 700 26px/1 var(--display); letter-spacing: .03em; }
.award .what { font: 600 13px/1.2 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.award .val { font: 500 13px var(--mono); color: var(--data); margin-top: 4px; }
.clickable { cursor: pointer; transition: border-color var(--t-fast); }
.clickable:hover { border-color: var(--border-strong); }

/* team cards */
.teamcard { display: grid; grid-template-columns: 44px 1fr auto; gap: var(--s3) var(--s4); align-items: center; padding: var(--s4) var(--s5); border-radius: var(--radius); border: 1px solid var(--border); background: linear-gradient(100deg, color-mix(in srgb, var(--team) 20%, var(--surface)) 0%, var(--surface) 55%); }
.teamcard .rank { font: 700 30px/1 var(--display); color: var(--muted); text-align: center; }
.teamcard .tname { font: 700 22px/1.1 var(--display); letter-spacing: .03em; text-transform: uppercase; }
.teamcard .tdrivers { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; align-items: center; color: var(--muted); font-size: 13px; }
.teamcard .tdrivers [role=button] { min-height: 44px; padding: 0 6px 0 0; border-radius: 22px; }
.teamcard .tdrivers [role=button]:hover { color: var(--text); }
.teamcard .score { text-align: right; }
.teamcard .score b { display: block; font: 600 30px/1 var(--mono); }
.teamcard .score span { font: 600 12px var(--display); letter-spacing: .12em; color: var(--muted); text-transform: uppercase; }
.axisbars { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; grid-column: 1 / -1; }
.axisbars div { font: 600 11px/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.axisbars .b { height: 6px; margin-top: 5px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.axisbars .b i { display: block; height: 100%; background: var(--team); }
@media (max-width: 700px) { .axisbars { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* driver vs car */
.dvc-row { display: grid; grid-template-columns: 180px 1fr 80px; gap: var(--s3); align-items: center; min-height: 44px; padding: 0 6px; border-radius: 8px; cursor: pointer; }
.dvc-row:hover { background: rgba(255, 255, 255, .03); }
.dvc-val { font: 600 15px var(--mono); text-align: right; }
.dvc-val.up { color: var(--good); } .dvc-val.down { color: var(--bad); }
@media (max-width: 700px) { .dvc-row { grid-template-columns: 110px 1fr 60px; } .lane, .lane-axis { grid-template-columns: 96px minmax(0, 1fr); } .lane > :last-child, .lane-axis > :last-child { display: none; } }

/* calls, explainers */
.calls { display: grid; gap: var(--s2); }
.call { display: grid; grid-template-columns: 26px 26px 1fr auto; gap: var(--s3); align-items: center; min-height: 52px; padding: 8px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); cursor: pointer; transition: border-color var(--t-fast); }
.call:hover { border-color: var(--border-strong); }
.call .ok { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; }
.call .ok svg { width: 14px; height: 14px; }
.call .ok.y { background: rgba(34, 197, 94, .16); color: var(--good); } .call .ok.n { background: rgba(248, 113, 113, .14); color: var(--bad); }
.call .t { font: 700 16px var(--display); letter-spacing: .03em; }
.call .s { color: var(--muted); font-size: 13px; }
.explain { color: var(--text-2); font-size: 15px; line-height: 1.6; margin: 0; }
.explain b { color: var(--text); }
.note { padding: var(--s3) var(--s4); border-left: 3px solid var(--gold); background: var(--gold-soft); border-radius: 0 8px 8px 0; color: var(--text-2); font-size: 14px; }
.glossary { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s3); }
.glossary div { padding: var(--s3) var(--s4); border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.glossary b { display: block; font: 600 14px var(--mono); color: var(--data); margin-bottom: 4px; }
.glossary span { color: var(--text-2); font-size: 14px; }
.flow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.flow .step { padding: 10px 14px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--surface-2); font: 500 13px var(--mono); }
.flow .step b { display: block; color: var(--data); font: 600 12px var(--display); letter-spacing: .12em; margin-bottom: 2px; }
.flow .arr { color: var(--muted); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; }
.kv dt { color: var(--muted); font: 13px var(--mono); }
.kv dd { margin: 0; font: 13px var(--mono); text-align: right; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font: 600 12px/1.6 var(--mono); }
.badge.good { background: rgba(34, 197, 94, .15); color: var(--good); } .badge.bad { background: rgba(248, 113, 113, .14); color: var(--bad); } .badge.neutral { background: var(--surface-3); color: var(--text-2); }
td.best { color: var(--good); font-weight: 600; }

/* drawer */
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100vw); z-index: var(--z-drawer); overflow-y: auto; overscroll-behavior: contain; background: var(--surface); border-left: 1px solid var(--border-strong); box-shadow: var(--shadow); transform: translateX(105%); transition: transform var(--t-slow) var(--ease); }
.drawer.open { transform: none; }
.drawer-close { position: absolute; top: 12px; right: 12px; z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border-strong); background: rgba(0, 0, 0, .55); cursor: pointer; display: grid; place-items: center; }
.drawer-close svg { width: 18px; height: 18px; }
.drawer-body { padding: 0 var(--s5) var(--s7); }
.scrim { position: fixed; inset: 0; z-index: var(--z-scrim); background: rgba(0, 0, 0, .62); opacity: 0; pointer-events: none; transition: opacity var(--t-med); }
.scrim.open { opacity: 1; pointer-events: auto; }
.dhead { position: relative; height: 230px; margin: 0 calc(-1 * var(--s5)) var(--s5); overflow: hidden; background: linear-gradient(160deg, color-mix(in srgb, var(--team) 55%, #0b0c10), #111318 75%); }
.dhead > img { position: absolute; right: 12px; bottom: 0; height: 96%; width: auto; object-fit: contain; filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .55)); }
.dhead .info { position: absolute; left: var(--s5); bottom: var(--s5); }
.dhead .num { position: absolute; left: var(--s5); top: 10px; font: 700 88px/1 var(--display); color: rgba(255, 255, 255, .12); }
.dhead .code { font: 700 52px/1 var(--display); letter-spacing: .03em; }
.dhead .name { font: 600 20px var(--display); }
.dhead .team { color: var(--text-2); font-size: 14px; }
.dstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); }
.dstats div { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px; }
.dstats b { display: block; font: 600 20px var(--mono); }
.dstats span { font: 600 12px var(--display); letter-spacing: .1em; color: var(--muted); text-transform: uppercase; }
.dsec { margin-top: var(--s5); }
.dsec h4 { margin: 0 0 10px; font: 700 15px var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
.rrow { display: grid; grid-template-columns: 110px 1fr 64px; gap: 10px; align-items: center; margin: 8px 0; font-size: 14px; }
.rbar { position: relative; height: 8px; border-radius: 4px; background: var(--surface-3); }
.rbar .mid { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--border-strong); }
.rbar i { position: absolute; top: 0; bottom: 0; border-radius: 4px; }

.tip { position: fixed; z-index: var(--z-tip); pointer-events: none; opacity: 0; transition: opacity var(--t-fast); max-width: 300px; padding: 8px 10px; border-radius: 8px; background: #05060a; border: 1px solid var(--border-strong); font: 13px/1.45 var(--mono); color: var(--text); box-shadow: var(--shadow); }
.tip.on { opacity: 1; }
.loading { display: grid; place-items: center; gap: var(--s4); min-height: 50vh; color: var(--muted); font: 500 15px var(--mono); }
.lights { display: flex; gap: 10px; }
.lights i { width: 26px; height: 26px; border-radius: 50%; background: #2a0b0b; animation: light 2.5s infinite; }
.lights i:nth-child(2) { animation-delay: .3s; } .lights i:nth-child(3) { animation-delay: .6s; } .lights i:nth-child(4) { animation-delay: .9s; } .lights i:nth-child(5) { animation-delay: 1.2s; }
@keyframes light { 15%, 80% { background: var(--primary); } }
.footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: var(--s5) clamp(16px, 3vw, 40px); border-top: 1px solid var(--border); color: var(--muted); font: 13px var(--mono); }
.footer code { color: var(--text-2); }
.empty { padding: var(--s6); text-align: center; color: var(--muted); }
#race-explorer .rx { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); align-items: start; }

@media (max-width: 900px) {
  .topbar { flex-wrap: wrap; height: auto; padding-top: 8px; gap: 8px var(--s4); }
  .tabs { order: 3; flex-basis: 100%; }
  .dstats { grid-template-columns: repeat(2, 1fr); }
  #race-explorer .rx { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* team logos (official white marks) */
.tlogo { display: inline-block; width: auto; object-fit: contain; vertical-align: middle; flex-shrink: 0; }
.teamcard .tname { display: flex; align-items: center; gap: 10px; }
.pill-toggle .tlogo { max-width: 26px; }
.dhead .info .tlogo { margin-bottom: 8px; display: block; }


/* ================================================================ v2 layer: states, motion, recomposition */
/* tactile press + hover lift on everything clickable */
button, [role=button], .pod, .rowbtn { transition: transform var(--t-fast) var(--ease), background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast); }
button:active, [role=button]:active, .rowbtn:active, .pod:active { transform: scale(.985); }
.panel.clickable:hover, .rowbtn:hover { background-color: rgba(255, 255, 255, .025); }
.rowbtn { display: grid; width: 100%; background: none; border: 0; padding: 0 6px; margin: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; border-radius: var(--radius-ctl); }
button.panel { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }

/* staggered entry for lists (transform/opacity only) */
.stagger > * { animation: rowin .55s var(--ease) both; animation-delay: calc(min(var(--i, 0), 24) * 28ms); }
@keyframes rowin { from { opacity: 0; transform: translateY(10px); } }

/* ---- hero recomposition: copy left, favourite portrait right, floating next-race card */
.hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s5); align-items: end; min-height: min(560px, 72vh); padding-bottom: 0; }
.hero-copy { position: relative; z-index: 2; padding-bottom: clamp(24px, 4vw, 44px); align-self: center; }
.hero h1 { font-size: clamp(46px, 7.2vw, 104px); line-height: .88; margin: 14px 0 var(--s5); }
.hero h1 em { display: block; font-style: italic; font-weight: 500; color: var(--text-2); }
.hero-portrait { position: relative; align-self: end; height: 100%; min-height: 380px; display: flex; justify-content: center; }
.hero-portrait img { position: absolute; bottom: 0; height: 100%; max-height: 520px; width: auto; object-fit: contain; object-position: bottom; filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .55)); }
.hero-portrait .tag { position: absolute; left: 0; bottom: 28px; z-index: 2; padding: 10px 14px; border-radius: var(--radius-sm); background: rgba(10, 11, 14, .78); backdrop-filter: blur(8px); border: 1px solid var(--border-strong); }
.hero-portrait .tag b { display: block; font: 600 30px/1 var(--mono); color: #fff; }
.hero-portrait .tag span { font: 600 12px/1.3 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.flag-wave { z-index: 0; }
.hero::before { z-index: 1; }
.trackcard { position: absolute; right: 18px; top: 18px; z-index: 3; width: 220px; padding: 12px 14px 14px; border-radius: var(--radius); background: rgba(10, 11, 14, .72); backdrop-filter: blur(10px); border: 1px solid var(--border-strong); }
.trackcard .k { font: 600 11px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.trackcard .n { font: 600 17px/1.2 var(--display); margin: 4px 0 8px; }
.trackcard svg { width: 100%; height: auto; overflow: visible; }
.trackcard .line { fill: none; stroke: #fff; stroke-width: 12; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 2.4s var(--ease) .3s forwards; }
.trackcard .line-bg { fill: none; stroke: rgba(255, 255, 255, .12); stroke-width: 26; stroke-linejoin: round; }
.trackcard .corner { fill: var(--muted); font: 600 26px var(--mono); }
.trackcard .meta { display: flex; justify-content: space-between; margin-top: 8px; font: 500 12px var(--mono); color: var(--text-2); }
@keyframes draw { to { stroke-dashoffset: 0; } }
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero-portrait { min-height: 300px; order: 2; }
  .hero-portrait img { max-height: 320px; }
  .trackcard { position: relative; right: auto; top: auto; width: 100%; max-width: 320px; margin-top: var(--s4); }
}

/* ---- kinetic marquee (real data, pauses on hover, static under reduced motion) */
.marquee { position: relative; overflow: hidden; margin: 0 calc(-1 * clamp(16px, 3vw, 40px)) var(--s5); padding: 6px 0; border-block: 1px solid var(--border); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee-track { display: flex; width: max-content; gap: 56px; animation: marquee 48s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee span { display: inline-flex; align-items: baseline; gap: 16px; font: 700 clamp(40px, 6vw, 84px)/1.05 var(--display); text-transform: uppercase; white-space: nowrap; letter-spacing: -.01em; }
.marquee span i { font-style: italic; font-weight: 500; color: transparent; -webkit-text-stroke: 1.2px rgba(255, 255, 255, .55); }
.marquee span b { font: 500 .55em/1 var(--mono); color: var(--primary-hi); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---- asymmetric award layout: one feature + compact list */
.awards { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s4); }
.award-feature { position: relative; overflow: hidden; min-height: 300px; display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(160deg, color-mix(in srgb, var(--team) 34%, var(--surface)) 0%, var(--surface) 70%); }
.award-feature img { position: absolute; right: 0; bottom: 0; height: 100%; width: auto; max-width: 60%; object-fit: contain; object-position: bottom right; }
.award-feature .copy { position: relative; z-index: 1; max-width: 58%; }
.award-feature .who { font: 700 44px/.95 var(--display); text-transform: uppercase; margin: 8px 0; }
.award-list { display: grid; gap: 2px; align-content: start; }
.award-list .rowbtn { grid-template-columns: 44px 1fr auto; gap: var(--s3); align-items: center; min-height: 60px; padding: 8px 12px; border-bottom: 1px solid var(--border); border-radius: 0; }
.award-list .rowbtn:last-child { border-bottom: 0; }
.award-list .t { font: 600 13px/1.2 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.award-list .n { font: 600 19px/1.2 var(--display); }
.award-list .v { font: 500 14px var(--mono); color: var(--text-2); text-align: right; }
@media (max-width: 900px) { .awards { grid-template-columns: 1fr; } .award-feature .copy { max-width: 62%; } }
.hl { color: var(--primary-hi); }

.chipbtn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px 0 4px; border: 0; border-radius: var(--radius-ctl); background: none; color: var(--text-2); font: 500 14px var(--body); cursor: pointer; }
.chipbtn:hover { background-color: rgba(255, 255, 255, .05); color: var(--text); }
button.call { width: 100%; text-align: left; font: inherit; color: inherit; }
.hero-portrait .tag { cursor: pointer; text-align: left; color: inherit; font: inherit; }
.hero-portrait .tag:hover { border-color: var(--primary); }

/* flag fades in from the copy side instead of showing hard slices */
.flag-wave { -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%, #000 80%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 45%, #000 80%, transparent 100%); }
/* side panels follow the long lists */
.sticky-side { position: sticky; top: 88px; align-self: start; }
@media (max-width: 1100px) { .sticky-side { position: static; } }
.hero-portrait { z-index: 2; }
.trackcard { z-index: 3; }

/* ================================================================ v3 layer: engineer console, gallery, reveals */
/* ---- race-engineer console (a physical instrument you can play) */
.console { position: relative; margin: 0 0 var(--s6); padding: 18px; border-radius: 22px; background: linear-gradient(180deg, #212329, #16181c); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -2px 0 rgba(0, 0, 0, .5), 0 30px 60px -20px rgba(0, 0, 0, .7), 0 0 0 1px #0b0c0f; }
.console-grid { display: grid; grid-template-columns: 184px minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 8px; }
.c-cell { position: relative; border-radius: 12px; background: linear-gradient(180deg, #1c1e23, #17191d); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), inset 0 0 0 1px rgba(0, 0, 0, .55); padding: 12px; }
.c-lcd { position: relative; overflow: hidden; background: #070806; min-height: 150px; padding: 14px 16px; font: 500 14px/1.55 var(--mono); color: #e9efe0; text-shadow: 0 0 6px rgba(233, 239, 224, .25); }
.c-lcd::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px); }
.c-lcd .ln { white-space: pre-wrap; min-height: 1.55em; }
.c-lcd .ln.dim { color: #8e958a; }
.c-lcd .ln .red { color: #ff6b6b; }
.c-lcd .cursor { display: inline-block; width: .6em; height: 1.1em; vertical-align: -2px; background: #e9efe0; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.c-dials { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0; background: none; box-shadow: none; }
.dial { display: grid; justify-items: center; gap: 8px; padding: 14px 8px 12px; border-radius: 12px; background: linear-gradient(180deg, #1c1e23, #17191d); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), inset 0 0 0 1px rgba(0, 0, 0, .55); }
.knob { position: relative; width: 74px; height: 74px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #4a4e57, #26282e 58%, #17181c); box-shadow: 0 6px 12px rgba(0, 0, 0, .6), inset 0 1px 1px rgba(255, 255, 255, .18), 0 0 0 5px #121317, 0 0 0 6px #2a2d33; }
.knob::after { content: ""; position: absolute; left: 50%; top: 7px; width: 4px; height: 16px; margin-left: -2px; border-radius: 2px; background: var(--knob, var(--primary)); box-shadow: 0 0 6px var(--knob, transparent); transform-origin: 50% 30px; transform: rotate(var(--a, 0deg)); transition: transform 1.2s var(--ease); }
.dial b { font: 600 20px/1 var(--mono); }
.dial span { font: 600 11px/1.2 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); text-align: center; }
.c-keys { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 6px; padding: 8px; }
.key { position: relative; display: grid; place-items: center; gap: 4px; min-height: 64px; padding: 8px 4px 6px; border: 0; border-radius: 10px; cursor: pointer; color: #e7e9ec; font: 700 15px/1 var(--display); letter-spacing: .04em;
  background: linear-gradient(180deg, #34373e, #25272c); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 3px 0 #0c0d10, 0 6px 10px rgba(0, 0, 0, .45); transition: transform 90ms var(--ease), box-shadow 90ms var(--ease), background-color var(--t-fast); }
.key i { width: 8px; height: 8px; border-radius: 50%; background: #0b0c0e; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .8); transition: background-color var(--t-fast), box-shadow var(--t-fast); }
.key small { font: 500 10px/1 var(--mono); color: #9aa1ab; letter-spacing: 0; }
.key:hover { background: linear-gradient(180deg, #3a3d45, #292b31); }
.key:active, .key[aria-pressed="true"] { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 #0c0d10, 0 2px 4px rgba(0, 0, 0, .5); }
.key[aria-pressed="true"] i { background: var(--team); box-shadow: 0 0 10px var(--team), 0 0 2px var(--team); }
.c-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 8px 0; font: 500 12px var(--mono); color: #8e958f; }
.c-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; cursor: pointer; color: #dfe3e8; font: 700 12px var(--display); letter-spacing: .12em; text-transform: uppercase; background: linear-gradient(180deg, #34373e, #25272c); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 2px 0 #0c0d10; }
.c-btn .led { width: 7px; height: 7px; border-radius: 50%; background: #3a3d44; }
.c-btn[aria-pressed="true"] .led { background: var(--primary); box-shadow: 0 0 8px var(--primary); }
.c-brand { font: 600 12px var(--mono); color: #aab0b8; }
.c-brand b { color: var(--primary-hi); }
@media (max-width: 1000px) { .console-grid { grid-template-columns: 1fr; } .c-cam { min-height: 200px; } .c-keys { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 480px) { .c-keys { grid-template-columns: repeat(4, minmax(0, 1fr)); } .knob { width: 60px; height: 60px; } }

/* ---- pointer spotlight on panels (hover-capable devices only) */
@media (hover: hover) {
  .panel { background-image: radial-gradient(520px circle at var(--mx, -999px) var(--my, -999px), rgba(255, 255, 255, .045), transparent 42%); }
}

/* ---- scroll reveal (only when JS marks the page ready; content never hides without it) */
.js-reveal .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js-reveal .reveal.in { opacity: 1; transform: none; }

/* ---- gallery view for rankings (list / cards toggle) */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; }
.gcard { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 236px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; text-align: left; color: inherit; font: inherit;
  background: linear-gradient(170deg, color-mix(in srgb, var(--team) 40%, var(--surface)) 0%, var(--surface) 72%); }
.gcard img { position: absolute; inset: 0 0 auto auto; width: 100%; height: 78%; object-fit: cover; object-position: top center; transition: transform .6s var(--ease); }
.gcard:hover img { transform: scale(1.04); }
.gcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10, 11, 14, .95) 12%, transparent 58%); }
.gcard > span { position: relative; z-index: 1; display: block; }
.gcard .rk { position: absolute; top: 10px; left: 12px; z-index: 1; font: 700 34px/1 var(--display); color: rgba(255, 255, 255, .85); text-shadow: 0 2px 10px rgba(0, 0, 0, .5); }
.gcard .nm2 { font: 700 20px/1 var(--display); text-transform: uppercase; }
.gcard .sc { font: 500 13px var(--mono); color: var(--text-2); margin-top: 4px; }

/* ---- view transitions between tabs */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .32s; animation-timing-function: var(--ease); }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } .js-reveal .reveal { opacity: 1; transform: none; } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
/* 22 drivers: top-2 cards span two columns -> 24 cells, which fills 8 / 6 / 4 / 2 columns exactly */
.gallery { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.gallery > .gcard:nth-child(-n + 2) { grid-column: span 2; }
.gallery > .gcard:nth-child(-n + 2) img { object-position: 50% 12%; }
.gallery > .gcard:nth-child(-n + 2) .nm2 { font-size: 28px; }
@media (max-width: 1200px) { .gallery { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 900px) { .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 560px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gcard { min-height: 210px; } }
.gcard .sc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* circuit card lives in the copy column beside the countdown, never over the portrait */
.hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s4); }
.trackcard { position: relative; right: auto; top: auto; width: auto; display: grid; grid-template-columns: 132px auto; align-items: center; gap: 14px; padding: 10px 16px 10px 12px; }
.trackcard .map svg { width: 132px; height: auto; display: block; }
.trackcard .n { margin: 3px 0 6px; }
.trackcard .meta { display: grid; gap: 2px; margin: 0; }
@media (max-width: 900px) { .trackcard { width: auto; max-width: none; margin-top: 0; } }
@media (max-width: 480px) { .hero-meta { flex-direction: column; } .trackcard { grid-template-columns: 110px auto; } .trackcard .map svg { width: 110px; } }


/* ================================================================ Tektur type system */
body { font-size: 15px; line-height: 1.6; font-stretch: 100%; letter-spacing: .005em; }
h1, h2, .tabs a, .brand, .kicker, .eyebrow { font-stretch: 100%; }
.hero h1 { font-size: clamp(40px, 6vw, 88px); line-height: .95; letter-spacing: -.01em; font-weight: 800; }
.hero h1 em, .section-head h1 em { font-style: normal; font-weight: 400; font-stretch: 75%; color: var(--text-2); }
.section-head h1 { font-size: clamp(30px, 4vw, 50px); font-weight: 800; line-height: 1; }
.panel h2 { font-size: 19px; font-weight: 700; letter-spacing: 0; }
.tabs a { font-size: 14px; letter-spacing: .06em; font-weight: 600; }
.pod .code, .award-feature .who, .gcard .nm2, .dhead .code { font-weight: 800; letter-spacing: 0; }
.marquee span { font-size: clamp(34px, 5vw, 72px); font-weight: 800; }
.marquee span i { font-style: normal; font-weight: 400; font-stretch: 75%; }
.drv .code { font-weight: 700; font-size: 15px; letter-spacing: .02em; }
.explain, .hero-note, .section-head p { font-size: 15px; }

/* ================================================================ motion support (GSAP layer) */
.gsap-on .pbar > i, .gsap-on .stagger > *, .gsap-on .view.active { animation: none; }
.gsap-on .marquee-track { animation: none; }
.scroll-progress { position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: calc(var(--z-header) + 1); background: var(--primary); transform: scaleX(0); transform-origin: left center; pointer-events: none; }
.countdown b.flip { animation: flip .45s var(--ease); }
@keyframes flip { from { transform: translateY(-45%) rotateX(70deg); opacity: 0; } }
.key.chase i { background: var(--team); box-shadow: 0 0 10px var(--team); }
.console, .pod, .gcard { will-change: transform; }
.lights-intro { position: fixed; inset: 0; z-index: 200; display: grid; place-content: center; justify-items: center; gap: 28px; background: #07080a; cursor: pointer; }
.lights-intro .gantry { display: flex; gap: 14px; padding: 16px 18px; border-radius: 14px; background: linear-gradient(180deg, #1d1f24, #121317); box-shadow: 0 20px 50px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .06); }
.lights-intro span { display: grid; gap: 10px; padding: 10px; border-radius: 10px; background: #0b0c0e; }
.lights-intro i { width: clamp(28px, 5vw, 46px); aspect-ratio: 1; border-radius: 50%; background: #2a0c0c; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .7); transition: background-color 60ms, box-shadow 60ms; }
.lights-intro span.on i { background: #ff2222; box-shadow: 0 0 22px #ff2222, 0 0 60px rgba(255, 34, 34, .45), inset 0 -3px 6px rgba(0, 0, 0, .3); }
.lights-intro p { margin: 0; font: 700 clamp(16px, 2.2vw, 24px) var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.split-mask { overflow: hidden; }

.gsap-on .knob::after { transition: none; }


/* ================================================================ split-flap (Solari) countdown */
.flipclock { display: flex; align-items: flex-start; gap: 6px; padding: 10px 12px 8px; border-radius: 12px; background: #16171a; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), inset 0 0 0 1px #0a0b0d, 0 10px 24px rgba(0, 0, 0, .45); }
.flipclock .fc-group { display: grid; justify-items: center; gap: 6px; }
.flipclock .fc-digits { display: flex; gap: 3px; }
.flipclock .fc-label { font: 600 10px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: #8d9199; }
.flipclock .fc-colon { display: grid; gap: 12px; align-content: center; height: 58px; padding: 0 1px; }
.flipclock .fc-colon i { width: 5px; height: 5px; border-radius: 1px; background: #cfd2d6; }
.flap { --fh: 58px; position: relative; display: block; width: 40px; height: var(--fh); perspective: 260px; font: 700 42px/var(--fh) var(--display); color: #f2f3f5; text-align: center; font-variant-numeric: tabular-nums; }
.flap > span { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; background: linear-gradient(180deg, #34363c, #2a2c31); backface-visibility: hidden; }
.flap > span > span { display: block; height: var(--fh); }
.flap .fl-top, .flap .fl-leaf-top { top: 0; border-radius: 6px 6px 0 0; }
.flap .fl-bottom, .flap .fl-leaf-bottom { bottom: 0; border-radius: 0 0 6px 6px; background: linear-gradient(180deg, #26282d, #202227); }
.flap .fl-bottom > span, .flap .fl-leaf-bottom > span { transform: translateY(-50%); }
/* the hinge: dark split line with side pins */
.flap::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 1px); height: 2px; background: #0b0c0e; z-index: 4; box-shadow: 0 1px 0 rgba(255, 255, 255, .04); }
.flap::before { content: ""; position: absolute; left: -2px; right: -2px; top: calc(50% - 3px); height: 6px; z-index: 5; background: radial-gradient(circle at 2px 3px, #4a4d54 2px, transparent 2.5px), radial-gradient(circle at calc(100% - 2px) 3px, #4a4d54 2px, transparent 2.5px); }
.flap .fl-leaf { z-index: 3; visibility: hidden; }
.flap .fl-leaf-top { transform-origin: 50% 100%; }
.flap .fl-leaf-bottom { transform-origin: 50% 0%; transform: rotateX(90deg); }
.flap.flipping .fl-leaf { visibility: visible; }
.flap.flipping .fl-leaf-top { animation: flap-down .3s cubic-bezier(.55, .05, .9, .45) forwards; }
.flap.flipping .fl-leaf-bottom { animation: flap-up .3s cubic-bezier(.1, .6, .3, 1) .3s forwards; }
.flap.flipping .fl-leaf-top::after, .flap.flipping .fl-bottom::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .45)); animation: flap-shade .6s forwards; }
@keyframes flap-down { to { transform: rotateX(-90deg); } }
@keyframes flap-up { from { transform: rotateX(90deg); } to { transform: rotateX(0deg); } }
@keyframes flap-shade { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }
.fc-go { font: 700 28px var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--primary-hi); padding: 8px 10px; }
@media (max-width: 480px) { .flap { --fh: 46px; width: 31px; font-size: 32px; } .flipclock .fc-colon { height: 46px; gap: 9px; } .flipclock { gap: 4px; padding: 8px; } }


/* ================================================================ console driver cam (replaces the speaker grille) */
.c-cam { --team: #e10600; overflow: hidden; padding: 0; min-height: 150px; background: radial-gradient(120% 90% at 50% 100%, color-mix(in srgb, var(--team) 55%, #050608), #07080a 70%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .7), inset 0 0 28px rgba(0, 0, 0, .85), 0 0 0 3px #101115, 0 0 18px -6px var(--team); transition: box-shadow .5s, background-color .5s; }
.c-cam > * { position: absolute; }
.cam-feed { inset: 0; display: grid; place-items: end center; z-index: 1; }
.cam-feed img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; filter: contrast(1.12) saturate(1.05); animation: cam-in .5s var(--ease) both; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
.cam-feed .ini { place-self: center; font: 800 34px var(--display); color: #fff; opacity: .8; }
.cam-num { right: 8px; top: 7px; z-index: 5; min-width: 30px; padding: 3px 6px 2px; border-radius: 4px; background: var(--team); color: #fff; font: 800 13px/1 var(--display); letter-spacing: .02em; text-align: center; font-variant-numeric: tabular-nums; box-shadow: 0 2px 8px rgba(0, 0, 0, .5); text-shadow: 0 1px 1px rgba(0, 0, 0, .35); }
.c-cam.idle .cam-num, .cam-num:empty { display: none; }
.cam-scan { inset: 0; z-index: 3; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .28) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .65)); }
.cam-scan::after { content: ""; position: absolute; left: 0; right: 0; height: 30%; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .06), transparent); animation: cam-roll 4.5s linear infinite; }
.cam-noise { inset: -50%; z-index: 4; opacity: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"); animation: cam-static .25s steps(4) infinite; }
.c-cam.idle .cam-noise { opacity: .35; }
.c-cam.cut .cam-noise { animation: cam-static .25s steps(4) infinite, cam-burst .45s ease-out forwards; }
.c-cam.cut .cam-feed { animation: cam-glitch .38s steps(5) both; }
.cam-rec { left: 9px; top: 8px; z-index: 5; display: flex; align-items: center; gap: 5px; font: 600 10px/1 var(--mono); letter-spacing: .12em; color: #e9efe0; }
.cam-rec i { width: 7px; height: 7px; border-radius: 50%; background: #ff2d2d; box-shadow: 0 0 8px #ff2d2d; animation: blink 1.2s steps(1) infinite; }
.c-cam.idle .cam-rec i { background: #555; box-shadow: none; animation: none; }
.cam-tag { left: 0; right: 0; bottom: 0; z-index: 5; display: flex; align-items: baseline; justify-content: space-between; gap: 6px; padding: 18px 10px 8px; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .85)); border-bottom: 3px solid var(--team); }
.cam-tag b { font: 800 18px/1 var(--display); color: #fff; letter-spacing: .03em; }
.cam-tag span { font: 500 10px/1 var(--mono); color: #c9cdd3; text-transform: uppercase; letter-spacing: .08em; }
@keyframes cam-in { from { opacity: 0; transform: scale(1.12) translateY(6px); filter: contrast(1.6) saturate(0) brightness(1.6); } }
@keyframes cam-burst { 0% { opacity: .95; } 100% { opacity: 0; } }
@keyframes cam-static { 0% { transform: translate(0, 0); } 25% { transform: translate(-8%, 5%); } 50% { transform: translate(6%, -9%); } 75% { transform: translate(-4%, -3%); } 100% { transform: translate(3%, 7%); } }
@keyframes cam-glitch { 0% { transform: translateX(-6px) skewX(8deg); filter: hue-rotate(90deg); } 40% { transform: translateX(5px) skewX(-6deg); clip-path: inset(20% 0 35% 0); } 80% { transform: translateX(-2px); clip-path: inset(0); } 100% { transform: none; filter: none; } }
@keyframes cam-roll { from { top: -30%; } to { top: 100%; } }
@media (max-width: 1000px) { .c-cam { max-width: 260px; aspect-ratio: 1; min-height: 0; } .console-grid > .c-cam { justify-self: center; width: 100%; } }
@media (prefers-reduced-motion: reduce) { .cam-noise, .cam-scan::after, .cam-feed, .cam-feed img, .cam-rec i { animation: none !important; } .c-cam.idle .cam-noise { opacity: .2; } }
.key .kn { position: absolute; left: 7px; top: 6px; font: 600 10px/1 var(--mono); font-style: normal; color: #6f7680; }
.key[aria-pressed="true"] .kn { color: var(--team); }


/* ================================================================ igloo-inspired HUD layer */
/* blurred, out-of-focus type drifting behind content */
.depth { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.depth span { position: absolute; white-space: nowrap; font: 500 clamp(40px, 6vw, 92px)/1 var(--mono); color: #fff; opacity: .05; filter: blur(5px); animation: depth-drift 26s ease-in-out infinite alternate; }
.depth span:nth-child(1) { left: 42%; top: 8%; }
.depth span:nth-child(2) { left: -4%; top: 48%; filter: blur(8px); opacity: .04; animation-duration: 34s; animation-direction: alternate-reverse; }
.depth span:nth-child(3) { right: -6%; bottom: 10%; filter: blur(3px); opacity: .06; animation-duration: 30s; }
.section-head { position: relative; }
.section-head > div { position: relative; z-index: 1; }
.section-head .depth { inset: -24px 0 -12px 0; overflow: hidden; }
.section-head .depth span { font-size: clamp(60px, 9vw, 150px); top: 0; left: 24%; opacity: .045; filter: blur(6px); }
@keyframes depth-drift { to { transform: translateX(-6%); } }

/* viewport frame: faint dot rails and corner ticks at the screen edges */
.hud-frame { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.hud-frame::before, .hud-frame::after { content: ""; position: absolute; top: 96px; bottom: 28px; width: 9px; opacity: .45; background-image: radial-gradient(circle, #8b929c 1px, transparent 1.5px); background-size: 9px 64px; }
.hud-frame::before { left: 10px; }
.hud-frame::after { right: 10px; background-position: 0 32px; }
.hud-frame i { position: absolute; width: 14px; height: 14px; border: 0 solid rgba(154, 161, 171, .5); }
.hud-frame i:nth-child(1) { right: 10px; bottom: 10px; border-right-width: 1px; border-bottom-width: 1px; }
.hud-frame i:nth-child(2) { right: 10px; top: 76px; border-right-width: 1px; border-top-width: 1px; }

/* corner-bracket selection on the active tab */
.tabs a.active::after { display: none; }
.tabs a.active { --b: var(--primary); background:
  linear-gradient(var(--b), var(--b)) left 4px top 8px / 8px 1.5px no-repeat, linear-gradient(var(--b), var(--b)) left 4px top 8px / 1.5px 8px no-repeat,
  linear-gradient(var(--b), var(--b)) right 4px top 8px / 8px 1.5px no-repeat, linear-gradient(var(--b), var(--b)) right 4px top 8px / 1.5px 8px no-repeat,
  linear-gradient(var(--b), var(--b)) left 4px bottom 8px / 8px 1.5px no-repeat, linear-gradient(var(--b), var(--b)) left 4px bottom 8px / 1.5px 8px no-repeat,
  linear-gradient(var(--b), var(--b)) right 4px bottom 8px / 8px 1.5px no-repeat, linear-gradient(var(--b), var(--b)) right 4px bottom 8px / 1.5px 8px no-repeat; }

@media (max-width: 700px) { .hud-frame { display: none; } }
@media (prefers-reduced-motion: reduce) { .depth span { animation: none !important; } }
@media (max-width: 480px) { .rowbtn[style*="112px"] { grid-template-columns: 112px minmax(0, 1fr) 92px !important; gap: 8px !important; } }

/* ================================================================ 3D circuit (igloo-style scene) */
.c3 { position: relative; overflow: hidden; margin-top: var(--s6); height: clamp(460px, 68vh, 660px); border-radius: 18px; border: 1px solid var(--border); isolation: isolate; cursor: grab;
  background: radial-gradient(90% 70% at 50% 60%, #1a2030 0%, #0f1219 55%, #0b0d11 100%); }
.c3.grabbing { cursor: grabbing; }
.c3 > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.2s var(--ease); }
.c3.live > canvas { opacity: 1; }
.c3::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(5, 6, 9, .75)); }
.c3-fallback { position: absolute; inset: 12% 18%; display: grid; place-items: center; transition: opacity .6s; }
.c3-fallback .map, .c3-fallback svg { width: 100%; height: 100%; }
.c3.live .c3-fallback { opacity: 0; pointer-events: none; }
.c3-labels { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.c3-turn { position: absolute; left: 0; top: 0; margin: -18px 0 0 -6px; font: 500 10px/1 var(--mono); letter-spacing: .06em; color: #dfe6f2; text-shadow: 0 1px 4px #000; white-space: nowrap; will-change: transform; opacity: 0; }
.c3-turn::before { content: "+"; margin-right: 3px; color: rgba(223, 230, 242, .6); }
.c3.flat .c3-turn { display: none; }
.c3-hud { position: absolute; inset: 0; z-index: 3; pointer-events: none; padding: clamp(16px, 2.4vw, 28px); font: 500 11px/1.35 var(--mono); letter-spacing: .08em; color: #e8edf5; }
.c3-hud > * { position: absolute; }
.c3-tl { left: inherit; top: inherit; left: clamp(16px, 2.4vw, 28px); top: clamp(16px, 2.4vw, 28px); padding-bottom: 8px; border-bottom: 1px solid rgba(232, 237, 245, .5); min-width: 180px; }
.c3-tl span { color: rgba(232, 237, 245, .65); }
.c3-tl h2 { margin: 4px 0 0; font: 800 clamp(26px, 3.4vw, 44px)/1 var(--display); letter-spacing: 0; text-transform: uppercase; color: #fff; }
.c3-tr { right: clamp(16px, 2.4vw, 28px); top: clamp(16px, 2.4vw, 28px); margin: 0; display: grid; gap: 6px; min-width: 190px; }
.c3-tr div { display: flex; justify-content: space-between; gap: 18px; padding-bottom: 5px; border-bottom: 1px solid rgba(232, 237, 245, .14); }
.c3-tr dt { color: rgba(232, 237, 245, .6); text-transform: uppercase; }
.c3-tr dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.c3-bl { left: clamp(16px, 2.4vw, 28px); bottom: clamp(16px, 2.4vw, 28px); max-width: min(420px, 60%); }
.c3-bl p { margin: 10px 0 0; font: 400 12px/1.5 var(--body); letter-spacing: 0; color: rgba(232, 237, 245, .7); }
.c3-speed { display: grid; grid-template-columns: auto auto 1fr; align-items: baseline; column-gap: 8px; width: 220px; }
.c3-speed span { grid-column: 1 / -1; color: rgba(232, 237, 245, .6); text-transform: uppercase; }
.c3-speed b { font: 700 40px/1 var(--mono); font-variant-numeric: tabular-nums; min-width: 3ch; }
.c3-speed small { color: rgba(232, 237, 245, .6); }
.c3-sbar { grid-column: 1 / -1; height: 3px; margin-top: 8px; background: rgba(232, 237, 245, .12); border-radius: 2px; overflow: hidden; }
.c3-sbar i { display: block; height: 100%; transform-origin: left; transform: scaleX(.05); background: #fff; transition: transform .12s linear; }
.c3.flat .c3-speed { display: none; }
.c3-br { right: clamp(16px, 2.4vw, 28px); bottom: clamp(16px, 2.4vw, 28px); display: grid; justify-items: end; gap: 10px; }
.c3-legend { display: flex; align-items: center; gap: 8px; color: rgba(232, 237, 245, .7); }
.c3-legend i { width: 120px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, rgb(41, 82, 242), rgb(115, 209, 255) 35%, rgb(237, 245, 255) 60%, rgb(255, 184, 64) 80%, rgb(255, 46, 31)); }
.c3-hint { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border: 1px solid rgba(232, 237, 245, .25); border-radius: 4px; color: rgba(232, 237, 245, .8); text-transform: uppercase; }
.c3.flat .c3-hint { display: none; }
@media (max-width: 700px) {
  .c3 { height: 600px; }
  .c3-tr { top: auto; bottom: 118px; left: clamp(16px, 2.4vw, 28px); right: auto; min-width: 0; width: calc(100% - 32px); grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .c3-tr div:nth-child(n + 5) { display: none; }
  .c3-bl { max-width: none; right: 16px; }
  .c3-bl p { display: none; }
  .c3-speed b { font-size: 30px; }
  .c3-br { top: clamp(16px, 2.4vw, 28px); bottom: auto; }
  .c3-legend i { width: 60px; }
  .c3-hint { display: none; }
}
.c3-sf { color: #fff; font-weight: 600; } .c3-sf::before { content: ""; margin: 0; }
.grid > *, .stack > * { min-width: 0; }   /* grid items may shrink below their content width (no phone overflow) */

/* ================================================================ verified venue + provisional forecast */
.hero h1 .title-tail { display: block; font-size: .42em; font-weight: 600; letter-spacing: .02em; color: var(--text-2); margin-top: .35em; }
.venue { margin: 10px 0 0; font: 500 15px/1.4 var(--body); color: var(--text-2); }
.venue b { color: var(--text); font-weight: 700; }
.venue-note { color: var(--muted); font-size: 13px; }
.chip.warn { background: rgba(255, 184, 64, .12); border-color: rgba(255, 184, 64, .45); color: #ffcf7a; }
.provisional { max-width: 62ch; margin: 12px 0 0; padding: 10px 14px; border-left: 3px solid #ffb840; border-radius: 0 8px 8px 0; background: rgba(255, 184, 64, .07); font-size: 14px; line-height: 1.5; color: var(--text-2); }
details.provisional summary { cursor: pointer; font-weight: 600; color: #ffcf7a; }
details.provisional ul { margin: 8px 0 0; padding-left: 18px; font: 500 12.5px/1.55 var(--mono); }
.trackcard.nomap .nomap-box { display: grid; place-items: center; align-self: stretch; min-height: 96px; border: 1px dashed var(--border-strong); border-radius: 10px; }
.trackcard.nomap .nomap-box span { font: 500 11px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.c3.c3-none { height: auto; min-height: 0; cursor: default; }
.c3.c3-none .c3-hud { position: relative; }
.c3.c3-none .c3-hud > * { position: static; }
.c3-none-msg { max-width: 64ch; margin: 18px 0 0; font: 400 14px/1.6 var(--body); letter-spacing: 0; color: var(--text-2); }

/* accuracy: honest benchmark section */
.subhead { margin: 0 0 var(--s4); font: 700 20px/1.2 var(--display); }
.subhead small { display: block; margin-top: 4px; font: 500 13px/1.4 var(--body); color: var(--muted); letter-spacing: 0; }
ul.method { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: 14px; line-height: 1.5; color: var(--text-2); }

/* driver vs car: uncertainty */
.dvc-val.unclear { opacity: .55; }
.dvc-val .dvc-ci { display: block; font: 500 10px/1.2 var(--mono); color: var(--muted); }
.unclear-note { margin-top: 6px; font: 500 12px/1.4 var(--body); color: var(--muted); }
.note.dvc-honest { max-width: 80ch; margin: var(--s4) 0; }

/* lab: scenario deltas */
td small.up { color: var(--good); } td small.down { color: var(--bad); }
/* lab: reproducibility table - long ids and hashes wrap instead of widening the page */
table.repro { width: 100%; table-layout: fixed; border-collapse: collapse; }
table.repro th { width: 34%; text-align: left; font-weight: 600; color: var(--muted); vertical-align: top; padding: 6px 12px 6px 0; }
table.repro td { overflow-wrap: anywhere; word-break: break-word; padding: 6px 0; font-size: 12.5px; }
table.repro th, table.repro td { white-space: normal; }
/* official 2D layout (no telemetry) */
.c3.c3-layout { height: auto; min-height: 0; cursor: default; padding-bottom: 20px; }
.c3.c3-layout .c3-hud { position: relative; min-height: 110px; }
.c3.c3-layout .c3-hud > .c3-tl { position: absolute; }
.lay-map { max-width: 760px; margin: 0 auto; padding: 0 16px; }
.lay-map svg { width: 100%; height: auto; display: block; }
.lay-map .lay-bg { fill: none; stroke: #2a2f3a; stroke-width: 34; stroke-linejoin: round; }
.lay-map .lay { fill: none; stroke: #e8edf5; stroke-width: 9; stroke-linejoin: round; }
.lay-map .lay-sf { stroke: var(--primary); stroke-width: 8; }
.lay-map .lay-turn circle { fill: #0b0d11; stroke: #9aa3b0; stroke-width: 3; }
.lay-map .lay-turn text { fill: #e8edf5; font: 600 20px var(--mono); text-anchor: middle; }
.c3.c3-layout .c3-none-msg { margin: 16px auto 0; padding: 0 24px; text-align: center; }
@media (max-width: 700px) { .c3.c3-layout .c3-hud { min-height: 90px; } .c3.c3-layout .c3-tr { display: none; } }
/* 3D layout-only circuit */
.c3.c3-flat .c3-bl { max-width: min(460px, 60%); }
.c3.c3-flat .c3-bl p { margin: 0; }
@media (max-width: 700px) { .c3.c3-flat .c3-bl p { display: block; font-size: 11.5px; } .c3.c3-flat .c3-tr { display: none; } }
/* accuracy: season + mode switches, verdict line */
.seg-row { display: flex; flex-wrap: wrap; gap: 10px; }
.note.bench-verdict { margin: 0 0 var(--s4); max-width: 80ch; }

/* link back to the portfolio */
.home-link { margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 0 12px; border-radius: 10px; text-decoration: none; color: var(--muted); font: 600 13px/1 var(--display); letter-spacing: .04em; transition: color var(--t-fast), background var(--t-fast); }
.home-link:hover, .home-link:focus-visible { color: var(--text); background: rgba(255, 255, 255, .05); }
.home-link svg { width: 16px; height: 16px; }
.home-link + .mode-switch { margin-left: 0; }
.home-link .short, .home-link .house { display: none; }
/* laptops: compact icon so every tab (incl. Lab in Nerd mode) fits without hidden scrolling */
@media (max-width: 1366px) { .home-link .long, .home-link .short, .home-link .chev { display: none; } .home-link .house { display: block; width: 20px; height: 20px; } .home-link { padding: 0; min-width: 44px; justify-content: center; } }
@media (max-width: 1240px) and (min-width: 701px) { .tabs a { padding: 0 9px; font-size: 14px; letter-spacing: .04em; } .topbar { column-gap: 12px; } }
@media (max-width: 700px) {
  .topbar { column-gap: 6px; }
  .home-link { min-width: 40px; padding: 0; justify-content: center; }
  .home-link .short, .home-link .chev { display: none; }
  .home-link .house { display: block; width: 20px; height: 20px; }
  .mode-switch button { padding: 0 12px; }
}
/* narrow windows: tabs on their own row so every tab (incl. Lab) stays visible */
@media (max-width: 1080px) { .topbar { flex-wrap: wrap; height: auto; padding-top: 8px; row-gap: 8px; } .tabs { order: 3; flex-basis: 100%; } }

/* ================================================================ garage: exploding 3D car (Teams page) */
.car3-wrap { margin: var(--s5) 0 var(--s6); }
.car3 { margin-top: 0; height: clamp(440px, 64vh, 620px);
  background: radial-gradient(80% 65% at 50% 62%, color-mix(in srgb, var(--team, #1a2030) 22%, #141924) 0%, #0f1219 55%, #0b0d11 100%); transition: background .8s var(--ease); }
.car3-logo { inset: 20% 25%; }
.car3-logo img { height: auto !important; max-height: 96px; width: auto; opacity: .85; filter: drop-shadow(0 6px 24px rgba(0, 0, 0, .5)); }
.car3-logo b { font: 800 clamp(28px, 5vw, 56px)/1 var(--display); text-transform: uppercase; color: #fff; }
.car3 .c3-tl { border-bottom-color: color-mix(in srgb, var(--team, #fff) 80%, #fff); }
.car3-drivers { display: flex; flex-wrap: wrap; gap: 6px 16px; font: 600 13px/1.3 var(--body); letter-spacing: 0; color: #fff; }
.car3-drivers b { font: 700 12px/1 var(--mono); color: var(--team, #fff); filter: brightness(1.35); }
.car3-ctl { pointer-events: auto; }
.car3-btns { display: flex; gap: 8px; }
.car3-btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid rgba(232, 237, 245, .3); background: rgba(11, 13, 17, .55); color: #e8edf5; cursor: pointer; backdrop-filter: blur(6px); transition: border-color .2s, background .2s, transform .15s; }
.car3-btn svg { width: 18px; height: 18px; }
.car3-btn:hover { border-color: var(--team, #fff); background: color-mix(in srgb, var(--team, #fff) 22%, rgba(11, 13, 17, .6)); }
.car3-btn:active { transform: scale(.94); }
.car3-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.car3-drivers { gap: 8px; }
.car3-drv { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(232, 237, 245, .22); background: rgba(11, 13, 17, .5); color: #e8edf5; font: 600 13px/1 var(--body); cursor: pointer; pointer-events: auto; transition: border-color .2s, background .2s; }
.car3-drv[aria-pressed="true"] { border-color: var(--team, #fff); background: color-mix(in srgb, var(--team, #fff) 22%, rgba(11, 13, 17, .6)); }
.car3-drv[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.car3-drv:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.car3 .c3-bl { pointer-events: auto; }
.car3-status { min-height: 1em; font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(232, 237, 245, .75); }
.car3.loading .car3-status::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--team, #fff); animation: car3pulse 1s ease-in-out infinite; }
@keyframes car3pulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .car3.loading .car3-status::before { animation: none; } }
.car3-credit { margin: 10px 0 0; max-width: 90ch; font: 400 12px/1.5 var(--body); color: var(--muted); }
.car3-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 700px) { .car3-credit a { display: inline-block; padding: 9px 0; } }
.car3-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
@media (max-width: 700px) {
  .car3 { height: 560px; }
  .car3 .c3-tr { bottom: 96px; }
  .car3 .c3-bl { right: auto; max-width: 60%; }
  .car3-ctl { top: auto; bottom: clamp(16px, 2.4vw, 28px); }
  .car3-strip { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .car3-strip .pill-toggle { flex: none; }
}
.footer .disclaimer { flex-basis: 100%; max-width: 110ch; font-size: 12px; line-height: 1.5; color: var(--muted); }

/* hero: what the latest session changed (links to the comparison panel) */
.shift-link { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 12px; min-height: 40px; padding: 8px 14px; border-radius: var(--radius-ctl); background: rgba(0, 0, 0, .45); border: 1px solid var(--border-strong); font: 500 13px/1.2 var(--mono); color: var(--text-2); cursor: pointer; text-align: left; transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); }
.shift-link b { font: 700 13px/1.2 var(--display); letter-spacing: .05em; text-transform: uppercase; color: #fff; }
.shift-link span + span::before, .shift-link b + span::before { content: '·'; margin-right: 14px; color: var(--muted); }
.shift-link i { font-style: normal; color: #ff6b6b; }
.shift-link:hover { border-color: rgba(220, 38, 38, .6); background: rgba(127, 29, 29, .35); }
.shift-link:focus-visible { outline: 2px solid #ff6b6b; outline-offset: 2px; }
.view-toggle { margin-top: 12px; }
.view-note { margin: 10px 0 0; font: 500 13px/1.4 var(--mono); color: #ffcf7a; }
/* tyre sets left per driver */
.set-row { display: inline-flex; gap: 12px; }
.set-count { display: inline-flex; align-items: center; gap: 6px; font: 600 14px/1 var(--mono); }
.set-count i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.set-count b.muted { color: var(--muted); font-weight: 500; }
/* live weather */
.wx { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(220px, 1fr); gap: 18px; align-items: start; }
@media (max-width: 860px) { .wx { grid-template-columns: 1fr; } }
.wx-map { position: relative; min-height: 180px; border-radius: 10px; overflow: hidden; background: #0d0f14; border: 1px solid var(--border-strong); }
.wx-wait { display: grid; place-items: center; min-height: 180px; font: 500 13px var(--mono); color: var(--muted); }
.wx-now { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; padding: 10px 14px; margin-bottom: 12px; border-radius: 10px; border: 1px solid var(--border-strong); background: rgba(0, 0, 0, .35); font: 500 13px/1.3 var(--mono); color: var(--text-2); }
.wx-now b { font: 700 16px/1.1 var(--display); letter-spacing: .04em; text-transform: uppercase; color: #fff; }
.wx-now.good { border-color: rgba(34, 197, 94, .45); } .wx-now.good b { color: #86efac; }
.wx-now.warn { border-color: rgba(255, 184, 64, .5); } .wx-now.warn b { color: #ffcf7a; }
.wx-now.bad { border-color: rgba(56, 189, 248, .55); background: rgba(8, 47, 73, .45); } .wx-now.bad b { color: #7dd3fc; }
.wx-hours { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; align-items: end; height: 96px; margin-top: 14px; }
.wx-hours div { position: relative; display: grid; grid-template-rows: 1fr auto auto; height: 100%; text-align: center; font: 500 11px/1.2 var(--mono); color: var(--muted); }
.wx-hours i { align-self: end; display: block; min-height: 4px; border-radius: 3px 3px 0 0; background: linear-gradient(#38bdf8, #0ea5e9); }
.wx-hours b { margin-top: 4px; font-weight: 600; color: var(--text-2); }
/* interactive radar map */
.wx-view { position: relative; line-height: 0; }
.wx-view canvas { display: block; width: 100%; border-radius: 10px; cursor: grab; touch-action: pan-y; outline: none; }
.wx-view canvas.drag { cursor: grabbing; }
.wx-view canvas:focus-visible { box-shadow: 0 0 0 2px #ff6b6b; }
.wx-view button { display: grid; place-items: center; min-width: 36px; height: 36px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--border-strong); background: rgba(10, 11, 14, .82); color: #fff; font: 600 14px/1 var(--display); letter-spacing: .03em; cursor: pointer; backdrop-filter: blur(6px); transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.wx-view button:hover { background: rgba(127, 29, 29, .6); border-color: rgba(220, 38, 38, .6); }
.wx-view button:active { transform: scale(.96); }
.wx-view button:focus-visible { outline: 2px solid #ff6b6b; outline-offset: 2px; }
.wx-ctl { position: absolute; top: 10px; right: 10px; display: grid; gap: 6px; }
.wx-ctl button { font: 600 20px/1 var(--mono); padding: 0; }
.wx-presets { position: absolute; top: 10px; right: 56px; display: flex; gap: 6px; }
.wx-stamp { position: absolute; top: 10px; left: 10px; padding: 7px 10px; border-radius: 8px; background: rgba(10, 11, 14, .82); border: 1px solid var(--border-strong); font: 600 12px/1.5 var(--mono); font-variant-numeric: tabular-nums; color: #fff; backdrop-filter: blur(6px); pointer-events: none; }
.wx-stamp span { display: inline-block; min-width: 54px; font: 600 10px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.wx-stamp i { margin-left: 8px; font-style: normal; color: #ff6b6b; }
.wx-bar { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; border-radius: 10px; background: rgba(10, 11, 14, .82); border: 1px solid var(--border-strong); backdrop-filter: blur(6px); }
.wx-bar button { min-width: 34px; height: 30px; font-size: 12px; background: none; border-color: transparent; }
.wx-bar input[type=range] { flex: 1; min-width: 0; height: 24px; accent-color: #ff3b3b; cursor: pointer; }
@media (max-width: 560px) { .wx-presets { top: auto; right: 10px; bottom: 58px; } }
.wx-clock { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.wx-clock div { padding: 8px 12px; border-radius: 10px; border: 1px solid var(--border-strong); background: rgba(0, 0, 0, .3); }
.wx-clock span { display: block; font: 600 11px/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.wx-clock b { display: block; margin-top: 4px; font: 600 20px/1 var(--mono); font-variant-numeric: tabular-nums; color: #fff; }
@media (max-width: 560px) { .wx-clock b { font-size: 15px; } .wx-view button { min-width: 34px; height: 34px; padding: 0 8px; font-size: 13px; } }
/* weather tyre plan */
.tyre.I { --tc: #22c55e; } .tyre.W { --tc: #3b82f6; }
.lane-stint.I { background: #22c55e; } .lane-stint.W { background: #3b82f6; } .lane-stint.\? { background: var(--muted); }
.wx-plan { margin: 6px 0 12px; }
.wx-plan h3 { margin: 4px 0 10px; font: 700 14px/1.2 var(--display); letter-spacing: .05em; text-transform: uppercase; color: #fff; }
.wx-lanes { display: grid; gap: 6px; }
.wx-lane { display: grid; grid-template-columns: 52px 1fr; gap: 10px; align-items: center; font: 600 11px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.wx-lane .lane-track { position: relative; height: 22px; border-radius: 6px; background: rgba(255, 255, 255, .05); }
.wx-seg { position: absolute; top: 3px; bottom: 3px; border-radius: 4px; }
.wx-seg.wet { background: #38bdf8; } .wx-seg.full { background: #1d4ed8; } .wx-seg.drying { background: repeating-linear-gradient(135deg, #38bdf8 0 5px, #475569 5px 10px); } .wx-seg.dry { background: #475569; }
.wx-axis div { display: flex; justify-content: space-between; font: 500 10px/1 var(--mono); letter-spacing: 0; text-transform: none; }
.wx-axis i { font-style: normal; }
/* radar timeline: scans | one-hour forecast, with a tick at now */
.wx-scrub { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; }
.wx-zones { position: absolute; left: 8px; right: 8px; bottom: -3px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .22); pointer-events: none; }
.wx-zones i { position: absolute; left: var(--obs, 100%); right: 0; top: 0; bottom: 0; border-radius: 2px; background: #ffb840; }
.wx-zones b { position: absolute; left: var(--now, 100%); top: -4px; width: 2px; height: 11px; margin-left: -1px; background: #fff; border-radius: 1px; }
.wx-stamp i.fc { color: #ffcf7a; }
.wx-stamp i.mid { color: var(--muted); }
/* hero: the favourite's car in 3D, large and low across the bottom; the driver stands behind it */
.hero:has(.hero-car) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); min-height: min(640px, 80vh); }
.hero-portrait:has(.hero-car) { min-height: 520px; }
.hero-car { position: absolute; left: -38%; right: -6%; bottom: 0; height: 54%; margin: 0; border: 0; border-radius: 0; background: none; overflow: visible; z-index: 2; cursor: grab; }
.hero-car:active { cursor: grabbing; }
.hero-car::after { content: ''; position: absolute; left: 10%; right: 6%; bottom: 4%; height: 26%; z-index: -1; background: radial-gradient(closest-side, rgba(0, 0, 0, .6), transparent); filter: blur(10px); pointer-events: none; }
.hero-portrait:has(.hero-car) img { left: 50%; transform: translateX(-34%); bottom: 24%; height: 78%; max-height: 500px; filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .55)) brightness(.92); }
.hero-portrait:has(.hero-car) .tag { bottom: auto; top: 37%; left: 2%; z-index: 3; }   /* caption beside the driver, at shoulder height */
@media (max-width: 900px) {
  .hero:has(.hero-car) { grid-template-columns: 1fr; }
  .hero-portrait:has(.hero-car) { min-height: 540px; }
  .hero-car { left: -8%; right: -8%; height: 44%; }
  .hero-portrait:has(.hero-car) img { height: 50%; max-height: 290px; bottom: 30%; transform: translateX(-50%); }
  .hero-portrait:has(.hero-car) .tag { top: 0; right: auto; left: 50%; transform: translateX(-50%); text-align: center; white-space: nowrap; }
}
.car3-wip { margin-top: 8px; align-self: flex-start; pointer-events: auto; }
/* race result hero: the winner, celebrated */
.hero-result .hero-portrait img { filter: drop-shadow(0 0 34px color-mix(in srgb, var(--team) 55%, transparent)) drop-shadow(0 18px 40px rgba(0, 0, 0, .55)); }
.hero-result .hero-portrait::before { content: ''; position: absolute; left: 12%; right: 0; top: 4%; bottom: 20%; z-index: 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 215, 94, .28), rgba(255, 184, 64, .1) 55%, transparent); pointer-events: none; }
.confetti { position: absolute; inset: -6% -10% 0 -30%; width: 140%; height: 106%; z-index: 4; pointer-events: none; }
.winner-line { margin: var(--s4) 0 0; font: 500 clamp(17px, 1.6vw, 22px)/1.35 var(--body, inherit); color: var(--text-2); max-width: 640px; }
.winner-line b { color: #fff; font-weight: 700; }
.hero-portrait .tag.winner { border-color: rgba(255, 215, 94, .65); background: rgba(40, 30, 6, .78); }
.hero-portrait .tag.winner b { display: flex; align-items: center; gap: 8px; font: 800 22px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: #ffd75e; }
.hero-portrait .tag.winner b svg { width: 22px; height: 22px; }
.hero-portrait .tag.winner span { display: block; margin-top: 6px; color: #f4e7b8; }
.tyre.U { --tc: var(--muted); }
.order-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) 52px 60px; gap: 10px; align-items: center; min-height: 44px; }
.order-row .order-pts { text-align: right; color: var(--text-2); }
/* the portrait is cropped at the waist: fade its lower edge out so no hard cut shows behind the car */
.hero-portrait:has(.hero-car) img { -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 97%); mask-image: linear-gradient(to bottom, #000 62%, transparent 97%); }
.car3-wip[hidden] { display: none; }