/* ============================================================
   Motorsport Inc — design system + sections
   Dark, high-contrast, condensed display type, motorsport skew.
   ============================================================ */

:root{
  --ink:#08080a; --ink-2:#0e0e11; --surf:#15151a; --surf-2:#1c1c22;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.17);
  --txt:#f4f2ef; --txt-2:#a5a29d; --txt-3:#6e6b67;
  --red:#e8362b; --red-hot:#ff4a37; --ember:#ff6a2b;
  --dust:#e9a23b; --dust-2:#f5c987; --grn:#7ac878; --violet:#b98cf0;
  --disp:'Clash Display',sans-serif;
  --body:'Barlow',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --max:1340px; --pad:32px; --skew:-11deg;
  --ease:cubic-bezier(.2,.7,.3,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--ink);-webkit-text-size-adjust:100%}
body{background:var(--ink);color:var(--txt);font-family:var(--body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:clip}
body.lock{overflow:hidden}
img,video,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:2px solid var(--dust);outline-offset:3px}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad);position:relative;z-index:2}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* grain */
body::after{content:'';position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- type ---------- */
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--dust);font-weight:500;display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:'';width:24px;height:1px;background:currentColor;opacity:.6;flex:none}
.h-xl{font-family:var(--disp);font-weight:700;font-size:clamp(52px,8.6vw,140px);line-height:.85;
  letter-spacing:-.025em;text-transform:uppercase}
.h-lg{font-family:var(--disp);font-weight:700;font-size:clamp(38px,5.6vw,86px);line-height:.9;
  letter-spacing:-.02em;text-transform:uppercase}
.h-md{font-family:var(--disp);font-weight:700;font-size:clamp(24px,2.9vw,38px);line-height:1;
  text-transform:uppercase;letter-spacing:-.005em}
.lead{font-size:clamp(16px,1.3vw,19px);color:var(--txt-2);max-width:56ch}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.outline{-webkit-text-stroke:1.4px rgba(255,255,255,.5);color:transparent}
.hatch{background-image:repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 2px,transparent 2px 9px)}

/* line-mask reveal (GSAP drives .is-in) */
.ln{display:block;overflow:hidden;padding-block:.06em .16em;margin-block:-.06em -.16em}
.ln>span{display:block;transform:translateY(115%);will-change:transform}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--disp);font-weight:700;font-size:16px;letter-spacing:.09em;text-transform:uppercase;
  padding:15px 30px;border:1px solid transparent;transition:.25s var(--ease);white-space:nowrap;overflow:hidden}
.btn>span{position:relative;z-index:2}
.btn-red{background:var(--red);color:#fff;transform:skewX(var(--skew))}
.btn-red>span{transform:skewX(calc(var(--skew) * -1))}
.btn-red::before{content:'';position:absolute;inset:0;background:linear-gradient(100deg,var(--red-hot),var(--ember));
  transform:translateX(-101%);transition:transform .4s var(--ease)}
.btn-red:hover::before{transform:none}
.btn-red:hover{transform:skewX(var(--skew)) translateY(-2px);box-shadow:0 14px 34px -14px rgba(255,74,55,.75)}
.btn-ghost{border-color:var(--line-2);color:var(--txt)}
.btn-ghost::before{content:'';position:absolute;inset:0;background:rgba(255,255,255,.08);
  transform:scaleY(0);transform-origin:bottom;transition:transform .32s var(--ease)}
.btn-ghost:hover::before{transform:none}
.btn-ghost:hover{border-color:var(--txt)}
.btn-block{width:100%;transform:none}
.btn-block>span{transform:none}
.btn-red.btn-block:hover{transform:translateY(-2px)}

/* ---------- preloader ---------- */
#pre{position:fixed;inset:0;z-index:9999;background:var(--ink);display:grid;place-items:center}
.pre-in{width:min(420px,72vw);text-align:center}
.pre-mark{font-family:var(--disp);font-weight:700;font-size:clamp(30px,5vw,52px);line-height:.9;
  text-transform:uppercase;letter-spacing:-.02em;margin-bottom:22px}
.pre-mark em{font-style:normal;color:var(--red)}
.pre-bar{height:2px;background:rgba(255,255,255,.12);overflow:hidden}
.pre-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--red),var(--ember),var(--dust))}
.pre-pct{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--txt-3);margin-top:12px}

/* ---------- header ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:900;transition:background-color .4s,border-color .4s,transform .4s var(--ease)}
header.solid{background:rgba(8,8,10,.82);-webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4);border-bottom:1px solid var(--line)}
header.hide{transform:translateY(-100%)}
/* The ticker text genuinely, continuously scrolls (Web Animations API,
   verified) — a marquee always shows a word mid-cut in any single frame,
   that's inherent to scrolling text, not a bug. What the hard overflow:hidden
   edge was missing is a soft fade, so a clipped word reads as "flowing past"
   rather than "chopped off".
   This used mask-image first, which rendered fine in desktop testing but
   turned out not to soften anything on a real device — WebKit is the engine
   behind every iOS browser (Safari, Chrome-on-iOS, all of them), and there's
   no way to test that engine from this machine, so a masking approach can't
   be verified here at all. Plain ::before/::after gradient overlays instead:
   a background-color fade, not a mask — every browser has rendered this
   identically for over a decade, nothing engine-specific to get wrong. */
.ticker{background:var(--ink-2);border-bottom:1px solid var(--line);overflow:hidden;height:30px;display:flex;align-items:center;position:relative}
.ticker::before,.ticker::after{content:'';position:absolute;top:0;bottom:0;width:32px;z-index:2;pointer-events:none}
.ticker::before{left:0;background:linear-gradient(90deg,var(--ink-2),transparent)}
.ticker::after{right:0;background:linear-gradient(270deg,var(--ink-2),transparent)}
.tk{display:flex;flex:none;align-items:center;will-change:transform}
.tk span{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--txt-2);white-space:nowrap;padding:0 20px;display:inline-flex;align-items:center;gap:9px}
.tk span::after{content:'';width:4px;height:4px;background:var(--txt-3);transform:rotate(45deg)}
.tk em{font-style:normal;color:var(--dust)}
.tk b{color:var(--grn);font-weight:500;display:inline-flex;align-items:center;gap:7px}
.tk b::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--grn);animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(122,200,120,.6)}50%{opacity:.6;box-shadow:0 0 0 7px rgba(122,200,120,0)}}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:var(--max);
  margin:0 auto;padding:15px var(--pad)}
.brand img{height:38px;width:auto}
.nav-links{display:flex;gap:32px;font-family:var(--disp);font-weight:700;font-size:16px;
  letter-spacing:.1em;text-transform:uppercase}
