/* ===========================================================================
   JETT PRICE RACING — SITE STYLESHEET
   One file, shared by every page. Edit here, not per-page.

   FONTS: Michroma + Saira stand in for Eurostile, the brand face. When the
   licensed Eurostile webfont is dropped into assets/fonts, add its @font-face
   block below and change --display and --font. Nothing else needs touching.
   =========================================================================== */

:root{
  /* ground + ink */
  --black:#06070A;
  --ink:#0B0D12;
  --panel:#101319;
  --line:rgba(127,160,245,0.18);
  --line-strong:rgba(127,160,245,0.34);

  /* brand */
  --cobalt:#1E4FE0;
  --cobalt-light:#3D6FF0;
  --cobalt-pale:#7FA0F5;
  --gold:#E8B93B;
  --red:#E23B3B;

  /* type colour */
  --white:#FFFFFF;
  --gray:#B4BAC6;
  --dim:#767C88;

  --font:'Saira','Eurostile','Helvetica Neue',Arial,sans-serif;
  --display:'Michroma','Eurostile Extended','Saira',sans-serif;

  --ease:cubic-bezier(0.16,1,0.3,1);
  --fade:1200ms;
  --max:1240px;
  --pad:clamp(1rem,4vw,2.5rem);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;background:var(--black)}
body{
  font-family:var(--font);color:var(--white);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--cobalt-light);outline-offset:3px}
::selection{background:var(--cobalt);color:var(--white)}

.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

/* ---------------------------------------------------------------- header -- */
.site-header{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;gap:1.2rem;
  padding:0.85rem var(--pad);
  background:rgba(6,7,10,0.88);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header.over{
  position:absolute;left:0;right:0;background:transparent;
  backdrop-filter:none;border-bottom:0;
}
/* The badge carries its own blue outline — no frame, no recolouring. */
.mark{
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:opacity 0.25s var(--ease),filter 0.25s var(--ease);
}
.mark:hover{opacity:0.86;filter:drop-shadow(0 0 10px rgba(61,111,240,0.55))}
.mark img{height:2.5rem;width:auto}
.nav{flex:1;display:flex;justify-content:center;align-items:center;gap:clamp(0.7rem,2.2vw,2rem);flex-wrap:wrap}
.nav a{
  position:relative;padding:0.3rem 0;
  font-family:var(--display);font-size:clamp(0.55rem,1vw,0.72rem);
  letter-spacing:0.13em;text-transform:uppercase;color:var(--gray);
  text-shadow:0 1px 8px rgba(0,0,0,0.8);
  transition:color 0.25s var(--ease);
}
.nav a:hover{color:var(--white)}
.nav a[aria-current="page"]{color:var(--white)}
.nav a[aria-current="page"]::after{
  content:'';position:absolute;left:0;right:0;bottom:-0.28rem;height:2px;
  background:var(--cobalt-light);box-shadow:0 0 10px rgba(61,111,240,0.8);
}
/* Injected into the nav for the phone menu only — never on desktop. */
.nav .ig-row{display:none}
.ig-btn{
  display:flex;align-items:center;justify-content:center;
  width:2.5rem;height:2.5rem;flex-shrink:0;
  border:1px solid var(--line-strong);border-radius:7px;color:var(--white);
  backdrop-filter:blur(4px);
  transition:background 0.25s var(--ease),border-color 0.25s var(--ease);
}
.ig-btn:hover{background:rgba(30,79,224,0.18);border-color:var(--cobalt-light)}
.ig-btn svg{width:1.15rem;height:1.15rem}
.ig-btn.fb-btn{margin-left:-0.65rem}

/* ------------------------------------------------------------------ chips -- */
.chip-row{display:flex;align-items:center;flex-wrap:wrap}
.chip{
  display:inline-flex;align-items:center;gap:0.5rem;
  padding:0.42rem 1.15rem;transform:skewX(-14deg);
  font-family:var(--display);font-size:0.6rem;letter-spacing:0.16em;text-transform:uppercase;
}
.chip>span{transform:skewX(14deg)}
.chip.blue{background:var(--cobalt);color:var(--white);position:relative;overflow:hidden}
/* Slow sheen sweep across the rookie-season chip. */
.chip.blue::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,0.62) 50%,transparent 62%);
  transform:translateX(-130%);animation:chipSheen 5s var(--ease) infinite;
}
.chip.blue>span{position:relative;z-index:1}
@keyframes chipSheen{0%,64%{transform:translateX(-130%)}100%{transform:translateX(130%)}}
@media(prefers-reduced-motion:reduce){.chip.blue::after{display:none}}
.chip.blue .dot{width:6px;height:6px;background:var(--white);display:inline-block;transform:skewX(14deg)}
.chip.white{background:var(--white);color:var(--black);margin-left:0.35rem}
.chip.gold{background:var(--gold);color:#1A1405;margin-left:0.35rem}

/* ------------------------------------------------------------ page header -- */
.page-head{padding:clamp(2.4rem,6vw,4.4rem) 0 clamp(1.4rem,3vw,2rem)}
.page-head .chip-row{margin-bottom:1.4rem}
.page-title{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(2rem,6vw,4.2rem);line-height:0.98;letter-spacing:0.01em;
  margin:0;text-wrap:balance;
}
.page-title em{font-style:normal;color:var(--cobalt-light)}
.page-sub{
  margin:1rem 0 0;max-width:60ch;color:var(--gray);
  font-size:clamp(0.88rem,1.5vw,1rem);line-height:1.65;
}
.rule{display:block;height:1px;border:0;margin:0;
  background:linear-gradient(90deg,rgba(127,160,245,0.55),rgba(127,160,245,0.04))}

/* --------------------------------------------------------------- sections -- */
.section{padding:clamp(2rem,4vw,3.2rem) 0}
.section-label{
  font-family:var(--display);font-size:0.58rem;letter-spacing:0.19em;text-transform:uppercase;
  color:var(--cobalt-light);display:flex;align-items:center;gap:0.75rem;margin-bottom:1.4rem;
}
.section-label::after{content:'';height:1px;flex:1;background:var(--line)}
.section-title{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.35rem,3.4vw,2.3rem);line-height:1.08;margin:0 0 1rem;text-wrap:balance;
}
.lede{font-size:clamp(1rem,1.9vw,1.2rem);line-height:1.6;color:var(--white);max-width:56ch}
.prose{color:var(--gray);line-height:1.72;max-width:68ch}
.prose p{margin:0 0 1.1rem}
.prose strong{color:var(--white);font-weight:600}
.prose a{color:var(--cobalt-pale);border-bottom:1px solid rgba(127,160,245,0.35)}
.prose a:hover{color:var(--white);border-color:var(--white)}

/* ------------------------------------------------------------------ stats -- */
.statbar{
  display:flex;align-items:center;flex-wrap:wrap;
  gap:0.9rem clamp(1.2rem,3.5vw,2.6rem);
  padding-top:1.1rem;border-top:1px solid rgba(255,255,255,0.16);
}
.num{
  font-family:var(--display);font-size:clamp(2.2rem,5vw,3.4rem);line-height:0.9;
  color:var(--cobalt-light);text-shadow:0 4px 20px rgba(30,79,224,0.45);
}
.stat{display:inline-flex;flex-direction:column;justify-content:center}
.stat .k{font-family:var(--display);font-size:0.5rem;letter-spacing:0.17em;text-transform:uppercase;color:var(--dim)}
.stat .v{font-size:clamp(0.85rem,1.5vw,1rem);font-weight:600;margin-top:0.28rem}

