/* ════════════════════════════════════════════════════════════════
   NIGHT AIRWAVES · NEXT-GEN DESIGN SYSTEM
   Phase 5 redesign proposal.

   Goal: the show sounds like Coast to Coast AM with Art Bell —
   serious subjects, unapologetic atmosphere, professional craft.
   The website should carry that. This file is the design language.

   DESIGN PRINCIPLES
   ─────────────────
   1. Black first, green second. The void is the canvas; brand
      accents are placed, never flooded.
   2. Editorial typography. Cormorant Garamond for headlines
      (authority, nighttime, literary weight). JetBrains Mono for
      metadata (precision, broadcast feel). Inter for body (legibility).
   3. Atmospheric motion. Subtle animation that suggests signal,
      never distracts. Frequency bars, pulse dots, scan lines.
      Motion-reduce respected.
   4. Asymmetric layouts. Editorial, not corporate. Content leads,
      decoration follows.
   5. Negative space is credibility. Don't fill every slot.

   TOKEN SYSTEM
   ────────────
   All existing tokens (--void, --studio, --panel, etc.) still work.
   This file adds a refined ramp that sits on top without conflict.

   Loading order: site.css → design-system.css (this file)
   Selectors use .ds- prefix and new .nx- classes (already seeded
   from Phase 5 work) so nothing older is displaced.
   ════════════════════════════════════════════════════════════════ */

:root {
  /* ── Refined surface ramp (0 deepest → 5 highest) ─────── */
  --ds-bg-0:   #0C1017;    /* page ambient, deeper than current void */
  --ds-bg-1:   #141923;    /* primary surface (nav, hero bg) */
  --ds-bg-2:   #1A212F;    /* card surface */
  --ds-bg-3:   #232B3D;    /* raised (hover, active) */
  --ds-bg-4:   #2E3750;    /* elevated */
  --ds-bg-5:   #3B4562;    /* strong border / chip bg */

  /* ── Border ramp ──────────────────────────────────────── */
  --ds-line-1: rgba(255,255,255,.06);   /* whisper line */
  --ds-line-2: rgba(255,255,255,.10);   /* divider */
  --ds-line-3: rgba(255,255,255,.16);   /* strong divider / card edge */

  /* ── Brand accents — refined ramps ────────────────────── */
  --ds-green:      #4FD68C;    /* Brighter, more radio-signal */
  --ds-green-2:    #3BBB71;
  --ds-green-dim:  rgba(79,214,140,.10);
  --ds-green-edge: rgba(79,214,140,.28);
  --ds-green-glow: 0 0 40px rgba(79,214,140,.14);

  --ds-amber:      #E8B462;    /* Lifted for legibility */
  --ds-amber-dim:  rgba(232,180,98,.10);
  --ds-amber-edge: rgba(232,180,98,.28);

  --ds-red:        #E25E5E;
  --ds-red-dim:    rgba(226,94,94,.10);
  --ds-red-edge:   rgba(226,94,94,.28);

  /* ── Type ramp ────────────────────────────────────────── */
  --ds-ink:        #F2EEE8;    /* white */
  --ds-ink-2:      #D0D8E2;    /* body */
  --ds-ink-3:      #A2AFBD;    /* dim */
  --ds-ink-4:      #6B7B8D;    /* quiet meta */

  /* ── Motion timing ────────────────────────────────────── */
  --ds-ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --ds-ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ds-fast:       150ms;
  --ds-med:        260ms;
  --ds-slow:       420ms;

  /* ── Shadows — layered with atmosphere ────────────────── */
  --ds-shadow-soft:  0 1px 2px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.15);
  --ds-shadow-raise: 0 4px 16px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.2);
  --ds-shadow-float: 0 16px 48px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.3);

  /* ── Radii ────────────────────────────────────────────── */
  --ds-rad-sm: 4px;
  --ds-rad:    8px;
  --ds-rad-lg: 12px;
  --ds-rad-xl: 20px;
}

/* Respect motion preferences */
@media (prefers-reduced-motion: reduce) {
  :root {
    --ds-fast: 0ms;
    --ds-med: 0ms;
    --ds-slow: 0ms;
  }
}

/* ════════════════════════════════════════════════════════════════
   THE OPENING FRAME — the first thing a visitor sees
   Replaces the current hero. Black, big, confident.
   ════════════════════════════════════════════════════════════════ */

.ds-frame {
  position: relative;
  margin: 0 -20px;
  padding: 52px 20px 40px;
  background:
    radial-gradient(ellipse 120% 80% at 50% 0%, rgba(79,214,140,.05), transparent 60%);
  overflow: hidden;
}

@media (min-width: 860px) {
  .ds-frame {
    /* Phase 17: no frame, no border, no border-radius — let the hero breathe on the page */
    padding: 56px 0 48px;
    margin: 0;
  }
}

/* Scan-line texture across the top — signals "broadcast" */
.ds-frame::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(79,214,140,.12) 20%,
    rgba(79,214,140,.35) 50%,
    rgba(79,214,140,.12) 80%,
    transparent 100%);
  opacity: .6;
}

/* Frequency sweep animation — runs across the top bar continuously */
.ds-frame::after {
  content: '';
  position: absolute;
  top: 0; left: -30%;
  width: 30%;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--ds-green) 50%, transparent 100%);
  animation: ds-freq-sweep 8s linear infinite;
  pointer-events: none;
}

@keyframes ds-freq-sweep {
  0%, 10%   { left: -30%; opacity: 0; }
  15%       { opacity: 1; }
  85%       { opacity: 1; }
  90%, 100% { left: 130%; opacity: 0; }
}

/* ── FRAME META BAR (top: dateline + broadcast status) ─── */
.ds-frame-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ds-ink-3);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 28px;
}

.ds-frame-meta-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--ds-ink-4);
  flex-shrink: 0;
}

/* ── HEADLINE ────────────────────────────────────────── */
.ds-frame-headline {
  font-family: var(--serif);
  font-size: clamp(42px, 7vw, 84px);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--ds-ink);
  margin-bottom: 28px;
  max-width: 14ch;
}

.ds-frame-headline em {
  font-style: italic;
  font-weight: 600;
  color: var(--ds-green);
}

/* ── SUBHEAD ──────────────────────────────────────────── */
.ds-frame-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 2.2vw, 26px);
  line-height: 1.45;
  color: var(--ds-ink-2);
  max-width: 46ch;
  margin-bottom: 40px;
}

/* ── CTA ROW ──────────────────────────────────────────── */
.ds-frame-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ════════════════════════════════════════════════════════════════
   BUTTONS — confident, layered, responsive to touch
   ════════════════════════════════════════════════════════════════ */

.ds-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--ds-rad);
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background var(--ds-fast) var(--ds-ease),
    border-color var(--ds-fast) var(--ds-ease),
    transform var(--ds-fast) var(--ds-ease-out),
    box-shadow var(--ds-med) var(--ds-ease);
  white-space: nowrap;
  user-select: none;
}

.ds-btn:focus-visible {
  outline: 2px solid var(--ds-green);
  outline-offset: 3px;
}

.ds-btn-primary {
  background: var(--ds-green);
  color: #0A1810;
  box-shadow:
    0 4px 16px rgba(79,214,140,.22),
    inset 0 1px 0 rgba(255,255,255,.15);
}

.ds-btn-primary:hover {
  background: #5CDF96;
  box-shadow:
    0 8px 32px rgba(79,214,140,.35),
    inset 0 1px 0 rgba(255,255,255,.2);
  transform: translateY(-2px);
  text-decoration: none;
}

.ds-btn-primary:active { transform: translateY(0); }

.ds-btn-ghost {
  background: transparent;
  color: var(--ds-ink-2);
  border-color: var(--ds-line-3);
}

.ds-btn-ghost:hover {
  background: var(--ds-bg-2);
  color: var(--ds-green);
  border-color: var(--ds-green-edge);
  text-decoration: none;
}

.ds-btn-lg { padding: 18px 36px; font-size: 13px; }
.ds-btn-sm { padding: 10px 20px; font-size: 11px; }

/* ════════════════════════════════════════════════════════════════
   SECTION HEADS — editorial, with breath
   ════════════════════════════════════════════════════════════════ */

.ds-section {
  margin: 80px 0;
}

.ds-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 36px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--ds-line-2);
  position: relative;
}

/* Green-accented underline under the title */
.ds-section-head::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0;
  width: 48px; height: 2px;
  background: var(--ds-green);
  border-radius: 1px;
}

.ds-section-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--ds-green);
  text-transform: uppercase;
  margin-bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.ds-section-eyebrow::before {
  content: ''; display: block;
  width: 20px; height: 1px;
  background: var(--ds-green); opacity: .5;
}

.ds-section-title {
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ds-ink);
  max-width: 20ch;
}

.ds-section-lede {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: var(--ds-ink-3);
  line-height: 1.65;
  max-width: 56ch;
  margin-top: 12px;
}

.ds-section-link {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ds-green);
  text-decoration: none;
  flex-shrink: 0;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: border-color var(--ds-fast) var(--ds-ease);
}

.ds-section-link:hover {
  border-bottom-color: var(--ds-green);
  text-decoration: none;
}

/* ════════════════════════════════════════════════════════════════
   TRANSMISSION CARDS — the archive, made beautiful
   ════════════════════════════════════════════════════════════════ */

.ds-tx-list {
  border: 1px solid var(--ds-line-2);
  border-radius: var(--ds-rad-lg);
  overflow: hidden;
  background: var(--ds-bg-2);
}

.ds-tx-row {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  gap: 24px;
  padding: 22px 28px;
  border-bottom: 1px solid var(--ds-line-1);
  text-decoration: none;
  position: relative;
  transition: background var(--ds-med) var(--ds-ease);
}

.ds-tx-row:last-child { border-bottom: 0; }

.ds-tx-row::before {
  content: '';
  position: absolute;
  left: 0; top: 10%; bottom: 10%;
  width: 2px;
  background: var(--ds-green);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform var(--ds-med) var(--ds-ease-out);
}

.ds-tx-row:hover {
  background: var(--ds-bg-3);
  text-decoration: none;
}
.ds-tx-row:hover::before { transform: scaleY(1); }

.ds-tx-num {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ds-ink-4);
  letter-spacing: 0.08em;
  padding-top: 2px;
  white-space: nowrap;
}

.ds-tx-body { min-width: 0; }

.ds-tx-title {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--ds-ink);
  margin-bottom: 6px;
}

.ds-tx-row:hover .ds-tx-title { color: var(--ds-green); }

.ds-tx-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ds-ink-3);
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

.ds-tx-meta-guest {
  color: var(--ds-green);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ds-tx-meta-guest::before {
  content: '◆';
  font-size: 8px;
  opacity: 0.7;
}

.ds-tx-desc {
  font-size: 13.5px;
  color: var(--ds-ink-2);
  line-height: 1.6;
  max-width: 64ch;
}

.ds-tx-date {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ds-ink-3);
  letter-spacing: 0.04em;
  text-align: right;
  white-space: nowrap;
  padding-top: 4px;
}

@media (max-width: 640px) {
  .ds-tx-row { grid-template-columns: 1fr; gap: 10px; padding: 18px 20px; }
  .ds-tx-date { text-align: left; }
}

/* ════════════════════════════════════════════════════════════════
   CARD GRID — for articles, images, highlights
   ════════════════════════════════════════════════════════════════ */

.ds-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.ds-card {
  position: relative;
  background: var(--ds-bg-2);
  border: 1px solid var(--ds-line-2);
  border-radius: var(--ds-rad-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition:
    border-color var(--ds-med) var(--ds-ease),
    transform var(--ds-med) var(--ds-ease-out),
    box-shadow var(--ds-med) var(--ds-ease);
}

.ds-card:hover {
  border-color: var(--ds-green-edge);
  transform: translateY(-3px);
  box-shadow: var(--ds-shadow-raise);
  text-decoration: none;
}

.ds-card-media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ds-bg-3);
  overflow: hidden;
}

.ds-card-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--ds-slow) var(--ds-ease-out);
}

.ds-card:hover .ds-card-media img { transform: scale(1.04); }

.ds-card-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(12,16,23,.6) 100%);
  pointer-events: none;
}

.ds-card-body {
  padding: 20px 22px 22px;
  flex: 1;
  display: flex; flex-direction: column;
  gap: 10px;
}

.ds-card-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ds-green);
  text-transform: uppercase;
}

.ds-card-title {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--ds-ink);
}

.ds-card:hover .ds-card-title { color: var(--ds-green); }

.ds-card-lede {
  font-size: 13px;
  color: var(--ds-ink-2);
  line-height: 1.65;
  margin-top: auto;
}

.ds-card-meta {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--ds-line-1);
  display: flex;
  gap: 12px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ds-ink-3);
  letter-spacing: 0.04em;
}

/* ════════════════════════════════════════════════════════════════
   "HOLY SHIT" GUEST RECRUITMENT — the magnet for researchers
   This is the section that should make a UCSD parapsychologist
   say "yes, I want in".
   ════════════════════════════════════════════════════════════════ */

