/* ═══════════════════════════════════════════════════════════════════
   GLAMMBOX 2026 — HOME
   Five beats: opening liquid, the claim, the five rooms, the lesson,
   the door. One pin, one scrub, parallax, one living surface, and a
   full-bleed reveal per room.
   ─────────────────────────────────────────────────────────────────── */

body.room-welcome{padding-bottom:0}
/* V1's page-fixed frame reel and its vignette are retired on the home
   page: the liquid surface is the opening image now. */
body.room-welcome .film-stage-poster,
body.room-welcome .film-stage-canvas,
body.room-welcome .film-vignette{display:none!important}

/* ══ 1 · HERO ═════════════════════════════════════════════════════ */
.v2-hero{
  position:relative;
  /* header.top is sticky and takes 85 px of flow, so a 100svh hero ends
     85 px past the fold. Subtract it, and stop padding for a bar that is
     already occupying its own space. */
  min-height:calc(100svh - var(--top-h));
  display:grid;
  /* minmax(0,1fr): without it the implicit column is floored at the
     children's min-content and the hero copy overflows the phone. */
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:1fr auto;
  align-items:end;
  padding:var(--s-6) var(--gutter) var(--s-6);
  isolation:isolate;
  overflow:clip;
}
/* FOG PASS · 2026-09-17 (Pat: "there's still a foggy something on top of
   the hero"). The fog was measured, not guessed: .v2-hero-gl is a WebGL
   liquid field whose shader mixes a near-white crest (0.937,0.921,0.890)
   into the surface, composited mix-blend-mode:screen at opacity .66. A
   screened near-white field over dark footage IS fog — it lifts the black
   point everywhere and pools brightest at the centre, where the radial
   background sits. Element-screenshot proof at 1440x900, hero backplate:
     canvas shown  mean luma 0.0803   behind-headline mean 0.1190
     canvas hidden mean luma 0.0546   behind-headline mean 0.0644
   i.e. the canvas alone was lifting the hero 47% and the headline's own
   backplate 85%. The desaturate(.72) on the film compounded it: a washed
   frame reads hazy even before the veil lands.
   Fix: the living surface stays (motion law) but drops to a sheen at .18,
   and the film gets its own colour back. Text contrast is not spent on
   this — it improves, because the backplate gets darker: worst-case
   (p95) contrast behind the headline goes 8.40:1 -> 10.18:1 against
   --gb-bone, well over the house 7.8:1 bar. */
.v2-hero-film{
  position:absolute;inset:0;z-index:-3;
  width:100%;height:100%;display:block;object-fit:cover;
  filter:contrast(1.04);
}
.v2-hero-gl{
  position:absolute;inset:0;z-index:-2;
  opacity:.18;mix-blend-mode:screen;
  width:100%;height:100%;display:block;
  background:radial-gradient(120% 90% at 50% 30%,#12161C 0%,#07080A 62%);
}
.v2-hero-gl[data-liquid="off"]{
  background:
    radial-gradient(80% 60% at 22% 18%,rgba(232,95,44,.16),transparent 62%),
    radial-gradient(120% 90% at 50% 34%,#141922 0%,#07080A 66%);
}
/* The scrim is UNCHANGED by the fog pass, deliberately. It was measured
   both ways: with the veil gone the backplate behind the copy gets
   darker, not brighter, so the legibility this gradient guards improves
   on its own — worst frame over the loop goes 9.40:1 -> 14.6:1 at 1440
   against --gb-bone. A first attempt at "rebuilding" it alongside the
   fog fix was thrown away: it cleared the bar by miles and cost 69% of
   the top band's standard deviation, which is just the fog again in a
   darker coat. Take light away only where the type needs it. */
.v2-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(7,8,10,.72) 0%,rgba(7,8,10,.18) 26%,rgba(7,8,10,.06) 52%,rgba(7,8,10,.86) 100%),
    linear-gradient(90deg,rgba(7,8,10,.66) 0%,rgba(7,8,10,.12) 54%,transparent 82%);
}
/* …with one exception, and it is a real measurement rather than a taste
   call. At 390 the hero is 758px tall and the copy block runs from 43%
   of it to the bottom, so the .06 stop at 52% lands inside the type.
   Worst frame over the loop came out at 7.71:1 — under the house 7.8:1
   bar, and it was 7.04:1 before the fog came off. The two middle stops
   move, nothing else: the top quarter is untouched, so the frame still
   opens the page. */
