:root{
  --bg-elevated:#151320;
  --bg-elevated-2:#1c1a2a;
  --line:#2a2738;
  --maroon:#82003f;
  --maroon-deep:#4c0025;
  --maroon-glow:rgba(130,0,63,.55);
  --ice:#c4e0ff;
  --ice-dim:#6f8cb0;
  --gold:#f2c14e;
  --silver:#c9ced6;
  --bronze:#d98a4a;
  --text:#f4f2f7;
  --text-dim:#9691a6;
  --text-faint:#615c73;
  --text-on-maroon:#c2bcd0;
  --font-display:'Rajdhani',sans-serif;
  --font-body:'Inter',sans-serif;
  --font-mono:'JetBrains Mono',monospace;

  --fan-a0:8deg;
  --rip-depth:490px;
  --fan-h0:calc(1120px + 7.1vw);
  --panel-top:max(180px, calc(7.1vw + 60px));
  /* left edge of the centred content column, so decoration can follow the logo
     instead of the viewport edge */
  --gutter:max(1.5rem, calc((100vw - 1440px) / 2));
  --sprite:url('../../GFX/brands_sprite.png');
}

*{box-sizing:border-box;margin:0;padding:0;}

.white{color:#fff;}

body{
  background:var(--maroon-deep);
  color:var(--text);
  font-family:var(--font-body);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
}

.page{position:relative;}

.page-panel-dark,
.page-panel-ripped{
  position:absolute;
  top:calc(-1 * var(--panel-top));
  left:0;
  right:0;
  pointer-events:none;
}

.page-panel-dark{
  height:calc(var(--fan-h0) + var(--panel-top) - 180px);
  background:#000;
  transform:skewY(calc(-1 * var(--fan-a0)));
  overflow:hidden;
  z-index:-1;
}

/* The glow lives on the panel again, but anchored to the top of the page rather
   than the panel's own top — that corner is far off-screen on wide viewports. */
.page-panel-dark::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:calc(var(--panel-top) - 7.1vw - 70px);
  height:calc(640px + 7.1vw);
  background:
    radial-gradient(1000px 620px at calc(var(--gutter) + 170px) 30%, rgba(130,0,63,.22), rgba(130,0,63,0) 62%),
    linear-gradient(180deg, rgba(21,17,31,.85) 0%, rgba(21,17,31,0) 100%);
}

.page-panel-ripped{
  height:calc(var(--fan-h0) + var(--rip-depth) + var(--panel-top) - 180px);
  background:url('../../GFX/backgrounds/ripped.png') center bottom repeat-x;
  transform:skewY(calc(-1 * var(--fan-a0)));
  z-index:-2;
}

.hero{
  position:relative;
  padding:2.5rem max(1.5rem, env(safe-area-inset-right)) 1.5rem max(1.5rem, env(safe-area-inset-left));
}

.hero-inner{
  position:relative;
  z-index:1;
  max-width:1440px;
  margin:0 auto;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:2rem;
  flex-wrap:wrap;
}

.brand{
  display:flex;
  align-items:center;
  gap:.9rem;
}

.brand-logo{
  width:340px;
  height:auto;
  flex-shrink:0;
}