.ds-recruit {
  position: relative;
  margin: 80px 0;
  padding: 64px 48px;
  background:
    radial-gradient(ellipse 50% 80% at 85% 50%, rgba(79,214,140,.08), transparent 70%),
    radial-gradient(ellipse 40% 60% at 15% 20%, rgba(232,180,98,.05), transparent 70%),
    linear-gradient(135deg, var(--ds-bg-1) 0%, var(--ds-bg-0) 100%);
  border: 1px solid var(--ds-line-2);
  border-top: 2px solid var(--ds-green);
  border-radius: var(--ds-rad-xl);
  box-shadow: var(--ds-shadow-raise), var(--ds-green-glow);
  overflow: hidden;
}

/* Signal-scan line at top that tracks across on hover */
.ds-recruit::before {
  content: '';
  position: absolute;
  top: 0; left: -40%;
  width: 40%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--ds-green), transparent);
  animation: ds-freq-sweep 12s linear infinite;
  pointer-events: none;
}

.ds-recruit-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.ds-recruit-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--ds-green);
  text-transform: uppercase;
  margin-bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.ds-recruit-eyebrow::before {
  content: ''; display: block;
  width: 28px; height: 1px;
  background: var(--ds-green);
}

.ds-recruit-title {
  font-family: var(--serif);
  font-size: clamp(28px, 3.8vw, 40px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ds-ink);
  margin-bottom: 18px;
  max-width: 18ch;
}

.ds-recruit-lede {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ds-ink-2);
  max-width: 54ch;
  margin-bottom: 24px;
}

.ds-recruit-points {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 28px;
  max-width: 560px;
}

@media (max-width: 520px) {
  .ds-recruit-points { grid-template-columns: 1fr; }
}

.ds-recruit-point {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  color: var(--ds-ink-2);
  line-height: 1.5;
}

.ds-recruit-point::before {
  content: '✦';
  color: var(--ds-green);
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 1px;
}

.ds-recruit-aside {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}

@media (max-width: 860px) {
  .ds-recruit { padding: 44px 32px; }
  .ds-recruit-inner { grid-template-columns: 1fr; gap: 32px; }
  .ds-recruit-aside { align-items: stretch; }
}

/* ════════════════════════════════════════════════════════════════
   STAT STRIP — the social proof line
   ════════════════════════════════════════════════════════════════ */

.ds-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 48px 0;
  border: 1px solid var(--ds-line-2);
  border-radius: var(--ds-rad-lg);
  background: linear-gradient(180deg, var(--ds-bg-2) 0%, var(--ds-bg-1) 100%);
  overflow: hidden;
}

.ds-stat {
  padding: 32px 24px;
  text-align: center;
  border-right: 1px solid var(--ds-line-1);
  position: relative;
}

.ds-stat:last-child { border-right: 0; }

.ds-stat-num {
  font-family: var(--serif);
  font-size: 44px;
  font-weight: 700;
  color: var(--ds-ink);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}

.ds-stat-num em {
  font-style: normal;
  color: var(--ds-green);
  font-size: 0.55em;
  vertical-align: super;
  margin-left: 2px;
  letter-spacing: 0;
}

.ds-stat-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ds-ink-3);
  text-transform: uppercase;
}

@media (max-width: 720px) {
  .ds-stats { grid-template-columns: repeat(2, 1fr); }
  .ds-stat:nth-child(2) { border-right: 0; }
  .ds-stat:nth-child(-n+2) { border-bottom: 1px solid var(--ds-line-1); }
  .ds-stat-num { font-size: 34px; }
}

/* ════════════════════════════════════════════════════════════════
   QUOTE ROTATOR — atmosphere + social proof combined
   Rotates through show moments, listener quotes, standout lines
   ════════════════════════════════════════════════════════════════ */

.ds-rotator {
  padding: 60px 0 68px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.ds-rotator::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 50% 50%, rgba(79,214,140,.04), transparent 70%);
  pointer-events: none;
}

.ds-rotator-quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 2.6vw, 28px);
  line-height: 1.5;
  color: var(--ds-ink-2);
  max-width: 680px;
  margin: 0 auto 20px;
  letter-spacing: -0.005em;
  position: relative;
  z-index: 1;
  min-height: 3em;
  transition: opacity var(--ds-slow) var(--ds-ease);
}

.ds-rotator-quote.fading { opacity: 0; }

.ds-rotator-quote::before {
  content: '"';
  font-size: 60px;
  line-height: 0;
  vertical-align: -0.32em;
  color: var(--ds-green);
  opacity: .3;
  font-style: normal;
  margin-right: 8px;
}

.ds-rotator-attr {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ds-green);
  text-transform: uppercase;
  opacity: 0.8;
  position: relative;
  z-index: 1;
  transition: opacity var(--ds-slow) var(--ds-ease);
}

.ds-rotator-attr.fading { opacity: 0; }

.ds-rotator-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 24px;
  position: relative;
  z-index: 1;
}

.ds-rotator-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ds-ink-4);
  transition: background var(--ds-fast) var(--ds-ease), transform var(--ds-fast) var(--ds-ease);
  border: 0; padding: 0;
  cursor: pointer;
}

.ds-rotator-dot.active {
  background: var(--ds-green);
  transform: scale(1.4);
}

/* ════════════════════════════════════════════════════════════════
   BROADCAST STATUS LIVE CHIP — used in nav, hero, anywhere
   ════════════════════════════════════════════════════════════════ */

.ds-chip-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 10px;
  background: rgba(226,94,94,.12);
  border: 1px solid rgba(226,94,94,.32);
  border-radius: 14px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ds-red);
  text-transform: uppercase;
  white-space: nowrap;
}

.ds-chip-live::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ds-red);
  box-shadow:
    0 0 0 3px rgba(226,94,94,.15),
    0 0 12px rgba(226,94,94,.7);
  animation: ds-pulse 1.5s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes ds-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .55; transform: scale(1.2); }
}

.ds-chip-live.off-air {
  background: rgba(107,123,141,.08);
  border-color: rgba(107,123,141,.25);
  color: var(--ds-ink-3);
}

.ds-chip-live.off-air::before {
  background: var(--ds-ink-4);
  box-shadow: none;
  animation: none;
}

/* ════════════════════════════════════════════════════════════════
   HERO NOTABLES — show provenance strip
   "These conversations happened on this program" + name list
   ════════════════════════════════════════════════════════════════ */

.ds-frame-notables {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--ds-line-1);
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  align-items: start;
}

@media (max-width: 720px) {
  .ds-frame-notables { grid-template-columns: 1fr; gap: 14px; }
}

.ds-frame-notables-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ds-ink-4);
  text-transform: uppercase;
  line-height: 1.6;
  padding-top: 4px;
}

.ds-frame-notables-names {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}

.ds-frame-notable {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--ds-ink-3);
  white-space: nowrap;
  transition: color var(--ds-fast) var(--ds-ease);
}

.ds-frame-notable:not(:last-child)::after {
  content: '·';
  margin-left: 14px;
  color: var(--ds-line-3);
  font-weight: 700;
}

.ds-frame-notable:hover {
  color: var(--ds-green);
}

/* ════════════════════════════════════════════════════════════════
   EPISODE DETAIL HERO
   Editorial layout: art on the left, meta on the right.
   ════════════════════════════════════════════════════════════════ */

.ds-ep-hero {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
  align-items: start;
  margin-bottom: 48px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--ds-line-2);
  position: relative;
}

.ds-ep-hero::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0;
  width: 56px; height: 2px;
  background: var(--ds-green);
}

@media (max-width: 720px) {
  .ds-ep-hero { grid-template-columns: 1fr; gap: 24px; }
}

.ds-ep-hero-art {
  position: relative;
  border-radius: var(--ds-rad-lg);
  overflow: hidden;
  border: 1px solid var(--ds-line-3);
  aspect-ratio: 1 / 1;
  background: var(--ds-bg-2);
  box-shadow: var(--ds-shadow-raise);
}

.ds-ep-hero-art img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.ds-ep-hero-art-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, transparent 55%, rgba(12,16,23,.4) 100%),
    linear-gradient(180deg, transparent 65%, rgba(12,16,23,.35) 100%);
  pointer-events: none;
}

.ds-ep-hero-body {
  min-width: 0;
}

/* Eyebrow — show name / category / ep number */
.ds-ep-hero-eyebrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ds-ep-hero-show {
  color: var(--ds-green);
  font-weight: 700;
}

.ds-ep-hero-sep {
  color: var(--ds-line-3);
}

.ds-ep-hero-cat,
.ds-ep-hero-num {
  color: var(--ds-ink-3);
}

/* Title */
.ds-ep-hero-title {
  font-family: var(--serif);
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ds-ink);
  margin-bottom: 24px;
  max-width: 22ch;
}

/* Meta grid */
.ds-ep-hero-meta {
  display: grid;
  gap: 10px;
  margin: 0;
}

.ds-ep-hero-meta-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 2px 0;
}

.ds-ep-hero-meta-row dt {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--ds-ink-4);
  text-transform: uppercase;
}

.ds-ep-hero-meta-row dd {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--ds-ink);
  margin: 0;
  line-height: 1.4;
}

.ds-ep-hero-guest-link {
  color: var(--ds-green);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--ds-fast) var(--ds-ease);
}

.ds-ep-hero-guest-link:hover {
  border-bottom-color: var(--ds-green);
  text-decoration: none;
}

/* ════════════════════════════════════════════════════════════════
   BIO + LONG-FORM PROSE (about page, essay pages)
   ════════════════════════════════════════════════════════════════ */

.ds-bio-grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 48px;
  align-items: start;
}

@media (max-width: 780px) {
  .ds-bio-grid { grid-template-columns: 1fr; gap: 28px; }
}

.ds-bio-photo {
  position: sticky;
  top: 80px;
}

.ds-bio-photo img {
  width: 100%;
  aspect-ratio: 5 / 6;
  object-fit: cover;
  object-position: top;
  border-radius: var(--ds-rad-lg);
  border: 1px solid var(--ds-line-3);
  background: var(--ds-bg-2);
  display: block;
  box-shadow: var(--ds-shadow-raise);
}

.ds-bio-photo-placeholder {
  width: 100%;
  aspect-ratio: 5 / 6;
  border-radius: var(--ds-rad-lg);
  border: 1px solid var(--ds-line-3);
  background: var(--ds-bg-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 80px;
  font-weight: 700;
  color: var(--ds-green);
  opacity: 0.35;
}

.ds-bio-photo-caption {
  margin-top: 16px;
  padding: 16px 18px;
  background: var(--ds-bg-2);
  border: 1px solid var(--ds-line-2);
  border-radius: var(--ds-rad);
}

.ds-bio-photo-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--ds-green);
  margin-bottom: 6px;
}

.ds-bio-photo-name {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 700;
  color: var(--ds-ink);
  margin-bottom: 3px;
  line-height: 1.2;
}

.ds-bio-photo-from {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ds-ink-4);
}

/* Long-form prose — for about page, essays */
.ds-prose,
.ds-bio-body {
  max-width: 64ch;
}

.ds-prose p,
.ds-bio-body p {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.85;
  color: var(--ds-ink-2);
  margin-bottom: 22px;
  letter-spacing: -0.002em;
}

.ds-prose p:last-child,
.ds-bio-body p:last-child { margin-bottom: 0; }

.ds-prose em,
.ds-bio-body em {
  font-style: italic;
  color: var(--ds-ink);
}

.ds-prose strong,
.ds-bio-body strong {
  font-weight: 600;
  color: var(--ds-ink);
}

.ds-prose a,
.ds-bio-body a {
  color: var(--ds-green);
  text-decoration: none;
  border-bottom: 1px solid rgba(79,214,140,.3);
  transition: border-color var(--ds-fast) var(--ds-ease);
}

.ds-prose a:hover,
.ds-bio-body a:hover {
  border-bottom-color: var(--ds-green);
  text-decoration: none;
}

/* Pullquote — literary weight */
.ds-pullquote {
  margin: 28px 0;
  padding: 18px 26px;
  background: rgba(79,214,140,.05);
  border-left: 3px solid var(--ds-green);
  border-radius: 0 var(--ds-rad) var(--ds-rad) 0;
}

.ds-pullquote p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.55;
  color: var(--ds-ink);
  margin-bottom: 10px !important;
}

.ds-pullquote cite {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ds-green);
  text-transform: uppercase;
  font-style: normal;
  display: block;
}

/* ════════════════════════════════════════════════════════════════
   GUEST DETAIL HERO
   Per-guest accent color via CSS custom props: --gh-accent, --gh-accent-dim, --gh-accent-edge
   Set inline on the .ds-guest-hero element from PHP.
   ════════════════════════════════════════════════════════════════ */

.ds-guest-hero {
  position: relative;
  min-height: 300px;
  border-radius: var(--ds-rad-lg);
  overflow: hidden;
  margin-bottom: 40px;
  background: var(--ds-bg-2);
}

.ds-guest-hero-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.ds-guest-hero-bg-generated {
  background:
    radial-gradient(ellipse at 70% 30%, var(--gh-accent-dim, rgba(79,214,140,.18)) 0%, transparent 50%),
    linear-gradient(135deg, var(--ds-bg-3) 0%, var(--ds-bg-0) 100%);
}

/* Constellation-style initials backdrop when no photo/header */
.ds-guest-hero-initials {
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--serif);
  font-size: clamp(140px, 18vw, 220px);
  font-weight: 700;
  line-height: 1;
  color: var(--gh-accent, var(--ds-green));
  opacity: 0.06;
  user-select: none;
  pointer-events: none;
}

