/* =====================================================================
   JUICE UNLOCKED · KEYHOLDER TV · shared design system (site.css)
   Every page in concepts/keyholder-tv/ links this file + assets/site.js
   + assets/pass/pass.css/js. Images live at ../../assets/...
   ---------------------------------------------------------------------
   TOKENS (:root)
     Color   --juice #FF5D00 (primary) --juice-deep #EC3C00 --juice-bright #FC6C14
             --ink #0B0B0B --ink-2 #151311 --ink-3 (card) --ink-4 (raised)
             --cream #FFF174 (highlight words) --yellow #FFD902 (merch/price, rare)
             --leaf #288407 (LIVE dot / in stock, rare) --paper #FFFFFF
             --text (body on dark) --muted --dim --line --line-2
     Type    --font-display Bebas Neue · --font-body Inter · --font-mono JetBrains Mono
     Space   --container 1280px · --gutter · --section-y (≈112 desktop / 56 mobile)
             --gap (24–32 desktop) · --r-lg 22 · --r 16 · --r-sm 10
     Frames  --frame (3px ink ring + offset ink block, the "broadcast sticker" frame)

   LAYOUT
     .container            centered max-width wrapper with side gutter
     .section              vertical section padding (--section-y)
       .section--orange    orange band, ink text      .section--ink2   alt dark band
       .section--black     pure black band            .section--tight  less padding
     .grid .grid--2/3/4    responsive grids with --gap

   TYPE
     .juice-type           SIGNATURE headline: Bebas, white fill, thick black outline,
                           stacked black extrusion + soft drop shadow
       .juice-type--orange / .juice-type--cream   fill variants
       .jt-hero / .jt-1 / .jt-2 / .jt-3          size steps (hero, section, sub, CTA)
     .kicker               small mono label (orange on dark, ink on orange)
     .lede                 large intro paragraph       .fine  small print

   HEADER / NAV  (identical markup on every page)
     .site-header > .container.site-header__in
       .brand (img + .brand__word + .brand__tag)
       nav.site-nav > a[aria-current="page"]
       .site-header__actions > a.live-pill[data-live-pill] + button.btn--primary[data-open-alerts]
       button.menu-btn[data-menu-toggle]
     nav.mobile-menu#mobile-menu[data-mobile-menu]
   TICKER   .ticker > .ticker__label + .ticker__viewport > .ticker__track > a.ticker__item(.ticker__tag)
            (site.js clones the items for the seamless loop; write each item once)
   BUTTONS  .btn + .btn--primary | --ghost | --ink | --cream | --outline-ink ; sizes .btn--sm .btn--lg ; .btn--block
   CHIPS    .chip + .chip--orange | --cream | --yellow | --ink | --glass ; .live-dot (green pulse)
   SECTION HEADER  header.sec-head > div > (.kicker + h2.juice-type.jt-1 + p.sec-head__lede) + a.link-more
   STORY CARD (one style site-wide)
     article.story-card (+ --lead | --row | --sponsored)
       a.story-card__media > img      (16:10 default; .story-card__media--tall = 4:5)
       .story-card__body > p.story-card__kicker ("City · Category") + h3.story-card__title > a
                         + p.story-card__dek (lead only) + p.story-card__meta > time
       .story-card__label  "Sponsored" / "Presented by" pill (optional, inside __kicker)
   VIDEO CARD
     a.video-card (+ --feature) > .video-card__thumb > img + .video-card__dur + .chip
                                 + .video-card__title + .video-card__meta
     .rail#id  horizontal snap row; arrows: button.rail-btn[data-scroll="id"][data-dir="-1|1"]
     .shelf > .shelf__head (h3.shelf__title + .shelf__note + .shelf__arrows) + .rail
   PRODUCT CARD
     article.product-card (+ --yellow | --orange | --ink bg for the media stage)
       a.product-card__media > img + .chip ; .product-card__body > .product-card__row
       (h3.product-card__title + .price > small) + p.product-card__note + .btn
     a.collection-tile > img + span.collection-tile__cta   (big merch tiles with baked art)
     .countdown[data-countdown="ISO"] > .countdown__grid > div > b[data-cd="d|h|m|s"] + span
   FORMS    .field > label + .input ; .form-grid ; .form-msg[data-form-msg]
            form[data-signup] (site.js mock submit; data-pass-target="#sel" unlocks a pass)
   FOOTER   footer.site-footer > .container > .footer-top(.footer-brand + .footer-news)
            + .footer-cols (h4 + ul) + .footer-legal ; .socials
   ALERTS SHEET  injected by site.js: .alerts-scrim + .alerts-sheet[role=dialog]
                 open with any [data-open-alerts] (optional data-topic="drops|live|...")
   TAB BAR  nav.tabbar (mobile app bar, part of the shared footer markup)
   HOME MODULES (reusable on other pages too)
     .hero-band .onair .player .guide .guide__slot .race .vote-card .keys .perk-list
     .juice-card (Meet Juice) .timeline .tiers .tier .proof .drop-*
   UTILITIES .sr-only .skip-link .stack .row-flex .mt-* .center .hide-sm .show-sm
   MOTION   [data-reveal] fades/slides in (site.js); prefers-reduced-motion disables all.
   ===================================================================== */

:root{
  --juice:#FF5D00; --juice-deep:#EC3C00; --juice-bright:#FC6C14;
  --ink:#0B0B0B; --ink-2:#151311; --ink-3:#1C1815; --ink-4:#28221E;
  --cream:#FFF174; --yellow:#FFD902; --leaf:#288407; --leaf-glow:#43B21A; --paper:#FFFFFF;
  --text:#FFF7EE; --muted:rgba(255,247,238,.70); --dim:rgba(255,247,238,.48);
  --line:rgba(255,247,238,.10); --line-2:rgba(255,247,238,.20);
  --on-orange:#0B0B0B; --on-orange-muted:rgba(11,11,11,.78);

  --font-display:var(--nf-display, "Bebas Neue"), Impact, "Arial Narrow", sans-serif;
  --font-body:var(--nf-body, "Inter"), system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:var(--nf-mono, "JetBrains Mono"), ui-monospace, Menlo, monospace;

  --container:1280px;
  --gutter:clamp(16px, 4vw, 40px);
  --section-y:clamp(56px, 8.4vw, 112px);
  --gap:clamp(16px, 2.2vw, 28px);
  --r-lg:22px; --r:16px; --r-sm:10px;
  --hdr:72px;
  --sat:env(safe-area-inset-top, 0px);
  --hdr-t:calc(var(--hdr) + var(--sat)); /* header incl. status-bar safe area (installed app) */
  --frame:0 0 0 3px var(--ink), 8px 8px 0 3px var(--ink);
  --frame-sm:0 0 0 3px var(--ink), 5px 5px 0 3px var(--ink);
  --glow:0 18px 50px -18px rgba(255,93,0,.75);
  --ease:cubic-bezier(.2,.8,.2,1);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--ink); -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--hdr-t) + 12px)}
