/* ============================================================
   DRIVING LIVE AUSTRALIA — site.css
   Palette derived from the DLA emblem: brass on asphalt.
   ============================================================ */

:root{
  --asphalt:      #08080A;
  --asphalt-2:    #0F0F13;
  --asphalt-3:    #16161B;
  --brass:        #D9A94F;
  --brass-hi:     #F6E3B0;
  --brass-lo:     #8A6420;
  --bone:         #EDE9E2;
  --bone-dim:     rgba(237,233,226,.56);
  --bone-faint:   rgba(237,233,226,.30);
  --line:         rgba(237,233,226,.10);
  --line-strong:  rgba(237,233,226,.20);
  --live:         #FF3B2F;
  --drive:        #0B9BFF;

  --gutter: clamp(20px, 5vw, 72px);
  --maxw: 1440px;
  --rhythm: clamp(48px, 6.5vh, 92px);

  --brass-grad: linear-gradient(178deg, var(--brass-hi) 0%, var(--brass) 38%, var(--brass-lo) 100%);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--asphalt);
  color:var(--bone);
  font-family:"Chivo", ui-sans-serif, system-ui, sans-serif;
  font-size:clamp(15px,.55vw + 13.4px,17px);
  line-height:1.62;
  font-weight:350;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,video{ display:block; max-width:100%; }
svg{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }

::selection{ background:var(--brass); color:#000; }

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

/* ---------- Type roles ---------------------------------- */

.sign{                       /* motorway-signage display face */
  font-family:"Archivo", ui-sans-serif, sans-serif;
  font-variation-settings:"wdth" 112, "wght" 800;
  text-transform:uppercase;
  line-height:.88;
  letter-spacing:-.015em;
  margin:0;
}
.sign--tight{ font-variation-settings:"wdth" 78, "wght" 800; letter-spacing:.005em; }

/* Display type scale. Without this, any .sign heading that isn't inside
   .head / .phero / .band / .chan / .discord falls back to the browser
   default size and reads far too small next to everything else. */
h1.sign{ font-size:clamp(36px, 6.4vw, 88px); }
h2.sign{ font-size:clamp(28px, 4.2vw, 58px); }
h3.sign{ font-size:clamp(21px, 2.9vw, 38px); }

.hud{                        /* dashcam telemetry / labels */
  font-family:"Azeret Mono", ui-monospace, monospace;
  font-size:clamp(9.5px,.28vw + 8.6px,11.5px);
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:400;
}

.eyebrow{
  font-family:"Azeret Mono", ui-monospace, monospace;
  font-size:clamp(9.5px,.28vw + 8.6px,11.5px);
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--brass);
  display:flex; align-items:center; gap:.7em;
  margin:0 0 1.4rem;
}
.eyebrow::before{
  content:""; width:26px; height:2px; background:var(--brass); flex:none;
}

.lede{
  font-size:clamp(17px,.85vw + 14px,22px);
  line-height:1.5;
  color:var(--bone-dim);
  max-width:56ch;
  font-weight:300;
}

.brass-text{
  background:var(--brass-grad);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}

/* ---------- Layout -------------------------------------- */

