/* ════════════════════════════════════════════════════════════════
  Bearcast Media Website
  Developed & Designed by Cam Garrison
  GitHub: @notChewy1324 | Website: camgarrison.com
  Copyright © 2026 Cam Garrison. All rights reserved.
  This code is proprietary and integrated with Sanity CMS.
════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════
   PAGE: HOME (index.html)
═══════════════════════════════════════════════════ */
/* ─── RESET & BASE ─────────────────────────────────────────── */
*, *::before, *::after{ box-sizing: border-box; margin: 0; padding: 0; }
html{ scroll-behavior: smooth; font-size: 16px; }
body[data-page="home"]{
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  color: var(--fg);
  overflow-x: hidden;
  transition: background 0.5s ease, color 0.5s ease;
  min-height: 100vh;
}

/* ─── THEME VARIABLES ──────────────────────────────────────── */
body[data-page="home"]{
  --red: #D0021B;
  --red-bright: #FF1F3D;
  --red-muted: #8B0010;
  --gold: #C9A84C;
  --gold-light: #F0C97A;
  --white: #FFFFFF;
  --off-white: #F5F4F0;
  --near-black: #0A0A0B;
  --easing: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

html[data-theme="dark"] body[data-page="home"]{
  --bg: #0A0A0B;
  --bg-2: #111114;
  --bg-3: #1A1A1E;
  --bg-glass: rgba(16,16,20,0.8);
  --fg: #F0EDE8;
  --fg-2: #A8A4A0;
  --fg-3: #5A5754;
  --border: rgba(255,255,255,0.08);
  --border-bright: rgba(255,255,255,0.15);
  --shadow: rgba(0,0,0,0.6);
  --glow-red: rgba(208,2,27,0.3);
  --card-bg: rgba(22,22,28,0.9);
  --nav-bg: rgba(10,10,11,0.92);
}

html[data-theme="light"] body[data-page="home"]{
  --bg: #F7F5F2;
  --bg-2: #EDEBE7;
  --bg-3: #E2DFD9;
  --bg-glass: rgba(247,245,242,0.85);
  --fg: #0A0A0B;
  --fg-2: #444240;
  --fg-3: #888580;
  --border: rgba(0,0,0,0.08);
  --border-bright: rgba(0,0,0,0.15);
  --shadow: rgba(0,0,0,0.12);
  --glow-red: rgba(208,2,27,0.15);
  --card-bg: rgba(255,253,250,0.95);
  --nav-bg: rgba(247,245,242,0.92);
}

/* ─── RAINBOW ACCENT BAR ───────────────────────────────────── */
body[data-page="home"] .rainbow-bar{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    #FF3B3B 0%, #FF6B35 12%, #FFD700 25%,
    #51CF66 37%, #339AF0 50%, #845EF7 62%,
    #FF3B3B 75%, #FF6B35 87%, #FFD700 100%);
  background-size: 200% 100%;
  animation: rainbowShift 6s linear infinite;
  z-index: 1000;
}
@keyframes rainbowShift {
  0% { background-position: 0% 0%; }
  100% { background-position: 200% 0%; }
}

/* ─── NAVIGATION ───────────────────────────────────────────── */
body[data-page="home"] nav{
  position: fixed;
  top: 3px; left: 0; right: 0;
  height: 62px;
  background: var(--nav-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  z-index: 999;
  transition: background 0.5s ease, border-color 0.5s ease;
}

body[data-page="home"] .nav-logo{
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size: 1.3rem;
  color: var(--fg);
  letter-spacing: -0.02em;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
body[data-page="home"] .nav-logo .logo-dot{
  width: 8px; height: 8px;
  background: var(--red-bright);
  border-radius: 50%;
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.7); }
}

body[data-page="home"] .nav-links{
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
}
body[data-page="home"] .nav-links a{
  color: var(--fg-2);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 6px 12px;
  border-radius: 20px;
  transition: color 0.2s, background 0.2s;
}
body[data-page="home"] .nav-links a:hover{
  color: var(--fg);
  background: var(--border);
}

body[data-page="home"] .nav-right{
  display: flex;
  align-items: center;
  gap: 16px;
}

body[data-page="home"] .theme-toggle{
  background: var(--border);
  border: 1px solid var(--border-bright);
  border-radius: 20px;
  padding: 6px 14px;
  cursor: pointer;
  color: var(--fg-2);
  font-size: 0.78rem;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: all 0.2s;
}
body[data-page="home"] .theme-toggle:hover{
  color: var(--fg);
  background: var(--border-bright);
}

body[data-page="home"] .nav-listen-btn{
  background: var(--red);
  color: white;
  border: none;
  border-radius: 20px;
  padding: 7px 18px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}
body[data-page="home"] .nav-listen-btn:hover{
  background: var(--red-bright);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px var(--glow-red);
}
body[data-page="home"] .nav-live-dot{
  width: 6px; height: 6px;
  background: #FF4444;
  border-radius: 50%;
  animation: pulse-live 1.5s ease-in-out infinite;
}
@keyframes pulse-live {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,68,68,0.5); }
  50% { box-shadow: 0 0 0 4px rgba(255,68,68,0); }
}

/* ─── MOBILE MENU TOGGLE ───────────────────────────────────── */
body[data-page="home"] .burger{
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
}
body[data-page="home"] .burger span{
  display: block;
  width: 22px; height: 2px;
  background: var(--fg);
  border-radius: 2px;
  transition: all 0.3s;
}

/* ─── HERO SECTION ─────────────────────────────────────────── */
body[data-page="home"] #hero{
  min-height: 100vh;
  padding-top: 65px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

body[data-page="home"] .hero-ambient{
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
body[data-page="home"] .ambient-orb{
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.12;
  animation: float-orb 18s ease-in-out infinite;
}
body[data-page="home"] .orb-1{
  width: 600px; height: 600px;
  background: radial-gradient(circle, #D0021B, transparent);
  top: -10%; left: -10%;
  animation-delay: 0s;
}
body[data-page="home"] .orb-2{
  width: 400px; height: 400px;
  background: radial-gradient(circle, #C9A84C, transparent);
  top: 40%; right: -5%;
  animation-delay: -6s;
  opacity: 0.08;
}
body[data-page="home"] .orb-3{
  width: 300px; height: 300px;
  background: radial-gradient(circle, #339AF0, transparent);
  bottom: 10%; left: 30%;
  animation-delay: -12s;
  opacity: 0.06;
}
@keyframes float-orb {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -20px) scale(1.05); }
  66% { transform: translate(-20px, 30px) scale(0.95); }
}

/* Fine grain overlay */
body[data-page="home"] .hero-ambient::after{
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  opacity: 0.4;
  pointer-events: none;
}

body[data-page="home"] .hero-content{
  text-align: center;
  z-index: 2;
  padding: 0 24px;
  animation: heroReveal 1.2s var(--easing) both;
}
@keyframes heroReveal {
  0% { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}

body[data-page="home"] .hero-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--border);
  border: 1px solid var(--border-bright);
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-2);
  margin-bottom: 28px;
  animation: heroReveal 1.2s var(--easing) 0.1s both;
}
body[data-page="home"] .eyebrow-year{
  color: var(--gold);
  font-family: 'DM Mono', monospace;
}

body[data-page="home"] .hero-title{
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size: clamp(3.5rem, 9vw, 8rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--fg);
  margin-bottom: 12px;
  animation: heroReveal 1.2s var(--easing) 0.2s both;
}
body[data-page="home"] .hero-title .title-accent{
  color: var(--red-bright);
  font-style: italic;
}

body[data-page="home"] .hero-tagline{
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  color: var(--fg-2);
  font-weight: 300;
  letter-spacing: 0.02em;
  margin-bottom: 52px;
  animation: heroReveal 1.2s var(--easing) 0.3s both;
}

/* ─── LIVE PLAYER ──────────────────────────────────────────── */
body[data-page="home"] .live-player-container{
  animation: heroReveal 1.2s var(--easing) 0.4s both;
  margin-bottom: 60px;
}

body[data-page="home"] .live-player{
  background: var(--card-bg);
  border: 1px solid var(--border-bright);
  border-radius: 28px;
  padding: 28px 36px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 8px 60px var(--shadow), 0 0 0 1px var(--border);
  display: flex;
  align-items: center;
  gap: 28px;
  min-width: 420px;
  max-width: 560px;
  width: 100%;
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}
body[data-page="home"] .live-player:hover{
  box-shadow: 0 12px 80px var(--shadow), 0 0 40px var(--glow-red);
}
body[data-page="home"] .live-player.playing{
  box-shadow: 0 8px 60px var(--shadow), 0 0 60px var(--glow-red);
}

body[data-page="home"] .live-player::before{
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(208,2,27,0.5), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}
body[data-page="home"] .live-player.playing::before{ opacity: 1; }

body[data-page="home"] .play-btn{
  width: 64px; height: 64px;
  background: var(--red);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.25s var(--easing-spring);
  box-shadow: 0 4px 20px rgba(208,2,27,0.4);
  position: relative;
}
body[data-page="home"] .play-btn:hover{
  background: var(--red-bright);
  transform: scale(1.08);
  box-shadow: 0 6px 30px rgba(208,2,27,0.6);
}
body[data-page="home"] .play-btn:active{ transform: scale(0.95); }
body[data-page="home"] .play-btn svg{ width: 24px; height: 24px; fill: white; flex-shrink: 0; }
body[data-page="home"] .play-btn .pause-icon{ display: none; }
body[data-page="home"] .play-btn.playing .play-icon{ display: none; }
body[data-page="home"] .play-btn.playing .pause-icon{ display: block; }

/* Ripple on play */
body[data-page="home"] .play-btn::after{
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--red);
  opacity: 0;
  animation: none;
}
body[data-page="home"] .play-btn.playing::after{
  animation: play-ripple 2s ease-out infinite;
}
@keyframes play-ripple {
  0% { inset: -4px; opacity: 0.5; }
  100% { inset: -20px; opacity: 0; }
}

body[data-page="home"] .player-info{
  flex: 1;
  min-width: 0;
}
body[data-page="home"] .player-status{
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
body[data-page="home"] .live-badge{
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(208,2,27,0.15);
  border: 1px solid rgba(208,2,27,0.3);
  border-radius: 10px;
  padding: 2px 8px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red-bright);
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
body[data-page="home"] .live-badge[data-state="connecting"],
body[data-page="home"] .live-badge[data-state="buffering"]{
  background: rgba(255,215,0,0.15);
  border-color: rgba(255,215,0,0.4);
  color: #FFD700;
}
body[data-page="home"] .live-badge[data-state="connecting"] .live-badge-dot,
body[data-page="home"] .live-badge[data-state="buffering"] .live-badge-dot{
  background: #FFD700;
}
body[data-page="home"] .live-badge[data-state="error"]{
  background: rgba(120,120,120,0.15);
  border-color: rgba(120,120,120,0.4);
  color: #A8A4A0;
}
body[data-page="home"] .live-badge[data-state="error"] .live-badge-dot{
  background: #A8A4A0;
  animation: none;
  opacity: 0.6;
}
body[data-page="home"] .live-badge-dot{
  width: 5px; height: 5px;
  background: var(--red-bright);
  border-radius: 50%;
  animation: pulse-live 1.5s ease-in-out infinite;
}

body[data-page="home"] .player-station-name{
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 3px;
}
body[data-page="home"] .player-now-playing{
  font-size: 0.75rem;
  color: var(--fg-3);
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Waveform visualizer */
body[data-page="home"] .waveform{
  display: flex;
  align-items: center;
  gap: 3px;
  height: 28px;
}
body[data-page="home"] .wave-bar{
  width: 3px;
  background: var(--red);
  border-radius: 3px;
  /* Idle height; each bar overrides via nth-child below so they
     don't all sit at the same baseline when paused. */
  height: 4px;
  opacity: 0.4;
  transition: opacity 0.3s;
}
/* Per-bar IDLE heights — give the static waveform visual variety
   even when the player is paused. */
body[data-page="home"] .wave-bar:nth-child(1){ height:  6px; }
body[data-page="home"] .wave-bar:nth-child(2){ height: 12px; }
body[data-page="home"] .wave-bar:nth-child(3){ height:  8px; }
body[data-page="home"] .wave-bar:nth-child(4){ height: 18px; }
body[data-page="home"] .wave-bar:nth-child(5){ height: 10px; }
body[data-page="home"] .wave-bar:nth-child(6){ height: 14px; }
body[data-page="home"] .wave-bar:nth-child(7){ height:  7px; }
body[data-page="home"] .wave-bar:nth-child(8){ height: 11px; }

body[data-page="home"] .live-player.playing .wave-bar{
  opacity: 1;
  /* Each bar runs its OWN keyframe (defined below) so they peak at
     different maximum heights — gives the animation real spectrum
     variety instead of every bar pulsing in unison. */
}
/* Per-bar animations — different keyframes give each bar its own
   peak height + duration. The slight delay variation plus distinct
   peaks produces the irregular dancing-bars look of a real
   audio spectrum analyzer. */
body[data-page="home"] .live-player.playing .wave-bar:nth-child(1){
  animation: wave-anim-1 0.7s ease-in-out infinite;
  animation-delay: 0s;
}
body[data-page="home"] .live-player.playing .wave-bar:nth-child(2){
  animation: wave-anim-2 0.9s ease-in-out infinite;
  animation-delay: 0.18s;
}
body[data-page="home"] .live-player.playing .wave-bar:nth-child(3){
  animation: wave-anim-3 0.6s ease-in-out infinite;
  animation-delay: 0.32s;
}
body[data-page="home"] .live-player.playing .wave-bar:nth-child(4){
  animation: wave-anim-4 0.85s ease-in-out infinite;
  animation-delay: 0.08s;
}
body[data-page="home"] .live-player.playing .wave-bar:nth-child(5){
  animation: wave-anim-5 0.75s ease-in-out infinite;
  animation-delay: 0.42s;
}
body[data-page="home"] .live-player.playing .wave-bar:nth-child(6){
  animation: wave-anim-6 0.95s ease-in-out infinite;
  animation-delay: 0.22s;
}
body[data-page="home"] .live-player.playing .wave-bar:nth-child(7){
  animation: wave-anim-7 0.65s ease-in-out infinite;
  animation-delay: 0.5s;
}
body[data-page="home"] .live-player.playing .wave-bar:nth-child(8){
  animation: wave-anim-8 0.8s ease-in-out infinite;
  animation-delay: 0.12s;
}

@keyframes wave-anim-1 { 0%, 100% { height:  4px; } 50% { height: 18px; } }
@keyframes wave-anim-2 { 0%, 100% { height:  6px; } 50% { height: 26px; } }
@keyframes wave-anim-3 { 0%, 100% { height:  4px; } 50% { height: 14px; } }
@keyframes wave-anim-4 { 0%, 100% { height:  8px; } 50% { height: 24px; } }
@keyframes wave-anim-5 { 0%, 100% { height:  5px; } 50% { height: 20px; } }
@keyframes wave-anim-6 { 0%, 100% { height:  6px; } 50% { height: 16px; } }
@keyframes wave-anim-7 { 0%, 100% { height:  4px; } 50% { height: 22px; } }
@keyframes wave-anim-8 { 0%, 100% { height:  5px; } 50% { height: 19px; } }

/* idle waveform animation even when paused */
body[data-page="home"] .hero-waveform{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 40px;
  margin-bottom: 8px;
}
body[data-page="home"] .idle-bar{
  width: 2px;
  background: linear-gradient(180deg, var(--red-bright), var(--red-muted));
  border-radius: 2px;
  animation: idle-wave 3s ease-in-out infinite;
  opacity: 0.3;
}
body[data-page="home"] .idle-bar:nth-child(1){ height: 8px; animation-delay: 0s; }
body[data-page="home"] .idle-bar:nth-child(2){ height: 16px; animation-delay: 0.2s; }
body[data-page="home"] .idle-bar:nth-child(3){ height: 24px; animation-delay: 0.4s; }
body[data-page="home"] .idle-bar:nth-child(4){ height: 32px; animation-delay: 0.6s; }
body[data-page="home"] .idle-bar:nth-child(5){ height: 40px; animation-delay: 0.8s; }
body[data-page="home"] .idle-bar:nth-child(6){ height: 32px; animation-delay: 1.0s; }
body[data-page="home"] .idle-bar:nth-child(7){ height: 24px; animation-delay: 0.8s; }
body[data-page="home"] .idle-bar:nth-child(8){ height: 16px; animation-delay: 0.6s; }
body[data-page="home"] .idle-bar:nth-child(9){ height: 8px; animation-delay: 0.4s; }
body[data-page="home"] .idle-bar:nth-child(10){ height: 16px; animation-delay: 0.2s; }
body[data-page="home"] .idle-bar:nth-child(11){ height: 24px; animation-delay: 0s; }
body[data-page="home"] .idle-bar:nth-child(12){ height: 32px; animation-delay: 0.3s; }
body[data-page="home"] .idle-bar:nth-child(13){ height: 24px; animation-delay: 0.5s; }
body[data-page="home"] .idle-bar:nth-child(14){ height: 16px; animation-delay: 0.7s; }
body[data-page="home"] .idle-bar:nth-child(15){ height: 8px; animation-delay: 0.9s; }
@keyframes idle-wave {
  0%, 100% { transform: scaleY(0.4); }
  50% { transform: scaleY(1); }
}

body[data-page="home"] .hero-scroll-hint{
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--fg-3);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  z-index: 2;
  animation: bounce-hint 3s ease-in-out infinite;
}
body[data-page="home"] .scroll-line{
  width: 1px;
  height: 40px;
  background: linear-gradient(180deg, transparent, var(--fg-3));
}
@keyframes bounce-hint {
  0%, 100% { opacity: 0.4; transform: translateX(-50%) translateY(0); }
  50% { opacity: 0.8; transform: translateX(-50%) translateY(6px); }
}

/* ─── SECTIONS ─────────────────────────────────────────────── */
body[data-page="home"] section{
  padding: 120px 0;
  position: relative;
}

body[data-page="home"] .section-inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 40px;
}

/* Reveal on scroll */
body[data-page="home"] .reveal{
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s var(--easing), transform 0.8s var(--easing);
}
body[data-page="home"] .reveal.visible{
  opacity: 1;
  transform: translateY(0);
}
body[data-page="home"] .reveal-delay-1{ transition-delay: 0.1s; }
body[data-page="home"] .reveal-delay-2{ transition-delay: 0.2s; }
body[data-page="home"] .reveal-delay-3{ transition-delay: 0.3s; }
body[data-page="home"] .reveal-delay-4{ transition-delay: 0.4s; }

/* Section headers */
body[data-page="home"] .section-label{
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
body[data-page="home"] .section-label::before{
  content: '';
  display: block;
  width: 24px; height: 1px;
  background: var(--red);
}

body[data-page="home"] .section-title{
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--fg);
  margin-bottom: 20px;
}
body[data-page="home"] .section-title em{ color: var(--red-bright); font-style: italic; }

body[data-page="home"] .section-subtitle{
  font-size: 1.05rem;
  color: var(--fg-2);
  line-height: 1.7;
  max-width: 540px;
  font-weight: 300;
}

/* ─── STORY / LORE SECTION ─────────────────────────────────── */
body[data-page="home"] #story{
  background: var(--bg-2);
  overflow: hidden;
}

body[data-page="home"] .story-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  margin-top: 60px;
}

body[data-page="home"] .story-text p{
  color: var(--fg-2);
  line-height: 1.8;
  margin-bottom: 18px;
  font-size: 0.98rem;
  font-weight: 300;
}

body[data-page="home"] .story-milestone{
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 20px 0;
  border-top: 1px solid var(--border);
}
body[data-page="home"] .milestone-year{
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  color: var(--gold);
  font-weight: 500;
  flex-shrink: 0;
  padding-top: 3px;
  width: 56px;
  letter-spacing: .02em;
}
body[data-page="home"] .milestone-text{
  font-size: 0.88rem;
  color: var(--fg-2);
  line-height: 1.6;
}
body[data-page="home"] .milestone-text strong{
  display: block;
  color: var(--fg);
  font-weight: 600;
  margin-bottom: 3px;
}

body[data-page="home"] .story-visual{
  position: relative;
}
body[data-page="home"] .story-card{
  background: var(--card-bg);
  border: 1px solid var(--border-bright);
  border-radius: 20px;
  padding: 36px;
  backdrop-filter: blur(20px);
}
body[data-page="home"] .story-stat{
  margin-bottom: 30px;
}
body[data-page="home"] .stat-number{
  font-family: 'Playfair Display', serif;
  font-size: 3.5rem;
  font-weight: 900;
  color: var(--fg);
  line-height: 1;
  letter-spacing: -0.04em;
}
body[data-page="home"] .stat-number span{ color: var(--red-bright); }
body[data-page="home"] .stat-label{
  font-size: 0.78rem;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  margin-top: 6px;
}

/* ─── PROGRAMS GRID (Sports / Music / Journalism / BTV) ────── */
body[data-page="home"] #programs{ background: var(--bg); }

body[data-page="home"] .programs-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 60px;
}

body[data-page="home"] .program-card{
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 36px;
  cursor: default;
  transition: all 0.35s var(--easing);
  position: relative;
  overflow: hidden;
}
body[data-page="home"] .program-card::before{
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--card-accent, var(--red));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--easing);
}
body[data-page="home"] .program-card:hover::before{ transform: scaleX(1); }
body[data-page="home"] .program-card:hover{
  transform: translateY(-4px);
  border-color: var(--border-bright);
  box-shadow: 0 20px 60px var(--shadow);
}

body[data-page="home"] .program-icon{
  width: 48px; height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 20px;
  background: var(--card-accent-bg, rgba(208,2,27,0.1));
}
body[data-page="home"] .program-title{
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--fg);
  margin-bottom: 10px;
  letter-spacing: -0.02em;
}
body[data-page="home"] .program-desc{
  font-size: 0.88rem;
  color: var(--fg-2);
  line-height: 1.7;
  font-weight: 300;
}
body[data-page="home"] .program-tag{
  display: inline-block;
  margin-top: 18px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 20px;
  color: var(--card-accent, var(--red));
  background: var(--card-accent-bg, rgba(208,2,27,0.1));
}

/* sport */
body[data-page="home"] .card-sports{ --card-accent: #FF6B35; --card-accent-bg: rgba(255,107,53,0.1); }
/* music */
body[data-page="home"] .card-music{ --card-accent: #845EF7; --card-accent-bg: rgba(132,94,247,0.1); }
/* journalism */
body[data-page="home"] .card-journalism{ --card-accent: #339AF0; --card-accent-bg: rgba(51,154,240,0.1); }
/* btv */
body[data-page="home"] .card-btv{ --card-accent: #51CF66; --card-accent-bg: rgba(81,207,102,0.1); }

/* ─── RADIO SECTION ────────────────────────────────────────── */
body[data-page="home"] #radio{ background: var(--bg-2); }

body[data-page="home"] .radio-inner{
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 80px;
  align-items: center;
  margin-top: 60px;
}

body[data-page="home"] .schedule-list{
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
body[data-page="home"] .schedule-item{
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
  transition: all 0.2s;
}
body[data-page="home"] .schedule-item:hover .schedule-name{ color: var(--red-bright); }
body[data-page="home"] .schedule-time{
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem;
  color: var(--fg-3);
  width: 80px;
  flex-shrink: 0;
}
body[data-page="home"] .schedule-name{
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--fg);
  transition: color 0.2s;
}
body[data-page="home"] .schedule-host{
  font-size: 0.78rem;
  color: var(--fg-3);
  margin-top: 2px;
}
body[data-page="home"] .schedule-live-badge{
  margin-left: auto;
  background: rgba(208,2,27,0.15);
  border: 1px solid rgba(208,2,27,0.3);
  border-radius: 10px;
  padding: 2px 8px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red-bright);
  flex-shrink: 0;
}

body[data-page="home"] .radio-visual{
  display: flex;
  flex-direction: column;
  gap: 20px;
}
body[data-page="home"] .frequency-display{
  background: var(--near-black);
  border: 1px solid var(--border-bright);
  border-radius: 20px;
  padding: 36px;
  text-align: center;
}
html[data-theme="light"] body[data-page="home"] .frequency-display{
  background: #1A1A1E;
}
body[data-page="home"] .freq-label{
  font-size: 0.68rem;
  color: rgba(255,255,255,0.3);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 8px;
}
body[data-page="home"] .freq-number{
  font-family: 'DM Mono', monospace;
  font-size: 3.5rem;
  font-weight: 500;
  color: var(--red-bright);
  letter-spacing: -0.04em;
  line-height: 1;
  text-shadow: 0 0 30px rgba(208,2,27,0.4);
}
body[data-page="home"] .freq-unit{
  font-size: 1.2rem;
  color: rgba(255,100,100,0.6);
  margin-left: 4px;
}
body[data-page="home"] .freq-bars{
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 3px;
  height: 36px;
  margin-top: 16px;
}
body[data-page="home"] .freq-bar{
  width: 4px;
  background: var(--red);
  border-radius: 2px;
  opacity: 0.5;
  animation: freq-pulse 1.2s ease-in-out infinite;
}
body[data-page="home"] .freq-bar:nth-child(odd){ background: var(--gold); }
@keyframes freq-pulse {
  0%, 100% { height: 4px; opacity: 0.3; }
  50% { height: 28px; opacity: 0.8; }
}

/* ─── TEAM SECTION ─────────────────────────────────────────── */
body[data-page="home"] #team{ background: var(--bg); }

body[data-page="home"] .team-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 60px;
}

body[data-page="home"] .team-card{
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 32px 28px;
  text-align: center;
  transition: all 0.35s var(--easing);
  position: relative;
  overflow: hidden;
}
body[data-page="home"] .team-card:hover{
  transform: translateY(-6px);
  border-color: var(--border-bright);
  box-shadow: 0 20px 60px var(--shadow);
}
body[data-page="home"] .team-avatar{
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--bg-3);
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  position: relative;
  overflow: hidden;
  border: 2px solid var(--border-bright);
}
body[data-page="home"] .team-name{
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--fg);
  margin-bottom: 4px;
}
body[data-page="home"] .team-role{
  font-size: 0.75rem;
  color: var(--red);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}
body[data-page="home"] .team-bio{
  font-size: 0.82rem;
  color: var(--fg-3);
  line-height: 1.6;
}

/* ─── JOIN US ──────────────────────────────────────────────── */
body[data-page="home"] #join{
  background: var(--bg-2);
  text-align: center;
}

body[data-page="home"] .join-inner{
  max-width: 700px;
  margin: 0 auto;
  padding: 0 40px;
}

body[data-page="home"] .join-cards{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 60px 0;
}
body[data-page="home"] .join-card{
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 28px 20px;
  transition: all 0.3s var(--easing);
}
body[data-page="home"] .join-card:hover{
  transform: translateY(-4px);
  border-color: var(--red);
  box-shadow: 0 12px 40px var(--glow-red);
}
body[data-page="home"] .join-card-icon{ font-size: 2rem; margin-bottom: 14px; }
body[data-page="home"] .join-card-title{
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--fg);
  margin-bottom: 8px;
}
body[data-page="home"] .join-card-text{
  font-size: 0.8rem;
  color: var(--fg-3);
  line-height: 1.6;
}

body[data-page="home"] .join-cta{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--red);
  color: white;
  border: none;
  border-radius: 50px;
  padding: 16px 40px;
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: all 0.25s var(--easing-spring);
  text-decoration: none;
}
body[data-page="home"] .join-cta:hover{
  background: var(--red-bright);
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 8px 40px rgba(208,2,27,0.4);
}

/* ─── ANNIVERSARY BANNER ───────────────────────────────────── */
body[data-page="home"] .anniversary-banner{
  position: relative;
  background: var(--red);
  padding: 80px 40px;
  overflow: hidden;
  text-align: center;
}
body[data-page="home"] .anniversary-banner::before{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--red) 0%, #8B0010 100%);
}
body[data-page="home"] .anniversary-banner-content{
  position: relative;
  z-index: 2;
}
body[data-page="home"] .ann-label{
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: 12px;
  font-weight: 600;
}
body[data-page="home"] .ann-title{
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 900;
  color: white;
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: 16px;
}
body[data-page="home"] .ann-title em{ font-style: italic; color: var(--gold-light); }
body[data-page="home"] .ann-subtitle{
  color: rgba(255,255,255,0.7);
  font-size: 1.1rem;
  font-weight: 300;
  max-width: 500px;
  margin: 0 auto;
}

/* Floating particles in banner */
body[data-page="home"] .banner-particles span{
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  animation: float-particle 8s ease-in-out infinite;
}
body[data-page="home"] .banner-particles span:nth-child(1){ width: 120px; height: 120px; top: -20px; left: 5%; animation-delay: 0s; }
body[data-page="home"] .banner-particles span:nth-child(2){ width: 80px; height: 80px; bottom: -10px; right: 10%; animation-delay: -3s; }
body[data-page="home"] .banner-particles span:nth-child(3){ width: 50px; height: 50px; top: 40%; left: 25%; animation-delay: -6s; }
body[data-page="home"] .banner-particles span:nth-child(4){ width: 200px; height: 200px; bottom: -60px; right: 30%; animation-delay: -1.5s; opacity: 0.05; }
@keyframes float-particle {
  0%, 100% { transform: translate(0,0) rotate(0deg); }
  33% { transform: translate(15px,-10px) rotate(10deg); }
  66% { transform: translate(-10px,15px) rotate(-5deg); }
}

/* ─── FOOTER ───────────────────────────────────────────────── */
body[data-page="home"] footer{
  background: var(--near-black);
  padding: 60px 0 40px;
  color: rgba(255,255,255,0.4);
}
html[data-theme="light"] body[data-page="home"] footer{
  background: #111114;
}
body[data-page="home"] .footer-inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 40px;
}
body[data-page="home"] .footer-top{
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 60px;
  margin-bottom: 48px;
}
body[data-page="home"] .footer-brand{
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem;
  font-weight: 900;
  color: white;
  margin-bottom: 12px;
}
body[data-page="home"] .footer-tagline{
  font-size: 0.82rem;
  line-height: 1.7;
  max-width: 240px;
}
body[data-page="home"] .footer-col-title{
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  margin-bottom: 16px;
}
body[data-page="home"] .footer-links{
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body[data-page="home"] .footer-links a{
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  font-size: 0.85rem;
  transition: color 0.2s;
}
body[data-page="home"] .footer-links a:hover{ color: white; }
body[data-page="home"] .footer-bottom{
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
}
body[data-page="home"] .footer-copy{ color: rgba(255,255,255,0.2); }
body[data-page="home"] .footer-badge{
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.25);
}
body[data-page="home"] .footer-badge span{ color: var(--red); font-weight: 700; }

/* ─── AUDIO ELEMENT ────────────────────────────────────────── */
body[data-page="home"] #radio-audio{ display: none; }

/* ─── TRANSITIONS ──────────────────────────────────────────── */
body[data-page="home"] .fade-in{ animation: fadeIn 0.6s ease both; }
@keyframes fadeIn {
  from { opacity: 0; } to { opacity: 1; }
}

/* ─── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 900px) {

  body[data-page="home"] .nav-links{ display: none; }
  body[data-page="home"] .burger{ display: flex; }
  body[data-page="home"] .nav-links.open{
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 65px; left: 0; right: 0;
    background: var(--nav-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 20px 24px 30px;
    border-bottom: 1px solid var(--border);
    gap: 4px;
    z-index: 998;
  }
  body[data-page="home"] .nav-links.open a{ font-size: 0.95rem; padding: 10px 0; }

  body[data-page="home"] .story-grid{ grid-template-columns: 1fr; gap: 48px; }
  body[data-page="home"] .programs-grid{ grid-template-columns: 1fr; }
  body[data-page="home"] .radio-inner{ grid-template-columns: 1fr; gap: 48px; }
  body[data-page="home"] .team-grid{ grid-template-columns: repeat(2, 1fr); }
  body[data-page="home"] .join-cards{ grid-template-columns: 1fr; }
  body[data-page="home"] .footer-top{ grid-template-columns: 1fr 1fr; gap: 36px; }

  body[data-page="home"] .live-player{
    min-width: unset;
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
    gap: 20px;
  }
  body[data-page="home"] .nav-listen-btn span:not(.nav-live-dot){ display: none; }

}

@media (max-width: 600px) {

  body[data-page="home"] nav{ padding: 0 20px; }
  body[data-page="home"] .section-inner{ padding: 0 20px; }
  body[data-page="home"] section{ padding: 80px 0; }
  body[data-page="home"] .team-grid{ grid-template-columns: 1fr; }
  body[data-page="home"] .footer-top{ grid-template-columns: 1fr; }
  body[data-page="home"] .footer-bottom{ flex-direction: column; gap: 12px; text-align: center; }
  body[data-page="home"] .hero-content{ padding: 0 16px; }

}

/* ─── LORE LAYER: subtle easter egg text ────────────────────── */

/* ─── TEAM CTA BLOCK ───────────────────────────────────────── */
body[data-page="home"] .team-cta-block{
  padding: 20px 0;
}
body[data-page="home"] .dept-preview-row{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}
body[data-page="home"] .dept-preview-pill{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 50px;
  padding: 9px 18px;
  font-size: .82rem;
  font-weight: 500;
  color: var(--fg-2);
  transition: all .25s;
}
body[data-page="home"] .dept-preview-pill:hover{
  border-color: var(--dp-c, var(--red));
  color: var(--dp-c, var(--red));
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.15);
}

/* ─── NOW ON AIR CARD ──────────────────────────────────────── */
body[data-page="home"] .now-on-air-card{
  background: var(--near-black);
  border: 1px solid var(--border-bright);
  border-radius: 20px;
  padding: 24px 28px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}