.brand-logo path{
  fill:url(#drgnSwoosh);
  filter:drop-shadow(0 4px 18px #000);
}

.status-chip{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.4rem .85rem;
  border-radius:100px;
  background:rgba(88,88,88,.5);
  border:1px solid rgba(88,88,88,.6);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#c2bcd0;
}

.status-dot{
  width:7px;height:7px;border-radius:50%;
  background:#5fff00;
  box-shadow:0 0 8px rgba(95,255,0,.55);
}

.status-dot.is-offline{
  background:#ff6f96;
  box-shadow:0 0 8px rgba(255,111,150,.55);
}

.hero-title{
  position:relative;
  z-index:1;
  max-width:1440px;
  margin:2.4rem auto 0;
  text-align:left;
}

.hero-text {
  line-height: 1.5rem;
}

/* same treatment as the CIRCUIT label, a size up */
.hero-title .hero-eyebrow{
  margin-top:0;
  margin-bottom:.55rem;
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-dim);
}

.hero-title h1{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(2.6rem, 7vw, 5.2rem);
  line-height:.92;
  letter-spacing:-.01em;
  text-transform:uppercase;
  text-wrap:balance;
}

.hero-title h1 em{
  font-style:normal;
  color:#ffffff;
}

.hero-title p{
  margin-top:.85rem;
  font-size:1rem;
  color:#c2bcd0;
  text-shadow:0 1px 3px rgba(0,0,0,.55);
  max-width:96ch;
}

.controls{
  position:sticky;
  top:0;
  z-index:5;
  padding:1rem max(1.5rem, env(safe-area-inset-right)) 1rem max(1.5rem, env(safe-area-inset-left));
  border-bottom:1px solid transparent;
  transition:background .2s ease, border-color .2s ease;
}

.controls.is-stuck{
  background:rgba(45,4,25,.88);
  backdrop-filter:blur(10px);
  border-bottom-color:var(--line);
}

.controls-sentinel{height:1px;}

.controls-inner{
  max-width:1440px;
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:1.25rem;
  flex-wrap:wrap;
}

.circuit-select{
  display:flex;
  align-items:center;
  gap:.6rem;
}

.circuit-select label{
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-on-maroon);
}

.circuit-select select{
  appearance:none;
  background:var(--bg-elevated);
  border:1px solid var(--line);
  color:var(--text);
  font-family:var(--font-display);
  font-weight:600;
  font-size:.95rem;
  letter-spacing:.02em;
  padding:.55rem 2.2rem .55rem .9rem;
  border-radius:8px;
  cursor:pointer;
  background-image:linear-gradient(45deg, transparent 50%, var(--ice) 50%), linear-gradient(135deg, var(--ice) 50%, transparent 50%);
  background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  scrollbar-width:none;
}

.circuit-select select::-webkit-scrollbar{
  display:none;
}

.circuit-select select:focus-visible{
  outline:1px solid var(--text-faint);
  outline-offset:2px;
}

.class-tabs{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  margin-left:auto;
}

.class-tab{
  display:inline-block;
  font-family:var(--font-display);
  font-weight:600;
  font-size:.85rem;
  letter-spacing:.05em;
  padding:.55rem 1.1rem;
  border-radius:8px;
  border:1px solid var(--line);
  background:var(--bg-elevated);
  color:var(--text-dim);
  text-decoration:none;
  cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.class-tab:hover{color:var(--text);border-color:var(--ice-dim);}

.class-tab.is-disabled{
  opacity:.4;
  cursor:default;
}

.class-tab.is-disabled:hover{color:var(--text-dim);border-color:var(--line);}

.class-tab:focus-visible{outline:1px solid var(--text-faint);outline-offset:2px;}

.class-tab.active{
  background:linear-gradient(135deg, var(--maroon) 0%, var(--maroon-deep) 100%);
  border-color:var(--maroon);
  color:#fff;
  box-shadow:0 4px 16px var(--maroon-glow);
}

main{
  max-width:calc(1440px + 3rem);
  margin:0 auto;
  padding:1.5rem max(1.5rem, env(safe-area-inset-right)) 4rem max(1.5rem, env(safe-area-inset-left));
}

.board{
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  background:var(--bg-elevated);
  opacity: 0.97;
}

.board-empty td{
  padding:2.25rem 1rem;
  text-align:center;
  color:var(--text-faint);
  font-size:.9rem;
}

.board-wrap{overflow-x:auto;}

.board-pagination{
  display:flex;
  justify-content:flex-end;
  gap:.5rem;
  padding:.85rem 1rem;
  border-top:1px solid var(--line);
}

.board-pagination .class-tab{padding:.4rem .8rem;font-size:.8rem;}

table{
  width:100%;
  border-collapse:collapse;
  min-width:820px;
}

thead th{
  text-align:left;
  font-size:.68rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-faint);
  font-weight:600;
  padding:.9rem 1rem;
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}

