/* ============================================================================
   PREVIOUSLY — Live TV mockup · 2026-09-28
   Design language v1.0 (tokens.css) — Noir #0a0a0b, Bone #f4efe6,
   Signal Red #ec4634. No gold anywhere. Playfair Display / Inter.
   Borderless editorial rows. Theater-mode player concept.
   ============================================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--pv-noir);color:var(--pv-ivory);
  font-family:var(--pv-sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  min-height:100vh;overflow-x:hidden;
}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:left}
a{color:inherit}
::selection{background:var(--pv-red);color:var(--pv-on-red)}

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

/* ---- live dot ---- */
.livedot{
  width:8px;height:8px;border-radius:50%;background:var(--pv-live);flex:none;
  box-shadow:0 0 12px var(--pv-red-glow-lg);
  animation:pulse 2.2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.82)}}

/* ============================================================================
   CHROME — sticky: brandbar + nav, then the uniform search below it
   ============================================================================ */
.chrome{position:sticky;top:0;z-index:var(--pv-z-nav);
  background:var(--pv-glass);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--pv-rule);
}
.brandbar{
  display:flex;align-items:center;gap:14px;
  height:64px;max-width:var(--pv-content-max);margin:0 auto;
  padding:0 var(--pv-gutter);
}
.wm{
  font-family:var(--pv-serif);font-weight:800;font-size:22px;letter-spacing:-.02em;
  color:var(--pv-ivory);text-decoration:none;display:flex;align-items:center;gap:9px;
  min-height:var(--pv-target-min);
}
.wm .glyph{color:var(--pv-red);letter-spacing:-.14em;font-weight:800}
.brand-sep{width:1px;height:22px;background:var(--pv-rule)}
.seclabel{
  font-size:11px;font-weight:800;letter-spacing:var(--pv-track-xl);
  text-transform:uppercase;color:var(--pv-red);
  display:flex;align-items:center;gap:8px;white-space:nowrap;
}
.brand-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
.signin{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--pv-target-min);padding:0 22px;border-radius:var(--pv-r-pill);
  border:1px solid rgba(244,239,230,.28);color:var(--pv-ivory);
  font-size:13.5px;font-weight:700;letter-spacing:.06em;text-decoration:none;
  transition:border-color .18s ease,background .18s ease;
}
@media(hover:hover){.signin:hover{border-color:var(--pv-red);background:rgba(236,70,52,.08)}}

/* ---- hamburger (phone) ---- */
.burger{
  display:none;width:var(--pv-target-min);height:var(--pv-target-min);
  align-items:center;justify-content:center;border-radius:12px;
}
.burger svg{width:22px;height:22px;stroke:var(--pv-ivory);fill:none;stroke-width:2;stroke-linecap:round}
@media(hover:hover){.burger:hover{background:rgba(244,239,230,.06)}}

/* ---- primary nav (desktop bar) ---- */
.pv-nav{max-width:var(--pv-content-max);margin:0 auto;padding:0 var(--pv-gutter)}
.pv-nav ul{
  display:flex;gap:4px;list-style:none;overflow-x:auto;scrollbar-width:none;
}
.pv-nav ul::-webkit-scrollbar{display:none}
.pv-nav a{
  position:relative;display:inline-flex;align-items:center;gap:8px;
  padding:14px 14px;min-height:var(--pv-target-min);
  color:var(--pv-ivory-dim);font-size:12px;font-weight:700;
  letter-spacing:var(--pv-track-md);text-transform:uppercase;text-decoration:none;
  white-space:nowrap;transition:color .18s ease;
}
.pv-nav a .nav-ic{display:inline-flex}
.pv-nav a .nav-ic svg{width:16px;height:16px}
.pv-nav a::after{
  content:"";position:absolute;left:14px;right:14px;bottom:6px;height:2px;
  background:var(--pv-red);border-radius:2px;
  transform:scaleX(0);transform-origin:left;transition:transform .22s var(--pv-ease);
}
@media(hover:hover){.pv-nav a:hover{color:var(--pv-ivory)}}
.pv-nav a[aria-current="page"]{color:var(--pv-ivory)}
.pv-nav a[aria-current="page"]::after{transform:scaleX(1)}
.pv-nav .nlive-dot{width:7px;height:7px;border-radius:50%;background:var(--pv-live);
  box-shadow:0 0 10px var(--pv-red-glow-lg);animation:pulse 2.2s ease-in-out infinite}