.ds-guest-hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(12,16,23,.3) 0%,
      rgba(12,16,23,.75) 65%,
      var(--ds-bg-0) 100%);
  pointer-events: none;
}

.ds-guest-hero-body {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  gap: 28px;
  padding: 50px 40px 32px;
  min-height: 300px;
}

.ds-guest-hero-photo {
  flex-shrink: 0;
  width: 130px;
  height: 130px;
  border-radius: var(--ds-rad);
  overflow: hidden;
  border: 2px solid rgba(255,255,255,0.12);
  box-shadow: var(--ds-shadow-raise);
  background: var(--ds-bg-3);
}

.ds-guest-hero-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}

.ds-guest-hero-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gh-accent-dim);
  border-color: var(--gh-accent-edge);
}

.ds-guest-hero-photo-placeholder span {
  font-family: var(--serif);
  font-size: 50px;
  font-weight: 700;
  color: var(--gh-accent);
  opacity: 0.85;
}

.ds-guest-hero-text {
  flex: 1;
  min-width: 0;
}

.ds-guest-hero-memoriam {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ds-ink-3);
  margin-bottom: 10px;
}

.ds-guest-hero-sep {
  color: var(--ds-line-3);
  margin: 0 6px;
}

.ds-guest-hero-cat {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--gh-accent);
  font-weight: 700;
  margin-bottom: 12px;
}

.ds-guest-hero-name {
  font-family: var(--serif);
  font-size: clamp(32px, 4.5vw, 48px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ds-ink);
  margin-bottom: 10px;
}

.ds-guest-hero-title {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: var(--ds-ink-2);
  margin-bottom: 14px;
  max-width: 52ch;
  line-height: 1.45;
}

.ds-guest-hero-count {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ds-ink-3);
}

@media (max-width: 640px) {
  .ds-guest-hero-body {
    flex-direction: column;
    align-items: flex-start;
    padding: 32px 24px 24px;
    gap: 18px;
  }
  .ds-guest-hero-photo { width: 96px; height: 96px; }
  .ds-guest-hero-initials { font-size: 120px; right: 20px; opacity: 0.04; }
}

/* ════════════════════════════════════════════════════════════════
   GUEST DETAIL BODY — 2-col layout with sticky sidebar
   ════════════════════════════════════════════════════════════════ */

.ds-guest-body {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 48px;
  align-items: start;
}

@media (max-width: 860px) {
  .ds-guest-body { grid-template-columns: 1fr; gap: 32px; }
}

.ds-guest-main { min-width: 0; }

.ds-guest-aside {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 24px;
}

@media (max-width: 860px) {
  .ds-guest-aside { position: static; }
}

/* Sidebar cards */
.ds-guest-card {
  background: var(--ds-bg-2);
  border: 1px solid var(--ds-line-2);
  border-radius: var(--ds-rad);
  padding: 18px 20px;
}

.ds-guest-card-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ds-ink-3);
  margin-bottom: 12px;
}

.ds-guest-card-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--ds-line-1);
  text-decoration: none;
  color: var(--ds-ink-2);
  font-family: var(--mono);
  font-size: 12px;
  transition: color var(--ds-fast) var(--ds-ease);
}

.ds-guest-card-link:last-child { border-bottom: 0; }

.ds-guest-card-link:hover {
  color: var(--ds-green);
  text-decoration: none;
}

.ds-guest-card-link-icon {
  font-size: 14px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.ds-guest-card-link-label {
  flex: 1;
}

.ds-guest-card-link-arrow {
  font-size: 10px;
  opacity: 0.5;
  transition: opacity var(--ds-fast) var(--ds-ease);
}

.ds-guest-card-link:hover .ds-guest-card-link-arrow {
  opacity: 1;
}

/* Sidebar card rows (details) */
.ds-guest-card-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid var(--ds-line-1);
  font-family: var(--mono);
  font-size: 11px;
}

.ds-guest-card-row:last-child { border-bottom: 0; }

.ds-guest-card-row-key {
  color: var(--ds-ink-3);
  letter-spacing: 0.04em;
}

.ds-guest-card-row-val {
  color: var(--ds-ink);
  font-weight: 500;
}

/* ════════════════════════════════════════════════════════════════
   POST / ARTICLE DETAIL (Graves After Dark)
   Editorial long-form layout with serif body, meta dots, author byline
   ════════════════════════════════════════════════════════════════ */

.ds-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--ds-ink-3);
  text-decoration: none;
  transition: color var(--ds-fast) var(--ds-ease);
}

.ds-back-link:hover {
  color: var(--ds-green);
  text-decoration: none;
}

.ds-post-header {
  margin-bottom: 48px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--ds-line-2);
  position: relative;
}

.ds-post-header::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0;
  width: 56px; height: 2px;
  background: var(--ds-amber);
}

.ds-post-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.ds-post-meta-item {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ds-ink-3);
}

.ds-post-meta-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ds-line-3);
  flex-shrink: 0;
}

.ds-post-title {
  font-family: var(--serif);
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ds-ink);
  margin-bottom: 18px;
  max-width: 22ch;
}

.ds-post-excerpt {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 2.2vw, 22px);
  color: var(--ds-ink-2);
  line-height: 1.55;
  max-width: 44ch;
  margin-bottom: 28px;
}

.ds-post-author {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
}

.ds-post-author-photo {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
  border: 1px solid var(--ds-line-3);
  flex-shrink: 0;
}

.ds-post-author-photo-placeholder {
  background: var(--ds-green);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ds-post-author-photo-placeholder span {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 700;
  color: #0A1810;
}

.ds-post-author-link {
  text-decoration: none;
}

.ds-post-author-name {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--ds-ink);
  line-height: 1.2;
  display: block;
}

.ds-post-author-title {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ds-ink-3);
  margin-top: 2px;
}

/* Long-form article body */
.ds-article-body {
  max-width: 68ch;
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.85;
  color: var(--ds-ink-2);
  letter-spacing: -0.002em;
}

.ds-article-body p {
  margin-bottom: 26px;
}

.ds-article-body h2 {
  font-family: var(--serif);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ds-ink);
  margin: 48px 0 16px;
}

.ds-article-body h3 {
  font-family: var(--serif);
  font-size: clamp(20px, 2.4vw, 24px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ds-ink);
  margin: 36px 0 14px;
}

.ds-article-body em {
  font-style: italic;
  color: var(--ds-ink);
}

.ds-article-body strong {
  font-weight: 600;
  color: var(--ds-ink);
}

.ds-article-body a {
  color: var(--ds-green);
  text-decoration: none;
  border-bottom: 1px solid rgba(79,214,140,.3);
  transition: border-color var(--ds-fast) var(--ds-ease);
}

.ds-article-body a:hover {
  border-bottom-color: var(--ds-green);
  text-decoration: none;
}

.ds-article-body blockquote {
  margin: 32px 0;
  padding: 20px 28px;
  background: rgba(79,214,140,.04);
  border-left: 3px solid var(--ds-green);
  border-radius: 0 var(--ds-rad) var(--ds-rad) 0;
  font-style: italic;
  color: var(--ds-ink);
}

.ds-article-body blockquote p:last-child { margin-bottom: 0; }

.ds-article-body ul,
.ds-article-body ol {
  margin: 22px 0 22px 28px;
  padding: 0;
}

.ds-article-body li {
  margin-bottom: 10px;
  padding-left: 6px;
}

.ds-article-body li::marker {
  color: var(--ds-green);
}

.ds-article-body code {
  font-family: var(--mono);
  font-size: 0.88em;
  padding: 2px 8px;
  background: var(--ds-bg-2);
  border: 1px solid var(--ds-line-2);
  border-radius: 4px;
  color: var(--ds-amber);
}

.ds-article-body pre {
  margin: 24px 0;
  padding: 20px;
  background: var(--ds-bg-1);
  border: 1px solid var(--ds-line-2);
  border-radius: var(--ds-rad);
  overflow-x: auto;
}

.ds-article-body pre code {
  padding: 0;
  background: none;
  border: none;
  color: var(--ds-ink-2);
  font-size: 13px;
  line-height: 1.7;
}

.ds-article-body hr {
  border: 0;
  height: 1px;
  background: var(--ds-line-2);
  margin: 48px auto;
  max-width: 200px;
}

.ds-article-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--ds-rad);
  margin: 28px 0;
}

/* Article footer */
.ds-post-footer {
  margin-top: 72px;
  padding-top: 32px;
  border-top: 1px solid var(--ds-line-2);
}

.ds-post-footer-kicker {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--ds-ink-3);
  margin-bottom: 18px;
}

.ds-post-footer-links {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}

.ds-post-footer-link {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ds-green);
  text-decoration: none;
  transition: color var(--ds-fast) var(--ds-ease);
}

.ds-post-footer-link:hover {
  color: var(--ds-ink);
  text-decoration: none;
}

.ds-post-footer-link-muted {
  color: var(--ds-ink-3);
}

/* ════════════════════════════════════════════════════════════════
   LISTEN PAGE
   Broadcast status cards — live / off-air / caller lines
   ════════════════════════════════════════════════════════════════ */

.ds-listen-card {
  position: relative;
  margin: 32px 0;
  border: 1px solid var(--ds-line-2);
  border-radius: var(--ds-rad-lg);
  background: linear-gradient(180deg, var(--ds-bg-2) 0%, var(--ds-bg-1) 100%);
  overflow: hidden;
  box-shadow: var(--ds-shadow-raise);
}

.ds-listen-live {
  border-color: rgba(226,94,94,.35);
  box-shadow: var(--ds-shadow-raise), 0 0 40px rgba(226,94,94,.12);
}

.ds-listen-offair {
  border-color: var(--ds-line-2);
  box-shadow: var(--ds-shadow-raise), var(--ds-green-glow);
}

.ds-listen-caller {
  border-color: rgba(232,180,98,.25);
  box-shadow: var(--ds-shadow-raise), 0 0 32px rgba(232,180,98,.08);
}

.ds-listen-card-body {
  padding: 40px 44px 32px;
}

.ds-listen-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--ds-green);
  text-transform: uppercase;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ds-listen-title {
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ds-ink);
  margin-bottom: 12px;
  max-width: 24ch;
}

.ds-listen-title-sm {
  font-size: clamp(22px, 3vw, 28px);
}

.ds-listen-sub {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--ds-ink-2);
  line-height: 1.55;
  margin-bottom: 14px;
  max-width: 48ch;
}

.ds-listen-when {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--ds-amber);
  font-weight: 500;
}

.ds-listen-actions {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.ds-listen-hint {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ds-ink-4);
}

.ds-listen-fallback {
  margin: 20px 0 0;
}

.ds-listen-fallback summary {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ds-ink-3);
  cursor: pointer;
  padding: 6px 0;
  transition: color var(--ds-fast) var(--ds-ease);
}

.ds-listen-fallback summary:hover { color: var(--ds-green); }

.ds-listen-footnote {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ds-ink-3);
  margin-top: 16px;
}

/* Push-notify sub-block (off-air only) */
.ds-listen-notify {
  border-top: 1px solid var(--ds-line-2);
  padding: 28px 44px;
  background: var(--ds-bg-3);
  display: flex;
  align-items: flex-start;
  gap: 28px;
  flex-wrap: wrap;
}

.ds-listen-notify-copy {
  flex: 1;
  min-width: 240px;
}

.ds-listen-notify-copy h3 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--ds-ink);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.ds-listen-notify-copy p {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--ds-ink-2);
  line-height: 1.7;
  margin-bottom: 8px;
  max-width: 52ch;
}

.ds-listen-notify-small {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ds-ink-4);
  display: block;
}

.ds-listen-notify-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

/* Secondary link row */
.ds-listen-secondary {
  border-top: 1px solid var(--ds-line-2);
  padding: 18px 44px;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.ds-listen-secondary-link {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ds-ink-3);
  text-decoration: none;
  transition: color var(--ds-fast) var(--ds-ease);
}

.ds-listen-secondary-link:hover {
  color: var(--ds-green);
  text-decoration: none;
}

/* Caller line tiles */
.ds-listen-caller-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin: 20px 0 4px;
}

.ds-listen-caller-tile {
  background: var(--ds-bg-3);
  border: 1px solid var(--ds-line-2);
  border-radius: var(--ds-rad);
  padding: 18px 22px;
  transition: border-color var(--ds-fast) var(--ds-ease), transform var(--ds-fast) var(--ds-ease-out);
}

.ds-listen-caller-tile:hover {
  border-color: var(--ds-amber-edge);
  transform: translateY(-2px);
}

.ds-listen-caller-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ds-ink-3);
  margin-bottom: 10px;
  text-transform: uppercase;
}

.ds-listen-caller-number {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ds-amber);
  text-decoration: none;
  display: block;
  line-height: 1;
  transition: color var(--ds-fast) var(--ds-ease);
}

.ds-listen-caller-number:hover {
  color: var(--ds-ink);
  text-decoration: none;
}

/* How to listen grid */
.ds-listen-how-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}

.ds-listen-how-tile {
  background: var(--ds-bg-2);
  border: 1px solid var(--ds-line-2);
  border-radius: var(--ds-rad);
  padding: 24px 26px;
  transition: border-color var(--ds-fast) var(--ds-ease);
}

.ds-listen-how-tile:hover {
  border-color: var(--ds-green-edge);
}

