/* ═══════════════════════════════════════════════════
   ROOFING AUTHORITY NETWORK — Streaming UI
   Netflix/HBO Max-style dark streaming interface
   Clash Display + Satoshi · Black · Crimson · Steel
═══════════════════════════════════════════════════ */

:root {
  --red:       #e01322;
  --red-glow:  rgba(224,19,34,0.28);
  --red-dim:   rgba(224,19,34,0.1);
  --red-bd:    rgba(224,19,34,0.22);

  --bg:        #050607;
  --surface:   #0c0e10;
  --surface-2: #111418;
  --surface-3: #171b20;
  --border:    rgba(255,255,255,0.07);
  --border-md: rgba(255,255,255,0.12);

  --text:      #f2f4f6;
  --muted:     #7a8a96;
  --faint:     #3a4550;

  --fd: 'Clash Display', Impact, sans-serif;
  --fb: 'Satoshi', 'Helvetica Neue', sans-serif;

  --nav-h: 64px;
  --ease:  cubic-bezier(0.16,1,0.3,1);
  --t:     180ms var(--ease);
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --card-radius: 6px;
}

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth;scroll-padding-top:var(--nav-h)}
body{min-height:100dvh;font-family:var(--fb);background:var(--bg);color:var(--text);overflow-x:hidden}
img,video,svg,iframe{display:block;max-width:100%;height:auto}
ul[role=list]{list-style:none}
a{color:inherit;text-decoration:none;transition:color var(--t)}
button{cursor:pointer;background:none;border:none;color:inherit;font:inherit}
::selection{background:var(--red-dim);color:var(--text)}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:4px}

/* ── LIVE DOT ── */
.dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--red);
  flex-shrink: 0;
  animation: blink 1.6s ease-in-out infinite;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.4}}

/* ═══════════════════════════════════════
   NAV — transparent, minimal
═══════════════════════════════════════ */
.nav {
  position: fixed;
  top:0;left:0;right:0;
  height: var(--nav-h);
  z-index: 200;
  display: flex;
  align-items: center;
  padding: 0 var(--gutter);
  gap: 2rem;
  background: linear-gradient(to bottom, rgba(5,6,7,0.95) 0%, transparent 100%);
  transition: background 300ms;
}
.nav.solid {
  background: rgba(5,6,7,0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

/* Logo */
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.nav-logo svg { width: 30px; height: 30px; }
.nav-logo-text {
  font-family: var(--fd);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text);
  display: flex;
  flex-direction: column;
  line-height: 1;
  gap: 1px;
}
.nav-logo-text span {
  font-size: 0.55rem;
  letter-spacing: 0.22em;
  color: var(--muted);
  font-family: var(--fb);
  font-weight: 600;
  text-transform: uppercase;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-left: 1rem;
}
.nav-links a {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color var(--t);
}
.nav-links a:hover, .nav-links a.active { color: var(--text); }

.nav-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.live-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
  border: 1px solid var(--red-bd);
  padding: 4px 10px;
  border-radius: 100px;
  background: var(--red-dim);
}

.nav-cta {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 4px;
  background: var(--red);
  color: #fff;
  transition: background var(--t), box-shadow var(--t);
}
.nav-cta:hover { background: #ff1a2a; box-shadow: 0 4px 18px var(--red-glow); color: #fff; }

@media(max-width: 720px){
  .nav-links, .live-pill { display: none; }
}

/* ═══════════════════════════════════════
   FEATURED HERO
═══════════════════════════════════════ */
.featured {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding-top: var(--nav-h);
  overflow: hidden;
}

/* Background cinematic art */
.featured-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
/* Full-bleed video replaces the static art background */
.featured-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  z-index: 0;
}

/* Keep art as a fallback if video fails to load */
.featured-bg-art {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 70% at 75% 40%, rgba(224,19,34,0.18) 0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 20% 80%, rgba(224,19,34,0.06) 0%, transparent 60%),
    linear-gradient(155deg, #0d1520 0%, #080a0c 50%, #050607 100%);
}
.featured-bg-gradient {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    /* Strong bottom fade — anchors text */
    linear-gradient(to top, rgba(5,6,7,1) 0%, rgba(5,6,7,0.7) 30%, rgba(5,6,7,0.2) 60%, transparent 80%),
    /* Left fade — keeps text readable */
    linear-gradient(to right, rgba(5,6,7,0.6) 0%, transparent 60%),
    /* Top fade — nav legibility */
    linear-gradient(to bottom, rgba(5,6,7,0.4) 0%, transparent 18%);
}

.featured-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 3rem var(--gutter) 6rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  min-height: calc(100vh - var(--nav-h));
}

/* ─ Hero meta ─ */
.featured-network {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 0.75rem;
}
.featured-title {
  font-family: var(--fd);
  font-size: clamp(5rem, 11vw, 11rem);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.88;
  letter-spacing: -0.02em;
  word-spacing: 0.05em;
  margin-bottom: 0.5rem;
}
.featured-title span { color: var(--red); display: block; }

.featured-host {
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  color: var(--muted);
  margin-bottom: 1.25rem;
  font-weight: 500;
}
.featured-logline {
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.65;
  max-width: 40ch;
  margin-bottom: 2rem;
}

.featured-btns {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.btn-watch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fb);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.7em 1.5em;
  border-radius: 4px;
  background: var(--red);
  color: #fff;
  transition: background var(--t), box-shadow var(--t), transform var(--t);
  cursor: pointer;
}
.btn-watch svg { width: 16px; height: 16px; }
.btn-watch:hover { background: #ff1a2a; box-shadow: 0 6px 24px var(--red-glow); transform: translateY(-1px); color: #fff; }

.btn-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.7em 1.5em;
  border-radius: 4px;
  background: rgba(255,255,255,0.1);
  color: var(--text);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-md);
  transition: background var(--t), transform var(--t);
}
.btn-more:hover { background: rgba(255,255,255,0.18); transform: translateY(-1px); }

.featured-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.tag {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 3px 8px;
  border-radius: 3px;
  background: rgba(255,255,255,0.03);
}
.tag--live {
  color: var(--red);
  border-color: var(--red-bd);
  background: var(--red-dim);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* ─ Right: player ─ */
.featured-player { position: relative; }

.player-shell {
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--border-md);
  box-shadow:
    0 32px 80px rgba(0,0,0,0.8),
    0 0 0 1px rgba(255,255,255,0.04),
    0 0 60px var(--red-glow);
}
.player-badge {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--red);
  color: #fff;
  padding: 3px 9px;
  border-radius: 100px;
  pointer-events: none;
}
.player-ratio {
  position: relative;
  aspect-ratio: 16/9;
  width: 100%;
  background: #000;
}
.player-ratio iframe {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: none;
}

/* Offline placeholder */
.player-offline {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.player-offline-art {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 40%, rgba(224,19,34,0.12) 0%, transparent 70%),
    linear-gradient(160deg, #0d0408 0%, #050607 100%),
    repeating-linear-gradient(-45deg, transparent, transparent 28px, rgba(255,255,255,0.015) 28px, rgba(255,255,255,0.015) 29px);
}
.player-offline-content {
  position: relative;
  z-index: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 2rem;
}
.player-offline-show {
  font-family: var(--fd);
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  word-spacing: 0.04em;
  color: var(--text);
}
.player-offline-sub {
  font-size: 0.8rem;
  color: var(--muted);
}
.player-offline.hidden { display: none; }

.btn-yt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 4px;
  background: rgba(255,255,255,0.08);
  color: var(--text);
  border: 1px solid var(--border-md);
  transition: background var(--t);
}
.btn-yt svg { width: 16px; height: 16px; }
.btn-yt:hover { background: rgba(255,255,255,0.14); }

.player-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.player-yt-link {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  transition: color var(--t);
}
.player-yt-link:hover { color: var(--text); }

@media(max-width:900px){
  .featured-content { grid-template-columns: 1fr; gap: 2rem; }
  .featured-meta { order: 2; }
  .featured-player { order: 1; }
  .featured-title { font-size: clamp(3rem, 12vw, 5rem); }
}

/* ═══════════════════════════════════════
   ROW SECTIONS — On Air / Browse rows
═══════════════════════════════════════ */
.row-section {
  padding: 0 var(--gutter) 2rem;
  max-width: 1400px;
  margin: 0 auto;
}

.row-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}

.row-title {
  font-family: var(--fd);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.row-dot { width: 8px; height: 8px; }

.row-count {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}

/* Horizontal scroll row */
.card-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--surface-3) transparent;
  -webkit-overflow-scrolling: touch;
}
.card-row::-webkit-scrollbar { height: 3px; }
.card-row::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 10px; }