html[data-theme="light"] body[data-page="home"] .now-on-air-card{ background: #1A1A1E; }
body[data-page="home"] .now-on-air-card::before{
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--red), var(--red-bright), transparent);
  animation: noa-pulse 3s ease-in-out infinite;
}
@keyframes noa-pulse { 0%,100%{opacity:.6} 50%{opacity:1} }
body[data-page="home"] .noa-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
body[data-page="home"] .noa-live-badge{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(208,2,27,.15);
  border: 1px solid rgba(208,2,27,.3);
  border-radius: 10px;
  padding: 3px 10px;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--red-bright);
}
body[data-page="home"] .noa-dot{
  width: 5px; height: 5px;
  background: var(--red-bright);
  border-radius: 50%;
  animation: pulse-live 1.5s ease-in-out infinite;
}
body[data-page="home"] .noa-time{
  font-family: 'DM Mono', monospace;
  font-size: .7rem;
  color: rgba(255,255,255,.3);
}
body[data-page="home"] .noa-show{
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem;
  font-weight: 900;
  color: white;
  letter-spacing: -.03em;
  margin-bottom: 4px;
  line-height: 1.1;
}
body[data-page="home"] .noa-host{
  font-size: .76rem;
  color: rgba(255,255,255,.4);
  font-family: 'DM Mono', monospace;
  margin-bottom: 16px;
}
body[data-page="home"] .noa-progress-wrap{
  width: 100%;
  height: 2px;
  background: rgba(255,255,255,.08);
  border-radius: 2px;
  margin-bottom: 14px;
  overflow: hidden;
}
body[data-page="home"] .noa-progress-bar{
  height: 100%;
  background: linear-gradient(90deg, var(--red-muted), var(--red-bright));
  border-radius: 2px;
  width: 0%;
  transition: width 1s linear;
}
body[data-page="home"] .noa-next{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .72rem;
}
body[data-page="home"] .noa-next-label{
  font-family: 'DM Mono', monospace;
  color: rgba(255,255,255,.25);
  font-size: .6rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
body[data-page="home"] .noa-next-show{
  color: rgba(255,255,255,.5);
  font-weight: 500;
}
body[data-page="home"] .todays-schedule{ display: flex; flex-direction: column; }
body[data-page="home"] .tds-row{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
  transition: all .2s;
}
body[data-page="home"] .tds-row:last-child{ border-bottom: none; }
body[data-page="home"] .tds-row:hover .tds-name{ color: var(--red-bright); }
body[data-page="home"] .tds-row.tds-current .tds-time{ color: var(--red); }
body[data-page="home"] .tds-row.tds-current .tds-name{ color: var(--fg); font-weight: 600; }
body[data-page="home"] .tds-time{
  font-family: 'DM Mono', monospace;
  font-size: .68rem;
  color: var(--fg-3);
  width: 68px;
  flex-shrink: 0;
}
body[data-page="home"] .tds-name{ font-size: .84rem; color: var(--fg-2); transition: color .2s; flex: 1; }
body[data-page="home"] .tds-genre{
  font-size: .58rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 6px; flex-shrink: 0;
}
body[data-page="home"] .tds-news{ background: rgba(51,154,240,.1); color: #339AF0; }
body[data-page="home"] .tds-music{ background: rgba(132,94,247,.1); color: #845EF7; }
body[data-page="home"] .tds-sports{ background: rgba(255,107,53,.1); color: #FF6B35; }
body[data-page="home"] .tds-talk{ background: rgba(81,207,102,.1); color: #51CF66; }

/* ─── STREAM DISPLAY ────────────────────────────────────────── */
body[data-page="home"] .stream-display{
  background: var(--near-black);
  border: 1px solid var(--border-bright);
  border-radius: 20px;
  padding: 28px;
  text-align: center;
  margin-bottom: 16px;
}
html[data-theme="light"] body[data-page="home"] .stream-display{ background: #1A1A1E; }
body[data-page="home"] .stream-display-header{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 8px;
}
body[data-page="home"] .stream-display-label{
  font-family: 'DM Mono', monospace;
  font-size: .64rem;
  color: rgba(255,255,255,.3);
  text-transform: uppercase;
  letter-spacing: .12em;
}
body[data-page="home"] .stream-status-dot{
  width: 6px; height: 6px;
  background: #51CF66;
  border-radius: 50%;
  animation: pulse-live 2s ease-in-out infinite;
}
body[data-page="home"] .stream-display-url{
  font-family: 'DM Mono', monospace;
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--red-bright);
  letter-spacing: -.02em;
  text-shadow: 0 0 20px rgba(208,2,27,.4);
  margin-bottom: 16px;
}
body[data-page="home"] .stream-full-link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--red);
  color: white;
  text-decoration: none;
  border-radius: 50px;
  padding: 9px 22px;
  font-size: .8rem;
  font-weight: 600;
  margin-top: 8px;
  transition: all .2s var(--easing-spring);
  letter-spacing: .02em;
}
body[data-page="home"] .stream-full-link:hover{
  background: var(--red-bright);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px var(--glow-red);
}
body[data-page="home"] .listen-options{
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px 20px;
}
body[data-page="home"] .listen-option-title{
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 12px;
}
body[data-page="home"] .listen-option-item{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: .8rem;
  color: var(--fg-2);
}
body[data-page="home"] .listen-option-item strong{ color: var(--fg); }
body[data-page="home"] .lo-icon{ font-size: 1rem; flex-shrink: 0; }

body[data-page="home"] .lore-text{
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  color: var(--fg-3);
  opacity: 0.4;
  letter-spacing: 0.06em;
  margin-top: 40px;
}

/* Only suppress native cursor after JS confirms it loaded.
   If JS never runs, nothing here ever fires. */
html.bc-cursor-active *{
  cursor: none !important;
}

/* Restore I-beam in text fields — users need native precision */
html.bc-cursor-active input, html.bc-cursor-active textarea, html.bc-cursor-active [contenteditable]{
  cursor: text !important;
}

/* ── CURSOR WRAPPER ────────────────────────────────────────────
   Top-left corner of the div = the mouse coordinate.
   SVG tip is drawn at (0,0) — so the visual tip and the
   hot-point are the exact same pixel. No offset required. */
#bc-cursor{
  position: fixed;
  top: 0;
  left: 0;
  width: 20px;
  height: 24px;
  pointer-events: none;
  z-index: 999999;
  opacity: 0;
  transition: opacity 0.5s ease;
  will-change: transform;
}

/* ── THE ARROW SVG ─────────────────────────────────────────────
   transform-origin: 0 0 locks all scale animations to the tip.
   Because the tip IS (0,0) in the viewBox, scale never drifts. */
#bc-cursor svg{
  display: block;
  width: 20px;
  height: 24px;
  transform-origin: 0 0;
  transition:
    transform  0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    opacity    0.16s ease;
  will-change: transform;
}

/* The filled arrow body */
#bc-cursor .arrow-fill{
  fill: rgba(255, 255, 255, 0.92);
  transition: fill 0.16s ease;
}

/* The 1px dark stroke — gives it the OS-cursor depth */
#bc-cursor .arrow-stroke{
  fill: none;
  stroke: rgba(0, 0, 0, 0.55);
  stroke-width: 1px;
  stroke-linejoin: round;
  transition: stroke 0.16s ease;
}

/* ── HOVER STATE ───────────────────────────────────────────────
   Scale up ~15% — just enough to register "ready".
   No color change. Feels like the cursor leaning in. */
#bc-cursor.bc-hover svg{
  transform: scale(1.15);
}

/* ── CLICK STATE ───────────────────────────────────────────────
   Fast compress to 80%, snaps back on mouseup.
   The one moment the cursor makes itself physically felt. */
#bc-cursor.bc-click svg{
  transform: scale(0.78);
  transition:
    transform  0.07s cubic-bezier(0.34, 1.56, 0.64, 1),
    filter     0.07s ease;
}

/* ── TEXT INPUT STATE ──────────────────────────────────────────
   Arrow fades out entirely — native I-beam has control.
   The cursor doesn't compete with text selection. */
#bc-cursor.bc-text svg{
  opacity: 0;
  transform: scale(0.6);
}

/* ── LIGHT THEME ───────────────────────────────────────────────
   Flip fill to dark — same arrow, still readable. */
html[data-theme="light"] #bc-cursor .arrow-fill{
  fill: rgba(20, 20, 28, 0.88);
}
html[data-theme="light"] #bc-cursor .arrow-stroke{
  stroke: rgba(255, 255, 255, 0.45);
}

/* ═══════════════════════════════════════════════════
   PAGE: BTV (btv.html)
═══════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════
   RESET
══════════════════════════════════════════════════ */
*, *::before, *::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body[data-page="btv"]{
  font-family:'DM Sans',sans-serif;
  background:var(--bg);color:var(--fg);
  overflow-x:hidden;
  transition:background .4s,color .4s;
  min-height:100vh;
}
body[data-page="btv"] button, body[data-page="btv"] input, body[data-page="btv"] select{font-family:inherit}

/* ══════════════════════════════════════════════════
   TOKENS
══════════════════════════════════════════════════ */
body[data-page="btv"]{
  --green:#00E676;
  --green-dim:#00C853;
  --green-muted:#004D2A;
  --red-rec:#FF1744;
  --amber:#FFB300;
  --near-black:#05060A;
  --ease:cubic-bezier(.25,.46,.45,.94);
  --spring:cubic-bezier(.34,1.56,.64,1);
}
html[data-theme="dark"] body[data-page="btv"]{
  --bg:#05060A;
  --bg-2:#0C0D14;
  --bg-3:#14161F;
  --fg:#E8EAF0;
  --fg-2:#8A8D9A;
  --fg-3:#44475A;
  --border:rgba(255,255,255,.06);
  --border-b:rgba(255,255,255,.12);
  --shadow:rgba(0,0,0,.8);
  --glow:rgba(0,230,118,.2);
  --glow-red:rgba(255,23,68,.2);
  --card:rgba(14,15,22,.97);
  --nav-bg:rgba(5,6,10,.94);
  --glass:rgba(14,15,22,.85);
  --overlay:rgba(3,4,8,.96);
}
html[data-theme="light"] body[data-page="btv"]{
  --bg:#F0F2F5;
  --bg-2:#E4E7ED;
  --bg-3:#D8DCE5;
  --fg:#0A0B12;
  --fg-2:#3D404D;
  --fg-3:#8A8D9A;
  --border:rgba(0,0,0,.07);
  --border-b:rgba(0,0,0,.14);
  --shadow:rgba(0,0,0,.1);
  --glow:rgba(0,200,83,.15);
  --glow-red:rgba(255,23,68,.1);
  --card:rgba(255,255,255,.98);
  --nav-bg:rgba(240,242,245,.94);
  --glass:rgba(255,255,255,.85);
  --overlay:rgba(235,237,242,.97);
}

/* ══════════════════════════════════════════════════
   RAINBOW BAR
══════════════════════════════════════════════════ */
body[data-page="btv"] .rainbow-bar{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:1001;
  background:linear-gradient(90deg,
    #FF3B3B 0%,#FF6B35 14%,#FFD700 28%,
    #51CF66 42%,#339AF0 56%,#845EF7 70%,
    #FF3B3B 84%,#FF6B35 100%);
  background-size:200% 100%;
  animation:rbShift 6s linear infinite;
}
@keyframes rbShift{to{background-position:200% 0}}

/* ══════════════════════════════════════════════════
   NAV
══════════════════════════════════════════════════ */
body[data-page="btv"] nav{
  position:fixed;top:3px;left:0;right:0;height:60px;z-index:1000;
  background:var(--nav-bg);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 32px;transition:background .4s;
}
body[data-page="btv"] .nav-logo{
  font-family:'Bebas Neue',sans-serif;
  font-size:1.8rem;letter-spacing:.06em;
  color:var(--fg);text-decoration:none;
  display:flex;align-items:center;gap:10px;
  line-height:1;
}
body[data-page="btv"] .nav-logo .btv-badge{
  background:var(--red-rec);
  color:white;font-size:.55rem;font-family:'DM Mono',monospace;
  font-weight:500;letter-spacing:.08em;
  padding:3px 7px;border-radius:4px;
  display:flex;align-items:center;gap:4px;
  animation:recPulse 2s ease-in-out infinite;
}
body[data-page="btv"] .nav-logo .btv-badge::before{
  content:'';width:5px;height:5px;border-radius:50%;
  background:white;animation:recDot 2s ease-in-out infinite;
}
@keyframes recPulse{0%,100%{opacity:1}50%{opacity:.7}}
@keyframes recDot{0%,100%{opacity:1}50%{opacity:0}}
body[data-page="btv"] .nav-right{display:flex;align-items:center;gap:10px}
body[data-page="btv"] .nav-pill{
  background:var(--border);border:1px solid var(--border-b);
  border-radius:20px;padding:6px 14px;
  font-size:.78rem;font-weight:500;color:var(--fg-2);
  cursor:pointer;text-decoration:none;transition:all .2s;
}
body[data-page="btv"] .nav-pill:hover{color:var(--fg);background:var(--border-b)}

/* ══════════════════════════════════════════════════
   HERO / BROADCAST PLAYER
══════════════════════════════════════════════════ */
body[data-page="btv"] .broadcast-hero{
  min-height:100vh;
  padding-top:63px;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  position:relative;overflow:hidden;
  background:var(--near-black);
}
html[data-theme="light"] body[data-page="btv"] .broadcast-hero{background:#0C0D14}

/* CRT scanlines */
body[data-page="btv"] .broadcast-hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  background:repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0,0,0,.08) 3px,
    rgba(0,0,0,.08) 4px
  );
}
/* Vignette */
body[data-page="btv"] .broadcast-hero::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(ellipse at center,transparent 40%,rgba(0,0,0,.7) 100%);
}

/* Ambient color pools */
body[data-page="btv"] .hero-ambient{position:absolute;inset:0;pointer-events:none}
body[data-page="btv"] .amb-pool{
  position:absolute;border-radius:50%;filter:blur(120px);
}
body[data-page="btv"] .amb-1{width:500px;height:500px;background:rgba(0,230,118,.08);top:-10%;left:-10%;animation:ambDrift 20s ease-in-out infinite}
body[data-page="btv"] .amb-2{width:400px;height:400px;background:rgba(255,23,68,.06);bottom:5%;right:-5%;animation:ambDrift 16s ease-in-out infinite reverse}
body[data-page="btv"] .amb-3{width:300px;height:300px;background:rgba(255,179,0,.04);top:40%;left:40%;animation:ambDrift 24s ease-in-out infinite 4s}
@keyframes ambDrift{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,-25px)}}

body[data-page="btv"] .hero-inner{
  position:relative;z-index:2;
  max-width:1200px;width:100%;
  padding:0 40px;
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:60px;align-items:center;
}

/* ── BROADCAST FRAME ─────────────────────────── */
body[data-page="btv"] .broadcast-frame{
  position:relative;
}
body[data-page="btv"] .broadcast-frame-chrome{
  background:linear-gradient(145deg,#1A1C24,#0E0F16);
  border:1px solid rgba(255,255,255,.1);
  border-radius:16px;
  padding:14px;
  box-shadow:0 40px 120px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.06);
  position:relative;
}
/* TV glint */
body[data-page="btv"] .broadcast-frame-chrome::before{
  content:'';position:absolute;
  top:8px;left:8px;right:8px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);
  border-radius:2px;pointer-events:none;
}

/* Top bar with controls */
body[data-page="btv"] .frame-topbar{
  display:flex;align-items:center;gap:8px;
  margin-bottom:10px;padding:0 4px;
}
body[data-page="btv"] .frame-dot{width:10px;height:10px;border-radius:50%}
body[data-page="btv"] .frame-dot-r{background:#FF5F57}
body[data-page="btv"] .frame-dot-y{background:#FFBD2E}
body[data-page="btv"] .frame-dot-g{background:#28CA41}
body[data-page="btv"] .frame-title{
  margin-left:auto;
  font-family:'DM Mono',monospace;
  font-size:.62rem;color:rgba(255,255,255,.25);
  letter-spacing:.1em;text-transform:uppercase;
}
body[data-page="btv"] .frame-live-indicator{
  display:flex;align-items:center;gap:5px;
  font-family:'DM Mono',monospace;
  font-size:.6rem;color:var(--red-rec);
  letter-spacing:.1em;text-transform:uppercase;
  font-weight:500;
}
body[data-page="btv"] .live-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--red-rec);
  animation:recDot 1.2s ease-in-out infinite;
}

/* YouTube embed wrapper */
body[data-page="btv"] .yt-wrapper{
  position:relative;width:100%;
  aspect-ratio:16/9;
  border-radius:8px;overflow:hidden;
  background:#000;
}
body[data-page="btv"] .yt-wrapper iframe{
  position:absolute;inset:0;width:100%;height:100%;
  border:none;
}

/* Video ID input for customisation */
body[data-page="btv"] .yt-input-row{
  display:flex;align-items:center;gap:8px;
  margin-top:12px;padding:0 4px;
}
body[data-page="btv"] .yt-input{
  flex:1;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;padding:7px 12px;
  color:rgba(255,255,255,.6);
  font-family:'DM Mono',monospace;font-size:.72rem;
  outline:none;transition:border-color .2s;
}
body[data-page="btv"] .yt-input:focus{border-color:var(--green)}
body[data-page="btv"] .yt-input::placeholder{color:rgba(255,255,255,.2)}
body[data-page="btv"] .yt-load-btn{
  background:var(--green);border:none;border-radius:8px;
  padding:8px 14px;font-size:.72rem;font-weight:600;
  color:#000;cursor:pointer;transition:all .2s;white-space:nowrap;
}
body[data-page="btv"] .yt-load-btn:hover{background:var(--green-dim)}

/* Frame bottom info */
body[data-page="btv"] .frame-info{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:12px;padding:0 4px;
}
body[data-page="btv"] .frame-ep-badge{
  background:rgba(0,230,118,.12);
  border:1px solid rgba(0,230,118,.25);
  border-radius:8px;padding:4px 10px;
  font-family:'DM Mono',monospace;
  font-size:.65rem;color:var(--green);
  letter-spacing:.06em;
}
body[data-page="btv"] .frame-runtime{
  font-family:'DM Mono',monospace;
  font-size:.65rem;color:rgba(255,255,255,.25);
}

/* ── HERO RIGHT ──────────────────────────────── */
body[data-page="btv"] .hero-right{
  color:white;
  animation:heroFade 1s var(--ease) .15s both;
}
@keyframes heroFade{
  from{opacity:0;transform:translateX(20px)}
  to{opacity:1;transform:translateX(0)}
}
body[data-page="btv"] .hero-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(0,230,118,.1);
  border:1px solid rgba(0,230,118,.2);
  border-radius:20px;padding:5px 14px;
  font-size:.68rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--green);
  margin-bottom:20px;
}
body[data-page="btv"] .hero-title{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(3.5rem,8vw,7rem);
  letter-spacing:.04em;line-height:.9;
  color:white;margin-bottom:16px;
}
body[data-page="btv"] .hero-title .title-line-2{color:var(--green)}
body[data-page="btv"] .hero-sub{
  font-size:1rem;color:rgba(255,255,255,.5);
  line-height:1.75;font-weight:300;
  max-width:360px;margin-bottom:32px;
}
body[data-page="btv"] .hero-stats{
  display:flex;gap:32px;
  padding-top:24px;
  border-top:1px solid rgba(255,255,255,.08);
}
body[data-page="btv"] .hs-val{
  font-family:'Bebas Neue',sans-serif;
  font-size:2.6rem;letter-spacing:.04em;
  color:white;line-height:1;
}
body[data-page="btv"] .hs-val em{color:var(--green);font-style:normal}
body[data-page="btv"] .hs-lbl{
  font-size:.65rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;
  color:rgba(255,255,255,.3);margin-top:4px;
}

/* ══════════════════════════════════════════════════
   CHANNEL STRIP
══════════════════════════════════════════════════ */
body[data-page="btv"] .channel-strip{
  background:var(--bg-2);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:0;overflow:hidden;
}
body[data-page="btv"] .channel-scroll{
  display:flex;gap:0;
  overflow-x:auto;scrollbar-width:none;
}
body[data-page="btv"] .channel-scroll::-webkit-scrollbar{display:none}
body[data-page="btv"] .channel-tab{
  display:flex;align-items:center;gap:8px;
  padding:18px 28px;
  border-right:1px solid var(--border);
  font-size:.78rem;font-weight:500;color:var(--fg-2);
  cursor:pointer;white-space:nowrap;
  transition:all .2s;flex-shrink:0;
  background:none;border-top:none;border-left:none;border-bottom:none;
  position:relative;
}
body[data-page="btv"] .channel-tab::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:2px;
  background:var(--green);transform:scaleX(0);
  transition:transform .25s var(--ease);
}
body[data-page="btv"] .channel-tab:hover{color:var(--fg);background:var(--border)}
body[data-page="btv"] .channel-tab.active{color:var(--fg)}
body[data-page="btv"] .channel-tab.active::after{transform:scaleX(1)}
body[data-page="btv"] .ch-icon{font-size:1rem}
body[data-page="btv"] .ch-count{
  background:var(--border-b);border-radius:10px;
  padding:1px 7px;font-size:.62rem;
  font-family:'DM Mono',monospace;color:var(--fg-3);
}
body[data-page="btv"] .channel-tab.active .ch-count{background:rgba(0,230,118,.15);color:var(--green)}

/* ══════════════════════════════════════════════════
   EPISODES SECTION
══════════════════════════════════════════════════ */
body[data-page="btv"] .episodes-section{padding:60px 0 100px;background:var(--bg)}
body[data-page="btv"] .ep-inner{max-width:1200px;margin:0 auto;padding:0 40px}

/* Search + filter row */
body[data-page="btv"] .ep-controls{
  display:flex;align-items:center;gap:14px;
  margin-bottom:36px;flex-wrap:wrap;
}
body[data-page="btv"] .ep-search-wrap{position:relative;flex:1;max-width:320px}
body[data-page="btv"] .ep-search-icon{
  position:absolute;left:13px;top:50%;transform:translateY(-50%);
  color:var(--fg-3);pointer-events:none;
}
body[data-page="btv"] .ep-search-icon svg{width:15px;height:15px}
body[data-page="btv"] .ep-search{
  width:100%;background:var(--bg-3);
  border:1px solid var(--border);border-radius:24px;
  padding:9px 16px 9px 38px;
  color:var(--fg);font-size:.84rem;outline:none;
  transition:border-color .2s,box-shadow .2s;
}
body[data-page="btv"] .ep-search::placeholder{color:var(--fg-3)}
body[data-page="btv"] .ep-search:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(0,230,118,.12)}
body[data-page="btv"] .ep-search-clear{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  background:none;border:none;color:var(--fg-3);cursor:pointer;
  display:none;padding:2px;
}
body[data-page="btv"] .ep-search-clear svg{width:13px;height:13px;display:block}
body[data-page="btv"] .ep-search-clear.show{display:block}

body[data-page="btv"] .ep-sort{
  background:var(--bg-3);border:1px solid var(--border);
  border-radius:20px;padding:8px 14px;
  color:var(--fg-2);font-size:.78rem;outline:none;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;
  padding-right:28px;cursor:pointer;transition:border-color .2s;
}
body[data-page="btv"] .ep-sort:focus{border-color:var(--green)}
body[data-page="btv"] .ep-count{
  font-family:'DM Mono',monospace;font-size:.74rem;
  color:var(--fg-3);margin-left:auto;white-space:nowrap;
}
body[data-page="btv"] .ep-count span{color:var(--fg);font-weight:500}

/* view toggle */
body[data-page="btv"] .view-btns{display:flex;gap:4px}
body[data-page="btv"] .vbtn{
  background:none;border:1px solid var(--border);
  border-radius:8px;padding:7px 10px;
  color:var(--fg-3);cursor:pointer;transition:all .2s;
}
body[data-page="btv"] .vbtn svg{width:14px;height:14px;display:block}
body[data-page="btv"] .vbtn:hover{color:var(--fg);border-color:var(--border-b)}
body[data-page="btv"] .vbtn.active{background:var(--green);border-color:var(--green);color:#000}

/* Episodes grid */
body[data-page="btv"] .ep-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
body[data-page="btv"] .ep-grid.list-mode{
  grid-template-columns:1fr;gap:0;
}

/* Episode card */
body[data-page="btv"] .ep-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;overflow:hidden;
  cursor:pointer;
  transition:transform .3s var(--ease),border-color .3s,box-shadow .3s;
  display:flex;flex-direction:column;
}
body[data-page="btv"] .ep-card:hover{
  transform:translateY(-5px);
  border-color:var(--border-b);
  box-shadow:0 16px 50px var(--shadow),0 0 30px var(--glow);
}
body[data-page="btv"] .ep-card:hover .ep-play-overlay{opacity:1}

/* Thumbnail */
body[data-page="btv"] .ep-thumb{
  position:relative;aspect-ratio:16/9;
  background:linear-gradient(135deg,#0A0C14,#141820);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;flex-shrink:0;
}
/* Thumbnail gradient by show type */
body[data-page="btv"] .ep-card[data-show="show"] .ep-thumb{background:linear-gradient(135deg,#050810,#0A1020)}
body[data-page="btv"] .ep-card[data-show="documentary"] .ep-thumb{background:linear-gradient(135deg,#081008,#101A10)}
body[data-page="btv"] .ep-card[data-show="music"] .ep-thumb{background:linear-gradient(135deg,#100814,#1A0820)}
body[data-page="btv"] .ep-card[data-show="sports"] .ep-thumb{background:linear-gradient(135deg,#100800,#1A0E00)}
body[data-page="btv"] .ep-card[data-show="news"] .ep-thumb{background:linear-gradient(135deg,#080810,#10101A)}
body[data-page="btv"] .ep-card[data-show="special"] .ep-thumb{background:linear-gradient(135deg,#0D0800,#1A1000)}

body[data-page="btv"] .ep-thumb-emoji{font-size:2.8rem;position:relative;z-index:1}
body[data-page="btv"] .ep-thumb-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.6) 100%);
}
body[data-page="btv"] .ep-runtime-badge{
  position:absolute;bottom:8px;right:8px;
  background:rgba(0,0,0,.75);
  font-family:'DM Mono',monospace;
  font-size:.62rem;color:white;font-weight:500;
  padding:2px 7px;border-radius:5px;letter-spacing:.03em;
  backdrop-filter:blur(4px);
}
body[data-page="btv"] .ep-play-overlay{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.4);opacity:0;transition:opacity .25s;
}
body[data-page="btv"] .ep-play-circle{
  width:52px;height:52px;border-radius:50%;
  background:rgba(0,230,118,.9);
  display:flex;align-items:center;justify-content:center;
  transform:scale(.8);transition:transform .25s var(--spring);
}
body[data-page="btv"] .ep-card:hover .ep-play-circle{transform:scale(1)}
body[data-page="btv"] .ep-play-circle svg{width:22px;height:22px;fill:#000;margin-left:3px}

/* show badge */
body[data-page="btv"] .ep-show-badge{
  position:absolute;top:8px;left:8px;
  font-family:'DM Mono',monospace;
  font-size:.58rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 8px;border-radius:6px;backdrop-filter:blur(4px);
}

body[data-page="btv"] .ep-body{padding:16px 18px 20px;flex:1;display:flex;flex-direction:column}
body[data-page="btv"] .ep-show-name{
  font-size:.65rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--ep-color,var(--green));margin-bottom:6px;
}
body[data-page="btv"] .ep-title{
  font-family:'Bebas Neue',sans-serif;
  font-size:1.25rem;letter-spacing:.03em;
  color:var(--fg);line-height:1.1;margin-bottom:6px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
body[data-page="btv"] .ep-desc{
  font-size:.78rem;color:var(--fg-2);
  line-height:1.6;flex:1;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  margin-bottom:12px;
}
body[data-page="btv"] .ep-meta{
  display:flex;align-items:center;gap:8px;
  font-family:'DM Mono',monospace;font-size:.65rem;color:var(--fg-3);
  border-top:1px solid var(--border);padding-top:10px;margin-top:auto;flex-wrap:wrap;
}
body[data-page="btv"] .ep-views{color:var(--fg-2)}
body[data-page="btv"] .ep-season-ep{color:var(--fg-3)}
body[data-page="btv"] .ep-new-badge{
  margin-left:auto;background:rgba(0,230,118,.12);
  border:1px solid rgba(0,230,118,.25);
  border-radius:8px;padding:2px 7px;
  font-size:.58rem;color:var(--green);letter-spacing:.06em;text-transform:uppercase;
}

/* list mode */
body[data-page="btv"] .ep-grid.list-mode .ep-card{
  flex-direction:row;border-radius:0;
  border:none;border-bottom:1px solid var(--border);
  transform:none!important;box-shadow:none!important;
  padding:16px 4px;gap:16px;align-items:center;
}
body[data-page="btv"] .ep-grid.list-mode .ep-thumb{
  width:120px;height:68px;aspect-ratio:unset;
  border-radius:10px;flex-shrink:0;font-size:1.5rem;
}
body[data-page="btv"] .ep-grid.list-mode .ep-body{padding:0}
body[data-page="btv"] .ep-grid.list-mode .ep-desc{display:none}
body[data-page="btv"] .ep-grid.list-mode .ep-title{font-size:1.05rem;-webkit-line-clamp:1}

/* No results */
body[data-page="btv"] .ep-no-results{
  grid-column:1/-1;text-align:center;
  padding:80px 0;display:none;
}
body[data-page="btv"] .ep-no-results.show{display:block}
body[data-page="btv"] .nr-icon{font-size:3rem;margin-bottom:14px;opacity:.3}
body[data-page="btv"] .nr-title{
  font-family:'Bebas Neue',sans-serif;
  font-size:2rem;color:var(--fg-2);margin-bottom:6px;letter-spacing:.04em;
}
body[data-page="btv"] .nr-sub{font-size:.85rem;color:var(--fg-3)}

/* Load more */
body[data-page="btv"] .load-wrap{text-align:center;margin-top:48px}
body[data-page="btv"] .load-btn{
  background:none;border:1px solid var(--border-b);
  border-radius:50px;padding:13px 40px;
  font-size:.88rem;font-weight:500;color:var(--fg-2);
  cursor:pointer;transition:all .25s var(--spring);
  display:inline-flex;align-items:center;gap:8px;
}
body[data-page="btv"] .load-btn:hover{
  border-color:var(--green);color:var(--green);
  transform:translateY(-2px);box-shadow:0 8px 24px var(--glow);
}
body[data-page="btv"] .load-btn.hidden{display:none}

/* ══════════════════════════════════════════════════
   ABOUT / STUDIO SECTION
══════════════════════════════════════════════════ */
body[data-page="btv"] .studio-section{
  padding:100px 0;
  background:var(--bg-2);
  position:relative;overflow:hidden;
}
body[data-page="btv"] .studio-section::before{
  content:'';position:absolute;
  top:-80px;right:-80px;
  width:400px;height:400px;
  background:radial-gradient(circle,rgba(0,230,118,.07),transparent 70%);
  border-radius:50%;pointer-events:none;
}
body[data-page="btv"] .studio-inner{
  max-width:1200px;margin:0 auto;padding:0 40px;
  display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;
}
body[data-page="btv"] .studio-label{
  font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green);margin-bottom:12px;
  display:flex;align-items:center;gap:8px;
}
body[data-page="btv"] .studio-label::before{content:'';display:block;width:20px;height:1px;background:var(--green)}
body[data-page="btv"] .studio-title{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(2.5rem,5vw,4.5rem);
  letter-spacing:.04em;line-height:.95;
  color:var(--fg);margin-bottom:16px;
}
body[data-page="btv"] .studio-title em{color:var(--green);font-style:normal}
body[data-page="btv"] .studio-body{
  font-size:.92rem;color:var(--fg-2);
  line-height:1.8;margin-bottom:14px;font-weight:300;
}
body[data-page="btv"] .studio-facts{display:flex;flex-direction:column;gap:0}
body[data-page="btv"] .studio-fact{
  display:flex;align-items:flex-start;gap:16px;
  padding:16px 0;border-top:1px solid var(--border);
}
body[data-page="btv"] .sf-icon{
  width:36px;height:36px;border-radius:10px;
  background:rgba(0,230,118,.1);
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;flex-shrink:0;
}
body[data-page="btv"] .sf-text{font-size:.82rem;color:var(--fg-2);line-height:1.6}
body[data-page="btv"] .sf-text strong{display:block;color:var(--fg);font-weight:600;margin-bottom:2px}

/* Studio diagram — camera setup visual */
body[data-page="btv"] .studio-visual{
  display:flex;flex-direction:column;gap:16px;
}
body[data-page="btv"] .camera-card{
  background:var(--card);
  border:1px solid var(--border-b);
  border-radius:16px;padding:24px;
  display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;
}
body[data-page="btv"] .cam-icon{
  width:48px;height:48px;border-radius:12px;
  background:var(--bg-3);
  display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;border:1px solid var(--border);
  flex-shrink:0;
}
body[data-page="btv"] .cam-name{
  font-family:'Bebas Neue',sans-serif;
  font-size:1.1rem;letter-spacing:.04em;color:var(--fg);
}
body[data-page="btv"] .cam-spec{font-size:.75rem;color:var(--fg-3);margin-top:2px}
body[data-page="btv"] .cam-status{
  display:inline-flex;align-items:center;gap:4px;
  font-family:'DM Mono',monospace;font-size:.62rem;
  padding:2px 8px;border-radius:8px;margin-top:6px;
}
body[data-page="btv"] .cam-status.online{
  background:rgba(0,230,118,.1);color:var(--green);
  border:1px solid rgba(0,230,118,.2);
}
body[data-page="btv"] .cam-status.standby{
  background:rgba(255,179,0,.1);color:var(--amber);
  border:1px solid rgba(255,179,0,.2);
}
body[data-page="btv"] .cam-status::before{
  content:'';width:4px;height:4px;border-radius:50%;background:currentColor;
  animation:recDot 2s ease-in-out infinite;
}

/* ══════════════════════════════════════════════════
   VIDEO MODAL
══════════════════════════════════════════════════ */
body[data-page="btv"] .modal-overlay{
  position:fixed;inset:0;z-index:2000;
  background:rgba(0,0,0,.92);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease);
}
body[data-page="btv"] .modal-overlay.open{opacity:1;pointer-events:all}
body[data-page="btv"] .modal{
  background:var(--card);
  border:1px solid var(--border-b);
  border-radius:20px;overflow:hidden;
  width:100%;max-width:860px;
  transform:scale(.95);
  transition:transform .35s var(--spring);
  box-shadow:0 60px 160px rgba(0,0,0,.9);
}
body[data-page="btv"] .modal-overlay.open .modal{transform:scale(1)}
body[data-page="btv"] .modal-vid{
  position:relative;width:100%;aspect-ratio:16/9;background:#000;
}
body[data-page="btv"] .modal-vid iframe{
  position:absolute;inset:0;width:100%;height:100%;border:none;
}
body[data-page="btv"] .modal-info{padding:24px 28px}
body[data-page="btv"] .modal-close{
  position:absolute;top:12px;right:12px;z-index:10;
  width:36px;height:36px;border-radius:50%;
  background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.15);
  color:white;display:flex;align-items:center;justify-content:center;
  cursor:pointer;backdrop-filter:blur(8px);transition:all .2s;
}
body[data-page="btv"] .modal-close:hover{transform:rotate(90deg);background:rgba(255,255,255,.15)}
body[data-page="btv"] .modal-close svg{width:14px;height:14px}
body[data-page="btv"] .modal-show{
  font-size:.65rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--green);margin-bottom:8px;
}
body[data-page="btv"] .modal-title{
  font-family:'Bebas Neue',sans-serif;
  font-size:1.8rem;letter-spacing:.04em;
  color:var(--fg);margin-bottom:6px;
}
body[data-page="btv"] .modal-desc{font-size:.85rem;color:var(--fg-2);line-height:1.7;margin-bottom:16px}
body[data-page="btv"] .modal-meta-row{
  display:flex;align-items:center;gap:14px;
  font-family:'DM Mono',monospace;font-size:.68rem;color:var(--fg-3);
  flex-wrap:wrap;
}
body[data-page="btv"] .modal-meta-row .mmr-label{color:var(--fg-2);font-weight:500}

/* ══════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════ */
body[data-page="btv"] footer{background:var(--near-black);padding:40px 0}
body[data-page="btv"] .f-inner{
  max-width:1200px;margin:0 auto;padding:0 40px;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
}
body[data-page="btv"] .f-brand{
  font-family:'Bebas Neue',sans-serif;
  font-size:1.4rem;letter-spacing:.06em;color:white;
}
body[data-page="btv"] .f-copy{font-size:.74rem;color:rgba(255,255,255,.2)}
body[data-page="btv"] .f-home{
  color:rgba(255,255,255,.3);text-decoration:none;
  font-size:.78rem;font-weight:500;transition:color .2s;
}
body[data-page="btv"] .f-home:hover{color:white}

/* ══════════════════════════════════════════════════
   REVEAL
══════════════════════════════════════════════════ */
body[data-page="btv"] .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
body[data-page="btv"] .reveal.visible{opacity:1;transform:none}
body[data-page="btv"] .rd1{transition-delay:.06s}body[data-page="btv"] .rd2{transition-delay:.12s}body[data-page="btv"] .rd3{transition-delay:.18s}

/* ══════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════ */
/* ─── CURSOR SYSTEM ─────────────────────────────────────────── */
html.bc-cursor-active *{ cursor: none !important; }
html.bc-cursor-active input, html.bc-cursor-active textarea, html.bc-cursor-active [contenteditable]{ cursor: text !important; }
#bc-cursor{
  position: fixed; top: 0; left: 0; width: 20px; height: 24px;
  pointer-events: none; z-index: 999999; opacity: 0;
  transition: opacity 0.5s ease; will-change: transform;
}
#bc-cursor svg{
  display: block; width: 20px; height: 24px; transform-origin: 0 0;
  transition: transform 0.16s cubic-bezier(0.25,0.46,0.45,0.94), opacity 0.16s ease;
  will-change: transform;
}
#bc-cursor .arrow-fill{ fill: rgba(255,255,255,0.92); }
#bc-cursor .arrow-stroke{ fill: none; stroke: rgba(0,0,0,0.5); stroke-width: 1px; stroke-linejoin: round; }
#bc-cursor.bc-hover svg{ transform: scale(1.15); }
#bc-cursor.bc-click svg{ transform: scale(0.78); transition: transform 0.07s cubic-bezier(0.34,1.56,0.64,1); }
#bc-cursor.bc-text svg{ opacity: 0; transform: scale(0.6); }
html[data-theme="light"] #bc-cursor .arrow-fill{ fill: rgba(20,20,28,0.88); }
html[data-theme="light"] #bc-cursor .arrow-stroke{ stroke: rgba(255,255,255,0.4); }


/* ── CAPABILITY CARDS (replace camera cards) ─────────────────── */
body[data-page="btv"] .capability-card{
  background: var(--card);
  border: 1px solid var(--border-b);
  border-radius: 16px;
  padding: 22px 24px;
  margin-bottom: 12px;
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
body[data-page="btv"] .capability-card:hover{
  transform: translateY(-3px);
  border-color: rgba(0,230,118,.25);
  box-shadow: 0 12px 40px var(--shadow), 0 0 20px var(--glow);
}
body[data-page="btv"] .cap-icon-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
body[data-page="btv"] .cap-icon{ font-size: 1.6rem; }
body[data-page="btv"] .cap-status{
  font-family: 'DM Mono', monospace;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 8px;
}
body[data-page="btv"] .cap-active{
  background: rgba(0,230,118,.12);
  border: 1px solid rgba(0,230,118,.25);
  color: var(--green);
}
body[data-page="btv"] .cap-live{
  background: rgba(255,23,68,.12);
  border: 1px solid rgba(255,23,68,.25);
  color: var(--red-rec);
  animation: recPulse 2s ease-in-out infinite;
}
body[data-page="btv"] .cap-name{
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.15rem;
  letter-spacing: .04em;
  color: var(--fg);
  margin-bottom: 8px;
}
body[data-page="btv"] .cap-desc{
  font-size: .78rem;
  color: var(--fg-2);
  line-height: 1.65;
  font-weight: 300;
  margin-bottom: 14px;
}
body[data-page="btv"] .cap-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
body[data-page="btv"] .cap-tag{
  font-family: 'DM Mono', monospace;
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(0,230,118,.08);
  color: var(--green);
  border: 1px solid rgba(0,230,118,.15);
}
body[data-page="btv"] .cap-stat-card{
  background: rgba(0,0,0,.3);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
}
html[data-theme="light"] body[data-page="btv"] .cap-stat-card{ background: var(--bg-3); }
body[data-page="btv"] .cap-stat-num{
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2.2rem;
  letter-spacing: .04em;
  color: white;
  line-height: 1;
  margin-bottom: 4px;
}
html[data-theme="light"] body[data-page="btv"] .cap-stat-num{ color: var(--fg); }
body[data-page="btv"] .cap-stat-lbl{
  font-size: .62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.3);
}
html[data-theme="light"] body[data-page="btv"] .cap-stat-lbl{ color: var(--fg-3); }

@media(max-width:960px){

  body[data-page="btv"] .hero-inner{grid-template-columns:1fr;gap:40px;padding:50px 24px 60px}
  body[data-page="btv"] .studio-inner{grid-template-columns:1fr;gap:48px}
  body[data-page="btv"] .ep-grid{grid-template-columns:repeat(2,1fr)}

}
@media(max-width:640px){

  body[data-page="btv"] nav{padding:0 16px}
  body[data-page="btv"] .ep-inner{padding:0 16px}
  body[data-page="btv"] .ep-grid{grid-template-columns:1fr}
  body[data-page="btv"] .ep-controls{gap:8px}
  body[data-page="btv"] .ep-count{display:none}
  body[data-page="btv"] .f-inner{flex-direction:column;align-items:flex-start}
  body[data-page="btv"] .hero-stats{flex-wrap:wrap;gap:20px}

}

/* Only suppress native cursor after JS confirms it loaded.
   If JS never runs, nothing here ever fires. */
html.bc-cursor-active *{
  cursor: none !important;
}

/* Restore I-beam in text fields — users need native precision */
html.bc-cursor-active input, html.bc-cursor-active textarea, html.bc-cursor-active [contenteditable]{
  cursor: text !important;
}

/* ── CURSOR WRAPPER ────────────────────────────────────────────
   Top-left corner of the div = the mouse coordinate.
   SVG tip is drawn at (0,0) — so the visual tip and the
   hot-point are the exact same pixel. No offset required. */
#bc-cursor{
  position: fixed;
  top: 0;
  left: 0;
  width: 20px;
  height: 24px;
  pointer-events: none;
  z-index: 999999;
  opacity: 0;
  transition: opacity 0.5s ease;
  will-change: transform;
}

/* ── THE ARROW SVG ─────────────────────────────────────────────
   transform-origin: 0 0 locks all scale animations to the tip.
   Because the tip IS (0,0) in the viewBox, scale never drifts. */
#bc-cursor svg{
  display: block;
  width: 20px;
  height: 24px;
  transform-origin: 0 0;
  transition:
    transform  0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    opacity    0.16s ease;
  will-change: transform;
}

/* The filled arrow body */
#bc-cursor .arrow-fill{
  fill: rgba(255, 255, 255, 0.92);
  transition: fill 0.16s ease;
}

/* The 1px dark stroke — gives it the OS-cursor depth */
#bc-cursor .arrow-stroke{
  fill: none;
  stroke: rgba(0, 0, 0, 0.55);
  stroke-width: 1px;
  stroke-linejoin: round;
  transition: stroke 0.16s ease;
}