.ds-listen-how-label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ds-green);
  margin-bottom: 12px;
  text-transform: uppercase;
}

.ds-listen-how-body {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--ds-ink-2);
  line-height: 1.7;
}

/* Frequency sweep bar (reuse from hero) */
.ds-freq-bar {
  position: relative;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(79,214,140,.15) 15%,
    rgba(79,214,140,.45) 50%,
    rgba(79,214,140,.15) 85%,
    transparent 100%);
  overflow: hidden;
}

.ds-freq-bar::before {
  content: '';
  position: absolute;
  top: 0; left: -20%;
  width: 20%; height: 100%;
  background: linear-gradient(90deg, transparent 0%, var(--ds-ink) 50%, transparent 100%);
  animation: ds-freq-sweep 6s linear infinite;
  opacity: .5;
}

/* Responsive */
@media (max-width: 720px) {
  .ds-listen-card-body { padding: 28px 24px 22px; }
  .ds-listen-notify { padding: 22px 24px; flex-direction: column; }
  .ds-listen-secondary { padding: 14px 24px; gap: 18px; }
}

/* ════════════════════════════════════════════════════════════════
   EPISODES LIST — View toggle + filter row
   ════════════════════════════════════════════════════════════════ */

.ds-ep-view-toggle {
  display: flex;
  gap: 10px;
  margin-bottom: 32px;
}

.ds-ep-filter-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 16px;
}

.ds-ep-filter-input,
.ds-ep-filter-select {
  padding: 10px 14px;
  background: var(--ds-bg-2);
  border: 1px solid var(--ds-line-2);
  border-radius: var(--ds-rad);
  color: var(--ds-ink);
  font-size: 13px;
  font-family: var(--sans);
  transition: border-color var(--ds-fast) var(--ds-ease);
}

.ds-ep-filter-input {
  flex: 1;
  min-width: 220px;
  max-width: 300px;
}

.ds-ep-filter-select {
  cursor: pointer;
  min-width: 160px;
}

.ds-ep-filter-input:focus,
.ds-ep-filter-select:focus {
  outline: none;
  border-color: var(--ds-green-edge);
  box-shadow: 0 0 0 3px rgba(79,214,140,.12);
}

.ds-ep-filter-input::placeholder {
  color: var(--ds-ink-4);
}

.ds-ep-filter-count {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ds-ink-3);
  margin-bottom: 22px;
  min-height: 16px;
}

/* ════════════════════════════════════════════════════════════════
   NAP-PLAYER — Night Airwaves custom Captivate player
   Phase 7
   ════════════════════════════════════════════════════════════════ */

.nap-player {
  margin: 32px 0;
  position: relative;
  font-family: var(--sans);
}

.nap-player-audio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.nap-player-frame {
  background: linear-gradient(180deg, var(--ds-bg-2) 0%, var(--ds-bg-3) 100%);
  border: 1px solid var(--ds-line-2);
  border-radius: var(--ds-rad-lg);
  overflow: hidden;
  position: relative;
  box-shadow: var(--ds-shadow-raise);
}

.nap-player-frame::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(79,214,140,.4) 20%, rgba(79,214,140,.7) 50%, rgba(79,214,140,.4) 80%, transparent 100%);
  animation: nap-player-sweep 8s ease-in-out infinite;
}

@keyframes nap-player-sweep {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* Top row: art + meta + primary play */
.nap-player-top {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 20px 24px 16px;
}

.nap-player-art {
  width: 88px;
  height: 88px;
  border-radius: var(--ds-rad);
  overflow: hidden;
  border: 1px solid var(--ds-line-3);
  background: var(--ds-bg-3);
}

.nap-player-art img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.nap-player-art-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--ds-bg-2) 0%, var(--ds-bg-4) 100%);
}

.nap-player-art-placeholder span {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 700;
  color: var(--ds-green);
  opacity: 0.4;
  letter-spacing: 0.02em;
}

.nap-player-meta {
  min-width: 0;
}

.nap-player-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ds-green);
  font-weight: 700;
  margin-bottom: 6px;
}

.nap-player-title {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 700;
  color: var(--ds-ink);
  line-height: 1.25;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nap-player-chapter-label {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ds-ink-3);
  letter-spacing: 0.08em;
  margin-top: 4px;
  min-height: 14px;
  text-transform: uppercase;
}

.nap-player-primary {
  align-self: center;
}

.nap-player-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--ds-line-3);
  color: var(--ds-ink-2);
  border-radius: var(--ds-rad);
  padding: 8px 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background var(--ds-fast) var(--ds-ease),
              border-color var(--ds-fast) var(--ds-ease),
              color var(--ds-fast) var(--ds-ease);
}

.nap-player-btn:hover,
.nap-player-btn:focus-visible {
  background: rgba(79,214,140,0.08);
  border-color: var(--ds-green);
  color: var(--ds-ink);
  outline: none;
}

.nap-player-play {
  width: 54px; height: 54px;
  border-radius: 50%;
  padding: 0;
  background: var(--ds-green);
  color: var(--ds-bg-0);
  border-color: var(--ds-green);
  box-shadow: 0 0 0 4px rgba(79,214,140,0.12), 0 6px 20px rgba(79,214,140,0.25);
}

.nap-player-play:hover,
.nap-player-play:focus-visible {
  background: #5eeb9e;
  border-color: #5eeb9e;
  color: var(--ds-bg-0);
  box-shadow: 0 0 0 6px rgba(79,214,140,0.18), 0 8px 26px rgba(79,214,140,0.35);
}

.nap-player-play svg {
  margin-left: 2px;  /* Center the play triangle optically */
}

.nap-player-play .nap-icon-pause {
  margin-left: 0;
}

/* Waveform zone */
.nap-player-wave {
  position: relative;
  height: 72px;
  margin: 8px 24px 12px;
  cursor: pointer;
  background: var(--ds-bg-0);
  border-radius: var(--ds-rad-sm, 4px);
  overflow: hidden;
}

.nap-player-wave:focus-visible {
  outline: 2px solid var(--ds-green);
  outline-offset: 2px;
}

.nap-player-wave-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.nap-player-wave-buffer {
  position: absolute;
  left: 0; top: 0;
  height: 100%;
  width: 0;
  background: rgba(255,255,255,0.03);
  pointer-events: none;
  transition: width 0.2s linear;
}

.nap-player-wave-progress {
  position: absolute;
  left: 0; top: 0;
  height: 100%;
  width: 0;
  background: linear-gradient(180deg, rgba(79,214,140,0.05) 0%, rgba(79,214,140,0.15) 100%);
  pointer-events: none;
}

.nap-player-wave-playhead {
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  left: 0;
  background: var(--ds-amber);
  box-shadow: 0 0 8px rgba(232,180,98,0.6);
  pointer-events: none;
  transform: translateX(-1px);
  transition: left 0.12s linear;
}

.nap-player-wave-chapters {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.nap-player-wave-chapter {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: var(--ds-amber);
  opacity: 0.6;
}

.nap-player-wave-chapter::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  width: 7px; height: 7px;
  background: var(--ds-amber);
  border-radius: 50%;
}

/* Bottom row: time + transport + actions */
.nap-player-bottom {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 4px 24px 20px;
}

.nap-player-time {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ds-ink-2);
  letter-spacing: 0.04em;
}

.nap-player-time-current {
  color: var(--ds-green);
  font-weight: 600;
}

.nap-player-time-sep {
  color: var(--ds-line-3);
  margin: 0 6px;
}

.nap-player-transport {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.nap-player-skip-back,
.nap-player-skip-fwd {
  position: relative;
}

.nap-player-skip-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 8px;
  font-weight: 700;
  margin-top: 1px;
  pointer-events: none;
}

.nap-player-speed-label {
  font-weight: 600;
  min-width: 22px;
  text-align: center;
}

.nap-player-vol {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nap-player-vol-range {
  -webkit-appearance: none;
  appearance: none;
  width: 60px;
  height: 3px;
  background: var(--ds-line-2);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

.nap-player-vol-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 11px; height: 11px;
  background: var(--ds-green);
  border-radius: 50%;
  cursor: pointer;
}

.nap-player-vol-range::-moz-range-thumb {
  width: 11px; height: 11px;
  background: var(--ds-green);
  border-radius: 50%;
  cursor: pointer;
  border: 0;
}

.nap-player-actions {
  display: flex;
  gap: 8px;
}

/* Chapters drawer */
.nap-player-chapters-drawer {
  border-top: 1px solid var(--ds-line-2);
  padding: 14px 24px 18px;
  background: var(--ds-bg-1);
}

.nap-player-chapters-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ds-ink-3);
  font-weight: 700;
  margin-bottom: 10px;
}

.nap-player-chapters-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 4px;
}

.nap-player-chapter-item {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 14px;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 8px 10px;
  text-align: left;
  border-radius: var(--ds-rad-sm, 4px);
  cursor: pointer;
  transition: background var(--ds-fast) var(--ds-ease);
}

.nap-player-chapter-item:hover,
.nap-player-chapter-item:focus-visible {
  background: rgba(79,214,140,0.06);
  outline: none;
}

.nap-player-chapter-time {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ds-green);
  letter-spacing: 0.04em;
}

.nap-player-chapter-name {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--ds-ink);
}

/* Share popover */
.nap-player-share-pop {
  position: absolute;
  right: 24px;
  bottom: 60px;
  width: min(380px, calc(100% - 48px));
  background: var(--ds-bg-0);
  border: 1px solid var(--ds-line-3);
  border-radius: var(--ds-rad);
  padding: 14px 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
  z-index: 10;
}

.nap-player-share-pop-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--ds-ink-3);
  font-weight: 700;
  margin-bottom: 8px;
}

.nap-player-share-pop-url {
  width: 100%;
  background: var(--ds-bg-2);
  border: 1px solid var(--ds-line-2);
  color: var(--ds-ink);
  border-radius: var(--ds-rad-sm, 4px);
  padding: 8px 10px;
  font-family: var(--mono);
  font-size: 12px;
  outline: none;
}

.nap-player-share-pop-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}

.nap-player-share-pop-check {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ds-ink-2);
  cursor: pointer;
}

.nap-player-share-pop-t {
  color: var(--ds-green);
  font-weight: 600;
}

.nap-player-share-pop-copy {
  background: var(--ds-green);
  color: var(--ds-bg-0);
  border: 0;
  border-radius: var(--ds-rad-sm, 4px);
  padding: 6px 14px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background var(--ds-fast) var(--ds-ease);
}

.nap-player-share-pop-copy:hover {
  background: #5eeb9e;
}

/* Fallback iframe (shown when MP3 load fails) */
.nap-player-fallback {
  border-top: 1px solid var(--ds-line-2);
  padding: 14px 24px;
  background: var(--ds-bg-1);
}

.nap-player-fallback-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ds-amber);
  margin-bottom: 8px;
}

.nap-player-fallback-frame {
  width: 100%;
  height: 180px;
  border: 0;
  border-radius: var(--ds-rad-sm, 4px);
}

.nap-player-failed .nap-player-wave,
.nap-player-failed .nap-player-bottom {
  opacity: 0.5;
  pointer-events: none;
}

/* Responsive */
/* ════════════════════════════════════════════════════════════════
   NAP-PLAYER — MOBILE POLISH (Phase 8)

   Breakpoints:
     ≤ 760px   compact layout (tablets, large phones)
     ≤ 480px   phone layout (art in row with play, controls condensed)

   Design principles:
     - Every interactive target ≥ 44×44px (iOS minimum)
     - Waveform shorter (56px) so thumb can reach it
     - Bottom sheets on mobile (share + chapters) with grab handle
     - Swipe-down-to-dismiss on bottom sheets
     - Sticky mini-player pins after scroll-past
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 760px) {
  .nap-player-top {
    grid-template-columns: 72px 1fr auto;
    padding: 18px 18px 14px;
    gap: 14px;
  }
  .nap-player-art { width: 72px; height: 72px; }
  .nap-player-title {
    font-size: 16px;
    line-height: 1.3;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .nap-player-wave { margin: 6px 18px 10px; height: 56px; }
  .nap-player-wave-canvas { height: 56px; }
  .nap-player-bottom {
    grid-template-columns: 1fr;
    padding: 4px 18px 18px;
    gap: 12px;
  }
  .nap-player-time { text-align: center; }
  .nap-player-transport {
    justify-content: center;
    gap: 4px;
  }
  .nap-player-actions {
    justify-content: center;
  }

  /* 44×44 minimum touch targets */
  .nap-player-btn {
    min-width: 44px;
    min-height: 44px;
  }
  .nap-player-play {
    width: 52px;
    height: 52px;
  }

  /* Volume on mobile: hide slider, keep toggle button */
  .nap-player-vol-range { display: none; }
}

@media (max-width: 480px) {
  /* Phone: meta gets its own row, art + play stay side-by-side above */
  .nap-player-top {
    grid-template-columns: 56px 1fr auto;
    padding: 14px 14px 10px;
    gap: 12px;
  }
  .nap-player-art { width: 56px; height: 56px; }
  .nap-player-eyebrow { font-size: 9px; margin-bottom: 3px; }
  .nap-player-title { font-size: 15px; -webkit-line-clamp: 2; }
  .nap-player-chapter-label { font-size: 9px; margin-top: 3px; }

  .nap-player-primary {
    align-self: center;
  }
  .nap-player-play {
    width: 48px;
    height: 48px;
  }

  .nap-player-wave { margin: 4px 14px 8px; height: 48px; }
  .nap-player-wave-canvas { height: 48px; }

  .nap-player-bottom {
    padding: 4px 14px 14px;
    gap: 10px;
  }

  /* Transport: hide speed on very small screens (still accessible via double-tap later) */
  .nap-player-skip-label { font-size: 7px; }

  /* Actions: compact — icons only, no text labels on phone */
  .nap-player-actions .nap-player-btn span:not(.nap-player-skip-label) {
    display: none;
  }
  .nap-player-actions .nap-player-btn {
    padding: 0 12px;
  }
}