/* ═══════════════════════════════════════
   SHOW CARDS
═══════════════════════════════════════ */
.show-card {
  flex-shrink: 0;
  width: 220px;
  cursor: pointer;
  transition: transform 220ms var(--ease);
}
.show-card:hover { transform: scale(1.04); z-index: 10; }
.show-card--coming { opacity: 0.65; }
.show-card--coming:hover { opacity: 1; }

.card-thumb {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: var(--card-radius);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
}

/* ─ THE TIE-IN thumb art ─ */
.card-thumb--tiein {
  background:
    radial-gradient(ellipse 60% 70% at 30% 25%, rgba(224,19,34,0.4) 0%, transparent 55%),
    radial-gradient(ellipse 40% 50% at 80% 80%, rgba(224,19,34,0.12) 0%, transparent 55%),
    linear-gradient(150deg, #1c0408 0%, #0a0d18 55%, #050607 100%);
}
/* Add rooftop silhouette geometry via pseudo */
.card-thumb--tiein::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 55%;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
  z-index: 1;
}
.card-thumb--tiein::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 18px, rgba(255,255,255,0.018) 18px, rgba(255,255,255,0.018) 19px);
}

/* ─ Placeholder thumb backgrounds ─ */
.card-thumb--ph { background: var(--surface-2); }

