/* ==========================================================================
   gd.elg — stylesheet
   0. tokens        4. hero          8. build log
   1. reset/base    5. ticker        9. crew
   2. chrome        6. the car      10. connect
   3. nav           7. feed         11. footer / utils
   ========================================================================== */

/* ---------------------------------------------------------------- 0. TOKENS */
:root{
  --bg:        #07080a;
  --bg-2:      #0b0d12;
  --surface:   #101319;
  --surface-2: #161a22;
  --line:      #21262f;
  --line-2:    #2c3340;

  --ink:       #EDEFF3;
  --ink-2:     #A8B0BD;
  --ink-3:     #6B7482;

  --red:        #E1163C;
  --red-hot:    #FF3B30;
  --amber:      #FFB627;
  --ice:        #9FD8FF;
  /* signature accent — matches the caliper / tow hook purple */
  --purple:     #8B5CF6;
  --purple-hot: #A855F7;

  --grad-hot:    linear-gradient(100deg, var(--amber), var(--red-hot) 45%, var(--red));
  --grad-cool:   linear-gradient(100deg, var(--red), var(--ice));
  --grad-purple: linear-gradient(100deg, var(--purple-hot), var(--purple) 60%, var(--red));

  --f-display: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --f-ui:      'Space Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --nav-h: 74px;
  --pad: clamp(20px, 5vw, 72px);
  --maxw: 1320px;
  --r: 18px;

  --ease: cubic-bezier(.22,1,.36,1);
  color-scheme: dark;
  --ease-2: cubic-bezier(.65,0,.35,1);

  --sx: 0.5;  /* normalised cursor x, set by JS */
  --sy: 0.5;
  --mx: 50%;  /* cursor px pos for spotlight */
  --my: 50%;
  --vel: 0;   /* scroll velocity 0..1 */
}

/* ------------------------------------------------------------ 1. RESET/BASE */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top: calc(var(--nav-h) + 20px);
}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-ui);
  font-size:clamp(15px,1.03vw,17px);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.is-locked{ overflow:hidden; }
img,svg,video,canvas{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }
::selection{ background:var(--red); color:#fff; }

:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; border-radius:6px; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }

.skip{
  position:fixed; top:-100px; left:16px; z-index:999;
  background:var(--red); color:#fff; padding:10px 16px; border-radius:8px;
  transition:top .2s;
}
.skip:focus{ top:16px; }

/* scrollbar */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{
  background:linear-gradient(var(--red),var(--amber));
  border-radius:99px; border:3px solid var(--bg);
}

/* --------------------------------------------------------------- 2. CHROME */

/* grain */
.grain{
  position:fixed; inset:-120%; z-index:9000; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%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");
  animation:grain 700ms steps(4) infinite;
}
@keyframes grain{
  0%{ transform:translate(0,0) }      25%{ transform:translate(-3%,2%) }
  50%{ transform:translate(2%,-3%) }  75%{ transform:translate(-2%,-2%) }
  100%{ transform:translate(0,0) }
}
.scanlines{
  position:fixed; inset:0; z-index:8999; pointer-events:none; opacity:.35;
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,.018) 0 1px, transparent 1px 3px);
}
.vignette{
  position:fixed; inset:0; z-index:8998; pointer-events:none;
  background:radial-gradient(120% 80% at 50% 40%, transparent 40%, rgba(0,0,0,.55) 100%);
}

/* preloader */
.loader{
  position:fixed; inset:0; z-index:10000;
  display:grid; place-items:center; background:var(--bg);
}
.loader.done{ pointer-events:none; }
.loader.done .loader__curtain{ transform:scaleY(0); }
.loader.gone{ display:none; }

/* --- the outro -----------------------------------------------------------
   Three beats before the curtain moves at all:

     flare  the needle snaps past the redline and the ring flashes white
     spin   the gauge winds over and collapses; the mark takes the centre
     done   the mark settles, then the curtain lifts

   The point is not only that it looks better. The page used to become visible
   at the same moment the curtain started moving, so the first frame of the
   real site was still settling in view. Now the ready class lands during the
   spin, a full second before anything is uncovered, and the site is painted. */

.loader__gauge, .loader__readout{
  transition:transform .62s cubic-bezier(.7,0,.2,1), opacity .42s var(--ease),
             filter .3s var(--ease);
}
.loader.flare .loader__arc{
  stroke:#fff; filter:drop-shadow(0 0 18px rgba(255,255,255,.9));
  transition:stroke .16s linear, filter .16s linear;
}
.loader.flare .loader__needle{
  transform:translate(100px,100px) rotate(146deg);
  filter:drop-shadow(0 0 14px rgba(255,255,255,.95));
  transition:transform .19s cubic-bezier(.2,1.7,.5,1), filter .16s linear;
}
/* the needle is a filled path now, so the flare recolours the fill */
.loader.flare .loader__needle path{ fill:#fff; transition:fill .16s linear; }
.loader.flare .loader__readout{ transform:scale(1.06); }
/* a ring that pushes outward on the flare, then dies */
.loader.flare .loader__inner::after{
  content:''; position:absolute; width:min(46vw,230px); aspect-ratio:1;
  border-radius:50%; border:2px solid rgba(255,255,255,.55);
  animation:loadPulse .62s var(--ease) forwards;
}
@keyframes loadPulse{
  0%{ transform:scale(.86); opacity:.9 }
  100%{ transform:scale(1.5); opacity:0 }
}

.loader.spin .loader__gauge{
  transform:rotate(212deg) scale(.16); opacity:0; filter:blur(3px);
}
.loader.spin .loader__readout{ transform:scale(.4); opacity:0; }
.loader.spin .loader__word{ opacity:0; transform:translateY(8px); }

.loader__word{ transition:opacity .3s var(--ease), transform .3s var(--ease); }

.loader__mark{
  position:absolute; width:min(20vw,96px); aspect-ratio:1;
  opacity:0; transform:scale(.3) rotate(-24deg);
}
.loader.spin .loader__mark{
  opacity:1; transform:none;
  transition:opacity .34s .2s var(--ease),
             transform .5s .2s cubic-bezier(.2,1.3,.35,1);
}
/* the mark leaves with the curtain rather than before it */
.loader.done .loader__mark{
  opacity:0; transform:scale(1.25);
  transition:opacity .38s var(--ease), transform .5s var(--ease);
}

/* Reduced motion gets the old behaviour: no spin, just a clean fade. */
@media (prefers-reduced-motion:reduce){
  .loader__gauge, .loader__readout, .loader__mark{ transition:opacity .3s linear; }
  .loader.spin .loader__gauge{ transform:none; filter:none; }
  .loader.spin .loader__mark{ transform:none; }
}
body.no-motion .loader__gauge,
body.no-motion .loader__readout,
body.no-motion .loader__mark{ transition:opacity .3s linear !important; }
body.no-motion .loader.spin .loader__gauge{ transform:none !important; filter:none !important; }
.loader__curtain{
  position:absolute; inset:0; background:var(--bg);
  transform-origin:top; transition:transform .9s .25s var(--ease);
}
.loader__inner{ position:relative; display:grid; place-items:center; z-index:1; }
.loader__gauge{ width:min(46vw,230px); aspect-ratio:1; }
/* 2*pi*72 = 452.4 — the dash length has to match the radius or the sweep
   under-fills. The arc covers 270deg, so only 75% of it is ever drawn. */
.loader__arc{
  fill:none; stroke:url(#gaugeGrad); stroke-width:9; stroke-linecap:butt;
  transform:rotate(135deg); transform-origin:100px 100px;
  stroke-dasharray:452.4; stroke-dashoffset:452.4;
  filter:drop-shadow(0 0 6px rgba(225,22,60,.45));
}
.loader__track{ fill:none; stroke:rgba(237,239,243,.07); stroke-width:9; }
.loader__ticks line{ stroke:rgba(237,239,243,.5); stroke-width:2; stroke-linecap:round; }
.loader__ticks line.minor{ stroke:rgba(237,239,243,.2); stroke-width:1.2; }
/* the needle is a shape now, not a line, so it is positioned by translate and
   spun about the hub like the real one */
.loader__needle{
  transform-origin:0 0;
  transform:translate(100px,100px) rotate(-135deg);
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.75));
}
.loader__readout{
  position:absolute; display:flex; align-items:baseline; gap:2px;
  font-family:var(--f-display); font-size:clamp(30px,7vw,44px); letter-spacing:.02em;
}
.loader__unit{ font-family:var(--f-mono); font-size:.42em; color:var(--ink-3); }
.loader__word{
  position:absolute; bottom:-14%; font-family:var(--f-display);
  font-size:clamp(14px,2.4vw,20px); letter-spacing:.34em; color:var(--ink-3);
}
.loader__word span{ color:var(--red); }

/* cursor */
.cursor{ position:fixed; inset:0; z-index:9500; pointer-events:none; display:none; }

/* `has-cursor` is only added once the custom cursor is actually running, so a
   JS failure can never leave someone with no pointer at all. */
body.has-cursor,
body.has-cursor *,
body.has-cursor a,
body.has-cursor button{ cursor:none !important; }
body.has-cursor .cursor{ display:block; }
/* keep a real caret where text is edited or selected deliberately */
body.has-cursor input,
body.has-cursor textarea,
body.has-cursor [contenteditable]{ cursor:auto !important; }
.cursor__dot{
  position:absolute; width:6px; height:6px; border-radius:50%;
  background:var(--red-hot); translate:-50% -50%;
  box-shadow:0 0 12px 2px rgba(255,59,48,.6);
}
.cursor__ring{
  position:absolute; width:38px; height:38px; border-radius:50%;
  border:1.5px solid rgba(237,239,243,.45); translate:-50% -50%;
  display:grid; place-items:center;
  transition:width .3s var(--ease), height .3s var(--ease),
             background-color .3s, border-color .3s;
}
.cursor__label{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; opacity:0; transition:opacity .2s; white-space:nowrap;
}
.cursor.is-hover .cursor__ring{
  width:74px; height:74px; background:rgba(225,22,60,.16); border-color:var(--red);
}
.cursor.is-hover .cursor__label{ opacity:1; }
.cursor.is-down .cursor__ring{ width:28px; height:28px; }