/* ───────────────────────────────────────────────────────────────
   BOTTOM SHEETS — share + chapters slide up from bottom on mobile
   Use the .nap-sheet class on mobile only via matchMedia in JS
   ─────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .nap-player-share-pop {
    position: fixed;
    inset: auto 0 0 0;
    width: 100%;
    max-width: none;
    border-radius: 16px 16px 0 0;
    padding: 8px 18px 28px;
    box-shadow: 0 -10px 40px rgba(0,0,0,0.6);
    border-bottom: 0;
    z-index: 9999;
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(.2,.9,.2,1);
  }
  .nap-player-share-pop:not([hidden]) {
    transform: translateY(0);
  }
  /* Grab handle */
  .nap-player-share-pop::before {
    content: '';
    display: block;
    width: 36px; height: 4px;
    background: var(--ds-line-3);
    border-radius: 2px;
    margin: 0 auto 14px;
  }
  .nap-player-share-pop-label {
    text-align: center;
    margin-bottom: 12px;
  }
  .nap-player-share-pop-url {
    padding: 12px 14px;
    font-size: 13px;
  }
  .nap-player-share-pop-copy {
    padding: 10px 18px;
    font-size: 12px;
    min-height: 44px;
  }

  /* Chapters drawer also becomes a bottom sheet on mobile */
  .nap-player-chapters-drawer {
    position: fixed;
    inset: auto 0 0 0;
    max-height: 70vh;
    overflow-y: auto;
    border-top: 0;
    border-radius: 16px 16px 0 0;
    padding: 10px 18px 28px;
    box-shadow: 0 -10px 40px rgba(0,0,0,0.6);
    z-index: 9998;
    background: var(--ds-bg-1);
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(.2,.9,.2,1);
    -webkit-overflow-scrolling: touch;
  }
  .nap-player-chapters-drawer:not([hidden]) {
    transform: translateY(0);
  }
  .nap-player-chapters-drawer::before {
    content: '';
    display: block;
    width: 36px; height: 4px;
    background: var(--ds-line-3);
    border-radius: 2px;
    margin: 0 auto 14px;
    position: sticky;
    top: 0;
  }
  .nap-player-chapters-label {
    text-align: center;
    margin-bottom: 12px;
  }
  .nap-player-chapter-item {
    padding: 12px 10px;
    min-height: 44px;
  }
  .nap-player-chapter-name { font-size: 15px; }

  /* Backdrop for bottom sheets */
  .nap-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9997;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
  .nap-sheet-backdrop.active {
    opacity: 1;
    pointer-events: auto;
  }
}

/* ───────────────────────────────────────────────────────────────
   STICKY MINI-PLAYER — pinned to bottom of viewport on scroll
   Appears when the main .nap-player scrolls out of view.
   Body gets .nap-mini-active when visible to add bottom padding.
   ─────────────────────────────────────────────────────────────── */

.nap-mini {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  background: rgba(12, 16, 23, 0.92);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-top: 1px solid var(--ds-line-2);
  box-shadow: 0 -8px 32px rgba(0,0,0,0.45);
  transform: translateY(110%);
  transition: transform 0.28s cubic-bezier(.2,.9,.2,1);
  pointer-events: none;
}

.nap-mini.active {
  transform: translateY(0);
  pointer-events: auto;
}

.nap-mini-inner {
  max-width: 920px;
  margin: 0 auto;
  padding: 10px 16px;
  display: grid;
  grid-template-columns: 44px 1fr auto auto;
  gap: 12px;
  align-items: center;
}

.nap-mini-art {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--ds-bg-3);
  flex-shrink: 0;
}

.nap-mini-art img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.nap-mini-art-placeholder {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--ds-green);
  opacity: 0.4;
}

.nap-mini-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.nap-mini-title {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 700;
  color: var(--ds-ink);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nap-mini-sub {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ds-ink-3);
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nap-mini-sub .nap-mini-sub-current {
  color: var(--ds-green);
  font-weight: 600;
}

.nap-mini-play {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  padding: 0;
  background: var(--ds-green);
  color: var(--ds-bg-0);
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--ds-fast) var(--ds-ease);
}

.nap-mini-play:hover,
.nap-mini-play:focus-visible {
  background: #5eeb9e;
  outline: none;
}

.nap-mini-play svg { display: block; }
.nap-mini-play .nap-icon-play { margin-left: 2px; }

.nap-mini-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--ds-ink-3);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--ds-fast) var(--ds-ease), color var(--ds-fast) var(--ds-ease);
}

.nap-mini-close:hover,
.nap-mini-close:focus-visible {
  background: rgba(255,255,255,0.06);
  color: var(--ds-ink);
  outline: none;
}

.nap-mini-progress {
  position: absolute;
  left: 0;
  top: 0;
  height: 2px;
  background: var(--ds-green);
  width: 0;
  transition: width 0.12s linear;
  box-shadow: 0 0 6px rgba(79,214,140,0.6);
}

body.nap-mini-active {
  padding-bottom: 68px;
}

@media (max-width: 480px) {
  .nap-mini-inner {
    grid-template-columns: 36px 1fr auto auto;
    padding: 8px 12px;
    gap: 10px;
  }
  .nap-mini-art { width: 36px; height: 36px; }
  .nap-mini-title { font-size: 13px; }
  .nap-mini-sub { font-size: 9px; }
  body.nap-mini-active { padding-bottom: 60px; }
}

/* ════════════════════════════════════════════════════════════════
   NAP-PLAYER — Signal Room member badge
   Shown above the Captivate player to signal this is member-exclusive audio.
   ════════════════════════════════════════════════════════════════ */

.nap-member-badge-wrap {
  margin: 24px 0 -8px;
  display: flex;
  justify-content: flex-start;
}

.nap-member-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: var(--ds-green);
  background: rgba(79, 214, 140, 0.08);
  border: 1px solid rgba(79, 214, 140, 0.3);
  padding: 6px 12px;
  border-radius: var(--ds-rad-sm, 4px);
  text-transform: uppercase;
}

/* ════════════════════════════════════════════════════════════════
   MEMBER RAIL — Phase 9
   Persistent navigation for Signal Room members.
   Desktop: sticky left rail · Mobile: bottom tab bar
   ════════════════════════════════════════════════════════════════ */

/* ── DESKTOP RAIL (≥ 960px) ── */
.mr-rail {
  display: none;
  position: sticky;
  top: 88px;
  width: 220px;
  flex-shrink: 0;
  align-self: flex-start;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  padding: 24px 0;
}

@media (min-width: 960px) {
  .mr-rail { display: block; }
}

.mr-rail-inner {
  border-right: 1px solid var(--ds-line-1);
  padding-right: 20px;
  padding-left: 4px;
}

.mr-rail-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 10px 18px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--ds-line-1);
}

.mr-rail-brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(79,214,140,0.15), rgba(79,214,140,0.05));
  border: 1px solid rgba(79,214,140,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ds-green);
  font-size: 14px;
  flex-shrink: 0;
}

.mr-rail-brand-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--ds-green);
  line-height: 1;
  margin-bottom: 4px;
}

.mr-rail-brand-email {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ds-ink-3);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

.mr-rail-list {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mr-rail-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--ds-ink-2);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  transition: background var(--ds-fast) var(--ds-ease), color var(--ds-fast) var(--ds-ease);
  position: relative;
}

.mr-rail-link:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--ds-ink);
  text-decoration: none;
}

.mr-rail-link-active {
  background: rgba(79, 214, 140, 0.08);
  color: var(--ds-green);
}

.mr-rail-link-active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  background: var(--ds-green);
  border-radius: 0 2px 2px 0;
}

.mr-rail-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  opacity: 0.85;
}

.mr-rail-link-active .mr-rail-icon {
  opacity: 1;
}

.mr-rail-label {
  flex: 1;
}

.mr-rail-footer {
  padding: 14px 12px 0;
  border-top: 1px solid var(--ds-line-1);
}

.mr-rail-logout {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ds-ink-4);
  text-decoration: none;
  transition: color var(--ds-fast) var(--ds-ease);
}

.mr-rail-logout:hover {
  color: var(--ds-ink-2);
  text-decoration: none;
}

/* ── MOBILE TAB BAR (< 960px) ── */
.mr-tabs {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 890;
  background: rgba(12, 16, 23, 0.92);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-top: 1px solid var(--ds-line-2);
  padding: 6px 0 calc(8px + env(safe-area-inset-bottom, 0px));
  justify-content: space-around;
}

@media (max-width: 959px) {
  .mr-tabs { display: flex; }
  body.mr-active { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
  body.mr-active.nap-mini-active { padding-bottom: calc(130px + env(safe-area-inset-bottom, 0px)); }
}

/* Mini-player sits above the tab bar when member is logged in */
body.mr-active .nap-mini {
  bottom: calc(64px + env(safe-area-inset-bottom, 0px));
}

.mr-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 4px;
  text-decoration: none;
  color: var(--ds-ink-3);
  transition: color var(--ds-fast) var(--ds-ease);
  min-height: 52px;
  position: relative;
}

.mr-tab:hover { color: var(--ds-ink); text-decoration: none; }

.mr-tab-active {
  color: var(--ds-green);
}

.mr-tab-active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 2px;
  background: var(--ds-green);
  border-radius: 0 0 2px 2px;
  transform: translateX(-50%);
}

.mr-tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
}

.mr-tab-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  font-weight: 500;
  line-height: 1;
}

/* ── When member rail is active, shift page container to accommodate ── */
@media (min-width: 960px) {
  body.mr-active .container {
    display: flex;
    gap: 40px;
    align-items: flex-start;
  }
  body.mr-active .mr-main-wrap {
    flex: 1;
    min-width: 0;
  }
}

/* Brand header mark for members */
.mr-brand-mark {
  display: none;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--ds-green);
  padding: 3px 8px;
  border: 1px solid rgba(79, 214, 140, 0.35);
  border-radius: 12px;
  background: rgba(79, 214, 140, 0.06);
}

body.mr-active .mr-brand-mark { display: inline-flex; }

/* Admin variant: amber accent instead of green, to signal staff context */
.mr-rail-brand-mark-admin {
  background: linear-gradient(135deg, rgba(232, 180, 98, 0.18), rgba(232, 180, 98, 0.06));
  border-color: rgba(232, 180, 98, 0.4);
  color: var(--ds-amber);
}
.mr-rail-brand-label-admin {
  color: var(--ds-amber);
}

/* ════════════════════════════════════════════════════════════════
   SIDEBAR LOGIN + PREMIUM CARD — Phase 9
   Unified sign-in card (non-premium) / welcome card (premium).
   Lives in the homepage sidebar. Matches .ds-frame aesthetic.
   ════════════════════════════════════════════════════════════════ */

/* ── Shared card shell ── */
.sb-login-card,
.sb-premium-card {
  background: linear-gradient(180deg, var(--ds-bg-2) 0%, var(--ds-bg-3) 100%);
  border: 1px solid var(--ds-line-2);
  border-radius: var(--ds-rad);
  padding: 18px 18px 20px;
  margin-bottom: 22px;
  position: relative;
  overflow: hidden;
}

.sb-login-card::before,
.sb-premium-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(79,214,140,.5) 30%, rgba(79,214,140,.7) 50%, rgba(79,214,140,.5) 70%, transparent 100%);
}

.sb-premium-card-admin::before {
  background: linear-gradient(90deg, transparent 0%, rgba(232,180,98,.5) 30%, rgba(232,180,98,.7) 50%, rgba(232,180,98,.5) 70%, transparent 100%);
}

/* ── Login card tabs ── */
.sb-login-tabs {
  display: flex;
  gap: 0;
  margin: -18px -18px 18px;
  border-bottom: 1px solid var(--ds-line-2);
}

.sb-login-tab {
  flex: 1;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 14px 10px;
  color: var(--ds-ink-2);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0.78;
  transition: color var(--ds-fast) var(--ds-ease),
              opacity var(--ds-fast) var(--ds-ease),
              border-color var(--ds-fast) var(--ds-ease),
              background var(--ds-fast) var(--ds-ease);
}

.sb-login-tab:hover {
  color: var(--ds-ink);
  opacity: 1;
  background: rgba(255,255,255,0.02);
}

.sb-login-tab-active {
  color: var(--ds-green);
  border-bottom-color: var(--ds-green);
  opacity: 1;
}

/* ── Login card panes ── */
.sb-login-pane {
  display: none;
}

.sb-login-pane-active {
  display: block;
}

.sb-login-hint {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ds-ink-4);
  margin: 0 0 14px;
  text-transform: uppercase;
}

.sb-login-err {
  background: rgba(220, 90, 90, 0.08);
  border: 1px solid rgba(220, 90, 90, 0.3);
  border-radius: var(--ds-rad-sm, 4px);
  padding: 10px 12px;
  color: #f2a2a2;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.4;
  margin-bottom: 14px;
}