.figures{display:grid;gap:0.7rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:720px){.figures{grid-template-columns:repeat(4,1fr)}}
.figure{
  padding:1.15rem 1.2rem;border-radius:6px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,0.04),rgba(255,255,255,0.012));
}
.figure b{
  display:block;font-family:var(--display);font-weight:400;
  font-size:clamp(1.5rem,3.6vw,2.2rem);line-height:1;color:var(--white);
  font-variant-numeric:tabular-nums;
}
.figure span{
  display:block;margin-top:0.6rem;
  font-family:var(--display);font-size:0.5rem;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--dim);line-height:1.5;
}
.figure.hero-figure b{color:var(--cobalt-light)}

/* ------------------------------------------------------------------ table -- */
.table-scroll{overflow-x:auto;border-radius:6px;border:1px solid var(--line)}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:0.9rem}
thead th{
  text-align:left;padding:0.85rem 1rem;white-space:nowrap;
  font-family:var(--display);font-size:0.5rem;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--cobalt-light);background:rgba(255,255,255,0.035);
  border-bottom:1px solid var(--line);
}
tbody td{padding:0.8rem 1rem;border-bottom:1px solid rgba(255,255,255,0.06);color:var(--gray);vertical-align:top}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:rgba(30,79,224,0.07)}
td.pos{font-family:var(--display);color:var(--white);white-space:nowrap;font-variant-numeric:tabular-nums}
td strong,th strong{color:var(--white);font-weight:600}
.win{color:var(--gold);font-weight:700}
.podium{color:var(--cobalt-pale);font-weight:700}
.muted{color:var(--dim)}
caption{caption-side:bottom;padding:0.9rem 1rem;text-align:left;font-size:0.76rem;color:var(--dim);line-height:1.6}

/* ------------------------------------------------------------------ cards -- */
.cards{display:grid;gap:0.9rem;grid-template-columns:1fr}
@media(min-width:760px){.cards.two{grid-template-columns:1fr 1fr}.cards.three{grid-template-columns:repeat(3,1fr)}}
.card{
  padding:1.3rem 1.4rem;border-radius:6px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,0.04),rgba(255,255,255,0.012));
}
.card .k{font-family:var(--display);font-size:0.52rem;letter-spacing:0.17em;text-transform:uppercase;color:var(--cobalt-light)}
.card h3{font-family:var(--display);font-weight:400;font-size:1rem;margin:0.7rem 0 0;line-height:1.3}
.card p{margin:0.65rem 0 0;font-size:0.92rem;line-height:1.65;color:var(--gray)}
.card p b{color:var(--white);font-weight:600}
.card.accent{border-color:rgba(61,111,240,0.42)}
.card.gold{border-color:rgba(232,185,59,0.4)}
.card.gold .k{color:var(--gold)}

/* --------------------------------------------------------------- standing -- */
.standing{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  padding:1rem 1.2rem;border-radius:6px;border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,0.04),rgba(255,255,255,0.012));
}
.standing + .standing{margin-top:0.6rem}
.standing .pos{
  font-family:var(--display);font-size:1.5rem;line-height:1;min-width:2.6rem;
  color:var(--cobalt-light);font-variant-numeric:tabular-nums;
}
.standing.is-live{border-color:rgba(232,185,59,0.42)}
.standing.is-live .pos{color:var(--gold)}
.standing .meta{flex:1;min-width:12rem}
.standing .meta b{display:block;font-size:0.98rem;font-weight:600}
.standing .meta span{display:block;margin-top:0.2rem;font-size:0.8rem;color:var(--dim)}
.standing .pts{
  font-family:var(--display);font-size:0.85rem;color:var(--white);
  font-variant-numeric:tabular-nums;margin-left:auto;
}
.tag{
  display:inline-block;padding:0.28rem 0.7rem;border-radius:3px;
  font-family:var(--display);font-size:0.46rem;letter-spacing:0.16em;text-transform:uppercase;
}
.tag.live{background:var(--gold);color:#1A1405}
.tag.done{background:rgba(255,255,255,0.1);color:var(--gray)}

/* ----------------------------------------------------------------- footer -- */
.site-footer{border-top:1px solid var(--line);margin-top:clamp(1.1rem,2.6vw,2rem)}
.footer-grid{
  display:grid;gap:1.6rem;grid-template-columns:1fr;
  padding:clamp(2rem,4vw,2.8rem) 0 1.4rem;
}
@media(min-width:760px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr}}
.footer-grid h4{
  font-family:var(--display);font-size:0.5rem;letter-spacing:0.17em;text-transform:uppercase;
  color:var(--cobalt-light);margin:0 0 0.9rem;
}
.footer-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.5rem}
.footer-grid li a{font-size:0.88rem;color:var(--gray);transition:color 0.25s var(--ease)}
.footer-grid li a:hover{color:var(--white)}
.footer-mark img{height:2.4rem;width:auto;filter:brightness(0) invert(1);opacity:0.9}
.footer-blurb{margin:1rem 0 0;font-size:0.86rem;line-height:1.65;color:var(--dim);max-width:34ch}
.footer-bar{
  display:flex;flex-wrap:wrap;gap:0.8rem 1.6rem;justify-content:space-between;
  padding:1rem 0 1.6rem;border-top:1px solid rgba(255,255,255,0.07);
  font-size:0.72rem;letter-spacing:0.05em;color:var(--dim);
}

/* ------------------------------------------------------------------- misc -- */
.btn{
  display:inline-flex;align-items:center;gap:0.6rem;
  padding:0.85rem 1.8rem;border-radius:4px;
  border:1px solid var(--cobalt-light);background:transparent;color:var(--white);
  font-family:var(--display);font-size:0.6rem;letter-spacing:0.17em;text-transform:uppercase;
  transition:background 0.25s var(--ease),box-shadow 0.25s var(--ease);
}
.btn:hover{background:var(--cobalt);box-shadow:0 10px 26px rgba(30,79,224,0.34)}
.btn.solid{background:var(--cobalt)}
.btn.solid:hover{background:var(--cobalt-light)}
.btn svg{width:0.9rem;height:0.9rem}

.split-2{display:grid;gap:clamp(1.4rem,4vw,3rem);grid-template-columns:1fr}
@media(min-width:860px){.split-2{grid-template-columns:1.15fr 1fr;align-items:start}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:0.001ms!important;animation-iteration-count:1!important;transition-duration:0.001ms!important}
  .ticker-track{animation-duration:46s!important;animation-iteration-count:infinite!important}
}

/* ===========================================================================
   HOME PAGE
   =========================================================================== */

/* ------------------------------------------------------------------- hero -- */
.hero{position:relative;height:min(84vh,760px);min-height:480px;overflow:hidden;background:var(--ink)}
.hero .layer{position:absolute;inset:0;opacity:0;transition:opacity var(--fade) var(--ease)}
.hero .layer.on{opacity:1}
.hero .layer img,.hero .layer video{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.hero .layer.photo img{transform:scale(1);transition:transform 11s linear}
.hero .layer.photo.on img{transform:scale(1.07) translate3d(-1%,-0.6%,0)}

.hero-scrim{position:absolute;inset:0;pointer-events:none}
.hero-scrim.photo{
  background:
    linear-gradient(180deg,rgba(6,7,10,0.72) 0%,rgba(6,7,10,0.12) 26%,rgba(6,7,10,0.20) 55%,rgba(6,7,10,0.88) 92%,var(--black) 100%),
    linear-gradient(90deg,rgba(6,7,10,0.55) 0%,transparent 45%);
}
.hero-scrim.video{
  background:
    linear-gradient(180deg,rgba(6,7,10,0.70) 0%,rgba(6,7,10,0.10) 26%,rgba(6,7,10,0.22) 55%,rgba(6,7,10,0.90) 92%,var(--black) 100%),
    linear-gradient(90deg,rgba(6,7,10,0.88) 0%,rgba(6,7,10,0.78) 9%,rgba(6,7,10,0.42) 17%,rgba(6,7,10,0.10) 26%,transparent 40%);
}
.hero-copy{position:absolute;z-index:10;left:0;right:0;bottom:0;padding-bottom:clamp(1.6rem,4vw,2.6rem)}
.hero-copy .chip-row{margin-bottom:1rem}
.lockup{width:min(560px,72vw);filter:drop-shadow(0 6px 24px rgba(0,0,0,0.85))}
.hero-copy .statbar{margin-top:1.4rem}
.result{display:flex;align-items:stretch;margin-left:auto}
.result .p1{background:var(--gold);color:#1A1405;padding:0.5rem 0.95rem;text-align:center;
  display:flex;flex-direction:column;justify-content:center}
.result .p1 b{font-family:var(--display);font-size:1.15rem;line-height:1}
.result .p1 i{font-style:normal;font-size:0.46rem;letter-spacing:0.16em;text-transform:uppercase;margin-top:0.2rem}
.result .txt{background:rgba(6,7,10,0.82);border:1px solid var(--line-strong);border-left:0;
  padding:0.5rem 1rem;display:flex;flex-direction:column;justify-content:center}
.result .txt .k{font-family:var(--display);font-size:0.46rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--dim)}
.result .txt .v{font-family:var(--display);font-size:clamp(0.6rem,1.2vw,0.76rem);letter-spacing:0.05em;margin-top:0.28rem}
@media(max-width:640px){.result{margin-left:0;width:100%}}