/* tachometer scroll indicator */
.tach{
  position:fixed; right:clamp(14px,2.2vw,28px); bottom:clamp(14px,2.2vw,28px);
  z-index:600; width:76px; height:76px; display:grid; place-items:center;
  cursor:pointer; opacity:0; transform:translateY(20px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.tach.on{ opacity:1; transform:none; }
.tach svg{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); }
.tach__track{ fill:rgba(11,13,18,.75); stroke:var(--line); stroke-width:4; }
.tach__arc{
  fill:none; stroke:var(--red); stroke-width:4; stroke-linecap:round;
  stroke-dasharray:251.3; stroke-dashoffset:251.3;
  filter:drop-shadow(0 0 6px rgba(225,22,60,.55));
  transition:stroke-dashoffset .1s linear, stroke .3s;
}
.tach.redline .tach__arc{ stroke:var(--amber); }
.tach__val{ font-family:var(--f-display); font-size:19px; line-height:1; z-index:1; }
.tach__val i{ font-family:var(--f-mono); font-size:9px; color:var(--ink-3); font-style:normal; }
.tach__hint{
  position:absolute; bottom:-16px; font-family:var(--f-mono); font-size:9px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
  opacity:0; transition:opacity .25s;
}
.tach:hover .tach__hint{ opacity:1; }
.tach:active{ transform:scale(.94); }

/* launch-control flash */
.launch{
  position:fixed; inset:0; z-index:9400; display:grid; place-items:center;
  pointer-events:none; opacity:0;
  background:radial-gradient(60% 50% at 50% 50%, rgba(225,22,60,.35), transparent 70%);
}
.launch span{
  font-family:var(--f-display); font-size:clamp(34px,9vw,110px); letter-spacing:.06em;
  background:var(--grad-hot); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.launch.go{ animation:launch .9s var(--ease); }
@keyframes launch{
  0%{ opacity:0; transform:scale(1.25) }
  25%{ opacity:1; transform:scale(1) }
  100%{ opacity:0; transform:scale(.9) }
}
body.shake{ animation:shake .5s var(--ease-2); }
@keyframes shake{
  0%,100%{ transform:translate(0,0) }
  20%{ transform:translate(-6px,3px) }  40%{ transform:translate(5px,-4px) }
  60%{ transform:translate(-4px,-2px) } 80%{ transform:translate(3px,4px) }
}

/* ------------------------------------------------------------------ 3. NAV */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:700; height:var(--nav-h);
  display:flex; align-items:center; gap:20px;
  padding-inline:var(--pad);
  transition:background .4s var(--ease), border-color .4s, height .4s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.stuck{
  height:62px;
  background:rgba(7,8,10,.72);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--line);
}
.nav__brand{ display:flex; align-items:center; gap:10px; margin-right:auto; }
.nav__mark{ width:30px; height:30px; display:grid; place-items:center; }
.nav__mark svg{ width:100%; height:100%; fill:var(--red); transition:transform .5s var(--ease); }
.nav__brand:hover .nav__mark svg{ transform:rotate(-8deg) scale(1.08); }
.nav__word{ font-family:var(--f-display); font-size:21px; letter-spacing:.06em; }
.nav__word em{ font-style:normal; color:var(--red); }

/* "Driven" — deliberately a different face to the Anton wordmark, so the two
   halves read as one lockup without needing a separator. */
.nav__driven{
  font-family:var(--f-mono); font-weight:600; font-size:10px;
  letter-spacing:.32em; text-transform:uppercase; color:var(--ink-3);
  padding-left:10px; margin-left:2px; position:relative; top:1px;
  transition:color .3s;
}
.nav__driven::before{
  content:''; position:absolute; left:0; top:50%; translate:0 -50%;
  width:1px; height:13px; background:var(--line-2);
}
.nav__brand:hover .nav__driven{ color:var(--amber); }
@media (max-width:560px){ .nav__driven{ display:none; } }

.nav__links{ position:relative; display:flex; gap:4px; }
.nav__links a{
  position:relative; z-index:1; padding:9px 15px; border-radius:99px;
  font-size:13.5px; font-weight:500; color:var(--ink-2);
  transition:color .3s;
}
.nav__links a:hover, .nav__links a.active{ color:var(--ink); }
.nav__pill{
  position:absolute; top:0; left:0; height:100%; border-radius:99px;
  background:rgba(255,255,255,.07); border:1px solid var(--line);
  opacity:0; transition:transform .45s var(--ease), width .45s var(--ease), opacity .3s;
}
@media (max-width:1000px){ .nav__links{ display:none; } }

.nav__cta{ flex:none; }
@media (max-width:1000px){ .nav__cta{ display:none; } }

.burger{
  display:none; width:44px; height:44px; border:1px solid var(--line);
  border-radius:12px; position:relative; background:rgba(16,19,25,.6);
}
.burger span{
  position:absolute; left:12px; width:20px; height:2px; background:var(--ink);
  border-radius:2px; transition:.4s var(--ease);
}
.burger span:nth-child(1){ top:18px; }
.burger span:nth-child(2){ top:24px; }
.burger[aria-expanded="true"] span:nth-child(1){ top:21px; transform:rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ top:21px; transform:rotate(-45deg); }
@media (max-width:1000px){ .burger{ display:block; } }

.drawer{
  position:fixed; inset:0; z-index:690;
  background:rgba(7,8,10,.97);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  display:flex; flex-direction:column; justify-content:center; gap:36px;
  padding:var(--nav-h) var(--pad) 40px;
  clip-path:circle(0% at calc(100% - 40px) 38px);
  transition:clip-path .7s var(--ease);
  pointer-events:none;
}
.drawer.open{ clip-path:circle(150% at calc(100% - 40px) 38px); pointer-events:auto; }
.drawer__links{ display:flex; flex-direction:column; gap:6px; }
.drawer__links a{
  font-family:var(--f-display); font-size:clamp(34px,10vw,58px); letter-spacing:.01em;
  display:flex; align-items:baseline; gap:14px; padding:6px 0;
  opacity:0; transform:translateY(24px);
  transition:opacity .5s var(--ease), transform .5s var(--ease), color .3s;
}
.drawer.open .drawer__links a{ opacity:1; transform:none; }
.drawer__links a:hover{ color:var(--red); }
.drawer__links i{ font-family:var(--f-mono); font-size:12px; color:var(--red); font-style:normal; }
.drawer__foot{ display:flex; flex-wrap:wrap; gap:10px; }

/* ----------------------------------------------------------------- 4. HERO */
.hero{
  position:relative; min-height:100svh; display:grid; align-items:center;
  padding:calc(var(--nav-h) + 40px) 0 90px; overflow:hidden;
}
/* --- hero background reel ------------------------------------------------
   The clips carry the dashcam's own overlay bar burned into the bottom of the
   frame. --crop is the fraction of height to lose: the inner wrapper is grown
   by 1/(1-crop) and pinned to the top, so the strip falls outside the box.
   No re-encode, no quality loss, and changing the number is one edit. */
.hero__reel{
  position:absolute; inset:0; overflow:hidden; z-index:0;
  --crop:.07; --reel-opacity:.42;
}
.hero__reel[hidden]{ display:none; }
.hero__reelcrop{
  position:absolute; left:0; top:0; width:100%;
  height:calc(100% / (1 - var(--crop)));
}
.hero__vid{
  position:absolute; inset:0; width:100%; height:100%;
  /* Pinned to the top of the crop box on purpose. With the default centred
     position the overflow splits top and bottom, and how much of the burned-in
     bar survives would depend on the viewport aspect. Anchored to the top, the
     bottom is always the part that falls outside, at every window size. */
  object-fit:cover; object-position:center top;
  opacity:0; transition:opacity .35s linear;
  /* the footage is night highway: lift it just enough to read as motion */
  filter:saturate(1.15) contrast(1.08);
}
.hero__vid.is-on{ opacity:var(--reel-opacity); }
/* Sits over the video so the headline keeps its contrast no matter what frame
   is on screen. Heavier at the bottom, where the copy is. */
.hero__reelveil{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(7,8,10,.72) 0%, rgba(7,8,10,.34) 34%, rgba(7,8,10,.8) 100%),
    radial-gradient(120% 80% at 18% 42%, rgba(7,8,10,.1), rgba(7,8,10,.72) 78%);
}