/* ---- phone menu panel ---- */
.menu-panel{
  display:none;border-top:1px solid var(--pv-rule);
  background:var(--pv-noir-2);max-height:70vh;overflow-y:auto;
}
.menu-panel.open{display:block}
.menu-panel ul{list-style:none;padding:8px}
.menu-panel a{
  display:flex;align-items:center;gap:14px;
  min-height:52px;padding:8px 16px;border-radius:12px;
  font-size:15px;font-weight:600;color:var(--pv-ivory);text-decoration:none;
}
.menu-panel a .nav-ic{display:inline-flex;color:var(--pv-ivory-dim)}
.menu-panel a .nav-ic svg{width:20px;height:20px}
.menu-panel a .chev{margin-left:auto;color:var(--pv-ivory-faint);font-size:18px}
.menu-panel a[aria-current="page"]{background:rgba(236,70,52,.1);color:var(--pv-ivory)}
@media(hover:hover){.menu-panel a:hover{background:rgba(244,239,230,.05)}}

/* ---- uniform search placement (shared component styles in search.css) ---- */
.search-wrap{
  position:sticky;z-index:var(--pv-z-search);
  top:calc(116px + 10px);
  max-width:var(--pv-content-max);margin:0 auto;
  padding:10px var(--pv-gutter) 6px;
  pointer-events:none;
  /* Solid backdrop so content scrolling beneath the stuck bar is cleanly
     occluded instead of showing through the glass pill (QA: read as
     "overlap"). Invisible at rest — matches the page background. */
  background:var(--pv-noir);
}
.search-wrap .pv-search{pointer-events:auto;position:static}
/* .pv-search is sticky by default in the shared component; the wrap is the
   sticky layer here because this page's chrome (brand bar + nav row) is
   taller than the --pv-nav-h token the component assumes. */

/* ============================================================================
   HERO — full-bleed, borderless. One h1. 30s rotation, centered art,
   pause on hover, glow sweep ambient only.
   ============================================================================ */