.nav-links a{color:var(--txt-2);position:relative;padding:4px 0;transition:color .2s}
.nav-links a:hover{color:var(--txt)}
.nav-links a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--red);transition:width .3s var(--ease)}
.nav-links a:hover::after{width:100%}
.nav-links a.on{color:var(--txt)}
.nav-links a.on::after{width:100%}
.nb{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:3px;background:var(--ember);
  color:#08080a;font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.04em;
  vertical-align:2px;line-height:1.5}
.mnav a .nb{font-size:12px;padding:2px 8px;margin-left:10px;vertical-align:5px}
.burger{display:none;flex-direction:column;gap:5px;padding:8px}
.burger span{width:24px;height:2px;background:var(--txt);transition:.28s var(--ease)}
.burger.on span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.on span:nth-child(2){opacity:0}
.burger.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mnav{position:fixed;inset:0;z-index:890;background:var(--ink);display:flex;flex-direction:column;
  justify-content:center;padding:0 24px;opacity:0;pointer-events:none;transition:opacity .35s}
.mnav.on{opacity:1;pointer-events:auto}
.mnav a:not(.btn){font-family:var(--disp);font-weight:700;font-size:clamp(32px,9vw,56px);text-transform:uppercase;
  line-height:1.06;padding:10px 0;border-bottom:1px solid var(--line);color:var(--txt-2);
  display:flex;justify-content:space-between;align-items:baseline;opacity:0;transform:translateY(20px);transition:.45s var(--ease)}
.mnav.on a:not(.btn){opacity:1;transform:none}
.mnav a i{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--txt-3)}
.mnav a.on{color:var(--txt)}
/* the CTA is a real .btn (skewed pill, gradient hover) — it must not inherit
   the plain nav-row treatment above just because it's also an <a> in here */
.mnav .btn{align-self:center;margin-top:28px;opacity:0;transform:translateY(20px) skewX(var(--skew));transition:.45s var(--ease)}
.mnav.on .btn{opacity:1;transform:skewX(var(--skew))}

/* ---------- the season ----------
   Fan-facing: the whole season is the first screen. One spotlight for whatever's
   live, open or next, and every event series (not every edition) as a small
   card in a strip underneath — so the hero stays a hero regardless of how many
   rounds the calendar holds. */
.season{position:relative;height:100svh;min-height:600px;display:flex;flex-direction:column;
  background:#08080A;overflow:hidden;padding:104px 0 0}

.s-hero{position:relative;flex:1;min-height:0;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;justify-content:flex-end;
  opacity:0;transition:opacity .6s ease}
.season.ready .s-hero{opacity:1}
.s-hero>*{transition:opacity .2s ease}
.s-hero.is-switching>*{opacity:.15}

.s-hero-bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.s-hero-bg img{width:100%;height:100%;object-fit:cover;filter:saturate(1.05) brightness(.55);
  animation:heroSettle 9s var(--ease) both}
@keyframes heroSettle{from{transform:scale(1.07)}to{transform:scale(1)}}
.s-hero::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(8,8,10,.1) 0%,rgba(8,8,10,.5) 58%,rgba(8,8,10,.95) 100%),
    linear-gradient(100deg,rgba(8,8,10,.75) 0%,transparent 55%)}

.s-hero-in{position:relative;z-index:1;display:flex;flex-direction:column;
  gap:clamp(10px,1.6vw,16px);max-width:900px;
  padding:clamp(26px,4vw,52px) clamp(20px,3.4vw,52px)}
.s-hero-top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.s-round{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-3)}

.s-tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--txt-3);border:1px solid var(--line-2);
  border-radius:20px;padding:6px 12px 6px 10px;flex:none}
.s-tag i{width:6px;height:6px;border-radius:50%;background:var(--txt-3);flex:none}
.s-tag.st-live{color:var(--red-hot);border-color:rgba(255,74,55,.5)}
.s-tag.st-live i{background:var(--red-hot);animation:pulse 1.5s infinite}
.s-tag.st-open{color:var(--grn);border-color:rgba(122,200,120,.5)}
.s-tag.st-open i{background:var(--grn);animation:pulse 2s infinite}
.s-tag.st-soon,.s-tag.st-tbc{color:var(--dust)}
.s-tag.st-soon i,.s-tag.st-tbc i{background:var(--dust)}

/* align-self:flex-start is load-bearing: .s-hero-in is a column flexbox, whose
   default align-items:stretch forces this <img> to the container's full width
   before max-height ever gets a say — decoupling width from height and
   distorting the logo. align-self:flex-start on the wrapper (not the image
   itself, now that it sits inside one) opts the whole group out of stretch
   so the image can size from its own intrinsic ratio instead. */
.s-mark-wrap{position:relative;align-self:flex-start;display:inline-block}
/* max-width used to be 100% of .s-mark-wrap, an inline-block that sizes to
   fit the image itself — effectively a no-op. Event logos aren't uniform
   proportions (most are ~1.7-2.2:1, but a plain single-line wordmark can run
   much flatter/wider), and height-only clamping let an unusually wide one
   render several times wider than its siblings at the same height. This caps
   width too, so the taller-ratio logos are unaffected (they top out around
   270px at max height, well under this) while an outlier gets held to a
   comparable footprint instead of dominating the hero. */
.s-mark{width:auto;height:auto;max-height:clamp(64px,9vw,120px);max-width:min(70vw,340px);
  filter:drop-shadow(0 10px 30px rgba(0,0,0,.7))}
.s-word{font-family:var(--disp);font-weight:700;font-size:clamp(38px,6.4vw,84px);line-height:.9;
  text-transform:uppercase;letter-spacing:-.02em}
.s-word em{font-style:normal;color:var(--dust)}
/* Poster-scale ghost numeral, anchored to the logo specifically (not the
   hero card) so it can never drift down into the countdown/CTA no matter
   how tall the rest of the content stack gets. Just the edition — the logo
   already spells out the event name, so this doesn't repeat it. */
.s-poster{position:absolute;left:0;bottom:0;z-index:-1;pointer-events:none;
  font-family:var(--disp);font-weight:700;line-height:.8;letter-spacing:-.02em;
  color:transparent;-webkit-text-stroke:1.5px rgba(244,242,239,.18);
  font-size:clamp(72px,min(20vw,20svh),260px);white-space:nowrap}
.s-meta{display:flex;flex-wrap:wrap;gap:8px 24px;font-family:var(--mono);font-size:12px;
  letter-spacing:.05em;text-transform:uppercase;color:var(--txt-2)}