/* ── HOVER STATE ───────────────────────────────────────────────
   Scale up ~15% — just enough to register "ready".
   No color change. Feels like the cursor leaning in. */
#bc-cursor.bc-hover svg{
  transform: scale(1.15);
}

/* ── CLICK STATE ───────────────────────────────────────────────
   Fast compress to 80%, snaps back on mouseup.
   The one moment the cursor makes itself physically felt. */
#bc-cursor.bc-click svg{
  transform: scale(0.78);
  transition:
    transform  0.07s cubic-bezier(0.34, 1.56, 0.64, 1),
    filter     0.07s ease;
}

/* ── TEXT INPUT STATE ──────────────────────────────────────────
   Arrow fades out entirely — native I-beam has control.
   The cursor doesn't compete with text selection. */
#bc-cursor.bc-text svg{
  opacity: 0;
  transform: scale(0.6);
}

/* ── LIGHT THEME ───────────────────────────────────────────────
   Flip fill to dark — same arrow, still readable. */
html[data-theme="light"] #bc-cursor .arrow-fill{
  fill: rgba(20, 20, 28, 0.88);
}
html[data-theme="light"] #bc-cursor .arrow-stroke{
  stroke: rgba(255, 255, 255, 0.45);
}

/* ═══════════════════════════════════════════════════
   PAGE: RADIO (radio.html)
═══════════════════════════════════════════════════ */
/* ─── RESET & BASE ─────────────────────────────────────────── */
*, *::before, *::after{ box-sizing: border-box; margin: 0; padding: 0; }
html{ scroll-behavior: smooth; font-size: 16px; }
body[data-page="radio"]{
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  color: var(--fg);
  overflow-x: hidden;
  transition: background 0.5s ease, color 0.5s ease;
  min-height: 100vh;
}

/* ─── THEME VARIABLES ──────────────────────────────────────── */
body[data-page="radio"]{
  --red: #D0021B;
  --red-bright: #FF1F3D;
  --red-muted: #8B0010;
  --gold: #C9A84C;
  --gold-light: #F0C97A;
  --near-black: #0A0A0B;
  --easing: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

html[data-theme="dark"] body[data-page="radio"]{
  --bg: #0A0A0B;
  --bg-2: #111114;
  --bg-3: #1A1A1E;
  --fg: #F0EDE8;
  --fg-2: #A8A4A0;
  --fg-3: #5A5754;
  --border: rgba(255,255,255,0.08);
  --border-bright: rgba(255,255,255,0.15);
  --shadow: rgba(0,0,0,0.6);
  --glow-red: rgba(208,2,27,0.3);
  --card-bg: rgba(22,22,28,0.95);
  --nav-bg: rgba(10,10,11,0.92);
  --studio-bg: #0E0E12;
}

html[data-theme="light"] body[data-page="radio"]{
  --bg: #F7F5F2;
  --bg-2: #EDEBE7;
  --bg-3: #E2DFD9;
  --fg: #0A0A0B;
  --fg-2: #444240;
  --fg-3: #888580;
  --border: rgba(0,0,0,0.08);
  --border-bright: rgba(0,0,0,0.15);
  --shadow: rgba(0,0,0,0.12);
  --glow-red: rgba(208,2,27,0.15);
  --card-bg: rgba(255,253,250,0.98);
  --nav-bg: rgba(247,245,242,0.92);
  --studio-bg: #1A1A1E;
}

/* ─── RAINBOW BAR ──────────────────────────────────────────── */
body[data-page="radio"] .rainbow-bar{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    #FF3B3B 0%, #FF6B35 12%, #FFD700 25%,
    #51CF66 37%, #339AF0 50%, #845EF7 62%,
    #FF3B3B 75%, #FF6B35 87%, #FFD700 100%);
  background-size: 200% 100%;
  animation: rainbowShift 6s linear infinite;
  z-index: 1000;
}
@keyframes rainbowShift {
  0% { background-position: 0%; }
  100% { background-position: 200%; }
}

/* ─── NAV ──────────────────────────────────────────────────── */
body[data-page="radio"] nav{
  position: fixed;
  top: 3px; left: 0; right: 0;
  height: 62px;
  background: var(--nav-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  z-index: 999;
  transition: background 0.5s ease;
}
body[data-page="radio"] .nav-logo{
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size: 1.2rem;
  color: var(--fg);
  letter-spacing: -0.02em;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
body[data-page="radio"] .nav-logo span{ color: var(--red-bright); }
body[data-page="radio"] .nav-back{
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--fg-2);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  transition: all 0.2s;
}
body[data-page="radio"] .nav-back:hover{ color: var(--fg); background: var(--border); }
body[data-page="radio"] .nav-right{ display: flex; align-items: center; gap: 12px; }
body[data-page="radio"] .theme-toggle{
  background: var(--border);
  border: 1px solid var(--border-bright);
  border-radius: 20px;
  padding: 6px 14px;
  cursor: pointer;
  color: var(--fg-2);
  font-size: 0.78rem;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  transition: all 0.2s;
}
body[data-page="radio"] .theme-toggle:hover{ color: var(--fg); background: var(--border-bright); }

/* ─── HERO / MAIN PLAYER AREA ──────────────────────────────── */
body[data-page="radio"] .radio-hero{
  min-height: 100vh;
  padding-top: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Cinematic background */
body[data-page="radio"] .radio-hero-bg{
  position: absolute;
  inset: 0;
  pointer-events: none;
}
body[data-page="radio"] .rh-orb{
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
}
body[data-page="radio"] .rh-orb-1{
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(208,2,27,0.18), transparent 70%);
  top: -15%; left: -15%;
  animation: rh-drift 20s ease-in-out infinite;
}
body[data-page="radio"] .rh-orb-2{
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(201,168,76,0.1), transparent 70%);
  bottom: 10%; right: 5%;
  animation: rh-drift 16s ease-in-out infinite reverse;
}
body[data-page="radio"] .rh-orb-3{
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(51,154,240,0.06), transparent 70%);
  top: 50%; left: 40%;
  animation: rh-drift 24s ease-in-out infinite;
}
@keyframes rh-drift {
  0%, 100% { transform: translate(0,0); }
  50% { transform: translate(40px,-30px); }
}

/* Scanline texture */
body[data-page="radio"] .radio-hero-bg::after{
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(255,255,255,0.01) 2px,
    rgba(255,255,255,0.01) 4px
  );
  pointer-events: none;
}

body[data-page="radio"] .radio-hero-content{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  max-width: 1100px;
  width: 100%;
  padding: 0 40px;
  z-index: 2;
  animation: heroIn 1s var(--easing) both;
}
@keyframes heroIn {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ─── BIG PLAYER ───────────────────────────────────────────── */
body[data-page="radio"] .big-player{
  background: var(--studio-bg);
  border: 1px solid var(--border-bright);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 40px 120px rgba(0,0,0,0.8), 0 0 0 1px var(--border);
  transition: box-shadow 0.4s;
}
body[data-page="radio"] .big-player.playing{
  box-shadow: 0 40px 120px rgba(0,0,0,0.8), 0 0 80px var(--glow-red);
}

/* Studio glass header */
body[data-page="radio"] .bp-header{
  padding: 24px 28px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
body[data-page="radio"] .bp-dots{ display: flex; gap: 7px; }
body[data-page="radio"] .bp-dot{
  width: 11px; height: 11px;
  border-radius: 50%;
}
body[data-page="radio"] .bp-dot-r{ background: #FF5F57; }
body[data-page="radio"] .bp-dot-y{ background: #FFBD2E; }
body[data-page="radio"] .bp-dot-g{ background: #28CA41; }
body[data-page="radio"] .bp-header-title{
  font-family: 'DM Mono', monospace;
  font-size: 0.68rem;
  color: rgba(255,255,255,0.25);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* VU Meter */
body[data-page="radio"] .vu-meter{
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 32px;
  padding: 8px 28px;
  border-bottom: 1px solid var(--border);
  background: rgba(0,0,0,0.3);
}
body[data-page="radio"] .vu-bar{
  width: 5px;
  background: var(--red);
  border-radius: 2px 2px 0 0;
  transition: height 0.1s ease;
  min-height: 2px;
}

/* Album art area */
body[data-page="radio"] .bp-art{
  width: 100%;
  aspect-ratio: 1;
  max-height: 200px;
  background: linear-gradient(135deg, #1A0A0E 0%, #2A1015 50%, #1A0A0E 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
body[data-page="radio"] .bp-art-disc{
  width: 120px; height: 120px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    #1a1a1a 0deg, #2a2a2a 30deg, #1a1a1a 60deg, #333 90deg,
    #1a1a1a 120deg, #2a2a2a 150deg, #1a1a1a 180deg, #333 210deg,
    #1a1a1a 240deg, #2a2a2a 270deg, #1a1a1a 300deg, #333 330deg, #1a1a1a 360deg
  );
  box-shadow: 0 0 0 3px rgba(208,2,27,0.4), 0 0 40px rgba(208,2,27,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: disc-spin 4s linear infinite paused;
}
body[data-page="radio"] .big-player.playing .bp-art-disc{
  animation-play-state: running;
}
@keyframes disc-spin { to { transform: rotate(360deg); } }
body[data-page="radio"] .bp-art-disc-center{
  width: 36px; height: 36px;
  background: var(--studio-bg);
  border-radius: 50%;
  border: 2px solid rgba(208,2,27,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  color: var(--red-bright);
  font-family: 'DM Mono', monospace;
  font-weight: 500;
  letter-spacing: 0.05em;
  z-index: 1;
}
body[data-page="radio"] .bp-art-glow{
  position: absolute;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(208,2,27,0.15), transparent 70%);
  animation: art-pulse 3s ease-in-out infinite;
  opacity: 0;
  transition: opacity 0.5s;
}
body[data-page="radio"] .big-player.playing .bp-art-glow{ opacity: 1; }
@keyframes art-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

/* Station info */
body[data-page="radio"] .bp-info{
  padding: 24px 28px 20px;
}
body[data-page="radio"] .bp-live{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(208,2,27,0.15);
  border: 1px solid rgba(208,2,27,0.3);
  border-radius: 10px;
  padding: 3px 10px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red-bright);
  margin-bottom: 10px;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
/* Connection state variants — set by JS via data-state attribute. */
body[data-page="radio"] .bp-live[data-state="connecting"],
body[data-page="radio"] .bp-live[data-state="buffering"]{
  background: rgba(255,215,0,0.15);
  border-color: rgba(255,215,0,0.4);
  color: #FFD700;
}
body[data-page="radio"] .bp-live[data-state="connecting"] .bp-live-dot,
body[data-page="radio"] .bp-live[data-state="buffering"] .bp-live-dot{
  background: #FFD700;
  animation: pdot-amber 0.8s ease-in-out infinite;
}
body[data-page="radio"] .bp-live[data-state="error"]{
  background: rgba(120,120,120,0.15);
  border-color: rgba(120,120,120,0.4);
  color: #A8A4A0;
}
body[data-page="radio"] .bp-live[data-state="error"] .bp-live-dot{
  background: #A8A4A0;
  animation: none;
  opacity: 0.6;
}
@keyframes pdot-amber {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,215,0,0.6); }
  50% { box-shadow: 0 0 0 4px rgba(255,215,0,0); }
}
body[data-page="radio"] .bp-live-dot{
  width: 5px; height: 5px;
  background: var(--red-bright);
  border-radius: 50%;
  animation: pdot 1.5s ease-in-out infinite;
}
@keyframes pdot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,31,61,0.6); }
  50% { box-shadow: 0 0 0 4px rgba(255,31,61,0); }
}
body[data-page="radio"] .bp-station{
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem;
  font-weight: 900;
  color: white;
  letter-spacing: -0.03em;
  margin-bottom: 4px;
}
body[data-page="radio"] .bp-now{
  font-size: 0.8rem;
  color: rgba(255,255,255,0.4);
  font-family: 'DM Mono', monospace;
  letter-spacing: 0.04em;
}

/* Controls */
body[data-page="radio"] .bp-controls{
  padding: 20px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
body[data-page="radio"] .bp-main-controls{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
body[data-page="radio"] .bp-play-btn{
  width: 72px; height: 72px;
  background: var(--red);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s var(--easing-spring);
  box-shadow: 0 4px 24px rgba(208,2,27,0.5);
  position: relative;
}
body[data-page="radio"] .bp-play-btn:hover{
  background: var(--red-bright);
  transform: scale(1.1);
  box-shadow: 0 8px 40px rgba(208,2,27,0.7);
}
body[data-page="radio"] .bp-play-btn:active{ transform: scale(0.95); }
body[data-page="radio"] .bp-play-btn svg{ width: 28px; height: 28px; fill: white; }
body[data-page="radio"] .bp-play-btn .bpp-pause{ display: none; }
body[data-page="radio"] .bp-play-btn.playing .bpp-play{ display: none; }
body[data-page="radio"] .bp-play-btn.playing .bpp-pause{ display: block; }

body[data-page="radio"] .bp-play-btn::after{
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--red);
  opacity: 0;
}
body[data-page="radio"] .bp-play-btn.playing::after{
  animation: bp-ripple 2s ease-out infinite;
}
@keyframes bp-ripple {
  0% { inset: -6px; opacity: 0.5; }
  100% { inset: -24px; opacity: 0; }
}

body[data-page="radio"] .bp-side-btn{
  width: 44px; height: 44px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.4);
  transition: all 0.2s;
}
body[data-page="radio"] .bp-side-btn:hover{
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.7);
}
body[data-page="radio"] .bp-side-btn svg{ width: 18px; height: 18px; }

/* Volume */
body[data-page="radio"] .bp-volume{
  display: flex;
  align-items: center;
  gap: 12px;
}
body[data-page="radio"] .vol-icon{ color: rgba(255,255,255,0.3); flex-shrink: 0; }
body[data-page="radio"] .vol-icon svg{ width: 16px; height: 16px; }
body[data-page="radio"] .vol-slider{
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 3px;
  background: rgba(255,255,255,0.12);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}
body[data-page="radio"] .vol-slider::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 0 6px rgba(255,255,255,0.4);
  cursor: pointer;
  transition: transform 0.15s;
}
body[data-page="radio"] .vol-slider::-webkit-slider-thumb:hover{ transform: scale(1.3); }
body[data-page="radio"] .vol-pct{
  font-family: 'DM Mono', monospace;
  font-size: 0.68rem;
  color: rgba(255,255,255,0.3);
  width: 32px;
  text-align: right;
}

/* ─── HERO RIGHT COLUMN ──────────────────────────────────────── */
body[data-page="radio"] .hero-right{
  display: flex;
  flex-direction: column;
  gap: 28px;
}

body[data-page="radio"] .hero-right-header{
  animation: heroIn 1s var(--easing) 0.2s both;
}
body[data-page="radio"] .hr-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 14px;
}
body[data-page="radio"] .hr-eyebrow::before{
  content: '';
  display: block;
  width: 20px; height: 1px;
  background: var(--red);
}
body[data-page="radio"] .hr-title{
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.2rem, 4vw, 3.6rem);
  font-weight: 900;
  color: var(--fg);
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: 12px;
}
body[data-page="radio"] .hr-title em{ color: var(--red-bright); font-style: italic; }
body[data-page="radio"] .hr-sub{
  font-size: 0.95rem;
  color: var(--fg-2);
  line-height: 1.7;
  font-weight: 300;
  max-width: 380px;
}

/* Stats row */
body[data-page="radio"] .stats-row{
  display: flex;
  gap: 32px;
  padding: 24px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  animation: heroIn 1s var(--easing) 0.3s both;
}
body[data-page="radio"] .stat-item{}
body[data-page="radio"] .stat-val{
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  font-weight: 900;
  color: var(--fg);
  letter-spacing: -0.04em;
  line-height: 1;
}
body[data-page="radio"] .stat-val em{ color: var(--red-bright); font-style: normal; }
body[data-page="radio"] .stat-lbl{
  font-size: 0.72rem;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  margin-top: 4px;
}

/* Signal strength widget */
body[data-page="radio"] .signal-widget{
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 20px 24px;
  animation: heroIn 1s var(--easing) 0.4s both;
}
body[data-page="radio"] .sw-title{
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
body[data-page="radio"] .sw-online{
  color: #51CF66;
  display: flex;
  align-items: center;
  gap: 4px;
}
body[data-page="radio"] .sw-online::before{
  content: '';
  display: block;
  width: 5px; height: 5px;
  background: #51CF66;
  border-radius: 50%;
  animation: pdot 2s ease-in-out infinite;
}
body[data-page="radio"] .signal-bars{
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 36px;
  margin-bottom: 10px;
}
body[data-page="radio"] .sig-bar{
  flex: 1;
  border-radius: 3px 3px 0 0;
  background: var(--border-bright);
  transition: all 0.3s;
}
body[data-page="radio"] .sig-bar.active{ background: var(--red); }
body[data-page="radio"] .sig-bar:nth-child(1){ height: 20%; }
body[data-page="radio"] .sig-bar:nth-child(2){ height: 35%; }
body[data-page="radio"] .sig-bar:nth-child(3){ height: 50%; }
body[data-page="radio"] .sig-bar:nth-child(4){ height: 65%; }
body[data-page="radio"] .sig-bar:nth-child(5){ height: 80%; }
body[data-page="radio"] .sig-bar:nth-child(6){ height: 95%; }
body[data-page="radio"] .sig-bar:nth-child(7){ height: 100%; }
body[data-page="radio"] .sw-freq{
  font-family: 'DM Mono', monospace;
  font-size: 0.75rem;
  color: var(--fg-3);
}
body[data-page="radio"] .sw-freq span{ color: var(--fg); font-weight: 500; }

/* ─── FULL SPECTRUM VISUALIZER ──────────────────────────────── */
body[data-page="radio"] .spectrum-section{
  background: var(--bg-2);
  padding: 60px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
body[data-page="radio"] .spectrum-inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 40px;
}
body[data-page="radio"] .spectrum-label{
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
body[data-page="radio"] .spectrum-canvas-wrap{
  background: var(--studio-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px 20px 8px;
  overflow: hidden;
}
body[data-page="radio"] .spectrum-bars{
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 80px;
}
body[data-page="radio"] .spec-bar{
  flex: 1;
  background: linear-gradient(180deg, var(--red-bright), var(--red-muted));
  border-radius: 2px 2px 0 0;
  min-height: 2px;
  transition: height 0.08s ease;
  opacity: 0.8;
}
body[data-page="radio"] .spectrum-freq-labels{
  display: flex;
  justify-content: space-between;
  padding: 8px 0 0;
  font-family: 'DM Mono', monospace;
  font-size: 0.58rem;
  color: var(--fg-3);
}

/* ─── SCHEDULE TABLE ─────────────────────────────────────────── */
body[data-page="radio"] .schedule-section{
  padding: 100px 0;
  background: var(--bg);
}
body[data-page="radio"] .sched-inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 40px;
}
body[data-page="radio"] .section-label{
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
body[data-page="radio"] .section-label::before{
  content: '';
  display: block;
  width: 24px; height: 1px;
  background: var(--red);
}
body[data-page="radio"] .section-title{
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--fg);
  margin-bottom: 12px;
}
body[data-page="radio"] .section-title em{ color: var(--red-bright); font-style: italic; }
body[data-page="radio"] .section-sub{
  font-size: 1rem;
  color: var(--fg-2);
  line-height: 1.7;
  max-width: 480px;
  font-weight: 300;
  margin-bottom: 48px;
}

/* Day tabs */
body[data-page="radio"] .day-tabs{
  display: flex;
  gap: 4px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
body[data-page="radio"] .day-tab{
  background: none;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 7px 18px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--fg-2);
  cursor: pointer;
  transition: all 0.2s;
}
body[data-page="radio"] .day-tab:hover{ color: var(--fg); border-color: var(--border-bright); }
body[data-page="radio"] .day-tab.active{
  background: var(--red);
  border-color: var(--red);
  color: white;
}

/* Schedule grid */
body[data-page="radio"] .schedule-grid{
  display: flex;
  flex-direction: column;
  gap: 0;
}
body[data-page="radio"] .sched-row{
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
  transition: all 0.2s;
  position: relative;
}
body[data-page="radio"] .sched-row::before{
  content: '';
  position: absolute;
  left: -20px; top: 0; bottom: 0;
  width: 3px;
  background: var(--red);
  border-radius: 0 3px 3px 0;
  opacity: 0;
  transition: opacity 0.2s;
}
body[data-page="radio"] .sched-row:hover::before{ opacity: 1; }
body[data-page="radio"] .sched-row:hover .sched-show{ color: var(--red-bright); }
body[data-page="radio"] .sched-row.current{
  background: rgba(208,2,27,0.04);
  padding: 20px 16px;
  border-radius: 12px;
  border-bottom-color: transparent;
  margin-bottom: 2px;
}
body[data-page="radio"] .sched-row.current::before{ opacity: 1; }

body[data-page="radio"] .sched-time{
  font-family: 'DM Mono', monospace;
  font-size: 0.8rem;
  color: var(--fg-3);
  flex-shrink: 0;
}
body[data-page="radio"] .sched-row.current .sched-time{ color: var(--red); }
body[data-page="radio"] .sched-info{}
body[data-page="radio"] .sched-show{
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 3px;
  transition: color 0.2s;
}
body[data-page="radio"] .sched-host{
  font-size: 0.78rem;
  color: var(--fg-3);
}
body[data-page="radio"] .sched-genre{
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 10px;
  flex-shrink: 0;
}
body[data-page="radio"] .genre-news{ background: rgba(51,154,240,0.1); color: #339AF0; }
body[data-page="radio"] .genre-music{ background: rgba(132,94,247,0.1); color: #845EF7; }
body[data-page="radio"] .genre-sports{ background: rgba(255,107,53,0.1); color: #FF6B35; }
body[data-page="radio"] .genre-talk{ background: rgba(81,207,102,0.1); color: #51CF66; }
body[data-page="radio"] .genre-live{ background: rgba(208,2,27,0.12); color: var(--red-bright); }

body[data-page="radio"] .on-air-badge{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(208,2,27,0.15);
  border: 1px solid rgba(208,2,27,0.3);
  border-radius: 10px;
  padding: 3px 10px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red-bright);
  margin-left: 10px;
  vertical-align: middle;
}
body[data-page="radio"] .oab-dot{
  width: 5px; height: 5px;
  background: var(--red-bright);
  border-radius: 50%;
  animation: pdot 1.5s ease-in-out infinite;
}

/* ─── SHOWS SPOTLIGHT ──────────────────────────────────────── */
body[data-page="radio"] .shows-section{
  padding: 100px 0;
  background: var(--bg-2);
}
body[data-page="radio"] .shows-inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 40px;
}
body[data-page="radio"] .shows-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
}
body[data-page="radio"] .show-card{
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  transition: all 0.35s var(--easing);
  cursor: default;
}
body[data-page="radio"] .show-card:hover{
  transform: translateY(-6px);
  border-color: var(--border-bright);
  box-shadow: 0 20px 60px var(--shadow);
}
body[data-page="radio"] .show-card-header{
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  font-size: 2.5rem;
}
body[data-page="radio"] .show-card-header::before{
  content: '';
  position: absolute;
  inset: 0;
  background: var(--show-color, rgba(208,2,27,0.15));
}
body[data-page="radio"] .show-card-body{ padding: 20px; }
body[data-page="radio"] .show-name{
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--fg);
  margin-bottom: 4px;
}
body[data-page="radio"] .show-time{
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  color: var(--red);
  margin-bottom: 8px;
}
body[data-page="radio"] .show-desc{
  font-size: 0.8rem;
  color: var(--fg-2);
  line-height: 1.6;
}
body[data-page="radio"] .show-host-line{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
body[data-page="radio"] .show-host-avatar{
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--bg-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
}
body[data-page="radio"] .show-host-name{
  font-size: 0.75rem;
  color: var(--fg-3);
  font-weight: 500;
}

/* ─── RECENT TRACKS ──────────────────────────────────────────── */
body[data-page="radio"] .tracks-section{
  padding: 100px 0;
  background: var(--bg);
}
body[data-page="radio"] .tracks-inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 40px;
}
body[data-page="radio"] .tracks-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  margin-top: 48px;
  align-items: start;
}
body[data-page="radio"] .track-list{ display: flex; flex-direction: column; gap: 0; }
body[data-page="radio"] .track-item{
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  transition: all 0.2s;
}
body[data-page="radio"] .track-item:hover{ padding-left: 8px; }
body[data-page="radio"] .track-num{
  font-family: 'DM Mono', monospace;
  font-size: 0.68rem;
  color: var(--fg-3);
  width: 20px;
  flex-shrink: 0;
  text-align: center;
}
body[data-page="radio"] .track-item.current .track-num{
  color: var(--red-bright);
}
body[data-page="radio"] .track-art{
  width: 40px; height: 40px;
  border-radius: 8px;
  background: var(--bg-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
body[data-page="radio"] .track-art-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
body[data-page="radio"] .track-item.current .track-art::after{
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 10px;
  border: 1.5px solid var(--red);
  animation: track-pulse 2s ease-in-out infinite;
}
@keyframes track-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
body[data-page="radio"] .track-info{ flex: 1; min-width: 0; }
body[data-page="radio"] .track-title{
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}
body[data-page="radio"] .track-item.current .track-title{ color: var(--red-bright); }
body[data-page="radio"] .track-artist{
  font-size: 0.75rem;
  color: var(--fg-3);
}
body[data-page="radio"] .track-played{
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  color: var(--fg-3);
  flex-shrink: 0;
}

/* Requests panel */
body[data-page="radio"] .requests-panel{
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px;
  position: sticky;
  top: 80px;
}
body[data-page="radio"] .rp-title{
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--fg);
  margin-bottom: 6px;
}
body[data-page="radio"] .rp-sub{ font-size: 0.82rem; color: var(--fg-2); margin-bottom: 24px; line-height: 1.6; }

body[data-page="radio"] .rp-input{
  width: 100%;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
  color: var(--fg);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.88rem;
  outline: none;
  transition: border-color 0.2s;
  margin-bottom: 10px;
}
body[data-page="radio"] .rp-input::placeholder{ color: var(--fg-3); }
body[data-page="radio"] .rp-input:focus{ border-color: var(--red); }

body[data-page="radio"] .rp-submit{
  width: 100%;
  background: var(--red);
  color: white;
  border: none;
  border-radius: 10px;
  padding: 12px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 4px;
}
body[data-page="radio"] .rp-submit:hover{ background: var(--red-bright); transform: translateY(-1px); }

body[data-page="radio"] .rp-divider{
  border: none;
  border-top: 1px solid var(--border);
  margin: 24px 0;
}
body[data-page="radio"] .rp-social-label{
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 12px;
}
body[data-page="radio"] .rp-social{
  display: flex;
  gap: 8px;
}
body[data-page="radio"] .rp-social-btn{
  flex: 1;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  text-align: center;
  font-size: 0.75rem;
  color: var(--fg-2);
  text-decoration: none;
  transition: all 0.2s;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  font-weight: 500;
}
body[data-page="radio"] .rp-social-btn:hover{ color: var(--fg); border-color: var(--border-bright); }

/* ─── DJ BOOTH / ABOUT ───────────────────────────────────────── */
body[data-page="radio"] .about-section{
  padding: 100px 0;
  background: var(--studio-bg);
  position: relative;
  overflow: hidden;
}
html[data-theme="light"] body[data-page="radio"] .about-section{ background: #111114; }

body[data-page="radio"] .about-section::before{
  content: '';
  position: absolute;
  top: -100px; left: -100px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(208,2,27,0.12), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
body[data-page="radio"] .about-inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 40px;
}
body[data-page="radio"] .about-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
body[data-page="radio"] .about-visual{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Retro radio illustration */
body[data-page="radio"] .retro-radio{
  width: 240px; height: 200px;
  background: linear-gradient(145deg, #2a1215, #1a0a0e);
  border-radius: 24px;
  border: 2px solid rgba(208,2,27,0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.8), 0 0 40px rgba(208,2,27,0.1);
  position: relative;
}
body[data-page="radio"] .retro-screen{
  width: 160px; height: 60px;
  background: #0a1a0a;
  border-radius: 8px;
  border: 1px solid rgba(51,204,51,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
body[data-page="radio"] .retro-screen::before{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,255,0,0.02) 50%, transparent 50%);
  background-size: 100% 4px;
  pointer-events: none;
}
body[data-page="radio"] .retro-freq-display{
  font-family: 'DM Mono', monospace;
  font-size: 1.4rem;
  color: #33cc33;
  text-shadow: 0 0 10px rgba(51,204,51,0.6);
  letter-spacing: 0.05em;
}
body[data-page="radio"] .retro-controls{
  display: flex;
  gap: 10px;
  align-items: center;
}
body[data-page="radio"] .retro-knob{
  width: 28px; height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #555, #222);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
  cursor: pointer;
  transition: transform 0.3s;
  position: relative;
}
body[data-page="radio"] .retro-knob::after{
  content: '';
  position: absolute;
  top: 4px; left: 50%;
  transform: translateX(-50%);
  width: 2px; height: 8px;
  background: rgba(255,255,255,0.4);
  border-radius: 2px;
}
body[data-page="radio"] .retro-knob:hover{ transform: rotate(30deg); }
body[data-page="radio"] .retro-speaker{
  display: flex;
  gap: 4px;
}
body[data-page="radio"] .retro-speaker-hole{
  width: 3px; height: 20px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
}
body[data-page="radio"] .about-text{}
body[data-page="radio"] .about-text-heading{
  font-family: 'Playfair Display', serif;
  font-size: 2.4rem;
  font-weight: 900;
  color: white;
  letter-spacing: -0.04em;
  line-height: 1.1;
  margin-bottom: 16px;
}
body[data-page="radio"] .about-text-heading em{ color: var(--red-bright); font-style: italic; }
body[data-page="radio"] .about-text-body{
  font-size: 0.92rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.8;
  margin-bottom: 14px;
  font-weight: 300;
}
body[data-page="radio"] .about-fact{
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid rgba(255,255,255,0.05);
}
body[data-page="radio"] .af-icon{
  width: 32px; height: 32px;
  border-radius: 10px;
  background: rgba(208,2,27,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: 2px;
}
body[data-page="radio"] .af-text{ font-size: 0.82rem; color: rgba(255,255,255,0.45); line-height: 1.6; }
body[data-page="radio"] .af-text strong{ display: block; color: rgba(255,255,255,0.75); font-weight: 600; margin-bottom: 2px; }

/* ─── FOOTER (compact) ───────────────────────────────────────── */
body[data-page="radio"] footer{
  background: var(--near-black);
  padding: 40px 0;
}
body[data-page="radio"] .footer-inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
body[data-page="radio"] .footer-brand{
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  font-weight: 900;
  color: white;
}
body[data-page="radio"] .footer-copy{ font-size: 0.78rem; color: rgba(255,255,255,0.25); }
body[data-page="radio"] .footer-home{
  color: rgba(255,255,255,0.35);
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 500;
  transition: color 0.2s;
}
body[data-page="radio"] .footer-home:hover{ color: white; }

/* ─── REVEAL ─────────────────────────────────────────────────── */
body[data-page="radio"] .reveal{
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s var(--easing), transform 0.8s var(--easing);
}
body[data-page="radio"] .reveal.visible{ opacity: 1; transform: translateY(0); }
body[data-page="radio"] .reveal-d1{ transition-delay: 0.1s; }
body[data-page="radio"] .reveal-d2{ transition-delay: 0.2s; }
body[data-page="radio"] .reveal-d3{ transition-delay: 0.3s; }

/* ─── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 900px) {

  body[data-page="radio"] .radio-hero-content{ grid-template-columns: 1fr; gap: 40px; padding: 60px 24px 40px; }
  body[data-page="radio"] .about-grid{ grid-template-columns: 1fr; gap: 48px; }
  body[data-page="radio"] .shows-grid{ grid-template-columns: repeat(2, 1fr); }
  body[data-page="radio"] .tracks-grid{ grid-template-columns: 1fr; }
  body[data-page="radio"] .requests-panel{ position: static; }

}
@media (max-width: 600px) {

  body[data-page="radio"] nav{ padding: 0 20px; }
  body[data-page="radio"] .sched-inner, body[data-page="radio"] .shows-inner, body[data-page="radio"] .tracks-inner, body[data-page="radio"] .about-inner, body[data-page="radio"] .spectrum-inner{ padding: 0 20px; }
  body[data-page="radio"] .schedule-section, body[data-page="radio"] .shows-section, body[data-page="radio"] .tracks-section, body[data-page="radio"] .about-section{ padding: 70px 0; }
  body[data-page="radio"] .shows-grid{ grid-template-columns: 1fr; }
  body[data-page="radio"] .footer-inner{ flex-direction: column; align-items: flex-start; }
  body[data-page="radio"] .big-player{ max-width: 100%; }

}

/* Only suppress native cursor after JS confirms it loaded.
   If JS never runs, nothing here ever fires. */
html.bc-cursor-active *{
  cursor: none !important;
}

/* Restore I-beam in text fields — users need native precision */
html.bc-cursor-active input, html.bc-cursor-active textarea, html.bc-cursor-active [contenteditable]{
  cursor: text !important;
}

/* ── CURSOR WRAPPER ────────────────────────────────────────────
   Top-left corner of the div = the mouse coordinate.
   SVG tip is drawn at (0,0) — so the visual tip and the
   hot-point are the exact same pixel. No offset required. */
#bc-cursor{
  position: fixed;
  top: 0;
  left: 0;
  width: 20px;
  height: 24px;
  pointer-events: none;
  z-index: 999999;
  opacity: 0;
  transition: opacity 0.5s ease;
  will-change: transform;
}

/* ── THE ARROW SVG ─────────────────────────────────────────────
   transform-origin: 0 0 locks all scale animations to the tip.
   Because the tip IS (0,0) in the viewBox, scale never drifts. */
#bc-cursor svg{
  display: block;
  width: 20px;
  height: 24px;
  transform-origin: 0 0;
  transition:
    transform  0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    opacity    0.16s ease;
  will-change: transform;
}

/* The filled arrow body */
#bc-cursor .arrow-fill{
  fill: rgba(255, 255, 255, 0.92);
  transition: fill 0.16s ease;
}

/* The 1px dark stroke — gives it the OS-cursor depth */
#bc-cursor .arrow-stroke{
  fill: none;
  stroke: rgba(0, 0, 0, 0.55);
  stroke-width: 1px;
  stroke-linejoin: round;
  transition: stroke 0.16s ease;
}

/* ── HOVER STATE ───────────────────────────────────────────────
   Scale up ~15% — just enough to register "ready".
   No color change. Feels like the cursor leaning in. */
#bc-cursor.bc-hover svg{
  transform: scale(1.15);
}

/* ── CLICK STATE ───────────────────────────────────────────────
   Fast compress to 80%, snaps back on mouseup.
   The one moment the cursor makes itself physically felt. */
#bc-cursor.bc-click svg{
  transform: scale(0.78);
  transition:
    transform  0.07s cubic-bezier(0.34, 1.56, 0.64, 1),
    filter     0.07s ease;
}