.hero{
  position:relative;overflow:hidden;
  /* full-bleed breakout: the page column is capped, the hero runs edge to edge */
  width:100vw;margin-left:calc(50% - 50vw);
  min-height:min(94vh,860px);
  display:flex;align-items:flex-end;
  isolation:isolate;
}
.hero-slides{position:absolute;inset:0;z-index:-3}
.hero-slide{
  position:absolute;inset:0;opacity:0;
  background-size:cover;background-position:center;
  transition:opacity 1.6s ease;
}
.hero-slide.is-on{opacity:1}
.hero-slide.s-news{background-image:url("images/heroes/hero-news.jpg")}
.hero-slide.s-court{background-image:url("images/heroes/hero-courtroom.jpg")}
.hero-slide.s-lofi{background-image:url("images/heroes/hero-lofi.jpg")}
.hero-scrim{position:absolute;inset:0;z-index:-2;
  background:
    linear-gradient(180deg,rgba(10,10,11,.62) 0%,rgba(10,10,11,.12) 32%,rgba(10,10,11,.06) 55%,rgba(10,10,11,.94) 100%),
    linear-gradient(100deg,rgba(10,10,11,.72) 0%,rgba(10,10,11,.18) 58%,rgba(10,10,11,.34) 100%);
}
/* ambient glow sweep — decorative only, never moves content */
.hero-sweep{position:absolute;inset:-20%;z-index:-1;pointer-events:none;opacity:.5;
  background:linear-gradient(105deg,transparent 42%,rgba(236,70,52,.10) 50%,transparent 58%);
  animation:sweep 9s var(--pv-ease) infinite;
}
@keyframes sweep{0%{transform:translateX(-34%)}55%,100%{transform:translateX(34%)}}
.hero-inner{
  position:relative;z-index:1;width:100%;max-width:var(--pv-content-max);
  margin:0 auto;padding:0 var(--pv-gutter) 84px;
}
.hero-kicker{
  display:flex;align-items:center;gap:10px;
  font-size:12px;font-weight:800;letter-spacing:var(--pv-track-xl);
  text-transform:uppercase;color:var(--pv-red);margin-bottom:20px;
}
/* One confident title — Playfair, no ghosts, no duplicate kickers */
.hero h1{
  font-family:var(--pv-serif);font-weight:700;
  font-size:clamp(76px,11vw,168px);line-height:.94;letter-spacing:var(--pv-track-tight);
  color:var(--pv-ivory);text-wrap:balance;
  text-shadow:0 4px 44px rgba(0,0,0,.7);
}
.hero h1 .rdot{color:var(--pv-red)}
.hero-lede{
  margin-top:20px;max-width:560px;
  font-size:var(--pv-lede);line-height:var(--pv-leading-body);color:var(--pv-ivory-dim);
  text-shadow:0 2px 18px rgba(0,0,0,.8);
}
/* rotating Now Playing feature — the hero's clickable heart */
.hero-feature{
  margin-top:30px;display:inline-flex;align-items:center;gap:18px;
  max-width:100%;padding:14px 22px 14px 14px;border-radius:20px;
  background:rgba(12,12,14,.55);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(244,239,230,.14);
  text-decoration:none;transition:border-color .2s ease,transform .2s var(--pv-ease);
}
@media(hover:hover){.hero-feature:hover{border-color:rgba(236,70,52,.55);transform:translateY(-2px)}}
.hero-feature .hf-art{
  width:120px;aspect-ratio:16/9;border-radius:12px;overflow:hidden;flex:none;
  background:#141416;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--pv-shadow-card);
}
.hero-feature .hf-art img{width:100%;height:100%;object-fit:contain;padding:12%}
.hero-feature .hf-art.light{background:var(--pv-ivory)}
.hero-feature .hf-tx{min-width:0}
.hero-feature .hf-k{
  display:block;font-size:10px;font-weight:800;letter-spacing:var(--pv-track-lg);
  text-transform:uppercase;color:var(--pv-red);margin-bottom:5px;
}
.hero-feature .hf-name{
  display:block;font-family:var(--pv-serif);font-weight:700;font-size:26px;
  letter-spacing:-.01em;color:var(--pv-ivory);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:44vw;
}
.hero-feature .hf-sub{display:block;font-size:13px;color:var(--pv-ivory-dim);margin-top:3px}
.hero-feature .hf-play{
  display:inline-flex;align-items:center;gap:9px;flex:none;
  min-height:var(--pv-target-min);padding:0 24px;border-radius:var(--pv-r-pill);
  background:var(--pv-red);color:var(--pv-on-red);
  font-size:14px;font-weight:800;letter-spacing:.04em;
  box-shadow:var(--pv-shadow-btn);
}
.hero-feature .hf-play svg{width:14px;height:14px;fill:var(--pv-on-red)}
.hero-pause{
  position:absolute;right:var(--pv-gutter);top:26px;z-index:2;
  width:var(--pv-target-min);height:var(--pv-target-min);border-radius:50%;
  border:1px solid rgba(244,239,230,.25);background:rgba(12,12,14,.55);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:center;
  transition:border-color .18s ease;
}
.hero-pause svg{width:15px;height:15px;fill:var(--pv-ivory)}
@media(hover:hover){.hero-pause:hover{border-color:var(--pv-red)}}

/* ============================================================================
   PAGE BODY
   ============================================================================ */
main{max-width:var(--pv-content-max);margin:0 auto;padding:4px var(--pv-gutter) 110px}
/* scroll-margin-top clears the stuck search bar footprint (218px desktop:
   126 top + 10 pad + 48 bar + 28 meta + 6 pad) + breathing room, so anchor
   jumps (#theater, #ch-*) never land headings under the bar. */