.sb-login-form {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sb-login-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--ds-ink-4);
  font-weight: 700;
  text-transform: uppercase;
  margin: 8px 0 2px;
}

.sb-login-input {
  background: var(--ds-bg-0);
  border: 1px solid var(--ds-line-3);
  color: var(--ds-ink);
  padding: 10px 12px;
  font-family: var(--sans);
  font-size: 14px;
  border-radius: var(--ds-rad-sm, 4px);
  outline: none;
  transition: border-color var(--ds-fast) var(--ds-ease),
              box-shadow var(--ds-fast) var(--ds-ease);
  width: 100%;
  box-sizing: border-box;
}

.sb-login-input:focus {
  border-color: var(--ds-green);
  box-shadow: 0 0 0 3px rgba(79, 214, 140, 0.15);
}

.sb-login-submit {
  margin-top: 16px;
  background: var(--ds-green);
  color: var(--ds-bg-0);
  border: 0;
  padding: 12px 18px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--ds-rad-sm, 4px);
  cursor: pointer;
  transition: background var(--ds-fast) var(--ds-ease);
  min-height: 44px;
}

.sb-login-submit:hover,
.sb-login-submit:focus-visible {
  background: #5eeb9e;
  outline: none;
}

.sb-login-footer {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--ds-line-1);
  text-align: center;
}

.sb-login-footer a {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ds-ink-3);
  text-decoration: none;
  text-transform: uppercase;
}

.sb-login-footer a:hover {
  color: var(--ds-green);
  text-decoration: none;
}

/* ── Premium welcome card (logged in) ── */
.sb-premium-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.sb-premium-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ds-green);
  box-shadow: 0 0 8px rgba(79, 214, 140, 0.6);
  animation: sb-premium-dot-pulse 2.5s ease-in-out infinite;
  flex-shrink: 0;
}

.sb-premium-card-admin .sb-premium-dot {
  background: var(--ds-amber);
  box-shadow: 0 0 8px rgba(232, 180, 98, 0.6);
}

@keyframes sb-premium-dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.6; transform: scale(0.85); }
}

.sb-premium-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--ds-green);
  text-transform: uppercase;
}

.sb-premium-card-admin .sb-premium-label {
  color: var(--ds-amber);
}

.sb-premium-title {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 700;
  color: var(--ds-ink);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}

.sb-premium-sub {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ds-ink-3);
  line-height: 1.5;
  margin: 0 0 16px;
}

.sb-premium-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sb-premium-cta {
  display: block;
  background: var(--ds-green);
  color: var(--ds-bg-0);
  padding: 12px 16px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  border-radius: var(--ds-rad-sm, 4px);
  text-decoration: none;
  transition: background var(--ds-fast) var(--ds-ease);
}

.sb-premium-cta:hover,
.sb-premium-cta:focus-visible {
  background: #5eeb9e;
  text-decoration: none;
  outline: none;
}

.sb-premium-card-admin .sb-premium-cta {
  background: var(--ds-amber);
  color: var(--ds-bg-0);
}

.sb-premium-card-admin .sb-premium-cta:hover {
  background: #f1c47a;
}

.sb-premium-alt {
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ds-ink-3);
  text-decoration: none;
  padding: 6px;
}

.sb-premium-alt:hover {
  color: var(--ds-green);
  text-decoration: none;
}

.sb-premium-card-admin .sb-premium-alt:hover {
  color: var(--ds-amber);
}

/* ════════════════════════════════════════════════════════════════
   SIDEBAR LOGIN CARD + PREMIUM CARD — Phase 9
   Unified auth UI: Join/Sign In tabs for non-premium,
   welcome card for admin + members.
   ════════════════════════════════════════════════════════════════ */

/* ── Login card (non-premium) ── */
.sb-login-card {
  background: linear-gradient(180deg, var(--ds-bg-2) 0%, var(--ds-bg-3) 100%);
  border: 1px solid var(--ds-line-2);
  border-radius: var(--ds-rad);
  padding: 0;
  margin-bottom: 22px;
  overflow: hidden;
  position: relative;
}

.sb-login-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(79,214,140,0.6), transparent);
}

.sb-login-tabs {
  display: flex;
  border-bottom: 1px solid var(--ds-line-1);
}

.sb-login-tab {
  flex: 1;
  background: transparent;
  border: 0;
  padding: 12px 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--ds-ink-2);
  opacity: 0.78;
  cursor: pointer;
  transition: color var(--ds-fast) var(--ds-ease), opacity var(--ds-fast) var(--ds-ease), background var(--ds-fast) var(--ds-ease);
  position: relative;
}

.sb-login-tab:hover {
  color: var(--ds-ink);
  opacity: 1;
}

.sb-login-tab-active {
  color: var(--ds-green);
  background: rgba(79,214,140,0.04);
  opacity: 1;
}

.sb-login-tab-active::after {
  content: '';
  position: absolute;
  left: 20%; right: 20%;
  bottom: -1px;
  height: 2px;
  background: var(--ds-green);
}

.sb-login-pane {
  display: none;
  padding: 20px 18px;
}

.sb-login-pane-active {
  display: block;
}

.sb-login-hint {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ds-ink-3);
  letter-spacing: 0.04em;
  margin: 0 0 14px;
  text-align: center;
}

.sb-login-err {
  background: rgba(232, 100, 100, 0.08);
  border: 1px solid rgba(232, 100, 100, 0.3);
  color: #e88;
  font-family: var(--mono);
  font-size: 11px;
  padding: 8px 10px;
  border-radius: var(--ds-rad-sm, 4px);
  margin-bottom: 12px;
}

.sb-login-form {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sb-login-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--ds-ink-3);
  margin-top: 8px;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.sb-login-input {
  background: var(--ds-bg-0);
  border: 1px solid var(--ds-line-2);
  color: var(--ds-ink);
  border-radius: var(--ds-rad-sm, 4px);
  padding: 10px 12px;
  font-family: var(--sans);
  font-size: 14px;
  outline: none;
  transition: border-color var(--ds-fast) var(--ds-ease);
}

.sb-login-input:focus {
  border-color: var(--ds-green);
  box-shadow: 0 0 0 3px rgba(79,214,140,0.12);
}

.sb-login-submit {
  margin-top: 14px;
  background: var(--ds-green);
  color: var(--ds-bg-0);
  border: 0;
  border-radius: var(--ds-rad-sm, 4px);
  padding: 11px 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--ds-fast) var(--ds-ease);
}

.sb-login-submit:hover,
.sb-login-submit:focus-visible {
  background: #5eeb9e;
  outline: none;
}

.sb-login-footer {
  text-align: center;
  margin-top: 12px;
}

.sb-login-footer a {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ds-ink-3);
  text-decoration: none;
  letter-spacing: 0.04em;
  border-bottom: 1px solid transparent;
  transition: color var(--ds-fast) var(--ds-ease), border-color var(--ds-fast) var(--ds-ease);
}

.sb-login-footer a:hover {
  color: var(--ds-ink);
  border-bottom-color: var(--ds-line-3);
}

/* ── Premium card (admin or member logged in) ── */
.sb-premium-card {
  background: linear-gradient(180deg, rgba(79,214,140,0.06) 0%, var(--ds-bg-3) 100%);
  border: 1px solid rgba(79,214,140,0.35);
  border-radius: var(--ds-rad);
  padding: 20px 18px;
  margin-bottom: 22px;
  position: relative;
  overflow: hidden;
}

.sb-premium-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(79,214,140,0.7), transparent);
}

.sb-premium-card-admin {
  background: linear-gradient(180deg, rgba(232,180,98,0.06) 0%, var(--ds-bg-3) 100%);
  border-color: rgba(232,180,98,0.35);
}

.sb-premium-card-admin::before {
  background: linear-gradient(90deg, transparent, rgba(232,180,98,0.7), transparent);
}

.sb-premium-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-bottom: 12px;
}

.sb-premium-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ds-green);
  box-shadow: 0 0 8px rgba(79,214,140,0.6);
  animation: pulse 2s infinite;
}

.sb-premium-card-admin .sb-premium-dot {
  background: var(--ds-amber);
  box-shadow: 0 0 8px rgba(232,180,98,0.6);
}

.sb-premium-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: var(--ds-green);
}

.sb-premium-card-admin .sb-premium-label {
  color: var(--ds-amber);
}

.sb-premium-title {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 700;
  color: var(--ds-ink);
  margin: 0 0 4px;
  line-height: 1.25;
  text-align: center;
}

.sb-premium-sub {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ds-ink-3);
  margin: 0 0 16px;
  text-align: center;
  line-height: 1.5;
}

.sb-premium-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sb-premium-cta {
  display: block;
  text-align: center;
  background: var(--ds-green);
  color: var(--ds-bg-0);
  border: 0;
  border-radius: var(--ds-rad-sm, 4px);
  padding: 11px 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  font-weight: 700;
  text-decoration: none;
  transition: background var(--ds-fast) var(--ds-ease);
}

.sb-premium-cta:hover {
  background: #5eeb9e;
  text-decoration: none;
}

.sb-premium-card-admin .sb-premium-cta {
  background: var(--ds-amber);
}

.sb-premium-card-admin .sb-premium-cta:hover {
  background: #f3c677;
}

.sb-premium-alt {
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ds-ink-3);
  text-decoration: none;
  padding: 4px;
  transition: color var(--ds-fast) var(--ds-ease);
}

.sb-premium-alt:hover {
  color: var(--ds-ink);
  text-decoration: none;
}

/* ════════════════════════════════════════════════════════════════
   SIGNAL ROOM MEMBER HOME — Phase 9
   The "welcome home" page for premium users at /signal-room
   ════════════════════════════════════════════════════════════════ */

.srh-wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 0 60px;
}

.srh-welcome {
  margin-bottom: 40px;
}

.srh-name {
  color: var(--ds-green);
  font-style: italic;
  font-weight: 600;
}

.srh-admin-eyebrow {
  color: var(--ds-amber) !important;
}

.srh-section {
  margin-bottom: 44px;
}

.srh-section-hd {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ds-line-1);
  flex-wrap: wrap;
}

.srh-section-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--ds-green);
  text-transform: uppercase;
}

.srh-note-label {
  color: var(--ds-amber);
}

.srh-section-sub {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ds-ink-3);
  flex: 1;
}

.srh-section-more {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ds-ink-3);
  text-decoration: none;
  letter-spacing: 0.04em;
  border-bottom: 1px solid transparent;
  transition: color var(--ds-fast) var(--ds-ease), border-color var(--ds-fast) var(--ds-ease);
}

.srh-section-more:hover {
  color: var(--ds-green);
  border-bottom-color: var(--ds-green);
  text-decoration: none;
}

/* ── Resume card (Continue Listening) ── */
.srh-resume-card {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 20px;
  align-items: center;
  background: linear-gradient(90deg, rgba(79,214,140,0.06) 0%, var(--ds-bg-2) 40%);
  border: 1px solid rgba(79,214,140,0.25);
  border-radius: var(--ds-rad);
  padding: 16px 20px;
  text-decoration: none;
  color: var(--ds-ink);
  transition: border-color var(--ds-fast) var(--ds-ease), transform var(--ds-fast) var(--ds-ease);
}

.srh-resume-card:hover {
  border-color: var(--ds-green);
  text-decoration: none;
  transform: translateY(-1px);
}

.srh-resume-art {
  width: 96px;
  height: 96px;
  border-radius: var(--ds-rad-sm, 4px);
  overflow: hidden;
  background: var(--ds-bg-3);
}

.srh-resume-art img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.srh-resume-art-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 28px;
  color: var(--ds-green);
  opacity: 0.4;
}

.srh-resume-meta { min-width: 0; }

.srh-resume-guest {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--ds-green);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.srh-resume-title {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 700;
  color: var(--ds-ink);
  margin-bottom: 10px;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.srh-resume-progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.srh-resume-bar {
  height: 3px;
  background: var(--ds-line-2);
  border-radius: 2px;
  overflow: hidden;
}

.srh-resume-bar-fill {
  height: 100%;
  background: var(--ds-green);
  box-shadow: 0 0 6px rgba(79,214,140,0.5);
  transition: width 0.3s ease;
}

.srh-resume-stats {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ds-ink-3);
  letter-spacing: 0.04em;
  display: flex;
  gap: 8px;
}

.srh-resume-pos { color: var(--ds-green); font-weight: 600; }
.srh-resume-dot { color: var(--ds-line-3); }

.srh-resume-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.srh-resume-play {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--ds-green);
  color: var(--ds-bg-0);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  margin-left: 2px;
  box-shadow: 0 0 0 4px rgba(79,214,140,0.12), 0 4px 16px rgba(79,214,140,0.25);
  transition: transform var(--ds-fast) var(--ds-ease);
}

.srh-resume-card:hover .srh-resume-play {
  transform: scale(1.05);
}

.srh-resume-resume-lbl {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--ds-green);
  font-weight: 700;
}

/* ── Bart's Note ── */
.srh-note {
  background: linear-gradient(180deg, rgba(232,180,98,0.05) 0%, var(--ds-bg-2) 100%);
  border: 1px solid rgba(232,180,98,0.25);
  border-left: 3px solid var(--ds-amber);
  border-radius: var(--ds-rad);
  padding: 24px 28px;
  position: relative;
}