/* ── TEXT INPUT STATE ──────────────────────────────────────────
   Arrow fades out entirely — native I-beam has control.
   The cursor doesn't compete with text selection. */
#bc-cursor.bc-text svg{
  opacity: 0;
  transform: scale(0.6);
}

/* ── LIGHT THEME ───────────────────────────────────────────────
   Flip fill to dark — same arrow, still readable. */
html[data-theme="light"] #bc-cursor .arrow-fill{
  fill: rgba(20, 20, 28, 0.88);
}
html[data-theme="light"] #bc-cursor .arrow-stroke{
  stroke: rgba(255, 255, 255, 0.45);
}

/* ═══════════════════════════════════════════════════
   PAGE: MUSIC (music.html)
═══════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════
   RESET
══════════════════════════════════════════════════ */
*, *::before, *::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body[data-page="music"]{
  font-family:'DM Sans',sans-serif;
  background:var(--bg);color:var(--fg);
  overflow-x:hidden;
  transition:background .45s,color .45s;
  min-height:100vh;
}
body[data-page="music"] button, body[data-page="music"] input, body[data-page="music"] select{font-family:inherit}

/* ══════════════════════════════════════════════════
   TOKENS
══════════════════════════════════════════════════ */
body[data-page="music"]{
  --violet:#845EF7;
  --violet-bright:#9B7FFF;
  --violet-muted:#4A3080;
  --violet-dark:#1A0D3A;
  --pink:#FF6B9D;
  --gold:#C9A84C;
  --near-black:#06050C;
  --ease:cubic-bezier(.25,.46,.45,.94);
  --spring:cubic-bezier(.34,1.56,.64,1);
}
html[data-theme="dark"] body[data-page="music"]{
  --bg:#06050C;
  --bg-2:#0E0C1A;
  --bg-3:#181428;
  --fg:#EDE8F8;
  --fg-2:#9A94B8;
  --fg-3:#4E4868;
  --border:rgba(132,94,247,.1);
  --border-b:rgba(132,94,247,.2);
  --shadow:rgba(0,0,0,.75);
  --glow:rgba(132,94,247,.25);
  --glow-pink:rgba(255,107,157,.15);
  --card:rgba(14,12,26,.97);
  --nav-bg:rgba(6,5,12,.94);
  --overlay:rgba(4,3,9,.96);
}
html[data-theme="light"] body[data-page="music"]{
  --bg:#F4F0FF;
  --bg-2:#EAE4FB;
  --bg-3:#DDD4F7;
  --fg:#120E24;
  --fg-2:#3D3660;
  --fg-3:#8A82AA;
  --border:rgba(132,94,247,.12);
  --border-b:rgba(132,94,247,.22);
  --shadow:rgba(80,50,150,.1);
  --glow:rgba(132,94,247,.15);
  --glow-pink:rgba(255,107,157,.1);
  --card:rgba(255,252,255,.99);
  --nav-bg:rgba(244,240,255,.95);
  --overlay:rgba(238,234,252,.97);
}

/* ══════════════════════════════════════════════════
   RAINBOW BAR
══════════════════════════════════════════════════ */
body[data-page="music"] .rainbow-bar{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:1001;
  background:linear-gradient(90deg,
    #FF3B3B 0%,#FF6B35 14%,#FFD700 28%,
    #51CF66 42%,#339AF0 56%,#845EF7 70%,
    #FF3B3B 84%,#FF6B35 100%);
  background-size:200% 100%;
  animation:rbShift 6s linear infinite;
}
@keyframes rbShift{to{background-position:200% 0}}

/* ══════════════════════════════════════════════════
   NAV
══════════════════════════════════════════════════ */
body[data-page="music"] nav{
  position:fixed;top:3px;left:0;right:0;height:60px;z-index:1000;
  background:var(--nav-bg);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 32px;transition:background .45s;
}
body[data-page="music"] .nav-logo{
  font-family:'Cormorant Garamond',serif;
  font-weight:700;font-size:1.35rem;
  color:var(--fg);text-decoration:none;
  letter-spacing:-.01em;
  display:flex;align-items:center;gap:10px;
}
body[data-page="music"] .nav-logo .logo-accent{color:var(--violet-bright);font-style:italic}
body[data-page="music"] .nav-right{display:flex;align-items:center;gap:10px}
body[data-page="music"] .nav-pill{
  background:var(--border);border:1px solid var(--border-b);
  border-radius:20px;padding:6px 14px;
  font-size:.78rem;font-weight:500;color:var(--fg-2);
  cursor:pointer;text-decoration:none;transition:all .2s;
}
body[data-page="music"] .nav-pill:hover{color:var(--fg);background:var(--border-b)}

/* ══════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════ */
body[data-page="music"] .hero{
  min-height:100vh;padding-top:63px;
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
}

/* Vinyl record ambient art */
body[data-page="music"] .hero-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
body[data-page="music"] .vinyl-orb{
  position:absolute;border-radius:50%;
  border:1px solid rgba(132,94,247,.06);
}
body[data-page="music"] .vinyl-orb-1{
  width:600px;height:600px;
  top:50%;left:60%;
  transform:translate(-50%,-50%);
  background:conic-gradient(
    from 0deg,
    rgba(132,94,247,.04) 0deg,
    rgba(255,107,157,.03) 60deg,
    rgba(132,94,247,.06) 120deg,
    rgba(201,168,76,.03) 180deg,
    rgba(132,94,247,.04) 240deg,
    rgba(255,107,157,.02) 300deg,
    rgba(132,94,247,.04) 360deg
  );
  animation:vinylSpin 40s linear infinite;
}
body[data-page="music"] .vinyl-orb-2{
  width:900px;height:900px;
  top:50%;left:60%;
  transform:translate(-50%,-50%);
  background:conic-gradient(
    from 0deg,
    rgba(132,94,247,.02) 0deg,
    transparent 180deg,
    rgba(132,94,247,.02) 360deg
  );
  animation:vinylSpin 80s linear infinite reverse;
}
@keyframes vinylSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* Glow pools */
body[data-page="music"] .glow-pool{
  position:absolute;border-radius:50%;filter:blur(100px);pointer-events:none;
}
body[data-page="music"] .gp-1{width:500px;height:500px;background:rgba(132,94,247,.12);top:-10%;left:-10%;animation:gpDrift 20s ease-in-out infinite}
body[data-page="music"] .gp-2{width:350px;height:350px;background:rgba(255,107,157,.07);bottom:10%;right:5%;animation:gpDrift 16s ease-in-out infinite reverse}
body[data-page="music"] .gp-3{width:250px;height:250px;background:rgba(201,168,76,.05);top:30%;left:35%;animation:gpDrift 24s ease-in-out infinite 5s}
@keyframes gpDrift{0%,100%{transform:translate(0,0)}50%{transform:translate(25px,-20px)}}

/* Noise grain */
body[data-page="music"] .hero-bg::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  opacity:.5;
}

body[data-page="music"] .hero-inner{
  position:relative;z-index:2;
  max-width:1200px;width:100%;padding:0 40px;
  display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;
  animation:heroIn 1s var(--ease) both;
}
@keyframes heroIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}

/* ── Left: text ──────────────────────────────── */
body[data-page="music"] .hero-text{}
body[data-page="music"] .hero-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(132,94,247,.12);border:1px solid rgba(132,94,247,.25);
  border-radius:20px;padding:5px 14px;
  font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--violet-bright);margin-bottom:22px;
}
body[data-page="music"] .hero-title{
  font-family:'Cormorant Garamond',serif;
  font-weight:700;
  font-size:clamp(3.2rem,8vw,7rem);
  line-height:.92;letter-spacing:-.04em;
  color:var(--fg);margin-bottom:18px;
}
body[data-page="music"] .hero-title em{color:var(--violet-bright);font-style:italic}
body[data-page="music"] .hero-sub{
  font-size:1rem;color:var(--fg-2);
  line-height:1.75;font-weight:300;
  max-width:420px;margin-bottom:36px;
}
body[data-page="music"] .hero-stats{
  display:flex;gap:36px;
  padding-top:28px;border-top:1px solid var(--border);
}
body[data-page="music"] .hs-num{
  font-family:'Cormorant Garamond',serif;
  font-size:2.6rem;font-weight:700;
  color:var(--fg);letter-spacing:-.04em;line-height:1;
}
body[data-page="music"] .hs-num em{color:var(--violet-bright);font-style:normal}
body[data-page="music"] .hs-lbl{font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.09em;color:var(--fg-3);margin-top:4px}

/* ── Right: featured card ────────────────────── */
body[data-page="music"] .hero-featured{animation:heroIn 1s var(--ease) .18s both}
body[data-page="music"] .feat-card{
  background:var(--card);
  border:1px solid var(--border-b);
  border-radius:24px;overflow:hidden;
  cursor:pointer;
  box-shadow:0 30px 80px var(--shadow),0 0 0 1px var(--border);
  transition:transform .35s var(--ease),box-shadow .35s;
}
body[data-page="music"] .feat-card:hover{
  transform:translateY(-6px) scale(1.01);
  box-shadow:0 40px 100px var(--shadow),0 0 60px var(--glow);
}
body[data-page="music"] .feat-thumb{
  width:100%;aspect-ratio:16/9;
  background:linear-gradient(135deg,var(--violet-dark),#0A0518,#1A0830);
  display:flex;align-items:center;justify-content:center;
  font-size:5rem;position:relative;overflow:hidden;
}
body[data-page="music"] .feat-thumb::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,var(--card) 100%);
}
body[data-page="music"] .feat-thumb-emoji{position:relative;z-index:1}
body[data-page="music"] .feat-body{padding:22px 26px 26px}
body[data-page="music"] .feat-section{
  font-size:.64rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--violet-bright);
  margin-bottom:8px;display:flex;align-items:center;gap:6px;
}
body[data-page="music"] .feat-section::before{content:'';display:block;width:14px;height:1px;background:var(--violet-bright)}
body[data-page="music"] .feat-title{
  font-family:'Cormorant Garamond',serif;
  font-size:1.4rem;font-weight:700;
  color:var(--fg);line-height:1.2;
  letter-spacing:-.02em;margin-bottom:8px;
}
body[data-page="music"] .feat-excerpt{font-size:.8rem;color:var(--fg-2);line-height:1.7;margin-bottom:14px}
body[data-page="music"] .feat-meta{
  display:flex;align-items:center;gap:12px;
  font-size:.7rem;color:var(--fg-3);
}
body[data-page="music"] .feat-author{color:var(--fg-2);font-weight:500}
body[data-page="music"] .feat-arrow{
  margin-left:auto;color:var(--violet-bright);
  font-weight:600;font-size:.78rem;
  display:flex;align-items:center;gap:4px;
  transition:gap .2s;
}
body[data-page="music"] .feat-card:hover .feat-arrow{gap:8px}

/* ══════════════════════════════════════════════════
   DUAL-MODE TAB BAR
══════════════════════════════════════════════════ */
body[data-page="music"] .mode-bar{
  background:var(--bg-2);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  position:sticky;top:63px;z-index:900;
  transition:background .45s;
}
body[data-page="music"] .mode-bar-inner{
  max-width:1200px;margin:0 auto;padding:0 40px;
  display:flex;align-items:center;gap:0;
}
body[data-page="music"] .mode-tab{
  display:flex;align-items:center;gap:8px;
  padding:0 32px;height:54px;
  font-size:.88rem;font-weight:600;
  color:var(--fg-2);cursor:pointer;
  background:none;border:none;
  border-bottom:3px solid transparent;
  transition:all .25s;letter-spacing:.01em;
  white-space:nowrap;
}
body[data-page="music"] .mode-tab .mt-icon{font-size:1.1rem}
body[data-page="music"] .mode-tab .mt-count{
  font-family:'DM Mono',monospace;font-size:.65rem;
  background:var(--border-b);border-radius:10px;
  padding:2px 8px;color:var(--fg-3);
  transition:all .25s;
}
body[data-page="music"] .mode-tab:hover{color:var(--fg)}
body[data-page="music"] .mode-tab.active{
  color:var(--violet-bright);
  border-bottom-color:var(--violet-bright);
}
body[data-page="music"] .mode-tab.active .mt-count{
  background:rgba(132,94,247,.2);color:var(--violet-bright);
}
body[data-page="music"] .mode-divider{width:1px;height:28px;background:var(--border-b);margin:0 8px}

/* ══════════════════════════════════════════════════
   FILTER BAR (shared)
══════════════════════════════════════════════════ */
body[data-page="music"] .filter-bar{
  background:var(--bg);
  border-bottom:1px solid var(--border);
  position:sticky;top:117px;z-index:890;
  transition:background .45s;
}
body[data-page="music"] .filter-inner{
  max-width:1200px;margin:0 auto;padding:0 40px;
  display:flex;align-items:center;gap:14px;height:54px;
}
body[data-page="music"] .sw{position:relative;flex-shrink:0;width:260px}
body[data-page="music"] .sw-icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--fg-3);pointer-events:none}
body[data-page="music"] .sw-icon svg{width:14px;height:14px}
body[data-page="music"] .sw-input{
  width:100%;background:var(--bg-3);
  border:1px solid var(--border);border-radius:24px;
  padding:8px 36px 8px 38px;
  color:var(--fg);font-size:.83rem;outline:none;
  transition:border-color .2s,box-shadow .2s;
}
body[data-page="music"] .sw-input::placeholder{color:var(--fg-3)}
body[data-page="music"] .sw-input:focus{border-color:var(--violet);box-shadow:0 0 0 3px rgba(132,94,247,.12)}
body[data-page="music"] .sw-clear{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  background:none;border:none;color:var(--fg-3);cursor:pointer;
  display:none;padding:2px;
}
body[data-page="music"] .sw-clear svg{width:13px;height:13px;display:block}
body[data-page="music"] .sw-clear.show{display:block}
body[data-page="music"] .fpills{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;flex:1}
body[data-page="music"] .fpills::-webkit-scrollbar{display:none}
body[data-page="music"] .fpill{
  background:none;border:1px solid var(--border-b);border-radius:20px;
  padding:6px 16px;font-size:.76rem;font-weight:500;color:var(--fg-2);
  cursor:pointer;white-space:nowrap;transition:all .2s;
}
body[data-page="music"] .fpill:hover{color:var(--fg);border-color:var(--fg-3)}
body[data-page="music"] .fpill.active{background:var(--violet);border-color:var(--violet);color:white}
body[data-page="music"] .fsort{
  background:var(--bg-3);border:1px solid var(--border);border-radius:20px;
  padding:7px 14px;color:var(--fg-2);font-size:.76rem;outline:none;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;
  padding-right:28px;cursor:pointer;transition:border-color .2s;
}
body[data-page="music"] .fsort:focus{border-color:var(--violet)}
body[data-page="music"] .fcount{font-family:'DM Mono',monospace;font-size:.72rem;color:var(--fg-3);white-space:nowrap;flex-shrink:0}
body[data-page="music"] .fcount span{color:var(--fg);font-weight:500}
body[data-page="music"] .vbtns{display:flex;gap:4px}
body[data-page="music"] .vbtn{
  background:none;border:1px solid var(--border-b);border-radius:8px;
  padding:7px 10px;color:var(--fg-3);cursor:pointer;transition:all .2s;
}
body[data-page="music"] .vbtn svg{width:14px;height:14px;display:block}
body[data-page="music"] .vbtn:hover{color:var(--fg);border-color:var(--border-b)}
body[data-page="music"] .vbtn.active{background:var(--violet);border-color:var(--violet);color:white}

/* ══════════════════════════════════════════════════
   ARTICLES PANEL
══════════════════════════════════════════════════ */
body[data-page="music"] .articles-section{padding:52px 0 100px;background:var(--bg)}
body[data-page="music"] .art-inner{max-width:1200px;margin:0 auto;padding:0 40px}

body[data-page="music"] .art-panel{display:none}
body[data-page="music"] .art-panel.active{display:block}

body[data-page="music"] .art-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
}
body[data-page="music"] .art-grid.list-mode{grid-template-columns:1fr;gap:0}

/* ── MUSIC REVIEW CARD ───────────────────────── */
body[data-page="music"] .art-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:18px;overflow:hidden;cursor:pointer;
  transition:transform .3s var(--ease),border-color .3s,box-shadow .3s;
  display:flex;flex-direction:column;position:relative;
}
body[data-page="music"] .art-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--card-accent,var(--violet));
  transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease);
}
body[data-page="music"] .art-card:hover::before{transform:scaleX(1)}
body[data-page="music"] .art-card:hover{
  transform:translateY(-5px);
  border-color:var(--border-b);
  box-shadow:0 18px 50px var(--shadow),0 0 30px var(--glow);
}

/* Album art thumbnail for reviews */
body[data-page="music"] .art-thumb{
  width:100%;aspect-ratio:1;
  display:flex;align-items:center;justify-content:center;
  font-size:3rem;position:relative;overflow:hidden;flex-shrink:0;
}
/* Review thumbnails show album art emoji + rating overlay */
body[data-page="music"] .thumb-emoji{position:relative;z-index:1;font-size:3.5rem;filter:drop-shadow(0 4px 12px rgba(0,0,0,.4))}
body[data-page="music"] .thumb-overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.55) 100%)}
body[data-page="music"] .thumb-rating{
  position:absolute;bottom:10px;right:10px;z-index:2;
  background:rgba(0,0,0,.7);backdrop-filter:blur(8px);
  border-radius:8px;padding:4px 10px;
  font-family:'Cormorant Garamond',serif;
  font-size:1rem;font-weight:700;color:var(--gold);
  letter-spacing:.02em;
}

/* Genre-specific bg */
body[data-page="music"] .genre-indie .art-thumb{background:linear-gradient(135deg,#1A0D3A,#2D1258)}
body[data-page="music"] .genre-rap .art-thumb{background:linear-gradient(135deg,#0A0A1A,#141428)}
body[data-page="music"] .genre-pop .art-thumb{background:linear-gradient(135deg,#2D0A1A,#4A0A28)}
body[data-page="music"] .genre-rnb .art-thumb{background:linear-gradient(135deg,#1A0D28,#2D1440)}
body[data-page="music"] .genre-electronic .art-thumb{background:linear-gradient(135deg,#001A2D,#00283D)}
body[data-page="music"] .genre-alternative .art-thumb{background:linear-gradient(135deg,#1A1428,#28203D)}
body[data-page="music"] .genre-jazz .art-thumb{background:linear-gradient(135deg,#1A1200,#2D2000)}
body[data-page="music"] .genre-general .art-thumb{background:linear-gradient(135deg,#141020,#201830)}

body[data-page="music"] .art-body{padding:16px 18px 20px;flex:1;display:flex;flex-direction:column}
body[data-page="music"] .art-section{
  font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--card-accent,var(--violet));margin-bottom:6px;
  display:flex;align-items:center;gap:5px;
}
body[data-page="music"] .art-section::before{content:'';display:block;width:10px;height:1px;background:var(--card-accent,var(--violet))}
body[data-page="music"] .art-title{
  font-family:'Cormorant Garamond',serif;
  font-size:1.1rem;font-weight:700;
  color:var(--fg);line-height:1.25;letter-spacing:-.015em;
  margin-bottom:6px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
body[data-page="music"] .art-excerpt{
  font-size:.78rem;color:var(--fg-2);line-height:1.65;flex:1;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  margin-bottom:12px;font-weight:300;
}
body[data-page="music"] .art-meta{
  display:flex;align-items:center;gap:8px;
  font-size:.68rem;color:var(--fg-3);
  border-top:1px solid var(--border);padding-top:10px;margin-top:auto;flex-wrap:wrap;
}
body[data-page="music"] .art-author{color:var(--fg-2);font-weight:500}
body[data-page="music"] .art-badge{
  margin-left:auto;background:rgba(132,94,247,.1);color:var(--violet-bright);
  border-radius:8px;padding:2px 8px;
  font-size:.6rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}

/* Star rating component */
body[data-page="music"] .stars{display:flex;gap:1px;margin-bottom:4px}
body[data-page="music"] .star{color:var(--gold);font-size:.7rem}
body[data-page="music"] .star.empty{color:var(--fg-3);opacity:.4}

/* List mode overrides */
body[data-page="music"] .art-grid.list-mode .art-card{
  flex-direction:row;border-radius:0;border:none;
  border-bottom:1px solid var(--border);
  transform:none!important;box-shadow:none!important;
  padding:18px 4px;gap:16px;align-items:center;
}
body[data-page="music"] .art-grid.list-mode .art-card::before{display:none}
body[data-page="music"] .art-grid.list-mode .art-thumb{
  width:72px;height:72px;aspect-ratio:1;
  border-radius:10px;flex-shrink:0;font-size:1.5rem;
}
body[data-page="music"] .art-grid.list-mode .art-body{padding:0}
body[data-page="music"] .art-grid.list-mode .art-excerpt{display:none}
body[data-page="music"] .art-grid.list-mode .art-title{-webkit-line-clamp:1;font-size:.95rem}
body[data-page="music"] .art-grid.list-mode .thumb-rating{font-size:.75rem;padding:2px 6px;bottom:4px;right:4px}

/* No results */
body[data-page="music"] .no-res{grid-column:1/-1;text-align:center;padding:80px 0;display:none}
body[data-page="music"] .no-res.show{display:block}
body[data-page="music"] .nr-icon{font-size:3rem;margin-bottom:12px;opacity:.3}
body[data-page="music"] .nr-title{
  font-family:'Cormorant Garamond',serif;
  font-size:2rem;color:var(--fg-2);margin-bottom:6px;
}
body[data-page="music"] .nr-sub{font-size:.85rem;color:var(--fg-3)}

/* Load more */
body[data-page="music"] .load-wrap{text-align:center;margin-top:48px}
body[data-page="music"] .load-btn{
  background:none;border:1px solid var(--border-b);border-radius:50px;
  padding:13px 40px;font-size:.88rem;font-weight:500;color:var(--fg-2);
  cursor:pointer;transition:all .25s var(--spring);
  display:inline-flex;align-items:center;gap:8px;
}
body[data-page="music"] .load-btn:hover{
  border-color:var(--violet);color:var(--violet);
  transform:translateY(-2px);box-shadow:0 8px 24px var(--glow);
}
body[data-page="music"] .load-btn.hidden{display:none}

/* ══════════════════════════════════════════════════
   NOW PLAYING AMBIENT STRIP (between hero and tabs)
══════════════════════════════════════════════════ */
body[data-page="music"] .now-playing-strip{
  background:var(--bg-2);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  overflow:hidden;white-space:nowrap;padding:8px 0;
}
body[data-page="music"] .np-track{
  display:inline-block;
  animation:npScroll 55s linear infinite;
}
body[data-page="music"] .np-track span{
  display:inline-flex;align-items:center;gap:8px;
  padding:0 48px;font-size:.7rem;color:var(--fg-3);
  letter-spacing:.04em;
}
body[data-page="music"] .np-track span em{color:var(--violet-bright);font-style:normal;font-weight:500}
body[data-page="music"] .np-dot{color:var(--violet);opacity:.4}
@keyframes npScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ══════════════════════════════════════════════════
   MODAL READER
══════════════════════════════════════════════════ */
body[data-page="music"] .modal-overlay{
  position:fixed;inset:0;z-index:2000;
  background:var(--overlay);
  backdrop-filter:blur(24px) saturate(150%);
  -webkit-backdrop-filter:blur(24px) saturate(150%);
  display:flex;align-items:flex-start;justify-content:center;
  padding:20px;overflow-y:auto;
  opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease);
}
body[data-page="music"] .modal-overlay.open{opacity:1;pointer-events:all}
body[data-page="music"] .modal{
  background:var(--card);border:1px solid var(--border-b);
  border-radius:28px;width:100%;max-width:760px;
  margin:auto;
  box-shadow:0 60px 160px var(--shadow),0 0 0 1px var(--border);
  transform:translateY(32px) scale(.97);
  transition:transform .38s var(--spring);
  overflow:hidden;position:relative;
}
body[data-page="music"] .modal-overlay.open .modal{transform:translateY(0) scale(1)}

/* Progress */
body[data-page="music"] .modal-progress{position:sticky;top:0;left:0;right:0;height:3px;z-index:10;background:var(--border)}
body[data-page="music"] .modal-progress-fill{height:100%;background:linear-gradient(90deg,var(--violet),var(--pink));width:0%;transition:width .08s linear}

/* Album art hero */
body[data-page="music"] .modal-art{
  width:100%;height:260px;
  display:flex;align-items:center;justify-content:center;
  font-size:7rem;position:relative;overflow:hidden;
}
body[data-page="music"] .modal-art::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 30%,var(--card) 100%);
}
body[data-page="music"] .modal-art-emoji{position:relative;z-index:1;filter:drop-shadow(0 8px 24px rgba(0,0,0,.5))}

body[data-page="music"] .modal-close{
  position:absolute;top:16px;right:16px;z-index:20;
  width:38px;height:38px;border-radius:50%;
  background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.15);
  color:white;display:flex;align-items:center;justify-content:center;
  cursor:pointer;backdrop-filter:blur(8px);transition:all .2s;
}
body[data-page="music"] .modal-close:hover{transform:rotate(90deg);background:rgba(255,255,255,.15)}
body[data-page="music"] .modal-close svg{width:14px;height:14px}

body[data-page="music"] .modal-body{padding:0 44px 52px}
body[data-page="music"] .modal-section-tag{
  font-size:.64rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--violet-bright);margin-bottom:12px;
  display:flex;align-items:center;gap:8px;
}
body[data-page="music"] .modal-section-tag::before{content:'';display:block;width:18px;height:1px;background:var(--violet-bright)}

/* Review specific */
body[data-page="music"] .modal-album-info{
  display:flex;align-items:center;gap:14px;margin-bottom:14px;
}
body[data-page="music"] .modal-album-art-sm{
  width:60px;height:60px;border-radius:10px;
  background:linear-gradient(135deg,var(--violet-dark),#0A0518);
  display:flex;align-items:center;justify-content:center;
  font-size:1.8rem;flex-shrink:0;border:1px solid var(--border-b);
}
body[data-page="music"] .modal-album-title{
  font-family:'Cormorant Garamond',serif;
  font-size:1rem;font-weight:700;color:var(--fg);
}
body[data-page="music"] .modal-album-artist{font-size:.82rem;color:var(--fg-2);margin-top:2px}
body[data-page="music"] .modal-album-meta{font-size:.72rem;color:var(--fg-3);margin-top:3px;font-family:'DM Mono',monospace}

body[data-page="music"] .modal-rating-row{
  display:flex;align-items:center;gap:12px;margin-bottom:20px;
}
body[data-page="music"] .modal-stars{display:flex;gap:3px}
body[data-page="music"] .modal-star{font-size:1.1rem;color:var(--gold)}
body[data-page="music"] .modal-star.empty{color:var(--fg-3);opacity:.35}
body[data-page="music"] .modal-score{
  font-family:'Cormorant Garamond',serif;
  font-size:2rem;font-weight:700;color:var(--fg);letter-spacing:-.04em;
}
body[data-page="music"] .modal-score em{color:var(--gold);font-style:normal}
body[data-page="music"] .modal-verdict{
  font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 10px;border-radius:20px;
}
body[data-page="music"] .verdict-essential{background:rgba(81,207,102,.15);color:#51CF66}
body[data-page="music"] .verdict-great{background:rgba(132,94,247,.15);color:var(--violet-bright)}
body[data-page="music"] .verdict-good{background:rgba(201,168,76,.15);color:var(--gold)}
body[data-page="music"] .verdict-mixed{background:rgba(255,107,53,.15);color:#FF6B35}

body[data-page="music"] .modal-title{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.7rem,4vw,2.6rem);
  font-weight:700;line-height:1.1;
  letter-spacing:-.04em;color:var(--fg);margin-bottom:16px;
}
body[data-page="music"] .modal-byline{
  display:flex;align-items:center;gap:14px;
  padding:14px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  margin-bottom:28px;flex-wrap:wrap;
}
body[data-page="music"] .m-author{display:flex;align-items:center;gap:9px}
body[data-page="music"] .m-avatar{
  width:32px;height:32px;border-radius:50%;
  background:var(--bg-3);border:1px solid var(--border-b);
  display:flex;align-items:center;justify-content:center;font-size:.9rem;flex-shrink:0;
}
body[data-page="music"] .m-name{font-size:.82rem;font-weight:600;color:var(--fg)}
body[data-page="music"] .m-role{font-size:.7rem;color:var(--fg-3)}
body[data-page="music"] .m-date{font-family:'DM Mono',monospace;font-size:.7rem;color:var(--fg-3)}
body[data-page="music"] .m-readtime{font-family:'DM Mono',monospace;font-size:.7rem;color:var(--fg-3);margin-left:auto}

/* Content */
body[data-page="music"] .modal-content{line-height:1.9}
body[data-page="music"] .modal-content p{font-size:.94rem;color:var(--fg-2);margin-bottom:18px;font-weight:300}
body[data-page="music"] .modal-content p strong{color:var(--fg);font-weight:600}
body[data-page="music"] .modal-content h3{
  font-family:'Cormorant Garamond',serif;
  font-size:1.35rem;font-weight:700;color:var(--fg);
  letter-spacing:-.02em;margin:30px 0 12px;
}
body[data-page="music"] .modal-content blockquote{
  margin:24px 0;padding:18px 22px;
  border-left:3px solid var(--violet);
  background:rgba(132,94,247,.05);border-radius:0 12px 12px 0;
}
body[data-page="music"] .modal-content blockquote p{
  font-family:'Cormorant Garamond',serif;
  font-size:1.1rem;font-style:italic;color:var(--fg);margin-bottom:6px;
}
body[data-page="music"] .modal-content blockquote cite{font-size:.72rem;color:var(--fg-3);font-style:normal;font-family:'DM Mono',monospace}
body[data-page="music"] .modal-content .track-list{
  background:var(--bg-2);border:1px solid var(--border-b);
  border-radius:14px;padding:16px 20px;margin:22px 0;
}
body[data-page="music"] .modal-content .tl-title{
  font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--fg-3);margin-bottom:12px;
}
body[data-page="music"] .modal-content .tl-row{
  display:flex;align-items:center;gap:12px;
  padding:8px 0;border-bottom:1px solid var(--border);
}
body[data-page="music"] .modal-content .tl-row:last-child{border-bottom:none}
body[data-page="music"] .modal-content .tl-num{
  font-family:'DM Mono',monospace;font-size:.66rem;
  color:var(--fg-3);width:18px;flex-shrink:0;
}
body[data-page="music"] .modal-content .tl-name{font-size:.84rem;color:var(--fg);flex:1}
body[data-page="music"] .modal-content .tl-highlight{color:var(--violet-bright);font-weight:500}
body[data-page="music"] .modal-content .tl-dur{font-family:'DM Mono',monospace;font-size:.68rem;color:var(--fg-3)}

body[data-page="music"] .modal-footer{
  margin-top:36px;padding-top:20px;
  border-top:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
}
body[data-page="music"] .modal-share{display:flex;gap:8px}
body[data-page="music"] .share-btn{
  background:none;border:1px solid var(--border-b);border-radius:20px;
  padding:7px 16px;font-size:.74rem;font-weight:500;color:var(--fg-2);
  cursor:pointer;transition:all .2s;
}
body[data-page="music"] .share-btn:hover{border-color:var(--violet);color:var(--violet)}
body[data-page="music"] .modal-next-btn{
  font-size:.76rem;color:var(--fg-3);cursor:pointer;
  background:none;border:none;transition:color .2s;
  font-family:'DM Mono',monospace;letter-spacing:.04em;
  display:flex;align-items:center;gap:6px;
}
body[data-page="music"] .modal-next-btn:hover{color:var(--violet-bright)}

/* ══════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════ */
body[data-page="music"] footer{background:var(--near-black);padding:40px 0}
body[data-page="music"] .f-inner{
  max-width:1200px;margin:0 auto;padding:0 40px;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
}
body[data-page="music"] .f-brand{
  font-family:'Cormorant Garamond',serif;
  font-size:1.3rem;font-weight:700;color:white;letter-spacing:-.01em;
}
body[data-page="music"] .f-copy{font-size:.74rem;color:rgba(255,255,255,.2)}
body[data-page="music"] .f-home{color:rgba(255,255,255,.3);text-decoration:none;font-size:.78rem;font-weight:500;transition:color .2s}
body[data-page="music"] .f-home:hover{color:white}

/* ══════════════════════════════════════════════════
   REVEAL
══════════════════════════════════════════════════ */
body[data-page="music"] .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
body[data-page="music"] .reveal.visible{opacity:1;transform:none}
body[data-page="music"] .rd1{transition-delay:.06s}body[data-page="music"] .rd2{transition-delay:.12s}body[data-page="music"] .rd3{transition-delay:.18s}

/* ══════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════ */
/* ─── CURSOR SYSTEM ─────────────────────────────────────────── */
html.bc-cursor-active *{ cursor: none !important; }
html.bc-cursor-active input, html.bc-cursor-active textarea, html.bc-cursor-active [contenteditable]{ cursor: text !important; }
#bc-cursor{
  position: fixed; top: 0; left: 0; width: 20px; height: 24px;
  pointer-events: none; z-index: 999999; opacity: 0;
  transition: opacity 0.5s ease; will-change: transform;
}
#bc-cursor svg{
  display: block; width: 20px; height: 24px; transform-origin: 0 0;
  transition: transform 0.16s cubic-bezier(0.25,0.46,0.45,0.94), opacity 0.16s ease;
  will-change: transform;
}
#bc-cursor .arrow-fill{ fill: rgba(255,255,255,0.92); }
#bc-cursor .arrow-stroke{ fill: none; stroke: rgba(0,0,0,0.5); stroke-width: 1px; stroke-linejoin: round; }
#bc-cursor.bc-hover svg{ transform: scale(1.15); }
#bc-cursor.bc-click svg{ transform: scale(0.78); transition: transform 0.07s cubic-bezier(0.34,1.56,0.64,1); }
#bc-cursor.bc-text svg{ opacity: 0; transform: scale(0.6); }
html[data-theme="light"] #bc-cursor .arrow-fill{ fill: rgba(20,20,28,0.88); }
html[data-theme="light"] #bc-cursor .arrow-stroke{ stroke: rgba(255,255,255,0.4); }

@media(max-width:960px){

  body[data-page="music"] .hero-inner{grid-template-columns:1fr;gap:48px;padding:50px 24px 60px}
  body[data-page="music"] .art-grid{grid-template-columns:repeat(2,1fr)}
  body[data-page="music"] .filter-inner{padding:0 20px;gap:10px}
  body[data-page="music"] .mode-bar-inner{padding:0 20px}

}
@media(max-width:640px){

  body[data-page="music"] nav{padding:0 16px}
  body[data-page="music"] .art-inner{padding:0 16px}
  body[data-page="music"] .art-grid{grid-template-columns:1fr}
  body[data-page="music"] .fpills{max-width:180px}
  body[data-page="music"] .fcount{display:none}
  body[data-page="music"] .fsort{display:none}
  body[data-page="music"] .f-inner{flex-direction:column;align-items:flex-start}

}

/* Only suppress native cursor after JS confirms it loaded.
   If JS never runs, nothing here ever fires. */
html.bc-cursor-active *{
  cursor: none !important;
}

/* Restore I-beam in text fields — users need native precision */
html.bc-cursor-active input, html.bc-cursor-active textarea, html.bc-cursor-active [contenteditable]{
  cursor: text !important;
}

/* ── CURSOR WRAPPER ────────────────────────────────────────────
   Top-left corner of the div = the mouse coordinate.
   SVG tip is drawn at (0,0) — so the visual tip and the
   hot-point are the exact same pixel. No offset required. */
#bc-cursor{
  position: fixed;
  top: 0;
  left: 0;
  width: 20px;
  height: 24px;
  pointer-events: none;
  z-index: 999999;
  opacity: 0;
  transition: opacity 0.5s ease;
  will-change: transform;
}

/* ── THE ARROW SVG ─────────────────────────────────────────────
   transform-origin: 0 0 locks all scale animations to the tip.
   Because the tip IS (0,0) in the viewBox, scale never drifts. */
#bc-cursor svg{
  display: block;
  width: 20px;
  height: 24px;
  transform-origin: 0 0;
  transition:
    transform  0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    opacity    0.16s ease;
  will-change: transform;
}

/* The filled arrow body */
#bc-cursor .arrow-fill{
  fill: rgba(255, 255, 255, 0.92);
  transition: fill 0.16s ease;
}

/* The 1px dark stroke — gives it the OS-cursor depth */
#bc-cursor .arrow-stroke{
  fill: none;
  stroke: rgba(0, 0, 0, 0.55);
  stroke-width: 1px;
  stroke-linejoin: round;
  transition: stroke 0.16s ease;
}

/* ── HOVER STATE ───────────────────────────────────────────────
   Scale up ~15% — just enough to register "ready".
   No color change. Feels like the cursor leaning in. */
#bc-cursor.bc-hover svg{
  transform: scale(1.15);
}

/* ── CLICK STATE ───────────────────────────────────────────────
   Fast compress to 80%, snaps back on mouseup.
   The one moment the cursor makes itself physically felt. */
#bc-cursor.bc-click svg{
  transform: scale(0.78);
  transition:
    transform  0.07s cubic-bezier(0.34, 1.56, 0.64, 1),
    filter     0.07s ease;
}

/* ── TEXT INPUT STATE ──────────────────────────────────────────
   Arrow fades out entirely — native I-beam has control.
   The cursor doesn't compete with text selection. */
#bc-cursor.bc-text svg{
  opacity: 0;
  transform: scale(0.6);
}

/* ── LIGHT THEME ───────────────────────────────────────────────
   Flip fill to dark — same arrow, still readable. */
html[data-theme="light"] #bc-cursor .arrow-fill{
  fill: rgba(20, 20, 28, 0.88);
}
html[data-theme="light"] #bc-cursor .arrow-stroke{
  stroke: rgba(255, 255, 255, 0.45);
}

/* ═══════════════════════════════════════════════════
   PAGE: SPORTS (sports.html)
═══════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════
   RESET
══════════════════════════════════════════════════ */
*, *::before, *::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body[data-page="sports"]{
  font-family:'DM Sans',sans-serif;
  background:var(--bg);color:var(--fg);
  overflow-x:hidden;
  transition:background .45s,color .45s;
  min-height:100vh;
}
body[data-page="sports"] button, body[data-page="sports"] input, body[data-page="sports"] select{font-family:inherit}

/* ══════════════════════════════════════════════════
   TOKENS
══════════════════════════════════════════════════ */
body[data-page="sports"]{
  --orange:#FF6B35;
  --orange-bright:#FF8B5C;
  --orange-muted:#7A2E0F;
  --orange-dark:#2A0E03;
  --cyan:#00BFFF;
  --gold:#C9A84C;
  --near-black:#06080C;
  --ease:cubic-bezier(.25,.46,.45,.94);
  --spring:cubic-bezier(.34,1.56,.64,1);
}
html[data-theme="dark"] body[data-page="sports"]{
  --bg:#06080C;
  --bg-2:#0C1018;
  --bg-3:#16202E;
  --fg:#EDF2F8;
  --fg-2:#94A4B8;
  --fg-3:#4A5868;
  --border:rgba(255,107,53,.1);
  --border-b:rgba(255,107,53,.2);
  --shadow:rgba(0,0,0,.75);
  --glow:rgba(255,107,53,.25);
  --glow-pink:rgba(0,191,255,.15);
  --card:rgba(14,12,26,.97);
  --nav-bg:rgba(6,5,12,.94);
  --overlay:rgba(4,3,9,.96);
}
html[data-theme="light"] body[data-page="sports"]{
  --bg:#F0F4FA;
  --bg-2:#E4ECF6;
  --bg-3:#D4DEEC;
  --fg:#0F1A24;
  --fg-2:#2C3D50;
  --fg-3:#7A8AA0;
  --border:rgba(255,107,53,.12);
  --border-b:rgba(255,107,53,.22);
  --shadow:rgba(80,50,150,.1);
  --glow:rgba(255,107,53,.15);
  --glow-pink:rgba(0,191,255,.1);
  --card:rgba(255,252,255,.99);
  --nav-bg:rgba(244,240,255,.95);
  --overlay:rgba(238,234,252,.97);
}

/* ══════════════════════════════════════════════════
   RAINBOW BAR
══════════════════════════════════════════════════ */
body[data-page="sports"] .rainbow-bar{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:1001;
  background:linear-gradient(90deg,
    #FF3B3B 0%,#FF6B35 14%,#FFD700 28%,
    #51CF66 42%,#339AF0 56%,#FF6B35 70%,
    #FF3B3B 84%,#FF6B35 100%);
  background-size:200% 100%;
  animation:rbShift 6s linear infinite;
}
@keyframes rbShift{to{background-position:200% 0}}

/* ══════════════════════════════════════════════════
   NAV
══════════════════════════════════════════════════ */
body[data-page="sports"] nav{
  position:fixed;top:3px;left:0;right:0;height:60px;z-index:1000;
  background:var(--nav-bg);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 32px;transition:background .45s;
}
body[data-page="sports"] .nav-logo{
  font-family:'Cormorant Garamond',serif;
  font-weight:700;font-size:1.35rem;
  color:var(--fg);text-decoration:none;
  letter-spacing:-.01em;
  display:flex;align-items:center;gap:10px;
}
body[data-page="sports"] .nav-logo .logo-accent{color:var(--orange-bright);font-style:italic}
body[data-page="sports"] .nav-right{display:flex;align-items:center;gap:10px}
body[data-page="sports"] .nav-pill{
  background:var(--border);border:1px solid var(--border-b);
  border-radius:20px;padding:6px 14px;
  font-size:.78rem;font-weight:500;color:var(--fg-2);
  cursor:pointer;text-decoration:none;transition:all .2s;
}
body[data-page="sports"] .nav-pill:hover{color:var(--fg);background:var(--border-b)}

/* ══════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════ */
body[data-page="sports"] .hero{
  min-height:100vh;padding-top:63px;
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
}

/* Vinyl record ambient art */
body[data-page="sports"] .hero-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
body[data-page="sports"] .vinyl-orb{
  position:absolute;border-radius:50%;
  border:1px solid rgba(255,107,53,.06);
}
body[data-page="sports"] .vinyl-orb-1{
  width:600px;height:600px;
  top:50%;left:60%;
  transform:translate(-50%,-50%);
  background:conic-gradient(
    from 0deg,
    rgba(255,107,53,.04) 0deg,
    rgba(0,191,255,.03) 60deg,
    rgba(255,107,53,.06) 120deg,
    rgba(201,168,76,.03) 180deg,
    rgba(255,107,53,.04) 240deg,
    rgba(0,191,255,.02) 300deg,
    rgba(255,107,53,.04) 360deg
  );
  animation:vinylSpin 40s linear infinite;
}
body[data-page="sports"] .vinyl-orb-2{
  width:900px;height:900px;
  top:50%;left:60%;
  transform:translate(-50%,-50%);
  background:conic-gradient(
    from 0deg,
    rgba(255,107,53,.02) 0deg,
    transparent 180deg,
    rgba(255,107,53,.02) 360deg
  );
  animation:vinylSpin 80s linear infinite reverse;
}
@keyframes vinylSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* Glow pools */
body[data-page="sports"] .glow-pool{
  position:absolute;border-radius:50%;filter:blur(100px);pointer-events:none;
}
body[data-page="sports"] .gp-1{width:500px;height:500px;background:rgba(255,107,53,.12);top:-10%;left:-10%;animation:gpDrift 20s ease-in-out infinite}
body[data-page="sports"] .gp-2{width:350px;height:350px;background:rgba(0,191,255,.07);bottom:10%;right:5%;animation:gpDrift 16s ease-in-out infinite reverse}
body[data-page="sports"] .gp-3{width:250px;height:250px;background:rgba(201,168,76,.05);top:30%;left:35%;animation:gpDrift 24s ease-in-out infinite 5s}
@keyframes gpDrift{0%,100%{transform:translate(0,0)}50%{transform:translate(25px,-20px)}}

/* Noise grain */
body[data-page="sports"] .hero-bg::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  opacity:.5;
}

body[data-page="sports"] .hero-inner{
  position:relative;z-index:2;
  max-width:1200px;width:100%;padding:0 40px;
  display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;
  animation:heroIn 1s var(--ease) both;
}
@keyframes heroIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}