@media (max-width:768px){
  .v2-hero::after{
    background:
      linear-gradient(180deg,rgba(7,8,10,.72) 0%,rgba(7,8,10,.24) 26%,rgba(7,8,10,.34) 46%,rgba(7,8,10,.90) 100%),
      linear-gradient(90deg,rgba(7,8,10,.66) 0%,rgba(7,8,10,.16) 54%,transparent 82%);
  }
}
.v2-hero-copy{max-width:min(56rem,100%);align-self:end;min-width:0}
.v2-hero .plays{align-items:center}
.v2-hero h1{
  /* --t-mega alone is width-driven, so on a 900 px-tall desktop the headline
     ran four 165 px lines and pushed the primary action below the fold.
     Cap it by height as well: the opening frame is one screen or it is not
     an opening frame. */
  font-size:clamp(2.8rem,min(8.6vw,10.2svh),7.2rem);
  font-weight:620;
  line-height:.92;
  letter-spacing:var(--tr-mega);
  margin:0 0 var(--s-5);
  text-wrap:balance;
}
.v2-hero .gb-lede{max-width:44ch;margin:0 0 var(--s-5)}
.v2-hero .plays{margin-bottom:var(--s-5)}
.v2-hero-side{
  min-width:0;
  display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-5);
  padding-top:var(--s-6);margin-top:var(--s-6);
  border-top:1px solid var(--gb-line);
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gb-mute);
}
.v2-hero-side a{color:var(--gb-bone-soft)}
.v2-hero-side a:hover{color:var(--gb-ember)}
.v2-cue{display:flex;align-items:center;gap:.55rem}
.v2-cue i{
  display:block;width:1px;height:2.4rem;background:linear-gradient(180deg,var(--gb-ember),transparent);
  animation:v2cue 2.4s var(--e-inout) infinite;
}
@keyframes v2cue{0%,100%{transform:scaleY(.35);opacity:.4}50%{transform:scaleY(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.v2-cue i{animation:none;opacity:.7}}

/* the tagline sits under the wordmark, quietly, once */
.v2-tag{
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gb-mute);margin:0 0 var(--s-5);
}

@media (min-width:900px){
  .v2-hero{padding-bottom:var(--s-7)}
  .v2-hero-copy{max-width:min(62rem,86%)}
}
@media (max-width:768px){
  .v2-hero h1{font-size:clamp(2.35rem,min(11.4vw,6.6svh),3.9rem)}
  .v2-hero-side{flex-direction:column;align-items:flex-start;gap:var(--s-3)}
}

/* ══ 2 · THE CLAIM (proof strip) ══════════════════════════════════ */
.v2-claim{
  position:relative;z-index:var(--z-page);
  background:var(--gb-black);
  border-top:1px solid var(--gb-line);
  padding:var(--s-8) 0 var(--s-9);
}
.v2-marquee{
  overflow:hidden;white-space:nowrap;
  border-block:1px solid var(--gb-line-soft);
  padding-block:var(--s-4);margin-bottom:var(--s-8);
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.v2-marquee-track{display:inline-flex;gap:var(--s-6);animation:v2slide 42s linear infinite;will-change:transform}
.v2-marquee span{
  font-family:var(--f-display);font-size:clamp(1.5rem,3.4vw,2.6rem);
  font-weight:500;letter-spacing:-.03em;color:var(--gb-faint);
  display:inline-flex;align-items:center;gap:var(--s-6);
}
.v2-marquee span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--gb-ember);opacity:.7}
@keyframes v2slide{to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){.v2-marquee-track{animation:none}}

.v2-claim-grid{
  width:var(--shell);margin-inline:auto;
  display:grid;gap:var(--s-7);
  grid-template-columns:1fr;
}
@media (min-width:900px){.v2-claim-grid{grid-template-columns:1.15fr 1fr;gap:var(--s-9);align-items:start}}
.v2-claim h2{font-size:var(--t-xl);max-width:18ch}
.v2-claim h2 em{font-family:var(--f-serif);font-style:italic;font-weight:400;color:var(--gb-ember)}
.v2-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-6) var(--s-5)}
.v2-stat{padding-top:0}
.v2-stat b{
  display:block;font-family:var(--f-display);font-size:clamp(2.2rem,4.6vw,3.4rem);
  font-weight:580;letter-spacing:-.045em;line-height:1;color:var(--gb-bone);
  font-variant-numeric:tabular-nums;
}
.v2-stat span{
  display:block;margin-top:.4rem;font-family:var(--f-mono);font-size:.64rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gb-mute);
}