.vidcredit{
  margin-top:0.85rem;padding-top:0.7rem;border-top:1px solid rgba(255,255,255,0.09);
  font-family:var(--display);font-size:0.44rem;letter-spacing:0.19em;text-transform:uppercase;
  color:rgba(255,255,255,0.52);text-shadow:0 1px 6px rgba(0,0,0,0.9);
  opacity:0;transition:opacity var(--fade) var(--ease);
}
.vidcredit.on{opacity:1}
.vidcredit a{color:rgba(255,255,255,0.72);border-bottom:1px solid rgba(255,255,255,0.22)}
.vidcredit a:hover{color:var(--cobalt-pale);border-color:var(--cobalt-pale)}

/* The clip must start muted, so the control that turns sound on is an
   invitation rather than a utility: it pulses while off, goes quiet once used. */
.soundbtn{
  position:absolute;z-index:15;right:var(--pad);top:6rem;
  display:inline-flex;align-items:center;gap:0.6rem;
  padding:0.62rem 1.15rem;border-radius:999px;
  border:1px solid var(--cobalt-light);
  background:linear-gradient(180deg,rgba(30,79,224,0.92),rgba(20,56,168,0.92));
  color:var(--white);font-family:var(--display);
  font-size:0.52rem;letter-spacing:0.15em;text-transform:uppercase;
  backdrop-filter:blur(6px);box-shadow:0 6px 22px rgba(30,79,224,0.45);
  opacity:0;pointer-events:none;
  transition:opacity var(--fade) var(--ease),background 0.25s var(--ease),box-shadow 0.25s var(--ease);
}
.soundbtn.on{opacity:1;pointer-events:auto}
.soundbtn::after{content:'';position:absolute;inset:-2px;border-radius:999px;pointer-events:none;
  border:1.5px solid var(--cobalt-light);animation:sndring 2.6s var(--ease) infinite}
@keyframes sndring{0%{transform:scale(1);opacity:0.75}70%,100%{transform:scale(1.28);opacity:0}}
.soundbtn:hover{box-shadow:0 8px 30px rgba(61,111,240,0.65)}
.soundbtn.live{background:rgba(6,7,10,0.62);border-color:var(--line-strong);box-shadow:none}
.soundbtn.live::after{display:none}
.soundbtn.live:hover{background:rgba(30,79,224,0.25)}
.eq{display:flex;align-items:flex-end;gap:2px;height:0.85rem;width:0.95rem;flex-shrink:0}
.eq i{display:block;width:2px;flex:1;border-radius:1px;background:currentColor;
  transform-origin:bottom;animation:eqbounce 900ms ease-in-out infinite}
.eq i:nth-child(1){animation-delay:0ms}
.eq i:nth-child(2){animation-delay:150ms}
.eq i:nth-child(3){animation-delay:300ms}
.eq i:nth-child(4){animation-delay:80ms}
@keyframes eqbounce{0%,100%{height:22%}30%{height:100%}60%{height:48%}}
.soundbtn.live .eq i{animation:none;height:40%}
.soundbtn.live .eq i:nth-child(2){height:85%}
.soundbtn.live .eq i:nth-child(3){height:62%}

/* ----------------------------------------------------------------- ticker -- */
.ticker{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:rgba(30,79,224,0.07);padding:0.75rem 0}
.ticker-track{display:flex;align-items:center;gap:1.6rem;width:max-content;
  animation:tick 46s linear infinite}
.ticker-track span{font-family:var(--display);font-size:0.58rem;letter-spacing:0.17em;
  text-transform:uppercase;color:var(--white);white-space:nowrap}
.ticker-track i{color:var(--cobalt-light);font-style:normal;font-size:0.7rem}
@keyframes tick{to{transform:translateX(-50%)}}
@media(hover:hover){.ticker:hover .ticker-track{animation-play-state:paused}}

/* -------------------------------------------------------------------- map -- */
.map-wrap{display:grid;gap:1.4rem;grid-template-columns:1fr;position:relative}
@media(min-width:900px){.map-wrap{grid-template-columns:1.5fr 1fr;align-items:center}}
.map{width:100%;height:auto;
  background:radial-gradient(ellipse 70% 60% at 50% 45%,rgba(30,79,224,0.10),transparent 70%);
  border:1px solid var(--line);border-radius:8px}
.map .coast{fill:rgba(30,79,224,0.11);stroke:rgba(127,160,245,0.78);stroke-width:1.6;
  stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.map .arc{fill:none;stroke:var(--cobalt-light);stroke-width:0.28;opacity:0;
  stroke-dasharray:120;stroke-dashoffset:120;
  animation:draw 12s var(--ease) infinite;animation-delay:calc(var(--i)*0.42s)}
@keyframes draw{
  0%{opacity:0;stroke-dashoffset:120}
  6%{opacity:0.85}
  22%{stroke-dashoffset:0;opacity:0.5}
  70%{opacity:0.22}
  100%{opacity:0.22;stroke-dashoffset:0}
}
.map .venue{fill:var(--white);opacity:0;animation:pop 12s var(--ease) infinite;
  animation-delay:calc(var(--i)*0.42s + 0.5s)}
@keyframes pop{0%{opacity:0;transform:scale(0.2)}10%,100%{opacity:1;transform:scale(1)}}
.map .venue{transform-box:fill-box;transform-origin:center}
.map .venue:hover{fill:var(--cobalt-pale)}
.map .home{fill:var(--gold)}
.map .home-ring{fill:none;stroke:var(--gold);stroke-width:0.3;opacity:0.7;
  transform-box:fill-box;transform-origin:center;animation:ring 3s ease-out infinite}
@keyframes ring{0%{transform:scale(1);opacity:0.7}100%{transform:scale(3.4);opacity:0}}
.map .home-label{fill:var(--gold);font-family:'Michroma',sans-serif;font-size:1.5px;letter-spacing:0.1em}
.venue-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;
  gap:0 1.6rem;font-size:0.8rem}
@media(min-width:560px){.venue-list{grid-template-columns:1fr 1fr}}
.venue-list li{display:grid;grid-template-columns:1fr auto;gap:0 0.6rem;padding:0.55rem 0;
  border-bottom:1px solid rgba(255,255,255,0.06)}
.venue-list b{font-weight:600;color:var(--cobalt-pale);font-size:0.82rem;min-width:0}
.venue-list span{grid-column:1/-1;color:var(--dim);font-size:0.66rem;letter-spacing:0.08em;
  text-transform:uppercase;margin-top:0.2rem}