.block{margin-top:64px;scroll-margin-top:240px}
.block-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px}
.kicker2{
  font-size:11px;font-weight:800;letter-spacing:var(--pv-track-xl);
  text-transform:uppercase;color:var(--pv-red);margin-bottom:8px;
}
.block-head h2{
  font-family:var(--pv-serif);font-weight:600;
  font-size:var(--pv-title);letter-spacing:-.01em;line-height:1.05;color:var(--pv-ivory);
}
.block-head .count{font-size:13px;color:var(--pv-ivory-dim);font-weight:600;padding-bottom:6px;white-space:nowrap}

/* ============================================================================
   THEATER — the player concept. Large stage, honest click-to-play.
   ============================================================================ */
.theater{margin-top:56px}
.stage{
  position:relative;aspect-ratio:16/9;max-height:72vh;width:100%;
  border-radius:20px;overflow:hidden;background:#000;
  box-shadow:var(--pv-shadow-card),0 0 90px rgba(236,70,52,.07);
}
.stage-logo{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:9%;
}
.stage-logo img{max-width:44%;max-height:44%;object-fit:contain;
  filter:drop-shadow(0 10px 40px rgba(0,0,0,.8))}
.stage-veil{position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 8%,rgba(0,0,0,.1) 0%,rgba(0,0,0,.72) 78%)}
.stage-core{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:18px;text-align:center;padding:24px;
}
.stage-play{
  width:96px;height:96px;border-radius:50%;background:var(--pv-red);
  display:flex;align-items:center;justify-content:center;flex:none;
  box-shadow:var(--pv-shadow-btn-lg);
  transition:transform .2s var(--pv-ease);
}
@media(hover:hover){.stage-play:hover{transform:scale(1.06)}}
.stage-play:active{transform:scale(.94)}
.stage-play svg{width:34px;height:34px;fill:var(--pv-on-red);margin-left:4px}
.stage-name{font-family:var(--pv-serif);font-weight:700;font-size:clamp(24px,3.4vw,40px);color:var(--pv-ivory)}
.stage-sub{font-size:14px;color:var(--pv-ivory-dim);max-width:480px;line-height:1.6}
/* honest states */
.stage-note{
  position:absolute;inset:0;display:flex;flex-direction:column;gap:14px;
  align-items:center;justify-content:center;text-align:center;padding:32px;
  background:rgba(6,6,7,.86);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.stage-note[hidden]{display:none}
.stage-note .sn-k{
  font-size:10px;font-weight:800;letter-spacing:var(--pv-track-lg);
  text-transform:uppercase;color:var(--pv-red);
}
.stage-note p{max-width:460px;font-size:15px;line-height:1.7;color:var(--pv-ivory-dim)}
.stage-note p b{color:var(--pv-ivory)}
.stage-note .sn-btn{
  margin-top:6px;display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--pv-target-min);padding:0 26px;border-radius:var(--pv-r-pill);
  background:var(--pv-red);color:var(--pv-on-red);font-weight:800;font-size:14px;
}
/* skeleton shimmer while the concept "loads" */
.stage-loading{position:absolute;inset:0;background:#0b0b0d}
.stage-loading[hidden]{display:none}
.stage-loading::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 30%,rgba(244,239,230,.06) 50%,transparent 70%);
  animation:shimmer 1.1s linear infinite;
}
@keyframes shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
/* badges */
.badge{
  display:inline-flex;align-items:center;gap:7px;
  min-height:30px;padding:0 14px;border-radius:var(--pv-r-pill);
  font-size:10.5px;font-weight:800;letter-spacing:var(--pv-track-md);text-transform:uppercase;
}
.badge.live{background:var(--pv-red);color:var(--pv-on-red)}
.badge.live i{width:7px;height:7px;border-radius:50%;background:var(--pv-on-red);animation:pulse 1.8s infinite}
.badge.off{background:rgba(244,239,230,.08);color:var(--pv-ivory-dim);border:1px solid var(--pv-rule)}
/* now-playing bar under the stage */
.nowbar{
  margin-top:18px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;
}
.nowbar .nb-art{
  width:104px;aspect-ratio:16/9;border-radius:12px;flex:none;overflow:hidden;
  background:#141416;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--pv-shadow-card);
}
.nowbar .nb-art.light{background:var(--pv-ivory)}
.nowbar .nb-art img{width:100%;height:100%;object-fit:contain;padding:12%}
.nowbar .nb-tx{flex:1;min-width:200px}
.nowbar .nb-k{font-size:10.5px;font-weight:800;letter-spacing:var(--pv-track-lg);text-transform:uppercase;color:var(--pv-red)}
.nowbar .nb-name{font-family:var(--pv-serif);font-size:24px;font-weight:700;margin:4px 0 6px}
.nowbar .nb-actions{display:flex;gap:10px;align-items:center}
.nb-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--pv-target-min);padding:0 22px;border-radius:var(--pv-r-pill);
  border:1px solid rgba(244,239,230,.28);font-size:13.5px;font-weight:700;
  transition:border-color .18s ease,background .18s ease,color .18s ease;
}
@media(hover:hover){.nb-btn:hover{border-color:var(--pv-red)}}
.nb-btn.on{background:var(--pv-red);border-color:var(--pv-red);color:var(--pv-on-red)}
.nb-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
.nb-btn svg.fill{fill:currentColor;stroke:none}
.nb-btn.on svg{fill:var(--pv-on-red);stroke:var(--pv-on-red)}