.wrap{
  width:100%; max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
/* cinema container — for the live player only */
.wrap--wide{ max-width:1760px; padding-inline:clamp(16px,3vw,48px); }

.section{ padding-block:var(--rhythm); position:relative; }
.section--flush{ padding-block:0; }
.section--tight{ padding-block:calc(var(--rhythm) * .58); }

.rule{
  height:1px; border:0; margin:0;
  background:repeating-linear-gradient(90deg,
    var(--line-strong) 0 26px, transparent 26px 46px);
}

/* ---------- Nav ----------------------------------------- */

.nav{
  position:fixed; inset:0 0 auto 0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem;
  padding:14px var(--gutter);
  transition:background .35s var(--ease), backdrop-filter .35s var(--ease), border-color .35s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(8,8,10,.82);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--line);
}
.nav__brand{ display:flex; align-items:center; gap:.7rem; }
.nav__brand img{ width:44px; height:44px; object-fit:contain; }
.nav__brand span{
  font-family:"Archivo",sans-serif;
  font-variation-settings:"wdth" 92,"wght" 800;
  text-transform:uppercase; font-size:13px; letter-spacing:.06em;
  line-height:1.05; max-width:9ch;
}
.nav__links{ display:flex; align-items:center; gap:clamp(14px,2vw,32px); }
.nav__links a{
  font-family:"Azeret Mono",monospace;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--bone-dim); transition:color .25s;
  position:relative; padding:6px 0;
}
.nav__links a:hover,.nav__links a[aria-current="page"]{ color:var(--bone); }
.nav__links a[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:2px; background:var(--brass);
}
.nav__cta{
  font-family:"Azeret Mono",monospace; font-size:11px;
  letter-spacing:.16em; text-transform:uppercase;
  padding:10px 18px; border:1px solid var(--brass);
  color:var(--brass); transition:.28s var(--ease); white-space:nowrap;
}
.nav__cta:hover{ background:var(--brass); color:#000; }

.nav__burger{
  display:none; background:none; border:0; padding:8px; cursor:pointer;
  width:42px; height:38px;
}
.nav__burger span{
  display:block; height:2px; background:var(--bone); margin:5px 0;
  transition:.3s var(--ease); transform-origin:center;
}
.nav.is-open .nav__burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav.is-open .nav__burger span:nth-child(2){ opacity:0; }
.nav.is-open .nav__burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- Buttons ------------------------------------- */

.btn{
  display:inline-flex; align-items:center; gap:.75em;
  font-family:"Azeret Mono",monospace;
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  padding:14px 24px; border:1px solid var(--line-strong);
  color:var(--bone); background:transparent;
  transition:.3s var(--ease); cursor:pointer;
  position:relative; overflow:hidden;
}
.btn::after{
  content:""; position:absolute; inset:0; background:var(--bone);
  transform:translateY(101%); transition:transform .38s var(--ease); z-index:-1;
}
.btn:hover{ color:#000; border-color:var(--bone); }
.btn:hover::after{ transform:translateY(0); }
.btn > *{ position:relative; z-index:1; }

.btn--brass{
  border-color:transparent; color:#0A0A0A;
  background:var(--brass-grad);
  font-weight:600;
}
.btn--brass::after{ background:var(--brass-hi); }
.btn--brass:hover{ color:#0A0A0A; border-color:transparent; }

.btn--live{ border-color:var(--live); color:var(--live); }
.btn--live::after{ background:var(--live); }
.btn--live:hover{ color:#fff; border-color:var(--live); }

.btn-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:1.6rem; }

/* ---------- Signature: the scroll drive ----------------- */

.drive{ position:relative; height:230vh; }
.drive__stage{
  position:sticky; top:0; height:100vh; height:100svh;
  overflow:hidden; display:grid; place-items:center;
}
.drive__bg{
  position:absolute; inset:-8%;
  background:url("../img/hero-road.webp") center 58%/cover no-repeat;
  filter:grayscale(.5) contrast(1.15) brightness(.42);
  transform:scale(calc(1.16 - var(--p,0) * .12)) translateY(calc(var(--p,0) * -3vh));
  will-change:transform;
}
.drive__scrim{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 50% 40%, transparent 0%, rgba(8,8,10,.72) 62%, var(--asphalt) 100%),
    linear-gradient(180deg, rgba(8,8,10,.95) 0%, rgba(8,8,10,.25) 34%, rgba(8,8,10,.9) 88%, var(--asphalt) 100%);
}
/* streaming centre line */
.drive__road{
  position:absolute; left:0; right:0; bottom:0; height:38vh;
  overflow:hidden; opacity:.9;
  mask-image:linear-gradient(180deg, transparent 0%, #000 42%, #000 100%);
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 42%, #000 100%);
}
.drive__dashes{
  position:absolute; left:50%; bottom:-40%; width:6vw; height:180%;
  transform:translateX(-50%) perspective(240px) rotateX(62deg);
  background:repeating-linear-gradient(180deg,
    rgba(246,227,176,.72) 0 44px, transparent 44px 108px);
  animation:streamline 1.1s linear infinite;
}
@keyframes streamline{ to{ background-position-y:152px; } }

.drive__glow{
  position:absolute; left:0; right:0; bottom:-16vh; height:44vh;
  background:radial-gradient(60% 100% at 50% 100%, rgba(217,169,79,.28), transparent 70%);
  pointer-events:none;
}

.drive__vehicle{
  position:absolute; bottom:16vh; left:0;
  width:clamp(178px, 25vw, 360px);
  transform:translateX(calc(-30vw + var(--p,0) * 155vw));
  will-change:transform;
  z-index:3;
}
.drive__vehicle-inner{ animation:bob 1.9s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0) rotate(-.25deg); } 50%{ transform:translateY(-4px) rotate(.25deg); } }
.drive__vehicle svg{ width:100%; height:auto; overflow:visible; }
.drive__vehicle .body{
  fill:#050506; stroke:var(--brass); stroke-width:4.5;
  stroke-linejoin:round; stroke-linecap:round;
}
.drive__vehicle .glass{ fill:var(--brass); opacity:.16; }
.drive__vehicle .wheel{ fill:#050506; stroke:var(--brass); stroke-width:4.5; }
.drive__vehicle .rim{ fill:none; stroke:var(--brass); stroke-width:2.4; opacity:.6; }
.drive__vehicle .hub{ fill:var(--brass); }
.drive__vehicle .handle{ fill:var(--brass); opacity:.55; }
.drive__vehicle .lamp-f{ fill:var(--brass-hi); }
.drive__vehicle .lamp{ fill:#FF5A46; opacity:.9; }
.drive__vehicle .shut{ stroke:var(--brass); stroke-width:2.2; opacity:.42; fill:none; }
.drive__beam{
  position:absolute; right:-6%; top:34%;
  width:34vw; height:26px;
  background:linear-gradient(90deg, rgba(246,227,176,.55), transparent 78%);
  filter:blur(7px); opacity:calc(.3 + var(--p,0) * .6);
}

.drive__copy{
  position:relative; z-index:4; text-align:center;
  padding-inline:var(--gutter); pointer-events:none;
  transform:translateY(-6vh);
}
.drive__copy .btn-row{ pointer-events:auto; justify-content:center; }

.drive__stack{ position:relative; display:grid; }
.drive__stack .drive__line{
  grid-area:1/1;
  font-size:clamp(38px, 8.6vw, 132px);
  transition:opacity .5s var(--ease), transform .6s var(--ease), filter .5s;
  opacity:0; transform:translateY(22px) scale(.985); filter:blur(6px);
}
.drive__line.is-on{ opacity:1; transform:none; filter:none; }
.drive__line em{ font-style:normal; display:block; }

.drive__hud{
  position:absolute; left:0; right:0; bottom:0; z-index:5;
  display:flex; justify-content:space-between; align-items:center;
  gap:12px; flex-wrap:wrap;
  padding:16px var(--gutter) calc(16px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);
  background:linear-gradient(180deg, transparent, rgba(8,8,10,.7));
  color:var(--bone-dim);
}
.drive__hud b{ color:var(--brass); font-weight:400; }

.live-dot{
  display:inline-flex; align-items:center; gap:.55em; color:var(--live);
}
.live-dot::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--live); box-shadow:0 0 0 0 rgba(255,59,47,.65);
  animation:pulse 2s infinite;
}
@keyframes pulse{
  70%{ box-shadow:0 0 0 9px rgba(255,59,47,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,59,47,0); }
}

.scroll-cue{
  position:absolute; bottom:76px; left:50%; transform:translateX(-50%);
  z-index:5; color:var(--bone-faint); display:grid; justify-items:center; gap:8px;
  transition:opacity .4s;
}
.scroll-cue i{
  display:block; width:1px; height:44px;
  background:linear-gradient(180deg, var(--brass), transparent);
  animation:cue 2.1s var(--ease) infinite;
}
@keyframes cue{ 0%{ transform:scaleY(0); transform-origin:top; } 55%{ transform:scaleY(1); transform-origin:top; } 56%{ transform-origin:bottom; } 100%{ transform:scaleY(0); transform-origin:bottom; } }

/* ---------- Ticker -------------------------------------- */

.ticker{
  border-block:1px solid var(--line);
  background:var(--asphalt-2);
  overflow:hidden; padding-block:14px;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.ticker__track{
  display:flex; gap:2.6rem; width:max-content;
  animation:slide 34s linear infinite;
}
.ticker:hover .ticker__track{ animation-play-state:paused; }
.ticker span{ color:var(--bone-dim); white-space:nowrap; display:flex; align-items:center; gap:2.6rem; }
.ticker span::after{ content:"◆"; color:var(--brass); font-size:8px; }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ---------- Section heads ------------------------------- */

.head{
  display:grid; gap:1.5rem;
  grid-template-columns:minmax(0,1fr);
  margin-bottom:clamp(24px,3.2vw,42px);
}
@media (min-width:900px){
  .head{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:end; gap:3rem; }
}
.head h2{ font-size:clamp(30px,4.6vw,68px); }
.head .lede{ padding-bottom:.4rem; }

/* ---------- Channel cards ------------------------------- */

.channels{ display:grid; gap:20px; grid-template-columns:1fr; }
@media (min-width:820px){ .channels{ grid-template-columns:1fr 1fr; } }

.chan{
  position:relative; overflow:hidden;
  border:1px solid var(--line);
  background:var(--asphalt-2);
  min-height:clamp(340px,46vw,470px);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(22px,3vw,38px);
  transition:border-color .4s var(--ease), transform .5s var(--ease);
}
.chan::before{
  content:""; position:absolute; inset:0;
  background-size:cover; background-position:center;
  filter:grayscale(.62) brightness(.46) contrast(1.1);
  transform:scale(1.04); transition:transform .9s var(--ease), filter .6s;
}
.chan::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,8,10,.15) 0%, rgba(8,8,10,.55) 45%, rgba(8,8,10,.94) 100%);
}
.chan:hover{ border-color:var(--brass); transform:translateY(-4px); }
.chan:hover::before{ transform:scale(1.11); filter:grayscale(.2) brightness(.58) contrast(1.1); }
.chan > *{ position:relative; z-index:2; }
.chan--main::before{ background-image:url("../img/hero-ute.webp"); background-position:center 30%; }
.chan--replay::before{ background-image:url("../img/band-2.webp"); }
.chan h3{ font-size:clamp(24px,3.2vw,42px); margin:.5rem 0 .7rem; }
.chan p{ color:var(--bone-dim); margin:0 0 1.5rem; max-width:40ch; }
.chan .go{
  font-family:"Azeret Mono",monospace; font-size:11px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--brass);
  display:inline-flex; align-items:center; gap:.6em;
}
.chan .go svg{ transition:transform .35s var(--ease); }
.chan:hover .go svg{ transform:translateX(6px); }

