@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600&family=Oswald:wght@500;600;700&display=swap');

:root {
  --bg:       #0B0F12;
  --surface:  #141A1F;
  --surface2: #1E262C;
  --border:   #2A343B;
  --text:     #F2F4EF;
  --muted:    #98A2A0;
  --accent:   #C8FF2E;
  --barry:    #58A6FF;
  --gary:     #35D07F;
  --kat:      #C084FC;
  --ghost:    rgba(242,244,239,0.025);
  --p1-bg:    #151C0D;
  --p1-num:   var(--accent);
  --focus:    rgba(200,255,46,0.42);
  --mercedes: #6DE5D8;
  --ferrari:  #E0443E;
  --mclaren:  #FF9F2E;
  --redbull:  #6177FF;
  --alpine:   #4FC3FF;
  --livery-primary: var(--accent);
  --livery-secondary: var(--surface2);
  --livery-contrast: #0A0D0B;
  --livery-soft: color-mix(in srgb, var(--livery-primary) 14%, var(--bg));
  --livery-line: color-mix(in srgb, var(--livery-primary) 52%, var(--border));
  --nav-h:    57px;
  --max-w:    1280px;
  --pad:      2rem;
}

html[data-livery="ferrari"] {
  --livery-primary: #E0443E;
  --livery-secondary: #111111;
  --livery-contrast: #FFF4E8;
  --livery-soft: color-mix(in srgb, #E0443E 16%, var(--bg));
  --livery-line: color-mix(in srgb, #E0443E 62%, var(--border));
  --p1-bg: color-mix(in srgb, #E0443E 18%, var(--bg));
  --p1-num: #FFB000;
}

html[data-livery="mercedes"] {
  --livery-primary: #6DE5D8;
  --livery-secondary: #D8DEE3;
  --livery-contrast: #07100F;
  --livery-soft: color-mix(in srgb, #6DE5D8 15%, var(--bg));
  --livery-line: color-mix(in srgb, #6DE5D8 58%, var(--border));
  --p1-bg: color-mix(in srgb, #6DE5D8 14%, var(--bg));
  --p1-num: #6DE5D8;
}

html[data-livery="mclaren"] {
  --livery-primary: #FF8000;
  --livery-secondary: #000000;
  --livery-contrast: #FFFFFF;
  --livery-soft: color-mix(in srgb, #FF8000 14%, var(--bg));
  --livery-line: color-mix(in srgb, #FF8000 52%, var(--border));
  --p1-bg: color-mix(in srgb, #FF8000 14%, var(--bg));
  --p1-num: #FF8000;
}

html[data-livery="williams"] {
  --livery-primary: #005AFF;
  --livery-secondary: #FFFFFF;
  --livery-contrast: #FFFFFF;
  --livery-soft: color-mix(in srgb, #005AFF 14%, var(--bg));
  --livery-line: color-mix(in srgb, #005AFF 52%, var(--border));
  --p1-bg: color-mix(in srgb, #005AFF 14%, var(--bg));
  --p1-num: #005AFF;
}

html[data-livery="red-bull"] {
  --livery-primary: #1E41FF;
  --livery-secondary: #CC1E4A;
  --livery-contrast: #FFCD00;
  --livery-soft: color-mix(in srgb, #1E41FF 14%, var(--bg));
  --livery-line: color-mix(in srgb, #1E41FF 52%, var(--border));
  --p1-bg: color-mix(in srgb, #1E41FF 14%, var(--bg));
  --p1-num: #1E41FF;
}

html[data-livery="renault"] {
  --livery-primary: #0090FF;
  --livery-secondary: #FF8700;
  --livery-contrast: #FFFFFF;
  --livery-soft: color-mix(in srgb, #0090FF 14%, var(--bg));
  --livery-line: color-mix(in srgb, #0090FF 52%, var(--border));
  --p1-bg: color-mix(in srgb, #0090FF 14%, var(--bg));
  --p1-num: #0090FF;
}

html[data-livery="aston-martin"] {
  --livery-primary: #006D40;
  --livery-secondary: #CEDC00;
  --livery-contrast: #FFFFFF;
  --livery-soft: color-mix(in srgb, #006D40 14%, var(--bg));
  --livery-line: color-mix(in srgb, #006D40 52%, var(--border));
  --p1-bg: color-mix(in srgb, #006D40 14%, var(--bg));
  --p1-num: #006D40;
}

html[data-livery="racing-point"] {
  --livery-primary: #F596C8;
  --livery-secondary: #0067FF;
  --livery-contrast: #000000;
  --livery-soft: color-mix(in srgb, #F596C8 14%, var(--bg));
  --livery-line: color-mix(in srgb, #F596C8 52%, var(--border));
  --p1-bg: color-mix(in srgb, #F596C8 14%, var(--bg));
  --p1-num: #F596C8;
}

html[data-livery="force-india"] {
  --livery-primary: #FF80CC;
  --livery-secondary: #FF6600;
  --livery-contrast: #FFFFFF;
  --livery-soft: color-mix(in srgb, #FF80CC 14%, var(--bg));
  --livery-line: color-mix(in srgb, #FF80CC 52%, var(--border));
  --p1-bg: color-mix(in srgb, #FF80CC 14%, var(--bg));
  --p1-num: #FF80CC;
}

html[data-livery="haas"] {
  --livery-primary: #B6BABD;
  --livery-secondary: #DA291C;
  --livery-contrast: #FFFFFF;
  --livery-soft: color-mix(in srgb, #B6BABD 14%, var(--bg));
  --livery-line: color-mix(in srgb, #B6BABD 52%, var(--border));
  --p1-bg: color-mix(in srgb, #B6BABD 14%, var(--bg));
  --p1-num: #B6BABD;
}

html[data-livery="alpha-tauri"] {
  --livery-primary: #2B4562;
  --livery-secondary: #FFFFFF;
  --livery-contrast: #FFFFFF;
  --livery-soft: color-mix(in srgb, #2B4562 14%, var(--bg));
  --livery-line: color-mix(in srgb, #2B4562 52%, var(--border));
  --p1-bg: color-mix(in srgb, #2B4562 14%, var(--bg));
  --p1-num: #2B4562;
}

html[data-livery="toro-rosso"] {
  --livery-primary: #C00000;
  --livery-secondary: #003399;
  --livery-contrast: #FFFFFF;
  --livery-soft: color-mix(in srgb, #C00000 14%, var(--bg));
  --livery-line: color-mix(in srgb, #C00000 52%, var(--border));
  --p1-bg: color-mix(in srgb, #C00000 14%, var(--bg));
  --p1-num: #C00000;
}

html[data-livery="sauber"] {
  --livery-primary: #52E252;
  --livery-secondary: #000000;
  --livery-contrast: #000000;
  --livery-soft: color-mix(in srgb, #52E252 14%, var(--bg));
  --livery-line: color-mix(in srgb, #52E252 52%, var(--border));
  --p1-bg: color-mix(in srgb, #52E252 14%, var(--bg));
  --p1-num: #52E252;
}

html[data-livery="benetton"] {
  --livery-primary: #009900;
  --livery-secondary: #FFD700;
  --livery-contrast: #000000;
  --livery-soft: color-mix(in srgb, #009900 14%, var(--bg));
  --livery-line: color-mix(in srgb, #009900 52%, var(--border));
  --p1-bg: color-mix(in srgb, #009900 14%, var(--bg));
  --p1-num: #009900;
}

html[data-livery="lotus"] {
  --livery-primary: #000000;
  --livery-secondary: #C9A000;
  --livery-contrast: #C9A000;
  --livery-soft: color-mix(in srgb, #000000 14%, var(--bg));
  --livery-line: color-mix(in srgb, #000000 52%, var(--border));
  --p1-bg: color-mix(in srgb, #000000 14%, var(--bg));
  --p1-num: #000000;
}

html[data-livery="brabham"] {
  --livery-primary: #006633;
  --livery-secondary: #FFD700;
  --livery-contrast: #FFFFFF;
  --livery-soft: color-mix(in srgb, #006633 14%, var(--bg));
  --livery-line: color-mix(in srgb, #006633 52%, var(--border));
  --p1-bg: color-mix(in srgb, #006633 14%, var(--bg));
  --p1-num: #006633;
}

html[data-livery="tyrrell"] {
  --livery-primary: #001489;
  --livery-secondary: #FFFFFF;
  --livery-contrast: #FFFFFF;
  --livery-soft: color-mix(in srgb, #001489 14%, var(--bg));
  --livery-line: color-mix(in srgb, #001489 52%, var(--border));
  --p1-bg: color-mix(in srgb, #001489 14%, var(--bg));
  --p1-num: #001489;
}

html[data-livery="jordan"] {
  --livery-primary: #FFC800;
  --livery-secondary: #000000;
  --livery-contrast: #000000;
  --livery-soft: color-mix(in srgb, #FFC800 14%, var(--bg));
  --livery-line: color-mix(in srgb, #FFC800 52%, var(--border));
  --p1-bg: color-mix(in srgb, #FFC800 14%, var(--bg));
  --p1-num: #FFC800;
}

html[data-livery="arrows"] {
  --livery-primary: #FF7700;
  --livery-secondary: #000000;
  --livery-contrast: #FFFFFF;
  --livery-soft: color-mix(in srgb, #FF7700 14%, var(--bg));
  --livery-line: color-mix(in srgb, #FF7700 52%, var(--border));
  --p1-bg: color-mix(in srgb, #FF7700 14%, var(--bg));
  --p1-num: #FF7700;
}

html[data-livery="minardi"] {
  --livery-primary: #1A3066;
  --livery-secondary: #FFFFFF;
  --livery-contrast: #FFFFFF;
  --livery-soft: color-mix(in srgb, #1A3066 14%, var(--bg));
  --livery-line: color-mix(in srgb, #1A3066 52%, var(--border));
  --p1-bg: color-mix(in srgb, #1A3066 14%, var(--bg));
  --p1-num: #1A3066;
}

html[data-livery="bar"] {
  --livery-primary: #FFFFFF;
  --livery-secondary: #CC0000;
  --livery-contrast: #CC0000;
  --livery-soft: color-mix(in srgb, #FFFFFF 14%, var(--bg));
  --livery-line: color-mix(in srgb, #FFFFFF 52%, var(--border));
  --p1-bg: color-mix(in srgb, #FFFFFF 14%, var(--bg));
  --p1-num: #FFFFFF;
}

html[data-livery="honda-racing"] {
  --livery-primary: #FFFFFF;
  --livery-secondary: #C00000;
  --livery-contrast: #000000;
  --livery-soft: color-mix(in srgb, #FFFFFF 14%, var(--bg));
  --livery-line: color-mix(in srgb, #FFFFFF 52%, var(--border));
  --p1-bg: color-mix(in srgb, #FFFFFF 14%, var(--bg));
  --p1-num: #FFFFFF;
}

html[data-livery="brawn"] {
  --livery-primary: #FFFFFF;
  --livery-secondary: #FFD700;
  --livery-contrast: #000000;
  --livery-soft: color-mix(in srgb, #FFFFFF 14%, var(--bg));
  --livery-line: color-mix(in srgb, #FFFFFF 52%, var(--border));
  --p1-bg: color-mix(in srgb, #FFFFFF 14%, var(--bg));
  --p1-num: #FFFFFF;
}

html[data-livery="jaguar"] {
  --livery-primary: #006600;
  --livery-secondary: #C9B074;
  --livery-contrast: #FFFFFF;
  --livery-soft: color-mix(in srgb, #006600 14%, var(--bg));
  --livery-line: color-mix(in srgb, #006600 52%, var(--border));
  --p1-bg: color-mix(in srgb, #006600 14%, var(--bg));
  --p1-num: #006600;
}

html[data-livery="stewart"] {
  --livery-primary: #FFFFFF;
  --livery-secondary: #003399;
  --livery-contrast: #003399;
  --livery-soft: color-mix(in srgb, #FFFFFF 14%, var(--bg));
  --livery-line: color-mix(in srgb, #FFFFFF 52%, var(--border));
  --p1-bg: color-mix(in srgb, #FFFFFF 14%, var(--bg));
  --p1-num: #FFFFFF;
}

html[data-livery="toyota"] {
  --livery-primary: #CC0000;
  --livery-secondary: #000000;
  --livery-contrast: #FFFFFF;
  --livery-soft: color-mix(in srgb, #CC0000 14%, var(--bg));
  --livery-line: color-mix(in srgb, #CC0000 52%, var(--border));
  --p1-bg: color-mix(in srgb, #CC0000 14%, var(--bg));
  --p1-num: #CC0000;
}

html[data-livery="prost"] {
  --livery-primary: #0000AA;
  --livery-secondary: #FFFFFF;
  --livery-contrast: #FFFFFF;
  --livery-soft: color-mix(in srgb, #0000AA 14%, var(--bg));
  --livery-line: color-mix(in srgb, #0000AA 52%, var(--border));
  --p1-bg: color-mix(in srgb, #0000AA 14%, var(--bg));
  --p1-num: #0000AA;
}

html[data-livery="ligier"] {
  --livery-primary: #0050A0;
  --livery-secondary: #FFFFFF;
  --livery-contrast: #FFFFFF;
  --livery-soft: color-mix(in srgb, #0050A0 14%, var(--bg));
  --livery-line: color-mix(in srgb, #0050A0 52%, var(--border));
  --p1-bg: color-mix(in srgb, #0050A0 14%, var(--bg));
  --p1-num: #0050A0;
}

html[data-livery="cooper"] {
  --livery-primary: #006633;
  --livery-secondary: #FFD700;
  --livery-contrast: #FFFFFF;
  --livery-soft: color-mix(in srgb, #006633 14%, var(--bg));
  --livery-line: color-mix(in srgb, #006633 52%, var(--border));
  --p1-bg: color-mix(in srgb, #006633 14%, var(--bg));
  --p1-num: #006633;
}

html[data-livery="brm"] {
  --livery-primary: #1A6B3C;
  --livery-secondary: #FFFFFF;
  --livery-contrast: #FFFFFF;
  --livery-soft: color-mix(in srgb, #1A6B3C 14%, var(--bg));
  --livery-line: color-mix(in srgb, #1A6B3C 52%, var(--border));
  --p1-bg: color-mix(in srgb, #1A6B3C 14%, var(--bg));
  --p1-num: #1A6B3C;
}

html[data-livery="matra"] {
  --livery-primary: #004499;
  --livery-secondary: #FFD700;
  --livery-contrast: #FFFFFF;
  --livery-soft: color-mix(in srgb, #004499 14%, var(--bg));
  --livery-line: color-mix(in srgb, #004499 52%, var(--border));
  --p1-bg: color-mix(in srgb, #004499 14%, var(--bg));
  --p1-num: #004499;
}

html[data-livery="march"] {
  --livery-primary: #FF6600;
  --livery-secondary: #FFFFFF;
  --livery-contrast: #FFFFFF;
  --livery-soft: color-mix(in srgb, #FF6600 14%, var(--bg));
  --livery-line: color-mix(in srgb, #FF6600 52%, var(--border));
  --p1-bg: color-mix(in srgb, #FF6600 14%, var(--bg));
  --p1-num: #FF6600;
}

html[data-livery="shadow"] {
  --livery-primary: #111111;
  --livery-secondary: #FF6600;
  --livery-contrast: #FF6600;
  --livery-soft: color-mix(in srgb, #111111 14%, var(--bg));
  --livery-line: color-mix(in srgb, #111111 52%, var(--border));
  --p1-bg: color-mix(in srgb, #111111 14%, var(--bg));
  --p1-num: #111111;
}

html[data-livery="wolf"] {
  --livery-primary: #FFFFFF;
  --livery-secondary: #C00000;
  --livery-contrast: #C00000;
  --livery-soft: color-mix(in srgb, #FFFFFF 14%, var(--bg));
  --livery-line: color-mix(in srgb, #FFFFFF 52%, var(--border));
  --p1-bg: color-mix(in srgb, #FFFFFF 14%, var(--bg));
  --p1-num: #FFFFFF;
}

html[data-livery="hesketh"] {
  --livery-primary: #FFFFFF;
  --livery-secondary: #C00000;
  --livery-contrast: #C00000;
  --livery-soft: color-mix(in srgb, #FFFFFF 14%, var(--bg));
  --livery-line: color-mix(in srgb, #FFFFFF 52%, var(--border));
  --p1-bg: color-mix(in srgb, #FFFFFF 14%, var(--bg));
  --p1-num: #FFFFFF;
}

html[data-livery="toleman"] {
  --livery-primary: #003399;
  --livery-secondary: #FFFFFF;
  --livery-contrast: #FFFFFF;
  --livery-soft: color-mix(in srgb, #003399 14%, var(--bg));
  --livery-line: color-mix(in srgb, #003399 52%, var(--border));
  --p1-bg: color-mix(in srgb, #003399 14%, var(--bg));
  --p1-num: #003399;
}

html[data-livery="vanwall"] {
  --livery-primary: #1A6B3C;
  --livery-secondary: #FFFFFF;
  --livery-contrast: #FFFFFF;
  --livery-soft: color-mix(in srgb, #1A6B3C 14%, var(--bg));
  --livery-line: color-mix(in srgb, #1A6B3C 52%, var(--border));
  --p1-bg: color-mix(in srgb, #1A6B3C 14%, var(--bg));
  --p1-num: #1A6B3C;
}

html[data-livery="lancia"] {
  --livery-primary: #B82800;
  --livery-secondary: #FFFFFF;
  --livery-contrast: #FFFFFF;
  --livery-soft: color-mix(in srgb, #B82800 14%, var(--bg));
  --livery-line: color-mix(in srgb, #B82800 52%, var(--border));
  --p1-bg: color-mix(in srgb, #B82800 14%, var(--bg));
  --p1-num: #B82800;
}

html[data-livery="maserati"] {
  --livery-primary: #B30000;
  --livery-secondary: #FFFFFF;
  --livery-contrast: #FFFFFF;
  --livery-soft: color-mix(in srgb, #B30000 14%, var(--bg));
  --livery-line: color-mix(in srgb, #B30000 52%, var(--border));
  --p1-bg: color-mix(in srgb, #B30000 14%, var(--bg));
  --p1-num: #B30000;
}

html[data-livery="alfa-romeo"] {
  --livery-primary: #C62B2B;
  --livery-secondary: #FFFFFF;
  --livery-contrast: #FFFFFF;
  --livery-soft: color-mix(in srgb, #C62B2B 14%, var(--bg));
  --livery-line: color-mix(in srgb, #C62B2B 52%, var(--border));
  --p1-bg: color-mix(in srgb, #C62B2B 14%, var(--bg));
  --p1-num: #C62B2B;
}

html[data-livery="spyker"] {
  --livery-primary: #FF6600;
  --livery-secondary: #000000;
  --livery-contrast: #FFFFFF;
  --livery-soft: color-mix(in srgb, #FF6600 14%, var(--bg));
  --livery-line: color-mix(in srgb, #FF6600 52%, var(--border));
  --p1-bg: color-mix(in srgb, #FF6600 14%, var(--bg));
  --p1-num: #FF6600;
}

html[data-livery="super-aguri"] {
  --livery-primary: #FFFFFF;
  --livery-secondary: #CC0000;
  --livery-contrast: #CC0000;
  --livery-soft: color-mix(in srgb, #FFFFFF 14%, var(--bg));
  --livery-line: color-mix(in srgb, #FFFFFF 52%, var(--border));
  --p1-bg: color-mix(in srgb, #FFFFFF 14%, var(--bg));
  --p1-num: #FFFFFF;
}

html[data-livery="osella"] {
  --livery-primary: #0033CC;
  --livery-secondary: #FFFFFF;
  --livery-contrast: #FFFFFF;
  --livery-soft: color-mix(in srgb, #0033CC 14%, var(--bg));
  --livery-line: color-mix(in srgb, #0033CC 52%, var(--border));
  --p1-bg: color-mix(in srgb, #0033CC 14%, var(--bg));
  --p1-num: #0033CC;
}

html[data-livery="zakspeed"] {
  --livery-primary: #1C1C1C;
  --livery-secondary: #0066CC;
  --livery-contrast: #FFFFFF;
  --livery-soft: color-mix(in srgb, #1C1C1C 14%, var(--bg));
  --livery-line: color-mix(in srgb, #1C1C1C 52%, var(--border));
  --p1-bg: color-mix(in srgb, #1C1C1C 14%, var(--bg));
  --p1-num: #1C1C1C;
}

html[data-livery="ags"] {
  --livery-primary: #0066CC;
  --livery-secondary: #FFFFFF;
  --livery-contrast: #FFFFFF;
  --livery-soft: color-mix(in srgb, #0066CC 14%, var(--bg));
  --livery-line: color-mix(in srgb, #0066CC 52%, var(--border));
  --p1-bg: color-mix(in srgb, #0066CC 14%, var(--bg));
  --p1-num: #0066CC;
}

html[data-livery="larrousse"] {
  --livery-primary: #001166;
  --livery-secondary: #FF4400;
  --livery-contrast: #FFFFFF;
  --livery-soft: color-mix(in srgb, #001166 14%, var(--bg));
  --livery-line: color-mix(in srgb, #001166 52%, var(--border));
  --p1-bg: color-mix(in srgb, #001166 14%, var(--bg));
  --p1-num: #001166;
}

html[data-livery="leyton-house"] {
  --livery-primary: #0099CC;
  --livery-secondary: #FFFFFF;
  --livery-contrast: #FFFFFF;
  --livery-soft: color-mix(in srgb, #0099CC 14%, var(--bg));
  --livery-line: color-mix(in srgb, #0099CC 52%, var(--border));
  --p1-bg: color-mix(in srgb, #0099CC 14%, var(--bg));
  --p1-num: #0099CC;
}

html[data-livery="dallara"] {
  --livery-primary: #003399;
  --livery-secondary: #FFFFFF;
  --livery-contrast: #FFFFFF;
  --livery-soft: color-mix(in srgb, #003399 14%, var(--bg));
  --livery-line: color-mix(in srgb, #003399 52%, var(--border));
  --p1-bg: color-mix(in srgb, #003399 14%, var(--bg));
  --p1-num: #003399;
}

html[data-livery="arrows-footwork"] {
  --livery-primary: #FF7700;
  --livery-secondary: #000000;
  --livery-contrast: #FFFFFF;
  --livery-soft: color-mix(in srgb, #FF7700 14%, var(--bg));
  --livery-line: color-mix(in srgb, #FF7700 52%, var(--border));
  --p1-bg: color-mix(in srgb, #FF7700 14%, var(--bg));
  --p1-num: #FF7700;
}

html[data-livery="andrea-moda"] {
  --livery-primary: #CC0000;
  --livery-secondary: #FFFFFF;
  --livery-contrast: #FFFFFF;
  --livery-soft: color-mix(in srgb, #CC0000 14%, var(--bg));
  --livery-line: color-mix(in srgb, #CC0000 52%, var(--border));
  --p1-bg: color-mix(in srgb, #CC0000 14%, var(--bg));
  --p1-num: #CC0000;
}

html[data-livery="simtek"] {
  --livery-primary: #CC0000;
  --livery-secondary: #000000;
  --livery-contrast: #FFFFFF;
  --livery-soft: color-mix(in srgb, #CC0000 14%, var(--bg));
  --livery-line: color-mix(in srgb, #CC0000 52%, var(--border));
  --p1-bg: color-mix(in srgb, #CC0000 14%, var(--bg));
  --p1-num: #CC0000;
}

html[data-livery="forti"] {
  --livery-primary: #CC0033;
  --livery-secondary: #FFFFFF;
  --livery-contrast: #FFFFFF;
  --livery-soft: color-mix(in srgb, #CC0033 14%, var(--bg));
  --livery-line: color-mix(in srgb, #CC0033 52%, var(--border));
  --p1-bg: color-mix(in srgb, #CC0033 14%, var(--bg));
  --p1-num: #CC0033;
}

html[data-livery="pacific"] {
  --livery-primary: #FFFFFF;
  --livery-secondary: #003366;
  --livery-contrast: #003366;
  --livery-soft: color-mix(in srgb, #FFFFFF 14%, var(--bg));
  --livery-line: color-mix(in srgb, #FFFFFF 52%, var(--border));
  --p1-bg: color-mix(in srgb, #FFFFFF 14%, var(--bg));
  --p1-num: #FFFFFF;
}

html[data-livery="ats"] {
  --livery-primary: #CC0000;
  --livery-secondary: #000000;
  --livery-contrast: #FFFFFF;
  --livery-soft: color-mix(in srgb, #CC0000 14%, var(--bg));
  --livery-line: color-mix(in srgb, #CC0000 52%, var(--border));
  --p1-bg: color-mix(in srgb, #CC0000 14%, var(--bg));
  --p1-num: #CC0000;
}

html[data-livery="ensign"] {
  --livery-primary: #0000FF;
  --livery-secondary: #FFFFFF;
  --livery-contrast: #FFFFFF;
  --livery-soft: color-mix(in srgb, #0000FF 14%, var(--bg));
  --livery-line: color-mix(in srgb, #0000FF 52%, var(--border));
  --p1-bg: color-mix(in srgb, #0000FF 14%, var(--bg));
  --p1-num: #0000FF;
}

html[data-livery="honda-classic"] {
  --livery-primary: #FFFFFF;
  --livery-secondary: #CC0000;
  --livery-contrast: #CC0000;
  --livery-soft: color-mix(in srgb, #FFFFFF 14%, var(--bg));
  --livery-line: color-mix(in srgb, #FFFFFF 52%, var(--border));
  --p1-bg: color-mix(in srgb, #FFFFFF 14%, var(--bg));
  --p1-num: #FFFFFF;
}

html[data-livery="lola"] {
  --livery-primary: #003366;
  --livery-secondary: #FF6600;
  --livery-contrast: #FFFFFF;
  --livery-soft: color-mix(in srgb, #003366 14%, var(--bg));
  --livery-line: color-mix(in srgb, #003366 52%, var(--border));
  --p1-bg: color-mix(in srgb, #003366 14%, var(--bg));
  --p1-num: #003366;
}

html[data-livery="rial"] {
  --livery-primary: #333333;
  --livery-secondary: #CC0000;
  --livery-contrast: #FFFFFF;
  --livery-soft: color-mix(in srgb, #333333 14%, var(--bg));
  --livery-line: color-mix(in srgb, #333333 52%, var(--border));
  --p1-bg: color-mix(in srgb, #333333 14%, var(--bg));
  --p1-num: #333333;
}

html[data-livery="coloni"] {
  --livery-primary: #CC0000;
  --livery-secondary: #FFFFFF;
  --livery-contrast: #FFFFFF;
  --livery-soft: color-mix(in srgb, #CC0000 14%, var(--bg));
  --livery-line: color-mix(in srgb, #CC0000 52%, var(--border));
  --p1-bg: color-mix(in srgb, #CC0000 14%, var(--bg));
  --p1-num: #CC0000;
}

html[data-livery="fittipaldi"] {
  --livery-primary: #008000;
  --livery-secondary: #FFD700;
  --livery-contrast: #FFFFFF;
  --livery-soft: color-mix(in srgb, #008000 14%, var(--bg));
  --livery-line: color-mix(in srgb, #008000 52%, var(--border));
  --p1-bg: color-mix(in srgb, #008000 14%, var(--bg));
  --p1-num: #008000;
}

html[data-livery="surtees"] {
  --livery-primary: #C00000;
  --livery-secondary: #FFFFFF;
  --livery-contrast: #FFFFFF;
  --livery-soft: color-mix(in srgb, #C00000 14%, var(--bg));
  --livery-line: color-mix(in srgb, #C00000 52%, var(--border));
  --p1-bg: color-mix(in srgb, #C00000 14%, var(--bg));
  --p1-num: #C00000;
}

html[data-livery="marussia"] {
  --livery-primary: #CC0000;
  --livery-secondary: #FFFFFF;
  --livery-contrast: #FFFFFF;
  --livery-soft: color-mix(in srgb, #CC0000 14%, var(--bg));
  --livery-line: color-mix(in srgb, #CC0000 52%, var(--border));
  --p1-bg: color-mix(in srgb, #CC0000 14%, var(--bg));
  --p1-num: #CC0000;
}

html[data-livery="caterham"] {
  --livery-primary: #007F00;
  --livery-secondary: #000000;
  --livery-contrast: #FFFFFF;
  --livery-soft: color-mix(in srgb, #007F00 14%, var(--bg));
  --livery-line: color-mix(in srgb, #007F00 52%, var(--border));
  --p1-bg: color-mix(in srgb, #007F00 14%, var(--bg));
  --p1-num: #007F00;
}

html[data-livery="hrt"] {
  --livery-primary: #CCCCCC;
  --livery-secondary: #333333;
  --livery-contrast: #333333;
  --livery-soft: color-mix(in srgb, #CCCCCC 14%, var(--bg));
  --livery-line: color-mix(in srgb, #CCCCCC 52%, var(--border));
  --p1-bg: color-mix(in srgb, #CCCCCC 14%, var(--bg));
  --p1-num: #CCCCCC;
}

html[data-livery="talbot-lago"] {
  --livery-primary: #002B6E;
  --livery-secondary: #FFFFFF;
  --livery-contrast: #FFFFFF;
  --livery-soft: color-mix(in srgb, #002B6E 14%, var(--bg));
  --livery-line: color-mix(in srgb, #002B6E 52%, var(--border));
  --p1-bg: color-mix(in srgb, #002B6E 14%, var(--bg));
  --p1-num: #002B6E;
}


*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 16px;
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--bg);
  border-top: 3px solid var(--livery-primary);
  border-bottom: 1px solid var(--border);
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  padding: 0 var(--pad);
}
.nav__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.08em;
  font-family: 'Oswald', sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex-shrink: 0;
  color: var(--text);
}
.nav__logo::after {
  content: '';
  width: 22px;
  height: 3px;
  margin-left: 0.35rem;
  transform: skewX(-28deg);
  background: var(--livery-primary);
}
.nav__logo-f1 {
  color: var(--accent);
}
.nav__logo-aby {
  color: var(--text);
}
.nav__links { display: flex; gap: 2rem; list-style: none; flex-shrink: 0; }
.nav__links a {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.66rem; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--muted);
  transition: color 0.15s;
}
.nav__links a:hover, .nav__links a.active { color: var(--text); }
.nav__toggle {
  display: none;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  padding: 0.42rem 0.65rem;
}

.nav__game {
  color: var(--accent) !important;
  border: 1px solid var(--accent);
  padding: 0.22rem 0.5rem;
  letter-spacing: 0.1em;
  transition: background 0.15s, color 0.15s;
}
.nav__game:hover {
  background: var(--accent);
  color: var(--bg) !important;
}
.nav__status {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.6rem; color: var(--muted);
  letter-spacing: 0.1em; text-transform: uppercase;
  flex-shrink: 0;
}
.nav__status em { color: var(--accent); font-style: normal; }

.signal-strip {
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.signal-strip__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.25fr repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
}
.signal-card {
  background: var(--bg);
  padding: 1rem var(--pad);
  min-width: 0;
}
.signal-card__value {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 1.55rem;
  text-transform: uppercase;
  line-height: 1;
  margin-top: 0.3rem;
}
.signal-card__note {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.55;
  margin-top: 0.45rem;
}
.story-section {
  border-bottom: 1px solid var(--border);
}
.section-head {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 1.5rem var(--pad) 0.85rem;
  border-bottom: 1px solid var(--border);
}
.section-head__title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 1.9rem;
  text-transform: uppercase;
  line-height: 1;
}
.story-grid,
.archive-grid,
.character-grid {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--border);
  gap: 1px;
  border-bottom: 1px solid var(--border);
}
.story-card,
.archive-card,
.character-card {
  background: var(--bg);
  padding: 1.5rem var(--pad);
  border-top: 3px solid transparent;
}
.story-card--barry,
.character-card--barry { border-top-color: var(--barry); }
.story-card--gary,
.character-card--gary { border-top-color: var(--gary); }
.story-card--kat,
.character-card--kat { border-top-color: var(--kat); }
.story-card__title,
.archive-card__title,
.character-card__title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 1.35rem;
  text-transform: uppercase;
  line-height: 1;
  margin: 0.5rem 0 0.65rem;
}
.story-card__body,
.archive-card__body,
.character-card__body {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.65;
}
.character-card__media {
  margin: -1.5rem calc(var(--pad) * -1) 1.25rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.character-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.character-card--barry .character-card__media { border-bottom-color: var(--barry); }
.character-card--gary .character-card__media { border-bottom-color: var(--gary); }
.character-card--kat .character-card__media { border-bottom-color: var(--kat); }
.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.9rem;
}
.tag {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.56rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 0.15rem 0.4rem;
}
a.tag {
  transition: color 0.15s, border-color 0.15s;
}
a.tag:hover {
  color: var(--text);
  border-color: var(--muted);
}
.race-brief {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--border);
  gap: 1px;
  border-bottom: 1px solid var(--border);
  max-width: var(--max-w);
  margin: 0 auto;
  border-top: 3px solid var(--livery-primary);
}
.race-brief__item {
  background: var(--surface);
  padding: 1rem var(--pad);
}
.race-brief__item:first-child {
  background: var(--livery-soft);
}
.race-brief__value {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 1.35rem;
  text-transform: uppercase;
  line-height: 1;
  margin-top: 0.25rem;
}
.race-brief__note {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.5;
  margin-top: 0.45rem;
}
.impact-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--border);
  gap: 1px;
  border-bottom: 1px solid var(--border);
}
.impact-item {
  background: var(--bg);
  padding: 1.35rem var(--pad);
  border-top: 2px solid transparent;
}
.impact-item:first-child { border-top-color: var(--livery-primary); }
.impact-item__title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1;
  text-transform: uppercase;
  margin: 0.4rem 0 0.55rem;
}
.impact-item__body {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.65;
}
.turning-point {
  padding: 2rem var(--pad);
  border-bottom: 1px solid var(--border);
  background: var(--livery-soft);
  border-left: 3px solid var(--livery-primary);
}
.turning-point__inner {
  max-width: 68ch;
}
.turning-point__title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 1.7rem;
  text-transform: uppercase;
  line-height: 1;
  margin: 0.5rem 0 0.65rem;
}
.turning-point__body {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.75;
}
.related-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  background: var(--border);
  gap: 1px;
  border-bottom: 1px solid var(--border);
}
.related-card {
  background: var(--bg);
  padding: 1.2rem var(--pad);
  display: block;
}
.related-card:hover { background: var(--surface); }
.related-card__title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  text-transform: uppercase;
  line-height: 1;
  margin-top: 0.4rem;
}
.page-band {
  border-bottom: 1px solid var(--border);
}
.page-band__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 2.25rem var(--pad);
}
.split-panel {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 1px;
  background: var(--border);
  border-bottom: 1px solid var(--border);
}
.split-panel > * {
  background: var(--bg);
  padding: 2rem var(--pad);
}

.label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.63rem; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--muted);
}
.label--accent { color: var(--accent); }
html[data-livery] .race-hero .label--accent,
html[data-livery] .race-brief .label--accent,
html[data-livery] .impact-list .label--accent,
html[data-livery] .turning-point .label--accent,
html[data-livery] .breakdown__header .label--accent,
html[data-livery] .related-list .label--accent {
  color: var(--livery-primary);
}
.label--barry  { color: var(--barry); }
.label--gary   { color: var(--gary); }
.label--kat    { color: var(--kat); }

.hero {
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  position: relative;
}
.hero__inner {
  padding: 5rem var(--pad) 4.5rem;
  max-width: var(--max-w);
  margin: 0 auto;
  position: relative; z-index: 1;
}
.hero__kicker { margin-bottom: 1.25rem; }
.hero__title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700; text-transform: uppercase;
  font-size: clamp(4rem, 10vw, 8rem);
  line-height: 0.88; letter-spacing: -0.025em;
}
.hero__title em { color: var(--accent); font-style: normal; }
.hero__sub {
  color: var(--muted); margin-top: 1.5rem;
  max-width: 48ch; font-size: 1rem; line-height: 1.65;
}
.hero::after {
  content: 'F1';
  position: absolute; right: -2rem; top: 50%;
  transform: translateY(-50%);
  font-family: 'Oswald', sans-serif;
  font-weight: 700; font-size: 32vw;
  color: var(--ghost);
  line-height: 1; pointer-events: none;
  letter-spacing: -0.05em; z-index: 0;
  user-select: none;
}

.feature {
  border-bottom: 1px solid var(--border);
}
.feature__inner {
  display: grid;
  grid-template-columns: 3fr 2fr;
  max-width: var(--max-w);
  margin: 0 auto;
}
.feature__main {
  padding: 3rem var(--pad);
  border-right: 1px solid var(--border);
}
.feature__side { padding: 3rem var(--pad); }
.feature__kicker { margin-bottom: 0.85rem; }
.feature__title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700; text-transform: uppercase;
  font-size: clamp(2.25rem, 4vw, 3.75rem);
  line-height: 0.9; letter-spacing: -0.015em;
  margin-bottom: 1.25rem;
}
.feature__body {
  color: var(--muted); line-height: 1.8; font-size: 0.95rem;
  max-width: 55ch;
}
.feature__body + .feature__body { margin-top: 0.75rem; }
.feature__cta {
  display: inline-block; margin-top: 1.75rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--accent);
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
}
html[data-livery] .feature__cta {
  color: var(--livery-primary);
}

.standings { margin-bottom: 2rem; }
.standings__head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--border);
}
.standings__row {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center; gap: 0.75rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--border);
}
.standings__pos { font-family: 'IBM Plex Mono', monospace; font-size: 0.6rem; color: var(--muted); }
.standings__name { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.02em; }
.standings__team { display: block; font-family: 'IBM Plex Mono', monospace; font-size: 0.56rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.standings__pts { font-family: 'IBM Plex Mono', monospace; font-size: 0.82rem; color: var(--accent); }

/* Race result / qualifying tables — generated archive pages */
.result-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  margin-bottom: 2rem;
}
.result-table th {
  text-align: left;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.result-table td {
  padding: 0.35rem 0.6rem;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: middle;
}
.result-table tr[data-pos="winner"] td {
  color: var(--livery-primary, var(--accent));
  font-weight: 500;
}
.result-table tr:hover td { background: var(--surface); }

.grid-section { border-bottom: 1px solid var(--border); }
.grid-head {
  padding: 1.5rem var(--pad) 0.75rem;
  max-width: var(--max-w); margin: 0 auto;
  border-top: 1px solid var(--border);
}
.race-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: var(--max-w); margin: 0 auto;
  border-top: 1px solid var(--border);
}
.race-card {
  --card-livery: var(--accent);
  border-right: 1px solid var(--border);
  padding: 1.75rem var(--pad);
  display: block;
  transition: background 0.12s;
  position: relative;
}
.archive-card { --card-livery: var(--accent); }
.race-card[data-livery="ferrari"],
.archive-card[data-livery="ferrari"] { --card-livery: #DC0000; }
.race-card[data-livery="mclaren"],
.archive-card[data-livery="mclaren"] { --card-livery: #FF8000; }
.race-card[data-livery="williams"],
.archive-card[data-livery="williams"] { --card-livery: #005AFF; }
.race-card[data-livery="red-bull"],
.archive-card[data-livery="red-bull"] { --card-livery: #1E41FF; }
.race-card[data-livery="mercedes"],
.archive-card[data-livery="mercedes"] { --card-livery: #00D2BE; }
.race-card[data-livery="renault"],
.archive-card[data-livery="renault"] { --card-livery: #0090FF; }
.race-card[data-livery="aston-martin"],
.archive-card[data-livery="aston-martin"] { --card-livery: #006D40; }
.race-card[data-livery="racing-point"],
.archive-card[data-livery="racing-point"] { --card-livery: #F596C8; }
.race-card[data-livery="force-india"],
.archive-card[data-livery="force-india"] { --card-livery: #FF80CC; }
.race-card[data-livery="haas"],
.archive-card[data-livery="haas"] { --card-livery: #B6BABD; }
.race-card[data-livery="alpha-tauri"],
.archive-card[data-livery="alpha-tauri"] { --card-livery: #2B4562; }
.race-card[data-livery="toro-rosso"],
.archive-card[data-livery="toro-rosso"] { --card-livery: #C00000; }
.race-card[data-livery="sauber"],
.archive-card[data-livery="sauber"] { --card-livery: #52E252; }
.race-card[data-livery="benetton"],
.archive-card[data-livery="benetton"] { --card-livery: #009900; }
.race-card[data-livery="lotus"],
.archive-card[data-livery="lotus"] { --card-livery: #000000; }
.race-card[data-livery="brabham"],
.archive-card[data-livery="brabham"] { --card-livery: #006633; }
.race-card[data-livery="tyrrell"],
.archive-card[data-livery="tyrrell"] { --card-livery: #001489; }
.race-card[data-livery="jordan"],
.archive-card[data-livery="jordan"] { --card-livery: #FFC800; }
.race-card[data-livery="arrows"],
.archive-card[data-livery="arrows"] { --card-livery: #FF7700; }
.race-card[data-livery="minardi"],
.archive-card[data-livery="minardi"] { --card-livery: #1A3066; }
.race-card[data-livery="bar"],
.archive-card[data-livery="bar"] { --card-livery: #FFFFFF; }
.race-card[data-livery="honda-racing"],
.archive-card[data-livery="honda-racing"] { --card-livery: #FFFFFF; }
.race-card[data-livery="brawn"],
.archive-card[data-livery="brawn"] { --card-livery: #FFFFFF; }
.race-card[data-livery="jaguar"],
.archive-card[data-livery="jaguar"] { --card-livery: #006600; }
.race-card[data-livery="stewart"],
.archive-card[data-livery="stewart"] { --card-livery: #FFFFFF; }
.race-card[data-livery="toyota"],
.archive-card[data-livery="toyota"] { --card-livery: #CC0000; }
.race-card[data-livery="prost"],
.archive-card[data-livery="prost"] { --card-livery: #0000AA; }
.race-card[data-livery="ligier"],
.archive-card[data-livery="ligier"] { --card-livery: #0050A0; }
.race-card[data-livery="cooper"],
.archive-card[data-livery="cooper"] { --card-livery: #006633; }
.race-card[data-livery="brm"],
.archive-card[data-livery="brm"] { --card-livery: #1A6B3C; }
.race-card[data-livery="matra"],
.archive-card[data-livery="matra"] { --card-livery: #004499; }
.race-card[data-livery="march"],
.archive-card[data-livery="march"] { --card-livery: #FF6600; }
.race-card[data-livery="shadow"],
.archive-card[data-livery="shadow"] { --card-livery: #111111; }
.race-card[data-livery="wolf"],
.archive-card[data-livery="wolf"] { --card-livery: #FFFFFF; }
.race-card[data-livery="hesketh"],
.archive-card[data-livery="hesketh"] { --card-livery: #FFFFFF; }
.race-card[data-livery="toleman"],
.archive-card[data-livery="toleman"] { --card-livery: #003399; }
.race-card[data-livery="vanwall"],
.archive-card[data-livery="vanwall"] { --card-livery: #1A6B3C; }
.race-card[data-livery="lancia"],
.archive-card[data-livery="lancia"] { --card-livery: #B82800; }
.race-card[data-livery="maserati"],
.archive-card[data-livery="maserati"] { --card-livery: #B30000; }
.race-card[data-livery="alfa-romeo"],
.archive-card[data-livery="alfa-romeo"] { --card-livery: #C62B2B; }
.race-card[data-livery="spyker"],
.archive-card[data-livery="spyker"] { --card-livery: #FF6600; }
.race-card[data-livery="super-aguri"],
.archive-card[data-livery="super-aguri"] { --card-livery: #FFFFFF; }
.race-card[data-livery="osella"],
.archive-card[data-livery="osella"] { --card-livery: #0033CC; }
.race-card[data-livery="zakspeed"],
.archive-card[data-livery="zakspeed"] { --card-livery: #1C1C1C; }
.race-card[data-livery="ags"],
.archive-card[data-livery="ags"] { --card-livery: #0066CC; }
.race-card[data-livery="larrousse"],
.archive-card[data-livery="larrousse"] { --card-livery: #001166; }
.race-card[data-livery="leyton-house"],
.archive-card[data-livery="leyton-house"] { --card-livery: #0099CC; }
.race-card[data-livery="dallara"],
.archive-card[data-livery="dallara"] { --card-livery: #003399; }
.race-card[data-livery="arrows-footwork"],
.archive-card[data-livery="arrows-footwork"] { --card-livery: #FF7700; }
.race-card[data-livery="andrea-moda"],
.archive-card[data-livery="andrea-moda"] { --card-livery: #CC0000; }
.race-card[data-livery="simtek"],
.archive-card[data-livery="simtek"] { --card-livery: #CC0000; }
.race-card[data-livery="forti"],
.archive-card[data-livery="forti"] { --card-livery: #CC0033; }
.race-card[data-livery="pacific"],
.archive-card[data-livery="pacific"] { --card-livery: #FFFFFF; }
.race-card[data-livery="ats"],
.archive-card[data-livery="ats"] { --card-livery: #CC0000; }
.race-card[data-livery="ensign"],
.archive-card[data-livery="ensign"] { --card-livery: #0000FF; }
.race-card[data-livery="honda-classic"],
.archive-card[data-livery="honda-classic"] { --card-livery: #FFFFFF; }
.race-card[data-livery="lola"],
.archive-card[data-livery="lola"] { --card-livery: #003366; }
.race-card[data-livery="rial"],
.archive-card[data-livery="rial"] { --card-livery: #333333; }
.race-card[data-livery="coloni"],
.archive-card[data-livery="coloni"] { --card-livery: #CC0000; }
.race-card[data-livery="fittipaldi"],
.archive-card[data-livery="fittipaldi"] { --card-livery: #008000; }
.race-card[data-livery="surtees"],
.archive-card[data-livery="surtees"] { --card-livery: #C00000; }
.race-card[data-livery="marussia"],
.archive-card[data-livery="marussia"] { --card-livery: #CC0000; }
.race-card[data-livery="caterham"],
.archive-card[data-livery="caterham"] { --card-livery: #007F00; }
.race-card[data-livery="hrt"],
.archive-card[data-livery="hrt"] { --card-livery: #CCCCCC; }
.race-card[data-livery="talbot-lago"],
.archive-card[data-livery="talbot-lago"] { --card-livery: #002B6E; }
.archive-card[data-livery] { border-top-color: var(--card-livery); }
.race-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--card-livery);
  opacity: 0;
  transition: opacity 0.15s;
}
.race-card:first-child::before { opacity: 1; }
.race-card:last-child { border-right: none; }
.race-card:hover { background: var(--surface); }
.race-card:hover::before { opacity: 0.5; }
.race-card__round { margin-bottom: 0.5rem; }
.race-card__title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700; font-size: 1.5rem;
  text-transform: uppercase; line-height: 0.95;
  margin-bottom: 0.8rem;
}
.race-card__winner { margin-bottom: 0.35rem; }

.back {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.63rem; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--muted);
  padding: 0.85rem var(--pad);
  border-bottom: 1px solid var(--border);
  transition: color 0.15s;
}
.back:hover { color: var(--text); }

.race-hero {
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  position: relative;
}
.race-hero::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--livery-primary), var(--livery-secondary));
  z-index: 2;
}
.race-hero__inner {
  padding: 4rem var(--pad) 3.5rem;
  max-width: var(--max-w); margin: 0 auto;
  position: relative; z-index: 1;
}
.race-hero__kicker { margin-bottom: 1rem; }
.race-hero__title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700; text-transform: uppercase;
  font-size: clamp(2.75rem, 7vw, 5.5rem);
  line-height: 0.88; letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}
.race-hero__title em,
.race-hero .label--accent {
  color: var(--livery-primary);
}
.race-hero__summary {
  color: var(--muted); font-size: 1rem;
  max-width: 58ch; line-height: 1.75;
}
.race-hero::after {
  content: attr(data-round);
  position: absolute; right: -1rem; top: 50%;
  transform: translateY(-50%);
  font-family: 'Oswald', sans-serif;
  font-weight: 700; font-size: 40vw;
  color: var(--ghost);
  line-height: 0.8; pointer-events: none;
  letter-spacing: -0.05em; z-index: 0;
  user-select: none;
}

.race-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  max-width: var(--max-w);
  margin: 0 auto;
  border-bottom: 1px solid var(--border);
}
.race-layout__main {
  border-right: 1px solid var(--border);
  min-width: 0;
}
.race-layout__side {
  position: sticky;
  top: var(--nav-h);
  align-self: start;
  max-height: calc(100vh - var(--nav-h));
  overflow-y: auto;
}

.podium {
  display: grid; grid-template-columns: 1fr;
  background: var(--border); gap: 1px;
  border-bottom: 1px solid var(--border);
}
.podium__slot {
  background: var(--surface);
  padding: 1.25rem 1.5rem;
  border-left: 3px solid transparent;
}
.podium__slot--p1 {
  background: var(--p1-bg);
  border-left-color: var(--livery-primary);
}
.podium__slot--p2 { border-left-color: #999; }
.podium__slot--p3 { border-left-color: #A07040; }
.podium__num {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.6rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.12em;
  margin-bottom: 0.35rem;
}
.podium__slot--p1 .podium__num { color: var(--p1-num); }
.podium__driver {
  font-family: 'Oswald', sans-serif;
  font-weight: 700; font-size: 1.75rem;
  text-transform: uppercase; line-height: 1;
  margin-bottom: 0.2rem;
}
.podium__team {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.6rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.podium__gap {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.65rem; color: var(--muted); margin-top: 0.4rem;
}

.race-stats {
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--border); gap: 1px;
  border-bottom: 1px solid var(--border);
}

.sidebar-related {
  padding: 1.1rem 1.25rem;
  border-top: 1px solid var(--border);
}
.sidebar-related + .sidebar-related {
  border-top: 1px solid var(--border);
}
.sidebar-related__label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.56rem; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--muted);
  margin-bottom: 0.6rem;
}
.related-mini {
  display: flex; align-items: baseline; gap: 0.6rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none; color: var(--text);
}
.related-mini:last-child { border-bottom: none; }
.related-mini:hover .related-mini__name { color: var(--accent); }
.related-mini__year {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.62rem; color: var(--muted); flex-shrink: 0;
}
.related-mini__name {
  font-family: 'Oswald', sans-serif;
  font-weight: 600; font-size: 0.82rem;
  text-transform: uppercase; letter-spacing: 0.03em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.race-stat { background: var(--surface); padding: 1rem 1.25rem; }
.race-stat__key {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.56rem; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--muted); margin-bottom: 0.3rem;
}
.race-stat__val {
  font-family: 'Oswald', sans-serif;
  font-weight: 700; font-size: 1.1rem;
  text-transform: uppercase;
}
.report {
  padding: 2.5rem var(--pad);
  border-bottom: 1px solid var(--border);
}
.report p { color: var(--muted); line-height: 1.8; font-size: 0.95rem; max-width: 60ch; }
.report p + p { margin-top: 1rem; }
.report .hl { color: var(--text); }

.breakdown__header {
  padding: 1.5rem var(--pad) 1.1rem;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: baseline; gap: 1.25rem;
}
.breakdown__title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700; font-size: 1.5rem;
  text-transform: uppercase; letter-spacing: 0.02em;
}

.seg {
  padding: 2rem var(--pad) 2rem calc(var(--pad) + 3px);
  border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent;
}
.seg--barry { border-left-color: var(--barry); }
.seg--gary  { border-left-color: var(--gary); }
.seg--kat   { border-left-color: var(--kat); }

.verdict-banner {
  padding: 2.5rem var(--pad);
  background: var(--surface);
  border-top: 3px solid var(--accent);
  border-bottom: 1px solid var(--border);
}
.verdict-banner__text {
  font-family: 'Oswald', sans-serif;
  font-weight: 700; font-size: clamp(1.1rem, 3vw, 1.6rem);
  text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--accent); line-height: 1.3;
  max-width: 70ch; margin-bottom: 0.75rem;
}
.verdict-banner__note {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.6rem; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--muted);
}

.tag-section {
  padding: 1.25rem var(--pad);
  border-bottom: 1px solid var(--border);
}

.seg__who {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.63rem; text-transform: uppercase;
  letter-spacing: 0.14em; margin-bottom: 0.85rem;
  display: flex; align-items: center; gap: 0.85rem;
}
.seg__who::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  flex-shrink: 0;
}
.seg--barry .seg__who::before { background: var(--barry); }
.seg--gary  .seg__who::before { background: var(--gary); }
.seg--kat   .seg__who::before { background: var(--kat); }

.seg__who::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.seg--barry .seg__who { color: var(--barry); }
.seg--gary  .seg__who { color: var(--gary); }
.seg--kat   .seg__who { color: var(--kat); }

.seg__text { font-size: 0.95rem; line-height: 1.8; color: var(--muted); max-width: 60ch; }
.seg__text + .seg__text { margin-top: 1rem; }
.seg__text .hl { color: var(--text); }

.footer {
  border-top: 1px solid var(--border);
  padding: 1.5rem var(--pad);
  display: flex; justify-content: space-between;
  align-items: center; flex-wrap: wrap; gap: 1rem;
}
.footer__logo {
  font-family: 'Oswald', sans-serif;
  font-weight: 700; font-size: 1.1rem;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--accent);
}
.footer__copy { font-family: 'IBM Plex Mono', monospace; font-size: 0.58rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; }
.footer__links { display: flex; gap: 2rem; list-style: none; }
.footer__links a { font-family: 'IBM Plex Mono', monospace; font-size: 0.58rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; transition: color 0.15s; }
.footer__links a:hover { color: var(--text); }

/* ---- HISTORY SLIDER ---- */
.hist-section {
  border-bottom: 1px solid var(--border);
}
.hist-head {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 1.5rem var(--pad) 0.85rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
}
.hist-head__meta { flex: 1; min-width: 0; }
.hist-head__title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 1.9rem;
  text-transform: uppercase;
  line-height: 1;
  margin-top: 0.4rem;
}
.hist-head__sub {
  color: var(--muted);
  font-size: 0.82rem;
  margin-top: 0.45rem;
}
.hist-controls {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  padding-bottom: 0.1rem;
}
.hist-btn {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.8rem;
  line-height: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--muted);
  cursor: pointer;
  padding: 0.38rem 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: border-color 0.15s, color 0.15s;
}
.hist-btn:hover { border-color: var(--text); color: var(--text); }
.hist-btn:disabled { opacity: 0.28; cursor: default; pointer-events: none; }
.hist-btn--accent:hover { border-color: var(--accent); color: var(--accent); }
.hist-track-wrap {
  overflow-x: auto;
  scrollbar-width: none;
  border-top: 1px solid var(--border);
}
.hist-track-wrap::-webkit-scrollbar { display: none; }
.hist-track {
  display: flex;
  gap: 1px;
  background: var(--border);
  min-width: min-content;
}
.hist-card {
  --hist-livery: var(--accent);
  display: block;
  flex-shrink: 0;
  width: 270px;
  background: var(--bg);
  padding: 1.75rem 1.5rem 1.5rem;
  border-top: 2px solid var(--hist-livery);
  position: relative;
  transition: background 0.12s;
}
.hist-card:hover { background: var(--surface); }
.hist-card__bg-year {
  position: absolute;
  right: 1rem;
  top: 0.75rem;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 3.5rem;
  line-height: 1;
  color: var(--hist-livery);
  opacity: 0.1;
  pointer-events: none;
  user-select: none;
}
.hist-card__round { margin-bottom: 0.5rem; }
.hist-card__circuit {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 0.65rem;
}
.hist-card__winner {
  color: var(--hist-livery);
  margin-bottom: 0.2rem;
}

/* ---- PUNDIT FLAVOURS ---- */
.flavour-section {
  padding: 4rem var(--pad) 0;
  border-bottom: 1px solid var(--border);
}

.flavour-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin-top: 2rem;
}
.flavour-tab {
  background: var(--surface);
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: background 0.15s;
}
.flavour-tab:hover { background: var(--bg); }
.flavour-tab.is-active { background: var(--bg); }
.flavour-tab--barry.is-active { box-shadow: inset 0 3px 0 0 var(--barry); }
.flavour-tab--gary.is-active  { box-shadow: inset 0 3px 0 0 var(--gary); }
.flavour-tab--kat.is-active   { box-shadow: inset 0 3px 0 0 var(--kat); }

.flavour-tab__portrait-wrap {
  width: 100%;
  height: 180px;
  overflow: hidden;
}
.flavour-tab__portrait {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  filter: grayscale(65%) brightness(0.85);
  transition: filter 0.2s;
}
.flavour-tab.is-active .flavour-tab__portrait,
.flavour-tab:hover .flavour-tab__portrait { filter: none; }

.flavour-tab__info {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.flavour-tab__name {
  display: block;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
}
.flavour-tab--barry .flavour-tab__name { color: var(--barry); }
.flavour-tab--gary  .flavour-tab__name { color: var(--gary); }
.flavour-tab--kat   .flavour-tab__name { color: var(--kat); }
.flavour-tab__age {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}
.flavour-tab__hook {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.5;
  margin: 0.2rem 0 0;
}

.flavour-panel {
  display: none;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-top: none;
}
.flavour-panel.is-active { display: grid; }

.flavour-item {
  display: block;
  background: var(--surface);
  padding: 1.5rem;
  text-decoration: none;
  color: var(--text);
  transition: background 0.15s;
}
.flavour-item:hover { background: var(--bg); }

.flavour-item__type {
  display: block;
  margin-bottom: 0.65rem;
}
#flavour-panel-barry .flavour-item__type { color: var(--barry); }
#flavour-panel-gary  .flavour-item__type { color: var(--gary); }
#flavour-panel-kat   .flavour-item__type { color: var(--kat); }

.flavour-item__title {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.2;
  margin-bottom: 0.6rem;
  color: var(--text);
}
.flavour-item__body {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.65;
  margin: 0;
}

@media (max-width: 1024px) {
  .nav { gap: 1rem; }
  .nav__links { gap: 1.25rem; }
  .nav__status { display: none; }
  .feature__inner { grid-template-columns: 1fr; }
  .feature__main  { border-right: none; border-bottom: 1px solid var(--border); }
  .signal-strip__inner { grid-template-columns: 1fr 1fr; }
  .story-grid,
  .archive-grid,
  .character-grid { grid-template-columns: 1fr 1fr; }
  .race-brief,
  .impact-list { grid-template-columns: 1fr 1fr; }
  .split-panel { grid-template-columns: 1fr; }
  .race-grid { grid-template-columns: 1fr 1fr; }
  .race-card:nth-child(2n) { border-right: none; }
  .race-card:nth-child(2n+1) { border-right: 1px solid var(--border); }
  .flavour-panel.is-active { grid-template-columns: repeat(2, 1fr); }
  .race-layout { grid-template-columns: 1fr; }
  .race-layout__main { border-right: none; }
  .race-layout__side {
    position: static; max-height: none;
    border-top: 1px solid var(--border);
  }
  .race-layout__side .podium { grid-template-columns: repeat(3, 1fr); }
  .race-layout__side .race-stats { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 640px) {
  :root { --pad: 1.25rem; }
  body.nav-open { overflow: hidden; }
  .nav {
    height: auto;
    min-height: var(--nav-h);
    flex-wrap: wrap;
    align-content: center;
    gap: 0.65rem;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
  }
  .nav__toggle {
    display: block;
    margin-left: auto;
  }
  .nav__links {
    display: none;
    width: 100%;
    margin-left: 0;
  }
  .nav.is-open .nav__links {
    display: flex;
  }
  .nav__links {
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--border);
    padding-top: 0.45rem;
  }
  .nav__links a {
    display: block;
    padding: 0.6rem 0;
    font-size: 0.72rem;
  }
  .hero__inner { padding: 3rem var(--pad) 3rem; }
  .hero__title { font-size: clamp(3.35rem, 16vw, 4.4rem); }
  .race-hero__inner { padding: 3rem var(--pad) 2.75rem; }
  .race-hero__title { font-size: clamp(2.65rem, 13vw, 3.5rem); }
  .signal-strip__inner,
  .story-grid,
  .archive-grid,
  .character-grid,
  .race-brief,
  .impact-list,
  .related-list { grid-template-columns: 1fr; }
  .signal-card,
  .story-card,
  .archive-card,
  .character-card,
  .race-brief__item,
  .impact-item,
  .related-card { padding: 1.15rem var(--pad); }
  .section-head { padding-top: 1.25rem; }
  .section-head__title { font-size: 1.55rem; }
  .race-grid { grid-template-columns: 1fr; }
  .race-card { border-right: none !important; border-bottom: 1px solid var(--border); }
  .race-layout__side .podium { grid-template-columns: 1fr; }
  .race-layout__side .race-stats { grid-template-columns: 1fr 1fr; }
  .footer { align-items: flex-start; }
  .footer__links { width: 100%; gap: 1rem; flex-wrap: wrap; }
  .hist-head { flex-direction: column; align-items: flex-start; gap: 0.65rem; }
  .hist-controls { align-self: flex-start; }
  .hist-card { width: 220px; padding: 1.35rem 1.15rem 1.15rem; }
  .hist-card__bg-year { font-size: 2.75rem; }
  .hist-card__circuit { font-size: 1.2rem; }
  .flavour-tabs { grid-template-columns: 1fr; }
  .flavour-tab__portrait-wrap { height: 110px; }
  .flavour-tab__info { padding: 1rem; }
  .flavour-panel.is-active { grid-template-columns: 1fr; }
}