body{margin:0; background:var(--ink); color:var(--text); font-family:var(--font-body); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:clip}
body::after{ /* film grain, kept very light */
  content:""; position:fixed; inset:0; pointer-events:none; z-index:70; opacity:.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
img{max-width:100%; display:block; height:auto}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer}
h1,h2,h3,h4,p{margin:0}
:focus-visible{outline:3px solid var(--cream); outline-offset:3px; border-radius:6px}
[hidden]{display:none!important}
.sr-only{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.skip-link{position:absolute; left:12px; top:-80px; z-index:300; background:var(--cream); color:var(--ink); padding:10px 14px; border-radius:10px; font-weight:700}
.skip-link:focus{top:12px}

/* ---------- layout ---------- */
.container{width:100%; max-width:calc(var(--container) + var(--gutter) * 2); margin:0 auto; padding:0 var(--gutter); position:relative}
.section{padding:var(--section-y) 0; position:relative}
.section--tight{padding:calc(var(--section-y) * .66) 0}
.section--orange{background:var(--juice); color:var(--on-orange)}
.section--ink2{background:var(--ink-2)}
.section--black{background:#000}
.grid{display:grid; gap:var(--gap)}
.grid--2{grid-template-columns:repeat(2, minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3, minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4, minmax(0,1fr))}
/* StoryGrid's "more stories" row (artist and author pages): 3 → 2 → 1 columns, so phone row cards never share a line */
@media (max-width:1180px){ .grid--4.story-more{grid-template-columns:repeat(3, minmax(0,1fr))} }
@media (max-width:980px){ .grid--4.story-more{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width:760px){ .grid--4.story-more{grid-template-columns:1fr} }
.stack{display:flex; flex-direction:column; gap:16px}
.row-flex{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
.center{text-align:center}
.mt-0{margin-top:0}.mt-1{margin-top:12px}.mt-2{margin-top:24px}.mt-3{margin-top:40px}

/* ---------- type ---------- */
/* The Juice Unlocked headline treatment from the original shop previews:
   white fill, ~.06em black outline outside the glyph, stacked black extrusion
   down-right, then a soft blurred drop shadow.
   The extrusion color is --jt-depth: black on orange/light bands, deep orange on the
   dark ground (a black extrusion would vanish on black). .section--orange, .hero-band
   and .on-orange switch it to ink automatically. */
:root{--jt-depth:var(--juice-deep)}
.section--orange,.hero-band,.on-orange,.tier--feat,.optin{--jt-depth:var(--ink)}
.player,.guide,.keys-done{--jt-depth:var(--juice-deep)}
.juice-type{
  --jt-fill:var(--paper); --jt-ink:var(--ink);
  font-family:var(--font-display); font-weight:400; text-transform:uppercase;
  line-height:.9; letter-spacing:.012em; color:var(--jt-fill);
  -webkit-text-stroke:.12em var(--jt-ink); paint-order:stroke fill;
  text-shadow:
    .012em .012em 0 var(--jt-depth), .024em .024em 0 var(--jt-depth), .036em .036em 0 var(--jt-depth),
    .048em .048em 0 var(--jt-depth), .06em .06em 0 var(--jt-depth), .072em .072em 0 var(--jt-depth),
    .084em .084em 0 var(--jt-depth),
    .07em .16em .22em rgba(0,0,0,.42);
  margin:0; padding:0 .09em .06em .06em; /* room for the outline + extrusion */
}
/* Depth as 7 copies of the word behind it, 1 step each like the text-shadow above (site.js adds .jt-depth and a
   hidden <jt-d> of 7 <jt-c> layers). iPhone WebKit drew those text-shadows only under the outline, so on smaller
   headings the depth vanished; the shadows stay only as the no-JS fallback. The copies are CSS content: not in the
   page text (search engines) and silent to screen readers. */
.juice-type.jt-depth{isolation:isolate; text-shadow:none}
.juice-type.jt-rel{position:relative}
jt-d,jt-c{display:block; position:absolute; inset:0; padding:inherit; pointer-events:none; -webkit-user-select:none; user-select:none}
jt-d{z-index:-1}
jt-c{white-space:pre-line; color:var(--jt-depth); -webkit-text-stroke-color:var(--jt-depth); text-shadow:none}
jt-c::before{content:attr(data-jt); content:attr(data-jt) / ""}
jt-d[data-lines] jt-c{white-space:pre} /* site.js measured the heading's line breaks: break only there */
jt-c:nth-child(1){transform:translate(.012em,.012em)}
jt-c:nth-child(2){transform:translate(.024em,.024em)}
jt-c:nth-child(3){transform:translate(.036em,.036em)}
jt-c:nth-child(4){transform:translate(.048em,.048em)}
jt-c:nth-child(5){transform:translate(.06em,.06em)}
jt-c:nth-child(6){transform:translate(.072em,.072em)}
jt-c:nth-child(7){transform:translate(.084em,.084em); text-shadow:-.014em .076em .22em rgba(0,0,0,.42)} /* = .07em .16em from the word */
.jt-depth .juice-type{text-shadow:none}
.btn:disabled jt-d,.btn[disabled] jt-d,.btn[aria-disabled="true"] jt-d{display:none}
.juice-type--orange{--jt-fill:var(--juice)}
.juice-type--cream{--jt-fill:var(--cream)}
.juice-type .juice-type--orange{color:var(--juice)}
.juice-type .juice-type--cream{color:var(--cream)}
.juice-type em{font-style:normal; color:var(--cream)}
.jt-hero{font-size:clamp(64px, 10.4vw, 168px)}
.jt-1{font-size:clamp(46px, 6vw, 92px)}
.jt-2{font-size:clamp(36px, 4.2vw, 60px)}
.jt-3{font-size:clamp(28px, 2.8vw, 40px)}
.display{font-family:var(--font-display); font-weight:400; text-transform:uppercase; line-height:.92; letter-spacing:.01em}
.kicker{font-family:var(--font-mono); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--juice)}
.section--orange .kicker,.hero-band .kicker{color:var(--ink)}
.lede{font-size:clamp(16px, 1.4vw, 19px); color:var(--muted); max-width:58ch}
.lede b,.lede strong{color:var(--text)}
.fine{font-size:12px; color:var(--dim)}
.mono{font-family:var(--font-mono); letter-spacing:.04em}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; border:0; border-radius:999px; padding:13px 22px; font-weight:700; font-size:15px; line-height:1; white-space:nowrap; transition:transform .18s var(--ease), box-shadow .18s, background .18s, color .18s}
.btn svg{width:18px; height:18px; flex:none}
.btn--primary{background:var(--juice); color:var(--ink); box-shadow:var(--glow)}
.btn--primary:hover{transform:translateY(-2px); background:var(--juice-bright); box-shadow:0 22px 50px -16px rgba(255,93,0,.95)}
.btn--ghost{background:rgba(255,247,238,.06); color:var(--text); box-shadow:inset 0 0 0 1px var(--line-2)}
.btn--ghost:hover{background:rgba(255,247,238,.13)}
.btn--ink{background:var(--ink); color:var(--text)}
.btn--ink:hover{transform:translateY(-2px); color:var(--juice)}
.btn--cream{background:var(--cream); color:var(--ink)}
.btn--cream:hover{transform:translateY(-2px)}
.btn--outline-ink{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 2px var(--ink)}
.btn--outline-ink:hover{background:var(--ink); color:var(--juice)}
.btn--sm{padding:10px 15px; font-size:13px}
.btn--lg{padding:17px 28px; font-size:17px}
.btn--block{width:100%}
.btn[aria-pressed="true"]{background:var(--cream); color:var(--ink); box-shadow:none}
/* disabled: same pill, flat ink-3 fill, muted Inter label. juice-type is only for ACTIVE big CTAs,
   so any .juice-type label inside a disabled button drops back to plain body type. */
.btn:disabled,.btn[disabled],.btn[aria-disabled="true"]{cursor:not-allowed; background:var(--ink-3); color:var(--dim); box-shadow:inset 0 0 0 1px var(--line-2); transform:none}
.btn:disabled .juice-type,.btn[disabled] .juice-type,.btn[aria-disabled="true"] .juice-type{font-family:var(--font-body); font-size:16px; font-weight:600; letter-spacing:.06em; line-height:1; color:var(--dim); -webkit-text-stroke:0; text-shadow:none; padding:0}
.link-more{display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:15px; color:var(--juice); white-space:nowrap}
.link-more::after{content:"→"; transition:transform .2s}
.link-more:hover::after{transform:translateX(4px)}

/* ---------- chips ---------- */
.chip{display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; line-height:1; padding:7px 10px; border-radius:7px; white-space:nowrap}
.chip--glass{background:rgba(11,11,11,.72); color:var(--text); box-shadow:inset 0 0 0 1px var(--line-2); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.chip--orange{background:var(--juice); color:var(--ink)}
.chip--cream{background:var(--cream); color:var(--ink)}
.chip--yellow{background:var(--yellow); color:var(--ink)}
.chip--ink{background:var(--ink); color:var(--text)}
.live-dot{width:9px; height:9px; border-radius:50%; background:var(--leaf-glow); box-shadow:0 0 0 3px rgba(40,132,7,.4), 0 0 12px var(--leaf-glow); display:inline-block; flex:none; animation:livePulse 1.8s ease-in-out infinite}
@keyframes livePulse{0%,100%{box-shadow:0 0 0 3px rgba(40,132,7,.45),0 0 10px var(--leaf-glow)}50%{box-shadow:0 0 0 7px rgba(40,132,7,.06),0 0 20px var(--leaf-glow)}}
[data-live="false"] .live-dot{background:#857b73; box-shadow:none; animation:none}

/* ---------- header ---------- */
.site-header{position:sticky; top:0; padding-top:var(--sat); z-index:80; background:rgba(11,11,11,.86); -webkit-backdrop-filter:saturate(1.4) blur(14px); backdrop-filter:saturate(1.4) blur(14px); border-bottom:1px solid var(--line)}
.site-header__in{display:flex; align-items:center; gap:28px; height:var(--hdr)}
.brand{display:flex; align-items:center; gap:12px; flex:none}
.brand img{width:50px; height:50px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 2px var(--ink), 0 0 0 4px var(--juice); transition:transform .4s var(--ease)}
.brand:hover img{transform:rotate(-12deg) scale(1.05)}
.brand__text{display:flex; flex-direction:column; line-height:1}
.brand__word{font-family:var(--font-display); font-size:25px; letter-spacing:.04em; color:var(--text)}
.brand__word b{font-weight:400; color:var(--juice)}
.brand__tag{font-family:var(--font-mono); font-size:9.5px; font-weight:700; letter-spacing:.16em; color:var(--dim); margin-top:3px}
.site-nav{display:flex; gap:4px}
.site-nav a{position:relative; padding:11px 14px 8px; border-radius:10px; font-family:var(--font-display); font-weight:400; font-size:22px; line-height:1; letter-spacing:.07em; color:var(--muted); transition:color .15s, background .15s}
.site-nav a:hover{color:var(--text); background:rgba(255,247,238,.07)}
.site-nav a[aria-current="page"]{color:var(--text)}
.site-nav a[aria-current="page"]::after{content:""; position:absolute; left:14px; right:calc(14px + .07em); bottom:1px; height:3px; border-radius:3px; background:var(--juice)}
.site-header__actions{margin-left:auto; display:flex; align-items:center; gap:10px}
.live-pill{display:inline-flex; align-items:center; gap:9px; padding:10px 15px 10px 13px; border-radius:999px; background:rgba(40,132,7,.14); box-shadow:inset 0 0 0 1px rgba(67,178,26,.42); font-family:var(--font-mono); font-size:12px; font-weight:700; letter-spacing:.08em; white-space:nowrap; transition:background .15s}
.live-pill:hover{background:rgba(40,132,7,.26)}
/* the pill only exists while Juice is live on YouTube or IG (site.js un-hides it) */
.cart-btn{position:relative; width:44px; height:44px; border-radius:50%; border:0; background:rgba(255,247,238,.08); color:var(--text); display:grid; place-items:center; flex:none; transition:background .15s, transform .15s}
.cart-btn:hover{background:rgba(255,247,238,.16)}
.cart-btn svg{width:21px; height:21px}
.cart-btn__n{position:absolute; top:-4px; right:-4px; min-width:21px; height:21px; padding:0 5px; border-radius:999px; background:var(--juice); color:var(--ink); font-family:var(--font-mono); font-size:11px; font-weight:700; line-height:21px; text-align:center; box-shadow:0 0 0 2px var(--ink)}
.cart-btn__n[data-empty]{display:none}
.cart-btn.is-bump{animation:cartBump .55s var(--ease)}
@keyframes cartBump{30%{transform:scale(1.18) rotate(-8deg)}60%{transform:scale(.95)}}
.menu-btn{display:none; width:44px; height:44px; border-radius:50%; border:0; background:rgba(255,247,238,.08); align-items:center; justify-content:center; flex:none}
.menu-btn svg{width:22px; height:22px}
.mobile-menu{display:none}

/* ---------- ticker ---------- */
.ticker{position:relative; z-index:3; display:flex; align-items:stretch; background:#000; border-bottom:1px solid #000; overflow:hidden}
.ticker__label{position:relative; z-index:2; flex:none; display:flex; align-items:center; gap:10px; background:var(--juice); color:var(--ink); font-family:var(--font-display); font-size:21px; letter-spacing:.05em; padding:10px 14px 8px 18px}
.ticker__label::after{content:""; position:absolute; right:-16px; top:0; bottom:0; width:17px; background:var(--juice); clip-path:polygon(0 0, 100% 50%, 0 100%)}
.ticker__label .live-dot{background:var(--ink); box-shadow:none; animation:tickBlink 1.2s steps(2) infinite}
@keyframes tickBlink{50%{opacity:.25}}
.ticker__viewport{flex:1; overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image:linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent)}
.ticker__track{display:flex; gap:48px; width:max-content; padding:11px 0 11px 40px; animation:tickerMove var(--ticker-dur, 70s) linear infinite; font-weight:600; font-size:15px; white-space:nowrap}
.ticker:hover .ticker__track,.ticker:focus-within .ticker__track{animation-play-state:paused}
.ticker__item{display:inline-flex; align-items:center; gap:10px; color:var(--text)}
.ticker__item:hover{color:var(--cream)}
.ticker__tag{font-family:var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:.1em; color:var(--juice)}
.ticker__item + .ticker__item::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--juice); margin-right:38px; margin-left:-10px; opacity:.8; display:none}
@keyframes tickerMove{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- section header ---------- */
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:clamp(28px, 3.4vw, 44px)}
.sec-head .kicker{margin-bottom:12px; display:block}
.sec-head__lede{margin-top:14px; color:var(--muted); max-width:56ch; font-size:16px}
.section--orange .sec-head__lede{color:var(--on-orange-muted)}
.section--orange .link-more{color:var(--ink)}

/* ---------- story card ---------- */
/* The outline is drawn by ::after on top of everything, so the image can't paint over it (an inset shadow on the card itself sits under the media). */
.story-card{--edge:var(--line); display:flex; flex-direction:column; background:var(--ink-3); border-radius:var(--r); overflow:hidden; transition:transform .25s var(--ease), box-shadow .25s; position:relative; min-width:0}
.story-card::after{content:""; position:absolute; inset:0; z-index:3; border-radius:inherit; box-shadow:inset 0 0 0 1px var(--edge); pointer-events:none; transition:box-shadow .25s}
.story-card:hover{--edge:rgba(255,93,0,.65); transform:translateY(-4px); box-shadow:0 24px 50px -26px rgba(255,93,0,.7)}
.story-card__media{display:block; position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--ink-4)}
.story-card__media--tall{aspect-ratio:4/5}
.story-card__media img{width:100%; height:100%; object-fit:cover; object-position:50% 22%; transition:transform .6s var(--ease)}
.story-card:hover .story-card__media img{transform:scale(1.045)}
.story-card__body{display:flex; flex-direction:column; gap:10px; padding:18px 20px 20px; flex:1}
.story-card__kicker{display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--juice)}
.story-card__label{font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.1em; padding:3px 7px; border-radius:5px; background:var(--yellow); color:var(--ink)}
.story-card__title{font-size:18px; line-height:1.28; font-weight:700; letter-spacing:-.012em; color:var(--text)}
.story-card__title a::after{content:""; position:absolute; inset:0; z-index:1} /* whole card clickable */
.story-card:hover .story-card__title{color:var(--paper)}
.story-card__dek{color:var(--muted); font-size:15px}
.story-card__meta{margin-top:auto; padding-top:4px; font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; color:var(--dim); text-transform:uppercase}
.story-card__flag{color:var(--juice); font-weight:700} /* Breaking / Developing / Exclusive, ahead of the time */
.story-card--lead .story-card__title{font-family:var(--font-display); font-weight:400; font-size:clamp(34px, 3.4vw, 50px); line-height:.94; letter-spacing:.005em; text-transform:uppercase}
.story-card--lead .story-card__body{padding:22px 24px 24px; gap:12px}
.story-card--sponsored{--edge:rgba(255,217,2,.35)}
.story-card--row:not(.story-card--lead) .story-card__dek{display:none} /* shown only in the phone list below */
.story-card .race{position:relative; z-index:2}