.s-hero-in .cd{margin-top:0}
.s-blurb{color:var(--txt-2);font-size:clamp(14px,1.15vw,16.5px);max-width:56ch;line-height:1.55}
.s-actions{display:flex;flex-wrap:wrap;gap:14px}

.s-strip-shell{flex:none;border-top:1px solid var(--line);background:var(--ink-2);
  padding:14px 0 16px;opacity:0;transform:translateY(10px);
  transition:opacity .6s ease .12s,transform .6s var(--ease) .12s}
.season.ready .s-strip-shell{opacity:1;transform:none}
.s-strip-label{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:nowrap;
  padding:0 clamp(20px,3.4vw,52px) 10px;font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--txt-3);white-space:nowrap}
.s-strip-label b{color:var(--dust);font-weight:500}
/* The fade used to end at 24px from the edge, almost entirely inside the
   container's own 20-52px padding — by the time it reached actual card
   pixels there was only a few px left to fade through, so a card at the
   edge went from fully visible to hard-clipped rather than visibly fading.
   Widening it so the fade genuinely crosses into the card as it exits. */
.s-strip{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;
  padding:0 clamp(20px,3.4vw,52px) 4px;-ms-overflow-style:none;scrollbar-width:none;
  mask-image:linear-gradient(90deg,transparent 0,#000 64px,#000 calc(100% - 64px),transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 64px,#000 calc(100% - 64px),transparent 100%)}
.s-strip::-webkit-scrollbar{display:none}

.s-card{position:relative;flex:0 0 auto;width:clamp(116px,15vw,158px);height:92px;
  scroll-snap-align:start;border-radius:10px;border:1px solid var(--line-2);background:var(--surf);
  overflow:hidden;isolation:isolate;text-align:left;padding:10px;
  display:flex;flex-direction:column;justify-content:flex-end;gap:4px;
  transition:border-color .25s,transform .25s}
.s-card:hover{transform:translateY(-2px)}
.s-card-bg{position:absolute;inset:0;z-index:-2}
.s-card-bg img{width:100%;height:100%;object-fit:cover;filter:saturate(.5) brightness(.4);
  opacity:.6;transition:filter .3s,opacity .3s}
.s-card::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(8,8,10,.15),rgba(8,8,10,.9))}
.s-card-name{font-family:var(--disp);font-weight:700;font-size:13px;line-height:1.08;
  text-transform:uppercase;letter-spacing:-.01em;color:var(--txt-2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.s-card-sub{font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3)}
.s-card.st-open .s-card-sub{color:var(--grn)}
.s-card.st-soon .s-card-sub{color:var(--dust)}
.s-card.is-active{border-color:var(--red)}
.s-card.is-active .s-card-bg img{opacity:.9;filter:saturate(.9) brightness(.55)}
.s-card.is-active .s-card-name{color:var(--txt)}

.season-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;flex:none;
  padding:13px clamp(20px,3.4vw,52px);border-top:1px solid var(--line);background:var(--ink-2);
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-3)}
.season-foot b{color:var(--dust);font-weight:500}

@media(max-width:900px){
  .s-hero-in{max-width:none}
  .s-word{font-size:clamp(30px,10vw,48px)}
  .s-poster{font-size:clamp(56px,min(22vw,13svh),140px)}
}
@media(max-width:520px){
  .s-blurb{display:none}
  .s-actions .btn-ghost{display:none}
  /* Hero photos are landscape (~2:1) action shots. .season filling 100svh on
     a narrow phone forces .s-hero into a portrait box — object-fit:cover
     then has to crop away most of the image's width to cover that height,
     so only a thin, heavily-scaled vertical strip of the photo ever shows
     (a car door instead of the car). Capping .season's height keeps the
     hero region closer to the photo's own proportions, cutting the crop
     roughly in half without touching desktop or the full-bleed intent —
     mobile already scrolls past the first screen as a matter of course.
     78svh caused a separate real bug: on a short-enough viewport (measured
     directly — a real risk starting around 700px tall, worse by 667px,
     which is a full-size iPhone with the address bar expanded, not just
     small phones), .s-hero-in's content (a fixed ~333px regardless of
     viewport — nothing in that stack shrinks below its own padding/font
     floors) didn't fit inside .s-hero's shrunk box, and with
     justify-content:flex-end the overflow pushed off the TOP — clipping
     the pill against .s-hero's own overflow:hidden. A height percentage
     alone can't fix this: on a short enough viewport, *any* percentage
     eventually loses to that fixed 333px floor. min-height is what
     actually prevents it — it guarantees the box is never smaller than
     the content needs, at the cost of a taller page (more scroll) on the
     shortest viewports rather than the alternative, which is silently
     cutting off real content. */
  .season{height:88svh;min-height:680px}
  /* .s-poster (the giant ghost "05" behind the logo) sits in a box only
     ~69px tall at line-height:.8, but its own font-size runs to ~86px on
     phones — a font that much taller than its compressed line-box always
     has glyph ink overshooting the box edges, bleeding into the pill row
     above it. Tried adding clearance above it first (margin-top on its
     wrapper) — wrong lever: .s-hero uses justify-content:flex-end, so on
     this height-constrained mobile hero, adding height ANYWHERE in the
     stack pushes the whole block up, not down — which shoved the pill row
     further under the sticky nav instead of fixing the overlap. It's purely
     decorative (aria-hidden) and was never going to fit cleanly in the
     vertical space a short phone hero has anyway, so removing it here
     removes the overshoot at the source instead of compensating for it. */
  .s-poster{display:none}
}
@media(prefers-reduced-motion:reduce){
  .s-hero,.s-strip-shell,.s-card,.s-hero-bg img{transition:none;animation:none;opacity:1;transform:none}
  .s-hero.is-switching>*{opacity:1}
}

/* ---------- registration wizard ---------- */
.reg-closed{max-width:56ch;padding:80px 0}
.reg-head{max-width:64ch}
.reg-steps{display:flex;gap:2px;background:var(--line);border:1px solid var(--line-2);margin:32px 0 0;
  overflow-x:auto}
.reg-steps span{flex:1;display:flex;align-items:center;gap:8px;padding:14px 16px;background:var(--surf);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3);
  white-space:nowrap;cursor:default;transition:.2s}
.reg-steps span i{font-style:normal;color:var(--txt-3)}
.reg-steps span.done{cursor:pointer;color:var(--txt-2)}
.reg-steps span.done:hover{background:var(--surf-2)}
.reg-steps span.done i{color:var(--grn)}
.reg-steps span.on{background:var(--surf-2);color:var(--txt)}
.reg-steps span.on i{color:var(--red-hot)}