.hero__canvas{ position:absolute; inset:0; width:100%; height:100%; opacity:.85; z-index:1; }
.hero__grid{
  position:absolute; inset:-10%;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(70% 60% at 50% 45%, #000 20%, transparent 78%);
  -webkit-mask-image:radial-gradient(70% 60% at 50% 45%, #000 20%, transparent 78%);
  transform:translate3d(calc((var(--sx) - .5) * -26px), calc((var(--sy) - .5) * -26px), 0);
  transition:transform .5s var(--ease);
}
.hero__mesh{ position:absolute; inset:0; filter:blur(60px); opacity:.55; }
.blob{ position:absolute; border-radius:50%; will-change:transform; }
.blob--a{
  width:48vw; height:48vw; left:-8vw; top:-10vw;
  background:radial-gradient(circle, rgba(225,22,60,.55), transparent 65%);
  animation:float1 18s ease-in-out infinite;
}
.blob--b{
  width:42vw; height:42vw; right:-6vw; top:12vw;
  background:radial-gradient(circle, rgba(255,182,39,.34), transparent 65%);
  animation:float2 22s ease-in-out infinite;
}
.blob--c{
  width:38vw; height:38vw; left:32vw; bottom:-14vw;
  background:radial-gradient(circle, rgba(168,85,247,.34), transparent 65%);
  animation:float3 26s ease-in-out infinite;
}
@keyframes float1{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(6vw,4vw) scale(1.14)} }
@keyframes float2{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-5vw,6vw) scale(.88)} }
@keyframes float3{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(4vw,-5vw) scale(1.1)} }

.hero__spot{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(280px circle at var(--mx) var(--my), rgba(255,182,39,.10), transparent 70%);
}

.hero__inner{
  position:relative; z-index:2;
  width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad);
}

.hero__eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-2); border:1px solid var(--line); border-radius:99px;
  padding:8px 16px; background:rgba(16,19,25,.5); backdrop-filter:blur(8px);
}
.hero__eyebrow .dot{
  width:7px; height:7px; border-radius:50%; background:var(--red);
  box-shadow:0 0 0 0 rgba(225,22,60,.7); animation:pulse 2.2s infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(225,22,60,.6) }
  70%{ box-shadow:0 0 0 12px rgba(225,22,60,0) }
  100%{ box-shadow:0 0 0 0 rgba(225,22,60,0) }
}

.hero__title{
  font-family:var(--f-display);
  font-size:clamp(52px, 13.5vw, 190px);
  /* Anton's glyph box is taller than its caps, so .86 made consecutive lines
     kiss. .95 keeps the stack tight without the overlap. */
  line-height:.95; letter-spacing:-.01em; margin:8px 0 0;
  text-transform:uppercase;
  perspective:900px;
}
.hero__title .ln{ display:block; overflow:hidden; }
.hero__title .ch{
  display:inline-block; transform:translateY(105%) rotate(6deg);
  opacity:0; will-change:transform;
}
.hero__title .ln:nth-child(2) .ch{
  background:var(--grad-hot); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__title .ln:nth-child(3) .ch{ -webkit-text-stroke:1.5px var(--ink-3); color:transparent; }
body.ready .hero__title .ch{
  transform:none; opacity:1;
  transition:transform 1s var(--ease), opacity .7s;
  transition-delay:calc(var(--i) * 26ms + 120ms);
}
.hero__title:hover .ln:nth-child(3) .ch{
  -webkit-text-stroke-color:var(--red); transition:-webkit-text-stroke-color .4s;
}

/* --- "posting <word>" ----------------------------------------------------
   Promoted out of the sub-copy: the label stays small and quiet, the word
   runs at sub-headline size in the brand gradient with a blinking caret. */
.hero__now{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 14px;
  margin-top:clamp(20px,3vw,34px);
}
/* The handle in the hero meta row points at the socials list, because the
   handle is not the same on every platform — the channel and X differ — and
   the list is the only honest answer to "where are you". */
.hero__handle{
  color:inherit; text-decoration:none; position:relative;
  padding-bottom:1px; border-bottom:1px solid rgba(237,239,243,.28);
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.hero__handle:hover, .hero__handle:focus-visible{
  color:var(--red); border-bottom-color:var(--red);
}

.hero__nowlab{
  font-family:var(--f-mono); font-size:clamp(10px,1vw,12px); letter-spacing:.28em;
  text-transform:uppercase; color:var(--ink-3); flex:none;
  transform:translateY(-.15em);
}
.hero__caret{
  /* Pulled back onto the word: the flex gap is for the label, not for this. */
  width:.085em; height:.8em; flex:none; align-self:center;
  font-size:clamp(26px,5.2vw,60px);
  margin-left:calc(-14px + .12em);
  background:var(--amber); animation:caret 1.05s steps(1) infinite;
}
@keyframes caret{ 0%,45%{opacity:1} 46%,100%{opacity:0} }
body.no-motion .hero__caret{ animation:none; opacity:.8; }

.hero__sub{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:18px 40px;
  margin-top:clamp(18px,2.4vw,28px); max-width:900px;
}
.hero__sub p{ color:var(--ink-2); max-width:52ch; font-size:clamp(15px,1.15vw,18px); }
/* Width is measured from a hidden twin (.rot__ghost) rather than assumed from
   character count — this line has letter-spacing, so `ch` under-measures and
   clips the longer words. The transition smooths the per-frame steps. */
.rot{
  position:relative; display:inline-block;
  font-family:var(--f-display); text-transform:uppercase;
  font-size:clamp(26px,5.2vw,60px); line-height:1; letter-spacing:-.005em;
  width:0; overflow:hidden; white-space:nowrap; vertical-align:baseline;
  transition:width .28s var(--ease);
}
/* The gradient is painted on the text itself. background-clip needs a
   non-transparent paint source, hence the -webkit- pair. */
.rot__t{
  display:inline-block;
  background:linear-gradient(100deg,#FFB627,#FF3B30 46%,#A855F7);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.rot__ghost{
  position:absolute; left:0; top:0; visibility:hidden; pointer-events:none;
  white-space:pre; font:inherit; letter-spacing:inherit;
}

.hero__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:clamp(26px,3.4vw,38px); }



.hero__meta{
  display:flex; flex-wrap:wrap; gap:0 30px; margin-top:52px;
  padding-top:22px; border-top:1px solid var(--line);
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3);
}
.hero__meta b{ color:var(--ink); font-weight:600; }

.hero__scroll{
  position:absolute; left:50%; bottom:26px; translate:-50% 0; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--ink-3);
}
.hero__scroll i{
  width:1px; height:44px; background:linear-gradient(var(--red), transparent);
  animation:drop 2s infinite;
}
@keyframes drop{ 0%{ transform:scaleY(0); transform-origin:top } 45%{ transform:scaleY(1); transform-origin:top }
  55%{ transform:scaleY(1); transform-origin:bottom } 100%{ transform:scaleY(0); transform-origin:bottom } }