.srh-note-quote {
  position: absolute;
  top: -4px;
  left: 14px;
  font-family: var(--serif);
  font-size: 64px;
  color: var(--ds-amber);
  opacity: 0.4;
  line-height: 1;
  font-style: italic;
}

.srh-note-body {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ds-ink);
  font-style: italic;
  padding-left: 30px;
}

.srh-note-sig {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ds-amber);
  font-weight: 700;
  margin-top: 14px;
  padding-left: 30px;
}

/* ── Episode grid ── */
.srh-ep-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.srh-ep-card {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 14px;
  align-items: center;
  padding: 12px;
  background: var(--ds-bg-2);
  border: 1px solid var(--ds-line-1);
  border-radius: var(--ds-rad-sm, 6px);
  text-decoration: none;
  color: var(--ds-ink);
  transition: background var(--ds-fast) var(--ds-ease), border-color var(--ds-fast) var(--ds-ease);
}

.srh-ep-card:hover {
  background: var(--ds-bg-3);
  border-color: rgba(79,214,140,0.4);
  text-decoration: none;
}

.srh-ep-art {
  width: 72px;
  height: 72px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--ds-bg-3);
}

.srh-ep-art img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.srh-ep-art-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 20px;
  color: var(--ds-green);
  opacity: 0.4;
}

.srh-ep-meta { min-width: 0; }

.srh-ep-guest {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--ds-green);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.srh-ep-title {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 700;
  color: var(--ds-ink);
  line-height: 1.3;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.srh-ep-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.06em;
}

.srh-ep-date, .srh-ep-dur {
  color: var(--ds-ink-3);
}

.srh-ep-badge {
  background: rgba(79,214,140,0.12);
  color: var(--ds-green);
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

/* ── Upcoming card ── */
.srh-upcoming {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 20px;
  align-items: center;
  background: var(--ds-bg-2);
  border: 1px solid var(--ds-line-1);
  border-radius: var(--ds-rad);
  padding: 20px 24px;
}

.srh-upcoming-date {
  text-align: center;
  border-right: 1px solid var(--ds-line-1);
  padding-right: 20px;
}

.srh-upcoming-mo {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ds-green);
  font-weight: 700;
  margin-bottom: 2px;
}

.srh-upcoming-dd {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 700;
  color: var(--ds-ink);
  line-height: 1;
}

.srh-upcoming-dow {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ds-ink-3);
  letter-spacing: 0.1em;
  margin-top: 2px;
}

.srh-upcoming-guest {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 700;
  color: var(--ds-ink);
  margin-bottom: 3px;
}

.srh-upcoming-topic {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ds-ink-2);
  margin-bottom: 6px;
}

.srh-upcoming-time {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ds-ink-3);
  letter-spacing: 0.06em;
}

.srh-upcoming-btn {
  display: inline-block;
  background: var(--ds-green);
  color: var(--ds-bg-0);
  border-radius: 4px;
  padding: 10px 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  font-weight: 700;
  text-decoration: none;
  transition: background var(--ds-fast) var(--ds-ease);
  white-space: nowrap;
}

.srh-upcoming-btn:hover {
  background: #5eeb9e;
  text-decoration: none;
}

/* Mobile adjustments */
@media (max-width: 640px) {
  .srh-resume-card {
    grid-template-columns: 72px 1fr;
    gap: 14px;
    padding: 14px;
  }
  .srh-resume-art { width: 72px; height: 72px; }
  .srh-resume-title { font-size: 16px; }
  .srh-resume-cta {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: center;
    margin-top: 4px;
  }
  .srh-resume-play { width: 40px; height: 40px; font-size: 12px; }
  .srh-ep-grid { grid-template-columns: 1fr; }
  .srh-upcoming {
    grid-template-columns: 64px 1fr;
    gap: 14px;
    padding: 16px;
  }
  .srh-upcoming-date { padding-right: 14px; }
  .srh-upcoming-dd { font-size: 26px; }
  .srh-upcoming-btn {
    grid-column: 1 / -1;
    text-align: center;
  }
  .srh-note-body { font-size: 15px; padding-left: 20px; }
  .srh-note-quote { font-size: 48px; left: 10px; }
  .srh-note-sig { padding-left: 20px; }
}

/* ════════════════════════════════════════════════════════════════
   SIGNAL ROOM — Archive + Placeholder + Calendar (Phase 9)
   ════════════════════════════════════════════════════════════════ */

/* ── Archive search + list ── */
.srh-archive-search {
  display: flex;
  gap: 10px;
  margin-bottom: 24px;
  align-items: center;
}

.srh-archive-search-input {
  flex: 1;
  background: var(--ds-bg-0);
  border: 1px solid var(--ds-line-2);
  color: var(--ds-ink);
  border-radius: var(--ds-rad-sm, 4px);
  padding: 11px 14px;
  font-family: var(--sans);
  font-size: 14px;
  outline: none;
  transition: border-color var(--ds-fast) var(--ds-ease);
}

.srh-archive-search-input:focus {
  border-color: var(--ds-green);
  box-shadow: 0 0 0 3px rgba(79,214,140,0.12);
}

.srh-archive-search-btn {
  background: var(--ds-green);
  color: var(--ds-bg-0);
  border: 0;
  border-radius: var(--ds-rad-sm, 4px);
  padding: 11px 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--ds-fast) var(--ds-ease);
}

.srh-archive-search-btn:hover { background: #5eeb9e; }

.srh-archive-clear {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ds-ink-3);
  text-decoration: none;
  padding: 0 6px;
}
.srh-archive-clear:hover { color: var(--ds-ink); }

.srh-archive-results-label {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ds-ink-3);
  letter-spacing: 0.06em;
  margin: 0 0 14px;
}

.srh-archive-list {
  border: 1px solid var(--ds-line-1);
  border-radius: var(--ds-rad);
  overflow: hidden;
  background: var(--ds-bg-2);
}

.srh-archive-row {
  display: grid;
  grid-template-columns: 48px 56px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ds-line-1);
  text-decoration: none;
  color: var(--ds-ink);
  transition: background var(--ds-fast) var(--ds-ease);
}

.srh-archive-row:last-child { border-bottom: none; }

.srh-archive-row:hover {
  background: var(--ds-bg-3);
  text-decoration: none;
}

.srh-archive-num {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ds-ink-4);
  letter-spacing: 0.04em;
  text-align: right;
}

.srh-archive-art {
  width: 56px;
  height: 56px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--ds-bg-3);
}

.srh-archive-art img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.srh-archive-art-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 16px;
  color: var(--ds-green);
  opacity: 0.4;
}

.srh-archive-meta { min-width: 0; }

.srh-archive-guest {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--ds-green);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.srh-archive-title {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--ds-ink);
  line-height: 1.3;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.srh-archive-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--ds-ink-3);
  letter-spacing: 0.06em;
}

.srh-archive-badge {
  color: var(--ds-green);
  font-weight: 700;
}

.srh-archive-arrow {
  color: var(--ds-ink-4);
  font-size: 18px;
  padding-right: 4px;
}

.srh-archive-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--ds-ink-3);
}

.srh-archive-empty-title {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--ds-ink-2);
  margin-bottom: 8px;
}

.srh-archive-empty-sub a {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ds-green);
  text-decoration: none;
}

/* ── Placeholder (empty-state) ── */
.srh-placeholder {
  text-align: center;
  padding: 60px 40px;
  background: var(--ds-bg-2);
  border: 1px dashed var(--ds-line-2);
  border-radius: var(--ds-rad);
}

.srh-placeholder-icon {
  font-family: var(--serif);
  font-size: 48px;
  color: var(--ds-green);
  opacity: 0.5;
  margin-bottom: 16px;
}

.srh-placeholder-title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--ds-ink);
  margin-bottom: 14px;
}

.srh-placeholder-body {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ds-ink-3);
  line-height: 1.7;
  max-width: 480px;
  margin: 0 auto 10px;
}

.srh-placeholder-body a {
  color: var(--ds-green);
  text-decoration: none;
  border-bottom: 1px solid var(--ds-green);
}

/* ── Calendar list ── */
.srh-cal-list {
  border: 1px solid var(--ds-line-1);
  border-radius: var(--ds-rad);
  overflow: hidden;
  background: var(--ds-bg-2);
}

.srh-cal-month {
  background: var(--ds-bg-3);
  padding: 10px 20px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--ds-green);
  text-transform: uppercase;
  border-bottom: 1px solid var(--ds-line-1);
}

.srh-cal-row {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 20px;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--ds-line-1);
}

.srh-cal-row:last-child { border-bottom: none; }

.srh-cal-row-special {
  background: linear-gradient(90deg, rgba(232,180,98,0.06), transparent);
}

.srh-cal-row-today {
  background: linear-gradient(90deg, rgba(79,214,140,0.08), transparent);
}

.srh-cal-date {
  text-align: center;
  padding-right: 20px;
  border-right: 1px solid var(--ds-line-1);
}

.srh-cal-dd {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 700;
  color: var(--ds-ink);
  line-height: 1;
}

.srh-cal-dow {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ds-ink-3);
  letter-spacing: 0.1em;
  margin-top: 2px;
}

.srh-cal-guest {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--ds-ink);
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.srh-cal-tag-special {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--ds-amber);
  padding: 2px 7px;
  background: rgba(232,180,98,0.1);
  border: 1px solid rgba(232,180,98,0.3);
  border-radius: 3px;
  font-weight: 700;
}

.srh-cal-tag-today {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--ds-green);
  padding: 2px 7px;
  background: rgba(79,214,140,0.12);
  border: 1px solid rgba(79,214,140,0.3);
  border-radius: 3px;
  font-weight: 700;
}

.srh-cal-topic {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ds-ink-2);
  margin-bottom: 4px;
}

.srh-cal-time {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ds-ink-3);
  letter-spacing: 0.06em;
}

@media (max-width: 640px) {
  .srh-archive-row {
    grid-template-columns: 36px 48px 1fr;
    gap: 10px;
    padding: 10px 12px;
  }
  .srh-archive-arrow { display: none; }
  .srh-archive-art { width: 48px; height: 48px; }
  .srh-archive-search { flex-wrap: wrap; }
  .srh-cal-row {
    grid-template-columns: 48px 1fr;
    padding: 12px 14px;
  }
  .srh-cal-date { padding-right: 14px; }
  .srh-cal-dd { font-size: 22px; }
  .srh-placeholder { padding: 40px 20px; }
}

/* ═══════════════════════════════════════════════════════════════
   RESUME TOAST — Phase 9
   Tasteful "Resumed at 14m" indicator shown when the player seeks
   to a stored position on load. Fades after ~3 seconds.
   ═══════════════════════════════════════════════════════════════ */

.nap-resume-toast {
  position: absolute;
  top: 16px;
  right: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(79, 214, 140, 0.12);
  border: 1px solid rgba(79, 214, 140, 0.4);
  color: var(--ds-green);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 14px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateY(-4px);
  animation: nap-resume-in 0.35s cubic-bezier(.2,.9,.2,1) forwards;
  z-index: 5;
  pointer-events: none;
}

.nap-resume-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ds-green);
  box-shadow: 0 0 8px rgba(79, 214, 140, 0.6);
}

.nap-resume-toast-fade {
  opacity: 0 !important;
  transform: translateY(-4px) !important;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

@keyframes nap-resume-in {
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 480px) {
  .nap-resume-toast {
    top: auto;
    bottom: 12px;
    right: 12px;
    left: 12px;
    justify-content: center;
  }
}

/* ════════════════════════════════════════════════════════════════
   PUBLIC MOBILE TABS — Phase 10
   Bottom tab bar for non-premium visitors on mobile.
   Same visual grammar as .mr-tabs, but uses --ds-amber for accent
   since "public" is the Bart Graves / host-side face of the site.
   ════════════════════════════════════════════════════════════════ */

.pt-tabs {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 885;
  background: rgba(12, 16, 23, 0.92);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-top: 1px solid var(--ds-line-2);
  padding: 6px 0 calc(8px + env(safe-area-inset-bottom, 0px));
  justify-content: space-around;
}

@media (max-width: 959px) {
  .pt-tabs { display: flex; }
  body.pt-active { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
  body.pt-active.nap-mini-active { padding-bottom: calc(130px + env(safe-area-inset-bottom, 0px)); }
  /* Mini-player stacks above public tabs too */
  body.pt-active .nap-mini {
    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }
}

.pt-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 4px;
  text-decoration: none;
  color: var(--ds-ink-3);
  transition: color var(--ds-fast) var(--ds-ease);
  min-height: 52px;
  position: relative;
}

.pt-tab:hover { color: var(--ds-ink); text-decoration: none; }

.pt-tab-active {
  color: var(--ds-amber);
}

.pt-tab-active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 2px;
  background: var(--ds-amber);
  border-radius: 0 0 2px 2px;
  transform: translateX(-50%);
}

.pt-tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
}

.pt-tab-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  font-weight: 500;
  line-height: 1;
}

/* ════════════════════════════════════════════════════════════════
   APP-FEEL — swipe-back indicator + auto-hiding header (Phase 10)
   ════════════════════════════════════════════════════════════════ */