/* ══ 3 · THE ROOMS ════════════════════════════════════════════════ */
.v2-rooms{position:relative;z-index:var(--z-page);background:var(--gb-black)}
.v2-rooms-head{
  width:var(--shell);margin:0 auto;padding:var(--s-8) 0 var(--s-6);
}
.v2-rooms-head h2{font-size:var(--t-xxl);letter-spacing:var(--tr-mega);max-width:14ch}

.v2-room{
  position:relative;
  min-height:min(92svh,780px);
  display:flex;align-items:flex-end;
  overflow:clip;
  isolation:isolate;
  border-top:1px solid var(--gb-line-soft);
}
.v2-room-media{
  position:absolute;inset:-8% 0 -8%;z-index:-2;
  overflow:hidden;
  /* full-bleed reveal: the frame opens as the room arrives */
  clip-path:inset(0 0 0 0);
}
.gb-motion .v2-room-media{clip-path:inset(14% 8% 14% 8% round 22px);transition:clip-path 1.25s var(--e-out)}
.gb-motion .v2-room[data-reveal="in"] .v2-room-media{clip-path:inset(0 0 0 0 round 0px)}
.v2-room-media img,.v2-room-media video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.82) contrast(1.06);
}
.v2-room-veil{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(7,8,10,.62) 0%,rgba(7,8,10,.18) 34%,rgba(7,8,10,.72) 78%,rgba(7,8,10,.96) 100%),
    linear-gradient(90deg,rgba(7,8,10,.78) 0%,rgba(7,8,10,.24) 52%,transparent 88%);
}
.v2-room-body{
  position:relative;z-index:2;
  width:var(--shell);margin-inline:auto;
  padding:var(--s-9) 0 var(--s-8);
  max-width:none;
}
.v2-room-inner{max-width:46rem}
.v2-room-num{
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.24em;color:var(--gb-ember);
  display:block;margin-bottom:var(--s-4);
}
.v2-room h3{
  font-size:clamp(2.6rem,7.4vw,5.4rem);
  font-weight:600;letter-spacing:var(--tr-mega);line-height:.94;
  margin:0 0 var(--s-4);
}
.v2-room p{font-size:var(--t-md);max-width:38ch;color:var(--gb-bone-soft);margin:0 0 var(--s-5)}
.v2-room-meta{
  display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);margin:0 0 var(--s-5);
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gb-mute);
}
.v2-room-meta li{list-style:none}
.v2-room-links{display:flex;flex-wrap:wrap;gap:var(--s-3)}

@media (max-width:768px){
  .v2-room{min-height:86svh}
  .v2-room-body{padding:var(--s-8) 0 var(--s-7)}
  .gb-motion .v2-room-media{clip-path:inset(9% 5% 9% 5% round 16px)}
}

/* ══ 4 · THE ESSAY TEASER (was "THE LESSON" — cut to about.html#four-ideas,
   the showcase decision. This is a two-line pointer, not the essay.) ══ */
.v2-teaser{
  position:relative;z-index:var(--z-page);
  background:var(--gb-black);
  border-top:1px solid var(--gb-line);
}
.v2-teaser-in{max-width:var(--shell-narrow)}
.v2-teaser-lede{
  font-size:var(--t-lg);line-height:1.35;letter-spacing:-.015em;
  color:var(--gb-bone-soft);max-width:38ch;margin:0 0 var(--s-6);
}

/* ══ 5 · THE DOOR ═════════════════════════════════════════════════ */
.v2-door{
  position:relative;z-index:var(--z-page);
  min-height:min(84svh,720px);
  display:flex;align-items:center;
  overflow:clip;isolation:isolate;
  border-top:1px solid var(--gb-line);
}
.v2-door-media{position:absolute;inset:-10% 0;z-index:-2}
.v2-door-media video,.v2-door-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.82) contrast(1.08) brightness(.98)}
.v2-door::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(7,8,10,.82),rgba(7,8,10,.32) 42%,rgba(7,8,10,.9));
}
.v2-door-body{width:var(--shell);margin-inline:auto;padding-block:var(--s-9)}
.v2-door h2{
  font-size:var(--t-xxl);letter-spacing:var(--tr-mega);line-height:.96;max-width:16ch;margin:0 0 var(--s-5);
}
.v2-door p{max-width:44ch;font-size:var(--t-md);margin:0 0 var(--s-6)}