/* ---------- video card + rails ---------- */
.video-card{display:flex; flex-direction:column; gap:12px; min-width:0}
.video-card__thumb{position:relative; display:block; aspect-ratio:16/9; border-radius:14px; overflow:hidden; background:var(--ink-4); box-shadow:inset 0 0 0 1px var(--line); transition:box-shadow .25s}
.video-card__thumb img{width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease)}
.video-card__thumb::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(0,0,0,.55))}
.video-card__thumb::before{content:""; position:absolute; z-index:2; left:50%; top:50%; width:58px; height:58px; margin:-29px 0 0 -29px; border-radius:50%; background:var(--juice) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.5v13l11-6.5z' fill='%230B0B0B'/%3E%3C/svg%3E") 55% 50%/26px no-repeat; box-shadow:0 0 0 8px rgba(255,93,0,.25); opacity:0; transform:scale(.7); transition:opacity .25s, transform .3s var(--ease)}
.video-card:hover .video-card__thumb::before,.video-card:focus-visible .video-card__thumb::before{opacity:1; transform:scale(1)}
.video-card:hover .video-card__thumb{box-shadow:0 0 0 2px var(--juice), 0 18px 44px -18px rgba(255,93,0,.85)}
.video-card:hover .video-card__thumb img{transform:scale(1.06)}
.video-card__dur{position:absolute; z-index:2; right:9px; bottom:9px; font-family:var(--font-mono); font-size:11px; font-weight:700; background:rgba(0,0,0,.82); color:#fff; padding:4px 7px; border-radius:6px}
.video-card__thumb .chip{position:absolute; z-index:2; left:9px; bottom:9px}
.video-card__title{font-size:15.5px; font-weight:650; line-height:1.32; color:var(--text); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.video-card:hover .video-card__title{color:var(--cream)}
.video-card__meta{font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; color:var(--dim); margin-top:-4px}
/* Artist auto-links (lib/artist-links): cataloged artists named in a video title follow the series in the kicker */
.video-card .story-card__kicker{flex-wrap:wrap; row-gap:4px}
.video-card__who{display:inline-flex; align-items:center; gap:8px}
.video-card__who a{color:var(--cream); text-decoration:none}
.video-card__who a:hover,.video-card__who a:focus-visible{text-decoration:underline; text-underline-offset:3px}
a.artist-link{color:inherit; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.14em}
a.artist-link:hover{color:var(--juice)}
.video-card--feature .video-card__title{font-family:var(--font-display); font-weight:400; font-size:30px; line-height:.95; text-transform:uppercase; -webkit-line-clamp:3}
.video-card--feature .video-card__thumb{box-shadow:0 0 0 2px var(--juice), var(--glow)}
.video-card__big{position:absolute; z-index:2; right:14px; bottom:12px; text-align:right; line-height:1}
.video-card__big b{display:block; font-family:var(--font-display); font-weight:400; font-size:60px; line-height:.82; color:var(--cream); text-shadow:0 3px 0 #000, 0 0 26px rgba(0,0,0,.7)}
.video-card__big span{font-family:var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:.12em; background:rgba(0,0,0,.78); padding:3px 6px; border-radius:5px}
.shelf + .shelf{margin-top:clamp(40px, 4vw, 56px)}
.shelf__head{display:flex; align-items:center; gap:16px; margin-bottom:18px}
.shelf__title{font-family:var(--font-display); font-weight:400; font-size:clamp(30px, 3vw, 40px); line-height:1; text-transform:uppercase; letter-spacing:.01em}
.shelf__title span{color:var(--juice)}
.shelf__note{font-family:var(--font-mono); font-size:11px; color:var(--dim); letter-spacing:.12em; text-transform:uppercase}
.shelf__arrows{margin-left:auto; display:flex; gap:8px}
.rail-btn{width:42px; height:42px; border-radius:50%; border:0; background:rgba(255,247,238,.08); display:grid; place-items:center; transition:background .15s, color .15s}
.rail-btn:hover{background:var(--juice); color:var(--ink)}
.rail-btn svg{width:18px; height:18px}
.rail{display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - var(--gap) * 3) / 4); gap:var(--gap); overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 4px 16px; scrollbar-width:thin; scrollbar-color:var(--ink-4) transparent; overscroll-behavior-x:contain}
.rail > *{scroll-snap-align:start}
.rail{scroll-padding-inline:4px}
.rail::-webkit-scrollbar{height:6px}.rail::-webkit-scrollbar-thumb{background:var(--ink-4); border-radius:9px}
.rail--feature{grid-auto-columns:calc((100% - var(--gap) * 3) / 4)}
.rail--feature > .video-card--feature{grid-column:span 2}

/* ---------- product card ---------- */
.product-card{display:flex; flex-direction:column; background:var(--ink); color:var(--text); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--frame-sm); transition:transform .25s var(--ease); min-width:0}
.product-card:hover{transform:translateY(-5px) rotate(-.4deg)}
.product-card__media{position:relative; display:block; aspect-ratio:1/1; overflow:hidden; background:var(--yellow)}
.product-card--orange .product-card__media{background:var(--juice-deep)}
.product-card--ink .product-card__media{background:var(--ink-3)}
.product-card__media img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease)}
.product-card:hover .product-card__media img{transform:scale(1.06) translateY(-4px)}
.product-card__media .chip{position:absolute; left:14px; top:14px}
.product-card__body{display:flex; flex-direction:column; gap:10px; padding:18px 20px 20px; flex:1}
.product-card__row{display:flex; justify-content:space-between; align-items:flex-start; gap:12px}
.product-card__title{font-family:var(--font-display); font-weight:400; font-size:30px; line-height:.95; color:var(--yellow); text-transform:uppercase}
.price{font-family:var(--font-display); font-size:30px; line-height:1; color:var(--paper); text-align:right; white-space:nowrap}
.price small{display:block; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.14em; color:var(--dim); margin-top:3px}
.product-card__note{font-size:14px; color:var(--muted)}
.product-card__body .btn{margin-top:auto}
.stock{display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.08em; color:#7bd453}
.stock::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--leaf-glow)}
.collection-tile{position:relative; display:block; overflow:hidden; border-radius:var(--r-lg); box-shadow:var(--frame-sm); background:var(--ink)}
.collection-tile img{width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease)}
.collection-tile:hover img{transform:scale(1.05)}
.collection-tile__cta{position:absolute; right:14px; bottom:14px; z-index:2}