/* Swipe-back edge indicator — shown when user drags from left edge */
.app-swipe-back {
  position: fixed;
  left: 4px;
  top: 50%;
  transform: translateY(-50%) translateX(-30px);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(79, 214, 140, 0.9);
  color: var(--ds-bg-0);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  scale: 0.6;
  pointer-events: none;
  box-shadow: 0 4px 20px rgba(79, 214, 140, 0.4), 0 0 0 4px rgba(79, 214, 140, 0.15);
}

/* Auto-hiding header transition — applied via JS .app-autohide class */
@media (max-width: 959px) {
  .app-autohide {
    transition: transform 0.22s cubic-bezier(.2,.9,.2,1);
    will-change: transform;
  }
  .app-autohide.app-header-hidden {
    transform: translateY(-100%);
  }
}

/* ════════════════════════════════════════════════════════════════
   PHASE 19 — SIGNAL ROOM FLOATING WIDGET (mr-fab)
   Replaces the left-side rail / bottom tab bar with a single
   bottom-right circular button that opens a menu panel.
   ════════════════════════════════════════════════════════════════ */

.mr-fab-wrap {
  position: fixed;
  right: 22px;
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  z-index: 880;
}

/* ── The button ── */
.mr-fab {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--ds-line-2);
  background: linear-gradient(180deg, #12182A 0%, #0A0D14 100%);
  color: var(--ds-green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow:
    0 8px 24px rgba(0,0,0,.4),
    0 0 0 1px rgba(0,0,0,.3),
    0 0 28px rgba(79,214,140,.14);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  padding: 0;
  position: relative;
}
.mr-fab:hover {
  transform: translateY(-1px);
  border-color: rgba(79,214,140,.42);
  box-shadow:
    0 12px 32px rgba(0,0,0,.5),
    0 0 0 1px rgba(0,0,0,.3),
    0 0 44px rgba(79,214,140,.24);
}
.mr-fab:active { transform: translateY(0); }

.mr-fab-icon { line-height: 0; display: inline-flex; }
.mr-fab-icon-open { display: none; }
.mr-fab-wrap.open .mr-fab-icon-closed { display: none; }
.mr-fab-wrap.open .mr-fab-icon-open { display: inline-flex; }
.mr-fab-wrap.open .mr-fab { border-color: rgba(79,214,140,.55); }

/* Subtle pulse dot on the FAB to signal it's interactive */
.mr-fab-dot {
  position: absolute;
  top: 8px; right: 8px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ds-green);
  box-shadow: 0 0 8px rgba(79,214,140,.6);
  opacity: .85;
  animation: mrFabPulse 2.4s ease infinite;
}
.mr-fab-wrap.open .mr-fab-dot { display: none; }

@keyframes mrFabPulse {
  0%,100% { opacity: .85; transform: scale(1); }
  50%     { opacity: .35; transform: scale(.72); }
}

/* ── The panel ── */
.mr-fab-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  min-width: 268px;
  max-width: calc(100vw - 44px);
  background: #0E1219;
  border: 1px solid rgba(79,214,140,.22);
  border-radius: 10px;
  box-shadow:
    0 16px 48px rgba(0,0,0,.6),
    0 0 0 1px rgba(0,0,0,.3),
    0 0 36px rgba(79,214,140,.08);
  overflow: hidden;
  opacity: 0;
  transform: translateY(6px) scale(.98);
  transform-origin: bottom right;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}
.mr-fab-wrap.open .mr-fab-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Top accent line signalling the relationship to the FAB */
.mr-fab-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--ds-green), transparent);
  opacity: .5;
}

/* ── Header (identity) ── */
.mr-fab-panel-head {
  padding: 16px 18px 12px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.mr-fab-panel-brand {
  display: flex;
  align-items: center;
  gap: 11px;
}
.mr-fab-panel-mark {
  width: 34px; height: 34px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 20px;
  font-weight: 700;
  background: rgba(79,214,140,.08);
  border: 1px solid rgba(79,214,140,.25);
  color: var(--ds-green);
  flex-shrink: 0;
}
.mr-fab-panel-mark-admin {
  background: rgba(232,180,98,.08);
  border-color: rgba(232,180,98,.3);
  color: var(--ds-amber);
}
.mr-fab-panel-ident { min-width: 0; }
.mr-fab-panel-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: .18em;
  font-weight: 700;
  color: var(--ds-green);
}
.mr-fab-panel-label-admin { color: var(--ds-amber); }
.mr-fab-panel-email {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--ds-ink-3);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Nav ── */
.mr-fab-panel-nav {
  padding: 6px 0;
  display: flex;
  flex-direction: column;
}
.mr-fab-panel-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  text-decoration: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--ds-ink-2);
  border-left: 3px solid transparent;
  transition: background .15s ease, color .15s ease, border-left-color .15s ease;
}
.mr-fab-panel-link:hover {
  background: rgba(79,214,140,.06);
  color: var(--ds-green);
  border-left-color: var(--ds-green);
  text-decoration: none;
}
.mr-fab-panel-link-active {
  background: rgba(79,214,140,.08);
  color: var(--ds-green);
  border-left-color: var(--ds-green);
}
.mr-fab-panel-icon {
  display: inline-flex;
  width: 18px; height: 18px;
  align-items: center;
  justify-content: center;
  opacity: .7;
}
.mr-fab-panel-link:hover .mr-fab-panel-icon,
.mr-fab-panel-link-active .mr-fab-panel-icon { opacity: 1; }
.mr-fab-panel-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
}

/* ── Footer ── */
.mr-fab-panel-foot {
  padding: 10px 18px 14px;
  border-top: 1px solid rgba(255,255,255,.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: .06em;
}
.mr-fab-panel-admin {
  color: var(--ds-amber);
  text-decoration: none;
}
.mr-fab-panel-admin:hover { color: #F5C979; text-decoration: none; }
.mr-fab-panel-logout {
  color: var(--ds-ink-3);
  text-decoration: none;
}
.mr-fab-panel-logout:hover { color: var(--ds-red); text-decoration: none; }

/* Small screens: panel takes full width minus small margins */
@media (max-width: 480px) {
  .mr-fab-wrap { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .mr-fab { width: 48px; height: 48px; }
  .mr-fab-panel {
    right: 0;
    min-width: calc(100vw - 28px);
  }
}

/* ════════════════════════════════════════════════════════════════
   SIDEBAR — Booking Pitch Widget (Phase 19)
   Replaces the login/welcome card on /booking pages.
   ════════════════════════════════════════════════════════════════ */

.sb-booking-pitch {
  background: linear-gradient(180deg, var(--ds-bg-2) 0%, var(--ds-bg-3) 100%);
  border: 1px solid rgba(79,214,140,0.18);
  border-radius: var(--ds-rad);
  padding: 22px 20px 20px;
  position: relative;
  overflow: hidden;
}

.sb-booking-pitch::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--ds-green), transparent);
  opacity: 0.55;
}

.sb-bp-eyebrow-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.sb-bp-eyebrow-dash {
  display: block;
  width: 20px;
  height: 1px;
  background: var(--ds-green);
  opacity: 0.6;
}

.sb-bp-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ds-green);
}

.sb-bp-lede {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ds-ink-2);
  margin: 0 0 18px;
  font-style: italic;
}

.sb-bp-points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sb-bp-point {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ds-ink-2);
}

.sb-bp-point-mark {
  color: var(--ds-green);
  font-size: 11px;
  line-height: 1.5;
  flex-shrink: 0;
  margin-top: 1px;
}

.sb-bp-point-text {
  flex: 1;
}

/* ════════════════════════════════════════════════════════════════
   PHASE 20 — Guest profile page improvements
   - Photo glow ring in accent color
   - Fun Fact callout
   - Rich pullquote with oversized opening mark
   - Books + Other Shows sidebar cards
   - Related Guests grid
   ════════════════════════════════════════════════════════════════ */

/* Photo glow ring (when guest has a photo) */
.ds-guest-hero-photo.ds-guest-hero-photo-glow {
  position: relative;
}
.ds-guest-hero-photo.ds-guest-hero-photo-glow::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  border: 1px solid var(--gh-accent-edge, rgba(79,214,140,0.3));
  box-shadow: 0 0 32px var(--gh-accent-glow, rgba(79,214,140,0.22));
  pointer-events: none;
  opacity: 0.85;
}

/* Bio as rendered HTML — Summernote output */
.ds-guest-bio p { margin: 0 0 1em; }
.ds-guest-bio p:last-child { margin-bottom: 0; }
.ds-guest-bio strong { color: var(--ds-ink); font-weight: 600; }
.ds-guest-bio em { font-style: italic; }
.ds-guest-bio a {
  color: var(--ds-green);
  text-decoration: underline;
  text-decoration-color: rgba(79,214,140,0.35);
  text-underline-offset: 3px;
}
.ds-guest-bio a:hover {
  text-decoration-color: var(--ds-green);
}
.ds-guest-bio ul, .ds-guest-bio ol {
  margin: 0 0 1em 0;
  padding-left: 1.4em;
}
.ds-guest-bio li { margin: 0.3em 0; }
.ds-guest-bio blockquote {
  border-left: 3px solid rgba(255,255,255,0.12);
  padding: 2px 0 2px 16px;
  margin: 1em 0;
  color: var(--ds-ink-3);
  font-style: italic;
}

/* Fun Fact callout */
.ds-guest-funfact {
  background: var(--gh-accent-dim, rgba(79,214,140,0.08));
  border: 1px solid var(--gh-accent-edge, rgba(79,214,140,0.28));
  border-left-width: 3px;
  border-radius: 4px;
  padding: 16px 20px 18px;
  margin: 0 0 40px;
  position: relative;
}
.ds-guest-funfact-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--gh-accent, var(--ds-green));
  margin-bottom: 8px;
}
.ds-guest-funfact-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ds-ink-2);
  font-style: italic;
}

/* Rich pullquote (Phase 20) — oversized opening mark + accent border */
.ds-pullquote-rich {
  position: relative;
  background: var(--gh-accent-dim, rgba(79,214,140,0.05));
  border: 1px solid var(--gh-accent-edge, rgba(79,214,140,0.22));
  border-left: 3px solid var(--gh-accent, var(--ds-green));
  padding: 32px 36px 28px 56px;
  margin: 36px 0;
  border-radius: 3px;
  overflow: hidden;
}
.ds-pullquote-mark {
  position: absolute;
  top: -4px;
  left: 16px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 88px;
  line-height: 1;
  color: var(--gh-accent, var(--ds-green));
  opacity: 0.22;
  font-weight: 700;
  pointer-events: none;
}
.ds-pullquote-rich p {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 22px;
  line-height: 1.55;
  color: var(--ds-ink);
  font-style: italic;
  margin: 0 0 14px;
  position: relative;
}
.ds-pullquote-rich cite {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--gh-accent, var(--ds-green));
  font-style: normal;
  font-weight: 600;
  text-transform: uppercase;
}

/* Selected Books sidebar card */
.ds-guest-card-book {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.ds-guest-card-book:last-child { border-bottom: none; }
.ds-guest-card-book-mark {
  color: var(--ds-green);
  font-size: 12px;
  line-height: 1.5;
  flex-shrink: 0;
  margin-top: 1px;
}
.ds-guest-card-book-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ds-ink-2);
  font-style: italic;
}

/* Other Shows sidebar card */
.ds-guest-card-other-shows {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 2px 0;
}
.ds-guest-card-show-pill {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 11px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--ds-ink-2);
  letter-spacing: 0.04em;
}

/* Related Guests */
.ds-guest-related .ds-section-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  color: var(--ds-ink);
  font-weight: 700;
}

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

.ds-related-card {
  display: flex;
  flex-direction: column;
  padding: 14px;
  background: linear-gradient(180deg, var(--ds-bg-2) 0%, var(--ds-bg-3) 100%);
  border: 1px solid var(--ds-line-2);
  border-radius: var(--ds-rad);
  text-decoration: none;
  transition: border-color var(--ds-fast) var(--ds-ease),
              transform var(--ds-fast) var(--ds-ease),
              background var(--ds-fast) var(--ds-ease);
  position: relative;
}
.ds-related-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rg-accent, var(--ds-green)), transparent);
  opacity: 0;
  transition: opacity var(--ds-fast) var(--ds-ease);
}
.ds-related-card:hover {
  border-color: var(--rg-accent, var(--ds-green));
  transform: translateY(-1px);
  text-decoration: none;
}
.ds-related-card:hover::before { opacity: 0.6; }

.ds-related-card-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--rg-accent-dim, rgba(79,214,140,0.08));
  border: 1px solid var(--ds-line-1);
  border-radius: 3px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.ds-related-card-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.ds-related-card-initials {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 36px;
  font-weight: 700;
  color: var(--rg-accent, var(--ds-green));
  opacity: 0.6;
}

.ds-related-card-body {
  min-height: 48px;
}
.ds-related-card-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--ds-ink);
  line-height: 1.3;
  margin-bottom: 3px;
}
.ds-related-card-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--ds-ink-3);
  letter-spacing: 0.04em;
  line-height: 1.5;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Mobile */
@media (max-width: 600px) {
  .ds-related-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .ds-pullquote-rich {
    padding: 24px 20px 22px 36px;
    margin: 28px 0;
  }
  .ds-pullquote-mark { font-size: 64px; left: 10px; }
  .ds-pullquote-rich p { font-size: 18px; }
  .ds-guest-funfact { padding: 14px 16px; }
}