/* the four numbers are the proof, so they are set as numbers, not as a
   template stats block: display scale, no hairline boxes, mono caption */
.v2-stat b{
  display:block;font-family:var(--f-display);font-weight:600;
  font-size:clamp(2.6rem,5.4vw,4.4rem);letter-spacing:-.045em;line-height:.92;
  color:var(--gb-bone);
}
.v2-stat span{
  display:block;margin-top:.5rem;
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gb-mute);max-width:14ch;
}


/* ── ROUND 4 ───────────────────────────────────────────────────────
   The rooms were videos hidden under a scrim so type could sit on them.
   The media is the proof: lift it, and give the copy its own dark band
   rather than dimming the whole frame. */
.v2-room-media video,.v2-room-media img,
.v2-room video,.v2-room img{filter:saturate(.95) contrast(1.08) brightness(1)!important}
.v2-room-veil{
  background:linear-gradient(180deg,rgba(7,8,10,.34) 0%,rgba(7,8,10,.04) 32%,rgba(7,8,10,.90) 100%)!important;
}

/* the black bands between beats were empty, not quiet */
.v2-claim{padding:var(--s-7) 0 var(--s-8)!important}


/* ══ THE WALL ══════════════════════════════════════════════════════
   No borders, no radius on the outer edge, no captions floating in a
   chip: the frames butt against each other and the type sits on the
   material. Every tile plays only while it is on screen (motion.js). */
.v2-reel{
  position:relative;z-index:var(--z-page);
  background:var(--gb-black);
  padding:var(--s-8) 0 var(--s-9);
  border-top:1px solid var(--gb-line);
}
.v2-reel-head{width:var(--shell);margin:0 auto var(--s-6)}
.v2-reel-head h2{
  margin:0;font-family:var(--f-display);font-weight:600;
  font-size:clamp(1.7rem,4vw,3.2rem);letter-spacing:-.038em;line-height:1.02;
  max-width:20ch;color:var(--gb-bone);
}
.v2-reel-grid{
  display:grid;gap:2px;
  grid-template-columns:repeat(2,minmax(0,1fr));
  padding-inline:var(--gutter);
}
@media (min-width:820px){.v2-reel-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.v2-reel-tile{
  position:relative;display:block;overflow:hidden;
  aspect-ratio:4/5;background:var(--gb-ink);text-decoration:none;
}
@media (min-width:820px){
  .v2-reel-tile{aspect-ratio:1/1}
  .v2-reel-tile:nth-child(1),.v2-reel-tile:nth-child(6){grid-row:span 2;aspect-ratio:1/2}
}
.v2-reel-tile video,.v2-reel-still{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.95) contrast(1.06);
  transition:transform var(--d-lg) var(--e-out),filter var(--d-md) var(--e-out);
  /* The tile itself is already dark (background:var(--gb-ink) above), but a
     large poster image (the fishing-game tile is a 1920x1080 landing-page
     screenshot) can still paint its own box white for a beat before decode
     on phone connections — give the image/video element its own dark fill
     so any pre-decode flash is dark, not white (2026-09-18 round-2 bugfix). */
  background:var(--gb-ink);
}
.v2-reel-tile::after{
  content:"";position:absolute;inset:auto 0 0 0;height:56%;
  background:linear-gradient(180deg,transparent,rgba(6,7,9,.88));
}
.v2-reel-tile:hover video{transform:scale(1.04);filter:saturate(1.05) contrast(1.08)}
.v2-reel-kicker,.v2-reel-name{position:absolute;left:var(--s-4);z-index:2;display:block}
.v2-reel-kicker{
  bottom:2.15rem;font-family:var(--f-mono);font-size:.58rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gb-ember);
  text-shadow:0 1px 3px rgba(0,0,0,.9),0 2px 14px rgba(0,0,0,.75);
}
.v2-reel-name{
  bottom:.75rem;font-family:var(--f-display);font-weight:620;letter-spacing:-.03em;
  font-size:clamp(1rem,1.7vw,1.45rem);line-height:1;color:var(--gb-bone);
  text-shadow:0 2px 18px rgba(0,0,0,.75);
}
.v2-reel-tile:focus-visible{outline:2px solid var(--gb-ember);outline-offset:-2px}