/* ---------- Key feature --------------------------------- */

.keyfeat{
  display:grid; gap:clamp(26px,3.6vw,56px); align-items:start;
  grid-template-columns:1fr;
}
@media (min-width:940px){ .keyfeat{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); } }
/* the art column tracks the top of the text column, not its centre */
.keyfeat > .keyfloat, .keyfeat > .keyfeat__art{ max-width:400px; width:100%; margin-inline:auto; }
@media (min-width:940px){
  .keyfeat > .keyfloat, .keyfeat > .keyfeat__art{ margin-top:.35rem; }
}

.keyfeat__art{
  position:relative; aspect-ratio:1; overflow:hidden;
  border:1px solid var(--line);
  background:radial-gradient(70% 70% at 50% 45%, rgba(217,169,79,.16), transparent 72%), var(--asphalt-2);
  display:grid; place-items:center;
}
.keyfeat__art img{
  width:84%; mix-blend-mode:screen;
  animation:hover-key 7s ease-in-out infinite;
}
@keyframes hover-key{
  0%,100%{ transform:translateY(-8px) rotate(-1.6deg); }
  50%{ transform:translateY(8px) rotate(1.6deg); }
}
.keyfeat__art::after{
  content:""; position:absolute; inset:auto 0 0 0; height:1px;
  background:linear-gradient(90deg,transparent,var(--brass),transparent);
}