/* ============================================================================
   CHANNEL LANES — borderless editorial rows
   ============================================================================ */
.rail{
  display:grid;grid-template-columns:repeat(5,1fr);gap:26px 22px;
}
.chtile{scroll-margin-top:240px;border-radius:18px}
.chtile:target .chtile-art{box-shadow:0 0 0 3px var(--pv-red-glow),var(--pv-shadow-card)}
.chtile-art{
  position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;
  background:#141416;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--pv-shadow-card);
  transition:transform .22s var(--pv-ease),box-shadow .22s ease;
}
.chtile-art.light{background:var(--pv-ivory)}
.chtile-art img{width:100%;height:100%;object-fit:contain;padding:13% 14%}
@media(hover:hover){
  .chtile:hover .chtile-art{transform:translateY(-4px);
    box-shadow:0 24px 54px rgba(0,0,0,.6),0 0 0 1px rgba(236,70,52,.22)}
}
.chtile:active .chtile-art{transform:scale(.97)}
.chtile-badge{position:absolute;top:10px;left:10px;z-index:2}
.chtile-meta{padding:13px 4px 0}
.chtile-name{display:block;font-size:15px;font-weight:650;color:var(--pv-ivory);line-height:1.35}
.chtile-genre{display:block;font-size:12.5px;color:var(--pv-ivory-dim);margin-top:3px}
/* search filtering */
.chtile[hidden]{display:none}
.block.is-empty{display:none}
.search-empty{
  margin-top:40px;padding:44px 30px;text-align:center;border-radius:20px;
  background:rgba(236,70,52,.06);border:1px solid rgba(236,70,52,.25);
}
.search-empty[hidden]{display:none}
.search-empty p{color:var(--pv-ivory-dim);font-size:15px;line-height:1.7}
.search-empty b{color:var(--pv-ivory)}

/* honesty note */
.note{
  margin-top:64px;padding:22px 26px;border-radius:18px;
  background:rgba(236,70,52,.06);border:1px solid rgba(236,70,52,.22);
  font-size:14px;line-height:1.75;color:var(--pv-ivory-dim);
}
.note b{color:var(--pv-red);font-weight:800}
.note .fineprint{display:block;margin-top:10px;font-size:12.5px;color:var(--pv-ivory-faint)}

/* reveal */
.fx .rv{opacity:0;transform:translateY(24px);
  transition:opacity .7s ease,transform .7s var(--pv-ease)}
.fx .rv.in{opacity:1;transform:none}

