:root{
  --concrete:#E4E6E8;      /* pit-lane page */
  --asphalt:#1E2227;       /* timing tower */
  --asphalt-2:#2A2F35;
  --chalk:#F7F8F8;         /* text on asphalt */
  --ink:#16191C;           /* text on concrete */
  --muted:#5C646C;
  --kerb:#E2231A;          /* kerb red: the one bold accent */
  --line:#C9CDD1;
  --up:#1F9D55; --down:#D23A2E;
  --r:10px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--concrete);color:var(--ink);font:400 17px/1.55 Barlow,system-ui,sans-serif}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
a{color:inherit}
:focus-visible{outline:3px solid var(--kerb);outline-offset:2px}

/* Kerb stripe */
.kerb{height:10px;background:repeating-linear-gradient(90deg,var(--kerb) 0 28px,#fff 28px 56px)}

.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:18px;padding-bottom:6px}
.mark{display:flex;align-items:center;gap:8px;text-decoration:none;font:800 24px/1 "Barlow Condensed",sans-serif;letter-spacing:.01em}
.mark svg{width:24px;height:24px;fill:var(--kerb)}
.status{margin:0;font:500 14px/1.3 "Barlow Condensed",sans-serif;color:var(--muted);text-align:right}
.status .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--up);margin-right:6px;vertical-align:1px}

/* Hero */
.hero{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;padding:18px 0 28px;align-items:start}
h1{font:800 clamp(34px,5.4vw,58px)/.98 "Barlow Condensed",sans-serif;margin:8px 0 10px;letter-spacing:-.005em;max-width:16ch}
.sub{margin:0 0 18px;color:var(--muted);max-width:56ch}
.legend{font-size:14px;color:var(--muted);margin:10px 0 0}