/* ── Left: text ──────────────────────────────── */
body[data-page="sports"] .hero-text{}
body[data-page="sports"] .hero-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,107,53,.12);border:1px solid rgba(255,107,53,.25);
  border-radius:20px;padding:5px 14px;
  font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--orange-bright);margin-bottom:22px;
}
body[data-page="sports"] .hero-title{
  font-family:'Cormorant Garamond',serif;
  font-weight:700;
  font-size:clamp(3.2rem,8vw,7rem);
  line-height:.92;letter-spacing:-.04em;
  color:var(--fg);margin-bottom:18px;
}
body[data-page="sports"] .hero-title em{color:var(--orange-bright);font-style:italic}
body[data-page="sports"] .hero-sub{
  font-size:1rem;color:var(--fg-2);
  line-height:1.75;font-weight:300;
  max-width:420px;margin-bottom:36px;
}
body[data-page="sports"] .hero-stats{
  display:flex;gap:36px;
  padding-top:28px;border-top:1px solid var(--border);
}
body[data-page="sports"] .hs-num{
  font-family:'Cormorant Garamond',serif;
  font-size:2.6rem;font-weight:700;
  color:var(--fg);letter-spacing:-.04em;line-height:1;
}
body[data-page="sports"] .hs-num em{color:var(--orange-bright);font-style:normal}
body[data-page="sports"] .hs-lbl{font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.09em;color:var(--fg-3);margin-top:4px}

/* ── Right: featured card ────────────────────── */
body[data-page="sports"] .hero-featured{animation:heroIn 1s var(--ease) .18s both}
body[data-page="sports"] .feat-card{
  background:var(--card);
  border:1px solid var(--border-b);
  border-radius:24px;overflow:hidden;
  cursor:pointer;
  box-shadow:0 30px 80px var(--shadow),0 0 0 1px var(--border);
  transition:transform .35s var(--ease),box-shadow .35s;
}
body[data-page="sports"] .feat-card:hover{
  transform:translateY(-6px) scale(1.01);
  box-shadow:0 40px 100px var(--shadow),0 0 60px var(--glow);
}
body[data-page="sports"] .feat-thumb{
  width:100%;aspect-ratio:16/9;
  background:linear-gradient(135deg,var(--orange-dark),#0A0518,#1A0830);
  display:flex;align-items:center;justify-content:center;
  font-size:5rem;position:relative;overflow:hidden;
}
body[data-page="sports"] .feat-thumb::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,var(--card) 100%);
}
body[data-page="sports"] .feat-thumb-emoji{position:relative;z-index:1}
body[data-page="sports"] .feat-body{padding:22px 26px 26px}
body[data-page="sports"] .feat-section{
  font-size:.64rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--orange-bright);
  margin-bottom:8px;display:flex;align-items:center;gap:6px;
}
body[data-page="sports"] .feat-section::before{content:'';display:block;width:14px;height:1px;background:var(--orange-bright)}
body[data-page="sports"] .feat-title{
  font-family:'Cormorant Garamond',serif;
  font-size:1.4rem;font-weight:700;
  color:var(--fg);line-height:1.2;
  letter-spacing:-.02em;margin-bottom:8px;
}
body[data-page="sports"] .feat-excerpt{font-size:.8rem;color:var(--fg-2);line-height:1.7;margin-bottom:14px}
body[data-page="sports"] .feat-meta{
  display:flex;align-items:center;gap:12px;
  font-size:.7rem;color:var(--fg-3);
}
body[data-page="sports"] .feat-author{color:var(--fg-2);font-weight:500}
body[data-page="sports"] .feat-arrow{
  margin-left:auto;color:var(--orange-bright);
  font-weight:600;font-size:.78rem;
  display:flex;align-items:center;gap:4px;
  transition:gap .2s;
}
body[data-page="sports"] .feat-card:hover .feat-arrow{gap:8px}

/* ══════════════════════════════════════════════════
   DUAL-MODE TAB BAR
══════════════════════════════════════════════════ */
body[data-page="sports"] .mode-bar{
  background:var(--bg-2);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  position:sticky;top:63px;z-index:900;
  transition:background .45s;
}
body[data-page="sports"] .mode-bar-inner{
  max-width:1200px;margin:0 auto;padding:0 40px;
  display:flex;align-items:center;gap:0;
}
body[data-page="sports"] .mode-tab{
  display:flex;align-items:center;gap:8px;
  padding:0 32px;height:54px;
  font-size:.88rem;font-weight:600;
  color:var(--fg-2);cursor:pointer;
  background:none;border:none;
  border-bottom:3px solid transparent;
  transition:all .25s;letter-spacing:.01em;
  white-space:nowrap;
}
body[data-page="sports"] .mode-tab .mt-icon{font-size:1.1rem}
body[data-page="sports"] .mode-tab .mt-count{
  font-family:'DM Mono',monospace;font-size:.65rem;
  background:var(--border-b);border-radius:10px;
  padding:2px 8px;color:var(--fg-3);
  transition:all .25s;
}
body[data-page="sports"] .mode-tab:hover{color:var(--fg)}
body[data-page="sports"] .mode-tab.active{
  color:var(--orange-bright);
  border-bottom-color:var(--orange-bright);
}
body[data-page="sports"] .mode-tab.active .mt-count{
  background:rgba(255,107,53,.2);color:var(--orange-bright);
}
body[data-page="sports"] .mode-divider{width:1px;height:28px;background:var(--border-b);margin:0 8px}

/* ══════════════════════════════════════════════════
   FILTER BAR (shared)
══════════════════════════════════════════════════ */
body[data-page="sports"] .filter-bar{
  background:var(--bg);
  border-bottom:1px solid var(--border);
  position:sticky;top:117px;z-index:890;
  transition:background .45s;
}
body[data-page="sports"] .filter-inner{
  max-width:1200px;margin:0 auto;padding:0 40px;
  display:flex;align-items:center;gap:14px;height:54px;
}
body[data-page="sports"] .sw{position:relative;flex-shrink:0;width:260px}
body[data-page="sports"] .sw-icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--fg-3);pointer-events:none}
body[data-page="sports"] .sw-icon svg{width:14px;height:14px}
body[data-page="sports"] .sw-input{
  width:100%;background:var(--bg-3);
  border:1px solid var(--border);border-radius:24px;
  padding:8px 36px 8px 38px;
  color:var(--fg);font-size:.83rem;outline:none;
  transition:border-color .2s,box-shadow .2s;
}
body[data-page="sports"] .sw-input::placeholder{color:var(--fg-3)}
body[data-page="sports"] .sw-input:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,107,53,.12)}
body[data-page="sports"] .sw-clear{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  background:none;border:none;color:var(--fg-3);cursor:pointer;
  display:none;padding:2px;
}
body[data-page="sports"] .sw-clear svg{width:13px;height:13px;display:block}
body[data-page="sports"] .sw-clear.show{display:block}
body[data-page="sports"] .fpills{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;flex:1}
body[data-page="sports"] .fpills::-webkit-scrollbar{display:none}
body[data-page="sports"] .fpill{
  background:none;border:1px solid var(--border-b);border-radius:20px;
  padding:6px 16px;font-size:.76rem;font-weight:500;color:var(--fg-2);
  cursor:pointer;white-space:nowrap;transition:all .2s;
}
body[data-page="sports"] .fpill:hover{color:var(--fg);border-color:var(--fg-3)}
body[data-page="sports"] .fpill.active{background:var(--orange);border-color:var(--orange);color:white}
body[data-page="sports"] .fsort{
  background:var(--bg-3);border:1px solid var(--border);border-radius:20px;
  padding:7px 14px;color:var(--fg-2);font-size:.76rem;outline:none;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;
  padding-right:28px;cursor:pointer;transition:border-color .2s;
}
body[data-page="sports"] .fsort:focus{border-color:var(--orange)}
body[data-page="sports"] .fcount{font-family:'DM Mono',monospace;font-size:.72rem;color:var(--fg-3);white-space:nowrap;flex-shrink:0}
body[data-page="sports"] .fcount span{color:var(--fg);font-weight:500}
body[data-page="sports"] .vbtns{display:flex;gap:4px}
body[data-page="sports"] .vbtn{
  background:none;border:1px solid var(--border-b);border-radius:8px;
  padding:7px 10px;color:var(--fg-3);cursor:pointer;transition:all .2s;
}
body[data-page="sports"] .vbtn svg{width:14px;height:14px;display:block}
body[data-page="sports"] .vbtn:hover{color:var(--fg);border-color:var(--border-b)}
body[data-page="sports"] .vbtn.active{background:var(--orange);border-color:var(--orange);color:white}

/* ══════════════════════════════════════════════════
   ARTICLES PANEL
══════════════════════════════════════════════════ */
body[data-page="sports"] .articles-section{padding:52px 0 100px;background:var(--bg)}
body[data-page="sports"] .art-inner{max-width:1200px;margin:0 auto;padding:0 40px}

body[data-page="sports"] .art-panel{display:none}
body[data-page="sports"] .art-panel.active{display:block}

body[data-page="sports"] .art-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
}
body[data-page="sports"] .art-grid.list-mode{grid-template-columns:1fr;gap:0}

/* ── MUSIC REVIEW CARD ───────────────────────── */
body[data-page="sports"] .art-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:18px;overflow:hidden;cursor:pointer;
  transition:transform .3s var(--ease),border-color .3s,box-shadow .3s;
  display:flex;flex-direction:column;position:relative;
}
body[data-page="sports"] .art-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--card-accent,var(--orange));
  transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease);
}
body[data-page="sports"] .art-card:hover::before{transform:scaleX(1)}
body[data-page="sports"] .art-card:hover{
  transform:translateY(-5px);
  border-color:var(--border-b);
  box-shadow:0 18px 50px var(--shadow),0 0 30px var(--glow);
}

/* Album art thumbnail for reviews */
body[data-page="sports"] .art-thumb{
  width:100%;aspect-ratio:1;
  display:flex;align-items:center;justify-content:center;
  font-size:3rem;position:relative;overflow:hidden;flex-shrink:0;
}
/* Review thumbnails show album art emoji + rating overlay */
body[data-page="sports"] .thumb-emoji{position:relative;z-index:1;font-size:3.5rem;filter:drop-shadow(0 4px 12px rgba(0,0,0,.4))}
body[data-page="sports"] .thumb-overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.55) 100%)}
body[data-page="sports"] .thumb-rating{
  position:absolute;bottom:10px;right:10px;z-index:2;
  background:rgba(0,0,0,.7);backdrop-filter:blur(8px);
  border-radius:8px;padding:4px 10px;
  font-family:'Cormorant Garamond',serif;
  font-size:1rem;font-weight:700;color:var(--gold);
  letter-spacing:.02em;
}