.venue-list i{font-style:normal;font-family:var(--display);font-size:0.5rem;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--dim);white-space:nowrap;align-self:baseline}

/* -------------------------------------------------------- race weekend -- */
.weekend{display:grid;grid-template-columns:1fr;margin-top:2.6rem;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media(min-width:900px){.weekend{grid-template-columns:repeat(5,1fr)}}
.wk{display:flex;flex-direction:column;padding:1.7rem 1.5rem 1.5rem;
  border-top:1px solid var(--line)}
@media(min-width:900px){
  .wk{border-top:0;border-left:1px solid var(--line)}
  .weekend .wk:first-child{border-left:0}
}
.wk .d{font-family:var(--display);font-size:0.55rem;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--gray)}
.wk h3{font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.05rem,1.7vw,1.28rem);line-height:1.12;margin:1.1rem 0 0.9rem;
  color:var(--white);text-wrap:balance}
.wk p{margin:0;color:var(--gray);font-size:0.85rem;line-height:1.6}
.wk .tagline{margin-top:auto;padding-top:1.9rem;font-family:var(--display);
  font-size:0.55rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--dim)}
.wk.hot{background:linear-gradient(180deg,rgba(30,79,224,0.22),rgba(30,79,224,0.06))}
.wk.hot .d,.wk.hot .tagline{color:var(--cobalt-pale)}
@media(min-width:900px){
  .wk.hot{border-left-color:transparent}
  .wk.hot + .wk.hot{border-left:1px solid rgba(127,160,245,0.22)}
}

/* ------------------------------------------------------------------- week -- */
.week{display:grid;gap:0.6rem;grid-template-columns:1fr;margin-top:2rem}
@media(min-width:700px){.week{grid-template-columns:repeat(5,1fr)}}
.week-step{padding:1rem 1.1rem;border-radius:6px;border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,0.04),rgba(255,255,255,0.012))}
.week-step .d{display:block;font-family:var(--display);font-size:0.52rem;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--cobalt-light)}
.week-step b{display:block;margin-top:0.55rem;font-size:0.88rem;font-weight:600;line-height:1.45}

/* ---------------------------------------------------------------- teasers -- */
.teaser-grid{display:grid;gap:0.6rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:640px){.teaser-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:960px){.teaser-grid{grid-template-columns:repeat(6,1fr)}}
.teaser-grid a{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;border-radius:5px;
  background:var(--panel)}
.teaser-grid img{width:100%;height:100%;object-fit:cover;filter:brightness(0.9) saturate(1.04);
  transition:transform 0.45s var(--ease),filter 0.35s var(--ease)}
.teaser-grid a:hover img{transform:scale(1.07);filter:brightness(1.02)}

/* --------------------------------------------------------------- partners -- */
.partner-row{display:grid;gap:1.6rem;grid-template-columns:1fr;align-items:center}
@media(min-width:760px){.partner-row{grid-template-columns:1fr 1.6fr;gap:2.4rem}}
.partner-mark img{width:min(260px,60vw);height:auto}
.partner-mark{transition:opacity 0.25s var(--ease)}
.partner-mark:hover{opacity:0.82}
/* Logo strip — grows as partners are added, no layout change needed. */
.partner-marks{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(1.5rem,5vw,3.2rem)}
.partner-marks .partner-mark img{width:min(230px,52vw)}

/* ===========================================================================
   GALLERY
   =========================================================================== */
.filters{display:flex;gap:0.5rem;flex-wrap:wrap;margin-bottom:1.5rem}
.filter{
  border:1px solid var(--line-strong);background:rgba(255,255,255,0.02);
  color:var(--gray);cursor:pointer;border-radius:4px;padding:0.55rem 0.95rem;
  font-family:var(--display);font-size:0.58rem;letter-spacing:0.13em;text-transform:uppercase;
  transition:all 0.22s var(--ease);
}
.filter:hover{color:var(--white);border-color:var(--cobalt-light);background:rgba(30,79,224,0.12)}
.filter[aria-pressed="true"]{background:var(--cobalt);border-color:var(--cobalt);color:var(--white);
  box-shadow:0 6px 18px rgba(30,79,224,0.32)}
.filter .n{opacity:0.6;margin-left:0.45rem;font-size:0.9em}

.grid{display:grid;gap:0.6rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:560px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.grid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1200px){.grid{grid-template-columns:repeat(5,1fr)}}
.tile{position:relative;aspect-ratio:1/1;overflow:hidden;border-radius:5px;
  background:var(--panel);cursor:pointer;border:0;padding:0;display:block;
  opacity:0;animation:tileIn 0.45s var(--ease) forwards}
@keyframes tileIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.tile img{width:100%;height:100%;object-fit:cover;filter:brightness(0.9) saturate(1.04);
  transition:transform 0.45s var(--ease),filter 0.35s var(--ease)}
.tile::after{content:'';position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.06);
  background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,0.55) 100%);
  transition:box-shadow 0.3s var(--ease)}
.tile:hover img,.tile:focus-visible img{transform:scale(1.07);filter:brightness(1.02) saturate(1.1)}
.tile:hover::after,.tile:focus-visible::after{box-shadow:inset 0 0 0 1.5px var(--cobalt-light)}
.tile .tag-ev{position:absolute;left:0.5rem;bottom:0.5rem;z-index:2;
  font-family:var(--display);font-size:0.5rem;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--white);text-shadow:0 1px 6px rgba(0,0,0,0.9);
  opacity:0;transform:translateY(4px);transition:all 0.3s var(--ease)}
.tile:hover .tag-ev,.tile:focus-visible .tag-ev{opacity:1;transform:none}
.tile .play{position:absolute;inset:0;margin:auto;width:2.8rem;height:2.8rem;z-index:2;
  border-radius:50%;background:rgba(6,7,10,0.55);border:1.5px solid var(--cobalt-light);
  display:flex;align-items:center;justify-content:center}
.tile .play svg{width:1rem;height:1rem;margin-left:2px;fill:var(--white)}

.more-wrap{text-align:center;padding:2.2rem 1rem 0}
.count{margin-top:0.9rem;font-size:0.72rem;letter-spacing:0.1em;color:var(--dim);text-transform:uppercase}

.credits-inner{display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem 2.2rem;
  padding:1.3rem 1.5rem;border-radius:6px;border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,0.035),rgba(255,255,255,0.012))}
.credits-label{font-family:var(--display);font-size:0.58rem;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--cobalt-light)}
.credit-link{display:inline-flex;align-items:center;gap:0.45rem;font-size:0.92rem;
  font-weight:600;color:var(--white);transition:color 0.25s var(--ease)}
.credit-link:hover{color:var(--cobalt-light)}
.credit-link svg{width:1rem;height:1rem}

/* lightbox */
.lb{position:fixed;inset:0;z-index:200;display:none;background:rgba(4,5,6,0.96);backdrop-filter:blur(8px)}
.lb.open{display:flex;flex-direction:column}
.lb-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:0.9rem var(--pad);border-bottom:1px solid var(--line)}
.lb-counter{font-family:var(--display);font-size:0.62rem;letter-spacing:0.14em;color:var(--cobalt-light)}
.lb-close{width:2.4rem;height:2.4rem;border-radius:5px;cursor:pointer;
  border:1px solid var(--line-strong);background:transparent;color:var(--white);
  display:flex;align-items:center;justify-content:center;transition:all 0.22s var(--ease)}
.lb-close:hover{background:rgba(30,79,224,0.2);border-color:var(--cobalt-light)}
.lb-close svg{width:1.05rem;height:1.05rem}
.lb-stage{flex:1;position:relative;display:flex;align-items:center;justify-content:center;
  padding:clamp(0.6rem,2.5vw,1.6rem);min-height:0}