.steps{ list-style:none; margin:1.6rem 0 0; padding:0; display:grid; gap:0; counter-reset:s; }
.steps li{
  counter-increment:s;
  display:grid;
  grid-template-columns:2.4em minmax(0,1fr);
  column-gap:1rem; row-gap:.3rem; align-items:baseline;
  padding:.9rem 0; border-top:1px solid var(--line);
}
/* Each row has THREE grid items (the counter, the title, the description).
   Both the title and the description must be pinned to the content column,
   or the description falls into the narrow number column on the next row. */
.steps b{ grid-column:2; }
.steps span{ grid-column:2; }

/* Desktop: run the description across beside the title instead of under it. */
@media (min-width:1280px){
  .steps li{ grid-template-columns:2.4em minmax(7em,11em) minmax(0,1fr); row-gap:0; }
  .steps b{ grid-column:2; padding-right:.8rem; }
  .steps span{ grid-column:3; }
}
.steps li:last-child{ border-bottom:1px solid var(--line); }
.steps li::before{
  content:counter(s,decimal-leading-zero);
  font-family:"Azeret Mono",monospace; font-size:11px; letter-spacing:.1em;
  color:var(--brass); padding-top:.34rem; text-align:left; font-variant-numeric:tabular-nums;
}
.steps b{ font-weight:600; }
.steps span{ color:var(--bone-dim); font-size:.95em; }

.note{
  border-left:2px solid var(--brass);
  padding:.7rem 0 .7rem 1.1rem;
  color:var(--bone-dim); font-size:.93em;
  margin-top:1.4rem;
}

/* ---------- Clips --------------------------------------- */

.clips{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.clip{
  position:relative; overflow:hidden; border:1px solid var(--line);
  background:var(--asphalt-2); aspect-ratio:9/16;
}
.clip video{ width:100%; height:100%; object-fit:cover; }
.clip figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:14px 16px;
  background:linear-gradient(transparent,rgba(8,8,10,.9));
  color:var(--bone-dim);
}

/* ---------- Product grid -------------------------------- */

.grid{ display:grid; gap:clamp(14px,1.6vw,24px); grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr)); }

.card{
  border:1px solid var(--line); background:var(--asphalt-2);
  display:flex; flex-direction:column;
  transition:border-color .35s var(--ease), transform .45s var(--ease);
  position:relative; overflow:hidden;
}
.card:hover{ border-color:var(--brass); transform:translateY(-5px); }
.card__media{
  aspect-ratio:1; overflow:hidden; background:#0B0B0E; position:relative;
}
.card__media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .8s var(--ease), filter .5s;
  filter:brightness(.92);
}
.card:hover .card__media img{ transform:scale(1.06); filter:brightness(1); }
.card__body{ padding:20px; display:flex; flex-direction:column; gap:.55rem; flex:1; }
.card__body h3{ font-size:17px; margin:0; font-weight:600; font-family:"Chivo",sans-serif; letter-spacing:-.01em; }
.card__body p{ margin:0; color:var(--bone-dim); font-size:.92em; flex:1; }
.card__foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:.6rem; }
.price{ font-family:"Azeret Mono",monospace; font-size:14px; color:var(--brass); }
.tag{
  position:absolute; top:12px; left:12px; z-index:2;
  font-family:"Azeret Mono",monospace; font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; padding:6px 10px;
  background:rgba(8,8,10,.78); border:1px solid var(--line-strong); color:var(--bone-dim);
  backdrop-filter:blur(6px);
}
.tag--free{ color:#0A0A0A; background:var(--brass); border-color:var(--brass); }
.tag--soon{ color:var(--bone-dim); }

/* ---------- Band / parallax strip ----------------------- */

.band{
  position:relative; height:clamp(190px,27vw,330px); overflow:hidden;
  border-block:1px solid var(--line);
  display:grid; place-items:center;
}
.band__img{
  position:absolute; inset:-14% 0;
  background-size:cover; background-position:center;
  filter:grayscale(.55) brightness(.4);
  transform:translateY(calc(var(--py,0) * 1px)); will-change:transform;
}
.band__img--1{ background-image:url("../img/band-1.webp"); }
.band__img--road{ background-image:url("../img/hero-road.webp"); }
.band__inner{ position:relative; text-align:center; padding-inline:var(--gutter); }
.band h2{ font-size:clamp(26px,4.6vw,62px); }

/* ---------- Sponsors ------------------------------------ */

.sponsors{ display:flex; flex-wrap:wrap; align-items:center; gap:clamp(26px,4vw,60px); }
.sponsors img{
  height:clamp(44px,5vw,68px); width:auto; object-fit:contain;
  filter:grayscale(1) brightness(1.6); opacity:.62; transition:.35s;
}
.sponsors a:hover img{ filter:none; opacity:1; }

/* ---------- Forms --------------------------------------- */

.form{ display:grid; gap:20px; max-width:640px; }
.field{ display:grid; gap:8px; }
.field > label{
  font-family:"Azeret Mono",monospace; font-size:10.5px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--bone-dim);
}
.field input, .field select, .field textarea{
  width:100%; padding:14px 16px;
  background:var(--asphalt-2); color:var(--bone);
  border:1px solid var(--line-strong); border-radius:0;
  font-family:"Chivo",sans-serif; font-size:16px;
  transition:border-color .25s, background .25s;
  appearance:none;
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--brass); background:var(--asphalt-3); outline:none;
}
.field .hint{ font-size:.86em; color:var(--bone-faint); }
.field-row{ display:grid; gap:20px; grid-template-columns:1fr; }
@media (min-width:640px){ .field-row{ grid-template-columns:1fr 1fr; } }