/* toast */
.toast{
  position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);
  z-index:var(--pv-z-toast);padding:14px 24px;border-radius:var(--pv-r-pill);
  background:var(--pv-noir-2);border:1px solid rgba(236,70,52,.4);
  color:var(--pv-ivory);font-size:14px;font-weight:600;opacity:0;pointer-events:none;
  transition:opacity .25s ease,transform .25s var(--pv-ease);
  box-shadow:var(--pv-shadow-pop);
  max-width:calc(100vw - 48px);text-align:center;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ============================================================================
   FOOTER (shared component contract — static markup, no-JS safe)
   ============================================================================ */
footer{
  border-top:1px solid var(--pv-rule);background:var(--pv-noir-2);
}
.pv-footer__inner{max-width:var(--pv-content-max);margin:0 auto;padding:56px var(--pv-gutter) 32px}
.pv-footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.pv-footer__brand .wm{font-size:24px}
.pv-footer__brand p{margin-top:14px;font-size:14.5px;line-height:1.7;color:var(--pv-ivory-dim);max-width:300px}
.pv-footer__col h3{
  font-size:11px;font-weight:800;letter-spacing:var(--pv-track-xl);
  text-transform:uppercase;color:var(--pv-ivory-faint);margin-bottom:16px;
}
.pv-footer__col ul{list-style:none}
.pv-footer__col a{
  display:inline-flex;align-items:center;min-height:var(--pv-target-min);
  color:var(--pv-ivory-dim);font-size:14px;text-decoration:none;
  transition:color .16s ease;
}
@media(hover:hover){.pv-footer__col a:hover{color:var(--pv-ivory);text-decoration:underline;
  text-decoration-color:var(--pv-red);text-underline-offset:5px}}
.pv-footer__legal{
  margin-top:48px;padding-top:24px;border-top:1px solid var(--pv-rule);
  display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  font-size:13px;color:var(--pv-ivory-faint);
}
.pv-footer__legal a{color:var(--pv-ivory-dim);text-decoration:none;
  display:inline-flex;align-items:center;min-height:var(--pv-target-min)}
@media(hover:hover){.pv-footer__legal a:hover{color:var(--pv-ivory)}}
.pv-footer__legal .sep{opacity:.5}

/* ============================================================================
   PHONE
   ============================================================================ */
@media(max-width:1023.98px){
  .brandbar{height:56px;padding:0 var(--pv-gutter-sm)}
  .wm{font-size:19px}
  .burger{display:inline-flex}
  .pv-nav{display:none}
  .search-wrap{top:calc(56px + 10px);padding:10px var(--pv-gutter-sm) 6px}
  .hero{min-height:92svh}
  .hero-inner{padding:0 var(--pv-gutter-sm) 72px}
  .hero h1{font-size:clamp(72px,23vw,120px)}
  .hero-lede{font-size:16px}
  .hero-feature{width:100%;gap:14px;padding:12px 16px 12px 12px}
  .hero-feature .hf-art{width:96px}
  .hero-feature .hf-name{font-size:21px;max-width:38vw}
  .hero-feature .hf-play{padding:0 18px}
  .hero-pause{right:var(--pv-gutter-sm);top:18px}
  main{padding:4px var(--pv-gutter-sm) 96px}
  /* phone stuck-bar footprint: 66 top + 10 pad + 52 bar + 28 meta + 6 pad = 162px */
  .block{margin-top:52px;scroll-margin-top:184px}
  .chtile{scroll-margin-top:184px}
  /* lanes become contained snap rails — the page never scrolls sideways */
  .rail{
    display:grid;grid-auto-flow:column;grid-auto-columns:212px;gap:16px;
    overflow-x:auto;margin:0 calc(-1 * var(--pv-gutter-sm));
    padding:4px var(--pv-gutter-sm) 16px;
    scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .rail::-webkit-scrollbar{display:none}
  .chtile{scroll-snap-align:start}
  .nowbar .nb-actions{width:100%}
  .pv-footer__grid{grid-template-columns:1fr 1fr;gap:32px}
  .pv-footer__brand{grid-column:1/-1}
}

/* reduced motion: rotation stops, sweeps stop, reveals show */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .fx .rv{opacity:1;transform:none}
  .hero-slide{transition:none}
  .livedot,.badge.live i,.pv-nav .nlive-dot{animation:none}
}