.lb-stage img,.lb-stage video{max-width:100%;max-height:100%;width:auto;height:auto;
  border-radius:4px;box-shadow:0 30px 80px rgba(0,0,0,0.7)}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);
  width:3rem;height:3rem;border-radius:50%;cursor:pointer;
  border:1px solid var(--line-strong);background:rgba(6,7,10,0.6);color:var(--white);
  display:flex;align-items:center;justify-content:center;transition:all 0.22s var(--ease)}
.lb-nav:hover{background:var(--cobalt);border-color:var(--cobalt)}
.lb-nav svg{width:1.2rem;height:1.2rem}
.lb-prev{left:clamp(0.4rem,2vw,1.4rem)}
.lb-next{right:clamp(0.4rem,2vw,1.4rem)}
.lb-bottom{padding:0.9rem var(--pad) 1.3rem;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:0.5rem 1.4rem}
.lb-event{font-family:var(--display);font-size:clamp(0.68rem,1.6vw,0.82rem);
  letter-spacing:0.09em;text-transform:uppercase}
.lb-meta{font-size:0.78rem;color:var(--gray);letter-spacing:0.04em}
.lb-credit{font-size:0.78rem;color:var(--cobalt-light);font-weight:600;margin-left:auto}
@media(max-width:640px){.lb-credit{margin-left:0}}

.prose-link{color:var(--cobalt-pale);border-bottom:1px solid rgba(127,160,245,0.35)}
.prose-link:hover{color:var(--white);border-color:var(--white)}
.season-group + .season-group{margin-top:2.4rem}

/* A standing the series hasn't finished scoring: visible, but never settled. */
.standing.is-prov{border-color:rgba(232,185,59,0.3);border-style:dashed}
.standing .ast{font-style:normal;color:var(--gold);font-size:0.7em;vertical-align:super;margin-left:1px}
.tag.prov{background:rgba(232,185,59,0.16);color:var(--gold);border:1px solid rgba(232,185,59,0.45)}

/* ===========================================================================
   HOME PAGE BLOCKS
   =========================================================================== */

/* Oversized display headline used across the home page sections. */
.big{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(2.4rem,6.4vw,4.6rem);line-height:0.95;letter-spacing:-0.005em;
  margin:0 0 1.6rem;text-wrap:balance;
}
.big.sm{font-size:clamp(1.9rem,4.6vw,3.2rem);margin-bottom:1.2rem}
.big em{font-style:normal;color:var(--cobalt-light)}
.story-copy{color:var(--cobalt-pale);line-height:1.7;max-width:38ch;font-size:0.9rem}
.story-copy p{margin:0 0 1.1rem}

.story{display:grid;gap:2.6rem;grid-template-columns:1fr;align-items:start}
@media(min-width:900px){.story{grid-template-columns:1.05fr 0.95fr;gap:3.4rem}}
.story-shot{margin:0}
.story-shot img{width:100%;height:100%;object-fit:cover;border-radius:4px;
  filter:grayscale(1) contrast(1.06);aspect-ratio:4/5}

.then-now{display:flex;align-items:flex-start;gap:clamp(1.2rem,4vw,2.6rem);
  margin-top:2.4rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.then-now .k{display:block;font-family:var(--display);font-size:0.52rem;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--dim);margin-bottom:0.7rem}
.then-now b{font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(0.82rem,1.5vw,0.98rem);line-height:1.35;color:var(--white)}
.then-now b.gold{color:var(--gold)}
.then-now .arrow{align-self:center;color:var(--dim);font-size:1.2rem}

.split-head{display:flex;flex-wrap:wrap;gap:1.2rem 2rem;align-items:flex-end;
  justify-content:space-between;margin-bottom:1.8rem}

/* ------------------------------------------------------------- highlights */
.hl{border-top:1px solid var(--line)}
.hl-head,.hl-row{display:grid;gap:0.8rem;align-items:center;
  grid-template-columns:3.6rem 1fr;padding:0.95rem 0.2rem;border-bottom:1px solid var(--line)}
@media(min-width:840px){
  .hl-head,.hl-row{grid-template-columns:4.4rem 1.5fr 1.2fr 6rem}
}
.hl-head{font-family:var(--display);font-size:0.52rem;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--dim);padding-top:0.7rem;padding-bottom:0.7rem}
.hl-head span:nth-child(3),.hl-head span:nth-child(4){display:none}
@media(min-width:840px){.hl-head span:nth-child(3),.hl-head span:nth-child(4){display:block}}
.hl-row{transition:background 0.2s var(--ease)}
.hl-row:hover{background:rgba(255,255,255,0.025)}
.hl-pos{font-family:var(--display);font-size:1.25rem;line-height:1;color:var(--white);
  font-variant-numeric:tabular-nums}
.hl-pos.win{color:var(--gold)}
.hl-pos.podium{color:var(--cobalt-light)}
.hl-cls{display:block;font-family:var(--display);font-size:0.44rem;letter-spacing:0.06em;
  text-transform:uppercase;color:var(--dim);margin-top:0.3rem;font-style:normal;white-space:nowrap}
.hl-ev b,.hl-vn b{display:block;font-weight:600;font-size:0.92rem;color:var(--cobalt-pale)}
.hl-ev i,.hl-vn i{display:block;font-style:normal;font-size:0.76rem;color:var(--dim);margin-top:0.22rem}
.hl-vn{display:none}
.hl-dt{display:none;font-family:var(--display);font-size:0.6rem;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--cobalt-pale);text-align:right}
@media(min-width:840px){.hl-vn,.hl-dt{display:block}}

/* ------------------------------------------------------------ what's next */
.wn{border-top:1px solid var(--line)}
.wn-row{display:grid;gap:0.6rem 1.2rem;align-items:center;
  grid-template-columns:1fr auto;padding:1rem 0.8rem;border-bottom:1px solid var(--line)}
@media(min-width:760px){.wn-row{grid-template-columns:7.5rem 1fr auto}}
.wn-row.first{background:linear-gradient(90deg,rgba(30,79,224,0.20),rgba(30,79,224,0.02))}
.wn-when{grid-column:1/-1;display:flex;align-items:baseline;gap:0.6rem}
@media(min-width:760px){.wn-when{grid-column:auto;display:block}}
.wn-when i{font-style:normal;display:block;font-family:var(--display);font-size:0.52rem;
  letter-spacing:0.18em;text-transform:uppercase;color:var(--cobalt-pale)}
.wn-when b{font-family:var(--display);font-weight:400;font-size:1.05rem;color:var(--white);
  letter-spacing:0.02em;font-variant-numeric:tabular-nums}
@media(min-width:760px){.wn-when b{display:block;margin-top:0.3rem}}
.wn-ev b{display:block;font-weight:600;font-size:0.98rem;color:var(--white)}
.wn-ev i{display:block;font-style:normal;font-size:0.78rem;color:var(--cobalt-pale);margin-top:0.25rem}
.wn-tag{justify-self:end;padding:0.3rem 0.7rem;border-radius:3px;
  font-family:var(--display);font-size:0.52rem;letter-spacing:0.14em;text-transform:uppercase;
  white-space:nowrap}