th.num, td.num{text-align:right;}
th.sector, td.sector{text-align:center;}
th.lap, td.lap{text-align:left;}


/* below 860px the challenge tile stacks under the photo, so the page is much
   taller above the board and the black band has to run further down */
@media (max-width:860px){
  :root{--fan-h0:calc(1360px + 7.1vw);}
}

thead th:first-child, td.rank{width:54px;padding-right:0;}
th.updated, td.updated{width:150px;}

tbody tr{
  border-bottom:1px solid var(--line);
  transition:background .15s ease;
}

tbody tr:last-child{border-bottom:none;}

/* Alternating rows, both grey, the even ones a shade lighter. Kept as a white
   overlay rather than fixed colours so it also reads right over the mobile
   layout, which has no cell backgrounds of its own. */
tbody tr:nth-child(odd){background:rgba(255,255,255,.02);}
tbody tr:nth-child(even){background:rgba(255,255,255,.05);}

/* After the striping: same specificity, so source order decides. */
tbody tr:hover{background:var(--maroon-glow);}

td{
  padding:1rem;
  font-size:.92rem;
  vertical-align:middle;
}

.rank{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.05rem;
  color:var(--text-dim);
  width:2.4rem;
}

tr[data-rank="1"] .rank{color:var(--gold);text-shadow:0 0 12px rgba(242,193,78,.5);}
tr[data-rank="2"] .rank{color:var(--silver);}
tr[data-rank="3"] .rank{color:var(--bronze);}

.laptime{
  font-family:var(--font-mono);
  font-weight:600;
  font-size:1rem;
  font-variant-numeric:tabular-nums;
  color:var(--text);
}

tr[data-rank="1"] .laptime{color:var(--gold);}

.driver{
  display:flex;
  align-items:center;
  gap:.7rem;
}

.driver-name{font-weight:600;font-size:.92rem;}

.car{
  display:flex;
  align-items:center;
  gap:.55rem;
  color:var(--text-dim);
  font-size:.86rem;
}

.car-badge{
  width:30px;height:30px;border-radius:6px;
  flex-shrink:0;
  background-image:var(--sprite);
  background-repeat:no-repeat;
  background-position:center -9999px;
}

.car-badge.brand-bmw{background-position:0 0;}
.car-badge.brand-ferrari{background-position:0 -30px;}
.car-badge.brand-lamborghini{background-position:0 -60px;}
.car-badge.brand-nissan{background-position:0 -90px;}
.car-badge.brand-porsche{background-position:0 -120px;}
.car-badge.brand-mclaren{background-position:0 -150px;}
.car-badge.brand-ford{background-position:0 -180px;}
.car-badge.brand-audi{background-position:0 -210px;}
.car-badge.brand-mercedes{background-position:0 -240px;}
.car-badge.brand-ktm{background-position:0 -270px;}
.car-badge.brand-honda{background-position:0 -300px;}
.car-badge.brand-maserati{background-position:0 -330px;}
.car-badge.brand-aston_martin{background-position:0 -360px;}
.car-badge.brand-bentley{background-position:0 -390px;}
.car-badge.brand-chevrolet{background-position:0 -420px;}

.sector{
  font-family:var(--font-mono);
  font-size:.86rem;
  font-variant-numeric:tabular-nums;
  color:var(--text-dim);
}

.sector.best{
  color:var(--text);
  font-weight:600;
}

.updated{
  font-size:.78rem;
  color:var(--text-faint);
  white-space:nowrap;
}

footer{
  text-align:center;
  padding:2.5rem max(1.5rem, env(safe-area-inset-right)) 3rem max(1.5rem, env(safe-area-inset-left));
  color:var(--text-on-maroon);
  font-size:.78rem;
  letter-spacing:.05em;
}