.ph-a { background: radial-gradient(ellipse at 60% 30%, rgba(50,90,160,0.18) 0%, transparent 60%), linear-gradient(150deg,#0a0e1a 0%,#050607 100%); }
.ph-b { background: radial-gradient(ellipse at 40% 70%, rgba(80,50,160,0.15) 0%, transparent 60%), linear-gradient(150deg,#0d0a1a 0%,#050607 100%); }
.ph-c { background: radial-gradient(ellipse at 70% 50%, rgba(30,100,80,0.15) 0%, transparent 60%), linear-gradient(150deg,#080e0c 0%,#050607 100%); }
.ph-d { background: radial-gradient(ellipse at 30% 60%, rgba(140,90,20,0.15) 0%, transparent 60%), linear-gradient(150deg,#0e0c06 0%,#050607 100%); }
.ph-e { background: radial-gradient(ellipse at 60% 40%, rgba(160,30,50,0.12) 0%, transparent 60%), linear-gradient(150deg,#180608 0%,#050607 100%); }
.ph-f { background: radial-gradient(ellipse at 50% 50%, rgba(60,60,100,0.15) 0%, transparent 60%), linear-gradient(150deg,#0a0a14 0%,#050607 100%); }
.ph-g { background: radial-gradient(ellipse at 40% 30%, rgba(20,110,80,0.14) 0%, transparent 60%), linear-gradient(150deg,#080e0a 0%,#050607 100%); }
.ph-h { background: radial-gradient(ellipse at 70% 70%, rgba(120,50,160,0.13) 0%, transparent 60%), linear-gradient(150deg,#0e0814 0%,#050607 100%); }
.ph-i { background: radial-gradient(ellipse at 50% 40%, rgba(200,60,20,0.12) 0%, transparent 60%), linear-gradient(150deg,#140806 0%,#050607 100%); }
.ph-j { background: radial-gradient(ellipse at 30% 60%, rgba(40,80,160,0.16) 0%, transparent 60%), linear-gradient(150deg,#080c18 0%,#050607 100%); }

/* Placeholder "coming" label */
.card-coming {
  position: absolute;
  bottom: 6px; left: 6px;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(5,6,7,0.75);
  border: 1px solid var(--border-md);
  padding: 2px 7px;
  border-radius: 3px;
  z-index: 2;
}

/* LIVE badge on card */
.card-live-badge {
  position: absolute;
  top: 7px; left: 7px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  background: var(--red);
  color: #fff;
  padding: 3px 8px;
  border-radius: 100px;
  pointer-events: none;
}

/* Play button on hover */
.card-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  opacity: 0;
  transition: opacity var(--t);
}
.card-play svg { width: 36px; height: 36px; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.7)); }
.show-card:hover .card-play { opacity: 1; }

/* Label block inside featured card thumb */
.card-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5,6,7,0.9) 0%, transparent 55%);
  z-index: 2;
}
.card-label-block {
  position: absolute;
  bottom: 8px; left: 10px;
  z-index: 3;
}
.card-label-show {
  font-family: var(--fd);
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text);
  line-height: 1;
}
.card-label-host {
  font-size: 0.62rem;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0.05em;
  margin-top: 2px;
}

/* Card text below thumb */
.card-info {
  padding: 7px 2px 0;
}
.card-show {
  font-family: var(--fd);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text);
  line-height: 1.2;
}
.card-meta {
  font-size: 0.65rem;
  color: var(--faint);
  margin-top: 2px;
  letter-spacing: 0.03em;
}

/* ═══════════════════════════════════════
   BROWSE GRID — 40 channels
═══════════════════════════════════════ */
.browse-section {
  padding: 2rem var(--gutter) 0;
  /* No max-width — header stretches full width */
}

.browse-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1400px;
  margin: 0 auto 1.5rem;
}

/* Full-width container for Netflix rows — no max-width, no horizontal clipping */
.network-rows-wrap {
  width: 100%;
  padding-bottom: 3rem;
  overflow: visible;
}

.browse-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}

/* The Tie-In is 2 cols wide in the grid */
.show-card--lg {
  grid-column: span 2;
  width: auto;
}
.show-card--lg .card-thumb {
  aspect-ratio: 16/9;
  border: 1px solid var(--red-bd);
  box-shadow: 0 0 30px rgba(224,19,34,0.15);
}

/* Grid cards don't flex-shrink */
.browse-grid .show-card {
  width: auto;
  flex-shrink: unset;
}

@media(max-width:600px){
  .show-card--lg { grid-column: span 2; }
  .browse-grid { grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); }
}

/* ═══════════════════════════════════════
   JOIN CTA
═══════════════════════════════════════ */
.join-section {
  padding: 5rem var(--gutter);
  position: relative;
  text-align: center;
  overflow: hidden;
}
.join-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(224,19,34,0.1) 0%, transparent 70%),
    linear-gradient(180deg, var(--surface) 0%, var(--bg) 50%, var(--surface) 100%);
}
.join-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(224,19,34,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(224,19,34,0.04) 1px, transparent 1px);
  background-size: 50px 50px;
}
.join-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.join-eyebrow {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
  opacity: 0.8;
}
.join-headline {
  font-family: var(--fd);
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: -0.01em;
  word-spacing: 0.04em;
}
.join-sub {
  font-size: 0.95rem;
  color: var(--muted);
  max-width: 42ch;
  line-height: 1.65;
  text-align: center;
  margin-bottom: 0.5rem;
}

/* ═══════════════════════════════════════
   FOOTER
═══════════════════════════════════════ */
.footer {
  border-top: 1px solid var(--border);
  padding: 2.5rem var(--gutter) 2rem;
  background: var(--surface);
}
.footer-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.footer-brand p {
  font-size: 0.78rem;
  color: var(--muted);
  max-width: 36ch;
}
.footer-powered { font-size: 0.68rem; color: var(--faint); }
.footer-powered a { color: var(--faint); text-decoration: underline; text-decoration-color: rgba(255,255,255,0.1); }
.footer-powered a:hover { color: var(--muted); }
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}
.footer-links a {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color var(--t);
}
.footer-links a:hover { color: var(--text); }
.footer-copy {
  font-size: 0.65rem;
  color: var(--faint);
  letter-spacing: 0.05em;
}

/* ═══════════════════════════════════════
   NAV SCROLL STATE
═══════════════════════════════════════ */
.nav.scrolled {
  background: rgba(5,6,7,0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom-color: var(--border-md);
  box-shadow: 0 2px 30px rgba(0,0,0,0.5);
}

/* ═══════════════════════════════════════
   PLACEHOLDER CARD INTERNALS
   Channel number + "SLOT AVAILABLE" label
═══════════════════════════════════════ */
.card-thumb--ph {
  position: relative;
  overflow: hidden;
}

.ph-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  z-index: 1;
}

.ph-num {
  font-family: var(--fd);
  font-size: clamp(1.4rem, 3.5vw, 2.2rem);
  font-weight: 700;
  color: rgba(255,255,255,0.12);
  letter-spacing: -0.02em;
  line-height: 1;
}

.ph-slot {
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 2px 6px;
  border-radius: 2px;
}

/* Finale slot — red glow */
.show-card--finale .card-thumb--ph {
  border: 1px solid rgba(224,19,34,0.3);
  box-shadow: 0 0 20px rgba(224,19,34,0.12);
}
.show-card--finale .ph-num,
.show-card--finale .ph-slot {
  color: rgba(224,19,34,0.35);
  border-color: rgba(224,19,34,0.2);
}

/* Grid drag cursor */
.card-row.dragging { cursor: grabbing; }
.card-row.dragging .show-card { pointer-events: none; }

/* ═══════════════════════════════════════
   SCROLL-REVEAL for browse grid
═══════════════════════════════════════ */
#browseGrid .show-card {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

#browseGrid .show-card.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Coming cards stay at reduced opacity even after reveal */
#browseGrid .show-card--coming.revealed {
  opacity: 0.65;
}
#browseGrid .show-card--coming.revealed:hover {
  opacity: 1;
}

/* The Tie-In lg card always full opacity */
#browseGrid .show-card--lg.revealed {
  opacity: 1;
}

/* ═══════════════════════════════════════
   CLIPS ROW — vertical portrait cards
═══════════════════════════════════════ */

/* Row header badge (e.g. "THE TIE-IN") */
.row-badge {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
  border: 1px solid rgba(224,19,34,0.35);
  padding: 3px 9px;
  border-radius: 3px;
  margin-left: auto;
  align-self: center;
}

/* Horizontal scroll container */
.clip-row {
  display: flex;
  flex-direction: row;
  gap: 10px;
  overflow-x: auto;
  padding: 0 var(--gutter) 1rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
}
.clip-row::-webkit-scrollbar { display: none; }
.clip-row.dragging { cursor: grabbing; }
.clip-row.dragging .clip-card { pointer-events: none; }

/* Portrait card */
.clip-card {
  flex: 0 0 auto;
  width: 140px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.clip-card:hover { transform: scale(1.04); opacity: 1 !important; }

/* Portrait thumbnail — 9:16 */
.clip-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface-2);
}

/* Inherit the ph-* gradient classes for clip backgrounds */
.clip-card.ph-a .clip-thumb,
.clip-card.ph-b .clip-thumb,
.clip-card.ph-c .clip-thumb,
.clip-card.ph-d .clip-thumb,
.clip-card.ph-e .clip-thumb,
.clip-card.ph-f .clip-thumb,
.clip-card.ph-g .clip-thumb,
.clip-card.ph-h .clip-thumb,
.clip-card.ph-i .clip-thumb,
.clip-card.ph-j .clip-thumb { background: inherit; }

.clip-card.ph-a .clip-thumb { background: radial-gradient(ellipse at 60% 30%, rgba(50,90,160,0.22) 0%, transparent 65%), linear-gradient(160deg,#0a0e1a 0%,#050607 100%); }
.clip-card.ph-b .clip-thumb { background: radial-gradient(ellipse at 40% 70%, rgba(80,50,160,0.2)  0%, transparent 65%), linear-gradient(160deg,#0d0a1a 0%,#050607 100%); }
.clip-card.ph-c .clip-thumb { background: radial-gradient(ellipse at 70% 50%, rgba(30,100,80,0.2)  0%, transparent 65%), linear-gradient(160deg,#080e0c 0%,#050607 100%); }
.clip-card.ph-d .clip-thumb { background: radial-gradient(ellipse at 30% 60%, rgba(140,90,20,0.2)  0%, transparent 65%), linear-gradient(160deg,#0e0c06 0%,#050607 100%); }
.clip-card.ph-e .clip-thumb { background: radial-gradient(ellipse at 60% 40%, rgba(180,20,40,0.18) 0%, transparent 65%), linear-gradient(160deg,#1a0608 0%,#050607 100%); }
.clip-card.ph-f .clip-thumb { background: radial-gradient(ellipse at 50% 50%, rgba(60,60,100,0.2)  0%, transparent 65%), linear-gradient(160deg,#0a0a14 0%,#050607 100%); }
.clip-card.ph-g .clip-thumb { background: radial-gradient(ellipse at 40% 30%, rgba(20,110,80,0.18) 0%, transparent 65%), linear-gradient(160deg,#080e0a 0%,#050607 100%); }
.clip-card.ph-h .clip-thumb { background: radial-gradient(ellipse at 70% 70%, rgba(120,50,160,0.18) 0%, transparent 65%), linear-gradient(160deg,#0e0814 0%,#050607 100%); }
.clip-card.ph-i .clip-thumb { background: radial-gradient(ellipse at 50% 40%, rgba(200,60,20,0.18) 0%, transparent 65%), linear-gradient(160deg,#140806 0%,#050607 100%); }
.clip-card.ph-j .clip-thumb { background: radial-gradient(ellipse at 30% 60%, rgba(40,80,160,0.2)  0%, transparent 65%), linear-gradient(160deg,#080c18 0%,#050607 100%); }

/* Subtle grid-line texture on portrait cards */
.clip-thumb::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
  z-index: 0;
}

/* Play icon — center, shown on hover */
.clip-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 2;
}
.clip-play svg { width: 28px; height: 28px; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.8)); }
.clip-card:hover .clip-play { opacity: 1; }

/* Duration badge — bottom right */
.clip-duration {
  position: absolute;
  bottom: 6px;
  right: 6px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.55);
  background: rgba(0,0,0,0.55);
  padding: 2px 5px;
  border-radius: 3px;
  z-index: 2;
}

/* Clip title below thumb */
.clip-title {
  font-family: var(--fd);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
  line-height: 1.3;
  text-transform: uppercase;
  padding: 0 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════
   ANCHORS — High-Performance Infinite Filmstrip
   Scrolling handled entirely by JS (main.js)
═══════════════════════════════════════════════════ */

.anchors-section {
  padding: 5rem 0 3rem;
  overflow: hidden;
  position: relative;
  background: #080a0c;
}

.anchors-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 var(--gutter) 2rem;
}
.anchors-title {
  font-family: var(--fd);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text);
  text-transform: uppercase;
  margin: 0;
}
.anchors-badge {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
  border: 1px solid rgba(224,19,34,0.4);
  padding: 3px 8px;
  border-radius: 3px;
}

/* Filmstrip viewport — clips overflow, no scroll */
.anchors-filmstrip-wrap {
  position: relative;
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
  -webkit-overflow-scrolling: touch;
}
.anchors-filmstrip-wrap::-webkit-scrollbar { display: none; }
.anchors-filmstrip-wrap.is-dragging { cursor: grabbing; }

/* Track — JS sets transform, will-change for GPU */
.anchors-track {
  display: flex;
  flex-wrap: nowrap;
  gap: 14px;
  width: max-content;
  padding: 8px var(--gutter) 32px;
}

/* Individual film card */
.film-card {
  flex: 0 0 auto;
  width: 340px;
  height: 510px;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: block;
  will-change: transform;
  transform: translateY(0px) scale(1);
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 0.5s ease;
}
.film-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 24px 60px rgba(0,0,0,0.7), 0 0 0 1px rgba(224,19,34,0.25);
  z-index: 10;
}

/* Image wrapper — inner parallax target */
.film-img-wrap {
  position: absolute;
  inset: -8% 0;          /* extra height for parallax travel */
  overflow: hidden;
}
.film-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
  filter: grayscale(100%) contrast(1.12);
  transition: transform 0.6s cubic-bezier(0.23,1,0.32,1),
              filter 0.5s ease;
  will-change: transform;
  display: block;
}
.film-card:hover .film-img-wrap img {
  filter: grayscale(90%) contrast(1.2) brightness(1.08);
  transform: scale(1.06);
}

/* Placeholder card */
.film-img-wrap--ph {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0c0e10;
  border: 1px dashed rgba(122,138,150,0.2);
  inset: 0;
}
.film-ph-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.film-ph-inner span {
  font-size: 2.5rem;
  color: rgba(122,138,150,0.25);
  font-weight: 200;
  line-height: 1;
}
.film-card--ph:hover .film-img-wrap--ph {
  border-color: rgba(224,19,34,0.3);
}

/* Bottom gradient */
.film-grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(5,6,7,0.95) 0%,
    rgba(5,6,7,0.4) 40%,
    transparent 68%
  );
  pointer-events: none;
  z-index: 1;
}

/* Name + role overlay */
.film-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.2rem 1.1rem;
  z-index: 2;
  transition: transform 0.5s cubic-bezier(0.23,1,0.32,1);
}
.film-card:hover .film-info {
  transform: translateY(-4px);
}
.film-name {
  font-family: var(--fd);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #fff;
  text-transform: uppercase;
  margin: 0 0 4px;
  line-height: 1.1;
}
.film-role {
  font-size: 0.65rem;
  color: var(--red);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
}

/* Edge fade masks */
.anchors-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 160px;
  pointer-events: none;
  z-index: 20;
}
.anchors-fade--left {
  left: 0;
  background: none; /* No left fade — cards start flush */
  pointer-events: none;
}
.anchors-fade--right {
  right: 0;
  width: 120px;
  background: linear-gradient(to left, #050607 15%, transparent 100%);
}

@media (max-width: 600px) {
  .film-card { width: 240px; height: 360px; }
  .anchors-fade { width: 40px; }
}

/* ═══════════════════════════════════════════════════
   DISTRIBUTION PARTNER BAND — Jill Bloom
═══════════════════════════════════════════════════ */

.partner-band {
  margin: 3rem 0;
  background: linear-gradient(
    105deg,
    rgba(224,19,34,0.08) 0%,
    rgba(12,14,16,0.98) 50%,
    rgba(5,6,7,1) 100%
  );
  border-top: 1px solid rgba(224,19,34,0.2);
  border-bottom: 1px solid rgba(224,19,34,0.2);
  position: relative;
  overflow: hidden;
}

.partner-band-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2.5rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.partner-band-text {
  flex: 1;
  min-width: 0;
}

.partner-eyebrow {
  font-family: var(--fd);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--red);
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}

.partner-pub {
  font-family: var(--fd);
  font-size: clamp(1.2rem, 2.5vw, 1.9rem);
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.01em;
  margin-bottom: 0.5rem;
  line-height: 1.1;
}

.partner-quote {
  font-size: 0.85rem;
  color: var(--muted);
  font-style: italic;
  margin-bottom: 0.75rem;
  line-height: 1.5;
  max-width: 480px;
}

.partner-name {
  font-size: 0.72rem;
  color: var(--text);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.partner-band-portrait {
  flex: 0 0 auto;
  width: 140px;
  height: 210px;
  position: relative;
  border-radius: var(--card-radius);
  overflow: hidden;
}
.partner-band-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  filter: grayscale(100%) contrast(1.1);
}
.partner-portrait-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to left,
    transparent 30%,
    rgba(5,6,7,0.7) 100%
  );
  pointer-events: none;
}

@media (max-width: 640px) {
  .partner-band-portrait { display: none; }
  .partner-band-inner { flex-direction: column; }
}

/* ═══════════════════════════════════════════════════
   BROWSE GRID — Founding Seat Badges
═══════════════════════════════════════════════════ */

.show-card--founding {
  position: relative;
}
/* Founding cards: red border glow + scale-up to stand apart */
.show-card--founding .card-thumb {
  border: 2px solid rgba(224,19,34,0.75) !important;
  box-shadow: 0 0 22px rgba(224,19,34,0.28), 0 0 6px rgba(224,19,34,0.15) !important;
}
.show-card--founding:hover .card-thumb {
  border-color: var(--red) !important;
  box-shadow: 0 0 36px rgba(224,19,34,0.55) !important;
}
/* Founding badge */
.founding-badge {
  position: absolute;
  top: 7px;
  left: 7px;
  background: var(--red);
  color: #fff;
  font-family: var(--fd);
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 3px 7px;
  border-radius: 3px;
  z-index: 2;
  text-transform: uppercase;
}
/* Browse grid legend */
.browse-legend {
  display: flex;
  align-items: center;
  gap: 7px;
}
.legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--red);
  box-shadow: 0 0 6px rgba(224,19,34,0.5);
  flex-shrink: 0;
}
.legend-label {
  font-family: var(--fd);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--red);
  text-transform: uppercase;
}
.legend-spacer {
  color: var(--steel);
  font-size: 0.7rem;
}
.row-count {
  font-family: var(--fd);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--steel);
  text-transform: uppercase;
}


/* ═══════════════════════════════════════════════════
   SIZE OVERHAUL — Bigger cards across the board
═══════════════════════════════════════════════════ */

/* On Air row — taller cards */
.card-row .show-card {
  width: 280px;
}
.card-row .card-thumb {
  aspect-ratio: 16/9;
  min-height: 158px;
}

/* Clips row — wider portrait tiles */
.clip-card {
  flex: 0 0 auto;
  width: 200px !important;
  cursor: pointer;
}
.clip-thumb {
  position: relative;
  width: 200px !important;
  aspect-ratio: 9/16;
  border-radius: var(--card-radius);
  overflow: hidden;
}

/* Browse grid — 5 columns, taller cards */
.browse-grid {
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 14px !important;
}
.browse-grid .show-card {
  width: auto;
}
.browse-grid .card-thumb {
  aspect-ratio: 16/9;
  min-height: 160px;
}
.browse-grid .card-show {
  font-size: 0.85rem !important;
}
.browse-grid .card-meta {
  font-size: 0.7rem !important;
  color: var(--muted) !important;
}

/* Tie-In featured card in grid — 2 cols */
.show-card--lg {
  grid-column: span 2 !important;
}



@media (max-width: 1100px) {
  .browse-grid { grid-template-columns: repeat(4, 1fr) !important; }
}
@media (max-width: 800px) {
  .browse-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .clip-card { width: 160px !important; }
  .clip-thumb { width: 160px !important; }
}
@media (max-width: 540px) {
  .browse-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ═══════════════════════════════════════════════════
   FOUNDING SECTION — Featured 8 Channel Row
═══════════════════════════════════════════════════ */

.browse-grid .show-card--live .card-thumb {
  aspect-ratio: 4/3 !important;
  border: 1px solid var(--red) !important;
  box-shadow: 0 0 30px rgba(224,19,34,0.2) !important;
}


/* ═══════════════════════════════════════════════════
   FOUNDING 8 — Featured Strip
═══════════════════════════════════════════════════ */

.f8-section {
  padding: 3rem var(--gutter) 4rem;
  max-width: 1600px;
  margin: 0 auto;
}

.f8-tagline {
  font-family: var(--fd);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--steel);
  text-transform: uppercase;
  margin-left: 1rem;
}

.f8-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 1.5rem;
}

.f8-card {
  display: block;
  cursor: pointer;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.f8-card:hover {
  transform: scale(1.03);
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
  z-index: 5;
}

.f8-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background-size: cover;
  background-position: center top;
  background-color: #111;
}

.f8-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 30%,
    rgba(0,0,0,0.55) 65%,
    rgba(0,0,0,0.88) 100%
  );
}