#regForm{border:1px solid var(--line-2);border-top:none;background:var(--surf);padding:32px clamp(20px,3vw,40px)}
.reg-panel{display:none}
.reg-panel.on{display:block}
.reg-panel-h{font-family:var(--disp);font-weight:700;font-size:18px;text-transform:uppercase;
  letter-spacing:.01em;margin:32px 0 16px;padding-top:20px;border-top:1px solid var(--line)}
.reg-panel-h:first-child{margin-top:0;padding-top:0;border-top:none}
.reg-sub{color:var(--txt-2);font-size:13.5px;margin-bottom:20px}
.reg-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.reg-grid .span2{grid-column:1 / -1}

.reg-photo{margin-top:8px}
.reg-photo label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--txt-3);margin-bottom:8px}
.reg-photo input[type="file"]{font-family:var(--body);font-size:13px;color:var(--txt-2)}
.reg-photo-row{display:flex;align-items:center;gap:16px;margin-top:10px}
.reg-photo-preview{width:64px;height:64px;border-radius:8px;overflow:hidden;background:var(--ink);
  border:1px solid var(--line-2);flex:none;display:flex;align-items:center;justify-content:center}
.reg-photo-preview img{width:100%;height:100%;object-fit:cover}
.reg-photo-preview .mono{font-size:9px;color:var(--txt-3);padding:4px;text-align:center}
.reg-photo-hint{color:var(--txt-3);font-size:10.5px;letter-spacing:.02em;max-width:34ch}

.reg-classes{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:var(--line);
  border:1px solid var(--line-2);margin-top:16px}
.reg-class{display:flex;align-items:center;gap:10px;padding:14px 16px;background:var(--ink-2);
  cursor:pointer;transition:.2s}
.reg-class:hover{background:var(--surf-2)}
.reg-class input{flex:none;accent-color:var(--red)}
.reg-class-name{flex:1;font-size:13.5px}
.reg-class-fee{font-size:11px;color:var(--txt-3)}
.reg-class:has(input:checked){background:rgba(232,54,43,.1);box-shadow:inset 0 0 0 1px var(--red)}
.reg-total{display:flex;justify-content:space-between;gap:16px;padding:16px 18px;margin-top:2px;
  background:var(--ink-2);border:1px solid var(--line-2);font-size:14px}
.reg-total b{color:var(--dust)}

.reg-summary{display:flex;flex-direction:column;gap:2px;background:var(--line);border:1px solid var(--line-2);
  margin-bottom:22px}
.reg-summary-row{display:flex;justify-content:space-between;gap:14px;padding:10px 16px;
  background:var(--ink-2);font-size:13px;color:var(--txt-2)}
.reg-summary-total{background:var(--surf-2);color:var(--txt);font-weight:700}
.reg-pay{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line);border:1px solid var(--line-2)}
.reg-pay-block{background:var(--ink-2);padding:20px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.reg-pay-label{color:var(--dust);font-size:10px;letter-spacing:.14em}
.reg-pay-detail{font-size:12.5px;color:var(--txt-2);line-height:1.6}
.reg-pay-detail b{color:var(--txt);font-weight:600}
.reg-pay-note{margin:20px 0;font-size:13.5px;color:var(--txt-2)}
.reg-pay-note b{color:var(--dust)}

.reg-consent{display:flex;flex-direction:column;gap:12px;margin:24px 0}
.reg-consent label,.reg-minor{display:flex;align-items:flex-start;gap:12px;font-size:13px;
  color:var(--txt-2);cursor:pointer}
.reg-consent input,.reg-minor input{flex:none;margin-top:3px;accent-color:var(--red)}
.reg-disclaimer{font-size:11.5px;color:var(--txt-3);line-height:1.6;border-top:1px solid var(--line);
  padding-top:16px}

.reg-indemnity{max-height:260px;overflow-y:auto;background:var(--ink-2);border:1px solid var(--line-2);
  padding:18px 20px;font-size:13px;color:var(--txt-2);line-height:1.7;display:flex;flex-direction:column;gap:12px}
.reg-minor{margin-top:22px}
.reg-final-summary{display:flex;flex-direction:column;gap:2px;background:var(--line);border:1px solid var(--line-2);
  margin:20px 0}

.reg-sig{margin-top:8px}
.reg-sig label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--txt-3);margin-bottom:8px}
#regSigPad{width:100%;max-width:640px;height:180px;background:var(--ink);border:1px solid var(--line-2);
  touch-action:none;cursor:crosshair;display:block}
.reg-sig-actions{display:flex;align-items:center;gap:16px;margin-top:10px}
.reg-sig-hint{color:var(--txt-3);font-size:10.5px}

.reg-err{color:var(--red-hot);font-size:13px;min-height:1.4em;margin-top:20px}
.reg-nav{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:8px}
.reg-done{max-width:56ch;padding:60px 0}

@media(max-width:700px){
  .reg-grid{grid-template-columns:1fr}
  .reg-classes{grid-template-columns:1fr}
  .reg-pay{grid-template-columns:1fr}
  .reg-steps span{padding:12px 10px;font-size:9.5px}
  .reg-steps span i{display:none}
}

/* ---------- festival of sound & speed ---------- */
.fest-hero{position:relative;isolation:isolate;overflow:hidden;border:1px solid var(--line-2);
  min-height:clamp(420px,62vh,620px);display:flex;align-items:flex-end}
.fest-hero img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;
  filter:saturate(1.05) brightness(.42)}
.fest-hero::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(0deg,rgba(8,8,10,.96) 0%,rgba(8,8,10,.55) 55%,rgba(8,8,10,.2) 100%)}
.fest-hero-in{padding:clamp(28px,4.5vw,56px)}

/* ---------- gallery: plain grid ---------- */
.gal-filter{display:flex;flex-wrap:wrap;gap:2px;background:var(--line);border:1px solid var(--line-2);
  width:fit-content;margin-bottom:28px}
.gal-filter button{padding:10px 18px;font-family:var(--disp);font-weight:700;font-size:13px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--txt-3);background:var(--surf);
  transition:.2s;position:relative}
.gal-filter button:hover{color:var(--txt-2);background:var(--surf-2)}
.gal-filter button.on{background:var(--surf-2);color:var(--txt)}
.gal-filter button.on::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--dust)}
.gal{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(130px,15vw,210px);gap:6px}
.gf{position:relative;overflow:hidden;background:var(--surf);cursor:zoom-in}
.gf img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease),filter .5s;
  filter:saturate(1.02) brightness(.94)}