.check{
  display:grid; grid-template-columns:auto 1fr; gap:13px; align-items:start;
  padding:15px; border:1px solid var(--line); background:var(--asphalt-2);
  cursor:pointer; transition:border-color .25s;
}
.check:hover{ border-color:var(--line-strong); }
.check input{
  width:20px; height:20px; margin-top:2px; accent-color:var(--brass); cursor:pointer;
}
.check span{ font-size:.94em; color:var(--bone-dim); }
.check strong{ color:var(--bone); font-weight:600; }

/* ---------- Footer -------------------------------------- */

.foot{ border-top:1px solid var(--line); background:var(--asphalt-2); }
.foot__top{
  display:grid; gap:clamp(26px,3.2vw,44px); padding-block:clamp(34px,4.5vw,58px);
  grid-template-columns:1fr;
}
@media (min-width:820px){ .foot__top{ grid-template-columns:1.4fr 1fr 1fr; } }
.foot h4{
  font-family:"Azeret Mono",monospace; font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--brass); margin:0 0 1.1rem; font-weight:400;
}
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.foot a{ color:var(--bone-dim); transition:color .25s; }
.foot a:hover{ color:var(--brass); }
.foot__mark{ width:72px; margin-bottom:1.1rem; }
.foot__bottom{
  border-top:1px solid var(--line);
  padding-block:22px;
  display:flex; flex-wrap:wrap; gap:12px 24px; justify-content:space-between;
  color:var(--bone-faint);
}

/* ---------- Reveal -------------------------------------- */

[data-reveal]{
  opacity:0; transform:translateY(26px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
[data-reveal].is-in{ opacity:1; transform:none; }
[data-reveal][data-d="1"]{ transition-delay:.09s; }
[data-reveal][data-d="2"]{ transition-delay:.18s; }
[data-reveal][data-d="3"]{ transition-delay:.27s; }
[data-reveal][data-d="4"]{ transition-delay:.36s; }

/* ---------- Page hero (inner pages) --------------------- */

.phero{
  position:relative; padding-top:clamp(116px,13vh,164px); padding-bottom:clamp(34px,4.4vw,58px);
  overflow:hidden; border-bottom:1px solid var(--line);
}
.phero::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(90% 120% at 78% 0%, rgba(217,169,79,.13), transparent 62%);
}
.phero > *{ position:relative; }
.phero h1{ font-size:clamp(38px,8vw,110px); }
.phero .lede{ margin-top:1.6rem; }

/* ---------- DJ Drive accent ----------------------------- */

.drive-blue{ --brass:var(--drive); --brass-hi:#8FD5FF; --brass-lo:#04528F; }

/* ---------- Utilities ----------------------------------- */

.stack-sm > * + *{ margin-top:1rem; }
.center{ text-align:center; }
.mx-auto{ margin-inline:auto; }
.narrow{ max-width:760px; }
.mt-lg{ margin-top:clamp(22px,3vw,40px); }

/* ---------- Responsive ---------------------------------- */

@media (max-width:720px){
  .drive__bg{ background-image:url("../img/hero-road-narrow.webp"); background-position:center 50%; }
  .band__img--road{ background-image:url("../img/hero-road-narrow.webp"); }
}

@media (max-width:860px){
  .nav__burger{ display:block; }
  .nav__links{
    position:fixed; inset:0; z-index:-1;
    flex-direction:column; justify-content:center;
    background:rgba(8,8,10,.97); backdrop-filter:blur(20px);
    gap:2rem; opacity:0; pointer-events:none; transition:opacity .35s var(--ease);
  }
  .nav__links a{ font-size:16px; }
  .nav.is-open .nav__links{ opacity:1; pointer-events:auto; z-index:1; }
  .nav__cta{ display:none; }
  .drive{ height:185vh; }
  .drive__vehicle{ bottom:19vh; }
  .drive__copy{ transform:translateY(-4vh); }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-reveal]{ opacity:1; transform:none; }
  .drive{ height:auto; }
  .drive__stage{ position:static; height:auto; min-height:86vh; padding-block:120px; }
  .drive__line{ opacity:1; transform:none; filter:none; position:relative; }
  .drive__line + .drive__line{ display:none; }
  .drive__vehicle{ transform:translateX(30vw); }
  .scroll-cue{ display:none; }
}


/* ---------- Logo mark ----------------------------------- */
.mark{ display:block; object-fit:contain; }
.mark--nav{ width:44px; height:44px; transition:transform .6s var(--ease); }
.nav__brand:hover .mark--nav{ transform:rotate(-22deg); }

/* ---------- Floating key (no frame) --------------------- */
.keyfloat{
  position:relative; display:grid; place-items:center;
  aspect-ratio:1; isolation:isolate;
  perspective:900px;
  --tiltx:0deg; --tilty:0deg;
}

/* warm bloom sitting behind the object */
.keyfloat::before{
  content:""; position:absolute; inset:6% 6% 10%; z-index:-2;
  background:radial-gradient(48% 42% at 50% 46%, rgba(217,169,79,.34), rgba(217,169,79,.08) 56%, transparent 74%);
  filter:blur(18px);
  animation:bloom 8s ease-in-out infinite;
}

/* contact shadow on the ground plane — tightens and darkens as the key
   drops, spreads and fades as it rises. This is what sells the height. */
.keyfloat::after{
  content:""; position:absolute; left:50%; bottom:4%; z-index:-1;
  width:46%; height:16px; translate:-50% 0;
  background:radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.85), rgba(0,0,0,.35) 55%, transparent 75%);
  filter:blur(11px);
  animation:contact 8s ease-in-out infinite;
}