@media (max-width:640px){
  .sector{font-size:1rem;}

  td::before{font-size:.7rem;}
  .hero{padding:1.25rem max(1.25rem, env(safe-area-inset-right)) 1.25rem max(1.25rem, env(safe-area-inset-left));}
  .brand-logo{width:200px;}
  .controls-inner{flex-direction:column;align-items:stretch;}
  .circuit-select{justify-content:space-between;}
  .circuit-select select{flex:1;}
  .class-tabs{margin-left:0;}
  .class-tab{flex:1 1 auto;text-align:center;padding:.55rem .6rem;}
  main{padding:2rem 1rem 3rem;}
}

@media (min-width:701px) and (max-width:880px){
  table{min-width:0;}
  th.updated, td.updated{display:none;}
  .laptime{font-size:.86rem;}
}

@media (max-width:700px){
  /* the columns no longer fit side by side, so each row stacks — but it stays
     one continuous table instead of a stack of separate cards */
  .board-wrap{overflow-x:visible;}
  table{min-width:0;}
  thead{display:none;}
  tbody{display:block;}
  tr{
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    padding:1rem 1.4rem;
    position:relative;
  }
  tr + tr{border-top:1px solid var(--line);}

  td{
    display:flex;
    flex-direction:column;
    padding:.4rem 0;
    font-size:.88rem;
  }

  td::before{
    content:attr(data-label);
    font-size:.6rem;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--text-faint);
    margin-bottom:.2rem;
  }

  /* Watermark rank. The fixed column width from the desktop table is dropped
     and both edges are pinned, so a two-digit number grows to the left instead
     of overflowing the row. */
  td.rank{
    position:absolute;
    top:-1rem;
    left:0;
    right:1.4rem;
    width:auto;
    padding:0;
    font-size:14rem;
    text-align:right;
    opacity:0.05;
  }
  td.rank::before{content:none;}

  td.num.rank + td{padding-right:2.4rem;}

  /* Driver and car sit on their own full-width lines above the times. */
  td:nth-child(2),
  td:nth-child(3){flex:1 1 100%;}
  td:nth-child(2){order:1;padding:.8rem 0 .1rem;}
  td:nth-child(3){order:2;padding:.1rem 0 .8rem;border-bottom: 1px solid rgba(255,255,255,0.05)}
  td:nth-child(3)::before{content:none;}

  /* Lap time and date share one line: the date is short and would otherwise
     cost a full row of its own. */
  td:nth-child(4),
  td.updated{
    order:3;
    padding-top:.6rem;
    margin-top:.5rem;
  }

  /* The two bases add up to a full line. With flex-basis:auto the browser packs
     items by their content width, so on a wider phone S1 still fitted next to
     the date and ended up on this line. */
  td:nth-child(4){
    flex:1 1 60%;
    align-items:flex-start;
    text-align:left;
  }
  .laptime{font-size:1.5rem;}
  .driver-name{font-size:1.2rem;}

  td.updated{
    flex:1 1 40%;
    align-items:flex-end;
    text-align:right;
    white-space:nowrap;
  }

  td.sector{flex:1 1 33.33%;order:4;align-items:flex-start;text-align:left;}
}


/* ---------- this month's challenge + current fastest ---------- */

.feature{
  max-width:calc(1440px + 3rem);
  margin:0 auto;
  padding:1rem 1.5rem;
  display:grid;
  gap:1rem;
  grid-template-columns:2fr 1fr;
  align-items:stretch;
}

/* the whole panel is the link to the leaderboard */
.challenge{
  position:relative;
  display:block;
  min-height:400px;
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  text-decoration:none;
  background:var(--bg-elevated);
}

.challenge-media{
  position:absolute;
  inset:0;
  background:var(--challenge-bg, none) center 45%/cover no-repeat;
  transform:scale(1.02);
  transition:transform .35s ease;
}