/* buttons */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:10px;
  padding:14px 26px; border-radius:99px; font-weight:600; font-size:14.5px;
  border:1px solid var(--line-2); overflow:hidden; isolation:isolate;
  transition:color .35s, border-color .35s, transform .2s var(--ease);
  will-change:transform;
}
.btn svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; transition:transform .35s var(--ease); }
.btn:hover svg{ transform:translateX(4px); }
.btn::before{
  content:''; position:absolute; inset:0; z-index:-1; background:var(--grad-hot);
  transform:translateY(101%); transition:transform .45s var(--ease);
}
.btn:hover::before{ transform:translateY(0); }
.btn:hover{ color:#0b0d12; border-color:transparent; }
/* brand glyph inside a button — filled, and it must not slide like the arrow */
.btn__ico{ display:inline-flex; width:17px; height:17px; flex:none; }
.btn__ico svg{ width:100%; height:100%; fill:currentColor; stroke:none; }
.btn:hover .btn__ico svg{ transform:none; }

.btn--primary{ background:var(--grad-hot); color:#0b0d12; border-color:transparent; }
.btn--primary::before{ background:var(--ink); }
.btn--ghost{ background:rgba(16,19,25,.55); backdrop-filter:blur(8px); }

/* Icon-only control. Defined after the .btn family on purpose — .btn svg pins
   a 17px box and .btn::before runs a fill sweep, both of which have to be
   undone here rather than fought with !important. */
.btn.btn--icon{
  display:grid; place-items:center; width:50px; height:50px; padding:0; flex:none;
  border-radius:50%; border:1px solid var(--line-2); background:rgba(16,19,25,.55);
  backdrop-filter:blur(8px); color:var(--ink-2); cursor:pointer; overflow:hidden;
  transition:color .3s var(--ease), border-color .3s var(--ease),
             background .3s var(--ease), box-shadow .3s var(--ease);
}
.btn.btn--icon[hidden]{ display:none; }
.btn.btn--icon::before{ content:none; }
.btn.btn--icon svg{
  grid-area:1/1; width:22px; height:22px; transform:none;
  fill:none; stroke:currentColor; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round;
  transition:opacity .2s var(--ease);
}
.btn.btn--icon:hover svg{ transform:none; }
/* the speaker cone is a filled wedge; the waves and the cross are strokes */
.btn.btn--icon svg path:first-child{ fill:currentColor; stroke-width:1.5; }
.btn.btn--icon .ico-on{ opacity:0; }
.btn.btn--icon:hover{ color:var(--ink); border-color:var(--red); background:rgba(16,19,25,.8); }
.btn.btn--icon[aria-pressed="true"]{
  color:#0b0d12; background:var(--grad-hot); border-color:transparent;
  box-shadow:0 6px 20px rgba(225,22,60,.32);
}
.btn.btn--icon[aria-pressed="true"] .ico-on{ opacity:1; }
.btn.btn--icon[aria-pressed="true"] .ico-mute{ opacity:0; }
@media (max-width:560px){ .btn.btn--icon{ width:46px; height:46px; } }
.btn--sm{ padding:10px 18px; font-size:13px; }
.btn:active{ transform:scale(.96); }

/* --------------------------------------------------------------- 5. TICKER */
.ticker{
  border-block:1px solid var(--line); background:var(--bg-2);
  padding:0; overflow:hidden; position:relative; z-index:3;
}
.ticker::before,.ticker::after{
  content:''; position:absolute; top:0; bottom:0; width:14vw; z-index:2; pointer-events:none;
}
.ticker::before{ left:0;  background:linear-gradient(90deg, var(--bg-2), transparent); }
.ticker::after{ right:0; background:linear-gradient(270deg, var(--bg-2), transparent); }
.ticker__row{
  display:flex; width:max-content; gap:0;
  animation:slide 34s linear infinite;
}
.ticker__row--rev{ animation-direction:reverse; animation-duration:44s; border-top:1px solid var(--line); }
.ticker:hover .ticker__row{ animation-play-state:paused; }
@keyframes slide{ to{ transform:translateX(-50%) } }
.ticker__item{
  display:inline-flex; align-items:center; gap:20px; padding:16px 26px;
  font-family:var(--f-display); font-size:clamp(18px,2.4vw,32px); letter-spacing:.04em;
  color:var(--ink-3); white-space:nowrap; transition:color .3s;
}
.ticker__row:hover .ticker__item{ color:var(--ink); }
.ticker__item::after{
  content:''; width:8px; height:8px; border-radius:50%; background:var(--red); flex:none;
}
.ticker__item:nth-child(even){ color:var(--ink-2); }
.ticker__item:nth-child(3n)::after{ background:var(--amber); }

/* -------------------------------------------------------------- SECTION UI */
.sec{ position:relative; padding:clamp(80px,11vw,170px) 0; }
/* Sections used to butt straight into each other, so the joins read as hard
   seams. A hairline that fades out at both ends softens the edge without
   drawing a full rule across the page. */
.sec + .sec::before,
.statband + .sec::before,
.sec + .statband::before{
  content:""; position:absolute; inset:0 auto auto 0; width:100%; height:1px;
  background:linear-gradient(90deg, transparent, var(--line) 18%, var(--line) 82%, transparent);
}
/* and a soft pool of light where one section hands over to the next */
.sec + .sec::after{
  content:""; position:absolute; left:50%; top:0; translate:-50% -50%;
  width:min(760px, 82vw); height:220px; pointer-events:none; z-index:-1;
  background:radial-gradient(50% 50% at 50% 50%, rgba(225,22,60,.055), transparent 70%);
}
.sec__head{ max-width:820px; margin-bottom:clamp(40px,5vw,70px); }
.sec__head--center{ margin-inline:auto; text-align:center; }
.sec__num{
  display:inline-block; font-family:var(--f-mono); font-size:11px; letter-spacing:.3em;
  color:var(--red); margin-bottom:14px;
}
.sec__num::before{ content:'— '; color:var(--ink-3); }
.sec__title{
  font-family:var(--f-display); text-transform:uppercase;
  font-size:clamp(38px,6.6vw,96px); line-height:.92; letter-spacing:-.005em;
}
.sec__title--xl{ font-size:clamp(52px,12vw,180px); }
/* Small qualifier that sits under a section title without competing with it. */
.sec__tag{
  display:inline-flex; align-items:center; gap:9px; margin-top:14px;
  padding:7px 15px; border-radius:99px;
  border:1px solid var(--line-2); background:rgba(255,255,255,.03);
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-2);
}
.sec__tag i{
  width:6px; height:6px; rotate:45deg; background:var(--red); flex:none;
}

.sec__lede{ margin-top:18px; color:var(--ink-2); font-size:clamp(15px,1.15vw,18px); max-width:60ch; }
.sec__head--center .sec__lede{ margin-inline:auto; }
.sec__lede a{ color:var(--amber); border-bottom:1px solid rgba(255,182,39,.35); }
.sec__lede a:hover{ color:var(--ink); border-color:var(--ink); }

/* reveal */
.reveal{ opacity:0; transform:translateY(34px); }
.reveal.in{
  opacity:1; transform:none;
  transition:opacity .8s var(--ease), transform .9s var(--ease);
  transition-delay:calc(var(--d,0) * 1ms);
}

/* -------------------------------------------------------------- 6. THE CAR */
.car{ background:linear-gradient(180deg, var(--bg), var(--bg-2) 40%, var(--bg)); }

/* Garage selector — rendered only when there is more than one car. */
.garage__tabs{
  display:flex; flex-wrap:wrap; gap:9px; margin-bottom:clamp(18px,2.4vw,28px);
}
.garage__tabs[hidden]{ display:none; }
.gtab{
  --accent:var(--red);
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 18px; border-radius:99px; border:1px solid var(--line-2);
  background:rgba(16,19,25,.6); color:var(--ink-2);
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  transition:.32s var(--ease);
}
.gtab__dot{
  width:9px; height:9px; border-radius:50%; background:var(--accent); flex:none;
  box-shadow:0 0 10px var(--accent); transition:transform .32s var(--ease);
}
.gtab__flag{
  font-size:9px; letter-spacing:.18em; padding:2px 7px; border-radius:99px;
  background:rgba(237,239,243,.09); color:var(--ink-3);
}
.gtab:hover{ color:var(--ink); border-color:var(--ink-3); transform:translateY(-2px); }
.gtab.on{
  color:var(--ink); border-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 16%, transparent);
}
.gtab.on .gtab__dot{ transform:scale(1.25); }

.car__stage{
  position:relative; margin:0 auto clamp(40px,5vw,70px);
  padding:clamp(24px,4vw,56px) 0;
  border-radius:calc(var(--r) * 1.6);
  background:
    radial-gradient(46% 90% at 22% 100%, rgba(168,85,247,.16), transparent 62%),
    radial-gradient(46% 90% at 78% 100%, rgba(168,85,247,.13), transparent 62%),
    radial-gradient(80% 120% at 50% 100%, rgba(225,22,60,.09), transparent 60%),
    linear-gradient(180deg, rgba(22,26,34,.7), rgba(11,13,18,.4));
  border:1px solid var(--line); overflow:hidden;
}
.car__stage::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,.06) 48%, transparent 62%);
  transform:translateX(-120%);
  animation:sweep 6s 1.5s var(--ease) infinite;
}
@keyframes sweep{ 0%{transform:translateX(-120%)} 45%,100%{transform:translateX(120%)} }

.car__art{ position:relative; padding-inline:clamp(8px,3vw,40px); }
.car__art[hidden]{ display:none; }

/* `--accent` is set per car from content.js; currentColor follows it. */
.car__stage{ --accent: var(--purple-hot); }
.carsvg{ width:100%; height:auto; overflow:visible; color:var(--accent); }
.car__stage.swapping .carsvg,
.car__stage.swapping .car__badge{ opacity:0; transition:opacity .22s var(--ease); }
.carsvg .draw{ stroke-dasharray:var(--len,1200); stroke-dashoffset:var(--len,1200); }
.car__stage.drawn .carsvg .draw{
  stroke-dashoffset:0;
  transition:stroke-dashoffset 1.6s var(--ease);
  transition-delay:calc(var(--dd,0) * 40ms);
}
.c7wheel{ transform-box:fill-box; transform-origin:center; }
.car__stage.drawn .c7wheel .spokes{ animation:spin 5s linear infinite; transform-box:fill-box; transform-origin:center; }
/* Nose points left, so the car "drives" left — a wheel rolling left turns
   counter-clockwise on screen. Positive rotation spun them backwards. */
@keyframes spin{ to{ transform:rotate(-360deg) } }

/* --- the actual car: black paint, 5% tint, purple brakes ---------------- */

/* glass. Full 5% everywhere; the windshield keeps only its legal sunstrip. */
.carsvg .glass{ fill:rgba(159,216,255,.055); }
.carsvg .sunstrip{ fill:rgba(159,216,255,.20); }
.carsvg .glass, .carsvg .sunstrip{
  opacity:0; transition:opacity .9s var(--ease) 1.05s;
}
.car__stage.drawn .carsvg .glass,
.car__stage.drawn .carsvg .sunstrip{ opacity:1; }

/* gloss black aero — splitter, Z06 grille, duckbill */
.carsvg .aero{ fill:#04050700; stroke:none; }
.car__stage.drawn .carsvg .aero{
  fill:#0a0c10; transition:fill .7s ease 1.2s;
}
.carsvg .aero-edge{ stroke:rgba(237,239,243,.30); stroke-width:1.4; fill:none; }

/* purple calipers + tow hook. Fixed to the car, so they never spin. */
.carsvg .caliper{
  fill:none; stroke:var(--accent); stroke-width:7; stroke-linecap:round;
  filter:drop-shadow(0 0 7px rgba(168,85,247,.85));
  filter:drop-shadow(0 0 7px color-mix(in srgb, var(--accent) 75%, transparent));
  opacity:0; transition:opacity .6s ease 1.45s;
}
.carsvg .towhook{
  fill:none; stroke:var(--accent); stroke-width:4; stroke-linecap:round;
  filter:drop-shadow(0 0 6px rgba(168,85,247,.8));
  filter:drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 70%, transparent));
  opacity:0; transition:opacity .6s ease 1.6s;
}
.car__stage.drawn .carsvg .caliper,
.car__stage.drawn .carsvg .towhook{ opacity:1; }

/* carbon flash badging */
.carsvg .badge{ fill:#2a2f39; stroke:rgba(237,239,243,.22); stroke-width:1; opacity:0;
  transition:opacity .6s ease 1.55s; }
.car__stage.drawn .carsvg .badge{ opacity:1; }

/* black paint fill under the neon outline */
.carsvg .body{ opacity:0; transition:opacity .8s ease .3s; }
.car__stage.drawn .carsvg .body{ opacity:1; }

/* The traced art is FILLED, not stroked, so the stroke-dash draw-on has
   nothing to animate. Reveal it with a left-to-right wipe instead. */