.keyfloat img{
  width:66%; height:auto;
  transform-style:preserve-3d;
  filter:
    drop-shadow(0 30px 26px rgba(0,0,0,.55))
    drop-shadow(0 6px 10px rgba(0,0,0,.4))
    drop-shadow(0 0 30px rgba(217,169,79,.22));
  animation:float-key 8s ease-in-out infinite;
  transition:rotate .5s var(--ease);
  rotate:0deg;
}

/* pointer tilt — the whole reason it reads as an object in space
   rather than a picture stuck to the page */
.keyfloat.is-tilting img{
  transform:rotateX(var(--tiltx)) rotateY(var(--tilty));
  transition:transform .16s ease-out;
}

@keyframes float-key{
  0%,100%{ translate:0 -14px; rotate:-2.6deg; }
  50%    { translate:0 14px;  rotate:2.6deg; }
}
@keyframes bloom{
  0%,100%{ opacity:.75; transform:scale(1.04); }
  50%    { opacity:1;   transform:scale(.96); }
}
@keyframes contact{
  0%,100%{ opacity:.45; width:52%; filter:blur(14px); }
  50%    { opacity:.9;  width:40%; filter:blur(8px); }
}

@media (prefers-reduced-motion:reduce){
  .keyfloat img, .keyfloat::before, .keyfloat::after{ animation:none; }
}