/* countdown */
.countdown{background:var(--ink); color:var(--text); border-radius:20px; padding:16px 18px 14px; box-shadow:var(--frame-sm)}
.countdown__label{display:flex; justify-content:space-between; gap:14px; font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.12em; color:var(--yellow); text-transform:uppercase}
.countdown__label span:last-child{color:var(--dim)}
.countdown__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:10px}
.countdown__grid > div{text-align:center; background:var(--ink-3); border-radius:12px; padding:8px 4px 6px}
.countdown__grid b{display:block; font-family:var(--font-display); font-weight:400; font-size:54px; line-height:.92; color:var(--yellow); font-variant-numeric:tabular-nums}
.countdown__grid span{font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; color:var(--dim)}

/* ---------- forms ---------- */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.field{display:flex; flex-direction:column; gap:7px; min-width:0}
.field--full{grid-column:1/-1}
.field label{font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--dim)}
.field label i{font-style:normal; text-transform:none; letter-spacing:0; font-weight:500}
.input{width:100%; height:54px; border-radius:14px; border:0; padding:0 16px; background:rgba(255,247,238,.07); box-shadow:inset 0 0 0 1px var(--line-2); color:var(--text); font-size:16px; transition:box-shadow .15s, background .15s}
.input::placeholder{color:var(--dim)}
.input:focus{outline:none; box-shadow:inset 0 0 0 2px var(--juice); background:rgba(255,247,238,.1)}
.input[aria-invalid="true"]{box-shadow:inset 0 0 0 2px #ff8a5c}
select.input{appearance:none; -webkit-appearance:none; padding-right:42px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23FFF7EE' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center}
select.input option{background:#1C1815; color:#FFF7EE}
.form-msg{grid-column:1/-1; font-size:14px; min-height:0}
.form-msg.is-error{color:#ff9a70}
.form-msg.is-ok{color:var(--cream); font-weight:600}
.inline-form{display:flex; gap:10px}
.inline-form .input{flex:1; height:50px}

/* ---------- footer ---------- */
.site-footer{background:#000; border-top:1px solid var(--line); padding:clamp(56px, 7vw, 88px) 0 36px; position:relative; overflow:hidden}
.footer-top{display:grid; grid-template-columns:1.1fr 1fr; gap:var(--gap); padding-bottom:40px; border-bottom:1px solid var(--line)}
.footer-brand .brand img{width:64px; height:64px}
.footer-brand .brand__word{font-size:32px}
.footer-brand p{margin-top:16px; color:var(--muted); max-width:44ch; font-size:15px}
.footer-brand .footer-sign{margin-top:22px; font-size:clamp(30px, 3vw, 42px); color:var(--cream); max-width:none}
.footer-news{align-self:start; background:var(--ink-3); border-radius:var(--r-lg); padding:24px 24px 22px; box-shadow:inset 0 0 0 1px var(--line)}
.footer-news .form-msg:empty{display:none}
.footer-news h3{margin-bottom:6px}
.footer-news p{color:var(--muted); font-size:14px; margin-bottom:16px}
.footer-cols{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--gap); padding:40px 0}
.footer-cols h4{font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--juice); margin-bottom:16px}
.footer-cols ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; font-size:14.5px}
.footer-cols a{color:var(--muted)}
.footer-cols a:hover{color:var(--text)}
.socials{display:flex; gap:10px; margin-top:22px; flex-wrap:wrap}
.socials a{width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:rgba(255,247,238,.07); box-shadow:inset 0 0 0 1px var(--line); transition:background .15s, color .15s, transform .15s}
.socials a:hover{background:var(--juice); color:var(--ink); transform:translateY(-2px)}
.socials svg{width:20px; height:20px}
.footer-legal{display:flex; justify-content:space-between; gap:12px 24px; flex-wrap:wrap; padding-top:22px; border-top:1px solid var(--line); font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; color:var(--dim); position:relative}

/* ---------- alerts sheet (markup injected by site.js) ---------- */
.alerts-scrim{position:fixed; inset:0; z-index:150; background:rgba(5,4,3,.72); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); opacity:0; transition:opacity .25s}
.alerts-scrim.is-open{opacity:1}
.alerts-sheet{position:fixed; z-index:160; left:50%; top:50%; width:min(580px, calc(100vw - 32px)); max-height:min(88vh, 840px); overflow:auto; transform:translate(-50%,-46%) scale(.98); opacity:0; background:var(--ink-2); border-radius:26px; box-shadow:0 0 0 1px var(--line-2), 0 40px 120px -20px rgba(255,93,0,.45); transition:opacity .25s, transform .3s var(--ease)}
.alerts-sheet.is-open{opacity:1; transform:translate(-50%,-50%) scale(1)}
.alerts-sheet__head{position:sticky; top:0; z-index:2; background:var(--ink-2); padding:20px 22px 16px; display:flex; gap:14px; align-items:center; border-bottom:1px solid var(--line)}
.alerts-sheet__head img{width:50px; height:50px; border-radius:50%; flex:none}
.alerts-sheet__head h2{font-size:34px}
.alerts-sheet__head p{font-size:13px; color:var(--muted); margin-top:4px}
.x-btn{margin-left:auto; width:42px; height:42px; border-radius:50%; border:0; background:rgba(255,247,238,.08); display:grid; place-items:center; flex:none}
.x-btn:hover{background:rgba(255,247,238,.16)}
.x-btn svg{width:18px; height:18px}
.alerts-sheet__body{padding:18px 22px 22px}
.alerts-sheet__body h3{font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin:4px 0 10px}
.toggles{display:grid; grid-template-columns:1fr 1fr; border-radius:16px; box-shadow:inset 0 0 0 1px var(--line); overflow:hidden; margin-bottom:22px}
.tg{display:flex; align-items:center; gap:11px; padding:12px; border-bottom:1px solid var(--line); cursor:pointer; position:relative}
.tg:nth-child(odd){border-right:1px solid var(--line)}
.tg:nth-last-child(-n+2){border-bottom:0}
.tg__ico{width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:rgba(255,247,238,.06); font-size:18px; flex:none}
.tg__txt{flex:1; min-width:0}
.tg__txt b{display:block; font-size:15px}
.tg__txt span{display:block; font-size:12.5px; color:var(--dim)}
.tg input{position:absolute; opacity:0; width:1px; height:1px}
.sw{width:48px; height:28px; border-radius:999px; background:var(--ink-4); position:relative; flex:none; transition:background .2s; box-shadow:inset 0 0 0 1px var(--line-2)}
.sw::after{content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:var(--paper); transition:transform .22s cubic-bezier(.3,1.4,.5,1)}
.tg input:checked + .sw{background:var(--juice)}
.tg input:checked + .sw::after{transform:translateX(20px); background:var(--ink)}
.tg input:focus-visible + .sw{outline:3px solid var(--cream); outline-offset:2px}
.tg select.input{height:34px; margin-top:4px; font-size:13px; padding:0 30px 0 10px; background-position:right 10px center; border-radius:10px}
.os-tabs{display:flex; gap:6px; padding:4px; border-radius:12px; background:rgba(255,247,238,.06); margin-bottom:14px}
.os-tabs button{flex:1; border:0; border-radius:9px; padding:10px 8px; background:transparent; font-weight:600; font-size:14px; color:var(--muted)}
.os-tabs button[aria-selected="true"]{background:var(--paper); color:var(--ink)}
.steps{list-style:none; counter-reset:s; margin:0 0 18px; padding:0; display:flex; flex-direction:column; gap:8px}
.steps li{counter-increment:s; display:grid; grid-template-columns:30px 1fr auto; gap:12px; align-items:center; font-size:14px; padding:10px 12px; border-radius:12px; background:rgba(255,247,238,.04)}
.steps li::before{content:counter(s); width:30px; height:30px; border-radius:50%; background:var(--juice); color:var(--ink); font-family:var(--font-display); font-size:20px; display:grid; place-items:center; padding-top:2px}
.steps .glyph{width:30px; height:30px; display:grid; place-items:center; border-radius:8px; background:rgba(255,247,238,.08)}
.steps .glyph svg{width:18px; height:18px}
.alerts-sheet__foot{display:flex; flex-direction:column; gap:10px; position:sticky; bottom:0; z-index:2; background:var(--ink-2); border-top:1px solid var(--line); margin:0 -22px -22px; padding:14px 22px 18px}
.alerts-sheet__foot p{font-size:12px; color:var(--dim); text-align:center}
.alerts-ok{text-align:center; padding:12px 0 6px}
.alerts-ok b{display:block; font-size:46px}
.alerts-ok p{color:var(--muted); margin:10px 0 18px; font-size:14px}

/* ---------- mobile tab bar ---------- */
.tabbar{display:none}

/* ---------- reveal motion (scroll-driven, CSS only; browsers without support just show content) ---------- */
@keyframes revealUp{from{opacity:0; transform:translateY(32px)}}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    [data-reveal]{animation:revealUp linear both; animation-timeline:view(); animation-range:entry 0% entry 55%}
  }
}