.carsvg.traced .tracewrap{ clip-path:inset(0 100% 0 0); }
.car__stage.drawn .carsvg.traced .tracewrap{
  clip-path:inset(0 0 0 0);
  transition:clip-path 1.5s var(--ease) .15s;
}

/* aftermarket front end laid over the traced stock nose */

/* smoked taillight covers */
.carsvg .smoked{
  fill:rgba(7,8,10,.62); stroke:none; opacity:0;
  transition:opacity .6s ease 1.5s;
}
.car__stage.drawn .carsvg .smoked{ opacity:1; }


.car__plate--removed{
  position:absolute; top:clamp(16px,3vw,30px); left:clamp(16px,3vw,34px); z-index:3;
  display:grid; justify-items:center; gap:2px; padding:8px 16px 6px;
  background:linear-gradient(180deg,#f4f5f7,#dfe3e8); color:#12151b;
  border-radius:8px; border:2px solid #b9c0cb;
  box-shadow:0 10px 30px rgba(0,0,0,.5);
  transform:rotate(-3deg);
  transition:transform .5s var(--ease);
}
.car__plate:hover{ transform:rotate(0) scale(1.05); }
.car__plate-top{ font-family:var(--f-mono); font-size:8px; letter-spacing:.3em; color:#8a2432; }
.car__plate-num{ font-family:var(--f-display); font-size:clamp(18px,2.6vw,28px); letter-spacing:.06em; }
.car__plate-bot{ font-family:var(--f-mono); font-size:7px; letter-spacing:.2em; color:#5d6673; }

.car__badge{
  position:absolute; right:clamp(16px,3vw,34px); bottom:clamp(16px,3vw,30px); z-index:3;
  text-align:right; font-family:var(--f-mono); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-3);
}
.car__badge b{ display:block; font-family:var(--f-display); font-size:clamp(20px,3vw,34px);
  letter-spacing:.02em; color:var(--ink); }

.car__cols{ display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(22px,3vw,46px); align-items:start; }
@media (max-width:900px){ .car__cols{ grid-template-columns:1fr; } }

.specs{ display:grid; gap:2px; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.spec{
  position:relative; display:grid; grid-template-columns:1fr auto; align-items:center; gap:16px;
  padding:18px clamp(16px,2vw,26px); background:var(--surface);
  transition:background .3s;
}
.spec:hover{ background:var(--surface-2); }
.spec__label{
  display:flex; align-items:center; gap:10px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-3);
}
.spec__ico{
  display:inline-flex; width:26px; height:26px; flex:none; border-radius:8px;
  align-items:center; justify-content:center;
  background:rgba(255,255,255,.04); border:1px solid var(--line);
  color:var(--ink-2); transition:.35s var(--ease);
}
.spec__ico svg{ width:14px; height:14px; }
.spec:hover .spec__ico{
  color:var(--accent, var(--red)); border-color:var(--accent, var(--red));
  background:color-mix(in srgb, var(--accent, #E1163C) 14%, transparent);
}

/* crossed-flags accent */
.flags{ width:100%; height:100%; }
.sec__num--flags{ display:inline-flex; align-items:center; gap:10px; }
.sec__num--flags .flagswrap{
  display:inline-block; width:30px; height:19px; color:var(--red); opacity:.9;
}
.spec__val{ font-family:var(--f-display); font-size:clamp(19px,2.3vw,30px); letter-spacing:.02em; }
.spec__bar{
  grid-column:1 / -1; height:3px; border-radius:2px; background:var(--line); overflow:hidden;
}
.spec__bar i{
  display:block; height:100%; width:0; background:var(--grad-hot); border-radius:2px;
  transition:width 1.3s var(--ease); transition-delay:calc(var(--d,0) * 1ms);
}
.specs.in .spec__bar i{ width:calc(var(--w) * 100%); }

.mods{
  border:1px solid var(--line); border-radius:var(--r); padding:clamp(20px,2.5vw,30px);
  background:linear-gradient(160deg, var(--surface), rgba(11,13,18,.6));
}
.mods__title{ font-family:var(--f-display); font-size:24px; letter-spacing:.03em; text-transform:uppercase; }
.mods__list{ margin:18px 0 0; display:grid; gap:11px; }
.mods__list li{
  display:flex; gap:12px; align-items:flex-start; font-size:14.5px; color:var(--ink-2);
  opacity:0; transform:translateX(-12px);
}
.mods.in .mods__list li{
  opacity:1; transform:none;
  transition:.6s var(--ease); transition-delay:calc(var(--i) * 70ms);
}
.mods__list li::before{
  content:''; flex:none; width:6px; height:6px; margin-top:8px; rotate:45deg;
  background:var(--red);
}
.mods__note{ margin-top:20px; padding-top:16px; border-top:1px solid var(--line);
  font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }

/* ordered-but-not-fitted: called out, never claimed as done */
.mods__list li.mods__break{
  margin-top:12px; padding-top:16px; border-top:1px solid var(--line);
  align-items:center; gap:9px;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--amber);
}
.mods__break::before{ display:none !important; }
.mods__breakdot{
  position:relative; width:16px; height:16px; flex:none; border-radius:50%;
  display:grid; place-items:center;
}
.mods__breakdot::before{        /* slowly turning dashed ring — "in transit" */
  content:''; position:absolute; inset:0; border-radius:50%;
  border:1.5px dashed var(--amber); opacity:.7;
  animation:spinslow 5s linear infinite;
}
.mods__breakdot::after{         /* breathing core */
  content:''; width:6px; height:6px; border-radius:50%; background:var(--amber);
  box-shadow:0 0 9px rgba(255,182,39,.9);
  animation:corepulse 2.2s ease-in-out infinite;
}
@keyframes spinslow{ to{ transform:rotate(360deg) } }
@keyframes corepulse{
  0%,100%{ transform:scale(1);   opacity:1 }
  50%    { transform:scale(.55); opacity:.55 }
}
@keyframes ping2{
  0%{ box-shadow:0 0 0 0 rgba(255,182,39,.55) }
  70%{ box-shadow:0 0 0 10px rgba(255,182,39,0) }
  100%{ box-shadow:0 0 0 0 rgba(255,182,39,0) }
}
.mods__soon{ color:var(--ink-3); }
.mods__soon::before{ background:var(--amber) !important; opacity:.5; }
/* Already on the car when he bought it — shown, but not claimed as his work. */
.mods__came{ color:var(--ink-3); }
.mods__came::before{ background:var(--ink-3) !important; opacity:.55; }

/* stat band */
.statband{
  position:relative; border-block:1px solid var(--line); background:var(--bg-2);
  padding:clamp(36px,5vw,64px) 0;
}
/* The stat band is the one hard-edged block on the page, so it gets a rounded
   inset instead of a full-bleed rectangle butting into the sections. */
.statband::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.03), transparent 40%, rgba(0,0,0,.22));
}
/* Per-platform panels, each owning its numbers. */
.platforms{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(12px,1.6vw,20px); }
@media (max-width:760px){ .platforms{ grid-template-columns:1fr; } }