.challenge::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(10,9,16,0) 0%, rgba(10,9,16,.22) 50%, rgba(10,9,16,.72) 80%, rgba(10,9,16,.92) 100%);
}

.challenge-body{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:1;
  display:block;
  padding:1.6rem;
}

.challenge-eyebrow{
  display:block;
  font-size:.7rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--text-on-maroon);
  margin-bottom:.4rem;
}

.challenge-title{
  display:block;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(2rem,4vw,2.9rem);
  line-height:1;
  letter-spacing:.01em;
  text-transform:uppercase;
  color:#fff;
  text-shadow:0 3px 16px rgba(0,0,0,.6);
}

.challenge-cta{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  margin-top:1rem;
  font-family:var(--font-display);
  font-weight:700;
  font-size:.95rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:#fff;
  border-bottom:2px solid var(--maroon);
  padding-bottom:.15rem;
  transition:border-color .15s ease;
}

.challenge:hover .challenge-media{transform:scale(1.06);}
.challenge:hover .challenge-cta{border-color:var(--ice-dim);}
.challenge:hover .challenge-cta .arrow{transform:translateX(3px);}
.challenge:focus-visible{outline:1px solid var(--text-faint);outline-offset:3px;}

/* the leader board's rank-1 treatment, boiled down to a single tile */
.fastest{
  border:1px solid var(--line);
  border-radius:14px;
  background:
    linear-gradient(160deg, rgba(242,193,78,.10), rgba(242,193,78,0) 55%),
    var(--bg-elevated);
  padding:3rem;
  display:flex;
  flex-direction:column;
}

.fastest h2{
  font-family:var(--font-display);
  font-weight:700;
  font-size:.95rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-dim);
  margin-bottom:1rem;
}

.fastest-time{
  font-family:var(--font-mono);
  font-weight:600;
  font-size:3.1rem;
  line-height:1;
  font-variant-numeric:tabular-nums;
  color:var(--gold);
}

.fastest-driver{
  margin-top:1rem;
  font-size:1.3rem;
  font-weight:600;
  color:var(--text);
}

.fastest-car{
  display:flex;
  align-items:center;
  gap:.5rem;
  margin-top:.5rem;
  font-size:1rem;
  color:var(--text-dim);
}

.fastest-car .car-badge{
  width:24px;
  height:24px;
  background-size:24px auto;
}

.fastest-car .car-badge.brand-bmw{background-position:0 0;}
.fastest-car .car-badge.brand-ferrari{background-position:0 -24px;}
.fastest-car .car-badge.brand-lamborghini{background-position:0 -48px;}
.fastest-car .car-badge.brand-nissan{background-position:0 -72px;}
.fastest-car .car-badge.brand-porsche{background-position:0 -96px;}
.fastest-car .car-badge.brand-mclaren{background-position:0 -120px;}
.fastest-car .car-badge.brand-ford{background-position:0 -144px;}
.fastest-car .car-badge.brand-audi{background-position:0 -168px;}
.fastest-car .car-badge.brand-mercedes{background-position:0 -192px;}
.fastest-car .car-badge.brand-ktm{background-position:0 -216px;}
.fastest-car .car-badge.brand-honda{background-position:0 -240px;}
.fastest-car .car-badge.brand-maserati{background-position:0 -264px;}
.fastest-car .car-badge.brand-aston_martin{background-position:0 -288px;}
.fastest-car .car-badge.brand-bentley{background-position:0 -312px;}
.fastest-car .car-badge.brand-chevrolet{background-position:0 -336px;}

.fastest-sectors{
  margin-top:1.4rem;
  display:flex;
  gap:1.1rem;
  font-family:var(--font-mono);
  font-size:1.05rem;
  font-variant-numeric:tabular-nums;
  color:var(--text-dim);
}