.f8-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--red);
  color: #fff;
  font-family: var(--fd);
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 3px 8px;
  border-radius: 3px;
  z-index: 2;
  text-transform: uppercase;
}

.f8-badge--sold {
  background: var(--red);
  box-shadow: 0 0 12px rgba(224,19,34,0.6);
}

.f8-card--sold .f8-thumb {
  border: 2px solid var(--red);
  box-shadow: 0 0 24px rgba(224,19,34,0.35);
}

.f8-card:not(.f8-card--sold):hover .f8-thumb {
  border: 2px solid rgba(224,19,34,0.6);
}

.f8-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 12px 12px;
  z-index: 2;
}

.f8-ch {
  font-family: var(--fd);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--red);
  text-transform: uppercase;
  margin: 0 0 2px;
}

.f8-name {
  font-family: var(--fd);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #fff;
  text-transform: uppercase;
  margin: 0 0 3px;
  line-height: 1.1;
}

.f8-host {
  font-family: var(--sat);
  font-size: 0.68rem;
  font-weight: 400;
  color: rgba(255,255,255,0.65);
  margin: 0;
}

/* Responsive: 2-col on mobile */
@media (max-width: 900px) {
  .f8-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
  .f8-row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .f8-name { font-size: 0.75rem; }
}

/* ═══════════════════════════════════════════════════
   FOUNDING 8 — Grayscale → Color activation on hover
═══════════════════════════════════════════════════ */

/* All founding seats (not sold) start greyscale */
.f8-card:not(.f8-card--sold) .f8-thumb {
  filter: grayscale(100%) brightness(0.7);
  transition: filter 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease;
}

/* On hover: bloom into full color */
.f8-card:not(.f8-card--sold):hover .f8-thumb {
  filter: grayscale(0%) brightness(1);
}

/* Overlay gets lighter on hover to let the color breathe */
.f8-card:not(.f8-card--sold) .f8-overlay {
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.15) 0%,
    rgba(0,0,0,0.45) 55%,
    rgba(0,0,0,0.85) 100%
  );
  transition: background 0.45s ease;
}
.f8-card:not(.f8-card--sold):hover .f8-overlay {
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 30%,
    rgba(0,0,0,0.55) 65%,
    rgba(0,0,0,0.88) 100%
  );
}

/* Red border glow activates on hover */
.f8-card:not(.f8-card--sold) .f8-thumb {
  border: 2px solid rgba(224,19,34,0.0);
}
.f8-card:not(.f8-card--sold):hover .f8-thumb {
  border: 2px solid rgba(224,19,34,0.8) !important;
  box-shadow: 0 0 28px rgba(224,19,34,0.4) !important;
}

/* Badge pulses on hover */
.f8-card:not(.f8-card--sold) .f8-badge {
  opacity: 0.6;
  transition: opacity 0.35s ease;
}
.f8-card:not(.f8-card--sold):hover .f8-badge {
  opacity: 1;
}