/* =====================================================================
   HOME MODULES
   ===================================================================== */

/* hero band */
.hero-band{position:relative; isolation:isolate; background:var(--juice); color:var(--ink); padding:clamp(32px, 4.4vw, 60px) 0 0; overflow:hidden}
.hero-band::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 480px at 12% -10%, rgba(255,241,116,.35), transparent 65%),
    radial-gradient(800px 520px at 100% 0%, var(--juice-deep), transparent 70%),
    radial-gradient(circle at 1px 1px, rgba(11,11,11,.16) 1px, transparent 1.6px) 0 0/16px 16px}
.hero-band__top{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:24px; padding-bottom:clamp(28px, 3vw, 40px)}
.hero-band__kicker{display:flex; align-items:center; gap:10px; margin-bottom:18px}
.onair-dot{width:10px; height:10px; border-radius:50%; background:var(--ink); box-shadow:0 0 0 3px rgba(11,11,11,.18); animation:tickBlink 1.4s steps(2) infinite}
.hero-band h1{line-height:.84}
.hero-band h1 .br-sm{display:none}
.hero-band__sub{margin-top:22px; max-width:46ch; font-size:clamp(16px, 1.5vw, 19px); font-weight:500; color:var(--on-orange-muted)}
.hero-band__sub b{color:var(--ink)}
.sticker{position:relative; width:clamp(150px, 15vw, 220px); aspect-ratio:1; flex:none; margin-right:clamp(0px, 2vw, 30px);
  /* one solid extrusion under the whole seal, so nothing sits on top of the ring text */
  filter:drop-shadow(1px 1px 0 var(--ink)) drop-shadow(2px 2px 0 var(--ink)) drop-shadow(4px 4px 0 var(--ink))}
.sticker__ring{position:absolute; inset:0; animation:spin 22s linear infinite}
.sticker__ring text{font-family:var(--font-display); font-size:15.5px; letter-spacing:2.6px; fill:var(--ink)}
.sticker img{position:absolute; inset:20%; width:60%; height:60%; border-radius:50%; box-shadow:0 0 0 4px var(--ink); animation:bob 4s ease-in-out infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes bob{50%{transform:translateY(-6px) rotate(-4deg)}}

/* on-air: player + guide; dark ground slides under the lower half */
.onair{position:relative; display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:var(--gap); align-items:start; padding-bottom:8px}
.onair-wrap{position:relative}
.onair::before{content:""; position:absolute; z-index:-1; left:calc(50% - 50vw); width:100vw; bottom:0; top:clamp(120px, 15vw, 230px); background:var(--ink); border-top:3px solid var(--ink)}
.player{position:relative; border-radius:var(--r-lg); overflow:hidden; background:var(--ink-2); box-shadow:var(--frame); color:var(--text)}
.player__screen{position:relative; aspect-ratio:16/9; background:#000; overflow:hidden}
.player__screen > img{width:100%; height:100%; object-fit:cover}
.player__screen::after{content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(0,0,0,.45), transparent 24%, transparent 58%, rgba(21,19,17,.95)), repeating-linear-gradient(0deg, rgba(0,0,0,.14) 0 1px, transparent 1px 3px)}
.player__screen.is-playing::after{display:none}
.player__screen iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.player__osd{position:absolute; z-index:2; top:16px; left:18px; right:18px; display:flex; justify-content:space-between; gap:10px}
.play-btn{position:absolute; z-index:3; left:50%; top:46%; width:96px; height:96px; margin:-48px 0 0 -48px; border-radius:50%; border:0; background:var(--juice); color:var(--ink); display:grid; place-items:center; box-shadow:0 0 0 10px rgba(255,93,0,.25), 0 0 60px rgba(255,93,0,.8); transition:transform .2s var(--ease)}
.play-btn::before{content:""; position:absolute; inset:-10px; border-radius:50%; border:2px solid rgba(255,93,0,.7); animation:ring 2.2s ease-out infinite}
@keyframes ring{from{transform:scale(1); opacity:1}to{transform:scale(1.5); opacity:0}}
.play-btn:hover{transform:scale(1.07)}
.play-btn svg{width:36px; height:36px; margin-left:6px}
.player__body{position:relative; z-index:2; margin-top:-92px; padding:0 28px 26px}
.player__series{font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:10px}
.player__title{font-family:var(--font-display); font-weight:400; font-size:clamp(32px, 3.6vw, 54px); line-height:.92; text-transform:uppercase; text-shadow:0 2px 0 #000; max-width:20ch}
.player__title span{color:var(--cream)}
.player__meta{margin-top:14px; font-size:13px; color:var(--dim)}
.presented{display:inline-flex; align-items:center; gap:9px; color:var(--text)}
.presented .story-card__label{white-space:nowrap}
.player__clips{margin-top:6px; font-size:13px; color:var(--dim)}
.player__clips a{color:var(--text); text-decoration:underline; text-decoration-color:rgba(255,247,238,.3); text-underline-offset:3px}
.player__clips a:hover{color:var(--cream); text-decoration-color:var(--juice)}

.guide{border-radius:var(--r-lg); overflow:hidden; background:var(--ink-2); box-shadow:var(--frame); color:var(--text); display:flex; flex-direction:column}
.guide__head{display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:1px solid var(--line); background:linear-gradient(90deg, rgba(255,93,0,.16), transparent)}
.guide__head h2{font-size:34px}
.guide__clock{font-family:var(--font-mono); font-size:12px; color:var(--dim)}
.guide__slot{padding:18px 20px; border-bottom:1px solid var(--line)}
.guide__slot:last-child{border-bottom:0}
.guide__when{display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); margin-bottom:12px}
.guide__slot--live .guide__when{color:var(--text)}
.guide__slot h3{font-family:var(--font-display); font-weight:400; font-size:30px; line-height:.95; text-transform:uppercase; margin-bottom:6px}
.guide__slot p{color:var(--muted); font-size:14px}
.guide__live{display:grid; grid-template-columns:96px 1fr; gap:14px; align-items:center}
.guide__thumb{position:relative; width:96px; aspect-ratio:4/5; border-radius:12px; overflow:hidden; box-shadow:0 0 0 2px var(--juice)}
.guide__thumb img{width:100%; height:100%; object-fit:cover; object-position:50% 30%}
.guide__acts{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.guide__link{color:var(--text); text-decoration:underline; text-decoration-color:rgba(255,247,238,.3); text-underline-offset:3px; white-space:nowrap}
.guide__link:hover{color:var(--cream); text-decoration-color:var(--juice)}
.guide__replay{display:grid; grid-template-columns:116px 1fr; gap:14px; align-items:center}
.guide__replay .video-card__thumb{border-radius:10px}
.guide__replay .video-card__thumb::before{width:34px; height:34px; margin:-17px 0 0 -17px; background-size:16px; box-shadow:0 0 0 4px rgba(255,93,0,.25)}
.guide__replay b{display:block; font-size:14px; line-height:1.3}
.guide__replay > span:last-child > span{display:block; margin-top:4px; font-family:var(--font-mono); font-size:11px; color:var(--dim)}
.guide__replay:hover b{color:var(--cream)}
.guide__replay:hover .video-card__thumb::before{opacity:1; transform:scale(1)}
.guide .is-on{display:none}
[data-live="true"] .guide .is-on{display:inline}
[data-live="true"] .guide .btn.is-on{display:inline-flex}
[data-live="true"] .guide .is-off{display:none}

/* news grid */
.news-grid{display:grid; grid-template-columns:minmax(0,1.25fr) repeat(2, minmax(0,1fr)); grid-template-rows:auto auto; gap:var(--gap)}
.news-grid .story-card--lead{grid-row:span 2}
.news-grid .story-card--lead .story-card__media{aspect-ratio:auto; flex:1; min-height:240px}
.news-grid .story-card--lead .story-card__media img{position:absolute; inset:0}
.news-grid .story-card--lead .story-card__body{flex:none}
.news-row{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--gap); margin-top:var(--gap)}
.city-chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px}
.city-chips a{font-family:var(--font-mono); font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:9px 13px; border-radius:999px; box-shadow:inset 0 0 0 1px var(--line-2); color:var(--muted); transition:all .15s}
.city-chips a:hover,.city-chips a[aria-current="true"]{background:var(--juice); color:var(--ink); box-shadow:none}
.race{display:flex; flex-direction:column; gap:8px; padding:14px 16px; border-radius:12px; background:rgba(255,247,238,.05); box-shadow:inset 0 0 0 1px var(--line)}
.race__head{display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:.12em; color:var(--dim)}
.race__head b{color:var(--cream)}
.race__row{display:grid; grid-template-columns:90px 1fr 58px; gap:10px; align-items:center; font-size:13px}
.race__bar{height:10px; border-radius:9px; background:rgba(255,247,238,.08); overflow:hidden}
.race__bar i{display:block; height:100%; border-radius:9px; background:var(--juice); transform-origin:left; animation:barIn 1.4s var(--ease) both}
.race__row--b .race__bar i{background:var(--paper)}
.race__row span:last-child{font-family:var(--font-mono); font-size:12px; text-align:right}
@keyframes barIn{from{transform:scaleX(0)}}