.gf:hover img{transform:scale(1.05);filter:saturate(1.15) brightness(1)}
.gf figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px;font-family:var(--mono);
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  background:linear-gradient(transparent,rgba(8,8,10,.92));opacity:0;transition:opacity .3s}
.gf:hover figcaption{opacity:1}
.gf-ed{position:absolute;top:10px;left:10px;width:26px;height:26px;border-radius:50%;
  background:rgba(8,8,10,.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--dust);z-index:1}
.gf.a{grid-column:span 2;grid-row:span 2}
.gf.b{grid-column:span 1;grid-row:span 2}
.gf.c{grid-column:span 1}
.gf.d{grid-column:span 1}
.gf.e{grid-column:span 1}
.gf.f{grid-column:span 1}
@media(max-width:820px){
  .gal{grid-template-columns:repeat(2,1fr)}
  .gf.a{grid-column:span 2;grid-row:span 1}
  .gf.b{grid-column:span 1;grid-row:span 1}
}

/* countdown *//* countdown *//* countdown *//* countdown *//* countdown *//* countdown *//* countdown */
.cd{display:flex;gap:8px;margin-top:32px;flex-wrap:wrap;align-items:stretch}
.cd-box{position:relative;background:rgba(10,10,12,.5);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid var(--line-2);padding:14px 20px;min-width:86px;text-align:center;overflow:hidden}
.cd-box::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--red),transparent)}
.cd-box b{display:block;font-family:var(--mono);font-size:32px;font-weight:700;line-height:1}
.cd-box span{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-3);margin-top:7px}
.cd-note{min-width:auto;display:flex;align-items:center;padding-inline:22px;background:none;border-color:transparent;border-left:1px solid var(--line-2)}
.cd-note::before{display:none}
.cd-note span{margin:0;text-align:left;line-height:1.6;color:var(--txt-2);letter-spacing:.1em}
.cd-label{display:none;width:100%;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-3)}

/* ---------- marquee strip ---------- */
/* Same marquee mechanism as .ticker, missed on the first pass — this is a
   second, separate scrolling strip (#tk2, event names on red), not the same
   element as .ticker (#tk1, stats) or .s-strip (the card carousel). Needed
   the identical edge fade for the same reason. */
.strip{background:var(--red);overflow:hidden;display:flex;padding:12px 0;position:relative;z-index:3;
  border-block:1px solid rgba(0,0,0,.35)}
.strip::before,.strip::after{content:'';position:absolute;top:0;bottom:0;width:32px;z-index:2;pointer-events:none}
.strip::before{left:0;background:linear-gradient(90deg,var(--red),transparent)}
.strip::after{right:0;background:linear-gradient(270deg,var(--red),transparent)}
.strip .tk span{color:#fff;font-weight:700;font-size:12px;letter-spacing:.2em;padding:0 22px}
.strip .tk span::after{background:rgba(255,255,255,.5)}

/* ---------- stats ---------- */
.stats{border-bottom:1px solid var(--line);background:var(--ink-2);overflow:hidden}
.stats-in{display:grid;grid-template-columns:repeat(4,1fr);max-width:var(--max);margin:0 auto}
.stat{padding:40px var(--pad);border-right:1px solid var(--line);position:relative;overflow:hidden}
.stat:last-child{border-right:none}
.stat::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--red);
  transform:scaleX(0);transform-origin:left;transition:transform .9s var(--d,0s) var(--ease)}
.stat.bar-in::after{transform:scaleX(1)}
.stat:nth-child(2)::after{background:var(--ember)}
.stat:nth-child(3)::after{background:var(--dust)}
.stat:nth-child(4)::after{background:var(--dust-2)}
.stat b{display:block;font-family:var(--disp);font-size:clamp(38px,4.6vw,64px);font-weight:700;line-height:1;letter-spacing:-.03em}
.stat b em{font-style:normal;color:var(--red);font-size:.5em}
.stat>span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-3);margin-top:11px}

/* alternating panels, per the reference */
.reg{background:var(--ink-2);border-block:1px solid var(--line)}

/* ---------- sections ---------- */
/* .pg: standalone pages (results.html, gallery.html, etc.) whose one section sits
   directly under the fixed header, with nothing above it to have scrolled past. */
main.pg{padding-top:104px}
section{padding:clamp(72px,9vw,130px) 0;position:relative}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:36px;margin-bottom:56px;flex-wrap:wrap}
.sec-n{position:absolute;top:40px;right:var(--pad);font-family:var(--disp);font-weight:700;
  font-size:clamp(90px,13vw,190px);line-height:.8;color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.055);pointer-events:none;user-select:none;z-index:0}

/* ---------- event cards ---------- */
/* each card carries its surface as an accent, so the hero's ground language
   continues down the page instead of dying at the fold */