/* ═══════════════════════════════════════════════════
   CHANNELS GRID — Option B: "Claim this slot" hover
═══════════════════════════════════════════════════ */

/* Base state: dark, receded */
.show-card--coming .card-thumb {
  position: relative;
  overflow: hidden;
}

/* Hover overlay — slides up from bottom */
.show-card--coming .claim-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.82);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  padding: 12px;
  text-align: center;
  z-index: 4;
}

.show-card--coming:hover .claim-overlay {
  opacity: 1;
  transform: translateY(0);
}

.claim-overlay-line1 {
  font-family: var(--fd);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--red);
  text-transform: uppercase;
  margin: 0 0 6px;
}

.claim-overlay-line2 {
  font-family: var(--fd);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  text-transform: uppercase;
  line-height: 1.15;
  margin: 0 0 10px;
}

.claim-overlay-cta {
  display: inline-block;
  background: var(--red);
  color: #fff;
  font-family: var(--fd);
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 3px;
  margin-top: 2px;
}

/* Number fades slightly on hover to let overlay read */
.show-card--coming:hover .ph-num {
  opacity: 0.15;
}
.show-card--coming:hover .ph-slot {
  opacity: 0;
}
.show-card--coming:hover .card-coming {
  opacity: 0;
}

/* ═══════════════════════════════════════════════════════════════
   POST-HERO VISUAL OVERHAUL
   Depth, rhythm, atmosphere — every section has a reason to exist
═══════════════════════════════════════════════════════════════ */

/* ── Section rhythm: alternating bg + red ambient edge glow ── */
#on-air {
  background: #050607;
  padding: 3.5rem 0 3rem;
  position: relative;
  overflow: hidden;
}
#on-air .row-header { padding: 0 var(--gutter); }
#on-air .card-row   { padding: 0 var(--gutter) 1rem; }

#anchors {
  background: #050607;
  position: relative;
  overflow: hidden;
}

#clips {
  background: #050607;
  padding: 3.5rem 0 3rem;
  position: relative;
}
#clips .row-header { padding: 0 var(--gutter); }
#clips .clip-row   { padding: 0 var(--gutter) 1rem; }

#founding {
  background: #0a0b0d;
  position: relative;
}

#browse {
  background: #050607;
  position: relative;
}

/* ── Section titles — cinematic chapter headers ── */
.row-header {
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin-bottom: 1.5rem !important;
}

.row-title {
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  color: #fff !important;
  text-transform: uppercase;
  position: relative;
}


/* ── ON AIR: bigger cards, stronger live pulse ── */
#on-air .card-row .show-card {
  width: 320px !important;
}
#on-air .card-row .card-thumb {
  aspect-ratio: 16/9;
  min-height: 180px !important;
}

/* Pulsing live dot */
@keyframes livePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224,19,34,0.7); }
  50%       { box-shadow: 0 0 0 6px rgba(224,19,34,0); }
}
.card-live-badge .dot,
.live-pill .dot {
  animation: livePulse 1.8s ease-in-out infinite !important;
}

/* Anchors filmstrip — see filmstrip block above */

/* ── Clips: more dramatic gradients ── */
.clip-card {
  position: relative;
}
.clip-thumb {
  border: 1px solid rgba(255,255,255,0.06) !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}
.clip-card:hover .clip-thumb {
  border-color: rgba(224,19,34,0.5) !important;
  box-shadow: 0 0 20px rgba(224,19,34,0.2) !important;
}

/* Override the subtle clip placeholder gradients with more drama */
.clip-thumb.ph-a { background: linear-gradient(160deg, #1a0505 0%, #0d0000 60%, #1a0a00 100%) !important; }
.clip-thumb.ph-b { background: linear-gradient(160deg, #0d0505 0%, #1a0000 60%, #0a0505 100%) !important; }
.clip-thumb.ph-c { background: linear-gradient(160deg, #050d0d 0%, #001a1a 60%, #000d0a 100%) !important; }
.clip-thumb.ph-d { background: linear-gradient(160deg, #0a0505 0%, #1a0500 60%, #0d0000 100%) !important; }
.clip-thumb.ph-e { background: linear-gradient(160deg, #0d0000 0%, #1a0505 60%, #0a0000 100%) !important; }
.clip-thumb.ph-f { background: linear-gradient(160deg, #050a0d 0%, #000d1a 60%, #05050d 100%) !important; }

/* Play icon on clip cards */
.clip-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(224,19,34,0.08) 0%, transparent 65%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.clip-card:hover .clip-thumb::after {
  opacity: 1;
}

/* ── Partner band — deeper atmosphere ── */
.partner-band {
  background: transparent !important;
  border-top: none !important;
  border-bottom: none !important;
  position: relative;
  overflow: hidden;
}
.partner-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 50% 100% at 80% 50%, rgba(224,19,34,0.06) 0%, transparent 70%);
  pointer-events: none;
}


/* ── Soft section separation — shadow fades, no hard lines ── */
#on-air, #anchors, #clips, #founding, #browse {
  position: relative;
}
/* Subtle top fade-in from black */
#anchors,
#clips,
#founding,
#browse {
  box-shadow: inset 0 40px 60px -30px rgba(0,0,0,0.8);
}

/* ═══════════════════════════════════════════════════════════════
   PARTNER SECTION — Full-bleed cinematic moment
═══════════════════════════════════════════════════════════════ */

.partner-cinematic {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Video background */
.partner-video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.45;
  z-index: 0;
}

/* Multi-layer overlay — darkens edges, keeps center readable */
.partner-video-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(5,6,7,0.92) 0%, rgba(5,6,7,0.6) 50%, rgba(5,6,7,0.75) 100%),
    linear-gradient(to bottom, rgba(5,6,7,0.6) 0%, transparent 30%, transparent 70%, rgba(5,6,7,0.8) 100%);
}

/* Inner layout */
.partner-cinematic-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 5rem var(--gutter);
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 4rem;
  align-items: center;
}

/* Left text block */
.partner-cinematic-left {
  max-width: 600px;
}

.partner-eyebrow {
  font-family: var(--fd);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--red);
  text-transform: uppercase;
  margin: 0 0 1rem;
}

.partner-pub-title {
  font-family: var(--fd);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: #fff;
  text-transform: uppercase;
  margin: 0 0 1.5rem;
}

.partner-quote {
  font-family: var(--sat);
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.7;
  color: rgba(255,255,255,0.75);
  font-style: italic;
  border-left: 3px solid rgba(224,19,34,0.5);
  padding-left: 1.25rem;
  margin: 0 0 1.25rem;
}

.partner-attribution {
  font-family: var(--fd);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  margin: 0 0 2rem;
}

.partner-cta {
  display: inline-block;
  background: var(--red);
  color: #fff;
  font-family: var(--fd);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 12px 28px;
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.partner-cta:hover {
  background: #c01120;
  box-shadow: 0 0 24px rgba(224,19,34,0.4);
}

/* Portrait */
.partner-cinematic-portrait {
  position: relative;
  min-height: 480px;
  align-self: flex-end;
  overflow: hidden;
}
.partner-cinematic-portrait img {
  width: 100%;
  max-width: 320px;
  border-radius: 4px;
  filter: grayscale(20%) contrast(1.05);
  display: block;
  margin: 0 auto;
  mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}

@media (max-width: 900px) {
  .partner-cinematic-inner {
    grid-template-columns: 1fr;
  }
  .partner-cinematic-portrait {
    display: none;
  }
  .partner-cinematic {
    min-height: auto;
  }
}


/* ═══════════════════════════════════════════════════════════════
   TEASER WALL — "Coming to the Network"
   4 looping Veo clips, equal columns, cinematic preview grid
═══════════════════════════════════════════════════════════════ */

.teaser-section {
  padding: 3.5rem var(--gutter) 4rem;
  background: #050607;
  position: relative;
}

.teaser-sub {
  font-family: var(--fd);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--steel);
  text-transform: uppercase;
}

.teaser-wall {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 1.5rem;
}

.teaser-card {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
}

.teaser-video-wrap {
  position: relative;
  aspect-ratio: 16/9;
  background: #0d0e10;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.06);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.teaser-card:hover .teaser-video-wrap {
  border-color: rgba(224,19,34,0.45);
  box-shadow: 0 0 24px rgba(224,19,34,0.18);
}

.teaser-video-wrap video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease, filter 0.4s ease;
  filter: brightness(0.75) saturate(0.85);
}

.teaser-card:hover .teaser-video-wrap video {
  transform: scale(1.04);
  filter: brightness(0.9) saturate(1);
}

/* Gradient overlay so labels read */
.teaser-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 40%,
    rgba(0,0,0,0.75) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Channel label — bottom of card */
.teaser-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 12px 12px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.teaser-ch {
  font-family: var(--fd);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #fff;
  text-transform: uppercase;
  line-height: 1.1;
}

.teaser-cat {
  font-family: var(--fd);
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
}

/* "Coming Soon" pill that appears on hover */
.teaser-video-wrap::after {
  content: 'COMING SOON';
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0,0,0,0.7);
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.6);
  font-family: var(--fd);
  font-size: 0.48rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 3px 8px;
  border-radius: 3px;
  z-index: 3;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.teaser-card:hover .teaser-video-wrap::after {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 900px) {
  .teaser-wall { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .teaser-wall { grid-template-columns: 1fr; }
}


/* ── Sponsored Channel Cards (e.g. Optelos / Ch 10) ──────────── */
.show-card--sponsored {
  --sponsor-color: #1374DC;
  opacity: 1;
}
.show-card--sponsored .card-thumb {
  border: 1.5px solid color-mix(in srgb, var(--sponsor-color) 40%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--sponsor-color) 20%, transparent);
}
.show-card--sponsored:hover .card-thumb {
  border-color: var(--sponsor-color);
  box-shadow: 0 0 32px color-mix(in srgb, var(--sponsor-color) 45%, transparent);
}
.card-thumb--real {
  position: relative;
  overflow: hidden;
}
.card-thumb--real .card-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s ease;
}
.show-card--sponsored:hover .card-thumb-img {
  transform: scale(1.06);
}

/* Sponsor badge — top-left corner bug */
.sponsor-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 4;
  font-family: var(--font-body, 'Satoshi', sans-serif);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #fff;
  background: color-mix(in srgb, var(--sponsor-color) 85%, #000 15%);
  padding: 3px 7px;
  border-radius: 3px;
  opacity: 0.95;
}

/* Hover overlay for sponsored cards */
.sponsor-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--sponsor-color) 80%, #000) 0%,
    color-mix(in srgb, var(--sponsor-color) 30%, transparent) 55%,
    transparent 100%
  );
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 14px 12px;
  gap: 5px;
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 5;
}
.show-card--sponsored:hover .sponsor-overlay { opacity: 1; }