.fastest-sectors span small{
  display:block;
  font-family:var(--font-body);
  font-size:.82rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-faint);
  margin-bottom:.25rem;
}

/* Date sits under the sectors, label styled like S1/S2/S3 and the value like
   the car name. Hidden on the narrow tile, see the 640px block. */
.fastest-date{
  margin-top:1.4rem;
  font-size:1rem;
  color:var(--text-dim);
}

.fastest-date small{
  display:block;
  font-family:var(--font-body);
  font-size:.82rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-faint);
  margin-bottom:.25rem;
}

.fastest-empty{
  font-size:.92rem;
  line-height:1.6;
  color:var(--text-dim);
}

@media (max-width:780px){
  .feature{grid-template-columns:1fr;}
  .challenge{min-height:300px;}
}

@media (max-width:1140px) {
  .fastest {padding: 3rem 1.4rem;}
}

@media (max-width:640px){
  .feature{padding-left:1rem;padding-right:1rem;}

  /* the narrow tile drops the date, so the sectors go back to sitting on the
     bottom edge, and the whole thing tightens up */
  .fastest{padding:1.4rem;}
  .fastest-sectors{margin-top:auto;padding-top:1.4rem;}
  .fastest-date{display:none;}
}


/* ---------- navigation ---------- */

/* .hero-title is z-index:1 too and comes later, so lift the header cluster
   above it or the open dropdown ends up behind the headline */
.home .hero-inner{z-index:30;}

.hero-tools{
  position:relative;
  display:flex;
  align-items:center;
  gap:.75rem;
}

.nav-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  flex-shrink:0;
  padding:0;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--bg-elevated);
  color:var(--text-dim);
  cursor:pointer;
  transition:border-color .15s ease,color .15s ease;
}

.nav-toggle:hover{color:var(--text);border-color:var(--ice-dim);}
.nav-toggle:focus-visible{outline:1px solid var(--text-faint);outline-offset:3px;}

.nav-bars{
  display:block;
  width:20px;
  height:14px;
  position:relative;
}

.nav-bars span{
  position:absolute;
  left:0;
  width:100%;
  height:2px;
  border-radius:2px;
  background:currentColor;
  transition:transform .2s ease,opacity .15s ease;
}

.nav-bars span:nth-child(1){top:0;}
.nav-bars span:nth-child(2){top:6px;}
.nav-bars span:nth-child(3){top:12px;}

/* the bars fold into a cross while the panel is open */
[aria-expanded="true"] .nav-bars span:nth-child(1){transform:translateY(6px) rotate(45deg);}
[aria-expanded="true"] .nav-bars span:nth-child(2){opacity:0;}
[aria-expanded="true"] .nav-bars span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* dropdown, so opening the menu never pushes the page down */
.site-nav{
  position:absolute;
  top:calc(100% + .6rem);
  right:0;
  z-index:20;
  width:max(260px, 100%);
}

.site-nav ul{
  list-style:none;
  margin:0;
  padding:.5rem;
  display:grid;
  gap:.15rem;
  border:1px solid var(--line);
  border-radius:14px;
  background:#14121d;
  backdrop-filter:blur(10px);
  box-shadow:0 18px 40px rgba(0,0,0,.45);
}

.site-nav a{
  display:block;
  padding:.7rem .9rem;
  border-radius:9px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--text-dim);
  transition:background .15s ease,color .15s ease;
}

.site-nav a:hover{background:rgba(255,255,255,.05);color:var(--text);}
.site-nav a:focus-visible{outline:1px solid var(--text-faint);outline-offset:-1px;}

.site-nav a[aria-current="page"]{
  color:#fff;
  background:linear-gradient(135deg, var(--maroon) 0%, var(--maroon-deep) 100%);
}

@media (max-width:520px){
  .status-chip{display:none;}
}

@media (max-width:400px){
  .fastest-time{font-size:2.6rem;}
  .fastest-sectors{gap:.9rem;}
}