.ec-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:var(--line);border:1px solid var(--line-2)}
.ec{background:var(--surf);padding:clamp(26px,3vw,40px);position:relative;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;min-height:390px;transition:background-color .4s}
.ec-lead{grid-column:1 / -1;min-height:auto}
.ec-bg{position:absolute;inset:0;z-index:-2;opacity:.16;transition:opacity .6s,transform 1.2s var(--ease);transform:scale(1.06)}
.ec-bg img{width:100%;height:100%;object-fit:cover}
.ec::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,rgba(12,11,12,.94) 24%,rgba(12,11,12,.8) 66%,rgba(12,11,12,.74))}
.ec:hover{background:var(--surf-2)}
.ec:hover .ec-bg{opacity:.42;transform:none}
/* surface accent bar */
.ec::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;z-index:1;background:var(--acc,var(--txt-3))}
.ec[data-surface="gravel"]{--acc:linear-gradient(90deg,#b8763f,transparent)}
.ec[data-surface="dirt"]{--acc:linear-gradient(90deg,#a85c34,transparent)}
.ec[data-surface="scrub"]{--acc:linear-gradient(90deg,#70714a,transparent)}
.ec[data-surface="tarmac"]{--acc:linear-gradient(90deg,#8d8f99,transparent)}

.ec-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:22px}
.ec-status{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--txt-2);border:1px solid var(--line-2);padding:6px 11px}
.ec-status i{width:7px;height:7px;border-radius:50%;background:var(--txt-3);flex:none}
.ec-status.s-live{border-color:rgba(255,74,55,.55);color:var(--red-hot)}
.ec-status.s-live i{background:var(--red-hot);animation:pulse 1.5s infinite}
.ec-status.s-open{border-color:rgba(122,200,120,.5);color:var(--grn)}
.ec-status.s-open i{background:var(--grn);animation:pulse 2s infinite}
.ec-status.s-past{color:var(--txt-3)}
.ec-status.s-soon i,.ec-status.s-tbc i{background:var(--dust)}
.ec-surface{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--txt-3)}

.ec-logo{width:min(100%,300px);height:auto;margin:0 0 18px;filter:drop-shadow(0 6px 24px rgba(0,0,0,.6))}
.ec-lead .ec-logo{width:min(100%,420px)}
.ec-word{font-family:var(--disp);font-weight:700;font-size:clamp(30px,3.6vw,52px);line-height:.94;
  text-transform:uppercase;letter-spacing:-.02em;margin:0 0 18px}
.ec-meta{display:flex;flex-wrap:wrap;gap:12px 30px;font-family:var(--mono);font-size:12px;color:var(--txt-2);margin-bottom:20px}
.ec-meta i{font-style:normal;color:var(--txt-3);display:block;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:4px}
.ec-blurb{color:var(--txt-2);font-size:15px;max-width:52ch;margin-bottom:22px}
.ec-foot{margin-top:auto;padding-top:20px;border-top:1px solid var(--line-2);
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.ec-fee{font-family:var(--mono);font-size:15px;color:var(--txt)}
.ec-fee em{font-style:normal;color:var(--txt-3);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;display:block;margin-bottom:4px}
.ec-link{font-family:var(--disp);font-weight:700;font-size:15px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--red-hot);display:inline-flex;gap:8px;align-items:center;transition:gap .25s,color .25s}
.ec-link:hover{gap:14px;color:var(--ember)}

/* withheld venue */
.veiled{display:inline-flex;align-items:center;gap:7px;color:var(--dust);font-style:normal}
.veiled::before{content:'';width:7px;height:7px;border:1px solid currentColor;transform:rotate(45deg);flex:none}

/* ---------- results explorer ---------- */
.rx{border:1px solid var(--line-2);background:var(--surf)}
.rx-top{display:flex;align-items:center;gap:16px;padding:18px 22px;
  background:var(--ink-2);border-bottom:1px solid var(--line-2);flex-wrap:wrap}
.rx-ev{display:flex;gap:2px;background:var(--line);border:1px solid var(--line)}
.rx-ev button{padding:11px 18px;font-family:var(--disp);font-weight:700;font-size:14px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--txt-3);background:var(--surf);transition:.25s;position:relative}
.rx-ev button:hover{color:var(--txt-2);background:var(--surf-2)}
.rx-ev button.on{background:var(--surf-2);color:var(--txt)}
.rx-ev button.on::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--dust)}
.rx-info{display:flex;flex-wrap:wrap;gap:14px 34px;padding:18px 22px;
  border-bottom:1px solid var(--line-2);font-family:var(--mono);font-size:12.5px;color:var(--txt-2)}
.rx-info i{font-style:normal;color:var(--txt-3);display:block;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:5px}
.rx-info b{color:var(--dust);font-weight:500}
.rx-bar{display:flex;gap:10px;align-items:center;padding:14px 22px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.rx-bar input,.rx-bar select{background:var(--ink);border:1px solid var(--line-2);color:var(--txt);
  padding:10px 13px;font-family:var(--body);font-size:14px;transition:.2s}
.rx-bar input{min-width:230px;flex:1}
.rx-bar input:focus,.rx-bar select:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(232,54,43,.14)}
.rx-wh{display:none;gap:2px;background:var(--line);border:1px solid var(--line-2);flex:none}
.rx-wh button{padding:9px 15px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--txt-3);background:var(--ink);transition:.2s}
.rx-wh button:hover{color:var(--txt-2)}
.rx-wh button.on{background:var(--surf-2);color:var(--txt)}
.rx-count{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-3);margin-left:auto}
.rx-body{max-height:640px;overflow-y:auto;scrollbar-width:thin}
.rx-class{border-bottom:1px solid var(--line)}
.rx-class h4{position:sticky;top:0;z-index:2;background:var(--ink-2);padding:12px 22px;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dust);
  border-bottom:1px solid var(--line);font-weight:500;display:flex;justify-content:space-between;gap:12px}
.rx-class h4 span{display:flex;align-items:center;gap:9px}
.rx-class h4 em{font-style:normal;color:var(--txt-3)}
.rx-wh-dot{width:7px;height:7px;border-radius:50%;flex:none}
.rx-wh-dot.wh-2W{background:var(--violet)}
.rx-wh-dot.wh-4W{background:var(--grn)}
.rx-row{display:grid;grid-template-columns:46px 1fr 74px 116px 110px;align-items:center;gap:14px;
  padding:12px 22px 12px 19px;border-bottom:1px solid rgba(255,255,255,.05);border-left:3px solid transparent;
  transition:background-color .2s,border-color .2s}
.rx-row:last-child{border-bottom:none}
.rx-row:nth-child(even){background:rgba(255,255,255,.014)}
.rx-row:hover{background:var(--surf-2)}
.rx-row.p1{border-left-color:var(--dust);background:linear-gradient(90deg,rgba(233,162,59,.1),transparent 65%)}
.rx-row.p2{border-left-color:#c7c9d6}
.rx-row.p3{border-left-color:#c68a5c}
.rx-pos{font-family:var(--disp);font-weight:700;font-size:20px;color:var(--txt-3);line-height:1}
.rx-row.p1 .rx-pos{color:var(--dust)}
.rx-row.p2 .rx-pos{color:#c7c9d6}
.rx-row.p3 .rx-pos{color:#c68a5c}
.rx-name{font-weight:600;font-size:14.5px}
.rx-no{font-family:var(--mono);font-size:11px;color:var(--txt-3)}
.rx-veh{display:block;font-family:var(--mono);font-size:10.5px;color:var(--txt-3);margin-top:3px}
.rx-time{font-family:var(--mono);font-size:14px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.rx-gap{font-family:var(--mono);font-size:12px;color:var(--txt-3);text-align:right;font-variant-numeric:tabular-nums}
.rx-st{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;padding:4px 8px;
  border:1px solid var(--line-2);color:var(--txt-3);text-align:center;justify-self:end}
.rx-st.dnf{border-color:rgba(255,74,55,.5);color:var(--red-hot)}
.rx-st.dq{border-color:rgba(255,74,55,.5);color:var(--red-hot)}
.rx-st.pen{border-color:rgba(233,162,59,.5);color:var(--dust)}
.rx-empty{padding:56px;text-align:center;font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--txt-3)}
.rx-foot{padding:16px 22px;background:var(--ink-2);border-top:1px solid var(--line-2);
  font-family:var(--mono);font-size:10.5px;color:var(--txt-3);letter-spacing:.06em;display:flex;
  justify-content:space-between;gap:14px;flex-wrap:wrap}

/* ---------- full calendar ----------
   Segregated by series: an image-backed header per event name, its editions
   listed as image-thumbnailed cards underneath — not a flat spreadsheet row
   per round, which is the treatment that reads as bland at any real length. */
.cal-body{display:flex;flex-direction:column;gap:20px}
.cal-series{border:1px solid var(--line-2);background:var(--surf);overflow:hidden}
.cal-series-head{position:relative;isolation:isolate;overflow:hidden;
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:24px 26px;min-height:76px}
.cal-series-head img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;
  object-fit:cover;filter:saturate(1.05) brightness(.4)}
.cal-series-head::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(8,8,10,.92) 25%,rgba(8,8,10,.6) 75%,rgba(8,8,10,.35))}
.cal-series-name{font-family:var(--disp);font-weight:700;font-size:clamp(24px,3vw,34px);
  text-transform:uppercase;letter-spacing:-.01em}
.cal-series-count{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--txt-3);flex:none}