/* ---------- Discord ------------------------------------- */
.discord{
  position:relative; overflow:hidden;
  border:1px solid var(--line); background:var(--asphalt-2);
  padding:clamp(20px,2.6vw,34px);
  display:grid; gap:clamp(16px,2.2vw,30px); align-items:center;
  grid-template-columns:1fr;
}
@media (min-width:860px){ .discord{ grid-template-columns:1fr auto; } }
.discord::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(70% 130% at 12% 50%, rgba(88,101,242,.20), transparent 62%);
}
.discord > *{ position:relative; }
/* height MUST be set — an SVG with only a width falls back to 150px tall */
.discord__logo{
  width:1.1em; height:auto; flex:none;
  color:#5865F2; display:inline-block; vertical-align:baseline;
}
.discord h2{ font-size:clamp(19px,2.1vw,28px); display:flex; align-items:center; gap:.45em; line-height:1; }
.discord p{ color:var(--bone-dim); margin:.45rem 0 0; max-width:52ch; font-size:.93em; }
.btn--discord{ border-color:#5865F2; color:#fff; background:#5865F2; font-weight:600; }
.btn--discord::after{ background:#4752C4; }
.btn--discord:hover{ color:#fff; border-color:#4752C4; }

.discord .eyebrow{ margin-bottom:.5rem; }
.discord .btn{ padding:13px 20px; font-size:11px; }


/* ---------- Live: nav item ------------------------------ */
.nav__live{ display:inline-flex; align-items:center; gap:.5em; }
.nav__live i{
  width:6px; height:6px; border-radius:50%; background:var(--bone-faint);
  flex:none; transition:background .3s;
}
body.is-live .nav__live{ color:var(--live) !important; }
body.is-live .nav__live i{
  background:var(--live);
  box-shadow:0 0 0 0 rgba(255,59,47,.6);
  animation:pulse 2s infinite;
}

/* ---------- Live: player -------------------------------- */
.player{
  position:relative; aspect-ratio:16/9; overflow:hidden;
  border:1px solid var(--line); background:#000;
  width:100%;
  max-height:var(--stage-h);
  max-width:calc(var(--stage-h) * 16 / 9);
  margin-inline:auto;
}
.player iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

.livehead{ display:grid; gap:1.4rem; grid-template-columns:minmax(0,1fr); }
@media (min-width:900px){
  .livehead{ grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); align-items:end; gap:3rem; }
}
.livehead h1{ font-size:clamp(30px,4.4vw,58px); }

/* ---------- Live: homepage panel (click-to-load) -------- */
.livenow{
  position:relative; overflow:hidden;
  border:1px solid var(--line); background:var(--asphalt-2);
  display:grid; gap:clamp(18px,2.4vw,34px); align-items:center;
  grid-template-columns:1fr; padding:clamp(18px,2.2vw,28px);
}
@media (min-width:900px){
  .livenow{ grid-template-columns:minmax(0,1fr) minmax(0,auto); align-items:center; }
}
/* keep the homepage teaser compact — the full-size player lives on /live */
.livenow .facade{ width:100%; max-width:min(100%, 380px); justify-self:end; }
@media (min-width:1200px){ .livenow .facade{ max-width:430px; } }
.livenow::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(70% 130% at 8% 50%, rgba(255,59,47,.16), transparent 60%);
  opacity:0; transition:opacity .5s;
}
body.is-live .livenow{ border-color:rgba(255,59,47,.5); }
body.is-live .livenow::before{ opacity:1; }
.livenow > *{ position:relative; }
.livenow h2{ font-size:clamp(20px,2.2vw,30px); }
.livenow p{ color:var(--bone-dim); margin:.5rem 0 0; max-width:44ch; font-size:.95em; }

.livenow__status{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:"Azeret Mono",monospace; font-size:10.5px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--bone-dim);
  margin-bottom:.7rem;
}
.livenow__status::before{
  content:""; width:7px; height:7px; border-radius:50%; background:var(--bone-faint);
}
body.is-live .livenow__status{ color:var(--live); }
body.is-live .livenow__status::before{
  background:var(--live); box-shadow:0 0 0 0 rgba(255,59,47,.65); animation:pulse 2s infinite;
}

/* facade — the iframe only loads when the visitor asks for it */
.facade{
  position:relative; aspect-ratio:16/9; overflow:hidden;
  border:1px solid var(--line); background:#000; display:block; width:100%;
}
.facade iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
.facade img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(.5) brightness(.42); transition:.6s var(--ease);
}
.facade:hover img, .facade__play:hover ~ img{ filter:grayscale(.15) brightness(.56); transform:scale(1.03); }
.facade__play{
  position:absolute; inset:0; display:grid; place-items:center; gap:12px;
  align-content:center; cursor:pointer;
  background:transparent; border:0; padding:0; width:100%; height:100%;
  font:inherit; color:inherit; appearance:none;
}
.facade__play svg{
  width:clamp(42px,4vw,58px); height:auto;
  filter:drop-shadow(0 8px 22px rgba(0,0,0,.6));
  transition:transform .35s var(--ease);
}
.facade__play:hover svg, .facade__play:focus-visible svg{ transform:scale(1.09); }
.facade__play span{
  font-family:"Azeret Mono",monospace; font-size:10.5px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--bone);
}

/* ---------- Sponsors: reverse logos on dark ------------- */
.sponsors img{ filter:none; opacity:.78; }
.sponsors a:hover img{ opacity:1; }