/* ── THE PROOF LINE ────────────────────────────────────────────────
   Four counters in four boxes is the stats block every template ships.
   One cinematic number carries the claim; the other three facts demote
   to a single line of small mono type underneath. */
.v2-proofline{margin:0;max-width:none}
.v2-proof-lead{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--s-4);
  margin:0 0 var(--s-5);
}
.v2-proof-lead b{
  font-family:var(--f-display);font-weight:600;font-style:normal;
  font-size:clamp(4.6rem,11vw,9rem);letter-spacing:-.05em;line-height:.86;
  color:var(--gb-bone);font-variant-numeric:tabular-nums;
}
.v2-proof-lead span{
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gb-dim);
}
.v2-proof-rest{
  display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-6);
  list-style:none;margin:0;padding:var(--s-4) 0 0;border-top:1px solid var(--gb-line-soft);
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gb-dim);
}
.v2-proof-rest li{list-style:none}
.v2-proof-rest b{
  font-weight:600;color:var(--gb-bone-soft);letter-spacing:-.01em;margin-right:.4em;
  font-variant-numeric:tabular-nums;
}


/* the five doors under the wall — a hairline-ruled index of mono
   links, not a row of outlined filter chips. */
.wm-explore-row{
  width:var(--shell);margin:var(--s-6) auto 0;
  display:flex;flex-wrap:wrap;
  border-top:1px solid var(--gb-line);
  border-bottom:1px solid var(--gb-line);
}
.wm-explore-row .play{
  flex:1 1 auto;min-width:7rem;
  border:0!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important;
  min-height:auto!important;padding:var(--s-4) var(--s-4)!important;
  font-family:var(--f-mono)!important;font-size:.72rem!important;
  font-weight:500!important;letter-spacing:.2em!important;text-transform:uppercase!important;
  color:var(--gb-dim)!important;
  justify-content:flex-start;position:relative;overflow:hidden;
  transition:color var(--d-sm) var(--e-out);
}
.wm-explore-row .play:not(:last-child){border-right:1px solid var(--gb-line-soft)!important}
.wm-explore-row .play::before{
  content:"";position:absolute;inset:auto 0 0 0;height:1px;z-index:0;
  background:var(--gb-ember);transform:scaleX(0);transform-origin:left;
  transition:transform var(--d-md) var(--e-out);
}
.wm-explore-row .play:hover,.wm-explore-row .play:focus-visible{
  color:var(--gb-bone)!important;background:transparent!important;transform:none!important;
}
.wm-explore-row .play:hover::before,.wm-explore-row .play:focus-visible::before{transform:scaleX(1)}
.wm-explore-row .play .arrow{display:none}
@media (max-width:600px){
  .wm-explore-row .play{flex:1 1 40%}
}

/* ── ROOM RHYTHM ──────────────────────────────────────────────────
   Five rooms, five compositions, not one template five times over:
   01 Radio stays the reference (copy left, the biggest headline on the
   wall). 02 Creations and 04 News drop to pure moving image — the copy
   is one small caption line under the frame, not a second display
   headline. 03 Learn centres low. 05 About is type-only: the biggest
   headline on the page, right-set, media pushed to a whisper. */

/* 02 · 04 — pure moving image, copy reduced to one caption line */
.v2-room--film .v2-room-veil{
  background:linear-gradient(180deg,rgba(7,8,10,.10) 0%,rgba(7,8,10,.02) 55%,rgba(7,8,10,.82) 100%)!important;
}
.v2-room--film .v2-room-body{padding-bottom:var(--s-6)}
.v2-room--film .v2-room-inner{
  max-width:none;display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--s-2) var(--s-4);
}
.v2-room--film .v2-room-num{margin:0;font-size:.62rem}
.v2-room--film h3{
  font-size:clamp(1.05rem,2.2vw,1.4rem);
  font-weight:560;letter-spacing:-.01em;line-height:1.3;
  margin:0;flex:1 1 auto;min-width:0;max-width:34ch;
}
.v2-room--film p,.v2-room--film .v2-room-meta{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px;
}
.v2-room--film .v2-room-links{margin:0;flex:none}
.v2-room--film .v2-room-links .play.ghost{display:none}
.v2-room--film .v2-room-links .play.solid{
  min-height:38px;padding:0 1.1rem!important;font-size:.78rem!important;
}