.plat{
  position:relative; display:flex; flex-direction:column; gap:clamp(16px,2vw,26px);
  padding:clamp(20px,2.6vw,32px); border-radius:var(--r);
  border:1px solid var(--line); background:var(--surface); overflow:hidden;
  transition:border-color .4s, transform .35s var(--ease);
}
.plat::after{
  content:''; position:absolute; inset:auto 0 0 0; height:2px;
  transform:scaleX(0); transform-origin:left; transition:transform .55s var(--ease);
}
.plat--instagram::after{ background:linear-gradient(90deg,#F58529,#DD2A7B,#8134AF); }
.plat--tiktok::after{ background:linear-gradient(90deg,#25F4EE,#FE2C55); }
.plat:hover{ border-color:var(--line-2); transform:translateY(-3px); }
.plat:hover::after{ transform:scaleX(1); }

.plat__head{ display:flex; align-items:center; gap:14px; }
.plat__ico{
  width:44px; height:44px; flex:none; border-radius:13px; display:grid; place-items:center;
  border:1px solid var(--line-2); background:rgba(255,255,255,.04); color:var(--ink);
  transition:.35s var(--ease);
}
.plat__ico svg{ width:21px; height:21px; }
.plat--instagram:hover .plat__ico{ color:#fff; background:linear-gradient(135deg,#F58529,#DD2A7B,#8134AF); border-color:transparent; }
.plat--tiktok:hover .plat__ico{ color:#fff; background:linear-gradient(135deg,#25F4EE,#FE2C55); border-color:transparent; }
.plat__id{ display:flex; flex-direction:column; }
.plat__name{ font-family:var(--f-display); font-size:20px; letter-spacing:.03em; text-transform:uppercase; }
.plat__handle{ font-family:var(--f-mono); font-size:11.5px; color:var(--ink-3); }
.plat__go{ margin-left:auto; color:var(--ink-3); transition:.35s var(--ease); }
.plat__go svg{ width:16px; height:16px; }
.plat:hover .plat__go{ color:var(--ink); transform:translate(3px,-3px); }

.plat__metrics{ display:flex; flex-wrap:wrap; gap:clamp(20px,4vw,48px); }
.plat__metric{ display:flex; flex-direction:column; }
.plat__num{
  font-family:var(--f-display); font-size:clamp(34px,5vw,64px); line-height:1; letter-spacing:-.01em;
  background:var(--grad-hot); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.plat--tiktok .plat__num{ background:var(--grad-purple); -webkit-background-clip:text; background-clip:text; }
.plat__label{
  margin-top:6px; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-3);
}

/* honest label — these numbers really are pulled live */
.livetag{
  display:flex; align-items:center; gap:9px; margin-top:18px;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3);
}
.livetag__dot{
  width:7px; height:7px; border-radius:50%; background:#34D399; flex:none;
  box-shadow:0 0 0 0 rgba(52,211,153,.6); animation:pinglive 2.6s infinite;
}
@keyframes pinglive{
  0%{ box-shadow:0 0 0 0 rgba(52,211,153,.5) }
  70%{ box-shadow:0 0 0 10px rgba(52,211,153,0) }
  100%{ box-shadow:0 0 0 0 rgba(52,211,153,0) }
}

/* ---------------------------------------------------------------- 7. FEED */
.filters{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:26px; }
.chip{
  padding:9px 18px; border-radius:99px; border:1px solid var(--line-2);
  font-family:var(--f-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-2); background:rgba(16,19,25,.6);
  transition:.3s var(--ease);
}
.chip:hover{ color:var(--ink); border-color:var(--ink-3); transform:translateY(-2px); }
.chip.on{ background:var(--grad-hot); color:#0b0d12; border-color:transparent; }

.grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  grid-auto-rows:210px; gap:clamp(10px,1.2vw,18px);
  /* `dense` backfills the holes a mixed-footprint grid leaves behind when a
     filter hides cards — without it, Featured renders full of gaps. */
  grid-auto-flow:row dense;
}
@media (max-width:1100px){ .grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:760px){ .grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:180px; } }
@media (max-width:460px){ .grid{ grid-template-columns:1fr; grid-auto-rows:220px; } }

.card{
  position:relative; border-radius:var(--r); overflow:hidden; isolation:isolate;
  border:1px solid var(--line); background:var(--surface);
  opacity:0; transform:translateY(30px) scale(.97);
  transition:opacity .7s var(--ease), transform .7s var(--ease), border-color .4s;
  transition-delay:calc(var(--i) * 60ms);
  will-change:transform;
}
.grid.in .card{ opacity:1; transform:none; }
.card.hide{ display:none; }
.card--big{ grid-column:span 2; grid-row:span 2; }
.card--tall{ grid-row:span 2; }
.card--wide{ grid-column:span 2; }
@media (max-width:460px){
  .card--big,.card--tall,.card--wide{ grid-column:span 1; grid-row:span 1; }
}
.card:hover{ border-color:var(--line-2); }

.card__media{ position:absolute; inset:0; overflow:hidden; }
.card__media img{ width:100%; height:100%; object-fit:cover;
  transition:transform 1s var(--ease), filter .6s; filter:saturate(.85) contrast(1.05); }
.card:hover .card__media img{ transform:scale(1.07); filter:saturate(1.1) contrast(1.08); }

/* generated placeholder */
.card__ph{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(225,22,60,.20), transparent 55%),
    radial-gradient(110% 90% at 90% 100%, rgba(168,85,247,.20), transparent 55%),
    linear-gradient(160deg, var(--surface-2), #0c0e13);
}
.card__ph::before{
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:30px 30px;
  mask-image:radial-gradient(80% 70% at 50% 50%, #000, transparent);
  -webkit-mask-image:radial-gradient(80% 70% at 50% 50%, #000, transparent);
}
.card__ph svg{
  position:absolute; left:50%; top:46%; translate:-50% -50%;
  width:62%; opacity:.42; transition:.7s var(--ease);
}
.card:hover .card__ph svg{ opacity:.75; translate:-50% -54%; }

/* Many covers already have his own text burned into them, so the scrim has to
   work harder than usual for the card's own title to stay readable. */
.card__scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(7,8,10,.10) 0%,
    rgba(7,8,10,0) 32%,
    rgba(7,8,10,.72) 72%,
    rgba(7,8,10,.96) 100%);
}
.card__body{ position:absolute; inset:auto 0 0 0; padding:clamp(14px,1.6vw,22px); }
.card__meta{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-bottom:9px; }
.card__stat{
  display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:99px;
  font-family:var(--f-mono); font-size:9.5px; font-weight:600; letter-spacing:.12em;
  background:rgba(7,8,10,.62); border:1px solid var(--line-2); color:var(--ink);
  backdrop-filter:blur(6px);
}
.card__stat svg{ width:10px; height:10px; opacity:.95; flex:none; }
/* Views read purple (the signature), likes read red. A row of identical grey
   glyphs made every card look like it carried the same metric. */
.card__stat--views svg{ color:var(--purple-hot,#A855F7); }
.card__stat--views{ border-color:rgba(168,85,247,.34); }
.card__stat--likes svg{ color:#FF3B30; }
.card__stat--likes{ border-color:rgba(255,59,48,.32); }
.card__kind{
  display:inline-block; padding:5px 11px; border-radius:99px;
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  background:rgba(237,239,243,.1); border:1px solid var(--line-2); color:var(--ink-2);
  backdrop-filter:blur(6px);
}
.card[data-kind="reel"]  .card__kind{ color:var(--red);   border-color:rgba(225,22,60,.4);  background:rgba(225,22,60,.12); }
.card[data-kind="meet"]  .card__kind{ color:var(--amber); border-color:rgba(255,182,39,.4); background:rgba(255,182,39,.12); }
.card[data-kind="race"]  .card__kind{ color:var(--ice);   border-color:rgba(159,216,255,.4);background:rgba(159,216,255,.12); }
.card[data-kind="build"] .card__kind{ color:var(--purple-hot); border-color:rgba(168,85,247,.45); background:rgba(168,85,247,.14); }
.card__title{
  font-family:var(--f-display); font-size:clamp(16px,1.5vw,24px);
  letter-spacing:.02em; line-height:1.1; text-transform:uppercase;
}
.card__note{
  margin-top:6px; font-size:13px; color:var(--ink-2); line-height:1.45;
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .5s var(--ease), opacity .4s, margin .4s;
}
.card:hover .card__note{ max-height:80px; opacity:1; }
.card__go{
  position:absolute; top:14px; right:14px; width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center; background:rgba(7,8,10,.6); border:1px solid var(--line-2);
  backdrop-filter:blur(8px); opacity:0; transform:translate(6px,-6px) rotate(-25deg);
  transition:.45s var(--ease);
}
.card:hover .card__go{ opacity:1; transform:none; }
.card__go svg{ width:15px; height:15px; fill:none; stroke:var(--ink); stroke-width:2; stroke-linecap:round; }
.card__sheen{
  position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .4s;
  background:radial-gradient(220px circle at var(--cx,50%) var(--cy,50%), rgba(255,255,255,.10), transparent 70%);
}
.card:hover .card__sheen{ opacity:1; }

.feed__cta{
  margin-top:clamp(30px,4vw,52px); display:flex; justify-content:center;
  gap:12px; flex-wrap:wrap;
}
/* Featured is the default view, so give its chip a little more presence */
.chip[data-filter="featured"].on{ box-shadow:0 6px 20px rgba(225,22,60,.28); }

/* ------------------------------------------------------------ 8. BUILD LOG */
.log{ background:linear-gradient(180deg, var(--bg), var(--bg-2)); }
.timeline{ position:relative; padding-left:clamp(28px,5vw,90px); }
.timeline__rail{
  position:absolute; left:clamp(6px,1.6vw,30px); top:6px; bottom:6px; width:2px;
  background:var(--line); border-radius:2px;
}
.timeline__rail i{ display:block; width:100%; height:0; background:var(--grad-hot);
  border-radius:2px; box-shadow:0 0 14px rgba(225,22,60,.5); }
.tl{
  position:relative; padding:clamp(18px,2.4vw,30px) 0;
  opacity:0; transform:translateY(26px);
}
.tl.in{ opacity:1; transform:none; transition:.8s var(--ease); transition-delay:calc(var(--i) * 90ms); }
.tl::before{
  content:''; position:absolute; left:calc(clamp(28px,5vw,90px) * -1 + clamp(6px,1.6vw,30px) - 5px);
  top:calc(clamp(18px,2.4vw,30px) + 12px);
  width:12px; height:12px; rotate:45deg; background:var(--bg-2);
  border:2px solid var(--red); transition:.4s var(--ease);
}
.tl:hover::before{ background:var(--red); rotate:135deg; scale:1.2; }
.tl__when{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--red);
}
.tl__title{
  font-family:var(--f-display); font-size:clamp(24px,3.6vw,52px); line-height:1;
  letter-spacing:.01em; text-transform:uppercase; margin:9px 0 8px;
  transition:color .35s, transform .5s var(--ease);
}
.tl:hover .tl__title{ color:var(--amber); transform:translateX(8px); }
.tl__body{ color:var(--ink-2); max-width:62ch; font-size:15px; }

/* ---------------------------------------------------------------- 9. CREW */
.crew__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:clamp(12px,1.4vw,20px); }
.mate{
  position:relative; padding:clamp(22px,2.6vw,34px); border-radius:var(--r);
  border:1px solid var(--line); background:var(--surface); overflow:hidden;
  opacity:0; transform:translateY(26px);
  transition:opacity .7s var(--ease), transform .7s var(--ease), border-color .4s;
  transition-delay:calc(var(--i) * 90ms);
}
.crew__grid.in .mate{ opacity:1; transform:none; }
/* Each card carries its own --paint (set per person in content.js). It falls
   back to the site gradient, so a crew member with no colour still looks right. */
.mate{ --paint:var(--red); }
.mate::after{
  content:''; position:absolute; inset:auto 0 0 0; height:2px;
  background:linear-gradient(90deg, var(--paint), transparent);
  transform:scaleX(0); transform-origin:left; transition:transform .55s var(--ease);
}
/* A very faint wash of the same colour, so the card reads as theirs before
   you've read a word of it. */
.mate::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 90% at 100% 0%,
             color-mix(in srgb, var(--paint) 14%, transparent), transparent 62%);
  opacity:0; transition:opacity .45s var(--ease);
}
.mate:hover{ border-color:color-mix(in srgb, var(--paint) 45%, var(--line-2)); }
.mate:hover::after{ transform:scaleX(1); }
.mate:hover::before{ opacity:1; }
.mate > *{ position:relative; z-index:1; }

/* the badge sits on the corner of the picture, in their colour */
.mate__pic{ position:relative; }
.mate__badge{
  position:absolute; left:50%; bottom:-9px; translate:-50% 0; white-space:nowrap;
  padding:4px 9px; border-radius:99px;
  background:rgba(7,8,10,.92); border:1px solid color-mix(in srgb, var(--paint) 55%, transparent);
  color:var(--paint);
  font-family:var(--f-mono); font-size:8px; letter-spacing:.16em; text-transform:uppercase;
}
.mate__name{ font-family:var(--f-display); font-size:clamp(21px,2.4vw,32px);
  letter-spacing:.02em; text-transform:uppercase; }
.mate__role{ margin-top:4px; color:var(--ink-2); font-size:14px; }

/* profile picture, pulled from whichever platform they're on */
.mate__pic{
  display:block; width:64px; height:64px; border-radius:50%; margin-bottom:16px;
  overflow:hidden; position:relative; flex:none;
  border:1px solid var(--line-2); background:var(--surface-2);
  display:grid; place-items:center;
  transition:.4s var(--ease);
}
.mate__pic img{ width:100%; height:100%; object-fit:cover; }
.mate__initial{
  font-family:var(--f-display); font-size:26px; color:var(--ink-3); letter-spacing:.02em;
}
.mate:hover .mate__pic{ border-color:var(--paint); transform:scale(1.06); }

.mate__handles{ display:flex; flex-wrap:wrap; gap:7px; margin-top:16px; }
.mate__chip{
  display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:99px;
  border:1px solid var(--line); background:rgba(255,255,255,.03);
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.08em; color:var(--ink-2);
  transition:.3s var(--ease);
}
.mate__chip svg{ width:12px; height:12px; flex:none; }
.mate:hover .mate__chip{
  border-color:color-mix(in srgb, var(--paint) 40%, var(--line-2)); color:var(--ink);
}

/* the open slot */
.mate--open{
  border-style:dashed; border-color:var(--line-2);
  background:linear-gradient(160deg, rgba(22,26,34,.5), rgba(11,13,18,.4));
}
.mate--open:hover{ border-color:var(--amber); }
.mate--open .mate__name{ color:var(--ink-2); }
.mate__pic--open{ border-style:dashed; color:var(--ink-3); }
.mate__pic--open svg{ width:30px; height:30px; }
.mate--open:hover .mate__pic--open{ border-color:var(--amber); color:var(--amber); }
.mate__slot{
  display:inline-flex; align-items:center; gap:7px; padding:5px 12px; border-radius:99px;
  border:1px dashed var(--line-2); font-family:var(--f-mono); font-size:10.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
}
.mate--open:hover .mate__slot{ color:var(--amber); border-color:var(--amber); }

/* ------------------------------------------------------------- 10. CONNECT */
.connect{ position:relative; overflow:hidden; }
.connect__bg{
  position:absolute; inset:0;
  background:
    radial-gradient(60% 70% at 50% 110%, rgba(225,22,60,.30), transparent 62%),
    radial-gradient(50% 50% at 12% 0%, rgba(255,182,39,.14), transparent 60%);
}
.connect .wrap{ position:relative; z-index:1; }
/* profile picture, pulled from Instagram with the rest of the live data */
.avatar{
  position:relative; width:104px; height:104px; margin:0 auto 22px;
  display:grid; place-items:center;
}
.avatar[hidden]{ display:none; }
.avatar img{
  width:88px; height:88px; border-radius:50%; object-fit:cover;
  border:2px solid var(--bg-2); position:relative; z-index:1;
}
.avatar__ring{
  position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from 0deg, var(--amber), var(--red), var(--purple-hot), var(--amber));
  animation:spinslow 9s linear infinite;
}
.avatar__tag{
  position:absolute; bottom:-6px; left:50%; translate:-50% 0; z-index:2;
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.14em;
  padding:4px 10px; border-radius:99px; white-space:nowrap;
  background:rgba(7,8,10,.92); border:1px solid var(--line-2); color:var(--ink-2);
}

.connect__links{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(12px,1.4vw,18px); margin-top:clamp(30px,4vw,54px);
}
.social{
  position:relative; display:flex; align-items:center; gap:16px;
  padding:clamp(20px,2.3vw,30px); border-radius:var(--r);
  border:1px solid var(--line-2); background:rgba(16,19,25,.62);
  backdrop-filter:blur(10px); overflow:hidden; isolation:isolate;
  transition:transform .3s var(--ease), border-color .3s;
  will-change:transform;
}
.social::before{
  content:''; position:absolute; inset:0; z-index:-1; opacity:0;
  background:var(--grad-hot); transition:opacity .4s;
}
.social:hover{ border-color:transparent; }
.social:hover::before{ opacity:1; }
.social:hover .social__ico,.social:hover .social__t,.social:hover .social__s{ color:#0b0d12; }
.social:hover .social__ico{ border-color:rgba(11,13,18,.35); background:rgba(11,13,18,.08); }
.social__ico{
  flex:none; width:48px; height:48px; border-radius:14px; display:grid; place-items:center;
  border:1px solid var(--line-2); background:rgba(255,255,255,.04); transition:.35s;
}
.social__ico svg{ width:22px; height:22px; }
.social__t{ font-family:var(--f-display); font-size:22px; letter-spacing:.03em; text-transform:uppercase; }
.social__s{ font-size:13px; color:var(--ink-2); transition:color .35s; }
.social__go{ margin-left:auto; font-size:20px; transition:transform .35s var(--ease); }
.social:hover .social__go{ transform:translateX(5px); }

.connect__marq{
  margin-top:clamp(46px,6vw,90px); overflow:hidden; border-top:1px solid var(--line); padding-top:22px;
}
.connect__marq > div{
  display:flex; width:max-content; gap:44px; animation:slide 26s linear infinite;
  font-family:var(--f-display); font-size:clamp(30px,7vw,88px); letter-spacing:.02em;
  -webkit-text-stroke:1px var(--line-2); color:transparent; white-space:nowrap;
}

/* -------------------------------------------------------- 11. FOOTER/UTILS */
.foot{ position:relative; border-top:1px solid var(--line); background:var(--bg-2); overflow:hidden; }
.foot__wrap{
  position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:24px 40px;
  align-items:center; justify-content:space-between;
  padding-block:clamp(34px,4vw,56px) clamp(90px,12vw,150px);
}
.foot__brand{ display:flex; align-items:center; gap:14px; }
.foot__mark{ width:46px; height:46px; display:block; flex:none; }
.foot__mark svg{ width:100%; height:100%; }
.foot__brand strong{ display:block; font-size:15px; }
.foot__brand span{ font-family:var(--f-mono); font-size:11.5px; color:var(--ink-3); }
.foot__soc{ display:inline-flex; align-items:center; gap:8px; }
.foot__soc svg{ width:14px; height:14px; flex:none; opacity:.7; transition:opacity .3s var(--ease); }
.foot__soc:hover svg{ opacity:1; }
.drawer__foot .chip svg{ width:13px; height:13px; margin-right:7px; vertical-align:-2px; }

/* A nav item that goes somewhere else. The arrow is the tell — it never picks
   up the sliding pill, because there is no section for it to track. */
.nav__page{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 13px; border-radius:99px;
  border:1px solid var(--line-2); background:rgba(255,255,255,.02);
  font-size:13.5px; color:var(--ink-2);
  transition:.28s var(--ease);
}
.nav__page svg{
  width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform .28s var(--ease);
}
.nav__page:hover{ color:var(--ink); border-color:var(--red); }
.nav__page:hover svg{ transform:translate(2px,-2px); }
@media (max-width:900px){ .nav__page{ display:none; } }

.foot__links{ display:flex; flex-wrap:wrap; gap:8px; }
.foot__links a{
  padding:8px 15px; border-radius:99px; border:1px solid var(--line);
  font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-2); transition:.3s var(--ease);
}
.foot__links a:hover{ color:var(--ink); border-color:var(--red); transform:translateY(-2px); }
.foot__meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; color:var(--ink-3);
}
.foot__dot{ opacity:.5; }
.foot__toggle{ border-bottom:1px dashed var(--ink-3); padding-bottom:1px; }
.foot__toggle:hover{ color:var(--ink); }
.foot__toggle[aria-pressed="true"]{ color:var(--amber); border-color:var(--amber); }
.foot__big{
  position:absolute; left:50%; bottom:-.22em; translate:-50% 0; width:max-content;
  font-family:var(--f-display); font-size:clamp(80px,20vw,300px); line-height:.8;
  letter-spacing:.02em; color:transparent; -webkit-text-stroke:1px var(--line-2);
  pointer-events:none; user-select:none;
}

/* ---------------------------------------------------------------- MOBILE
   Same site, not a stripped-down one — every section, every bit of copy.
   What changes is what the layout assumes: no hover, thumbs instead of a
   cursor, and one column where four don't fit.
   ------------------------------------------------------------------------ */

html{ -webkit-tap-highlight-color:transparent; }

/* Notch / rounded-display safe areas */
@supports (padding: env(safe-area-inset-left)){
  .wrap, .nav, .hero__inner, .drawer{
    padding-left:  max(var(--pad), env(safe-area-inset-left));
    padding-right: max(var(--pad), env(safe-area-inset-right));
  }
  .tach{ bottom: max(clamp(14px,2.2vw,28px), env(safe-area-inset-bottom)); }
}

/* Touch: hover is not available, so nothing may hide behind it, and every
   control needs a thumb-sized target. */
@media (pointer:coarse){
  .chip, .gtab{ padding:13px 18px; }
  .foot__links a{ padding:12px 16px; }
  .drawer__links a{ padding:10px 0; }
  .social{ padding:20px; }
  .btn{ padding:15px 26px; }
  .card__note{ max-height:90px; opacity:1; }
  .card__go{ opacity:1; transform:none; }
  .mate::after{ transform:scaleX(1); }       /* the hover underline, always on */
  .ticker__row{ animation-play-state:running !important; }
}

.drawer{ overflow-y:auto; -webkit-overflow-scrolling:touch; }

@media (max-width:720px){
  /* Hero: the rotating line gets its own row instead of sharing one. */
  .hero__sub{ flex-direction:column; align-items:flex-start; gap:14px; }
  .hero__meta{ gap:10px 22px; margin-top:38px; }
  .hero__scroll{ display:none; }             /* would collide with the meta row */
  .hero__actions .btn{ flex:1 1 auto; justify-content:center; }

  /* The car stage stops overlaying the plate and badge on top of the drawing
     and stacks them instead — plate, car, badge. */
  .car__stage{ display:flex; flex-direction:column; gap:16px; padding:22px 16px; }
  .car__art{ position:relative; order:2; padding-inline:0; }
  .car__badge{ position:static; order:3; align-self:flex-start; text-align:left; }

  .sec__lede{ font-size:15px; }
  .timeline{ padding-left:34px; }
}

@media (max-width:560px){
  .tach{ width:58px; height:58px; }
  .tach__val{ font-size:15px; }
  .tach__hint{ display:none; }
  .statband__grid{ gap:1px; }
  .filters{ gap:7px; }
  .garage__tabs{ gap:7px; }
  .car__plate{ transform:none; }
  .foot__meta{ gap:6px; font-size:10.5px; }
}

/* Very narrow phones — keep the headline from touching both edges. */
@media (max-width:380px){
  :root{ --pad:16px; }
  .hero__title{ font-size:clamp(42px,12.5vw,60px); }
  .ticker__item{ padding:13px 18px; }
}

/* ------------------------------------------------------------ PREFERENCES */
body.no-motion{ scroll-behavior:auto; }
html:has(body.no-motion){ scroll-behavior:auto; }
body.no-motion *,
body.no-motion *::before,
body.no-motion *::after{
  animation-duration:.001ms !important; animation-iteration-count:1 !important;
  transition-duration:.001ms !important; scroll-behavior:auto !important;
}
body.no-motion .reveal,
body.no-motion .card,
body.no-motion .mate,
body.no-motion .tl,
body.no-motion .hero__title .ch,
body.no-motion .mods__list li{ opacity:1 !important; transform:none !important; }
body.no-motion .grain,
body.no-motion .scanlines,
body.no-motion .hero__canvas{ display:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .grain,.scanlines{ display:none; }
  *{ animation-duration:.001ms !important; transition-duration:.01ms !important; }
  .reveal,.card,.mate,.tl,.hero__title .ch,.mods__list li{ opacity:1 !important; transform:none !important; }
}

@media (hover:none){
  .cursor{ display:none !important; }
  .card__note{ max-height:80px; opacity:1; }
  .card__go{ opacity:1; transform:none; }
}

/* The reel is decoration. Reduced motion (system setting or the footer toggle)
   pauses it on its first frame rather than removing the backdrop entirely. */
@media (prefers-reduced-motion:reduce){
  .hero__vid{ filter:saturate(1) contrast(1); }
}

/* Fine print in the footer. Deliberately quiet — it is a caveat, not a banner. */
.foot__wip{
  max-width:var(--maxw); margin:0 auto; padding:0 var(--pad) 26px;
  font-size:11.5px; line-height:1.6; color:var(--ink-3); opacity:.62;
  max-width:min(var(--maxw), 78ch);
}


/* ============================================================== LIGHT MODE
   A token swap, not a second stylesheet. Every surface, line and ink value is
   already a variable, so inverting them here carries the whole site. The
   brand colours do NOT flip — the red, amber and purple are the identity and
   have to stay put; only their backdrops move. */
html[data-theme="light"]{
  color-scheme: light;
  --bg:        #F4F5F7;
  --bg-2:      #EAECF0;
  --surface:   #FFFFFF;
  --surface-2: #F1F3F6;
  --line:      #DDE1E7;
  --line-2:    #C6CCD5;

  --ink:       #12151B;
  --ink-2:     #48505C;
  --ink-3:     #78818E;
}
/* Photography and the reel were graded for a dark page; on a light one they
   need to sit slightly back so they do not punch a hole in it. */
html[data-theme="light"] .hero__reelveil{
  background:
    linear-gradient(180deg, rgba(244,245,247,.72) 0%, rgba(244,245,247,.3) 34%, rgba(244,245,247,.86) 100%),
    radial-gradient(120% 80% at 18% 42%, rgba(244,245,247,.08), rgba(244,245,247,.7) 78%);
}
html[data-theme="light"] .grain{ opacity:.25; }
html[data-theme="light"] .vignette{ display:none; }
html[data-theme="light"] .hero__mesh{ opacity:.3; }
html[data-theme="light"] .nav.stuck{ background:rgba(244,245,247,.86); }
html[data-theme="light"] .loader{ background:#0b0d12; }   /* the intro stays dark */

/* ================================================================ SETTINGS */
.set{ position:relative; }
.set__btn{
  display:grid; place-items:center; width:40px; height:40px; border-radius:50%;
  border:1px solid var(--line-2); background:rgba(255,255,255,.03);
  color:var(--ink-2); cursor:pointer; transition:.28s var(--ease);
}
.set__btn svg{
  width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform .5s var(--ease);
}
.set__btn:hover{ color:var(--ink); border-color:var(--red); }
.set__btn:hover svg{ transform:rotate(90deg); }
.set__btn[aria-expanded="true"]{ color:#0b0d12; background:var(--grad-hot); border-color:transparent; }
.set__btn[aria-expanded="true"] svg{ transform:rotate(180deg); }

.set__panel{
  position:absolute; top:calc(100% + 12px); right:0; z-index:70;
  width:min(288px, calc(100vw - 32px));
  padding:16px 16px 12px; border-radius:16px;
  border:1px solid var(--line-2); background:rgba(11,13,18,.92);
  backdrop-filter:blur(20px) saturate(150%);
  box-shadow:0 24px 60px rgba(0,0,0,.55);
  transform-origin:top right;
  animation:setIn .34s var(--ease);
}
html[data-theme="light"] .set__panel{ background:rgba(255,255,255,.94); }
.set__panel[hidden]{ display:none; }
@keyframes setIn{
  from{ opacity:0; transform:translateY(-8px) scale(.96) }
  to{ opacity:1; transform:none }
}
.set__title{
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:12px;
}
.set__row{
  display:flex; align-items:center; gap:12px;
  padding:9px 0; border-top:1px solid var(--line);
}
.set__row:first-of-type{ border-top:0; }
.set__label{
  display:flex; align-items:center; gap:9px; flex:1;
  font-size:13.5px; color:var(--ink-2);
}
.set__label svg{
  width:15px; height:15px; flex:none; fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
.set__label svg path:first-child{ fill:currentColor; stroke-width:1.2; }
.set__label--sub{ padding-left:24px; font-size:12px; color:var(--ink-3); flex:none; }
.set__val{
  font-family:var(--f-mono); font-size:11px; color:var(--ink-3);
  width:2.2em; text-align:right;
}
/* the volume row is only meaningful once sound is on */
.set__row--slider{ opacity:.4; pointer-events:none; transition:opacity .3s var(--ease); }
.set__row--slider.on{ opacity:1; pointer-events:auto; }

.tgl{
  position:relative; width:40px; height:23px; border-radius:99px; flex:none;
  border:1px solid var(--line-2); background:rgba(255,255,255,.05);
  cursor:pointer; transition:.3s var(--ease);
}
.tgl i{
  position:absolute; top:2px; left:2px; width:17px; height:17px; border-radius:50%;
  background:var(--ink-3); transition:.3s var(--ease);
}
.tgl[aria-checked="true"]{ background:var(--grad-hot); border-color:transparent; }
.tgl[aria-checked="true"] i{ left:20px; background:#0b0d12; }

.rng{
  -webkit-appearance:none; appearance:none; flex:1; height:4px; border-radius:99px;
  background:linear-gradient(90deg, var(--red) var(--pct,70%), var(--line-2) var(--pct,70%));
  cursor:pointer;
}
.rng::-webkit-slider-thumb{
  -webkit-appearance:none; width:14px; height:14px; border-radius:50%;
  background:var(--ink); border:2px solid var(--red); cursor:pointer;
}
.rng::-moz-range-thumb{
  width:14px; height:14px; border-radius:50%;
  background:var(--ink); border:2px solid var(--red); cursor:pointer;
}

.set__link{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:8px; padding:10px 12px; border-radius:10px;
  background:rgba(255,255,255,.04); color:var(--ink-2);
  font-size:13px; transition:.28s var(--ease);
}
.set__link svg{
  width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; transition:transform .28s var(--ease);
}
.set__link:hover{ color:var(--ink); background:rgba(255,255,255,.08); }
.set__link:hover svg{ transform:translate(2px,-2px); }