/* Genre-specific bg */
body[data-page="sports"] .genre-indie .art-thumb{background:linear-gradient(135deg,#2A0E03,#2D1258)}
body[data-page="sports"] .genre-rap .art-thumb{background:linear-gradient(135deg,#0A0A1A,#141428)}
body[data-page="sports"] .genre-pop .art-thumb{background:linear-gradient(135deg,#2D0A1A,#4A0A28)}
body[data-page="sports"] .genre-rnb .art-thumb{background:linear-gradient(135deg,#1A0D28,#2D1440)}
body[data-page="sports"] .genre-electronic .art-thumb{background:linear-gradient(135deg,#001A2D,#00283D)}
body[data-page="sports"] .genre-alternative .art-thumb{background:linear-gradient(135deg,#1A1428,#28203D)}
body[data-page="sports"] .genre-jazz .art-thumb{background:linear-gradient(135deg,#1A1200,#2D2000)}
body[data-page="sports"] .genre-general .art-thumb{background:linear-gradient(135deg,#141020,#201830)}

body[data-page="sports"] .art-body{padding:16px 18px 20px;flex:1;display:flex;flex-direction:column}
body[data-page="sports"] .art-section{
  font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--card-accent,var(--orange));margin-bottom:6px;
  display:flex;align-items:center;gap:5px;
}
body[data-page="sports"] .art-section::before{content:'';display:block;width:10px;height:1px;background:var(--card-accent,var(--orange))}
body[data-page="sports"] .art-title{
  font-family:'Cormorant Garamond',serif;
  font-size:1.1rem;font-weight:700;
  color:var(--fg);line-height:1.25;letter-spacing:-.015em;
  margin-bottom:6px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
body[data-page="sports"] .art-excerpt{
  font-size:.78rem;color:var(--fg-2);line-height:1.65;flex:1;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  margin-bottom:12px;font-weight:300;
}
body[data-page="sports"] .art-meta{
  display:flex;align-items:center;gap:8px;
  font-size:.68rem;color:var(--fg-3);
  border-top:1px solid var(--border);padding-top:10px;margin-top:auto;flex-wrap:wrap;
}
body[data-page="sports"] .art-author{color:var(--fg-2);font-weight:500}
body[data-page="sports"] .art-badge{
  margin-left:auto;background:rgba(255,107,53,.1);color:var(--orange-bright);
  border-radius:8px;padding:2px 8px;
  font-size:.6rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}

/* Star rating component */
body[data-page="sports"] .stars{display:flex;gap:1px;margin-bottom:4px}
body[data-page="sports"] .star{color:var(--gold);font-size:.7rem}
body[data-page="sports"] .star.empty{color:var(--fg-3);opacity:.4}

/* List mode overrides */
body[data-page="sports"] .art-grid.list-mode .art-card{
  flex-direction:row;border-radius:0;border:none;
  border-bottom:1px solid var(--border);
  transform:none!important;box-shadow:none!important;
  padding:18px 4px;gap:16px;align-items:center;
}
body[data-page="sports"] .art-grid.list-mode .art-card::before{display:none}
body[data-page="sports"] .art-grid.list-mode .art-thumb{
  width:72px;height:72px;aspect-ratio:1;
  border-radius:10px;flex-shrink:0;font-size:1.5rem;
}
body[data-page="sports"] .art-grid.list-mode .art-body{padding:0}
body[data-page="sports"] .art-grid.list-mode .art-excerpt{display:none}
body[data-page="sports"] .art-grid.list-mode .art-title{-webkit-line-clamp:1;font-size:.95rem}
body[data-page="sports"] .art-grid.list-mode .thumb-rating{font-size:.75rem;padding:2px 6px;bottom:4px;right:4px}

/* No results */
body[data-page="sports"] .no-res{grid-column:1/-1;text-align:center;padding:80px 0;display:none}
body[data-page="sports"] .no-res.show{display:block}
body[data-page="sports"] .nr-icon{font-size:3rem;margin-bottom:12px;opacity:.3}
body[data-page="sports"] .nr-title{
  font-family:'Cormorant Garamond',serif;
  font-size:2rem;color:var(--fg-2);margin-bottom:6px;
}
body[data-page="sports"] .nr-sub{font-size:.85rem;color:var(--fg-3)}

/* Load more */
body[data-page="sports"] .load-wrap{text-align:center;margin-top:48px}
body[data-page="sports"] .load-btn{
  background:none;border:1px solid var(--border-b);border-radius:50px;
  padding:13px 40px;font-size:.88rem;font-weight:500;color:var(--fg-2);
  cursor:pointer;transition:all .25s var(--spring);
  display:inline-flex;align-items:center;gap:8px;
}
body[data-page="sports"] .load-btn:hover{
  border-color:var(--orange);color:var(--orange);
  transform:translateY(-2px);box-shadow:0 8px 24px var(--glow);
}
body[data-page="sports"] .load-btn.hidden{display:none}

/* ══════════════════════════════════════════════════
   NOW PLAYING AMBIENT STRIP (between hero and tabs)
══════════════════════════════════════════════════ */
body[data-page="sports"] .now-playing-strip{
  background:var(--bg-2);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  overflow:hidden;white-space:nowrap;padding:8px 0;
}
body[data-page="sports"] .np-track{
  display:inline-block;
  animation:npScroll 55s linear infinite;
}
body[data-page="sports"] .np-track span{
  display:inline-flex;align-items:center;gap:8px;
  padding:0 48px;font-size:.7rem;color:var(--fg-3);
  letter-spacing:.04em;
}
body[data-page="sports"] .np-track span em{color:var(--orange-bright);font-style:normal;font-weight:500}
body[data-page="sports"] .np-dot{color:var(--orange);opacity:.4}
@keyframes npScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ══════════════════════════════════════════════════
   MODAL READER
══════════════════════════════════════════════════ */
body[data-page="sports"] .modal-overlay{
  position:fixed;inset:0;z-index:2000;
  background:var(--overlay);
  backdrop-filter:blur(24px) saturate(150%);
  -webkit-backdrop-filter:blur(24px) saturate(150%);
  display:flex;align-items:flex-start;justify-content:center;
  padding:20px;overflow-y:auto;
  opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease);
}
body[data-page="sports"] .modal-overlay.open{opacity:1;pointer-events:all}
body[data-page="sports"] .modal{
  background:var(--card);border:1px solid var(--border-b);
  border-radius:28px;width:100%;max-width:760px;
  margin:auto;
  box-shadow:0 60px 160px var(--shadow),0 0 0 1px var(--border);
  transform:translateY(32px) scale(.97);
  transition:transform .38s var(--spring);
  overflow:hidden;position:relative;
}
body[data-page="sports"] .modal-overlay.open .modal{transform:translateY(0) scale(1)}

/* Progress */
body[data-page="sports"] .modal-progress{position:sticky;top:0;left:0;right:0;height:3px;z-index:10;background:var(--border)}
body[data-page="sports"] .modal-progress-fill{height:100%;background:linear-gradient(90deg,var(--orange),var(--cyan));width:0%;transition:width .08s linear}

/* Album art hero */
body[data-page="sports"] .modal-art{
  width:100%;height:260px;
  display:flex;align-items:center;justify-content:center;
  font-size:7rem;position:relative;overflow:hidden;
}
body[data-page="sports"] .modal-art::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 30%,var(--card) 100%);
}
body[data-page="sports"] .modal-art-emoji{position:relative;z-index:1;filter:drop-shadow(0 8px 24px rgba(0,0,0,.5))}

body[data-page="sports"] .modal-close{
  position:absolute;top:16px;right:16px;z-index:20;
  width:38px;height:38px;border-radius:50%;
  background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.15);
  color:white;display:flex;align-items:center;justify-content:center;
  cursor:pointer;backdrop-filter:blur(8px);transition:all .2s;
}
body[data-page="sports"] .modal-close:hover{transform:rotate(90deg);background:rgba(255,255,255,.15)}
body[data-page="sports"] .modal-close svg{width:14px;height:14px}

body[data-page="sports"] .modal-body{padding:0 44px 52px}
body[data-page="sports"] .modal-section-tag{
  font-size:.64rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--orange-bright);margin-bottom:12px;
  display:flex;align-items:center;gap:8px;
}
body[data-page="sports"] .modal-section-tag::before{content:'';display:block;width:18px;height:1px;background:var(--orange-bright)}

/* Review specific */
body[data-page="sports"] .modal-album-info{
  display:flex;align-items:center;gap:14px;margin-bottom:14px;
}
body[data-page="sports"] .modal-album-art-sm{
  width:60px;height:60px;border-radius:10px;
  background:linear-gradient(135deg,var(--orange-dark),#0A0518);
  display:flex;align-items:center;justify-content:center;
  font-size:1.8rem;flex-shrink:0;border:1px solid var(--border-b);
}
body[data-page="sports"] .modal-album-title{
  font-family:'Cormorant Garamond',serif;
  font-size:1rem;font-weight:700;color:var(--fg);
}
body[data-page="sports"] .modal-album-artist{font-size:.82rem;color:var(--fg-2);margin-top:2px}
body[data-page="sports"] .modal-album-meta{font-size:.72rem;color:var(--fg-3);margin-top:3px;font-family:'DM Mono',monospace}

body[data-page="sports"] .modal-rating-row{
  display:flex;align-items:center;gap:12px;margin-bottom:20px;
}
body[data-page="sports"] .modal-stars{display:flex;gap:3px}
body[data-page="sports"] .modal-star{font-size:1.1rem;color:var(--gold)}
body[data-page="sports"] .modal-star.empty{color:var(--fg-3);opacity:.35}
body[data-page="sports"] .modal-score{
  font-family:'Cormorant Garamond',serif;
  font-size:2rem;font-weight:700;color:var(--fg);letter-spacing:-.04em;
}
body[data-page="sports"] .modal-score em{color:var(--gold);font-style:normal}
body[data-page="sports"] .modal-verdict{
  font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 10px;border-radius:20px;
}
body[data-page="sports"] .verdict-essential{background:rgba(81,207,102,.15);color:#51CF66}
body[data-page="sports"] .verdict-great{background:rgba(255,107,53,.15);color:var(--orange-bright)}
body[data-page="sports"] .verdict-good{background:rgba(201,168,76,.15);color:var(--gold)}
body[data-page="sports"] .verdict-mixed{background:rgba(255,107,53,.15);color:#FF6B35}

body[data-page="sports"] .modal-title{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.7rem,4vw,2.6rem);
  font-weight:700;line-height:1.1;
  letter-spacing:-.04em;color:var(--fg);margin-bottom:16px;
}
body[data-page="sports"] .modal-byline{
  display:flex;align-items:center;gap:14px;
  padding:14px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  margin-bottom:28px;flex-wrap:wrap;
}
body[data-page="sports"] .m-author{display:flex;align-items:center;gap:9px}
body[data-page="sports"] .m-avatar{
  width:32px;height:32px;border-radius:50%;
  background:var(--bg-3);border:1px solid var(--border-b);
  display:flex;align-items:center;justify-content:center;font-size:.9rem;flex-shrink:0;
}
body[data-page="sports"] .m-name{font-size:.82rem;font-weight:600;color:var(--fg)}
body[data-page="sports"] .m-role{font-size:.7rem;color:var(--fg-3)}
body[data-page="sports"] .m-date{font-family:'DM Mono',monospace;font-size:.7rem;color:var(--fg-3)}
body[data-page="sports"] .m-readtime{font-family:'DM Mono',monospace;font-size:.7rem;color:var(--fg-3);margin-left:auto}

/* Content */
body[data-page="sports"] .modal-content{line-height:1.9}
body[data-page="sports"] .modal-content p{font-size:.94rem;color:var(--fg-2);margin-bottom:18px;font-weight:300}
body[data-page="sports"] .modal-content p strong{color:var(--fg);font-weight:600}
body[data-page="sports"] .modal-content h3{
  font-family:'Cormorant Garamond',serif;
  font-size:1.35rem;font-weight:700;color:var(--fg);
  letter-spacing:-.02em;margin:30px 0 12px;
}
body[data-page="sports"] .modal-content blockquote{
  margin:24px 0;padding:18px 22px;
  border-left:3px solid var(--orange);
  background:rgba(255,107,53,.05);border-radius:0 12px 12px 0;
}
body[data-page="sports"] .modal-content blockquote p{
  font-family:'Cormorant Garamond',serif;
  font-size:1.1rem;font-style:italic;color:var(--fg);margin-bottom:6px;
}
body[data-page="sports"] .modal-content blockquote cite{font-size:.72rem;color:var(--fg-3);font-style:normal;font-family:'DM Mono',monospace}
body[data-page="sports"] .modal-content .track-list{
  background:var(--bg-2);border:1px solid var(--border-b);
  border-radius:14px;padding:16px 20px;margin:22px 0;
}
body[data-page="sports"] .modal-content .tl-title{
  font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--fg-3);margin-bottom:12px;
}
body[data-page="sports"] .modal-content .tl-row{
  display:flex;align-items:center;gap:12px;
  padding:8px 0;border-bottom:1px solid var(--border);
}
body[data-page="sports"] .modal-content .tl-row:last-child{border-bottom:none}
body[data-page="sports"] .modal-content .tl-num{
  font-family:'DM Mono',monospace;font-size:.66rem;
  color:var(--fg-3);width:18px;flex-shrink:0;
}
body[data-page="sports"] .modal-content .tl-name{font-size:.84rem;color:var(--fg);flex:1}
body[data-page="sports"] .modal-content .tl-highlight{color:var(--orange-bright);font-weight:500}
body[data-page="sports"] .modal-content .tl-dur{font-family:'DM Mono',monospace;font-size:.68rem;color:var(--fg-3)}

body[data-page="sports"] .modal-footer{
  margin-top:36px;padding-top:20px;
  border-top:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
}
body[data-page="sports"] .modal-share{display:flex;gap:8px}
body[data-page="sports"] .share-btn{
  background:none;border:1px solid var(--border-b);border-radius:20px;
  padding:7px 16px;font-size:.74rem;font-weight:500;color:var(--fg-2);
  cursor:pointer;transition:all .2s;
}
body[data-page="sports"] .share-btn:hover{border-color:var(--orange);color:var(--orange)}
body[data-page="sports"] .modal-next-btn{
  font-size:.76rem;color:var(--fg-3);cursor:pointer;
  background:none;border:none;transition:color .2s;
  font-family:'DM Mono',monospace;letter-spacing:.04em;
  display:flex;align-items:center;gap:6px;
}
body[data-page="sports"] .modal-next-btn:hover{color:var(--orange-bright)}

/* ══════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════ */
body[data-page="sports"] footer{background:var(--near-black);padding:40px 0}
body[data-page="sports"] .f-inner{
  max-width:1200px;margin:0 auto;padding:0 40px;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
}
body[data-page="sports"] .f-brand{
  font-family:'Cormorant Garamond',serif;
  font-size:1.3rem;font-weight:700;color:white;letter-spacing:-.01em;
}
body[data-page="sports"] .f-copy{font-size:.74rem;color:rgba(255,255,255,.2)}
body[data-page="sports"] .f-home{color:rgba(255,255,255,.3);text-decoration:none;font-size:.78rem;font-weight:500;transition:color .2s}
body[data-page="sports"] .f-home:hover{color:white}

/* ══════════════════════════════════════════════════
   REVEAL
══════════════════════════════════════════════════ */
body[data-page="sports"] .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
body[data-page="sports"] .reveal.visible{opacity:1;transform:none}
body[data-page="sports"] .rd1{transition-delay:.06s}body[data-page="sports"] .rd2{transition-delay:.12s}body[data-page="sports"] .rd3{transition-delay:.18s}

/* ══════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════ */
/* ─── CURSOR SYSTEM ─────────────────────────────────────────── */
html.bc-cursor-active *{ cursor: none !important; }
html.bc-cursor-active input, html.bc-cursor-active textarea, html.bc-cursor-active [contenteditable]{ cursor: text !important; }
#bc-cursor{
  position: fixed; top: 0; left: 0; width: 20px; height: 24px;
  pointer-events: none; z-index: 999999; opacity: 0;
  transition: opacity 0.5s ease; will-change: transform;
}
#bc-cursor svg{
  display: block; width: 20px; height: 24px; transform-origin: 0 0;
  transition: transform 0.16s cubic-bezier(0.25,0.46,0.45,0.94), opacity 0.16s ease;
  will-change: transform;
}
#bc-cursor .arrow-fill{ fill: rgba(255,255,255,0.92); }
#bc-cursor .arrow-stroke{ fill: none; stroke: rgba(0,0,0,0.5); stroke-width: 1px; stroke-linejoin: round; }
#bc-cursor.bc-hover svg{ transform: scale(1.15); }
#bc-cursor.bc-click svg{ transform: scale(0.78); transition: transform 0.07s cubic-bezier(0.34,1.56,0.64,1); }
#bc-cursor.bc-text svg{ opacity: 0; transform: scale(0.6); }
html[data-theme="light"] #bc-cursor .arrow-fill{ fill: rgba(20,20,28,0.88); }
html[data-theme="light"] #bc-cursor .arrow-stroke{ stroke: rgba(255,255,255,0.4); }

@media(max-width:960px){

  body[data-page="sports"] .hero-inner{grid-template-columns:1fr;gap:48px;padding:50px 24px 60px}
  body[data-page="sports"] .art-grid{grid-template-columns:repeat(2,1fr)}
  body[data-page="sports"] .filter-inner{padding:0 20px;gap:10px}
  body[data-page="sports"] .mode-bar-inner{padding:0 20px}

}
@media(max-width:640px){

  body[data-page="sports"] nav{padding:0 16px}
  body[data-page="sports"] .art-inner{padding:0 16px}
  body[data-page="sports"] .art-grid{grid-template-columns:1fr}
  body[data-page="sports"] .fpills{max-width:180px}
  body[data-page="sports"] .fcount{display:none}
  body[data-page="sports"] .fsort{display:none}
  body[data-page="sports"] .f-inner{flex-direction:column;align-items:flex-start}

}

/* Only suppress native cursor after JS confirms it loaded.
   If JS never runs, nothing here ever fires. */
html.bc-cursor-active *{
  cursor: none !important;
}

/* Restore I-beam in text fields — users need native precision */
html.bc-cursor-active input, html.bc-cursor-active textarea, html.bc-cursor-active [contenteditable]{
  cursor: text !important;
}

/* ── CURSOR WRAPPER ────────────────────────────────────────────
   Top-left corner of the div = the mouse coordinate.
   SVG tip is drawn at (0,0) — so the visual tip and the
   hot-point are the exact same pixel. No offset required. */
#bc-cursor{
  position: fixed;
  top: 0;
  left: 0;
  width: 20px;
  height: 24px;
  pointer-events: none;
  z-index: 999999;
  opacity: 0;
  transition: opacity 0.5s ease;
  will-change: transform;
}

/* ── THE ARROW SVG ─────────────────────────────────────────────
   transform-origin: 0 0 locks all scale animations to the tip.
   Because the tip IS (0,0) in the viewBox, scale never drifts. */
#bc-cursor svg{
  display: block;
  width: 20px;
  height: 24px;
  transform-origin: 0 0;
  transition:
    transform  0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    opacity    0.16s ease;
  will-change: transform;
}

/* The filled arrow body */
#bc-cursor .arrow-fill{
  fill: rgba(255, 255, 255, 0.92);
  transition: fill 0.16s ease;
}

/* The 1px dark stroke — gives it the OS-cursor depth */
#bc-cursor .arrow-stroke{
  fill: none;
  stroke: rgba(0, 0, 0, 0.55);
  stroke-width: 1px;
  stroke-linejoin: round;
  transition: stroke 0.16s ease;
}

/* ── HOVER STATE ───────────────────────────────────────────────
   Scale up ~15% — just enough to register "ready".
   No color change. Feels like the cursor leaning in. */
#bc-cursor.bc-hover svg{
  transform: scale(1.15);
}

/* ── CLICK STATE ───────────────────────────────────────────────
   Fast compress to 80%, snaps back on mouseup.
   The one moment the cursor makes itself physically felt. */
#bc-cursor.bc-click svg{
  transform: scale(0.78);
  transition:
    transform  0.07s cubic-bezier(0.34, 1.56, 0.64, 1),
    filter     0.07s ease;
}

/* ── TEXT INPUT STATE ──────────────────────────────────────────
   Arrow fades out entirely — native I-beam has control.
   The cursor doesn't compete with text selection. */
#bc-cursor.bc-text svg{
  opacity: 0;
  transform: scale(0.6);
}

/* ── LIGHT THEME ───────────────────────────────────────────────
   Flip fill to dark — same arrow, still readable. */
html[data-theme="light"] #bc-cursor .arrow-fill{
  fill: rgba(20, 20, 28, 0.88);
}
html[data-theme="light"] #bc-cursor .arrow-stroke{
  stroke: rgba(255, 255, 255, 0.45);
}

/* ═══════════════════════════════════════════════════
   PAGE: JOURNALISM (journalism.html)
═══════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════
   RESET
══════════════════════════════════════════════════ */
*, *::before, *::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body[data-page="journalism"]{
  font-family:'DM Sans',sans-serif;
  background:var(--bg);color:var(--fg);
  overflow-x:hidden;
  transition:background .45s,color .45s;
  min-height:100vh;
}
body[data-page="journalism"] button, body[data-page="journalism"] input, body[data-page="journalism"] select{font-family:inherit}

/* ══════════════════════════════════════════════════
   TOKENS
══════════════════════════════════════════════════ */
body[data-page="journalism"]{
  --ink:#1A1A1E;
  --paper:#F8F5EE;
  --red:#D0021B;
  --red-bright:#FF1F3D;
  --gold:#B8860B;
  --blue-link:#1A4A8A;
  --near-black:#080809;
  --ease:cubic-bezier(.25,.46,.45,.94);
  --spring:cubic-bezier(.34,1.56,.64,1);
}
html[data-theme="light"] body[data-page="journalism"]{
  --bg:#F8F5EE;
  --bg-2:#EEE9DC;
  --bg-3:#E2DAC8;
  --fg:#1A1A1E;
  --fg-2:#3A3830;
  --fg-3:#7A7468;
  --border:rgba(26,26,30,.1);
  --border-b:rgba(26,26,30,.18);
  --shadow:rgba(0,0,0,.12);
  --glow:rgba(208,2,27,.1);
  --card:rgba(255,252,245,.99);
  --nav-bg:rgba(248,245,238,.95);
  --overlay:rgba(244,241,234,.97);
  --rule-color:#1A1A1E;
  --masthead-bg:#1A1A1E;
  --pull-bg:rgba(208,2,27,.04);
}
html[data-theme="dark"] body[data-page="journalism"]{
  --bg:#0D0D0F;
  --bg-2:#141418;
  --bg-3:#1E1E24;
  --fg:#E8E4DA;
  --fg-2:#A09A90;
  --fg-3:#5A5450;
  --border:rgba(255,255,255,.08);
  --border-b:rgba(255,255,255,.14);
  --shadow:rgba(0,0,0,.7);
  --glow:rgba(208,2,27,.2);
  --card:rgba(18,18,22,.98);
  --nav-bg:rgba(13,13,15,.95);
  --overlay:rgba(8,8,10,.97);
  --rule-color:rgba(255,255,255,.15);
  --masthead-bg:#0D0D0F;
  --pull-bg:rgba(208,2,27,.06);
}

/* ══════════════════════════════════════════════════
   RAINBOW BAR
══════════════════════════════════════════════════ */
body[data-page="journalism"] .rainbow-bar{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:1001;
  background:linear-gradient(90deg,
    #FF3B3B 0%,#FF6B35 14%,#FFD700 28%,
    #51CF66 42%,#339AF0 56%,#845EF7 70%,
    #FF3B3B 84%,#FF6B35 100%);
  background-size:200% 100%;
  animation:rbShift 6s linear infinite;
}
@keyframes rbShift{to{background-position:200% 0}}

/* ══════════════════════════════════════════════════
   NAV
══════════════════════════════════════════════════ */
body[data-page="journalism"] nav{
  position:fixed;top:3px;left:0;right:0;z-index:1000;
  background:var(--nav-bg);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border-bottom:1px solid var(--border);
  transition:background .45s;
}
body[data-page="journalism"] .nav-inner{
  max-width:1280px;margin:0 auto;padding:0 32px;
  display:flex;align-items:center;justify-content:space-between;
  height:58px;
}
body[data-page="journalism"] .nav-logo{
  font-family:'Libre Baskerville',serif;
  font-weight:700;font-size:1.1rem;
  color:var(--fg);text-decoration:none;
  letter-spacing:.01em;
  display:flex;align-items:center;gap:10px;
}
body[data-page="journalism"] .nav-logo .logo-divider{
  width:1px;height:18px;
  background:var(--border-b);
}
body[data-page="journalism"] .nav-logo .logo-dept{
  font-weight:400;font-size:.85rem;
  color:var(--fg-2);font-style:italic;
}
body[data-page="journalism"] .nav-links{display:flex;align-items:center;gap:2px}
body[data-page="journalism"] .nav-link{
  color:var(--fg-2);text-decoration:none;
  font-size:.78rem;font-weight:500;
  padding:6px 12px;border-radius:20px;
  transition:all .2s;
}
body[data-page="journalism"] .nav-link:hover{color:var(--fg);background:var(--border)}
body[data-page="journalism"] .nav-right{display:flex;align-items:center;gap:10px}
body[data-page="journalism"] .nav-pill{
  background:var(--border);border:1px solid var(--border-b);
  border-radius:20px;padding:6px 14px;
  font-size:.78rem;font-weight:500;color:var(--fg-2);
  cursor:pointer;text-decoration:none;transition:all .2s;
}
body[data-page="journalism"] .nav-pill:hover{color:var(--fg);background:var(--border-b)}

/* ══════════════════════════════════════════════════
   MASTHEAD
══════════════════════════════════════════════════ */
body[data-page="journalism"] .masthead{
  background:var(--masthead-bg);
  padding:61px 0 0;
  position:relative;overflow:hidden;
}

/* Texture: subtle halftone */
body[data-page="journalism"] .masthead::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:20px 20px;
}

body[data-page="journalism"] .masthead-inner{
  max-width:1280px;margin:0 auto;padding:48px 40px 0;
  display:flex;flex-direction:column;align-items:center;
  position:relative;z-index:2;
}

/* Edition info line */
body[data-page="journalism"] .edition-line{
  display:flex;align-items:center;gap:20px;
  font-family:'DM Mono',monospace;
  font-size:.65rem;color:rgba(255,255,255,.3);
  letter-spacing:.1em;text-transform:uppercase;
  margin-bottom:20px;
  width:100%;justify-content:center;
}
body[data-page="journalism"] .edition-rule{flex:1;height:1px;background:rgba(255,255,255,.1)}

/* Newspaper nameplate */
body[data-page="journalism"] .nameplate{
  text-align:center;
  border-top:3px solid rgba(255,255,255,.9);
  border-bottom:1px solid rgba(255,255,255,.3);
  padding:20px 0 16px;
  margin-bottom:16px;
  width:100%;
}
body[data-page="journalism"] .nameplate-title{
  font-family:'Libre Baskerville',serif;
  font-size:clamp(2.8rem,8vw,7rem);
  font-weight:700;color:white;
  letter-spacing:-.02em;line-height:.9;
  text-transform:uppercase;
}
body[data-page="journalism"] .nameplate-sub{
  font-family:'Libre Baskerville',serif;
  font-size:.85rem;color:rgba(255,255,255,.45);
  font-style:italic;margin-top:6px;letter-spacing:.04em;
}

/* Tagline row */
body[data-page="journalism"] .masthead-tagline-row{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;padding:10px 0 0;
  border-top:1px solid rgba(255,255,255,.12);
  font-family:'DM Mono',monospace;font-size:.62rem;
  color:rgba(255,255,255,.25);letter-spacing:.08em;text-transform:uppercase;
  margin-bottom:32px;
}

/* Hero article in masthead */
body[data-page="journalism"] .masthead-hero{
  display:grid;grid-template-columns:1.4fr 1fr;
  gap:0;width:100%;
  border-top:2px solid rgba(255,255,255,.15);
}
body[data-page="journalism"] .mh-main{
  padding:28px 36px 28px 0;
  border-right:1px solid rgba(255,255,255,.1);
}
body[data-page="journalism"] .mh-side{
  padding:28px 0 28px 36px;
  display:flex;flex-direction:column;gap:24px;
}
body[data-page="journalism"] .mh-label{
  font-family:'DM Mono',monospace;
  font-size:.62rem;color:var(--red);
  letter-spacing:.12em;text-transform:uppercase;
  font-weight:500;margin-bottom:10px;
  display:flex;align-items:center;gap:6px;
}
body[data-page="journalism"] .mh-label::before{content:'';display:block;width:14px;height:1px;background:var(--red)}
body[data-page="journalism"] .mh-label.breaking{
  color:white;background:var(--red);
  padding:2px 10px;border-radius:4px;display:inline-flex;
}
body[data-page="journalism"] .mh-label.breaking::before{display:none}
body[data-page="journalism"] .mh-headline{
  font-family:'Libre Baskerville',serif;
  font-size:clamp(1.8rem,3.5vw,3rem);
  font-weight:700;color:white;
  line-height:1.1;letter-spacing:-.03em;
  margin-bottom:12px;cursor:pointer;
  transition:color .2s;
}
body[data-page="journalism"] .mh-headline:hover{color:rgba(255,255,255,.8)}
body[data-page="journalism"] .mh-deck{
  font-size:.92rem;color:rgba(255,255,255,.5);
  line-height:1.7;font-weight:300;margin-bottom:14px;
  max-width:480px;
}
body[data-page="journalism"] .mh-byline{
  font-family:'DM Mono',monospace;
  font-size:.65rem;color:rgba(255,255,255,.3);
  letter-spacing:.06em;text-transform:uppercase;
}
body[data-page="journalism"] .mh-byline span{color:rgba(255,255,255,.5)}

/* Side stories */
body[data-page="journalism"] .mh-side-story{
  padding-bottom:20px;
  border-bottom:1px solid rgba(255,255,255,.08);
  cursor:pointer;
  transition:opacity .2s;
}
body[data-page="journalism"] .mh-side-story:last-child{border-bottom:none;padding-bottom:0}
body[data-page="journalism"] .mh-side-story:hover{opacity:.75}
body[data-page="journalism"] .mhs-headline{
  font-family:'Libre Baskerville',serif;
  font-size:1rem;font-weight:700;
  color:white;line-height:1.25;margin-bottom:5px;
  letter-spacing:-.015em;
}
body[data-page="journalism"] .mhs-deck{
  font-size:.78rem;color:rgba(255,255,255,.35);
  line-height:1.6;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
body[data-page="journalism"] .mhs-meta{
  font-family:'DM Mono',monospace;font-size:.6rem;
  color:rgba(255,255,255,.25);letter-spacing:.06em;
  margin-top:6px;
}

/* ══════════════════════════════════════════════════
   SECTION DIVIDERS (newspaper-style rules)
══════════════════════════════════════════════════ */
body[data-page="journalism"] .section-rule{
  display:flex;align-items:center;gap:0;
  margin:0;padding:0;
}
body[data-page="journalism"] .rule-thick{height:4px;background:var(--fg);flex:1}
body[data-page="journalism"] .rule-thin{height:1px;background:var(--border-b);flex:1;margin-top:2px}
body[data-page="journalism"] .rule-label{
  font-family:'Libre Baskerville',serif;
  font-size:.72rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  color:white;background:var(--fg);
  padding:4px 14px;flex-shrink:0;
}

/* ══════════════════════════════════════════════════
   FILTER / SEARCH BAR
══════════════════════════════════════════════════ */
body[data-page="journalism"] .filter-bar{
  background:var(--bg-2);
  border-top:2px solid var(--fg);
  border-bottom:1px solid var(--border);
  position:sticky;top:61px;z-index:900;
  transition:background .45s;
}
body[data-page="journalism"] .filter-inner{
  max-width:1280px;margin:0 auto;padding:0 40px;
  display:flex;align-items:center;gap:14px;height:56px;
}

body[data-page="journalism"] .search-wrap{position:relative;flex-shrink:0;width:280px}
body[data-page="journalism"] .s-icon{
  position:absolute;left:13px;top:50%;transform:translateY(-50%);
  color:var(--fg-3);pointer-events:none;
}
body[data-page="journalism"] .s-icon svg{width:14px;height:14px}
body[data-page="journalism"] .s-input{
  width:100%;background:var(--card);
  border:1px solid var(--border-b);
  padding:8px 36px 8px 36px;
  color:var(--fg);font-size:.83rem;outline:none;
  transition:border-color .2s,box-shadow .2s;
  font-family:'DM Sans',sans-serif;
}
body[data-page="journalism"] .s-input::placeholder{color:var(--fg-3)}
body[data-page="journalism"] .s-input:focus{
  border-color:var(--red);
  box-shadow:0 0 0 3px rgba(208,2,27,.1);
}
body[data-page="journalism"] .s-clear{
  position:absolute;right:11px;top:50%;transform:translateY(-50%);
  background:none;border:none;color:var(--fg-3);cursor:pointer;
  display:none;padding:2px;
}
body[data-page="journalism"] .s-clear svg{width:13px;height:13px;display:block}
body[data-page="journalism"] .s-clear.show{display:block}

/* Desk pills */
body[data-page="journalism"] .desk-pills{
  display:flex;gap:6px;overflow-x:auto;
  scrollbar-width:none;flex:1;
}
body[data-page="journalism"] .desk-pills::-webkit-scrollbar{display:none}
body[data-page="journalism"] .desk-pill{
  background:none;border:1px solid var(--border-b);
  padding:6px 16px;
  font-size:.76rem;font-weight:500;color:var(--fg-2);
  cursor:pointer;white-space:nowrap;
  transition:all .2s;
  font-family:'DM Sans',sans-serif;
}
body[data-page="journalism"] .desk-pill:hover{color:var(--fg);border-color:var(--fg-3)}
body[data-page="journalism"] .desk-pill.active{
  background:var(--fg);color:var(--bg);
  border-color:var(--fg);
}

body[data-page="journalism"] .sort-sel{
  background:var(--card);border:1px solid var(--border-b);
  padding:7px 14px;color:var(--fg-2);font-size:.76rem;outline:none;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;
  padding-right:28px;cursor:pointer;transition:border-color .2s;
  font-family:'DM Sans',sans-serif;
}
body[data-page="journalism"] .sort-sel:focus{border-color:var(--red)}
body[data-page="journalism"] .result-count{
  font-family:'DM Mono',monospace;font-size:.72rem;
  color:var(--fg-3);white-space:nowrap;flex-shrink:0;
}
body[data-page="journalism"] .result-count span{color:var(--fg);font-weight:500}

/* view toggle */
body[data-page="journalism"] .view-btns{display:flex;gap:2px}
body[data-page="journalism"] .vbtn{
  background:none;border:1px solid var(--border-b);
  padding:7px 9px;color:var(--fg-3);cursor:pointer;transition:all .2s;
}
body[data-page="journalism"] .vbtn svg{width:13px;height:13px;display:block}
body[data-page="journalism"] .vbtn:hover{color:var(--fg);border-color:var(--fg-3)}
body[data-page="journalism"] .vbtn.active{background:var(--fg);color:var(--bg);border-color:var(--fg)}

/* ══════════════════════════════════════════════════
   ARTICLES SECTION
══════════════════════════════════════════════════ */
body[data-page="journalism"] .articles-section{padding:48px 0 100px;background:var(--bg)}
body[data-page="journalism"] .art-inner{max-width:1280px;margin:0 auto;padding:0 40px}

body[data-page="journalism"] .art-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;border-top:2px solid var(--fg);
  border-left:1px solid var(--border);
}
body[data-page="journalism"] .art-grid.list-mode{
  grid-template-columns:1fr;
  border-left:none;
}

/* ── Article Card ──────────────────────────────── */
body[data-page="journalism"] .art-card{
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:24px;
  background:var(--card);
  cursor:pointer;
  transition:background .2s;
  display:flex;flex-direction:column;
  position:relative;
}
body[data-page="journalism"] .art-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--desk-color,var(--red));
  transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease);
}
body[data-page="journalism"] .art-card:hover::before{transform:scaleX(1)}
body[data-page="journalism"] .art-card:hover{background:var(--bg)}
body[data-page="journalism"] .art-card:hover .art-headline{text-decoration:underline;text-decoration-color:var(--red)}

body[data-page="journalism"] .art-cat{
  font-family:'DM Mono',monospace;
  font-size:.6rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--desk-color,var(--red));
  margin-bottom:10px;
  display:flex;align-items:center;gap:6px;
}
body[data-page="journalism"] .art-cat-dot{
  width:5px;height:5px;border-radius:50%;
  background:var(--desk-color,var(--red));flex-shrink:0;
}
body[data-page="journalism"] .art-headline{
  font-family:'Libre Baskerville',serif;
  font-size:1.1rem;font-weight:700;
  color:var(--fg);line-height:1.25;
  letter-spacing:-.015em;margin-bottom:10px;
  display:-webkit-box;-webkit-line-clamp:3;
  -webkit-box-orient:vertical;overflow:hidden;
  transition:text-decoration .2s;
}
body[data-page="journalism"] .art-deck{
  font-size:.8rem;color:var(--fg-2);
  line-height:1.65;flex:1;margin-bottom:16px;
  display:-webkit-box;-webkit-line-clamp:3;
  -webkit-box-orient:vertical;overflow:hidden;
  font-weight:300;
}
body[data-page="journalism"] .art-byline{
  font-family:'DM Mono',monospace;font-size:.62rem;
  color:var(--fg-3);letter-spacing:.04em;
  border-top:1px solid var(--border);padding-top:12px;margin-top:auto;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
body[data-page="journalism"] .art-author-name{color:var(--fg-2);font-weight:500;font-style:normal}
body[data-page="journalism"] .art-tag-pill{
  margin-left:auto;
  font-size:.58rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:var(--bg-2);color:var(--fg-3);
  padding:2px 7px;
}

/* List mode */
body[data-page="journalism"] .art-grid.list-mode .art-card{
  flex-direction:row;gap:20px;align-items:flex-start;
  border-right:none;padding:20px 4px;
  border-bottom:1px solid var(--border);
}
body[data-page="journalism"] .art-grid.list-mode .art-card::before{display:none}
body[data-page="journalism"] .art-grid.list-mode .art-card:hover .art-headline{text-decoration:underline}
body[data-page="journalism"] .art-grid.list-mode .art-card:hover{background:transparent}
body[data-page="journalism"] .art-grid.list-mode .art-deck{display:none}
body[data-page="journalism"] .art-grid.list-mode .art-headline{-webkit-line-clamp:1;font-size:.95rem}
body[data-page="journalism"] .art-grid.list-mode .art-card-text{display:flex;flex-direction:column;flex:1}

/* No results */
body[data-page="journalism"] .no-res{
  grid-column:1/-1;text-align:center;
  padding:80px 0;display:none;
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
body[data-page="journalism"] .no-res.show{display:block}
body[data-page="journalism"] .nr-icon{font-size:2.5rem;margin-bottom:12px;opacity:.3}
body[data-page="journalism"] .nr-title{
  font-family:'Libre Baskerville',serif;
  font-size:1.5rem;color:var(--fg-2);margin-bottom:6px;
}
body[data-page="journalism"] .nr-sub{font-size:.85rem;color:var(--fg-3)}

/* Load more */
body[data-page="journalism"] .load-wrap{
  text-align:center;margin-top:40px;
  padding-top:32px;border-top:1px solid var(--border);
}
body[data-page="journalism"] .load-btn{
  background:none;border:2px solid var(--fg);
  padding:13px 40px;
  font-family:'Libre Baskerville',serif;
  font-size:.9rem;font-weight:700;color:var(--fg);
  cursor:pointer;transition:all .25s var(--spring);
  letter-spacing:.04em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:8px;
}
body[data-page="journalism"] .load-btn:hover{
  background:var(--fg);color:var(--bg);
  transform:translateY(-2px);box-shadow:0 6px 20px var(--shadow);
}
body[data-page="journalism"] .load-btn.hidden{display:none}

/* ══════════════════════════════════════════════════
   ABOUT SECTION
══════════════════════════════════════════════════ */
body[data-page="journalism"] .about-section{
  padding:80px 0;background:var(--bg-2);
  border-top:2px solid var(--fg);
  border-bottom:2px solid var(--fg);
}
body[data-page="journalism"] .about-inner{
  max-width:1280px;margin:0 auto;padding:0 40px;
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;
}
body[data-page="journalism"] .about-col{
  padding:0 40px;
  border-right:1px solid var(--border);
}
body[data-page="journalism"] .about-col:first-child{padding-left:0}
body[data-page="journalism"] .about-col:last-child{border-right:none}
body[data-page="journalism"] .about-label{
  font-family:'DM Mono',monospace;
  font-size:.62rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--red);margin-bottom:12px;
}
body[data-page="journalism"] .about-title{
  font-family:'Libre Baskerville',serif;
  font-size:1.4rem;font-weight:700;color:var(--fg);
  letter-spacing:-.02em;margin-bottom:10px;line-height:1.2;
}
body[data-page="journalism"] .about-body{font-size:.84rem;color:var(--fg-2);line-height:1.8;font-weight:300}
body[data-page="journalism"] .about-stat{
  margin-top:20px;padding-top:16px;
  border-top:1px solid var(--border);
}
body[data-page="journalism"] .as-val{
  font-family:'Libre Baskerville',serif;
  font-size:2.5rem;font-weight:700;color:var(--fg);
  letter-spacing:-.04em;line-height:1;
}
body[data-page="journalism"] .as-val em{color:var(--red);font-style:normal}
body[data-page="journalism"] .as-lbl{
  font-size:.68rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.08em;color:var(--fg-3);margin-top:4px;
}

/* ══════════════════════════════════════════════════
   ARTICLE MODAL
══════════════════════════════════════════════════ */
body[data-page="journalism"] .modal-overlay{
  position:fixed;inset:0;z-index:2000;
  background:var(--overlay);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  display:flex;align-items:flex-start;justify-content:center;
  padding:20px;overflow-y:auto;
  opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease);
}
body[data-page="journalism"] .modal-overlay.open{opacity:1;pointer-events:all}

body[data-page="journalism"] .modal{
  background:var(--card);
  border:1px solid var(--border-b);
  width:100%;max-width:780px;
  margin:auto;
  box-shadow:0 60px 160px var(--shadow);
  transform:translateY(32px) scale(.98);
  transition:transform .38s var(--spring);
  position:relative;overflow:hidden;
}
body[data-page="journalism"] .modal-overlay.open .modal{transform:translateY(0) scale(1)}

/* Reading progress */
body[data-page="journalism"] .modal-progress{position:sticky;top:0;left:0;right:0;height:3px;z-index:10;background:var(--border)}
body[data-page="journalism"] .modal-progress-fill{height:100%;background:var(--red);width:0%;transition:width .08s linear}

/* Modal masthead strip */
body[data-page="journalism"] .modal-masthead{
  background:var(--fg);
  padding:18px 44px;
  display:flex;align-items:center;justify-content:space-between;
}
body[data-page="journalism"] .modal-pub{
  font-family:'Libre Baskerville',serif;
  font-size:.85rem;font-weight:700;
  color:var(--bg);letter-spacing:.04em;text-transform:uppercase;
}
body[data-page="journalism"] .modal-close{
  width:32px;height:32px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);
  color:var(--bg);display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .2s;flex-shrink:0;
}
body[data-page="journalism"] .modal-close:hover{background:rgba(255,255,255,.2);transform:rotate(90deg)}
body[data-page="journalism"] .modal-close svg{width:14px;height:14px}

body[data-page="journalism"] .modal-body{padding:40px 44px 56px}

body[data-page="journalism"] .modal-desk{
  font-family:'DM Mono',monospace;font-size:.62rem;
  color:var(--red);letter-spacing:.12em;text-transform:uppercase;
  margin-bottom:14px;display:flex;align-items:center;gap:6px;
}
body[data-page="journalism"] .modal-headline{
  font-family:'Libre Baskerville',serif;
  font-size:clamp(1.8rem,4vw,2.8rem);
  font-weight:700;line-height:1.1;
  letter-spacing:-.04em;color:var(--fg);margin-bottom:14px;
}
body[data-page="journalism"] .modal-deck{
  font-family:'Libre Baskerville',serif;
  font-size:1.05rem;color:var(--fg-2);
  line-height:1.6;font-style:italic;
  font-weight:400;margin-bottom:20px;
  padding-bottom:20px;border-bottom:1px solid var(--border);
}
body[data-page="journalism"] .modal-byline{
  display:flex;align-items:center;gap:16px;
  margin-bottom:32px;flex-wrap:wrap;
}
body[data-page="journalism"] .modal-author{display:flex;align-items:center;gap:10px}
body[data-page="journalism"] .author-avatar{
  width:36px;height:36px;
  border:1px solid var(--border-b);
  background:var(--bg-3);
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;flex-shrink:0;
}
body[data-page="journalism"] .author-name{
  font-family:'Libre Baskerville',serif;
  font-size:.85rem;font-weight:700;color:var(--fg);
}
body[data-page="journalism"] .author-role{font-size:.72rem;color:var(--fg-3);margin-top:1px}
body[data-page="journalism"] .modal-date{
  font-family:'DM Mono',monospace;
  font-size:.68rem;color:var(--fg-3);
}
body[data-page="journalism"] .modal-read-time{
  font-family:'DM Mono',monospace;
  font-size:.68rem;color:var(--fg-3);
  margin-left:auto;
}

/* Article content typography — newspaper style */
body[data-page="journalism"] .modal-content{line-height:1.9;column-gap:40px}
body[data-page="journalism"] .modal-content p{
  font-size:.95rem;color:var(--fg-2);
  margin-bottom:18px;font-weight:300;
  font-family:'DM Sans',sans-serif;
}
body[data-page="journalism"] .modal-content p strong{color:var(--fg);font-weight:600}
body[data-page="journalism"] .modal-content h3{
  font-family:'Libre Baskerville',serif;
  font-size:1.25rem;font-weight:700;
  color:var(--fg);letter-spacing:-.02em;
  margin:32px 0 12px;
  padding-bottom:8px;border-bottom:1px solid var(--border);
}
body[data-page="journalism"] .modal-content blockquote{
  margin:28px 0;
  border-left:3px solid var(--red);
  padding:20px 24px;
  background:var(--pull-bg);
}
body[data-page="journalism"] .modal-content blockquote p{
  font-family:'Libre Baskerville',serif;
  font-size:1.1rem;font-style:italic;
  color:var(--fg);margin-bottom:8px;font-weight:400;
}
body[data-page="journalism"] .modal-content blockquote cite{
  font-family:'DM Mono',monospace;
  font-size:.68rem;color:var(--fg-3);font-style:normal;letter-spacing:.04em;
}
body[data-page="journalism"] .modal-content .data-box{
  background:var(--bg-2);
  border:1px solid var(--border-b);
  border-top:3px solid var(--fg);
  padding:20px 24px;margin:28px 0;
}
body[data-page="journalism"] .modal-content .data-box-title{
  font-family:'Libre Baskerville',serif;
  font-size:.8rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;
  color:var(--fg);margin-bottom:14px;
}
body[data-page="journalism"] .modal-content .data-row{
  display:flex;align-items:baseline;gap:12px;
  padding:8px 0;border-top:1px solid var(--border);
}
body[data-page="journalism"] .modal-content .data-row:first-of-type{border-top:none}
body[data-page="journalism"] .modal-content .dr-label{font-size:.78rem;color:var(--fg-2);flex:1}
body[data-page="journalism"] .modal-content .dr-val{
  font-family:'Libre Baskerville',serif;
  font-size:1rem;font-weight:700;color:var(--fg);
}
body[data-page="journalism"] .modal-content .dr-val em{color:var(--red);font-style:normal}

body[data-page="journalism"] .modal-footer{
  margin-top:40px;padding-top:24px;
  border-top:2px solid var(--fg);
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:14px;
}
body[data-page="journalism"] .modal-share{display:flex;gap:8px}
body[data-page="journalism"] .share-btn{
  background:none;border:1px solid var(--border-b);
  padding:7px 16px;font-size:.75rem;font-weight:500;
  color:var(--fg-2);cursor:pointer;transition:all .2s;
  font-family:'DM Sans',sans-serif;
}
body[data-page="journalism"] .share-btn:hover{border-color:var(--red);color:var(--red)}
body[data-page="journalism"] .modal-next-btn{
  display:flex;align-items:center;gap:6px;
  font-family:'DM Mono',monospace;font-size:.72rem;
  color:var(--fg-3);cursor:pointer;background:none;border:none;
  transition:color .2s;letter-spacing:.04em;text-transform:uppercase;
}
body[data-page="journalism"] .modal-next-btn:hover{color:var(--fg)}

/* ══════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════ */
body[data-page="journalism"] footer{
  background:var(--fg);
  padding:40px 0;
}
body[data-page="journalism"] .f-inner{
  max-width:1280px;margin:0 auto;padding:0 40px;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
}
body[data-page="journalism"] .f-brand{
  font-family:'Libre Baskerville',serif;
  font-size:1.2rem;font-weight:700;color:var(--bg);letter-spacing:.02em;
  text-transform:uppercase;
}
body[data-page="journalism"] .f-copy{font-size:.74rem;color:rgba(var(--bg),.4);opacity:.4;color:var(--bg)}
body[data-page="journalism"] .f-home{
  color:var(--bg);text-decoration:none;
  font-size:.78rem;font-weight:500;
  opacity:.45;transition:opacity .2s;
}
body[data-page="journalism"] .f-home:hover{opacity:.9}

/* ══════════════════════════════════════════════════
   REVEAL
══════════════════════════════════════════════════ */
body[data-page="journalism"] .reveal{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
body[data-page="journalism"] .reveal.visible{opacity:1;transform:none}
body[data-page="journalism"] .rd1{transition-delay:.07s}body[data-page="journalism"] .rd2{transition-delay:.14s}body[data-page="journalism"] .rd3{transition-delay:.21s}

/* ══════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════ */
/* ─── CURSOR SYSTEM ─────────────────────────────────────────── */
html.bc-cursor-active *{ cursor: none !important; }
html.bc-cursor-active input, html.bc-cursor-active textarea, html.bc-cursor-active [contenteditable]{ cursor: text !important; }
#bc-cursor{
  position: fixed; top: 0; left: 0; width: 20px; height: 24px;
  pointer-events: none; z-index: 999999; opacity: 0;
  transition: opacity 0.5s ease; will-change: transform;
}
#bc-cursor svg{
  display: block; width: 20px; height: 24px; transform-origin: 0 0;
  transition: transform 0.16s cubic-bezier(0.25,0.46,0.45,0.94), opacity 0.16s ease;
  will-change: transform;
}
#bc-cursor .arrow-fill{ fill: rgba(20,20,28,0.88); }
#bc-cursor .arrow-stroke{ fill: none; stroke: rgba(255,255,255,0.35); stroke-width: 1px; stroke-linejoin: round; }
#bc-cursor.bc-hover svg{ transform: scale(1.15); }
#bc-cursor.bc-click svg{ transform: scale(0.78); transition: transform 0.07s cubic-bezier(0.34,1.56,0.64,1); }
#bc-cursor.bc-text svg{ opacity: 0; transform: scale(0.6); }
html[data-theme="dark"] #bc-cursor .arrow-fill{ fill: rgba(255,255,255,0.92); }
html[data-theme="dark"] #bc-cursor .arrow-stroke{ stroke: rgba(0,0,0,0.5); }

@media(max-width:960px){

  body[data-page="journalism"] .masthead-hero{grid-template-columns:1fr;gap:0}
  body[data-page="journalism"] .mh-main{border-right:none;padding-right:0;border-bottom:1px solid rgba(255,255,255,.1)}
  body[data-page="journalism"] .mh-side{padding-left:0;padding-top:24px}
  body[data-page="journalism"] .art-grid{grid-template-columns:repeat(2,1fr)}
  body[data-page="journalism"] .about-inner{grid-template-columns:1fr;gap:0}
  body[data-page="journalism"] .about-col{padding:24px 0;border-right:none;border-top:1px solid var(--border)}
  body[data-page="journalism"] .about-col:first-child{padding-top:0;border-top:none}

}
@media(max-width:640px){

  body[data-page="journalism"] nav{padding:0}
  body[data-page="journalism"] .nav-inner{padding:0 16px}
  body[data-page="journalism"] .art-inner{padding:0 16px}
  body[data-page="journalism"] .art-grid{grid-template-columns:1fr}
  body[data-page="journalism"] .filter-inner{padding:0 16px;gap:8px}
  body[data-page="journalism"] .desk-pills{max-width:150px}
  body[data-page="journalism"] .result-count{display:none}
  body[data-page="journalism"] .sort-sel{display:none}
  body[data-page="journalism"] .masthead-inner{padding:28px 20px 0}
  body[data-page="journalism"] .modal-body{padding:24px 20px 40px}
  body[data-page="journalism"] .modal-masthead{padding:16px 20px}
  body[data-page="journalism"] .f-inner{flex-direction:column;align-items:flex-start}

}