.sponsor-overlay-badge {
  font-family: var(--font-body, 'Satoshi', sans-serif);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
}
.sponsor-overlay-tagline {
  font-family: var(--font-body, 'Satoshi', sans-serif);
  font-size: 0.75rem;
  font-weight: 500;
  color: #fff;
  line-height: 1.3;
  margin: 0;
}
.sponsor-overlay-cta {
  font-family: var(--font-body, 'Satoshi', sans-serif);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sponsor-color);
  border: 1px solid var(--sponsor-color);
  padding: 4px 10px;
  border-radius: 3px;
  margin-top: 4px;
  transition: background 0.2s ease, color 0.2s ease;
}
.show-card--sponsored:hover .sponsor-overlay-cta {
  background: var(--sponsor-color);
  color: #fff;
}

/* Card meta sponsor label */
.card-meta-sponsor {
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* ── Sponsored Teaser Card (Coming to the Network wall) ─────── */
.teaser-card--sponsored {
  --sponsor-color: #1374DC;
  outline: 1.5px solid color-mix(in srgb, var(--sponsor-color) 50%, transparent);
  box-shadow: 0 0 24px color-mix(in srgb, var(--sponsor-color) 25%, transparent);
}
/* Branded still image overlaid on top of the Veo clip */
.teaser-sponsor-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 1;
  transition: opacity 0.5s ease;
}
/* On hover, let the video breathe through */
.teaser-card--sponsored:hover .teaser-sponsor-img {
  opacity: 0;
}
/* Blue tint overlay for Optelos card */
.teaser-overlay--blue {
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--sponsor-color) 70%, #000) 0%,
    color-mix(in srgb, var(--sponsor-color) 15%, transparent) 45%,
    transparent 100%
  );
}
/* "PRESENTED BY OPTELOS" bug above the channel title */
.teaser-sponsor-bug {
  display: block;
  font-family: var(--font-body, 'Satoshi', sans-serif);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sponsor-color);
  margin-bottom: 4px;
}

/* ── Living Portrait — hover video reveal ─────────────────────── */
.film-still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  filter: grayscale(100%) contrast(1.12);
  transition: opacity 0.6s ease;
  z-index: 1;
}
.film-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  filter: grayscale(100%) contrast(1.12);
  opacity: 0;
  transition: opacity 0.7s ease;
  z-index: 2;
}
/* On hover: fade video in, fade still out */
.film-card:hover .film-video  { opacity: 1; }
.film-card:hover .film-still  { opacity: 0; }

/* Partner band Bloom video */
.partner-bloom-video {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 100%;
  width: auto;
  max-width: 45%;
  object-fit: cover;
  object-position: top center;
  filter: grayscale(100%) contrast(1.1);
  opacity: 0;
  transition: opacity 0.8s ease;
  z-index: 3;
}
/* Always-on immediately overrides opacity — no hover needed */
.partner-bloom-video.partner-bloom-video--always {
  opacity: 1 !important;
  z-index: 4;
}
.partner-band:hover .partner-portrait { opacity: 0; }


/* ═══════════════════════════════════════════════════
   CLIPS v2 — 9:16 VERTICAL SHORTS ROW
═══════════════════════════════════════════════════ */

.clips-section { padding: 3rem 0 4rem; }

.clip-row--v2 {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0.5rem var(--gutter) 1.5rem;
  cursor: grab;
}
.clip-row--v2::-webkit-scrollbar { display: none; }
.clip-row--v2.dragging { cursor: grabbing; }
.clip-row--v2.dragging .clip-card--v2 { pointer-events: none; }

/* 9:16 card */
.clip-card--v2 {
  flex: 0 0 auto;
  width: 220px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transition: transform 0.25s ease;
}
.clip-card--v2:hover { transform: scale(1.03); }

/* The thumbnail area — true 9:16 */
.clip-thumb--v2 {
  position: relative;
  width: 220px;
  height: 391px; /* 220 × 16/9 = 391 */
  border-radius: 6px;
  overflow: hidden;
  background: #0d0d0d;
}

.clip-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease, filter 0.4s ease;
  filter: brightness(0.88) saturate(0.9);
}
.clip-card--v2:hover .clip-img {
  transform: scale(1.04);
  filter: brightness(1) saturate(1.05);
}

/* Dark overlay — deepens on hover */
.clip-overlay--v2 {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.72) 0%,
    rgba(0,0,0,0.18) 45%,
    rgba(0,0,0,0.05) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.clip-card--v2:hover .clip-overlay--v2 { opacity: 1; }

/* Play button */
.clip-play--v2 {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(224, 19, 34, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 24px rgba(224,19,34,0.5);
  backdrop-filter: blur(4px);
  transition: transform 0.2s ease;
}
.clip-card--v2:hover .clip-play--v2 { transform: scale(1.1); }
.clip-play--v2 svg {
  width: 20px;
  height: 20px;
  margin-left: 3px; /* optical centering */
}

/* Show channel tag — bottom of thumb */
.clip-show-tag {
  position: absolute;
  bottom: 10px;
  left: 10px;
  font-family: 'Satoshi', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
  background: rgba(0,0,0,0.55);
  padding: 3px 8px;
  border-radius: 3px;
  backdrop-filter: blur(4px);
  pointer-events: none;
}

/* Title beneath the card */
.clip-title--v2 {
  font-family: 'Satoshi', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255,255,255,0.82);
  line-height: 1.35;
  margin: 0;
  max-width: 220px;
}

/* ── Always-on portrait video — ensure visible ── */
.film-video--always {
  opacity: 1 !important;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
}

/* Bloom always-on */
.partner-bloom-video--always {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}

/* ── Responsive clips v2 ── */
@media (max-width: 768px) {
  .clip-card--v2 { width: 160px; }
  .clip-thumb--v2 { width: 160px; height: 284px; }
  .clip-title--v2 { font-size: 0.72rem; max-width: 160px; }
}


/* ═══════════════════════════════════════════════════
   FILMSTRIP — UNIFORM HEADSHOT SIZING
   All portraits now normalized to 800x1200 (2:3).
   Single object-position works across all cards.
═══════════════════════════════════════════════════ */

.film-img-wrap img,
.film-still {
  object-position: center 8% !important;
  object-fit: cover !important;
}

/* ── Bloom portrait — static fallback, always visible ── */
.partner-portrait--visible {
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  height: 100%;
  width: auto;
  max-width: 400px;
  object-fit: cover;
  object-position: top center;
  filter: grayscale(30%) contrast(1.05);
  opacity: 1;
  z-index: 2;
  mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}