/* Overtake banner */
.overtake{background:var(--kerb);color:#fff;border-radius:var(--r);padding:10px 14px;margin:0 0 12px;font:600 18px/1.3 "Barlow Condensed",sans-serif}

/* Timing tower */
.tower{list-style:none;margin:0;padding:6px;background:var(--asphalt);border-radius:14px;color:var(--chalk)}
.row{border-radius:8px}
.row+.row{margin-top:2px}
.row>button{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:grid;grid-template-columns:40px 6px 1fr auto 84px 56px;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;font-family:"Barlow Condensed",sans-serif}
.row>button:hover{background:var(--asphalt-2)}
.row[aria-expanded=true]>button,.row.open>button{background:var(--asphalt-2)}
.pos{font:700 22px/1 "Barlow Condensed",sans-serif;text-align:center;color:#9AA3AB}
.row:first-child .pos{color:#fff}
.livery{height:28px;border-radius:2px}
.name{font:700 22px/1.1 "Barlow Condensed",sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.name small{font:500 14px/1 Barlow,sans-serif;color:#9AA3AB;margin-left:8px}
.pts{font:700 24px/1 "Barlow Condensed",sans-serif;font-variant-numeric:tabular-nums;text-align:right}
.gap{font:600 17px/1 "Barlow Condensed",sans-serif;font-variant-numeric:tabular-nums;color:#B8C0C7;text-align:right}
.trend{font:600 16px/1 "Barlow Condensed",sans-serif;text-align:right;font-variant-numeric:tabular-nums}
.trend.up{color:#4ADE80}.trend.down{color:#FF7A70}.trend.flat{color:#7D868E}
.meters{padding:4px 12px 14px 70px;display:grid;gap:10px}
.meters[hidden]{display:none}
.meter{display:grid;grid-template-columns:110px 1fr 64px;gap:12px;align-items:center;font-size:15px}
.meter .bar{height:10px;background:#3A4047;border-radius:5px;overflow:hidden}
.meter .bar i{display:block;height:100%;border-radius:5px}
.meter .val{text-align:right;font:600 15px/1 "Barlow Condensed",sans-serif;color:#C9D0D6}
.meter .lab{color:#C9D0D6}
.raw{grid-column:1/-1;font-size:13px;color:#9AA3AB;margin-top:2px}
.skeleton{padding:22px;color:#9AA3AB;font-family:"Barlow Condensed",sans-serif;font-size:20px}

/* Leader panel */
.flag{background:#fff;border-radius:14px;padding:20px;position:sticky;top:16px;border:1px solid var(--line)}
.flag-label{margin:0;color:var(--muted);font-size:15px}
.leader{margin:2px 0 4px;font:800 44px/1 "Barlow Condensed",sans-serif;border-left:8px solid var(--kerb);padding-left:12px}
.lead-by{margin:0 0 18px;font-size:16px}
.countdown{border-top:1px solid var(--line);padding-top:14px}
.clock{margin:2px 0 4px;font:700 34px/1 "Barlow Condensed",sans-serif;font-variant-numeric:tabular-nums}
.flag-note{margin:0;font-size:14px;color:var(--muted)}
.share{margin-top:18px;width:100%;border:0;border-radius:999px;background:var(--asphalt);color:#fff;font:600 18px/1 "Barlow Condensed",sans-serif;padding:13px 16px;cursor:pointer}
.share:hover{background:#000}

/* Sections */
.block{padding:30px 0 6px}
h2{font:800 32px/1.05 "Barlow Condensed",sans-serif;margin:0 0 6px}
.block-sub{margin:0 0 16px;color:var(--muted);max-width:64ch}
.chart{background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 6px 4px}
.chart svg{display:block;width:100%;height:auto}
.chart-key{list-style:none;padding:0;margin:10px 0 0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:15px}
.chart-key i{display:inline-block;width:14px;height:4px;border-radius:2px;margin-right:6px;vertical-align:4px}

.blocs{display:grid;gap:14px}
.bloc-row{display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:center}
.bloc-row b{font:700 18px/1 "Barlow Condensed",sans-serif}
.tug{display:flex;height:34px;border-radius:8px;overflow:hidden;background:#fff;border:1px solid var(--line)}
.tug span{display:flex;align-items:center;padding:0 10px;font:600 15px/1 "Barlow Condensed",sans-serif;color:#fff;white-space:nowrap;min-width:0;overflow:hidden}
.tug .US{background:#2F4B8F}.tug .CN{background:#C8382C}.tug .EU{background:#2E8B6E}

.how dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin:8px 0 16px}
.how dt{font:700 20px/1.1 "Barlow Condensed",sans-serif;margin-bottom:4px}
.how dd{margin:0;color:var(--muted);font-size:16px}
.how p{max-width:72ch}
.sources{font-size:15px;color:var(--muted)}

/* Ad slots */
.ad{margin:22px auto;display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(135deg,#d9dcdf 0 10px,#dfe2e5 10px 20px);border-radius:8px;color:#7D868E;font-size:12px}
.ad-wide{max-width:728px;height:90px}
.ad-box{max-width:336px;height:280px}

.foot{display:flex;justify-content:space-between;gap:16px;padding-top:30px;padding-bottom:40px;color:var(--muted);font-size:14px;border-top:1px solid var(--line);margin-top:30px}

@media (max-width:860px){
  .hero{grid-template-columns:1fr}
  .flag{position:static}
}
@media (max-width:560px){
  body{font-size:16px}
  .row>button{grid-template-columns:28px 5px 1fr auto 52px;gap:8px;padding:9px 8px}
  .gap{display:none}
  .name{font-size:19px}.name small{display:none}
  .pts{font-size:21px}
  .meters{padding:2px 8px 12px 8px}
  .meter{grid-template-columns:86px 1fr 52px;gap:8px}
  .bloc-row{grid-template-columns:1fr}
  .ad-wide{height:60px}
}
@media (prefers-reduced-motion:no-preference){
  .meter .bar i{transition:width .6s ease}
}