/* next up vote */
.nu-grid{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:var(--gap); align-items:stretch}
.nu-list{display:flex; flex-direction:column; gap:var(--gap)}
.vote-card{display:grid; background:var(--ink-3); border-radius:var(--r); overflow:hidden; box-shadow:inset 0 0 0 1px var(--line)}
.vote-card--feature{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.vote-card--mini{grid-template-columns:118px minmax(0,1fr); flex:1 0 auto} /* grow to share the column, never shrink: the tally that appears after a vote must fit inside the card */
.vote-card__poster{position:relative; overflow:hidden; background:var(--ink-4); min-height:100%}
.vote-card__poster img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 25%}
.vote-card__poster::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 50%, rgba(11,11,11,.8))}
.vote-card__poster .chip{position:absolute; z-index:2; left:14px; top:14px}
.vote-card__info{display:flex; flex-direction:column; gap:12px; padding:22px; min-width:0}
.vote-card--mini .vote-card__info{padding:16px 18px; gap:8px}
.vote-card__handle{font-family:var(--font-display); font-weight:400; font-size:clamp(34px, 3vw, 46px); line-height:.9; overflow-wrap:anywhere}
.vote-card--mini .vote-card__handle{font-size:34px}
.vote-card__info .vote-card__hook{font-family:var(--font-display); font-size:26px; line-height:.95; color:var(--cream)}
.vote-card__info p{font-size:14px; color:var(--muted)}
.vote-card__info p b{color:var(--text)}
.vote{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:auto}
.vote button{border:0; border-radius:12px; padding:11px 8px; background:rgba(255,247,238,.06); box-shadow:inset 0 0 0 1px var(--line-2); font-weight:700; font-size:14px; display:flex; align-items:center; justify-content:center; gap:8px; transition:transform .15s, background .15s}
.vote button:hover{transform:translateY(-2px); background:rgba(255,247,238,.12)}
.vote button[aria-pressed="true"][data-v="yes"]{background:var(--juice); color:var(--ink); box-shadow:none}
.vote button[aria-pressed="true"][data-v="cap"]{background:var(--yellow); color:var(--ink); box-shadow:none} /* lemon = bad */
.tally{display:none; flex-direction:column; gap:5px}
.tally.is-shown{display:flex}
.tally__bar{display:flex; height:10px; border-radius:9px; overflow:hidden; background:var(--paper)}
.tally__bar i{display:block; height:100%; width:0; background:var(--juice); transition:width .9s var(--ease)}
.tally__txt{display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:11px; font-weight:700; color:var(--muted)}
.tally__txt em{font-style:normal; font-weight:500; color:var(--dim)}
/* clips on the vote cards: the poster (feature) and the left panel (minis) are buttons that open the clip in .ju-modal--clip */
button.vote-card__poster,.vote-card__clip{border:0; padding:0; margin:0; font:inherit; color:inherit; text-align:left; cursor:pointer; display:block; width:100%}
.vote-card__clip{position:relative; overflow:hidden; background:var(--ink-4); color:var(--paper)}
.vote-card__clip img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .4s var(--ease)}
.vote-card__clip::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,11,11,.55) 0%, transparent 34%, transparent 52%, rgba(11,11,11,.85) 100%)}
.vote-card__clip small{position:absolute; z-index:2; left:10px; top:10px; right:10px; font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.14em}
.vote-card__clip b{position:absolute; z-index:2; left:10px; bottom:6px; font-family:var(--font-display); font-weight:400; font-size:46px; line-height:.8; color:var(--juice)}
.vote-card__clip .clip-dur{right:10px; bottom:10px; left:auto}
.clip-play{position:absolute; z-index:2; left:50%; top:50%; translate:-50% -50%; width:58px; height:58px; border-radius:50%; background:var(--juice); color:var(--ink); display:grid; place-items:center; box-shadow:0 10px 30px -8px rgba(255,93,0,.8); transition:transform .2s var(--ease)}
.clip-play svg{width:46%; height:46%; margin-left:8%}
.vote-card__clip .clip-play{width:42px; height:42px}
.clip-dur{position:absolute; z-index:2; left:14px; bottom:14px; font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.08em; color:var(--paper)}
.vote-card__poster:hover .clip-play,.vote-card__clip:hover .clip-play{transform:scale(1.08)}
.vote-card__clip:hover img{transform:scale(1.05)}
.is-watched .clip-play{background:var(--paper)}
.vote-card__story{font-size:14px}
.ju-modal--clip .ju-modal__box{width:auto; align-items:center}
.ju-modal--clip .ju-modal__x{align-self:flex-end}
.ju-modal--clip .ju-modal__frame{aspect-ratio:3/4; width:min(calc(100vw - 32px), calc((100dvh - 250px) * .75), 480px)}
.ju-modal__frame video{width:100%; height:100%; display:block; object-fit:contain; background:#000}
.ju-modal--clip .ju-modal__title{max-width:min(calc(100vw - 32px), 480px); text-align:center}
.ju-modal__title a{color:var(--juice); white-space:nowrap; margin-left:6px}
.ju-modal__title a::after{content:" →"}
.ju-modal__vote{width:min(calc(100vw - 32px), 360px); display:flex; flex-direction:column; gap:8px; color:var(--paper)}
.ju-modal__vote[hidden]{display:none}
.ju-modal__vote > p{margin:0; text-align:center; font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.ju-modal__vote .vote{margin-top:0}
.cta-strip{display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:var(--gap); padding:20px 24px; border-radius:var(--r); background:rgba(255,247,238,.04); box-shadow:inset 0 0 0 1px var(--line)}
.cta-strip p{color:var(--muted)}
.cta-strip p b{color:var(--text)}

/* drop / merch */
.drop{overflow:hidden}
.drop::before{content:"GET UNLOCKED · GET UNLOCKED · GET UNLOCKED"; position:absolute; left:-2%; top:calc(var(--section-y) * .5 - .12em); white-space:nowrap; font-family:var(--font-display); font-size:clamp(110px, 13vw, 200px); line-height:.8; color:rgba(0,0,0,.07); pointer-events:none}
.drop .container{position:relative}
.drop-top{display:grid; grid-template-columns:minmax(0,1fr) 440px; gap:var(--gap); align-items:end; margin-bottom:clamp(28px, 3.4vw, 44px)}
.drop-top p{margin-top:16px; max-width:52ch; font-size:17px; font-weight:500; color:var(--on-orange-muted)}
.drop-top p b{color:var(--ink)}
.drop-feature{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:var(--gap); margin-bottom:var(--gap)}
.drop-hero{position:relative; display:block; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--frame); background:var(--yellow); min-height:480px}
.drop-hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease)}
.drop-hero:hover img{transform:scale(1.04)}
.drop-hero::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(11,11,11,.9), rgba(11,11,11,.2) 38%, transparent 55%)}
.drop-hero__info{position:absolute; z-index:2; left:24px; right:24px; bottom:22px; display:flex; align-items:flex-end; justify-content:space-between; gap:16px; color:var(--text)}
.drop-hero__info .chip{margin-bottom:12px}
.drop-hero__info .price{font-size:40px}
.drop-tiles{display:grid; gap:var(--gap); align-content:start}
.drop-tiles .collection-tile:first-child{aspect-ratio:612/388}
.drop-tiles .collection-tile:last-child{aspect-ratio:624/550}
.drop-tiles .collection-tile img{position:absolute; inset:0}
.drop-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--gap)}
.drop-foot{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:clamp(24px, 3vw, 36px); font-weight:600}

/* keyholders */
.keys{position:relative; overflow:hidden; background:
  radial-gradient(760px 520px at 74% 50%, rgba(255,93,0,.32), transparent 70%),
  linear-gradient(180deg, #000, #120a05 55%, #000)}
.keys::before{content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(420px 420px at 74% 52%, rgba(255,241,116,.12), transparent 70%); animation:glowPulse 6s ease-in-out infinite}
@keyframes glowPulse{50%{opacity:.35}}
.keys-grid{position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px, 5vw, 72px); align-items:center}
.keys .lede{margin:20px 0 26px}
.perk-list{list-style:none; padding:0; margin:0 0 28px; display:grid; grid-template-columns:1fr 1fr; gap:12px 20px}
.perk-list li{display:flex; gap:10px; align-items:flex-start; font-size:15px}
.perk-list svg{width:20px; height:20px; flex:none; color:var(--juice); margin-top:1px}
.keys-form .btn{grid-column:1/-1; height:58px; font-size:16px}
.keys-form .fine{grid-column:1/-1}
.keys-stage{position:relative; display:grid; place-items:center}
/* pass size comes from --kpass-w (pass.css); the min-height holds the layout before pass.js mounts */
.keys-stage .kpass{--kpass-w:350px; min-height:calc(var(--kpass-w) * 2.05)}
.keys-done{display:none; align-items:center; gap:14px; padding:16px 18px; border-radius:16px; background:var(--juice); color:var(--ink); font-weight:700; box-shadow:var(--frame-sm)}
.keys-done.is-shown{display:flex}
.keys-done .btn{margin-left:auto}

/* meet juice */
.juice-card{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); border-radius:28px; overflow:hidden; background:var(--ink-2); box-shadow:inset 0 0 0 1px var(--line)}
.juice-card__photo{position:relative; min-height:640px; overflow:hidden}
.juice-card__photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 22%}
.juice-card__photo::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent 62%, var(--ink-2)), linear-gradient(0deg, rgba(255,93,0,.38), transparent 42%)}
.juice-card__photo .chip{position:absolute; z-index:2; left:20px; bottom:20px}
.juice-card__body{padding:clamp(28px, 4vw, 56px); display:flex; flex-direction:column; gap:20px}
.timeline{list-style:none; margin:8px 0 0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); border-top:2px solid var(--line-2)}
.timeline li{position:relative; padding:18px 14px 0 0}
.timeline li::before{content:""; position:absolute; top:-7px; left:0; width:12px; height:12px; border-radius:50%; background:var(--juice); box-shadow:0 0 0 4px var(--ink-2), 0 0 14px var(--juice)}
.timeline b{display:block; font-family:var(--font-display); font-weight:400; font-size:30px; line-height:1; color:var(--cream)}
.timeline span{display:block; margin-top:4px; font-size:13px; color:var(--muted)}
.pull{padding:16px 20px; border-left:4px solid var(--juice); background:rgba(255,93,0,.08); border-radius:0 14px 14px 0}
.pull p{font-family:var(--font-display); font-size:clamp(28px, 2.6vw, 36px); line-height:1}
.pull cite{display:block; margin-top:6px; font-style:normal; font-family:var(--font-mono); font-size:11px; color:var(--dim)}
.moments{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px}
.moment{position:relative; border-radius:12px; overflow:hidden; aspect-ratio:4/5; background:var(--ink-4)}
.moment img{width:100%; height:100%; object-fit:cover; object-position:50% 20%; transition:transform .6s var(--ease)}
.moment:hover img{transform:scale(1.06)}
.moment::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.85), transparent 55%)}
.moment span{position:absolute; z-index:2; left:10px; right:10px; bottom:9px; font-size:12px; font-weight:700; line-height:1.25}