/* Always-on Bloom living portrait video — renders on top of still */
.partner-bloom-video--always {
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  height: 100%;
  width: auto;
  max-width: 400px;
  object-fit: cover;
  object-position: top center;
  filter: grayscale(100%) contrast(1.12);
  z-index: 3;
  mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}


/* ═══════════════════════════════════════════════════
   NETFLIX-STYLE CHANNEL ROWS
═══════════════════════════════════════════════════ */

.nf-row-section {
  margin-bottom: 3rem;
  position: relative;
  overflow: visible;
}
/* Right-edge fade — signals more content off-screen */
.nf-row-section::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 80px;
  background: linear-gradient(to left, #050607 0%, transparent 100%);
  pointer-events: none;
  z-index: 5;
}

.nf-row-header {
  padding: 0 var(--gutter) 0.75rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.nf-row-label {
  font-family: var(--fd);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.78);
  text-transform: uppercase;
  margin: 0;
  transition: color 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.nf-row-label::after {
  content: "›";
  font-size: 1.2rem;
  color: rgba(255,255,255,0.3);
  font-weight: 300;
  line-height: 1;
  transition: color 0.2s ease, transform 0.2s ease;
  display: inline-block;
}
.nf-row-section:hover .nf-row-label { color: #fff; }
.nf-row-section:hover .nf-row-label::after { color: var(--red); transform: translateX(3px); }

/* Horizontal strip */
.nf-strip {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 12px;
  overflow-x: scroll;
  overflow-y: visible;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Left pad = gutter, right pad = 80px so half a card bleeds off right */
  padding: 4px var(--gutter) 20px 40px;
  padding-right: 80px;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
  /* Critical: don't let the strip itself clip its children */
  min-width: 0;
}
.nf-strip::-webkit-scrollbar { display: none; }
.nf-strip.dragging { cursor: grabbing; }

/* 16:9 card */
.nf-card {
  flex: 0 0 auto;
  width: 360px;
  cursor: pointer;
  transition: transform 0.25s ease;
}
.nf-card:hover { transform: scale(1.04); z-index: 10; position: relative; }

.nf-thumb {
  position: relative;
  width: 360px;
  height: 203px; /* 16:9 = 360 × 9/16 */
  border-radius: 4px;
  overflow: hidden;
  background: #111315;
}

/* Real image thumbnail */
.nf-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.35s ease, filter 0.3s ease;
  filter: brightness(0.82) saturate(0.85);
}
.nf-card:hover .nf-card-img {
  transform: scale(1.06);
  filter: brightness(1) saturate(1.05);
}

/* Placeholder with channel number */
.nf-card-ph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.nf-ch-num {
  font-family: var(--fd);
  font-size: 3.5rem;
  font-weight: 700;
  color: rgba(255,255,255,0.07);
  letter-spacing: -0.02em;
  line-height: 1;
  pointer-events: none;
}

.nf-ph-plus {
  font-size: 2rem;
  color: rgba(255,255,255,0.15);
  font-weight: 200;
}

/* Placeholder color variants — reuse existing ph-* backgrounds */
.nf-card-ph.ph-a { background: radial-gradient(ellipse at 60% 30%, rgba(50,90,160,0.18) 0%, transparent 65%), linear-gradient(160deg,#0a0e1a 0%,#080a0c 100%); }
.nf-card-ph.ph-b { background: radial-gradient(ellipse at 40% 70%, rgba(80,50,160,0.15) 0%, transparent 65%), linear-gradient(160deg,#0d0a1a 0%,#080a0c 100%); }
.nf-card-ph.ph-c { background: radial-gradient(ellipse at 70% 50%, rgba(30,100,80,0.15) 0%, transparent 65%), linear-gradient(160deg,#080e0c 0%,#080a0c 100%); }
.nf-card-ph.ph-d { background: radial-gradient(ellipse at 30% 60%, rgba(140,90,20,0.15) 0%, transparent 65%), linear-gradient(160deg,#0e0c06 0%,#080a0c 100%); }
.nf-card-ph.ph-e { background: radial-gradient(ellipse at 60% 40%, rgba(180,20,40,0.12) 0%, transparent 65%), linear-gradient(160deg,#1a0608 0%,#080a0c 100%); }
.nf-card-ph.ph-f { background: radial-gradient(ellipse at 50% 50%, rgba(60,60,100,0.15) 0%, transparent 65%), linear-gradient(160deg,#0a0a14 0%,#080a0c 100%); }
.nf-card-ph.ph-g { background: radial-gradient(ellipse at 40% 30%, rgba(20,110,80,0.14) 0%, transparent 65%), linear-gradient(160deg,#080e0a 0%,#080a0c 100%); }
.nf-card-ph.ph-h { background: radial-gradient(ellipse at 70% 70%, rgba(120,50,160,0.14) 0%, transparent 65%), linear-gradient(160deg,#0e0814 0%,#080a0c 100%); }
.nf-card-ph.ph-i { background: radial-gradient(ellipse at 50% 40%, rgba(200,60,20,0.12) 0%, transparent 65%), linear-gradient(160deg,#140806 0%,#080a0c 100%); }
.nf-card-ph.ph-j { background: radial-gradient(ellipse at 30% 60%, rgba(40,80,160,0.15) 0%, transparent 65%), linear-gradient(160deg,#080c18 0%,#080a0c 100%); }

/* Hover overlay */
.nf-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.1) 60%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 10px 12px;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.nf-card:hover .nf-overlay { opacity: 1; }

.nf-overlay--sponsor { background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(19,116,220,0.12) 100%); }

.nf-overlay-tag {
  font-family: var(--fs);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  margin: 0 0 4px;
}

.nf-overlay-cta {
  font-family: var(--fs);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(224,19,34,0.9);
  padding: 3px 8px;
  border-radius: 2px;
  display: inline-block;
  width: fit-content;
}

/* Badges */
.nf-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  font-family: var(--fs);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 2px;
  z-index: 2;
}
.nf-badge--founding {
  background: var(--clr-red, #e01322);
  color: #fff;
}
.nf-badge--sponsor {
  background: #1374DC;
  color: #fff;
}

/* Launch tag */
.nf-launch {
  position: absolute;
  bottom: 8px;
  right: 8px;
  font-family: var(--fs);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
}

/* Meta below the thumb */
.nf-meta {
  padding: 6px 2px 0;
}
.nf-title {
  font-family: var(--fs);
  font-size: 0.82rem;
  font-weight: 700;
  color: rgba(255,255,255,0.82);
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nf-sub {
  font-family: var(--fs);
  font-size: 0.68rem;
  font-weight: 400;
  color: rgba(255,255,255,0.38);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Claim placeholder card */
.nf-card--claim { opacity: 0.4; }
.nf-card--claim:hover { opacity: 0.7; }
.nf-card--claim .nf-thumb { border: 1px dashed rgba(255,255,255,0.12); background: transparent; }


/* ═══════════════════════════════════════════════════════════════
   MOBILE OPTIMIZATION — Comprehensive responsive pass
   Primary breakpoints: 768px (tablet), 480px (phone), 375px (small)
═══════════════════════════════════════════════════════════════ */

/* ── Hamburger button ── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  margin-left: auto;
  cursor: pointer;
  z-index: 300;
}
.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.3s ease;
}
.nav-hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.is-open span:nth-child(2) { opacity: 0; }
.nav-hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile slide-in menu ── */
.nav-mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(5,6,7,0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 250;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 5rem 2.5rem 3rem;
  gap: 0;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
.nav-mobile-menu.is-open {
  transform: translateX(0);
}
.nav-mobile-close {
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  padding: 8px;
  color: var(--muted);
}
.nav-mobile-close svg { width: 22px; height: 22px; }
.nav-mobile-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  margin-bottom: 2.5rem;
}
.nav-mobile-links li {
  border-bottom: 1px solid var(--border);
}
.nav-mobile-links a {
  display: block;
  padding: 1rem 0;
  font-family: var(--fd);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  transition: color var(--t);
}
.nav-mobile-links a:hover, .nav-mobile-links a:active { color: var(--red); }
.nav-mobile-cta {
  font-family: var(--fb);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 12px 24px;
  border-radius: 4px;
  background: var(--red);
  color: #fff;
  display: inline-block;
}

/* ── Hero — mobile refinements ── */
@media (max-width: 768px) {
  .nav-hamburger { display: flex; }
  .nav-mobile-menu { display: flex; }
  .nav-links { display: none !important; }
  .nav-cta { display: none; }
  .live-pill { display: none; }

  .featured-title {
    font-size: clamp(3.5rem, 16vw, 5.5rem);
    line-height: 0.86;
  }
  .featured-logline { display: none; }
  .featured-host {
    font-size: 0.85rem;
    margin-bottom: 1rem;
  }
  .featured-content {
    padding: 2rem var(--gutter) 4rem;
  }
  .btn-watch, .btn-more {
    font-size: 0.75rem;
    padding: 0.65em 1.2em;
  }
  .featured-btns { gap: 0.5rem; }
}

@media (max-width: 480px) {
  .featured-title {
    font-size: clamp(3rem, 18vw, 4.5rem);
  }
  .featured-network { font-size: 0.58rem; margin-bottom: 0.5rem; }
  .featured-host { font-size: 0.78rem; }
  .featured-content { padding: 1.5rem 1.25rem 3.5rem; }
  .btn-watch, .btn-more { font-size: 0.7rem; padding: 0.6em 1em; }
}

/* ── Teaser wall — 2-col on tablet, 1-col small ── */
@media (max-width: 768px) {
  .teaser-wall { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .teaser-section { padding: 2.5rem var(--gutter) 3rem; }
}
@media (max-width: 400px) {
  .teaser-wall { grid-template-columns: 1fr; }
}

/* ── Anchors filmstrip — smaller cards on mobile ── */
@media (max-width: 768px) {
  .film-card { width: 260px; height: 390px; }
  .anchors-track { gap: 10px; padding: 6px 1.25rem 24px; }
  .anchors-fade--right { width: 60px; }
}
@media (max-width: 480px) {
  .film-card { width: 220px; height: 330px; }
  .anchors-track { gap: 8px; padding: 4px 1rem 20px; }
  .film-name { font-size: 0.75rem; }
  .film-role { font-size: 0.58rem; }
}

/* ── Distribution Partner (Bloom) — stack on mobile ── */
@media (max-width: 768px) {
  .partner-cinematic-inner {
    grid-template-columns: 1fr !important;
    gap: 2rem;
  }
  .partner-cinematic-portrait { display: none !important; }
  .partner-cinematic { min-height: 340px; }
  .partner-cinematic-content { padding: 2rem 1.5rem; }
  .partner-headline { font-size: clamp(2rem, 10vw, 3.5rem) !important; }
}

/* ── Clips (vertical 9:16 row) — smaller on mobile ── */
@media (max-width: 768px) {
  .clip-card--v2 { width: 150px; flex-shrink: 0; }
  .clip-thumb--v2 { width: 150px; height: 267px; }
  .clip-title--v2 { font-size: 0.68rem; max-width: 150px; }
  .clips-section { padding: 2rem 0 3rem; }
}
@media (max-width: 480px) {
  .clip-card--v2 { width: 130px; }
  .clip-thumb--v2 { width: 130px; height: 231px; }
  .clip-title--v2 { font-size: 0.62rem; max-width: 130px; }
}

/* ── Founding 8 — 2-col grid, smaller text ── */
@media (max-width: 768px) {
  .f8-section { padding: 2.5rem 0 3rem; }
  .f8-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    padding: 0 1.25rem;
  }
  .f8-name { font-size: 0.8rem; }
  .f8-host { font-size: 0.62rem; }
  .f8-ch { font-size: 0.5rem; }
}
@media (max-width: 400px) {
  .f8-row { padding: 0 0.75rem; gap: 6px !important; }
  .f8-name { font-size: 0.7rem; }
}

/* ── Network rows — smaller cards, keep horizontal scroll ── */
@media (max-width: 768px) {
  .nf-card { width: 240px; }
  .nf-thumb { width: 240px; height: 135px; }
  .nf-strip { gap: 8px; padding: 4px 1.25rem 16px; padding-right: 60px; }
  .nf-row-header { padding: 0 1.25rem; margin-bottom: 0.75rem; }
  .nf-row-label { font-size: 0.85rem !important; }
  .nf-title { font-size: 0.72rem; }
  .nf-sub { font-size: 0.6rem; }
  .nf-row-section { margin-bottom: 1.5rem; }
  .network-rows-wrap { padding: 2rem 0 3rem; }
}
@media (max-width: 480px) {
  .nf-card { width: 200px; }
  .nf-thumb { width: 200px; height: 113px; }
  .nf-strip { gap: 6px; padding: 4px 1rem 14px; padding-right: 50px; }
}

/* ── Row headers & section padding ── */
@media (max-width: 768px) {
  .row-header { padding: 0 1.25rem !important; }
  #on-air, #clips, #founding, #browse, #anchors {
    padding-left: 0;
    padding-right: 0;
  }
  .row-section { padding: 0 0 2rem; }
  .section-header, .anchors-header { padding: 0 1.25rem 1rem !important; }
  .anchors-title { font-size: 1.1rem !important; }
}

/* ── Join CTA ── */
@media (max-width: 768px) {
  .join-section { padding: 4rem 1.5rem; }
  .join-headline { font-size: clamp(2rem, 12vw, 3.5rem); }
  .join-sub { font-size: 0.85rem; }
  .btn-watch, .join-cta { font-size: 0.75rem; }
}
@media (max-width: 480px) {
  .join-headline { font-size: clamp(1.8rem, 14vw, 2.8rem); }
  .join-section { padding: 3rem 1.25rem; }
}

/* ── Footer ── */
@media (max-width: 768px) {
  .footer { padding: 2rem 1.25rem 1.5rem; }
  .footer-links { gap: 0.4rem 1rem; }
  .footer-links a { font-size: 0.65rem; }
}

/* ── Tap targets — all interactive elements min 44px touch ── */
@media (max-width: 768px) {
  .nf-card, .f8-card, .film-card, .clip-card--v2, .teaser-card {
    -webkit-tap-highlight-color: transparent;
  }
  .nav-cta, .btn-watch, .btn-more, .nav-mobile-links a {
    min-height: 44px;
  }
  /* Disable hover-scale on touch — prevents sticky states */
  .nf-card:hover { transform: none; }
  .f8-card:hover { transform: none; }
  .film-card:hover { transform: none; }
  .clip-card--v2:hover { transform: none; }
}

/* ── Teaser section heading — mobile ── */
@media (max-width: 768px) {
  .teaser-header .row-title,
  .teaser-section .row-title {
    font-size: 1.1rem !important;
  }
}

/* ── Prevent text overflow on all section titles ── */
@media (max-width: 768px) {
  .row-title, .anchors-title, .nf-row-label,
  .join-headline, .featured-title {
    word-break: break-word;
    hyphens: auto;
  }
}

/* ── Smooth scroll inertia on all touch-scroll containers ── */
.nf-strip,
.anchors-filmstrip-wrap,
.clip-row--v2 {
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.nf-card, .film-card, .clip-card--v2 {
  scroll-snap-align: start;
}



/* ═══════════════════════════════════════════════════════════════
   TBA ANCHOR CARD
═══════════════════════════════════════════════════════════════ */
.film-card--tba {
  cursor: default;
  pointer-events: none;
}
.film-tba-visual {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #0e0e0f 0%, #1a1a1c 100%);
  border: 1px solid rgba(255,255,255,0.06);
}
.film-tba-visual svg {
  width: 80px;
  height: 80px;
  opacity: 0.6;
}
.film-name--tba {
  color: rgba(255,255,255,0.35) !important;
  letter-spacing: 0.18em;
}
.film-card--tba .film-role {
  color: var(--red);
  opacity: 0.7;
}

/* ═══════════════════════════════════════════════════════════════
   DISTRIBUTION PARTNER — TBA SECTION
═══════════════════════════════════════════════════════════════ */
.partner-tba {
  background: #050607;
  border-top: 1px solid rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  padding: 5rem 4rem;
}
.partner-tba-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 4rem;
  align-items: center;
}
.partner-tba-left { display: flex; flex-direction: column; gap: 1.5rem; }
.partner-tba-headline {
  font-family: var(--fd);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.05;
  color: var(--text);
  letter-spacing: -0.02em;
}
.partner-tba-body {
  font-family: var(--fb);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--muted);
  max-width: 520px;
}
.partner-tba-slot {
  display: flex;
  align-items: center;
  justify-content: center;
}
.partner-tba-badge {
  width: 200px;
  height: 200px;
  border: 1px dashed rgba(255,255,255,0.12);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: rgba(255,255,255,0.02);
}
.partner-tba-badge svg { width: 60px; height: 60px; }
.partner-tba-label {
  font-family: var(--fb);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.25);
}

@media (max-width: 768px) {
  .partner-tba { padding: 3rem 1.5rem; }
  .partner-tba-inner { grid-template-columns: 1fr; gap: 2rem; }
  .partner-tba-slot { justify-content: flex-start; }
  .partner-tba-badge { width: 160px; height: 160px; }
  .partner-tba-headline { font-size: clamp(1.75rem, 8vw, 2.5rem); }
}