/* Only suppress native cursor after JS confirms it loaded.
   If JS never runs, nothing here ever fires. */
html.bc-cursor-active *{
  cursor: none !important;
}

/* Restore I-beam in text fields — users need native precision */
html.bc-cursor-active input, html.bc-cursor-active textarea, html.bc-cursor-active [contenteditable]{
  cursor: text !important;
}

/* ── CURSOR WRAPPER ────────────────────────────────────────────
   Top-left corner of the div = the mouse coordinate.
   SVG tip is drawn at (0,0) — so the visual tip and the
   hot-point are the exact same pixel. No offset required. */
#bc-cursor{
  position: fixed;
  top: 0;
  left: 0;
  width: 20px;
  height: 24px;
  pointer-events: none;
  z-index: 999999;
  opacity: 0;
  transition: opacity 0.5s ease;
  will-change: transform;
}

/* ── THE ARROW SVG ─────────────────────────────────────────────
   transform-origin: 0 0 locks all scale animations to the tip.
   Because the tip IS (0,0) in the viewBox, scale never drifts. */
#bc-cursor svg{
  display: block;
  width: 20px;
  height: 24px;
  transform-origin: 0 0;
  transition:
    transform  0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    opacity    0.16s ease;
  will-change: transform;
}

/* The filled arrow body */
#bc-cursor .arrow-fill{
  fill: rgba(255, 255, 255, 0.92);
  transition: fill 0.16s ease;
}

/* The 1px dark stroke — gives it the OS-cursor depth */
#bc-cursor .arrow-stroke{
  fill: none;
  stroke: rgba(0, 0, 0, 0.55);
  stroke-width: 1px;
  stroke-linejoin: round;
  transition: stroke 0.16s ease;
}

/* ── HOVER STATE ───────────────────────────────────────────────
   Scale up ~15% — just enough to register "ready".
   No color change. Feels like the cursor leaning in. */
#bc-cursor.bc-hover svg{
  transform: scale(1.15);
}

/* ── CLICK STATE ───────────────────────────────────────────────
   Fast compress to 80%, snaps back on mouseup.
   The one moment the cursor makes itself physically felt. */
#bc-cursor.bc-click svg{
  transform: scale(0.78);
  transition:
    transform  0.07s cubic-bezier(0.34, 1.56, 0.64, 1),
    filter     0.07s ease;
}

/* ── TEXT INPUT STATE ──────────────────────────────────────────
   Arrow fades out entirely — native I-beam has control.
   The cursor doesn't compete with text selection. */
#bc-cursor.bc-text svg{
  opacity: 0;
  transform: scale(0.6);
}

/* ── LIGHT THEME ───────────────────────────────────────────────
   Flip fill to dark — same arrow, still readable. */
html[data-theme="light"] #bc-cursor .arrow-fill{
  fill: rgba(20, 20, 28, 0.88);
}
html[data-theme="light"] #bc-cursor .arrow-stroke{
  stroke: rgba(255, 255, 255, 0.45);
}

/* ═══════════════════════════════════════════════════
   PAGE: TEAM (team.html)
═══════════════════════════════════════════════════ */
*, *::before, *::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body[data-page="team"]{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--fg);overflow-x:hidden;transition:background .45s,color .45s;min-height:100vh}
body[data-page="team"] button, body[data-page="team"] input, body[data-page="team"] textarea{font-family:inherit}
body[data-page="team"]{--red:#D0021B;--red-bright:#FF1F3D;--gold:#C9A84C;--gold-light:#F0C97A;--near-black:#080809;--ease:cubic-bezier(.25,.46,.45,.94);--spring:cubic-bezier(.34,1.56,.64,1)}
html[data-theme="dark"] body[data-page="team"]{--bg:#08080B;--bg-2:#101016;--bg-3:#181824;--fg:#EDE8F8;--fg-2:#9A94B0;--fg-3:#4A4660;--border:rgba(255,255,255,.07);--border-b:rgba(255,255,255,.13);--shadow:rgba(0,0,0,.7);--glow:rgba(208,2,27,.22);--card:rgba(16,16,24,.97);--nav-bg:rgba(8,8,11,.94)}
html[data-theme="light"] body[data-page="team"]{--bg:#F6F4F0;--bg-2:#ECEAE6;--bg-3:#E0DDD8;--fg:#0A0A0B;--fg-2:#3A3836;--fg-3:#888480;--border:rgba(0,0,0,.08);--border-b:rgba(0,0,0,.15);--shadow:rgba(0,0,0,.1);--glow:rgba(208,2,27,.1);--card:rgba(255,253,250,.99);--nav-bg:rgba(246,244,240,.95)}

body[data-page="team"] .rainbow-bar{position:fixed;top:0;left:0;right:0;height:3px;z-index:1001;background:linear-gradient(90deg,#FF3B3B 0%,#FF6B35 14%,#FFD700 28%,#51CF66 42%,#339AF0 56%,#845EF7 70%,#FF3B3B 84%,#FF6B35 100%);background-size:200% 100%;animation:rbShift 6s linear infinite}
@keyframes rbShift{to{background-position:200% 0}}

body[data-page="team"] nav{position:fixed;top:3px;left:0;right:0;height:60px;z-index:1000;background:var(--nav-bg);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 32px;transition:background .45s}
body[data-page="team"] .nav-logo{font-family:'Playfair Display',serif;font-weight:900;font-size:1.2rem;color:var(--fg);text-decoration:none;letter-spacing:-.02em;display:flex;align-items:center;gap:9px}
body[data-page="team"] .logo-dot{width:7px;height:7px;border-radius:50%;background:var(--red-bright);animation:ldot 2s ease-in-out infinite}
@keyframes ldot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.6)}}
body[data-page="team"] .nav-right{display:flex;align-items:center;gap:10px}
body[data-page="team"] .nav-pill{background:var(--border);border:1px solid var(--border-b);border-radius:20px;padding:6px 14px;font-size:.78rem;font-weight:500;color:var(--fg-2);cursor:pointer;text-decoration:none;transition:all .2s}
body[data-page="team"] .nav-pill:hover{color:var(--fg);background:var(--border-b)}
body[data-page="team"] .nav-pill.accent{background:var(--red);color:white;border-color:var(--red)}
body[data-page="team"] .nav-pill.accent:hover{background:var(--red-bright)}

/* HERO */
body[data-page="team"] .hero{min-height:72vh;padding-top:63px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
body[data-page="team"] .hero-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
body[data-page="team"] .hb-orb{position:absolute;border-radius:50%;filter:blur(120px);pointer-events:none}
body[data-page="team"] .hb-1{width:600px;height:600px;background:rgba(208,2,27,.09);top:-20%;left:-10%;animation:hbdrift 22s ease-in-out infinite}
body[data-page="team"] .hb-2{width:400px;height:400px;background:rgba(201,168,76,.06);bottom:-5%;right:-5%;animation:hbdrift 18s ease-in-out infinite reverse}
body[data-page="team"] .hb-3{width:300px;height:300px;background:rgba(132,94,247,.04);top:40%;left:50%;animation:hbdrift 26s ease-in-out infinite 4s}
@keyframes hbdrift{0%,100%{transform:translate(0,0)}50%{transform:translate(28px,-22px)}}
body[data-page="team"] .hero-bg::before{content:'';position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,var(--border) 1px,transparent 1px);background-size:30px 30px;opacity:.7}
body[data-page="team"] .hero-content{position:relative;z-index:2;max-width:800px;width:100%;padding:0 40px;text-align:center;animation:heroIn 1s var(--ease) both}
@keyframes heroIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
body[data-page="team"] .hero-eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(208,2,27,.1);border:1px solid rgba(208,2,27,.2);border-radius:20px;padding:5px 14px;font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--red-bright);margin-bottom:24px}
body[data-page="team"] .hero-title{font-family:'Playfair Display',serif;font-weight:900;font-size:clamp(2.8rem,7vw,6.5rem);line-height:.92;letter-spacing:-.05em;color:var(--fg);margin-bottom:20px}
body[data-page="team"] .hero-title em{color:var(--red-bright);font-style:italic}
body[data-page="team"] .hero-sub{font-size:1.05rem;color:var(--fg-2);line-height:1.75;font-weight:300;max-width:520px;margin:0 auto 44px}
body[data-page="team"] .hero-pills{display:inline-flex;align-items:stretch;background:var(--card);border:1px solid var(--border-b);border-radius:18px;overflow:hidden;box-shadow:0 8px 40px var(--shadow)}
body[data-page="team"] .hpill{padding:16px 28px;text-align:center;border-right:1px solid var(--border)}
body[data-page="team"] .hpill:last-child{border-right:none}
body[data-page="team"] .hpill-num{font-family:'Playfair Display',serif;font-size:1.8rem;font-weight:900;color:var(--fg);letter-spacing:-.04em;line-height:1}
body[data-page="team"] .hpill-num em{color:var(--red-bright);font-style:normal}
body[data-page="team"] .hpill-lbl{font-size:.62rem;font-weight:600;text-transform:uppercase;letter-spacing:.09em;color:var(--fg-3);margin-top:4px}

/* ORG STRIP */
body[data-page="team"] .org-strip{background:var(--bg-2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:18px 40px;overflow-x:auto;scrollbar-width:none}
body[data-page="team"] .org-strip::-webkit-scrollbar{display:none}
body[data-page="team"] .org-strip-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:0;min-width:max-content}
body[data-page="team"] .org-node{display:flex;flex-direction:column;align-items:center;gap:5px;padding:0 22px;border-right:1px solid var(--border)}
body[data-page="team"] .org-node:last-child{border-right:none}
body[data-page="team"] .org-node-dept{font-family:'DM Mono',monospace;font-size:.55rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}
body[data-page="team"] .org-node-title{font-size:.75rem;font-weight:600;color:var(--fg);white-space:nowrap}
body[data-page="team"] .org-node-bar{width:28px;height:2px;border-radius:2px;background:var(--nc,var(--red));margin-top:2px}

/* DIRECTORS */
body[data-page="team"] .directors-section{padding:60px 0 100px}
body[data-page="team"] .dir-inner{max-width:1200px;margin:0 auto;padding:0 40px}
body[data-page="team"] .section-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:40px}
body[data-page="team"] .section-label{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:12px;display:flex;align-items:center;gap:8px}
body[data-page="team"] .section-label::before{content:'';display:block;width:20px;height:1px;background:var(--red)}
body[data-page="team"] .section-title{font-family:'Playfair Display',serif;font-weight:900;font-size:clamp(2rem,4vw,3.2rem);line-height:1;letter-spacing:-.04em;color:var(--fg)}
body[data-page="team"] .section-title em{color:var(--red-bright);font-style:italic}

body[data-page="team"] .directors-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

/* DIRECTOR CARD */
body[data-page="team"] .dir-card{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:28px 24px 24px;position:relative;overflow:hidden;transition:transform .35s var(--ease),border-color .35s,box-shadow .35s;display:flex;flex-direction:column}
body[data-page="team"] .dir-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--dc,var(--red));transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
body[data-page="team"] .dir-card:hover::before{transform:scaleX(1)}
body[data-page="team"] .dir-card:hover{transform:translateY(-6px);border-color:var(--border-b);box-shadow:0 20px 60px var(--shadow),0 0 0 1px var(--border-b)}
body[data-page="team"] .dir-card.exec .dir-avatar{border-color:var(--gold)}
body[data-page="team"] .dir-card.exec .dir-avatar::after{content:'✦';position:absolute;bottom:-3px;right:-3px;width:17px;height:17px;border-radius:50%;background:var(--gold);color:#000;font-size:.45rem;display:flex;align-items:center;justify-content:center;line-height:17px;text-align:center}

body[data-page="team"] .dir-dept-tag{display:inline-flex;align-items:center;gap:6px;font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--dc,var(--red));margin-bottom:18px}
body[data-page="team"] .dir-dept-tag::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--dc,var(--red));flex-shrink:0}
body[data-page="team"] .dir-avatar{width:72px;height:72px;border-radius:50%;background:var(--bg-3);border:2px solid var(--border-b);display:flex;align-items:center;justify-content:center;font-size:1.8rem;margin-bottom:16px;transition:transform .3s var(--spring),box-shadow .3s;position:relative}
body[data-page="team"] .dir-card:hover .dir-avatar{transform:scale(1.1) rotate(4deg);box-shadow:0 0 0 4px rgba(208,2,27,.15)}
body[data-page="team"] .dir-name{font-family:'Playfair Display',serif;font-size:1.1rem;font-weight:700;color:var(--fg);letter-spacing:-.015em;margin-bottom:3px}
body[data-page="team"] .dir-title{font-size:.7rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--dc,var(--red));margin-bottom:12px}
body[data-page="team"] .dir-bio{font-size:.8rem;color:var(--fg-2);line-height:1.65;font-weight:300;flex:1;margin-bottom:16px}
body[data-page="team"] .dir-tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:14px}
body[data-page="team"] .dir-tag{font-size:.58rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;background:var(--bg-3);color:var(--fg-3);border-radius:6px;padding:2px 8px}
body[data-page="team"] .dir-footer{display:flex;align-items:center;justify-content:space-between;padding-top:12px;border-top:1px solid var(--border)}
body[data-page="team"] .dir-year{font-family:'DM Mono',monospace;font-size:.62rem;color:var(--fg-3)}
body[data-page="team"] .dir-badge{font-size:.58rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:3px 8px;border-radius:6px;background:var(--dbg,rgba(208,2,27,.08));color:var(--dc,var(--red))}

/* LORE SECTION */
body[data-page="team"] .lore-section{padding:80px 0;background:var(--bg-2);border-top:1px solid var(--border)}
body[data-page="team"] .lore-inner{max-width:1200px;margin:0 auto;padding:0 40px;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
body[data-page="team"] .lore-label{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:14px;display:flex;align-items:center;gap:8px}
body[data-page="team"] .lore-label::before{content:'';display:block;width:20px;height:1px;background:var(--red)}
body[data-page="team"] .lore-title{font-family:'Playfair Display',serif;font-weight:900;font-size:clamp(1.8rem,3.5vw,2.8rem);line-height:1.1;letter-spacing:-.04em;color:var(--fg);margin-bottom:16px}
body[data-page="team"] .lore-title em{color:var(--red-bright);font-style:italic}
body[data-page="team"] .lore-body{font-size:.9rem;color:var(--fg-2);line-height:1.8;font-weight:300;margin-bottom:14px}
body[data-page="team"] .lore-btn{display:inline-flex;align-items:center;gap:8px;background:var(--red);color:white;border:none;border-radius:50px;padding:13px 32px;font-size:.88rem;font-weight:600;cursor:pointer;text-decoration:none;letter-spacing:.02em;transition:all .25s var(--spring);margin-top:8px}
body[data-page="team"] .lore-btn:hover{background:var(--red-bright);transform:translateY(-2px);box-shadow:0 8px 30px rgba(208,2,27,.4)}
body[data-page="team"] .values-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
body[data-page="team"] .value-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px 16px;transition:border-color .25s,transform .25s}
body[data-page="team"] .value-card:hover{border-color:var(--border-b);transform:translateY(-2px)}
body[data-page="team"] .vc-icon{font-size:1.4rem;margin-bottom:8px}
body[data-page="team"] .vc-name{font-size:.8rem;font-weight:700;color:var(--fg);margin-bottom:4px}
body[data-page="team"] .vc-desc{font-size:.72rem;color:var(--fg-3);line-height:1.5}

body[data-page="team"] footer{background:var(--near-black);padding:40px 0}
body[data-page="team"] .f-inner{max-width:1200px;margin:0 auto;padding:0 40px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
body[data-page="team"] .f-brand{font-family:'Playfair Display',serif;font-size:1.1rem;font-weight:900;color:white}
body[data-page="team"] .f-copy{font-size:.74rem;color:rgba(255,255,255,.2)}
body[data-page="team"] .f-home{color:rgba(255,255,255,.3);text-decoration:none;font-size:.78rem;font-weight:500;transition:color .2s}
body[data-page="team"] .f-home:hover{color:white}

body[data-page="team"] .reveal{opacity:0;transform:translateY(20px);transition:opacity .65s var(--ease),transform .65s var(--ease)}
body[data-page="team"] .reveal.visible{opacity:1;transform:none}
body[data-page="team"] .rd1{transition-delay:.07s}body[data-page="team"] .rd2{transition-delay:.14s}body[data-page="team"] .rd3{transition-delay:.21s}

/* ─── CURSOR SYSTEM ─────────────────────────────────────────── */
html.bc-cursor-active *{ cursor: none !important; }
html.bc-cursor-active input, html.bc-cursor-active textarea, html.bc-cursor-active [contenteditable]{ cursor: text !important; }
#bc-cursor{
  position: fixed; top: 0; left: 0; width: 20px; height: 24px;
  pointer-events: none; z-index: 999999; opacity: 0;
  transition: opacity 0.5s ease; will-change: transform;
}
#bc-cursor svg{
  display: block; width: 20px; height: 24px; transform-origin: 0 0;
  transition: transform 0.16s cubic-bezier(0.25,0.46,0.45,0.94), opacity 0.16s ease;
  will-change: transform;
}
#bc-cursor .arrow-fill{ fill: rgba(255,255,255,0.92); }
#bc-cursor .arrow-stroke{ fill: none; stroke: rgba(0,0,0,0.5); stroke-width: 1px; stroke-linejoin: round; }
#bc-cursor.bc-hover svg{ transform: scale(1.15); }
#bc-cursor.bc-click svg{ transform: scale(0.78); transition: transform 0.07s cubic-bezier(0.34,1.56,0.64,1); }
#bc-cursor.bc-text svg{ opacity: 0; transform: scale(0.6); }
html[data-theme="light"] #bc-cursor .arrow-fill{ fill: rgba(20,20,28,0.88); }
html[data-theme="light"] #bc-cursor .arrow-stroke{ stroke: rgba(255,255,255,0.4); }

/* Director photo support (for when Sanity images are connected) */
body[data-page="team"] .dir-avatar-img{
  width: 72px; height: 72px; border-radius: 50%;
  object-fit: cover; object-position: center top;
  border: 2px solid var(--border-b);
  margin-bottom: 16px;
}

@media(max-width:960px){
body[data-page="team"] .directors-grid{grid-template-columns:repeat(2,1fr)}body[data-page="team"] .lore-inner{grid-template-columns:1fr;gap:48px}body[data-page="team"] .org-strip{padding:16px 20px}
}
@media(max-width:640px){
body[data-page="team"] nav{padding:0 16px}body[data-page="team"] .dir-inner{padding:0 16px}body[data-page="team"] .directors-grid{grid-template-columns:1fr}body[data-page="team"] .hero-pills{flex-direction:column;border-radius:16px}body[data-page="team"] .hpill{border-right:none;border-bottom:1px solid var(--border)}body[data-page="team"] .hpill:last-child{border-bottom:none}body[data-page="team"] .values-grid{grid-template-columns:1fr}body[data-page="team"] .f-inner{flex-direction:column;align-items:flex-start}body[data-page="team"] .lore-inner{padding:0 20px}
}

/* Only suppress native cursor after JS confirms it loaded.
   If JS never runs, nothing here ever fires. */
html.bc-cursor-active *{
  cursor: none !important;
}

/* Restore I-beam in text fields — users need native precision */
html.bc-cursor-active input, html.bc-cursor-active textarea, html.bc-cursor-active [contenteditable]{
  cursor: text !important;
}

/* ── CURSOR WRAPPER ────────────────────────────────────────────
   Top-left corner of the div = the mouse coordinate.
   SVG tip is drawn at (0,0) — so the visual tip and the
   hot-point are the exact same pixel. No offset required. */
#bc-cursor{
  position: fixed;
  top: 0;
  left: 0;
  width: 20px;
  height: 24px;
  pointer-events: none;
  z-index: 999999;
  opacity: 0;
  transition: opacity 0.5s ease;
  will-change: transform;
}

/* ── THE ARROW SVG ─────────────────────────────────────────────
   transform-origin: 0 0 locks all scale animations to the tip.
   Because the tip IS (0,0) in the viewBox, scale never drifts. */
#bc-cursor svg{
  display: block;
  width: 20px;
  height: 24px;
  transform-origin: 0 0;
  transition:
    transform  0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    opacity    0.16s ease;
  will-change: transform;
}

/* The filled arrow body */
#bc-cursor .arrow-fill{
  fill: rgba(255, 255, 255, 0.92);
  transition: fill 0.16s ease;
}

/* The 1px dark stroke — gives it the OS-cursor depth */
#bc-cursor .arrow-stroke{
  fill: none;
  stroke: rgba(0, 0, 0, 0.55);
  stroke-width: 1px;
  stroke-linejoin: round;
  transition: stroke 0.16s ease;
}

/* ── HOVER STATE ───────────────────────────────────────────────
   Scale up ~15% — just enough to register "ready".
   No color change. Feels like the cursor leaning in. */
#bc-cursor.bc-hover svg{
  transform: scale(1.15);
}

/* ── CLICK STATE ───────────────────────────────────────────────
   Fast compress to 80%, snaps back on mouseup.
   The one moment the cursor makes itself physically felt. */
#bc-cursor.bc-click svg{
  transform: scale(0.78);
  transition:
    transform  0.07s cubic-bezier(0.34, 1.56, 0.64, 1),
    filter     0.07s ease;
}

/* ── TEXT INPUT STATE ──────────────────────────────────────────
   Arrow fades out entirely — native I-beam has control.
   The cursor doesn't compete with text selection. */
#bc-cursor.bc-text svg{
  opacity: 0;
  transform: scale(0.6);
}

/* ── LIGHT THEME ───────────────────────────────────────────────
   Flip fill to dark — same arrow, still readable. */
html[data-theme="light"] #bc-cursor .arrow-fill{
  fill: rgba(20, 20, 28, 0.88);
}
html[data-theme="light"] #bc-cursor .arrow-stroke{
  stroke: rgba(255, 255, 255, 0.45);
}

/* ═══════════════════════════════════════════════════
   PAGE: JOIN (join.html)
═══════════════════════════════════════════════════ */
*, *::before, *::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body[data-page="join"]{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--fg);overflow-x:hidden;transition:background .45s,color .45s;min-height:100vh}
body[data-page="join"] button, body[data-page="join"] input, body[data-page="join"] textarea, body[data-page="join"] select{font-family:inherit}

body[data-page="join"]{--red:#D0021B;--red-bright:#FF1F3D;--gold:#C9A84C;--near-black:#080809;--ease:cubic-bezier(.25,.46,.45,.94);--spring:cubic-bezier(.34,1.56,.64,1)}
html[data-theme="dark"] body[data-page="join"]{--bg:#08080B;--bg-2:#101016;--bg-3:#181824;--fg:#EDE8F8;--fg-2:#9A94B0;--fg-3:#4A4660;--border:rgba(255,255,255,.07);--border-b:rgba(255,255,255,.13);--shadow:rgba(0,0,0,.7);--glow:rgba(208,2,27,.22);--card:rgba(16,16,24,.97);--nav-bg:rgba(8,8,11,.94);--input-bg:rgba(24,24,36,.9)}
html[data-theme="light"] body[data-page="join"]{--bg:#F6F4F0;--bg-2:#ECEAE6;--bg-3:#E0DDD8;--fg:#0A0A0B;--fg-2:#3A3836;--fg-3:#888480;--border:rgba(0,0,0,.08);--border-b:rgba(0,0,0,.15);--shadow:rgba(0,0,0,.1);--glow:rgba(208,2,27,.1);--card:rgba(255,253,250,.99);--nav-bg:rgba(246,244,240,.95);--input-bg:rgba(255,252,248,.95)}

/* ── RAINBOW ─────────────────────────────── */
body[data-page="join"] .rainbow-bar{position:fixed;top:0;left:0;right:0;height:3px;z-index:1001;background:linear-gradient(90deg,#FF3B3B 0%,#FF6B35 14%,#FFD700 28%,#51CF66 42%,#339AF0 56%,#845EF7 70%,#FF3B3B 84%,#FF6B35 100%);background-size:200% 100%;animation:rbShift 6s linear infinite}
@keyframes rbShift{to{background-position:200% 0}}

/* ── NAV ─────────────────────────────────── */
body[data-page="join"] nav{position:fixed;top:3px;left:0;right:0;height:60px;z-index:1000;background:var(--nav-bg);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 32px;transition:background .45s}
body[data-page="join"] .nav-logo{font-family:'Playfair Display',serif;font-weight:900;font-size:1.2rem;color:var(--fg);text-decoration:none;letter-spacing:-.02em;display:flex;align-items:center;gap:9px}
body[data-page="join"] .logo-dot{width:7px;height:7px;border-radius:50%;background:var(--red-bright);animation:ldot 2s ease-in-out infinite}
@keyframes ldot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.6)}}
body[data-page="join"] .nav-right{display:flex;align-items:center;gap:10px}
body[data-page="join"] .nav-pill{background:var(--border);border:1px solid var(--border-b);border-radius:20px;padding:6px 14px;font-size:.78rem;font-weight:500;color:var(--fg-2);cursor:pointer;text-decoration:none;transition:all .2s}
body[data-page="join"] .nav-pill:hover{color:var(--fg);background:var(--border-b)}

/* ── HERO ────────────────────────────────── */
body[data-page="join"] .hero{
  min-height:80vh;padding-top:63px;
  display:grid;grid-template-columns:1fr 1fr;
  align-items:center;
  max-width:1200px;margin:0 auto;
  padding:100px 40px 80px;
  gap:80px;position:relative;
}

/* Floating waveform decoration */
body[data-page="join"] .hero-deco{
  position:absolute;top:120px;right:-60px;
  display:flex;align-items:flex-end;gap:4px;
  height:80px;opacity:.06;pointer-events:none;
}
body[data-page="join"] .hero-deco-bar{
  width:5px;border-radius:3px;
  background:var(--red);
  animation:heroDeco 2s ease-in-out infinite;
}
body[data-page="join"] .hero-deco-bar:nth-child(1){height:30%;animation-delay:0s}
body[data-page="join"] .hero-deco-bar:nth-child(2){height:60%;animation-delay:.15s}
body[data-page="join"] .hero-deco-bar:nth-child(3){height:100%;animation-delay:.3s}
body[data-page="join"] .hero-deco-bar:nth-child(4){height:70%;animation-delay:.45s}
body[data-page="join"] .hero-deco-bar:nth-child(5){height:45%;animation-delay:.6s}
body[data-page="join"] .hero-deco-bar:nth-child(6){height:80%;animation-delay:.3s}
body[data-page="join"] .hero-deco-bar:nth-child(7){height:55%;animation-delay:.15s}
body[data-page="join"] .hero-deco-bar:nth-child(8){height:25%;animation-delay:0s}
@keyframes heroDeco{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1)}}

body[data-page="join"] .hero-text{animation:heroIn 1s var(--ease) both}
@keyframes heroIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
body[data-page="join"] .hero-eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(208,2,27,.1);border:1px solid rgba(208,2,27,.2);border-radius:20px;padding:5px 14px;font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--red-bright);margin-bottom:24px}
body[data-page="join"] .hero-title{font-family:'Playfair Display',serif;font-weight:900;font-size:clamp(2.8rem,6vw,5.5rem);line-height:.92;letter-spacing:-.05em;color:var(--fg);margin-bottom:20px}
body[data-page="join"] .hero-title em{color:var(--red-bright);font-style:italic}
body[data-page="join"] .hero-sub{font-size:1rem;color:var(--fg-2);line-height:1.8;font-weight:300;margin-bottom:36px;max-width:460px}
body[data-page="join"] .hero-cta{display:inline-flex;align-items:center;gap:8px;background:var(--red);color:white;border:none;border-radius:50px;padding:14px 34px;font-size:.92rem;font-weight:600;cursor:pointer;letter-spacing:.02em;transition:all .25s var(--spring);text-decoration:none}
body[data-page="join"] .hero-cta:hover{background:var(--red-bright);transform:translateY(-2px);box-shadow:0 8px 30px rgba(208,2,27,.4)}
body[data-page="join"] .hero-cta-ghost{display:inline-flex;align-items:center;gap:6px;background:none;border:1px solid var(--border-b);border-radius:50px;padding:14px 28px;font-size:.88rem;font-weight:500;color:var(--fg-2);cursor:pointer;letter-spacing:.02em;transition:all .2s;text-decoration:none;margin-left:12px}
body[data-page="join"] .hero-cta-ghost:hover{color:var(--fg);border-color:var(--fg-3)}

/* Meeting card on right */
body[data-page="join"] .meeting-card{
  background:var(--card);
  border:1px solid var(--border-b);
  border-radius:28px;
  overflow:hidden;
  box-shadow:0 30px 80px var(--shadow),0 0 60px var(--glow);
  animation:heroIn 1s var(--ease) .2s both;
}
body[data-page="join"] .mc-header{
  background:var(--red);
  padding:24px 28px;
  position:relative;overflow:hidden;
}
body[data-page="join"] .mc-header::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,var(--red),#8B0010);
}
/* Animated radio waves on card header */
body[data-page="join"] .mc-header::after{
  content:'';position:absolute;
  right:-20px;top:50%;transform:translateY(-50%);
  width:120px;height:120px;border-radius:50%;
  border:1px solid rgba(255,255,255,.1);
  animation:wavePulse 3s ease-out infinite;
}
@keyframes wavePulse{0%{transform:translateY(-50%) scale(.5);opacity:.6}100%{transform:translateY(-50%) scale(2);opacity:0}}
body[data-page="join"] .mc-header-content{position:relative;z-index:1}
body[data-page="join"] .mc-header-label{font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:6px}
body[data-page="join"] .mc-header-title{font-family:'Playfair Display',serif;font-size:1.4rem;font-weight:900;color:white;letter-spacing:-.03em;margin-bottom:4px}
body[data-page="join"] .mc-header-sub{font-size:.82rem;color:rgba(255,255,255,.7);font-weight:300}

/* Pulsing live dot */
body[data-page="join"] .mc-live{
  position:absolute;top:20px;right:24px;z-index:2;
  display:flex;align-items:center;gap:6px;
  background:rgba(0,0,0,.3);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.15);
  border-radius:20px;padding:4px 10px;
  font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:white;
}
body[data-page="join"] .mc-live-dot{width:5px;height:5px;border-radius:50%;background:#4AFF7A;animation:mclive 1.5s ease-in-out infinite}
@keyframes mclive{0%,100%{box-shadow:0 0 0 0 rgba(74,255,122,.5)}50%{box-shadow:0 0 0 5px rgba(74,255,122,0)}}

body[data-page="join"] .mc-body{padding:24px 28px}

/* Info rows */
body[data-page="join"] .mc-info-row{
  display:flex;align-items:flex-start;gap:14px;
  padding:16px 0;border-bottom:1px solid var(--border);
}
body[data-page="join"] .mc-info-row:last-of-type{border-bottom:none}
body[data-page="join"] .mc-info-icon{
  width:40px;height:40px;border-radius:12px;
  background:var(--bg-3);
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;flex-shrink:0;
  border:1px solid var(--border);
}
body[data-page="join"] .mc-info-content{}
body[data-page="join"] .mc-info-label{font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);margin-bottom:3px}
body[data-page="join"] .mc-info-value{font-size:.92rem;font-weight:600;color:var(--fg);margin-bottom:2px}
body[data-page="join"] .mc-info-sub{font-size:.78rem;color:var(--fg-2);font-weight:300}

/* Countdown */
body[data-page="join"] .mc-countdown{
  margin-top:20px;
  background:var(--bg-2);border:1px solid var(--border-b);border-radius:14px;
  padding:14px 18px;
  display:flex;align-items:center;justify-content:space-between;
}
body[data-page="join"] .mc-countdown-label{font-size:.65rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}
body[data-page="join"] .mc-countdown-timer{
  display:flex;align-items:center;gap:6px;
  font-family:'DM Mono',monospace;font-size:.82rem;font-weight:500;color:var(--red-bright);
}
body[data-page="join"] .mc-countdown-seg{text-align:center}
body[data-page="join"] .mc-countdown-num{font-size:1.1rem;font-weight:700;line-height:1}
body[data-page="join"] .mc-countdown-unit{font-size:.52rem;color:var(--fg-3);margin-top:1px}
body[data-page="join"] .mc-countdown-colon{color:var(--border-b);padding-bottom:6px}

/* ── WHAT YOU GET (benefits) ─────────────── */
body[data-page="join"] .benefits-section{
  background:var(--bg-2);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:80px 0;
}
body[data-page="join"] .benefits-inner{max-width:1200px;margin:0 auto;padding:0 40px}
body[data-page="join"] .section-label{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:14px;display:flex;align-items:center;gap:8px}
body[data-page="join"] .section-label::before{content:'';display:block;width:20px;height:1px;background:var(--red)}
body[data-page="join"] .section-title{font-family:'Playfair Display',serif;font-weight:900;font-size:clamp(2rem,4vw,3.2rem);line-height:1.05;letter-spacing:-.04em;color:var(--fg);margin-bottom:48px}
body[data-page="join"] .section-title em{color:var(--red-bright);font-style:italic}

body[data-page="join"] .benefits-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
body[data-page="join"] .benefit-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:18px;padding:28px 24px;
  transition:transform .3s var(--ease),border-color .3s,box-shadow .3s;
  position:relative;overflow:hidden;
}
body[data-page="join"] .benefit-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--bc,var(--red));transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
body[data-page="join"] .benefit-card:hover::before{transform:scaleX(1)}
body[data-page="join"] .benefit-card:hover{transform:translateY(-4px);border-color:var(--border-b);box-shadow:0 16px 50px var(--shadow)}
body[data-page="join"] .benefit-icon{font-size:2rem;margin-bottom:16px}
body[data-page="join"] .benefit-title{font-family:'Playfair Display',serif;font-size:1.1rem;font-weight:700;color:var(--fg);letter-spacing:-.02em;margin-bottom:8px}
body[data-page="join"] .benefit-desc{font-size:.82rem;color:var(--fg-2);line-height:1.7;font-weight:300}

/* ── DEPARTMENTS (which to join) ─────────── */
body[data-page="join"] .depts-section{padding:80px 0;background:var(--bg)}
body[data-page="join"] .depts-inner{max-width:1200px;margin:0 auto;padding:0 40px}
body[data-page="join"] .depts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px}
body[data-page="join"] .dept-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:18px;padding:24px 20px;
  cursor:default;transition:all .3s var(--ease);
  position:relative;overflow:hidden;
}
body[data-page="join"] .dept-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--dpc,var(--red));transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
body[data-page="join"] .dept-card:hover::after{transform:scaleX(1)}
body[data-page="join"] .dept-card:hover{transform:translateY(-4px);border-color:var(--border-b);box-shadow:0 14px 40px var(--shadow)}
body[data-page="join"] .dept-card-icon{font-size:2rem;margin-bottom:14px}
body[data-page="join"] .dept-card-name{font-family:'Playfair Display',serif;font-size:1.1rem;font-weight:700;color:var(--fg);margin-bottom:6px;letter-spacing:-.02em}
body[data-page="join"] .dept-card-desc{font-size:.78rem;color:var(--fg-2);line-height:1.65;font-weight:300;margin-bottom:14px}
body[data-page="join"] .dept-card-roles{display:flex;flex-wrap:wrap;gap:4px}
body[data-page="join"] .dept-role{font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:2px 8px;border-radius:6px;background:var(--dpc-bg,rgba(208,2,27,.08));color:var(--dpc,var(--red))}