.cal-items{display:flex;flex-direction:column}
.cal-item{display:flex;align-items:center;gap:18px;padding:14px 26px;
  border-top:1px solid var(--line);transition:background-color .2s}
.cal-item:hover{background:var(--surf-2)}
.cal-item-bg{width:52px;height:52px;border-radius:8px;overflow:hidden;flex:none;
  border:1px solid var(--line-2)}
.cal-item-bg img{width:100%;height:100%;object-fit:cover;filter:saturate(1.02) brightness(.82)}
.cal-item-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.cal-item-name{font-family:var(--disp);font-weight:700;font-size:16px;text-transform:uppercase}
.cal-item-meta{font-family:var(--mono);font-size:11px;color:var(--txt-3);letter-spacing:.02em}
.cal-tag{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--txt-3);flex:none}
.cal-tag i{width:6px;height:6px;border-radius:50%;background:var(--txt-3);flex:none}
.cal-tag.st-live{color:var(--red-hot)}
.cal-tag.st-live i{background:var(--red-hot);animation:pulse 1.5s infinite}
.cal-tag.st-open{color:var(--grn)}
.cal-tag.st-open i{background:var(--grn);animation:pulse 2s infinite}
.cal-tag.st-soon i,.cal-tag.st-tbc i{background:var(--dust)}
.cal-tag.st-soon,.cal-tag.st-tbc{color:var(--dust)}
.cal-cta{font-family:var(--disp);font-weight:700;font-size:12.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--red-hot);transition:gap .2s,color .2s;flex:none;
  display:inline-flex;align-items:center;gap:6px}
.cal-cta:hover{color:var(--ember);gap:10px}

/* ---------- explore: homepage teasers routing to the standalone pages ---------- */
.explore{background:var(--ink-2);border-top:1px solid var(--line);padding:clamp(56px,7vw,96px) 0}
.explore-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--line);
  border:1px solid var(--line-2);margin-top:36px}
.explore-card{position:relative;isolation:isolate;overflow:hidden;padding:24px 22px;
  display:flex;flex-direction:column;justify-content:flex-end;gap:10px;min-height:280px}
.explore-card .eb{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;
  filter:saturate(1.05) brightness(.4);transition:transform .6s var(--ease),filter .4s}
.explore-card::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,8,10,.15) 0%,rgba(8,8,10,.6) 60%,rgba(8,8,10,.95) 100%)}
.explore-card::before{content:'';position:absolute;left:0;bottom:0;width:100%;height:2px;z-index:1;
  background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.explore-card:hover .eb{transform:scale(1.06);filter:saturate(1.15) brightness(.48)}
.explore-card:hover::before{transform:none}
.explore-card .mono{position:relative;font-size:9.5px;letter-spacing:.14em;color:var(--dust)}
.explore-card h3{position:relative;font-family:var(--disp);font-weight:700;font-size:21px;
  text-transform:uppercase;line-height:1.05}
.explore-card p{position:relative;color:var(--txt-2);font-size:13px;line-height:1.55}
.explore-card em{position:relative;font-style:normal;font-family:var(--disp);font-weight:700;
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--red-hot);
  display:inline-flex;align-items:center;gap:8px;transition:gap .25s}
.explore-card:hover em{gap:14px}

/* ---------- split / legacy ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;background:var(--surf);border:1px solid var(--line-2)}
.split-img{position:relative;min-height:520px;overflow:hidden}
.split-img img{width:100%;height:116%;object-fit:cover;will-change:transform}
.split-txt{padding:clamp(32px,4vw,62px);display:flex;flex-direction:column;justify-content:center}
.split-txt .h-lg{margin:16px 0 22px}

/* ---------- partners ---------- */
.spon{background:linear-gradient(120deg,var(--ink-2),var(--surf));border:1px solid var(--line-2);
  padding:clamp(32px,4vw,60px);display:grid;grid-template-columns:1.1fr .9fr;gap:52px;align-items:center;
  position:relative;overflow:hidden}
.spon::after{content:'';position:absolute;top:-40%;right:-10%;width:46%;height:180%;pointer-events:none;
  background:repeating-linear-gradient(115deg,rgba(232,54,43,.09) 0 14px,transparent 14px 40px)}
.spon>div{position:relative;z-index:2}
.spon-pts{display:flex;flex-direction:column;gap:2px;margin-top:30px;background:var(--line-2)}
.spon-pt{display:flex;gap:16px;align-items:flex-start;font-size:14.5px;color:var(--txt-2);
  background:var(--ink-2);padding:16px 18px;border-left:3px solid transparent;transition:.25s}
.spon-pt:hover{border-left-color:var(--red);background:var(--surf-2)}
.spon-pt i{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--txt-3);
  flex:none;padding-top:3px}
.spon-pt b{color:var(--txt);font-family:var(--disp);font-size:19px;font-weight:700;min-width:62px;
  text-transform:uppercase;letter-spacing:.04em;flex:none}
.form-card{background:var(--surf);border:1px solid var(--line-2);padding:32px;position:relative;overflow:hidden}
.form-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--red),var(--ember),transparent)}
.form-card .h-md{margin-bottom:4px}
.form-card>.mono{font-size:11px;color:var(--txt-3);letter-spacing:.12em;text-transform:uppercase;margin-bottom:24px;display:block}
.fld{margin-bottom:16px}
.fld label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-3);margin-bottom:8px}
.fld input,.fld select,.fld textarea{width:100%;background:var(--ink);border:1px solid var(--line-2);color:var(--txt);
  padding:13px 14px;font-family:var(--body);font-size:15px;transition:.2s;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(232,54,43,.14)}