/* advertise strip */
.proof{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); border-radius:var(--r-lg); overflow:hidden; box-shadow:inset 0 0 0 1px var(--line); margin-bottom:var(--gap)}
.proof div{padding:20px 22px; border-right:1px solid var(--line)}
.proof div:last-child{border-right:0}
.proof b{display:block; font-family:var(--font-display); font-weight:400; font-size:clamp(42px, 4vw, 58px); line-height:.9; color:var(--cream)}
.proof span{font-size:13px; color:var(--muted)}
.tiers{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--gap)}
.tier{position:relative; display:flex; flex-direction:column; gap:12px; padding:24px 22px; border-radius:var(--r-lg); background:var(--ink-3); box-shadow:inset 0 0 0 1px var(--line); transition:transform .25s var(--ease)}
.tier:hover{transform:translateY(-4px)}
.tier__n{font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.14em; color:var(--dim)}
.tier h3{font-family:var(--font-display); font-weight:400; font-size:44px; line-height:.88; text-transform:uppercase}
.tier__from{font-family:var(--font-mono); font-size:12px; color:var(--muted)}
.tier__from b{display:block; font-family:var(--font-display); font-weight:400; font-size:42px; line-height:1; color:var(--juice); letter-spacing:.01em}
.tier p{font-size:14px; color:var(--muted)}
.tier--feat{background:var(--juice); color:var(--ink); box-shadow:var(--frame-sm)}
.tier--feat .tier__n,.tier--feat .tier__from,.tier--feat p{color:var(--on-orange-muted)}
.tier--feat .tier__from b{color:var(--ink)}
.partners{display:flex; flex-wrap:wrap; align-items:center; gap:10px 28px; margin-top:var(--gap); padding-top:24px; border-top:1px solid var(--line)}
.partners .kicker{color:var(--dim)}
.partners span:not(.kicker){font-family:var(--font-display); font-size:24px; line-height:1; color:rgba(255,247,238,.62)}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:1180px){
  /* Six header links (News, Music, Videos, Shop, Advertise, About) fit down to the 980px menu switch. */
  .site-header__in{gap:18px}
  .site-nav{gap:0}
  .site-nav a{padding:11px 8px 8px; font-size:19px}
  .site-nav a[aria-current="page"]::after{left:8px; right:calc(8px + .07em)}
  .onair{grid-template-columns:1fr}
  .guide{display:grid; grid-template-columns:repeat(2, minmax(0,1fr))}
  .guide__head{grid-column:1/-1}
  .guide__slot{border-bottom:0; border-right:1px solid var(--line)}
  .guide__slot:last-child{border-right:0}
  .rail{grid-auto-columns:calc((100% - var(--gap) * 2) / 3)}
  .tiers{grid-template-columns:repeat(2, minmax(0,1fr))}
  .nu-grid{grid-template-columns:1fr}
  .drop-top{grid-template-columns:1fr}
  .drop-top .countdown{max-width:480px}
  .juice-card{grid-template-columns:1fr 1.15fr}
  .timeline{grid-template-columns:repeat(2, minmax(0,1fr)); row-gap:24px}
  .news-row{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media (max-width:980px){
  .site-nav{display:none}
  .menu-btn{display:inline-flex}
  .mobile-menu{display:block; position:fixed; z-index:79; top:var(--hdr-t); left:0; right:0; background:rgba(11,11,11,.98); border-bottom:1px solid var(--line); padding:6px var(--gutter) 22px; transform:translateY(-110%); visibility:hidden; transition:transform .28s var(--ease), visibility .28s}
  .mobile-menu.is-open{transform:none; visibility:visible}
  .mobile-menu a{display:flex; justify-content:space-between; align-items:center; font-family:var(--font-display); font-size:40px; line-height:1; padding:14px 0 10px; border-bottom:1px solid var(--line)}
  .mobile-menu a::after{content:"→"; font-family:var(--font-body); font-size:20px; color:var(--juice)}
  .mobile-menu a[aria-current="page"]{color:var(--juice)}
  .news-grid{grid-template-columns:1fr 1fr}
  .news-grid .story-card--lead{grid-column:1/-1; grid-row:auto}
  .news-grid .story-card--lead .story-card__media{min-height:0; aspect-ratio:16/10; flex:none}
  .keys-grid{grid-template-columns:1fr}
  .drop-feature{grid-template-columns:1fr}
  .drop-hero{min-height:440px}
  .drop-grid{grid-template-columns:repeat(3, minmax(0,1fr))}
  .juice-card{grid-template-columns:1fr}
  .juice-card__photo{min-height:0; aspect-ratio:4/3}
  .juice-card__photo::after{background:linear-gradient(0deg, var(--ink-2), transparent 40%)}
  .footer-top{grid-template-columns:1fr}
  .footer-cols{grid-template-columns:repeat(2, minmax(0,1fr))}
  .proof{grid-template-columns:repeat(2, minmax(0,1fr))}
  .proof div:nth-child(2){border-right:0}
  .proof div:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media (max-width:760px){
  :root{--hdr:62px; --frame:0 0 0 3px var(--ink), 5px 5px 0 3px var(--ink)}
  body{font-size:15.5px; padding-bottom:calc(70px + env(safe-area-inset-bottom))}
  .site-header__in{gap:16px}
  .site-header__actions{gap:8px}
  .brand img{width:40px; height:40px}
  .brand__word{font-size:21px}
  .brand__tag{display:none}
  .live-pill{padding:9px 11px}
  .live-pill .long,.site-header__actions .btn .long{display:none}
  .site-header__actions .btn{padding:11px 14px; font-size:14px}
  .ticker__label{font-size:18px; padding:9px 10px 7px 14px}
  .ticker__label .long{display:none}
  .ticker__track{font-size:14px}
  .sec-head{flex-direction:column; align-items:flex-start; gap:14px}
  .hero-band__top{grid-template-columns:minmax(0,1fr) auto; gap:0; padding-bottom:26px}
  /* Phones: the seal tucks into the empty corner beside "juice." instead of disappearing */
  .hero-band__top > div:first-child{display:contents}
  .hero-band__top > div:first-child > *{grid-column:1 / -1}
  .hero-band__top h1{grid-row:2}
  .sticker{display:none}
  .hero-band__top > .sticker{display:block; grid-column:2; grid-row:2; align-self:end; width:clamp(104px, 31vw, 136px); margin:0 0 -6px}
  .hero-band__top > .sticker .sticker__ring text{font-size:16px; letter-spacing:2.4px}
  .hero-band--page .hero-band__top > .sticker{display:none}
  .hero-band h1{font-size:clamp(62px, 21vw, 92px)}
  .hero-band h1 .br-sm{display:inline}
  .hero-band h1 .br-lg{display:none}
  .play-btn{width:62px; height:62px; margin:0; left:14px; top:auto; bottom:14px}
  .play-btn svg{width:24px; height:24px; margin-left:4px}
  .player__osd{top:10px; left:10px; right:10px}
  .player__osd .chip{font-size:10px; padding:6px 8px}
  .player__body{margin-top:0; padding:16px 16px 20px}
  .guide{display:flex}
  .guide__slot{border-right:0; border-bottom:1px solid var(--line)}
  .news-grid,.news-row{grid-template-columns:1fr}
  /* Phone list: every row card is the same height. The image fills its column (absolute, so a tall 9:16 cover can't stretch
     the card), the title clamps to 3 lines and the dek fills whatever room is left, fading out at the bottom. */
  .story-card--row{flex-direction:row; height:180px}
  .story-card--row .story-card__media{width:38%; aspect-ratio:auto; flex:none; min-height:0}
  .story-card--row .story-card__media img{position:absolute; inset:0}
  /* Video covers carry a burned-in NEWS/logo/headline banner on their bottom third, unreadable at this size and under the
     play chip. Show only the photo: the image runs 158% of the box from the top, so the banner (and the logo's leaf, which
     starts ~64% down) falls below the edge. */
  .story-card--row .story-card__media:has(.story-card__reel) img{bottom:auto; height:158%; object-position:50% 0}
  .story-card--row .story-card__body{padding:14px 14px 14px 16px; gap:6px; min-width:0; min-height:0}
  .story-card--row .story-card__title{font-size:15.5px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; flex:none}
  .story-card--row .story-card__kicker{font-size:10px; letter-spacing:.09em; flex-wrap:wrap; row-gap:5px; flex:none; min-width:0}
  .story-card--row .story-card__where{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} /* one line; a partner pill drops below it */
  .story-card--row .story-card__label{flex:none}
  /* The dek takes the leftover room; its text snaps down to whole lines (round()), so a long headline leaves no half-cut line. */
  .story-card--row:not(.story-card--lead) .story-card__dek{display:block; flex:1 1 0; min-height:0; position:relative; font-size:13px; line-height:18px}
  .story-card--row:not(.story-card--lead) .story-card__dek > span{position:absolute; inset:0 0 auto; overflow:hidden; height:100%; height:round(down, 100%, 18px); -webkit-mask-image:linear-gradient(180deg, #000 calc(100% - 18px), rgba(0,0,0,.35)); mask-image:linear-gradient(180deg, #000 calc(100% - 18px), rgba(0,0,0,.35))}
  .story-card--row .story-card__meta{flex:none; padding-top:0}
  .city-chips{flex-wrap:nowrap; overflow-x:auto; margin:0 calc(var(--gutter) * -1) 22px; padding:0 var(--gutter) 4px; scrollbar-width:none}
  .city-chips a{flex:none}
  .race__row{grid-template-columns:78px 1fr 54px}
  .rail,.rail--feature{grid-auto-columns:78%; margin:0 calc(var(--gutter) * -1); padding-left:var(--gutter); padding-right:var(--gutter); scroll-padding:0 var(--gutter)}
  .rail--feature > .video-card--feature{grid-column:auto}
  .video-card--feature .video-card__title{font-size:26px}
  .shelf__arrows,.shelf__note{display:none}
  .vote-card--feature{grid-template-columns:1fr}
  .vote-card--feature .vote-card__poster{aspect-ratio:4/3; min-height:0}
  .vote-card--mini{grid-template-columns:88px minmax(0,1fr)}
  .vote-card__clip b{font-size:38px}
  .vote-card__clip .clip-dur{display:none}
  .vote-card--mini .vote-card__handle{font-size:30px}
  .cta-strip{flex-direction:column; align-items:flex-start}
  .drop-hero{min-height:380px}
  .drop-hero__info{left:16px; right:16px; bottom:16px}
  .drop-grid{display:grid; grid-auto-flow:column; grid-template-columns:none; grid-auto-columns:78%; overflow-x:auto; scroll-snap-type:x mandatory; margin:0 calc(var(--gutter) * -1); padding:4px var(--gutter) 14px; scrollbar-width:none}
  .drop-grid > *{scroll-snap-align:center}
  .countdown__grid b{font-size:42px}
  .perk-list{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .keys-stage{padding-top:32px}
  .keys-stage .kpass{--kpass-w:min(300px, 82vw)}
  .keys-done{flex-wrap:wrap}
  .keys-done .btn{margin-left:0}
  .timeline{grid-template-columns:1fr 1fr}
  .moments{grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px}
  .moment span{display:none} /* captions read as clutter at phone width; alt text carries them */
  .tiers{grid-auto-flow:column; grid-template-columns:none; grid-auto-columns:78%; overflow-x:auto; scroll-snap-type:x mandatory; margin:0 calc(var(--gutter) * -1); padding:6px var(--gutter) 14px; scrollbar-width:none}
  .tier{scroll-snap-align:center}
  .proof div{padding:16px}
  .partners span:not(.kicker){font-size:20px}
  .partners .kicker{flex-basis:100%}
  .footer-cols{grid-template-columns:1fr 1fr; gap:28px 16px}
  .inline-form{flex-direction:column}
  .inline-form .input{flex:none}
  .toggles{grid-template-columns:1fr}
  .tg:nth-child(odd){border-right:0}
  .tg:nth-last-child(-n+2){border-bottom:1px solid var(--line)}
  .tg:last-child{border-bottom:0}
  .alerts-sheet{left:0; right:0; top:auto; bottom:0; width:100%; max-height:92vh; border-radius:24px 24px 0 0; transform:translateY(100%); opacity:1; padding-bottom:env(safe-area-inset-bottom)}
  .alerts-sheet.is-open{transform:none}
  .alerts-sheet::before{content:""; display:block; width:44px; height:5px; border-radius:9px; background:var(--line-2); margin:10px auto 0}
  .alerts-sheet__head h2{font-size:28px}
  .tabbar{display:grid; grid-template-columns:repeat(5,1fr); position:fixed; z-index:90; left:0; right:0; bottom:0; padding:6px 6px calc(6px + env(safe-area-inset-bottom)); background:rgba(11,11,11,.95); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-top:1px solid var(--line)}
  .tabbar a,.tabbar button{border:0; background:none; display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 0; font-size:10.5px; font-weight:600; color:var(--muted)}
  .tabbar a[aria-current="page"]{color:var(--juice)}
  .tabbar svg{width:22px; height:22px}
  .tabbar__key{color:var(--juice)!important}
  .tabbar__key span{width:46px; height:46px; margin-top:-24px; border-radius:50%; background:var(--juice); color:var(--ink); display:grid; place-items:center; box-shadow:0 0 0 4px var(--ink), 0 8px 24px rgba(255,93,0,.7)}
}
@media (max-width:420px){
  .brand__text{display:none}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important; transition:none!important; scroll-behavior:auto!important}
  .ticker__viewport{overflow-x:auto}
}

/* ---------- data-driven additions (ju.js) ---------- */
button.video-card__thumb{width:100%; padding:0; border:0; cursor:pointer; font:inherit; color:inherit}
.video-card__thumb:focus-visible{outline:3px solid var(--juice); outline-offset:3px}
.story-card__reel{position:absolute; z-index:2; left:10px; bottom:10px}
.ju-modal{position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px))}
.ju-modal[hidden]{display:none}
.ju-modal__scrim{position:absolute; inset:0; background:rgba(5,5,5,.86); backdrop-filter:blur(6px)}
.ju-modal__box{position:relative; width:min(1100px, 100%); display:flex; flex-direction:column; gap:12px}
.ju-modal__frame{aspect-ratio:16/9; width:100%; border-radius:14px; overflow:hidden; background:#000; box-shadow:0 0 0 2px var(--juice), 0 30px 80px -30px rgba(255,93,0,.8)}
.ju-modal__frame iframe{width:100%; height:100%; border:0; display:block}
.ju-modal__title{color:var(--paper); font-weight:700; font-size:17px}
.ju-modal__x{align-self:flex-end; width:44px; height:44px; border-radius:50%; border:0; background:var(--juice); color:var(--ink); font-size:18px; font-weight:800; cursor:pointer}
.ju-modal__x:focus-visible{outline:3px solid var(--paper); outline-offset:3px}

/* Phones + installed app (Add to Home Screen): a solid header FIXED to the top edge.
   iOS 26+ draws its own soft blur under the status bar unless WebKit finds an opaque, full-width
   position:fixed bar touching the top edge (a sticky header that isn't stuck yet doesn't count).
   The body gets the header's height as padding so nothing hides under it. */
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui), (max-width:980px){
  .site-header{position:fixed; top:0; left:0; right:0; background:var(--ink); -webkit-backdrop-filter:none; backdrop-filter:none}
  body{padding-top:calc(var(--hdr-t) + 1px)}
}

/* "Paid for by <committee>" under a paid political story card, on every page that lists stories */
.hub-paid{font-size:12.5px; color:var(--muted); margin-top:-2px}
.hub-paid b{color:var(--cream); font-weight:600}

/* ---------- People we already have ----------
   <html data-member>   signed in (AccountLink sets it; layout.tsx restores it before the page paints)
   <html data-on-list>  gave an email on this browser already (site.js, after a sign-up form succeeds)
   Neither is asked for an email again: every [data-ask="email"] block hides. A [data-for] line can take its place. */
html[data-member] [data-ask="email"], html[data-on-list] [data-ask="email"]{display:none !important}
/* Members have the Alerts button in the header, so the repeat "turn on alerts" prompts step back for them:
   [data-ask="alerts"] buttons hide and the city alerts card is just its switch. Prompts tied to one thing
   (ping me at this drop, remind me for this show) stay for everyone. */
html[data-member] [data-ask="alerts"]{display:none !important}
html[data-member] .hub-alert{padding:8px; gap:6px; border-radius:20px}
html[data-member] .hub-alert .hub-alert__top, html[data-member] .hub-alert > p, html[data-member] .hub-alert .hub-alert__topics{display:none}
html[data-member] [data-ask="join"]{display:none !important} /* the free-account form, while the page is still finding out who you are */
[data-for]{display:none}
html[data-member] [data-for="member"]{display:revert}
html[data-on-list]:not([data-member]) [data-for="on-list"]{display:revert}

/* ---------- Prices wait for an email (components/PriceGate.tsx) ----------
   Package prices carry [data-price]. Until <html> has data-member, data-on-list or data-prices they blur and the
   [data-price-gate] email row shows; layout.tsx sets those flags before paint, so returning visitors never see the ask. */
[data-price-gate]{display:none}
html:not([data-member]):not([data-on-list]):not([data-prices]) [data-price-gate]{display:block}
html:not([data-member]):not([data-on-list]):not([data-prices]) [data-price]{filter:blur(9px); user-select:none}
.price-gate{position:relative; max-width:640px; margin:0 0 var(--gap); padding:16px 18px; border-radius:var(--r); background:rgba(255,247,238,.04); box-shadow:inset 0 0 0 1px var(--line-2)}
.price-gate__q{display:block; margin:0 0 12px; color:var(--muted); font-size:15px}
.price-gate__q b{color:var(--text)}
.price-gate__row{display:flex; gap:10px; flex-wrap:wrap}
.price-gate__row .input{flex:1 1 220px; min-width:0; height:48px}
.price-gate__row .btn{flex:0 0 auto}
.price-gate__err{margin:10px 0 0; color:var(--cream); font-size:14px}