/* ── GBM / LOCATION SECTION ─────────────── */
body[data-page="join"] .gbm-section{
  background:var(--bg-2);
  border-top:1px solid var(--border);
  padding:80px 0;
}
body[data-page="join"] .gbm-inner{max-width:1200px;margin:0 auto;padding:0 40px;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
body[data-page="join"] .gbm-text{}
body[data-page="join"] .gbm-label{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:14px;display:flex;align-items:center;gap:8px}
body[data-page="join"] .gbm-label::before{content:'';display:block;width:20px;height:1px;background:var(--red)}
body[data-page="join"] .gbm-title{font-family:'Playfair Display',serif;font-weight:900;font-size:clamp(1.8rem,3.5vw,2.8rem);line-height:1.05;letter-spacing:-.04em;color:var(--fg);margin-bottom:16px}
body[data-page="join"] .gbm-title em{color:var(--red-bright);font-style:italic}
body[data-page="join"] .gbm-body{font-size:.9rem;color:var(--fg-2);line-height:1.8;font-weight:300;margin-bottom:24px}

/* Location block */
body[data-page="join"] .location-block{
  background:var(--card);border:1px solid var(--border-b);
  border-radius:20px;overflow:hidden;
  box-shadow:0 8px 40px var(--shadow);
}
body[data-page="join"] .location-map-placeholder{
  width:100%;height:200px;
  background:linear-gradient(135deg,var(--bg-3),var(--bg-2));
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
  border-bottom:1px solid var(--border);
}
/* Stylized map grid */
body[data-page="join"] .location-map-placeholder::before{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(var(--border) 1px,transparent 1px),
    linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:30px 30px;
}
body[data-page="join"] .map-pin{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:4px;
}
body[data-page="join"] .map-pin-icon{
  width:44px;height:44px;border-radius:50%;
  background:var(--red);
  display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;
  box-shadow:0 4px 20px rgba(208,2,27,.5);
  animation:mapBounce 2s ease-in-out infinite;
}
@keyframes mapBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
body[data-page="join"] .map-pin-shadow{
  width:16px;height:5px;
  background:rgba(208,2,27,.3);
  border-radius:50%;
  filter:blur(2px);
  animation:mapShadow 2s ease-in-out infinite;
}
@keyframes mapShadow{0%,100%{transform:scaleX(1);opacity:.5}50%{transform:scaleX(.7);opacity:.3}}
/* Pulse rings */
body[data-page="join"] .map-pin-pulse{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:44px;height:44px;border-radius:50%;
  border:2px solid rgba(208,2,27,.4);
  animation:mapPulse 2s ease-out infinite;
}
body[data-page="join"] .map-pin-pulse-2{animation-delay:.6s;opacity:.6}
@keyframes mapPulse{0%{transform:translate(-50%,-50%) scale(1);opacity:.5}100%{transform:translate(-50%,-50%) scale(3);opacity:0}}

body[data-page="join"] .location-info{padding:20px 24px}
body[data-page="join"] .loc-row{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}
body[data-page="join"] .loc-row:last-child{border-bottom:none}
body[data-page="join"] .loc-icon{width:32px;height:32px;border-radius:10px;background:var(--bg-3);display:flex;align-items:center;justify-content:center;font-size:.9rem;flex-shrink:0;border:1px solid var(--border)}
body[data-page="join"] .loc-label{font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);margin-bottom:2px}
body[data-page="join"] .loc-value{font-size:.88rem;font-weight:600;color:var(--fg)}
body[data-page="join"] .loc-sub{font-size:.75rem;color:var(--fg-2);margin-top:1px;font-weight:300}

/* GBM schedule vis */
body[data-page="join"] .gbm-schedule{margin-top:20px}
body[data-page="join"] .gbm-sched-title{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);margin-bottom:14px;display:flex;align-items:center;gap:8px}
body[data-page="join"] .gbm-sched-title::before{content:'';display:block;width:14px;height:1px;background:var(--fg-3)}
body[data-page="join"] .gbm-weeks{display:flex;flex-direction:column;gap:8px}
body[data-page="join"] .gbm-week{
  display:flex;align-items:center;gap:12px;
  padding:12px 16px;border-radius:12px;
  border:1px solid var(--border);
  transition:all .2s;
}
body[data-page="join"] .gbm-week.meeting{border-color:rgba(208,2,27,.3);background:rgba(208,2,27,.05)}
body[data-page="join"] .gbm-week-label{font-family:'DM Mono',monospace;font-size:.72rem;color:var(--fg-3);flex-shrink:0;width:80px}
body[data-page="join"] .gbm-week-desc{font-size:.8rem;color:var(--fg-2);font-weight:400;flex:1}
body[data-page="join"] .gbm-week-badge{flex-shrink:0;font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:8px}
body[data-page="join"] .gbm-week.meeting .gbm-week-badge{background:rgba(208,2,27,.15);color:var(--red-bright);border:1px solid rgba(208,2,27,.3)}
body[data-page="join"] .gbm-week:not(.meeting) .gbm-week-badge{background:var(--bg-3);color:var(--fg-3)}

/* ── APPLICATION FORM ────────────────────── */
body[data-page="join"] .form-section{
  padding:80px 0 100px;
  background:var(--bg);
}
body[data-page="join"] .form-inner{max-width:1200px;margin:0 auto;padding:0 40px;display:grid;grid-template-columns:1fr 1.4fr;gap:80px;align-items:start}
body[data-page="join"] .form-text{}
body[data-page="join"] .form-label{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:14px;display:flex;align-items:center;gap:8px}
body[data-page="join"] .form-label::before{content:'';display:block;width:20px;height:1px;background:var(--red)}
body[data-page="join"] .form-title{font-family:'Playfair Display',serif;font-weight:900;font-size:clamp(1.8rem,3.5vw,2.8rem);line-height:1.05;letter-spacing:-.04em;color:var(--fg);margin-bottom:16px}
body[data-page="join"] .form-title em{color:var(--red-bright);font-style:italic}
body[data-page="join"] .form-body{font-size:.9rem;color:var(--fg-2);line-height:1.8;font-weight:300;margin-bottom:24px}

/* Process steps */
body[data-page="join"] .process-steps{display:flex;flex-direction:column;gap:0;margin-top:32px}
body[data-page="join"] .process-step{display:flex;align-items:flex-start;gap:14px;padding:16px 0;border-bottom:1px solid var(--border)}
body[data-page="join"] .process-step:last-child{border-bottom:none}
body[data-page="join"] .ps-num{
  width:28px;height:28px;border-radius:50%;
  background:var(--red);color:white;
  font-size:.72rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;margin-top:1px;
}
body[data-page="join"] .ps-title{font-size:.88rem;font-weight:600;color:var(--fg);margin-bottom:3px}
body[data-page="join"] .ps-desc{font-size:.78rem;color:var(--fg-2);line-height:1.55;font-weight:300}

/* FORM */
body[data-page="join"] .application-form{
  background:var(--card);border:1px solid var(--border-b);
  border-radius:24px;padding:36px;
  box-shadow:0 20px 60px var(--shadow);
}
body[data-page="join"] .form-section-title{
  font-family:'Playfair Display',serif;
  font-size:1.1rem;font-weight:700;
  color:var(--fg);margin-bottom:20px;
  padding-bottom:14px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:10px;
}
body[data-page="join"] .form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
body[data-page="join"] .form-row.full{grid-template-columns:1fr}
body[data-page="join"] .field{}
body[data-page="join"] .field-label{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);margin-bottom:6px;display:block}
body[data-page="join"] .field-label em{color:var(--red-bright);font-style:normal}
body[data-page="join"] .field input, body[data-page="join"] .field select, body[data-page="join"] .field textarea{
  width:100%;background:var(--input-bg);
  border:1px solid var(--border-b);border-radius:10px;
  padding:11px 16px;color:var(--fg);font-size:.88rem;outline:none;
  transition:border-color .2s,box-shadow .2s;
  -webkit-appearance:none;
}
body[data-page="join"] .field input::placeholder, body[data-page="join"] .field textarea::placeholder{color:var(--fg-3)}
body[data-page="join"] .field input:focus, body[data-page="join"] .field select:focus, body[data-page="join"] .field textarea:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(208,2,27,.1)}
body[data-page="join"] .field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
  padding-right:36px;cursor:pointer;
  background-color:var(--input-bg);
}
html[data-theme="dark"] body[data-page="join"] .field select option{background:#181824;color:var(--fg)}
body[data-page="join"] .field textarea{resize:vertical;min-height:100px;line-height:1.6}

/* Checkboxes for dept interest */
body[data-page="join"] .checkbox-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
body[data-page="join"] .checkbox-item{display:flex;align-items:center;gap:8px;cursor:pointer;padding:8px 12px;border:1px solid var(--border);border-radius:10px;transition:all .2s}
body[data-page="join"] .checkbox-item:hover{border-color:var(--border-b);background:var(--bg-3)}
body[data-page="join"] .checkbox-item input[type="checkbox"]{width:15px;height:15px;accent-color:var(--red);cursor:pointer;flex-shrink:0}
body[data-page="join"] .checkbox-item label{font-size:.8rem;color:var(--fg-2);cursor:pointer;display:flex;align-items:center;gap:6px}
body[data-page="join"] .checkbox-item.checked{border-color:rgba(208,2,27,.3);background:rgba(208,2,27,.05)}
body[data-page="join"] .checkbox-item.checked label{color:var(--fg)}
body[data-page="join"] .cb-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}

/* Submit button */
body[data-page="join"] .form-submit-row{margin-top:24px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
body[data-page="join"] .submit-btn{
  background:var(--red);color:white;border:none;border-radius:50px;
  padding:14px 40px;font-size:.92rem;font-weight:700;
  cursor:pointer;letter-spacing:.02em;
  transition:all .25s var(--spring);
  display:flex;align-items:center;gap:8px;
}
body[data-page="join"] .submit-btn:hover{background:var(--red-bright);transform:translateY(-2px);box-shadow:0 8px 30px rgba(208,2,27,.4)}
body[data-page="join"] .submit-btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
body[data-page="join"] .submit-note{font-size:.74rem;color:var(--fg-3);line-height:1.5}

/* Success state */
body[data-page="join"] .form-success{
  text-align:center;padding:40px 20px;display:none;
}
body[data-page="join"] .form-success.show{display:block}
body[data-page="join"] .success-icon{font-size:3.5rem;margin-bottom:16px}
body[data-page="join"] .success-title{font-family:'Playfair Display',serif;font-size:1.8rem;font-weight:900;color:var(--fg);letter-spacing:-.03em;margin-bottom:10px}
body[data-page="join"] .success-sub{font-size:.9rem;color:var(--fg-2);line-height:1.7;max-width:360px;margin:0 auto}

/* ── FOOTER ──────────────────────────────── */
body[data-page="join"] footer{background:var(--near-black);padding:40px 0}
body[data-page="join"] .f-inner{max-width:1200px;margin:0 auto;padding:0 40px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
body[data-page="join"] .f-brand{font-family:'Playfair Display',serif;font-size:1.1rem;font-weight:900;color:white}
body[data-page="join"] .f-copy{font-size:.74rem;color:rgba(255,255,255,.2)}
body[data-page="join"] .f-home{color:rgba(255,255,255,.3);text-decoration:none;font-size:.78rem;font-weight:500;transition:color .2s}
body[data-page="join"] .f-home:hover{color:white}

/* ── REVEAL ──────────────────────────────── */
body[data-page="join"] .reveal{opacity:0;transform:translateY(20px);transition:opacity .65s var(--ease),transform .65s var(--ease)}
body[data-page="join"] .reveal.visible{opacity:1;transform:none}
body[data-page="join"] .rd1{transition-delay:.07s}body[data-page="join"] .rd2{transition-delay:.14s}body[data-page="join"] .rd3{transition-delay:.21s}

/* ── RESPONSIVE ──────────────────────────── */
/* ─── CURSOR SYSTEM ─────────────────────────────────────────── */
html.bc-cursor-active *{ cursor: none !important; }
html.bc-cursor-active input, html.bc-cursor-active textarea, html.bc-cursor-active [contenteditable]{ cursor: text !important; }
#bc-cursor{
  position: fixed; top: 0; left: 0; width: 20px; height: 24px;
  pointer-events: none; z-index: 999999; opacity: 0;
  transition: opacity 0.5s ease; will-change: transform;
}
#bc-cursor svg{
  display: block; width: 20px; height: 24px; transform-origin: 0 0;
  transition: transform 0.16s cubic-bezier(0.25,0.46,0.45,0.94), opacity 0.16s ease;
  will-change: transform;
}
#bc-cursor .arrow-fill{ fill: rgba(255,255,255,0.92); }
#bc-cursor .arrow-stroke{ fill: none; stroke: rgba(0,0,0,0.5); stroke-width: 1px; stroke-linejoin: round; }
#bc-cursor.bc-hover svg{ transform: scale(1.15); }
#bc-cursor.bc-click svg{ transform: scale(0.78); transition: transform 0.07s cubic-bezier(0.34,1.56,0.64,1); }
#bc-cursor.bc-text svg{ opacity: 0; transform: scale(0.6); }
html[data-theme="light"] #bc-cursor .arrow-fill{ fill: rgba(20,20,28,0.88); }
html[data-theme="light"] #bc-cursor .arrow-stroke{ stroke: rgba(255,255,255,0.4); }


/* ─── SLACK BUTTON ──────────────────────────────────────────── */
body[data-page="join"] .slack-card-btn{
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(74, 21, 75, 0.15);
  border: 1px solid rgba(74, 21, 75, 0.35);
  border-radius: 14px;
  padding: 14px 18px;
  margin-top: 16px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.25s var(--spring);
}
body[data-page="join"] .slack-card-btn:hover{
  background: rgba(74, 21, 75, 0.28);
  border-color: rgba(74, 21, 75, 0.6);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(74, 21, 75, 0.25);
}
body[data-page="join"] .slack-icon{
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #4A154B;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}
body[data-page="join"] .slack-btn-text{
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
body[data-page="join"] .slack-btn-title{
  font-size: .85rem;
  font-weight: 600;
  color: white;
  line-height: 1.2;
}
body[data-page="join"] .slack-btn-sub{
  font-family: 'DM Mono', monospace;
  font-size: .65rem;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: .04em;
}
body[data-page="join"] .slack-btn-arrow{
  color: rgba(255, 255, 255, 0.35);
  font-size: .9rem;
  flex-shrink: 0;
  transition: transform 0.2s, color 0.2s;
}
body[data-page="join"] .slack-card-btn:hover .slack-btn-arrow{
  transform: translateX(3px);
  color: rgba(255, 255, 255, 0.7);
}

@media(max-width:960px){

  body[data-page="join"] .hero{grid-template-columns:1fr;gap:48px;padding:80px 40px}
  body[data-page="join"] .meeting-card{max-width:480px}
  body[data-page="join"] .benefits-grid{grid-template-columns:repeat(2,1fr)}
  body[data-page="join"] .depts-grid{grid-template-columns:repeat(2,1fr)}
  body[data-page="join"] .gbm-inner{grid-template-columns:1fr;gap:48px}
  body[data-page="join"] .form-inner{grid-template-columns:1fr;gap:48px}

}
@media(max-width:640px){

  body[data-page="join"] nav{padding:0 16px}
  body[data-page="join"] .benefits-inner, body[data-page="join"] .depts-inner, body[data-page="join"] .form-inner, body[data-page="join"] .gbm-inner{padding:0 16px}
  body[data-page="join"] .hero{padding:80px 20px}
  body[data-page="join"] .benefits-grid, body[data-page="join"] .depts-grid{grid-template-columns:1fr}
  body[data-page="join"] .form-row{grid-template-columns:1fr}
  body[data-page="join"] .checkbox-grid{grid-template-columns:1fr}
  body[data-page="join"] .application-form{padding:24px 20px}
  body[data-page="join"] .f-inner{flex-direction:column;align-items:flex-start}

}

/* Only suppress native cursor after JS confirms it loaded.
   If JS never runs, nothing here ever fires. */
html.bc-cursor-active *{
  cursor: none !important;
}

/* Restore I-beam in text fields — users need native precision */
html.bc-cursor-active input, html.bc-cursor-active textarea, html.bc-cursor-active [contenteditable]{
  cursor: text !important;
}

/* ── CURSOR WRAPPER ────────────────────────────────────────────
   Top-left corner of the div = the mouse coordinate.
   SVG tip is drawn at (0,0) — so the visual tip and the
   hot-point are the exact same pixel. No offset required. */
#bc-cursor{
  position: fixed;
  top: 0;
  left: 0;
  width: 20px;
  height: 24px;
  pointer-events: none;
  z-index: 999999;
  opacity: 0;
  transition: opacity 0.5s ease;
  will-change: transform;
}

/* ── THE ARROW SVG ─────────────────────────────────────────────
   transform-origin: 0 0 locks all scale animations to the tip.
   Because the tip IS (0,0) in the viewBox, scale never drifts. */
#bc-cursor svg{
  display: block;
  width: 20px;
  height: 24px;
  transform-origin: 0 0;
  transition:
    transform  0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    opacity    0.16s ease;
  will-change: transform;
}

/* The filled arrow body */
#bc-cursor .arrow-fill{
  fill: rgba(255, 255, 255, 0.92);
  transition: fill 0.16s ease;
}

/* The 1px dark stroke — gives it the OS-cursor depth */
#bc-cursor .arrow-stroke{
  fill: none;
  stroke: rgba(0, 0, 0, 0.55);
  stroke-width: 1px;
  stroke-linejoin: round;
  transition: stroke 0.16s ease;
}

/* ── HOVER STATE ───────────────────────────────────────────────
   Scale up ~15% — just enough to register "ready".
   No color change. Feels like the cursor leaning in. */
#bc-cursor.bc-hover svg{
  transform: scale(1.15);
}

/* ── CLICK STATE ───────────────────────────────────────────────
   Fast compress to 80%, snaps back on mouseup.
   The one moment the cursor makes itself physically felt. */
#bc-cursor.bc-click svg{
  transform: scale(0.78);
  transition:
    transform  0.07s cubic-bezier(0.34, 1.56, 0.64, 1),
    filter     0.07s ease;
}

/* ── TEXT INPUT STATE ──────────────────────────────────────────
   Arrow fades out entirely — native I-beam has control.
   The cursor doesn't compete with text selection. */
#bc-cursor.bc-text svg{
  opacity: 0;
  transform: scale(0.6);
}

/* ── LIGHT THEME ───────────────────────────────────────────────
   Flip fill to dark — same arrow, still readable. */
html[data-theme="light"] #bc-cursor .arrow-fill{
  fill: rgba(20, 20, 28, 0.88);
}
html[data-theme="light"] #bc-cursor .arrow-stroke{
  stroke: rgba(255, 255, 255, 0.45);
}


/* ════════════════════════════════════════════════════════════════
   UNIFIED NAV — bc-nav (v2, quieter)
   • No ON-AIR pill (removed per feedback)
   • Mostly monochrome; only the ACTIVE page wears its dept color,
     as a single subtle underline under its own link
   • Hover is neutral — just brightens text + background tint
   • Current-page link is HIDDEN (don't link to where you already are)
   • Mobile channel-changer panel kept, but cards are calmer
═══════════════════════════════════════════════════════════════ */

/* ── Color tokens (only used by ACTIVE state, not hover) ──────── */
:root{
  --bcn-radio:       #FF1F3D;
  --bcn-sports:      #FF6B35;
  --bcn-btv:         #51CF66;
  --bcn-journalism:  #339AF0;
  --bcn-music:       #845EF7;
  --bcn-team:        #C9A84C;
  --bcn-join:        #FF1F3D;

  --bcn-nav-h:       62px;
  --bcn-rainbow-h:    3px;
  --bcn-ease:        cubic-bezier(0.22, 1, 0.36, 1);

  --bcn-fg:          var(--fg,  #F0EDE8);
  --bcn-fg-dim:      var(--fg-2,#A8A4A0);
  --bcn-fg-mute:     var(--fg-3,#5A5754);
  --bcn-bg:          var(--nav-bg, rgba(10,10,11,0.88));
  --bcn-border:      var(--border, rgba(255,255,255,0.08));
  --bcn-border-b:    var(--border-bright, rgba(255,255,255,0.14));
}

/* ── Top-level container ──────────────────────────────────────── */
html body nav.bc-nav{
  position: fixed;
  top: var(--bcn-rainbow-h);
  left: 0; right: 0;
  height: var(--bcn-nav-h);
  z-index: 1000;
  display: flex;
  align-items: stretch;
  padding: 0;
  margin: 0;
  background: var(--bcn-bg);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border-bottom: 1px solid var(--bcn-border);
  transition: background .4s ease, border-color .4s ease;
  font-family: 'DM Sans', sans-serif;
}
.bcn-inner{
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 28px;
  /* 3-column grid: equal-width outer columns force the middle
     column (links) to be visually centered on the viewport,
     regardless of how wide the logo or tools are. With flex +
     space-between, the links drifted whenever the logo grew or
     shrank (e.g. dept-section divider on radio.html). */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
}
/* Logo stays in column 1, naturally left-aligned. */
.bcn-logo{ grid-column: 1; justify-self: start; }
/* Tools live in column 3, naturally right-aligned. */
.bcn-tools{ grid-column: 3; justify-self: end; }
/* Links sit in the auto-width middle column, centered. */
.bcn-links{ grid-column: 2; }

/* ── Logo ────────────────────────────────────────────────────── */
.bcn-logo{
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--bcn-fg);
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
}
.bcn-logo .bcn-dot{
  width: 8px; height: 8px;
  background: var(--bcn-radio);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(255,31,61,0.45);
  animation: bcn-dot-pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes bcn-dot-pulse{
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,31,61,0.5); }
  50%      { transform: scale(0.78); box-shadow: 0 0 0 6px rgba(255,31,61,0); }
}
.bcn-logo .bcn-word em{
  font-style: normal;
  color: var(--bcn-radio); /* only red on home; overridden per dept below */
  transition: color .35s ease;
}

/* Section divider on dept pages — quieter than before */
.bcn-section{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-left: 8px;
  padding-left: 12px;
  border-left: 1px solid var(--bcn-border-b);
  font-family: 'DM Mono', monospace;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bcn-fg-mute);
}
.bcn-section-bullet{
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--bcn-section-c, var(--bcn-radio));
}

/* Per-dept logo accent (only the `cast` em + section bullet) */
body[data-page="radio"]      .bcn-logo .bcn-word em,
body[data-page="radio"]      { --bcn-section-c: var(--bcn-radio); }
body[data-page="sports"]     .bcn-logo .bcn-word em{ color: var(--bcn-sports); }
body[data-page="sports"]     { --bcn-section-c: var(--bcn-sports); }
body[data-page="btv"]        .bcn-logo .bcn-word em{ color: var(--bcn-btv); }
body[data-page="btv"]        { --bcn-section-c: var(--bcn-btv); }
body[data-page="journalism"] .bcn-logo .bcn-word em{ color: var(--bcn-journalism); }
body[data-page="journalism"] { --bcn-section-c: var(--bcn-journalism); }
body[data-page="music"]      .bcn-logo .bcn-word em{ color: var(--bcn-music); }
body[data-page="music"]      { --bcn-section-c: var(--bcn-music); }
body[data-page="team"]       .bcn-logo .bcn-word em{ color: var(--bcn-team); }
body[data-page="team"]       { --bcn-section-c: var(--bcn-team); }
body[data-page="join"]       .bcn-logo .bcn-word em{ color: var(--bcn-join); }
body[data-page="join"]       { --bcn-section-c: var(--bcn-join); }

/* ── Link row ─────────────────────────────────────────────────
   All neutral. No per-link dots, no rainbow on hover. Only the
   ACTIVE link gets its dept color, as a subtle underline.       */
.bcn-links{
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
  /* No flex:1 / justify-content here — the grid parent's middle
     column auto-sizes to content and is visually centered on the
     viewport by the 1fr outer columns. */
}
.bcn-link{
  position: relative;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--bcn-fg-dim);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 9px 14px;
  border-radius: 8px;
  transition: color .2s ease, background .2s ease;
}
.bcn-link:hover{
  color: var(--bcn-fg);
  background: rgba(255,255,255,0.04);
}
html[data-theme="light"] .bcn-link:hover{ background: rgba(0,0,0,0.04); }
.bcn-link:focus-visible{
  outline: 1px solid var(--bcn-border-b);
  outline-offset: 2px;
}

/* ── "You are here" — current page's nav link ─────────────────
   Keep the link in place so the nav doesn't reshuffle between
   pages (consistency > saving one redundant link). Mark it with
   brighter text + a small dot in the dept color positioned over
   the link without shifting layout. */
.bcn-link[data-active="true"]{
  color: var(--bcn-fg);
  cursor: default;
}
.bcn-link[data-active="true"]::before{
  content: '';
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--bcn-radio);
  transform: translateX(-50%);
  box-shadow: 0 0 6px currentColor;
  opacity: 0.9;
}
/* Per-dept dot color (`color-mix` shadow uses currentColor of the dot) */
.bcn-link[data-active="true"][data-dept="radio"]::before      { background: var(--bcn-radio);      box-shadow: 0 0 6px var(--bcn-radio); }
.bcn-link[data-active="true"][data-dept="sports"]::before     { background: var(--bcn-sports);     box-shadow: 0 0 6px var(--bcn-sports); }
.bcn-link[data-active="true"][data-dept="btv"]::before        { background: var(--bcn-btv);        box-shadow: 0 0 6px var(--bcn-btv); }
.bcn-link[data-active="true"][data-dept="journalism"]::before { background: var(--bcn-journalism); box-shadow: 0 0 6px var(--bcn-journalism); }
.bcn-link[data-active="true"][data-dept="music"]::before      { background: var(--bcn-music);      box-shadow: 0 0 6px var(--bcn-music); }
.bcn-link[data-active="true"][data-dept="team"]::before       { background: var(--bcn-team);       box-shadow: 0 0 6px var(--bcn-team); }
.bcn-link[data-active="true"][data-dept="join"]::before       { background: var(--bcn-join);       box-shadow: 0 0 6px var(--bcn-join); }
/* No hover state on the current-page link — it shouldn't invite a click */
.bcn-link[data-active="true"]:hover{
  background: transparent;
  color: var(--bcn-fg);
}

/* ── Right toolbelt ───────────────────────────────────────── */
.bcn-tools{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Theme toggle — single quiet pill */
.bcn-theme{
  background: transparent;
  border: 1px solid var(--bcn-border-b);
  border-radius: 100px;
  padding: 6px 14px;
  cursor: pointer;
  color: var(--bcn-fg-dim);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
  white-space: nowrap;
}
.bcn-theme:hover{
  color: var(--bcn-fg);
  border-color: var(--bcn-fg-mute);
}

/* ── Burger ──────────────────────────────────────────────── */
.bcn-burger{
  display: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--bcn-border-b);
  background: transparent;
  border-radius: 10px;
  cursor: pointer;
  position: relative;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  padding: 0;
  transition: border-color .2s ease;
}
.bcn-burger:hover{ border-color: var(--bcn-fg-mute); }
.bcn-burger span{
  display: block;
  width: 18px;
  height: 2px;
  background: var(--bcn-fg);
  border-radius: 2px;
  transition: transform .3s var(--bcn-ease), opacity .2s ease;
  transform-origin: center;
  pointer-events: none; /* clicks pass to the button */
}
.bcn-burger.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.bcn-burger.open span:nth-child(2){ opacity: 0; }
.bcn-burger.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile panel ──────────────────────────────────────── */
.bcn-scrim{
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  z-index: 998;
}
.bcn-scrim.open{ opacity: 1; pointer-events: auto; }

.bcn-panel{
  position: fixed;
  top: calc(var(--bcn-nav-h) + var(--bcn-rainbow-h));
  left: 0; right: 0;
  bottom: 0;
  background: var(--bcn-bg);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  z-index: 999;
  padding: 24px 20px 36px;
  transform: translateY(-10px);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: transform .35s var(--bcn-ease), opacity .25s ease, visibility 0s linear .35s;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid var(--bcn-border);
}
.bcn-panel.open{
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition: transform .4s var(--bcn-ease), opacity .25s ease, visibility 0s;
}

.bcn-panel-eyebrow{
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bcn-fg-mute);
  margin-bottom: 16px;
}
.bcn-panel-eyebrow::before,
.bcn-panel-eyebrow::after{
  content:'';
  flex: 1;
  height: 1px;
  background: var(--bcn-border-b);
}

/* Channel cards — calmer; color only on the left strip + name */
.bcn-channels{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}
.bcn-ch{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 14px 14px 18px;
  border-radius: 12px;
  background: var(--bg-2, rgba(255,255,255,0.03));
  border: 1px solid var(--bcn-border);
  text-decoration: none;
  color: var(--bcn-fg);
  overflow: hidden;
  transition: border-color .2s ease, transform .2s ease;
}
.bcn-ch[data-dept="radio"]      { --c: var(--bcn-radio); }
.bcn-ch[data-dept="sports"]     { --c: var(--bcn-sports); }
.bcn-ch[data-dept="btv"]        { --c: var(--bcn-btv); }
.bcn-ch[data-dept="journalism"] { --c: var(--bcn-journalism); }
.bcn-ch[data-dept="music"]      { --c: var(--bcn-music); }
.bcn-ch::before{
  content:'';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  background: var(--c);
}
.bcn-ch::after{
  content: attr(data-num);
  position: absolute;
  top: 10px; right: 12px;
  font-family: 'DM Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: var(--bcn-fg-mute);
}
.bcn-ch:active{
  transform: scale(0.98);
  border-color: var(--c);
}
.bcn-ch-icon{
  font-size: 1.3rem;
  line-height: 1;
}
.bcn-ch-name{
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--c);
  line-height: 1.1;
}
.bcn-ch-tag{
  font-family: 'DM Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bcn-fg-mute);
}

/* "You are here" treatment — mobile channel cards + secondary links.
   Same philosophy as desktop: keep them in place for layout
   stability, mark them visually as current instead of hiding. */
.bcn-ch[data-active="true"]{
  border-color: var(--c);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--c) 10%, transparent) 0%,
    transparent 70%);
  cursor: default;
}
.bcn-ch[data-active="true"]::before{
  width: 4px; /* the existing left strip is already there; widen slightly */
}
.bcn-ch[data-active="true"] .bcn-ch-tag::after{
  content: " · You are here";
  color: var(--c);
  font-weight: 500;
}
.bcn-ch[data-active="true"]:active{ transform: none; }

.bcn-sec-link[data-active="true"]{
  cursor: default;
  color: var(--bcn-fg-dim);
}
.bcn-sec-link[data-active="true"]::after{
  content: '· current';
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bcn-fg-mute);
}
.bcn-sec-link[data-active="true"]:active{
  padding-left: 4px;
}
.bcn-sec-link[data-active="true"]:active::after{
  transform: none;
}

/* Mobile panel — secondary links */
.bcn-panel-secondary{
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: 16px;
  border-top: 1px solid var(--bcn-border);
}
.bcn-sec-link{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 4px;
  color: var(--bcn-fg);
  text-decoration: none;
  font-size: 0.96rem;
  font-weight: 500;
  border-bottom: 1px solid var(--bcn-border);
  transition: padding-left .2s ease;
}
.bcn-sec-link:last-child{ border-bottom: none; }
.bcn-sec-link::after{
  content: '→';
  color: var(--bcn-fg-mute);
  transition: transform .2s ease, color .2s ease;
}
.bcn-sec-link:active{ padding-left: 8px; }
.bcn-sec-link:active::after{ transform: translateX(3px); color: var(--bcn-fg); }
.bcn-sec-link.accent{ color: var(--bcn-radio); font-weight: 600; }

/* Body scroll lock when panel open */
body.bcn-locked{ overflow: hidden; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1080px){
  .bcn-link{ padding: 9px 11px; font-size: 0.82rem; }
  .bcn-inner{ padding: 0 22px; gap: 12px; }
}
@media (max-width: 920px){
  .bcn-links{ display: none; }
  .bcn-burger{ display: inline-flex; }
  .bcn-section{ display: none; } /* dept name lives in the panel on mobile */
  /* No links visible at this size — collapse the 3-column grid
     so logo hugs the left and tools hug the right with no gap
     of dead space between them. */
  .bcn-inner{
    display: flex;
    justify-content: space-between;
  }
}
@media (max-width: 560px){
  .bcn-inner{ padding: 0 16px; gap: 8px; }
  html body nav.bc-nav{ height: 58px; }
  :root{ --bcn-nav-h: 58px; }
  .bcn-logo{ font-size: 1.05rem; }
  .bcn-channels{ grid-template-columns: 1fr; }

  /* Compact theme toggle — square icon button next to the burger.
     Hide the text label ("Light"/"Dark"), show a sun/moon glyph
     based on current theme. */
  .bcn-theme{
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 10px;
    font-size: 0;          /* hides the "Light"/"Dark" text */
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .bcn-theme::before{
    /* Default (dark theme active) → button offers Light → show sun glyph */
    content: "☀";
    font-size: 1.05rem;
    line-height: 1;
    color: var(--bcn-fg);
    transition: transform .35s var(--bcn-ease);
  }
  /* When light theme is active, button offers Dark → show moon glyph */
  html[data-theme="light"] .bcn-theme::before{
    content: "☾";
    font-size: 1.15rem;
  }
  .bcn-theme:hover::before{ transform: rotate(20deg); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .bcn-logo .bcn-dot{ animation: none; }
  .bcn-panel,
  .bcn-link,
  .bcn-burger span,
  .bcn-ch{ transition-duration: .01ms !important; animation: none !important; }
}

/* ════════════════════════════════════════════════════════════════
   NOW-PLAYING MARQUEE
   Overflow-aware horizontal scroll for the track title on both
   index.html (.player-now-playing) and radio.html (.bp-now).
   • Containers clip + nowrap
   • If text overflows, JS adds .is-marquee + sets two CSS vars:
     --marquee-shift (negative px, the overflow distance)
     --marquee-duration (animation duration in seconds)
   • Animation: start at rest, ease to fully-revealed end, hold,
     ease back to start, hold — a slow ping-pong that's easy to
     read. If text fits, no animation runs.
═══════════════════════════════════════════════════════════════ */
body[data-page="home"]  .player-now-playing,
body[data-page="radio"] .bp-now{
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  /* Subtle fade on the right edge so text cleanly exits view */
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 18px), transparent 100%);
          mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 18px), transparent 100%);
  min-width: 0; /* let flex/grid containers shrink it */
  max-width: 100%;
}
/* Inside flex parents the original css uses gap & flex layout —
   make sure the marquee container takes the available space. */
body[data-page="home"] .player-now-playing{ flex: 1 1 auto; }

.np-marquee-text{
  display: inline-block;
  white-space: nowrap;
  will-change: transform;
}
/* Active scroll: applies only when JS detects overflow */
.is-marquee .np-marquee-text{
  animation: bcMarquee var(--marquee-duration, 14s) ease-in-out infinite;
}
/* Pause when user hovers (desktop courtesy) */
.is-marquee:hover .np-marquee-text{
  animation-play-state: paused;
}
@keyframes bcMarquee{
   0%   { transform: translateX(0); }
  18%   { transform: translateX(0); }                                 /* hold at start */
  50%   { transform: translateX(var(--marquee-shift, 0)); }           /* fully revealed */
  68%   { transform: translateX(var(--marquee-shift, 0)); }           /* hold at end */
 100%   { transform: translateX(0); }                                 /* back to start */
}
@media (prefers-reduced-motion: reduce){
  .is-marquee .np-marquee-text{ animation: none; }
  body[data-page="home"]  .player-now-playing,
  body[data-page="radio"] .bp-now{
    text-overflow: ellipsis;
  }
}

/* ════════════════════════════════════════════════════════════════
   VOLUME SLIDER — touch fix ONLY (zero visual changes)
   The original visual rules higher up in this file (3px track,
   14px white thumb with glow) are completely untouched. These
   additions are purely behavioral / cross-browser:
     • touch-action so the browser doesn't hijack horizontal drags
       on iOS/Android (this is the real mobile fix)
     • ::-moz-range-thumb / -track mirror so Firefox & legacy Edge
       render the same 3px track + 14px white thumb as Chrome
     • Touch-only override so the 1.3× hover scale doesn't stick
       after a tap on phones
═══════════════════════════════════════════════════════════════ */
body[data-page="radio"] .vol-slider{
  touch-action: manipulation;
}
body[data-page="radio"] .vol-slider::-moz-range-thumb{
  width: 14px; height: 14px;
  border-radius: 50%;
  background: white;
  border: none;
  box-shadow: 0 0 6px rgba(255,255,255,0.4);
  cursor: pointer;
  transition: transform 0.15s;
}
body[data-page="radio"] .vol-slider::-moz-range-thumb:hover{ transform: scale(1.3); }
body[data-page="radio"] .vol-slider::-moz-range-track{
  height: 3px;
  background: rgba(255,255,255,0.12);
  border-radius: 3px;
  border: none;
}
@media (hover: none){
  body[data-page="radio"] .vol-slider::-webkit-slider-thumb:hover{ transform: none; }
  body[data-page="radio"] .vol-slider::-moz-range-thumb:hover{ transform: none; }
}