.logos-label{display:block;margin:56px 0 14px;color:var(--txt-3);letter-spacing:.16em}
.logos{display:grid;grid-template-columns:repeat(6,1fr);gap:2px;background:var(--line);
  border:1px solid var(--line-2)}
.logo-slot{position:relative;overflow:hidden;background:var(--surf);aspect-ratio:16/8;
  display:grid;place-items:center;padding:14px;font-family:var(--disp);font-weight:700;font-size:15px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--txt-3);text-align:center;
  transition:.3s;line-height:1.15}
.logo-slot::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--red);
  transform:scaleY(0);transform-origin:top;transition:transform .3s var(--ease)}
.logo-slot:hover{background:var(--surf-2);color:var(--txt)}
.logo-slot:hover::before{transform:none}
.logo-slot.open{color:var(--dust)}
.logo-slot.open::before{background:var(--dust);transform:none}

/* ---------- contact ---------- */
.ct{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line);border:1px solid var(--line-2)}
.ct-c{background:var(--surf);padding:36px 30px;position:relative;overflow:hidden;transition:background-color .3s}
.ct-c:hover{background:var(--surf-2)}
.ct-c::before{content:'';position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.ct-c:hover::before{transform:none}
.ct-c .eyebrow{margin-bottom:16px;display:flex}
.ct-c a,.ct-c p{font-family:var(--disp);font-size:25px;text-transform:uppercase;font-weight:700;line-height:1.2;display:block;transition:color .2s}
.ct-c a:hover{color:var(--red-hot)}
.ct-c small{display:block;font-family:var(--mono);font-size:11px;color:var(--txt-3);margin-top:10px;letter-spacing:.04em}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);background:var(--ink-2);padding:60px 0 36px}
.f-top{display:flex;justify-content:space-between;gap:44px;flex-wrap:wrap;margin-bottom:48px}
.f-nav{display:flex;gap:60px;flex-wrap:wrap}
.f-col h5{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-3);margin-bottom:16px}
.f-col a{display:block;font-family:var(--disp);font-size:16px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--txt-2);padding:5px 0;transition:.2s}
.f-col a:hover{color:var(--txt);transform:translateX(4px)}
.f-bot{display:flex;justify-content:space-between;gap:20px;padding-top:28px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:10.5px;color:var(--txt-3);letter-spacing:.06em;flex-wrap:wrap;align-items:center}
.socials{display:flex;gap:10px}
.socials a{width:38px;height:38px;border:1px solid var(--line-2);display:grid;place-items:center;transition:.25s;color:var(--txt-2)}
.socials a:hover{border-color:var(--red);color:var(--red-hot);background:rgba(232,54,43,.1);transform:translateY(-2px)}
.socials svg{width:16px;height:16px;fill:currentColor}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;z-index:1200;background:rgba(4,4,6,.95);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  display:grid;place-items:center;padding:32px;opacity:0;pointer-events:none;transition:opacity .3s;cursor:zoom-out}
.lb.on{opacity:1;pointer-events:auto}
.lb img{max-width:min(1300px,94vw);max-height:86vh;width:auto;transform:scale(.96);transition:transform .4s var(--ease)}
.lb.on img{transform:none}
.lb-cap{position:absolute;bottom:28px;left:0;right:0;text-align:center;font-family:var(--mono);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-2)}

/* ---------- responsive ---------- */
@media(max-width:1100px){
  :root{--pad:24px}
  .next,.split,.spon{grid-template-columns:1fr}
  .split-img{min-height:340px}
  .logos{grid-template-columns:repeat(3,1fr)}
  .ct{grid-template-columns:1fr}
  .explore-grid{grid-template-columns:repeat(2,1fr)}
  .rx-row{grid-template-columns:40px 1fr 100px 96px;gap:10px;padding:12px 16px}
  .rx-st{display:none}
}
/* Nav collapses to the burger/mobile-menu well above the general 820px
   tablet breakpoint below: the full nav-links row plus the "Enter the
   upcoming event" CTA needs ~1280px to fit without the flex row squeezing
   the CTA narrower than its own text — measured directly (real WebKit,
   iPad widths included), not guessed. A squeezed .btn clips its label
   from both sides at once (nowrap + centered + overflow:hidden), which is
   what a cropped "ER THE UPCOMING EV" on an iPad turned out to be. */
@media(max-width:1279px){
  .nav-links,.nav-cta{display:none}
  .burger{display:flex}
}
@media(max-width:820px){
  .explore-grid{grid-template-columns:1fr}
  .stats-in{grid-template-columns:repeat(2,1fr)}
  .stat{border-bottom:1px solid var(--line);padding:26px 20px}
  .stat:nth-child(2n){border-right:none}
  .past-grid{grid-template-columns:1fr}
  .hero{padding-top:100px}
  .hero-in{padding-bottom:48px}
  .cd{gap:6px;margin-top:26px}
  .cd-label{display:block;margin-bottom:2px}
  .cd-note{display:none}
  .cd-box{flex:1;min-width:0;padding:12px 4px}
  .cd-box b{font-size:24px}
  .cd-box span{font-size:8px;letter-spacing:.1em}
  .hero-cta{flex-direction:column;gap:10px}
  .hero-cta .btn,.hero-cta .btn-red{width:100%;transform:none}
  .hero-cta .btn-red>span{transform:none}
  .hero-cta .btn-red:hover{transform:translateY(-2px)}
  .scroll-cue{display:none}
  .sec-n{font-size:78px;top:30px}
  .gal-fig.land{width:80vw;height:44vh}
  .gal-fig.port{width:62vw;height:44vh}
  .rx-top{padding:14px}
  .rx-ev{flex-wrap:wrap}
  .rx-ev button{flex:1;font-size:12.5px;padding:10px 12px}
  .rx-info{padding:14px;gap:12px 22px}
  .rx-wh{width:100%}
  .rx-wh button{flex:1}
  .rx-row{grid-template-columns:34px 1fr 92px;gap:8px;padding:11px 14px}
  .rx-gap{display:none}
  .cal-series-head{padding:20px}
  .cal-item{flex-wrap:wrap;padding:14px 20px;row-gap:10px}
  .cal-item-bg{width:44px;height:44px}
  .cal-tag{margin-left:auto}
  .cal-cta{width:100%;justify-content:flex-start;padding-left:70px}
  .rx-body{max-height:520px}
  .f-nav{gap:30px}
  .stage{height:220vh}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  .ln>span{transform:none !important}
  .stage{height:auto}
  .stage-pin{position:relative;height:auto;min-height:80svh;padding:100px 0}
}