/* 03 — centred, low */
.v2-room--center .v2-room-body{display:flex;justify-content:center;text-align:center}
.v2-room--center .v2-room-inner{margin-inline:auto}
.v2-room--center h3{font-size:clamp(2.1rem,5.6vw,3.8rem);max-width:16ch;margin-inline:auto}
.v2-room--center p{margin-inline:auto}
.v2-room--center .v2-room-meta,.v2-room--center .v2-room-links{justify-content:center}

/* 05 — type-only: the loudest headline on the page, media a whisper */
.v2-room--type .v2-room-veil{
  background:
    linear-gradient(180deg,rgba(7,8,10,.5) 0%,rgba(7,8,10,.3) 34%,rgba(7,8,10,.94) 100%),
    linear-gradient(270deg,rgba(7,8,10,.86) 0%,rgba(7,8,10,.34) 56%,transparent 90%)!important;
}
.v2-room--type h3{font-size:clamp(3.2rem,9vw,7.5rem);letter-spacing:var(--tr-mega)}
@media (min-width:900px){
  .v2-room--type .v2-room-inner{margin-left:auto;margin-right:0;text-align:right}
  .v2-room--type .v2-room-meta,.v2-room--type .v2-room-links{justify-content:flex-end}
}

@media (max-width:768px){
  .v2-room--type h3{font-size:clamp(2.6rem,10vw,3.6rem)}
}

/* ── A BREATH, NO WORDS ────────────────────────────────────────────
   One full-bleed beat between the rooms and the claim, carrying no
   copy at all — the page's one moment of pure motion. */
.v2-beat{
  position:relative;height:min(64svh,560px);
  overflow:clip;border-top:1px solid var(--gb-line);
  background:var(--gb-ink);
}
.v2-beat video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.88) contrast(1.05);
}
/* Pat's own clip is portrait (9:16) — a wide, short beat would crop it to
   an unrecognizable sliver at object-fit:cover, so it keeps its own frame
   intact (contain, no crop, dark floor either side) instead. */
.v2-beat video.v2-beat-video{
  object-fit:contain;object-position:center;filter:none;background:var(--gb-ink);
}
.v2-beat-sound{
  position:absolute;right:var(--s-4);bottom:var(--s-4);z-index:2;
  width:2.75rem;height:2.75rem;display:grid;place-items:center;
  border-radius:999px;border:1px solid var(--gb-line-strong);
  background:rgba(7,8,10,.5);backdrop-filter:blur(6px);
  color:var(--gb-bone);cursor:pointer;padding:0;
  transition:border-color var(--d-sm) var(--e-out),background var(--d-sm) var(--e-out);
}
.v2-beat-sound:hover,.v2-beat-sound:focus-visible{border-color:var(--gb-ember)}
.v2-beat-sound:focus-visible{outline:2px solid var(--gb-ember);outline-offset:2px}
.v2-beat-sound svg{width:1.15rem;height:1.15rem;display:block}
.v2-beat-sound .icon-on{display:none}
.v2-beat-sound[aria-pressed="true"] .icon-off{display:none}
.v2-beat-sound[aria-pressed="true"] .icon-on{display:block}

/* ══ THE RADIO STRIP ═══════════════════════════════════════════════
   A full-bleed, dark, horizontally-scrolling wall of genres — the
   station shown, not described. Snap points, no scrollbar chrome. */
.v2-radio-strip{
  position:relative;z-index:var(--z-page);
  background:var(--gb-black);
  padding:var(--s-8) 0 var(--s-9);
  border-top:1px solid var(--gb-line);
}
.v2-radio-head{width:var(--shell);margin:0 auto var(--s-6)}
.v2-radio-head h2{
  margin:0;font-family:var(--f-display);font-weight:600;
  font-size:clamp(1.7rem,4vw,3.2rem);letter-spacing:-.038em;line-height:1.02;
  max-width:20ch;color:var(--gb-bone);
}
.v2-radio-scroller{
  display:flex;gap:2px;
  height:min(62vh,540px);
  width:100vw;max-width:100vw;margin-inline:calc(50% - 50vw);
  padding:0 var(--gutter) var(--s-6);
  overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
}
.v2-radio-scroller::-webkit-scrollbar{display:none}
.v2-radio-plate{
  position:relative;flex:none;
  height:100%;width:auto;aspect-ratio:3/4;
  border-radius:0;overflow:hidden;isolation:isolate;
  background:var(--gb-ink);text-decoration:none;
  scroll-snap-align:start;
}
.v2-radio-plate video,.v2-radio-plate img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.85) contrast(1.08);
  transition:transform var(--d-lg) var(--e-out);
}
.v2-radio-plate:hover video,.v2-radio-plate:hover img{transform:scale(1.05)}
.v2-radio-plate::after{
  content:"";position:absolute;inset:auto 0 0 0;height:48%;
  background:linear-gradient(180deg,transparent,rgba(6,7,9,.94));
}
.v2-radio-plate::before{
  content:"";position:absolute;left:var(--s-4);bottom:var(--s-5);z-index:2;
  width:8px;height:8px;border-radius:50%;background:var(--ed,var(--gb-ember));
}
/* 2026-09-18 station lift: a tuner has a start control, not just a
   destination link. Small always-on PLAY mark, top-left of every plate
   (a corner badge reads clean at every genre-name length, unlike text
   stacked directly over the name — "Country rap" is the long case). */