.wn-tag.blue{background:var(--cobalt);color:var(--white)}
.wn-tag.gold{background:var(--gold);color:#1A1405}

/* ------------------------------------------------------------ photo band */
.band{position:relative;isolation:isolate}
.band img{width:100%;height:clamp(220px,34vw,420px);object-fit:cover;filter:brightness(0.62)}
.band-copy{position:absolute;inset:0;display:flex;align-items:center;
  padding-left:clamp(1.5rem,10vw,10rem)}
.band-copy p{margin:0;font-family:var(--display);font-style:italic;font-weight:400;
  text-transform:uppercase;color:var(--white);line-height:1.16;
  font-size:clamp(1.3rem,3.4vw,2.3rem);text-shadow:0 4px 26px rgba(0,0,0,0.75)}

/* ------------------------------------------------------------- scroll-btn */
/* Shared by the socials feed and the paddock strip so both sections read
   as one family: a header line, a scrollable row, two round arrow buttons. */
.dot-live{
  width:0.4rem;height:0.4rem;border-radius:50%;background:var(--gold);flex:none;
  box-shadow:0 0 0 3px rgba(232,185,59,0.18);
}
.scroll-btn{
  width:2.1rem;height:2.1rem;border-radius:50%;flex:none;
  border:1px solid var(--line-strong);background:transparent;color:var(--white);
  display:inline-flex;align-items:center;justify-content:center;
  transition:background 0.25s var(--ease),border-color 0.25s var(--ease);
}
.scroll-btn svg{width:0.85rem;height:0.85rem}
.scroll-btn:hover{background:var(--cobalt);border-color:var(--cobalt)}

/* ------------------------------------------------------------- ig-feed -- */
.ig-feed{display:flex;gap:0.9rem;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:0.3rem;scrollbar-width:none;-ms-overflow-style:none}
.ig-feed::-webkit-scrollbar{display:none}
.ig-feed:empty{display:none}
.ig-feed-card{
  position:relative;flex:none;scroll-snap-align:start;
  width:clamp(11rem,26vw,15rem);border-radius:6px;overflow:hidden;
  border:1px solid var(--line);background:var(--panel);
  text-decoration:none;color:inherit;display:block;
}
.ig-feed-card .thumb{display:block;position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--ink)}
.ig-feed-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s var(--ease)}
.ig-feed-card:hover .thumb img{transform:scale(1.045)}
.ig-feed-card .kind{
  position:absolute;top:0.55rem;left:0.55rem;padding:0.28rem 0.55rem;border-radius:3px;
  background:rgba(6,7,10,0.72);backdrop-filter:blur(2px);
  font-family:var(--display);font-size:0.44rem;letter-spacing:0.13em;text-transform:uppercase;
  display:flex;align-items:center;gap:0.35rem;color:var(--white);
}
.ig-feed-card .kind svg{width:0.62rem;height:0.62rem}
.ig-feed-card .body{display:block;padding:0.8rem 0.9rem 0.95rem}
.ig-feed-card .cap{
  margin:0;font-size:0.82rem;line-height:1.5;color:var(--gray);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.ig-feed-card .when{
  display:block;margin-top:0.5rem;font-family:var(--display);font-size:0.44rem;
  letter-spacing:0.12em;text-transform:uppercase;color:var(--cobalt-light);
}

/* --------------------------------------------------------- media-feature */
.media-feature{display:grid;gap:0.6rem;grid-template-columns:1.7fr 1fr}
.feature-main{
  position:relative;display:block;border-radius:6px;overflow:hidden;
  border:1px solid var(--line);background:var(--panel);aspect-ratio:8/3;
}
.feature-main img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s var(--ease)}
.feature-main:hover img{transform:scale(1.03)}
.feature-cap{
  position:absolute;left:0;right:0;bottom:0;padding:1rem 1.1rem;
  background:linear-gradient(0deg,rgba(6,7,10,0.88) 0%,rgba(6,7,10,0.3) 70%,transparent 100%);
  font-size:0.94rem;font-weight:600;color:var(--white);
}
.feature-cap i{display:block;margin-top:0.15rem;font-style:normal;font-size:0.76rem;font-weight:400;color:var(--gray)}
.feature-side{display:flex;flex-direction:column;gap:0.6rem;height:100%}
.feature-side a{
  position:relative;display:block;flex:1;border-radius:6px;overflow:hidden;min-height:0;
  border:1px solid var(--line);background:var(--panel);aspect-ratio:3.15/1;
}
.feature-side img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s var(--ease)}
.feature-side a:hover img{transform:scale(1.05)}
@media(max-width:759px){
  .media-feature{grid-template-columns:1fr;grid-template-rows:auto auto}
  .feature-main{aspect-ratio:16/5}
  .feature-side{flex-direction:row;height:auto}
  .feature-side a{aspect-ratio:1/1;flex:1 1 0}
}

/* ---------------------------------------------------------------- paddock */
.paddock{display:flex;gap:0.6rem;overflow-x:auto;padding-bottom:0.2rem;scrollbar-width:none;-ms-overflow-style:none}
.paddock::-webkit-scrollbar{display:none}
.paddock a{
  position:relative;flex:1 1 clamp(4.6rem,13vw,7rem);display:block;overflow:hidden;border-radius:5px;
  border:1px solid var(--line);background:var(--panel);
  aspect-ratio:1/1;
}
.paddock img{width:100%;height:100%;object-fit:cover;transition:transform 0.4s var(--ease)}
.paddock a:hover img{transform:scale(1.06)}

.credits-note{color:var(--dim);font-size:0.76rem}

/* ---------------------------------------------------------------- support */
.sup-row{display:grid;gap:0;grid-template-columns:1fr;border:1px solid var(--line);border-radius:4px;
  overflow:hidden}
@media(min-width:760px){.sup-row{grid-template-columns:repeat(4,1fr)}}
.sup{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;
  gap:0.45rem;padding:1.7rem 1.2rem;border-top:1px solid var(--line);min-height:8.5rem}
@media(min-width:760px){.sup{border-top:0;border-left:1px solid var(--line)}
  .sup-row .sup:first-child{border-left:0}}
.sup b{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:0.72rem;
  letter-spacing:0.06em;line-height:1.45;color:var(--white)}
.sup i{font-style:normal;font-family:var(--display);font-size:0.52rem;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--cobalt-light);line-height:1.6}
.sup span{font-family:var(--display);font-size:0.5rem;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--dim)}
a.sup{transition:background 0.25s var(--ease)}
a.sup:hover{background:rgba(30,79,224,0.1)}

/* ------------------------------------------------------------ map, extras */
.venue-side .section-label{margin-bottom:0.9rem}
.states{display:flex;flex-wrap:wrap;gap:0.5rem;align-items:center;margin-top:1.1rem;
  font-family:var(--display);font-size:0.62rem;letter-spacing:0.16em;color:var(--white)}
.states i{font-style:normal;color:var(--dim)}
.states-note{margin-top:0.5rem;font-family:var(--display);font-size:0.52rem;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--dim)}

/* ------------------------------------------------------------------ footer */
.foot-top{display:grid;gap:2rem;grid-template-columns:1fr;padding:0 0 2rem}
@media(min-width:760px){.foot-top{grid-template-columns:1fr auto;gap:3rem}}
.foot-badge img{height:2.6rem;width:auto}
.foot-line{margin:1.4rem 0 0;font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.3rem,3.2vw,2.1rem);line-height:1.1;color:var(--white)}
.foot-nav{display:flex;flex-direction:column;gap:0.55rem}
.foot-nav a{font-family:var(--display);font-size:0.58rem;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--gray);transition:color 0.2s var(--ease)}
.foot-nav a:hover{color:var(--white)}

.sup.has-mark{padding:1.5rem 1.6rem}
.sup img{width:auto;max-width:min(190px,100%);max-height:3.1rem;height:auto;object-fit:contain;
  transition:opacity 0.25s var(--ease)}
.sup.has-mark:hover img{opacity:0.85}

/* ===========================================================================
   MOBILE — the header nav wrapped to three lines and covered the hero.
   One scrolling row instead, and the sound control moves clear of it.
   =========================================================================== */