/* player has mounted — hide the poster/play furniture */
.facade.is-playing .facade__play{ display:none; }
.facade.is-playing img{ display:none; }
.player.is-playing{ background:#000; }


/* ---------- Live stage: player + chat -------------------- */
.stage{
  /* one shared height so the player and the chat column line up exactly */
  --stage-h:min(calc(100svh - 210px), 780px);
  display:grid; gap:14px; grid-template-columns:minmax(0,1fr);
  justify-content:center;
}
@media (min-width:1120px){
  .stage{
    grid-template-columns:minmax(0, calc(var(--stage-h) * 16 / 9)) minmax(300px, 380px);
    align-items:stretch;
  }
}

.chat{
  display:flex; flex-direction:column; min-height:0;
  border:1px solid var(--line); background:var(--asphalt-2);
  height:clamp(400px, 62svh, 620px);
}
@media (min-width:1120px){ .chat{ height:auto; } }

.chat__head{
  display:flex; align-items:center; gap:.6em;
  padding:12px 16px; border-bottom:1px solid var(--line);
  color:var(--bone-dim); flex:none;
}
.chat__dot{
  width:7px; height:7px; border-radius:50%; background:var(--bone-faint); flex:none;
}
body.is-live .chat__dot{
  background:var(--live); box-shadow:0 0 0 0 rgba(255,59,47,.65); animation:pulse 2s infinite;
}
body.is-live .chat__head{ color:var(--live); }

.chat__body{ flex:1; min-height:0; position:relative; background:#0B0B0E; }
.chat__body iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

.chat__off{
  height:100%; display:grid; align-content:center; justify-items:start;
  gap:.9rem; padding:clamp(18px,2vw,26px);
}
.chat__off p{ margin:0; color:var(--bone-dim); font-size:.92em; }
.chat__off .btn{ padding:12px 18px; font-size:11px; }
.chat__note{ padding:10px 16px; border-top:1px solid var(--line); color:var(--bone-faint); flex:none; }


/* ---------- Chat show / hide ---------------------------- */
.chat__head{ position:relative; }
#chat-label{ flex:1; }

.chat__toggle{
  display:inline-flex; align-items:center; gap:.45em;
  background:none; border:0; cursor:pointer; padding:4px 2px;
  color:var(--bone-faint); font:inherit; letter-spacing:.16em;
  text-transform:uppercase; transition:color .25s;
}
.chat__toggle:hover{ color:var(--bone); }
.chat__toggle svg{
  width:11px; height:11px; fill:none; stroke:currentColor;
  stroke-width:1.8; stroke-linecap:round;
}

.chat__show{
  display:inline-flex; align-items:center; gap:.6em;
  margin:12px auto 0; padding:11px 18px; cursor:pointer;
  background:transparent; border:1px solid var(--line-strong); color:var(--bone-dim);
  font-family:"Azeret Mono",monospace; font-size:11px;
  letter-spacing:.16em; text-transform:uppercase;
  transition:.28s var(--ease);
}
.chat__show:hover{ border-color:var(--brass); color:var(--brass); }
.chat__show svg{ width:14px; height:13px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linejoin:round; }
.chat__show[hidden]{ display:none; }

/* chat hidden -> player takes the full stage width */
.stage.chat-hidden{ grid-template-columns:minmax(0,1fr); }
.stage.chat-hidden .chat{ display:none; }
@media (min-width:1120px){
  .stage.chat-hidden{ grid-template-columns:minmax(0, calc(var(--stage-h) * 16 / 9)); }
}


/* nothing verified to play — link out instead of guessing */
.noembed{
  position:absolute; inset:0; display:grid; align-content:center; justify-items:start;
  gap:.9rem; padding:clamp(20px,3vw,40px); background:var(--asphalt-2);
}
.noembed p{ margin:0; color:var(--bone-dim); max-width:44ch; font-size:.95em; }


/* ---------- Homepage live card (link, not a player) ------ */
.livecard{
  position:relative; display:block; overflow:hidden;
  aspect-ratio:16/9; width:100%; max-width:min(100%,380px);
  justify-self:end; border:1px solid var(--line); background:#000;
  transition:border-color .35s var(--ease);
}
@media (min-width:1200px){ .livecard{ max-width:430px; } }
.livecard img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(.5) brightness(.42); transition:.6s var(--ease);
}
.livecard:hover{ border-color:var(--live); }
.livecard:hover img{ filter:grayscale(.15) brightness(.58); transform:scale(1.04); }
.livecard__cta{
  position:absolute; inset:0; display:grid; place-items:center;
  align-content:center; gap:12px; pointer-events:none;
}
.livecard__cta svg{
  width:clamp(42px,4vw,58px); height:auto;
  filter:drop-shadow(0 8px 22px rgba(0,0,0,.6));
  transition:transform .35s var(--ease);
}
.livecard:hover .livecard__cta svg{ transform:scale(1.09); }
.livecard__cta span{
  font-family:"Azeret Mono",monospace; font-size:10.5px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--bone);
}


/* ---------- YouTube subscribe ---------------------------- */
.subscribe{
  display:grid; gap:clamp(16px,2vw,28px); align-items:center;
  grid-template-columns:1fr; margin-top:clamp(20px,2.6vw,34px);
  padding:clamp(18px,2.2vw,26px);
  border:1px solid var(--line); background:var(--asphalt-2);
}
@media (min-width:760px){ .subscribe{ grid-template-columns:1fr auto; } }
.subscribe__widget{ display:flex; align-items:center; gap:12px; min-height:44px; }
/* the official widget renders an iframe; until then the link stands in */
.subscribe__widget .g-ytsubscribe{ line-height:0; }
.subscribe.has-widget .subscribe__fallback{ display:none; }


/* the off-air chat column now holds two actions, so let it scroll if short */
.chat__off{ overflow:auto; }
.chat__off .btn{ width:100%; justify-content:center; }
.chat__off .hint{ font-size:.82em; color:var(--bone-faint); }


/* ---------- Support / tip -------------------------------- */
.support{
  position:relative; overflow:hidden;
  display:grid; gap:clamp(16px,2vw,30px); align-items:center;
  grid-template-columns:1fr; margin-top:clamp(14px,1.8vw,22px);
  padding:clamp(18px,2.2vw,28px);
  border:1px solid var(--line); background:var(--asphalt-2);
}
@media (min-width:760px){ .support{ grid-template-columns:1fr auto; margin-top:0; } }
.support::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(70% 130% at 8% 50%, rgba(217,169,79,.13), transparent 62%);
}
.support > *{ position:relative; }
.support h2{ font-size:clamp(20px,2.3vw,30px); }
.support__actions{ display:flex; flex-wrap:wrap; gap:12px; }
.support__actions .btn{ padding:13px 20px; font-size:11px; }