.v2-radio-play{
  position:absolute;left:var(--s-4);top:var(--s-4);z-index:3;
  display:inline-flex;align-items:center;gap:.32rem;
  padding:.34rem .62rem .34rem .5rem;border-radius:999px;
  background:rgba(7,8,10,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(239,235,227,.16);
  font-family:var(--f-mono);font-size:.6rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gb-bone);
  transition:border-color var(--d-sm) var(--e-out);
}
.v2-radio-play svg{width:.66rem;height:.66rem;color:var(--ed,var(--gb-ember))}
.v2-radio-plate:hover .v2-radio-play,.v2-radio-plate:focus-visible .v2-radio-play{border-color:var(--ed,var(--gb-ember))}
.v2-radio-name{
  position:absolute;left:calc(var(--s-4) + 16px);right:var(--s-4);bottom:calc(var(--s-5) - 4px);z-index:2;
  font-family:var(--f-display);font-weight:640;letter-spacing:-.03em;
  font-size:clamp(1.7rem,4vw,2.5rem);line-height:1;color:var(--gb-bone);
  text-shadow:0 4px 24px rgba(0,0,0,.75);
}
@media (max-width:600px){
  .v2-radio-scroller{height:min(58vh,460px)}
}
.v2-radio-plate:focus-visible{outline:2px solid var(--gb-ember);outline-offset:2px}
.v2-radio-cta{width:var(--shell);margin-inline:auto}
@media (prefers-reduced-motion:reduce){.v2-radio-plate video,.v2-radio-plate img{transition:none}}

/* ══ THE MORNING BRIEF (intel peek) ════════════════════════════════
   One lead story, re-presented from intel.html — a wide editorial
   band with the footage behind it, not the whole front page. */
.v2-intel-peek{
  position:relative;
  min-height:min(70svh,640px);
  display:flex;align-items:center;
  overflow:clip;isolation:isolate;
  border-top:1px solid var(--gb-line);
  border-bottom:1px solid var(--gb-line);
}
.v2-intel-media{position:absolute;inset:-8% 0;z-index:-2}
.v2-intel-media video,.v2-intel-media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.8) contrast(1.06);
}
.v2-intel-peek::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(7,8,10,.5) 0%,rgba(7,8,10,.2) 30%,rgba(7,8,10,.92) 100%),
    linear-gradient(90deg,rgba(7,8,10,.82) 0%,rgba(7,8,10,.3) 56%,transparent 88%);
}
.v2-intel-body{
  position:relative;z-index:2;
  width:var(--shell);margin-inline:auto;
  padding-block:var(--s-9);max-width:none;
}
.v2-intel-body > *{max-width:42rem}
.v2-intel-tag{
  display:block;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gb-dim);margin:0 0 var(--s-3);
}
.v2-intel-body h2{
  font-size:var(--t-xl);letter-spacing:var(--tr-head);margin:0 0 var(--s-4);
}
.v2-intel-body > p{font-size:var(--t-md);color:var(--gb-bone-soft);margin:0 0 var(--s-5)}
.v2-intel-heads{
  list-style:none;margin:0 0 var(--s-6);padding:0;display:grid;gap:var(--s-3);
}
.v2-intel-heads li{
  padding-left:var(--s-4);border-left:2px solid var(--gb-line-strong);
  font-size:.92rem;color:var(--gb-dim);line-height:1.5;
}