@media(max-width:820px){
  .site-header{gap:0.7rem;padding:0.6rem 0.9rem}
  .mark img{height:2rem}
  .ig-btn{width:2.1rem;height:2.1rem}
  .ig-btn svg{width:1rem;height:1rem}
  .site-header{justify-content:flex-start;gap:0.6rem;padding:0.55rem 0.9rem}
  /* The badge and menu ride over the picture — that part's fine. */
  .site-header.over{
    background:linear-gradient(180deg,rgba(6,7,10,0.85) 0%,rgba(6,7,10,0.45) 65%,transparent 100%);
  }
  .site-header.open.over{background:rgba(6,7,10,0.97);backdrop-filter:blur(14px)}
  .mark img{height:2.2rem}
  /* Kept visible in the header bar (not hidden/moved into the menu) —
     social matters more on mobile, per Tony. Sits right of the menu
     button, both pushed flush right by .nav-toggle's margin-left:auto. */
  /* Seven links will not sit in a phone-width row — collapse to a menu. */
  .nav{
    position:absolute;top:100%;left:0;right:0;z-index:70;
    display:none;flex:none;flex-direction:column;align-items:stretch;gap:0;
    background:rgba(6,7,10,0.97);backdrop-filter:blur(14px);
    border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    padding:0.3rem 0;box-shadow:0 18px 40px rgba(0,0,0,0.55);
  }
  .site-header.open .nav{display:flex}
  .nav a{
    padding:0.9rem 1.1rem;font-size:0.68rem;text-shadow:none;
    border-bottom:1px solid rgba(127,160,245,0.08);
  }
  .nav a:last-child{border-bottom:0}
  .nav a[aria-current="page"]::after{left:1.1rem;right:auto;width:1.5rem;bottom:0.6rem}

  /* Tucked under the one-row header, clear of the lockup below. */
  /* Sits inside the picture, low-right, clear of the menu button. */
  .soundbtn{top:calc(min(56vh,450px) - 3.1rem);bottom:auto;padding:0.5rem 0.9rem;font-size:0.5rem}
}
@media(max-width:820px){
  /* The copy sits IN the hero rather than pinned to its floor, so the box
     always grows to hold it — no more spilling over the video. */
  /* The video/photo gets the whole top band to itself; the name, chip and
     stats sit underneath on black instead of covering the picture. */
  .hero{height:auto;min-height:0;display:block;padding-top:min(56vh,450px)}
  .hero .layer{height:min(56vh,450px);bottom:auto}
  .hero-copy{position:relative;inset:auto;width:100%;background:var(--black);
    padding-top:1.1rem;padding-bottom:clamp(1rem,4vw,1.6rem)}
  .hero-copy .statbar{border-top-color:var(--line)}
  .lockup{width:min(560px,78vw)}
  .hero-copy .chip-row{margin-bottom:0.75rem}
  /* Two tidy rows instead of a ragged wrap. */
  .hero-copy .statbar{margin-top:0.9rem;padding-top:0.85rem;
    display:grid;grid-template-columns:auto 1fr;gap:0.3rem 1rem;
    align-items:center;justify-items:start}
  .hero-copy .statbar .num{font-size:2.7rem;grid-row:span 3;align-self:center}
  .hero-copy .statbar .stat{flex-direction:row;align-items:baseline;gap:0.5rem}
  .hero-copy .statbar .stat .k{min-width:3.9rem}
  .hero-copy .statbar .stat .v{margin-top:0}
  .hero-copy .statbar .result{grid-column:1/-1;width:100%;margin-left:0;margin-top:0.4rem}
  .vidcredit{margin-top:0.6rem}
}

/* ------------------------------------------------------------- nav toggle */
.nav-toggle{display:none}
@media(max-width:820px){
  .nav-toggle{
    display:inline-flex;flex-direction:column;justify-content:center;gap:4px;
    width:2.4rem;height:2.4rem;padding:0 0.55rem;flex-shrink:0;margin-left:auto;
    border:1px solid var(--line-strong);border-radius:7px;
    background:rgba(6,7,10,0.5);backdrop-filter:blur(4px);
  }
  .nav-toggle span{
    display:block;height:1.6px;border-radius:1px;background:var(--white);
    transition:transform 0.25s var(--ease),opacity 0.2s var(--ease);
  }
  .site-header.open .nav-toggle{border-color:var(--cobalt-light)}
  .site-header.open .nav-toggle span:nth-child(1){transform:translateY(5.6px) rotate(45deg)}
  .site-header.open .nav-toggle span:nth-child(2){opacity:0}
  .site-header.open .nav-toggle span:nth-child(3){transform:translateY(-5.6px) rotate(-45deg)}
}

/* ------------------------------------------------- map <-> venue linking */
.map .venue{cursor:pointer}
.venue-list li{cursor:pointer;transition:background 0.2s var(--ease)}
.venue-list li:hover{background:rgba(127,160,245,0.06)}
.map.has-sel .venue{opacity:0.3}
.map .venue.sel{opacity:1;fill:var(--gold);filter:drop-shadow(0 0 3px rgba(232,185,59,0.9))}
.map.has-sel .arc{opacity:0.1}
.map .arc.sel{opacity:0.95;stroke:var(--gold);stroke-width:0.42}
.venue-list li.sel{background:rgba(232,185,59,0.10);
  box-shadow:inset 3px 0 0 var(--gold)}
.venue-list li.sel b{color:var(--gold)}
.venue-list li.sel i{color:var(--gold)}

/* A pinned track reads a little stronger than a hovered one. */
.map .venue.sel.pin{filter:drop-shadow(0 0 5px rgba(232,185,59,1))}
.venue-list li.sel.pin{background:rgba(232,185,59,0.16)}
.venue-list li{outline-offset:-2px}

/* ------------------------------------------------------------- track card */
.track-card{
  position:absolute;left:3%;top:50%;z-index:5;transform:translateY(-50%) translateX(-6px);
  width:min(300px,46%);padding:0.95rem 1.05rem;border-radius:6px;
  border:1px solid var(--line-strong);background:rgba(8,11,17,0.97);
  backdrop-filter:blur(8px);box-shadow:0 16px 40px rgba(0,0,0,0.55);
  opacity:0;pointer-events:none;transition:opacity 0.22s var(--ease),transform 0.22s var(--ease);
}
.track-card.on{opacity:1;transform:translateY(-50%) translateX(0)}
.tc-head b{display:block;font-family:var(--display);font-size:0.7rem;line-height:1.4;
  text-transform:uppercase;color:var(--gold)}
.tc-head span{display:block;margin-top:0.3rem;font-family:var(--display);font-size:0.5rem;
  letter-spacing:0.15em;text-transform:uppercase;color:var(--dim)}
.tc-map{width:100%;height:auto;margin:0.8rem 0 0.2rem;opacity:0.9}
.tc-list{list-style:none;margin:0.8rem 0 0;padding:0.7rem 0 0;
  border-top:1px solid var(--line);display:flex;flex-direction:column;gap:0.5rem}
.tc-list li{display:grid;grid-template-columns:1fr auto;gap:0.15rem 0.6rem;font-size:0.76rem}
.tc-list .d{grid-column:1/-1;font-family:var(--display);font-size:0.46rem;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--dim)}
.tc-list .e{color:var(--gray);line-height:1.35}
.tc-list .r{color:var(--white);font-weight:600;white-space:nowrap;text-align:right}
.tc-none{margin:0.8rem 0 0;padding-top:0.7rem;border-top:1px solid var(--line);
  color:var(--dim);font-size:0.76rem}
@media(max-width:700px){.track-card{position:static;transform:none;width:auto;margin-top:0.8rem}
  .track-card.on{transform:none}}

@media(min-width:1000px){.one-line{white-space:nowrap}}

.head-btns{display:flex;gap:0.6rem;flex-wrap:wrap;align-items:center}

/* map credit + track outline card ------------------------------------ */
.map-credit{margin:1.1rem 0 0;font-size:0.66rem;letter-spacing:0.06em;color:var(--dim);text-transform:uppercase;font-family:var(--display)}
.map-credit a{color:var(--dim);text-decoration:underline;text-underline-offset:2px}
.map-credit a:hover{color:var(--cobalt-pale)}
.tc-map{display:block;width:100%;max-width:235px;margin:0.9rem auto 0.4rem;height:auto;opacity:1;
  filter:drop-shadow(0 0 8px rgba(63,111,240,0.45))}
/* No per-image pop-in animation here on purpose: each tap swaps in a new
   .tc-map element, and animating its entrance meant tapping through venues
   faster than the animation's own length (520ms) restarted it mid-fade on
   the next tap — reading as the outline getting stuck flipping instead of
   settling. The card's own opacity/transform transition (below) is the
   only motion on switch, and it always completes cleanly. */

/* keep the card inside the map, however many results a venue has */
.track-card{max-height:94%;display:flex;flex-direction:column}
.track-card .tc-list{overflow-y:auto;min-height:0;flex:1 1 auto;scrollbar-width:none;-ms-overflow-style:none}
.track-card .tc-list::-webkit-scrollbar{display:none}
.track-card .tc-map{flex:0 0 auto;width:auto;height:auto;max-width:100%;max-height:145px;
  margin:0.85rem auto 0.35rem;object-fit:contain}
@media(max-width:700px){.track-card{max-height:none;display:block}}


/* Standing cards on a phone -------------------------------------------------
   The desktop layout is a wrapping flex row with `.pts` pushed right by
   margin-left:auto. On a narrow screen the wrap point depends on how long the
   note is, so the points and the status tag landed in a different spot on
   every card. Below 640px use an explicit grid: number top-left, title and
   notes beside it, then one consistent footer row — points left, tag right. */
@media(max-width:640px){
  .standing{
    display:grid;
    grid-template-columns:auto 1fr auto;
    grid-template-areas:"pos meta meta" "pos pts tag";
    align-items:center;
    gap:0.55rem 0.9rem;
    padding:1rem 1.05rem;
  }
  .standing .pos{grid-area:pos;align-self:start;min-width:2.4rem}
  .standing .meta{grid-area:meta;min-width:0}
  .standing .pts{grid-area:pts;margin-left:0;justify-self:start;align-self:center}
  .standing .tag{grid-area:tag;justify-self:end;align-self:center}
}


/* Track outline: visible by default, no entrance animation (see note above
   the .tc-map rule) — the reveal used to be `animation: tcIn`, which is
   what caused the stuck-mid-flip look on quick taps. */
.tc-map{opacity:1}
.track-card.on{pointer-events:auto}
@media(max-width:700px){
  .track-card{opacity:1}
  .track-card:not(.on){display:none}
}


/* Track outline sizing ------------------------------------------------------
   iOS Safari will not lay out an <img> pointing at an SVG that has no
   intrinsic size when the CSS also says width:auto/height:auto — it collapses
   to nothing, which is exactly how the outlines vanished on a phone while
   working on desktop. The SVGs now carry width/height attributes, and these
   rules give the image a definite width instead of leaving it to `auto`. */
.tc-map,
.track-card .tc-map{
  display:block;
  width:100%;
  max-width:235px;
  height:auto;
  max-height:none;
  margin:0.9rem auto 0.4rem;
  opacity:1;
}
@media(min-width:701px){
  .track-card .tc-map{max-height:145px;object-fit:contain;width:auto;max-width:100%}
}


/* Tables on a phone ---------------------------------------------------------
   Every table sets min-width:520px inside an overflow-x wrapper, so on a
   390px screen the right-hand columns sat off the edge — the Final column,
   the result, and the footnote were all unreachable, with nothing on screen
   to say the table scrolled. Below 700px the rows become stacked cards:
   each cell on its own line with its column name beside it, nothing clipped
   and nothing to swipe. The `data-l` labels come from render.js. */
@media(max-width:700px){
  .table-scroll{overflow-x:visible;border:0;border-radius:0}
  .table-scroll table{min-width:0;width:100%;display:block;font-size:0.9rem}
  .table-scroll thead{display:none}
  .table-scroll tbody{display:block}

  .table-scroll tbody tr{
    display:block;
    border:1px solid var(--line);
    border-radius:6px;
    padding:0.55rem 0.85rem 0.7rem;
    margin-bottom:0.6rem;
    background:linear-gradient(180deg,rgba(255,255,255,0.035),rgba(255,255,255,0.01));
  }
  .table-scroll tbody tr:hover td{background:none}

  .table-scroll tbody td{
    display:flex;
    gap:0.9rem;
    align-items:baseline;
    justify-content:space-between;
    padding:0.32rem 0;
    border-bottom:0;
    text-align:right;
  }
  .table-scroll tbody td:before{
    content:attr(data-l);
    flex:0 0 auto;
    text-align:left;
    font-family:var(--display);
    font-size:0.5rem;
    letter-spacing:0.15em;
    text-transform:uppercase;
    color:var(--dim);
    white-space:nowrap;
  }
  .table-scroll tbody td[data-l=""]{justify-content:flex-end;padding-top:0.15rem}
  .table-scroll tbody td[data-l=""]:before{content:none}

  /* The round/date cell reads as the card's title, full width, no label. */
  .table-scroll tbody td.rowhead{
    display:block;
    text-align:left;
    padding:0 0 0.5rem;
    margin-bottom:0.45rem;
    border-bottom:1px solid var(--line);
    font-size:1rem;
    color:var(--white);
  }
  .table-scroll tbody td.rowhead:before{content:none}
  .table-scroll tbody td.rowhead .muted{font-size:0.78rem}

  /* Long notes and venue names read better left-aligned under their label. */
  .table-scroll tbody td .muted{display:block;text-align:right}

  /* Event and Venue cells can run long and wrap unpredictably, which made
     every card a different shape. Give those two a fixed stacked layout —
     label on its own line, value below, left-aligned — so every card reads
     the same regardless of how long the text is. */
  .table-scroll tbody td[data-l="Event"],
  .table-scroll tbody td[data-l="Venue"]{
    display:block;text-align:left;
  }
  .table-scroll tbody td[data-l="Event"]:before,
  .table-scroll tbody td[data-l="Venue"]:before{
    display:block;margin-bottom:0.22rem;
  }
  .table-scroll tbody td[data-l="Event"] .muted,
  .table-scroll tbody td[data-l="Venue"] .muted{
    text-align:left;margin-top:0.1rem;
  }

  /* The footnote is a <caption>: pull it out of the table box entirely. */
  .table-scroll caption{
    display:block;
    caption-side:bottom;
    width:100%;
    text-align:left;
    padding:0.2rem 0.15rem 0;
    font-size:0.76rem;
    line-height:1.55;
    color:var(--dim);
  }
}

/* ===========================================================================
   SOCIAL FOLLOWER BADGES (added 2026-09-02)
   Small pill on the header IG/FB icons, populated by assets/js/social-counts.js
   from the Cloudflare Worker's /followers endpoint. Hidden by default —
   only shown once a real number has loaded, so nothing ever flashes "--" or
   "undefined" while the fetch is in flight or if it fails.
   =========================================================================== */
.social-badge-wrap{position:relative;display:inline-flex}
.follower-badge{
  position:absolute;top:-0.5rem;right:-0.5rem;
  background:var(--cobalt);color:var(--white);
  font-family:var(--display);font-size:0.5rem;letter-spacing:0.02em;
  padding:0.12rem 0.34rem;border-radius:99px;line-height:1.4;
  border:1.5px solid var(--black);white-space:nowrap;pointer-events:none;
}
.follower-badge[hidden]{display:none}
@media(max-width:820px){
  /* Social matters more on mobile, not less — the icon+badge pair stays
     visible in the header bar itself (see the .ig-btn override near the
     nav-toggle rules) instead of being tucked away. Badge sized down a
     touch to fit the smaller mobile button. */
  .follower-badge{
    top:-0.4rem;right:-0.4rem;font-size:0.46rem;padding:0.1rem 0.3rem;
  }
}