/* Synaptic Plunge Tech Podcasts — own theme (navy + electric blue, no pastels) */
:root {
  --navy: #0B1524;
  --navy-mid: #122038;
  --navy-card: #152844;
  --electric: #00A8FF;
  --electric-dim: #1A7FBF;
  --ink: #E6EEF7;
  --muted: #9BB0C7;
  --line: #1E3A5F;
  --header-h: calc(5.75rem + env(safe-area-inset-top, 0px));
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Source Sans 3", "Segoe UI", sans-serif;
  background: var(--navy);
  color: var(--ink);
  line-height: 1.55;
  min-height: 100vh;
}
a { color: var(--electric); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-family: Outfit, "Source Sans 3", sans-serif; letter-spacing: 0.01em; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: calc(0.85rem + env(safe-area-inset-top, 0px)) calc(1.5rem + env(safe-area-inset-right, 0px)) 0.85rem calc(1.5rem + env(safe-area-inset-left, 0px));
  background: var(--navy-mid);
  border-bottom: 1px solid var(--line);
}
.episode-date, main > .card-date, .archive-list time, main > h1, #archive-title {
  scroll-margin-top: var(--header-h);
}
#notes, .notes-table-wrap, .recommended-links {
  scroll-margin-top: calc(var(--header-h) + 28px);
}
.brand { display: flex; align-items: center; gap: 0.85rem; color: var(--ink); text-decoration: none; }
.brand:hover { text-decoration: none; }
.logo-ring {
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 2px solid var(--electric);
  overflow: hidden;
  flex: 0 0 56px;
  background: var(--navy);
  /* no glow */
  box-shadow: none;
}
.logo-ring img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brand-text { display: flex; flex-direction: column; gap: 0.1rem; }
.brand-name { font-family: Outfit, sans-serif; font-weight: 600; font-size: 1.05rem; }
.endorse { font-size: 0.78rem; color: var(--muted); letter-spacing: 0.02em; }
nav { display: flex; gap: 1.25rem; }
nav a { color: var(--muted); font-family: Outfit, sans-serif; font-weight: 500; font-size: 0.95rem; }
nav a.is-current, nav a:hover { color: var(--electric); text-decoration: none; }

.hero {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background: var(--navy);
  max-height: calc(100dvh - var(--header-h));
  overflow: hidden;
}
.hero-frame {
  position: relative;
  /* Fit the entire 16:9 banner in the viewport below the header.
     On short desktop screens this letterboxes the sides (navy) instead of cropping the bowl/table. */
  width: min(100%, calc((100dvh - var(--header-h)) * 16 / 9));
  max-width: 100%;
  height: auto;
  max-height: calc(100dvh - var(--header-h));
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  background: var(--navy);
  container-type: inline-size;
  container-name: hero;
}
.hero-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}
.hero-band {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.35rem 1rem;
  pointer-events: none;
}
.hero-band h1 {
  margin: 0;
  font-size: clamp(0.85rem, 5cqi, 2.5rem);
  font-weight: 700;
  color: #F4F8FC;
  text-shadow: 0 1px 2px rgba(0,0,0,0.55);
  line-height: 1.15;
}
.hero-band p {
  margin: 0.2rem 0 0;
  font-size: clamp(0.58rem, 2.15cqi, 1rem);
  color: #C5D4E6;
}

main { max-width: 1080px; margin: 0 auto; padding: 2rem 1.25rem calc(100svh - var(--header-h)); }
.page-lead { color: var(--muted); max-width: 42rem; }
.page-lead strong { font-weight: 600; color: inherit; }
/* Show names in intro/hero copy: bold electric-blue links (7.0:1 on navy), underline only on hover/focus. */
a.show-link { font-weight: 600; color: var(--electric); white-space: nowrap; text-decoration: none; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a.show-link:hover, a.show-link:focus-visible { text-decoration: underline; }
a.show-link:focus-visible { outline: 2px solid var(--electric); outline-offset: 2px; border-radius: 2px; }
/* "Digital splash" landing cue on a show heading, modelled on the water crown in the
   Synaptic Plunge logo: two liquid crown arms (no glow) rise from either end of the name, teardrop
   droplets arc off the tips and fall back, binary digits float up out of the splash, and calm
   thin elliptical ripples spread around the name. ~2.1s (slow rise, five staggered ripples), symmetric, overlay only (no layout
   shift), pointer-events none. JS (player.js splashDrop) builds the pieces sized to the text box.
   Ripple-only toggle: SPLASH_SHOW_DROPLET = false in player.js, or class "ripple-only" on <html>.
   Skipped for prefers-reduced-motion. */
.show-section-head { position: relative; }
.splash-fx { position: absolute; pointer-events: none; z-index: 45; /* above the sticky header (40), below mini-player (50) */ }
.splash-fx .sp-arm {
  position: absolute; bottom: -3px; opacity: 0; transform-origin: 50% 100%; transform: scaleY(0);
  animation: sp-arm 1300ms cubic-bezier(.25,.6,.3,1) 50ms forwards;
}
.splash-fx .sp-arm svg { display: block; width: 100%; height: 100%; overflow: visible; }
.splash-fx .sp-dot {
  position: absolute; width: var(--s, 4px); height: calc(var(--s, 4px) * 1.35); margin: calc(var(--s, 4px) * -0.675) 0 0 calc(var(--s, 4px) * -0.5);
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: radial-gradient(circle at 40% 30%, #BFEAFF 0, #33BBFF 45%, #0088DD 100%);
  opacity: 0; animation: sp-dot var(--d, 680ms) linear var(--w, 170ms) forwards;
}
.splash-fx .sp-bit {
  position: absolute; margin: -0.5em 0 0 -0.3em;
  font: 700 10px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #5CCBFF;
  opacity: 0; animation: sp-bit 1300ms cubic-bezier(.25,.6,.35,1) var(--w, 200ms) forwards;
}
.splash-fx .sp-ring {
  position: absolute; inset: -2px -6px; border-radius: 50%;
  border: 1.5px solid rgba(0,168,255,0.9); box-shadow: none; opacity: 0;
  animation: sp-ripple 1150ms cubic-bezier(.22,.55,.35,1) 150ms forwards;
}
.splash-fx .sp-ring-2 { animation-delay: 360ms; border-width: 1.35px; }
.splash-fx .sp-ring-3 { animation-delay: 570ms; border-width: 1.2px; }
.splash-fx .sp-ring-4 { animation-delay: 780ms; border-width: 1.05px; }
.splash-fx .sp-ring-5 { animation-delay: 990ms; border-width: 0.9px; }
@keyframes sp-arm {
  0%   { opacity: 0; transform: scaleY(0.05); animation-timing-function: cubic-bezier(.3,.5,.4,1); }
  20%  { opacity: 0.85; }
  52%  { opacity: 0.85; transform: scaleY(1); animation-timing-function: ease-in-out; }
  66%  { opacity: 0.75; transform: scaleY(0.96); animation-timing-function: ease-in; }
  100% { opacity: 0; transform: scaleY(0.25); }
}
/* Rise (ease-out) to the arc's peak, then fall back (ease-in) and fade. */
@keyframes sp-dot {
  0%   { opacity: 0; transform: translate(0, 0) rotate(var(--r0, 0deg)) scale(0.6); animation-timing-function: cubic-bezier(.2,.6,.4,1); }
  12%  { opacity: 0.95; }
  58%  { opacity: 0.95; transform: translate(calc(var(--dx) * 0.62), var(--dy)) rotate(0deg) scale(1); animation-timing-function: cubic-bezier(.5,0,.8,.4); }
  100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) * -0.15 + 6px)) rotate(var(--r1, 0deg)) scale(0.8); }
}
@keyframes sp-bit {
  0%   { opacity: 0; transform: translate(0, 4px) scale(0.85); }
  22%  { opacity: 0.85; }
  65%  { opacity: 0.6; }
  100% { opacity: 0; transform: translate(var(--dx, 0px), var(--dy, -18px)) scale(1); }
}
@keyframes sp-ripple {
  0%   { opacity: 0; inset: -2px -6px; }
  12%  { opacity: 0.65; }
  55%  { opacity: 0.35; }
  100% { opacity: 0; inset: var(--sp-ry, -30px) var(--sp-rx, -46px); }
}
/* Phone: headings sit ~13px from the screen edge, so keep the rings' sideways spread inside it. */
@media (max-width: 640px) { .splash-fx { --sp-rx: -12px; --sp-ry: -22px; } }
.splash-fx.ripple-only .sp-arm, .splash-fx.ripple-only .sp-dot, .splash-fx.ripple-only .sp-bit,
.ripple-only .splash-fx .sp-arm, .ripple-only .splash-fx .sp-dot, .ripple-only .splash-fx .sp-bit { display: none; }
.splash-fx.ripple-only .sp-ring, .ripple-only .splash-fx .sp-ring { animation-delay: 0ms; }
.splash-fx.ripple-only .sp-ring-2, .ripple-only .splash-fx .sp-ring-2 { animation-delay: 160ms; }
.splash-fx.ripple-only .sp-ring-3, .ripple-only .splash-fx .sp-ring-3 { animation-delay: 320ms; }
.splash-fx.ripple-only .sp-ring-4, .ripple-only .splash-fx .sp-ring-4 { animation-delay: 480ms; }
.splash-fx.ripple-only .sp-ring-5, .ripple-only .splash-fx .sp-ring-5 { animation-delay: 640ms; }
@media (prefers-reduced-motion: reduce) { .splash-fx { display: none; } }
.show-sep { color: #FFFFFF; font-weight: 400; margin: 0 0.5em; }
/* Show-name anchors (/#tech etc.): heading lands 22px under the sticky header. */
.show-section[id] { scroll-margin-top: calc(var(--header-h) + 22px); }
.hero-band a.show-link { pointer-events: auto; text-shadow: 0 1px 2px rgba(0,0,0,0.7); }
#episodes {
  scroll-margin-top: calc(var(--header-h) + 28px);
}
.episode-list { display: flex; flex-direction: column; gap: 1.75rem; margin-top: 1.5rem; }
.episode-card {
  display: grid;
  grid-template-columns: minmax(220px, 40%) minmax(0, 1fr);
  align-items: start;
  background: var(--navy-card);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.card-visual { background: var(--navy-mid); min-width: 0; }
.card-art-link { display: block; line-height: 0; }
.card-art {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  display: block;
  background: var(--navy-mid);
}
.card-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 1.05rem 1.15rem 1.15rem;
}
.card-top {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "meta btn"
    "sub notes";
  column-gap: 1rem;
  row-gap: 0.4rem;
  align-items: start;
  min-width: 0;
}
.card-copy { grid-area: meta; min-width: 0; }
.card-date { margin: 0 0 0.25rem; color: var(--muted); font-size: 0.9rem; }
.card-copy h2 {
  margin: 0.1rem 0 0;
  font-size: clamp(1.15rem, 2.3vw, 1.7rem);
  line-height: 1.22;
  overflow-wrap: anywhere;
}
.card-copy h2 a { color: var(--ink); }
.card-copy h2 a:hover { color: var(--electric); text-decoration: none; }
.card-sub {
  grid-area: sub;
  margin: 0;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
  align-self: baseline;
}
.card-actions, .archive-actions {
  grid-area: btn;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  align-self: center;
}
.show-notes-link {
  grid-area: notes;
  justify-self: center;
  align-self: baseline;
  font-family: Outfit, sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--electric);
  text-decoration: none;
  white-space: nowrap;
}
.show-notes-link:hover {
  color: var(--electric);
  text-decoration: underline;
}
.show-notes-link:focus-visible {
  outline: 3px solid var(--electric);
  outline-offset: 3px;
}
.listen-btn,
.listen-btn:link,
.listen-btn:visited {
  flex: 0 0 auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.72rem 1.2rem 0.78rem;
  border-radius: 10px;
  border: 0;
  background: linear-gradient(180deg, #5AD4FF 0%, #00A8FF 48%, #0077C2 100%);
  color: #071018;
  font-family: Outfit, sans-serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    inset 0 -2px 0 rgba(0,40,80,0.4),
    0 4px 0 #003A66,
    0 8px 16px rgba(0,0,0,0.35);
}
.listen-btn .listen-btn-label {
  color: #071018;
}
.listen-btn:hover {
  text-decoration: none;
  color: #071018;
  filter: brightness(1.08);
}
.listen-btn:hover .listen-btn-label {
  color: #071018;
}
.listen-btn:active {
  transform: translateY(3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    0 1px 0 #003A66,
    0 3px 8px rgba(0,0,0,0.3);
}
.listen-btn:focus-visible {
  outline: 3px solid var(--electric);
  outline-offset: 3px;
}
.listen-btn.is-predrop,
a.listen-btn[aria-disabled="true"] {
  color: #071018;
  opacity: 1;
  filter: none;
  background: linear-gradient(180deg, #8EC5D8 0%, #5AA0B8 48%, #4A8AA3 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    inset 0 -1px 0 rgba(0,40,80,0.25),
    0 2px 0 #2A5060,
    0 4px 8px rgba(0,0,0,0.2);
  cursor: not-allowed;
  pointer-events: auto;
}
.listen-btn.is-predrop .listen-btn-label,
a.listen-btn[aria-disabled="true"] .listen-btn-label {
  color: #071018;
}
.listen-btn.is-predrop:hover,
.listen-btn.is-predrop:active,
a.listen-btn[aria-disabled="true"]:hover,
a.listen-btn[aria-disabled="true"]:active {
  text-decoration: none;
  color: #071018;
  filter: none;
  transform: none;
  background: linear-gradient(180deg, #8EC5D8 0%, #5AA0B8 48%, #4A8AA3 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    inset 0 -1px 0 rgba(0,40,80,0.25),
    0 2px 0 #2A5060,
    0 4px 8px rgba(0,0,0,0.2);
}
.drop-arrives {
  margin: 0.2rem 0 0.4rem;
  color: var(--electric);
  font-family: Outfit, sans-serif;
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: 0.02em;
}
.audio-box.is-predrop #episode-player,
.audio-box.is-predrop .download-link,
.audio-box.is-predrop .tap-to-play {
  display: none;
}
.audio-box:not(.is-predrop) .drop-listen {
  display: none;
}
.drop-toast {
  position: fixed;
  z-index: 80;
  left: 50%;
  bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.85rem;
  max-width: min(28rem, calc(100vw - 1.5rem));
  padding: 0.85rem 0.95rem 0.85rem 1.05rem;
  background: var(--navy-card);
  color: var(--ink);
  border: 1px solid var(--electric);
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(0, 168, 255, 0.28), 0 10px 28px rgba(0,0,0,0.45);
}
.drop-toast[hidden] { display: none; }
.drop-toast p {
  display: block;
  margin: 0;
  font-family: Outfit, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--ink);
}
.drop-toast a {
  display: inline;
  margin-right: 0.3em;
  color: var(--electric);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.drop-toast a:hover { color: #5AD4FF; }
.drop-toast-close {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: 1px solid var(--electric);
  border-radius: 8px;
  background: #071524;
  color: var(--electric);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}
.drop-toast-close:hover { background: var(--navy-mid); }
.drop-toast-close:focus-visible {
  outline: 3px solid var(--electric);
  outline-offset: 3px;
}
body.has-mini-player .drop-toast {
  bottom: calc(6.5rem + env(safe-area-inset-bottom, 0px));
}

.card-bullets { margin: 0.35rem 0 0; padding-left: 1.15rem; }
.card-bullets li { margin: 0.25rem 0; }

.disclaimer {
  margin: 0 0 1.25rem;
  padding: 0.7rem 0.9rem;
  border-left: 3px solid var(--electric);
  background: var(--navy-mid);
  color: var(--muted);
  font-size: 0.95rem;
}
.audio-box {
  background: var(--navy-card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.1rem 1.2rem;
  margin: 1rem 0 1.5rem;
}
.audio-layout {
  display: grid;
  grid-template-columns: minmax(160px, 38%) minmax(0, 1fr);
  gap: 1rem 1.15rem;
  align-items: start;
}
.audio-art-wrap { min-width: 0; }
.audio-art {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  border-radius: 8px;
  border: 1px solid var(--line);
  display: block;
  background: var(--navy);
}
.audio-main { min-width: 0; }
.audio-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 0.75rem;
  margin: 0 0 0.55rem;
  min-width: 0;
}
.audio-box h2, .audio-head h2 {
  margin: 0;
  font-size: 1.15rem;
  flex: 0 1 auto;
  min-width: 0;
}
.audio-jump {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-left: auto;
  flex: 0 0 auto;
}
.audio-jump a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.7rem;
  min-height: 2.2rem;
  border: 1px solid var(--electric);
  border-radius: 8px;
  color: var(--electric);
  background: #0E1C30;
  font-family: Outfit, sans-serif;
  font-weight: 600;
  font-size: 0.88rem;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 2px 0 #0A3A62;
}
.audio-jump a:hover {
  background: var(--navy-mid);
  text-decoration: none;
}
.audio-jump a:focus-visible {
  outline: 2px solid var(--electric);
  outline-offset: 2px;
}
audio { width: 100%; }
.audio-meta { margin: 0 0 0.6rem; color: var(--muted); font-size: 0.95rem; }
.download-link { margin: 0.7rem 0 0; }
.ep-tag { display: inline-block; margin: 0 0 0.5rem; padding: 0.15rem 0.6rem; border: 1px solid var(--electric); border-radius: 999px; color: var(--electric); font-size: 0.8rem; font-family: Outfit, sans-serif; }
.sample-note { margin-top: 2rem; padding: 1rem 1.25rem; background: var(--navy-card); border: 1px solid var(--line); border-radius: 12px; }
.sample-note h2 { margin-top: 0; }
.coming-soon {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: flex-start;
  padding: 1rem 1.1rem;
  border: 1px dashed var(--electric-dim);
  border-radius: 8px;
  background: #0E1C30;
}
.coming-soon strong {
  font-family: Outfit, sans-serif;
  color: var(--electric);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.95rem;
}
.coming-soon span { color: var(--muted); }
.summary { font-size: 1.05rem; }
.notes-table-wrap { margin-top: 2rem; }
.table-scroll { overflow-x: auto; }
.notes-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--navy-card);
  border: 1px solid var(--line);
}
.notes-table th, .notes-table td {
  vertical-align: top;
  text-align: left;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--line);
}
.notes-table thead th {
  background: var(--navy-mid);
  font-family: Outfit, sans-serif;
  font-weight: 600;
  color: var(--electric);
}
.notes-table tbody th {
  width: 9.5rem;
  color: var(--ink);
  font-family: Outfit, sans-serif;
  font-weight: 600;
}
.notes-table .topic { font-weight: 600; margin-bottom: 0.4rem; }
.link-list { margin: 0; padding-left: 1.1rem; }
.link-list li { margin: 0.3rem 0; }

.archive-list {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.archive-row {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "thumb main"
    "thumb covered";
  column-gap: 1rem;
  row-gap: 0;
  align-items: start;
  background: var(--navy-card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.75rem 0.85rem;
}
.archive-thumb-link {
  grid-area: thumb;
  width: 160px;
  line-height: 0;
}
.archive-thumb {
  width: 160px;
  height: 90px;
  object-fit: cover;
  object-position: center;
  border-radius: 8px;
  display: block;
  background: var(--navy-mid);
}
.archive-main { grid-area: main; min-width: 0; }
.archive-top {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "meta btn"
    "sub notes";
  column-gap: 0.85rem;
  row-gap: 0.2rem;
  align-items: start;
  min-width: 0;
}
.archive-copy { grid-area: meta; min-width: 0; }
.archive-copy h2 {
  margin: 0.15rem 0 0;
  font-size: 1.15rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.archive-copy h2 a { color: var(--ink); }
.archive-copy h2 a:hover { color: var(--electric); text-decoration: none; }
.archive-copy .card-date { margin: 0; }
.covered { margin-top: 0.45rem; }
.archive-row > .covered { grid-area: covered; }
.covered summary {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  cursor: pointer;
  color: var(--electric);
  font-family: Outfit, sans-serif;
  font-weight: 700;
  font-size: 1.08rem;
  letter-spacing: 0.02em;
  list-style: none;
  padding: 0.3rem 0.15rem;
  user-select: none;
}
.covered summary::-webkit-details-marker,
.covered summary::marker { display: none; content: none; }
.cov-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border: 2px solid var(--electric);
  border-radius: 8px;
  background: #071524;
  color: var(--electric);
  box-shadow: 0 0 12px rgba(0, 168, 255, 0.55);
  transition: transform 0.2s ease;
}
.covered[open] .cov-chevron { transform: rotate(180deg); }
.covered summary:hover .cov-label { text-decoration: underline; }
.covered summary:focus-visible {
  outline: 3px solid var(--electric);
  outline-offset: 3px;
  border-radius: 6px;
}
.covered .card-bullets {
  margin: 0.4rem 0 0.15rem 0.35rem;
  color: var(--ink);
}

.site-footer {
  border-top: 1px solid var(--line);
  padding: 1.25rem 1.5rem 2rem;
  color: var(--muted);
  font-size: 0.88rem;
  background: var(--navy-mid);
}
.site-footer p { margin: 0.2rem 0; }

.tap-to-play {
  margin: 0.15rem 0 0.85rem;
  font-size: 1.15rem;
  padding: 0.85rem 1.45rem;
}
.tap-to-play[hidden] { display: none !important; }

.site-audio {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}
.mini-player {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 56px minmax(0, 1.2fr) auto minmax(160px, 2fr) auto;
  align-items: center;
  gap: 0.65rem 0.85rem;
  padding: 0.65rem calc(1rem + env(safe-area-inset-right, 0px)) calc(0.65rem + env(safe-area-inset-bottom, 0px)) calc(1rem + env(safe-area-inset-left, 0px));
  background: #0E1C30;
  border-top: 2px solid var(--electric);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.45);
  color: var(--ink);
}
.mini-player[hidden] { display: none !important; }
body.has-mini-player { padding-bottom: calc(7.25rem + env(safe-area-inset-bottom, 0px)); }
.mp-thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--navy);
  display: block;
}
.mp-thumb[hidden] { display: none !important; }
.mp-copy { min-width: 0; }
.mp-kicker {
  margin: 0;
  font-family: Outfit, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--electric);
}
.mp-title {
  display: block;
  margin: 0.1rem 0 0;
  font-family: Outfit, sans-serif;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
}
.mp-title:hover { color: var(--electric); text-decoration: underline; }
.mp-play {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: #071018;
  background: linear-gradient(180deg, #5AD4FF 0%, #00A8FF 48%, #0077C2 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    inset 0 -2px 0 rgba(0,40,80,0.4),
    0 3px 0 #003A66,
    0 6px 12px rgba(0,0,0,0.3);
}
.mp-play:hover { filter: brightness(1.08); }
.mp-play:active {
  transform: translateY(2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 1px 0 #003A66;
}
.mp-play:focus-visible { outline: 3px solid #00A8FF; outline-offset: 3px; }
.mp-seek-wrap {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}
.mp-time-cur, .mp-time-dur {
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
  color: var(--muted);
  min-width: 2.4rem;
}
.mp-time-dur { text-align: right; }
.mp-seek {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  accent-color: var(--electric);
  height: 1.2rem;
}
.mp-close {
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 8px;
}
.mp-close:hover { color: var(--ink); background: var(--navy-mid); }
.mp-close:focus-visible { outline: 2px solid var(--electric); outline-offset: 2px; }
.episode-mirror {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.5rem;
  min-width: 0;
}
.episode-mirror .mp-seek { flex: 1 1 auto; }
#episode-player[hidden] { display: none !important; }
@media (max-width: 640px) {
  .mini-player {
    grid-template-columns: 48px minmax(0, 1fr) 44px 40px;
    grid-template-areas:
      "thumb copy play close"
      "seek seek seek seek";
    gap: 0.45rem 0.65rem;
    padding: 0.55rem calc(0.75rem + env(safe-area-inset-right, 0px)) calc(0.55rem + env(safe-area-inset-bottom, 0px)) calc(0.75rem + env(safe-area-inset-left, 0px));
  }
  .mp-thumb { width: 48px; height: 48px; grid-area: thumb; }
  .mp-copy { grid-area: copy; }
  .mp-play { grid-area: play; width: 42px; height: 42px; }
  .mp-close { grid-area: close; }
  .mp-seek-wrap { grid-area: seek; }
  body.has-mini-player { padding-bottom: calc(8.25rem + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 720px) {
  .episode-card { grid-template-columns: 1fr; }
  .card-top, .archive-top {
    grid-template-columns: 1fr;
    grid-template-areas:
      "meta"
      "sub"
      "btn"
      "notes";
    align-items: stretch;
  }
  .card-actions, .archive-actions { align-items: stretch; width: 100%; align-self: stretch; }
  .listen-btn { align-self: stretch; width: 100%; }
  .show-notes-link { justify-self: center; align-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
@media (min-width: 641px) {
  /* Desktop: sit the title close under the sticky header, still inside the
     banner's dark sky and clear of the splash. Do not change the banner file. */
  .hero {
    align-items: flex-start;
  }
  .hero-band {
    justify-content: flex-start;
    padding: 30px 1rem 0.35rem;
  }
}
@media (max-width: 640px) {
  :root { --header-h: calc(9rem + env(safe-area-inset-top, 0px)); }
  .site-header { flex-direction: column; align-items: flex-start; }
  /* Phone: title + subtitle sit in a navy band ABOVE the locked 16:9 banner
     so a readable subtitle cannot collide with the splash. Do not crop or
     alter the banner file. Splash and both hosts stay fully in frame. */
  .hero {
    max-height: none;
    overflow: visible;
  }
  .hero-frame {
    aspect-ratio: auto;
    max-height: none;
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  .hero-art {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    order: 2;
  }
  .hero-band {
    position: static;
    height: auto;
    order: 1;
    justify-content: flex-start;
    padding: 0.85rem 1rem 0.7rem;
    background: var(--navy);
  }
  .hero-band h1 {
    font-size: clamp(0.9rem, 5.6cqi, 1.2rem);
    line-height: 1.2;
  }
  .hero-band p {
    margin: 0.4rem auto 0;
    font-size: 0.875rem; /* 14px at the default 16px root */
    line-height: 1.35;
    max-width: 22.5rem;
  }
  .notes-table thead { display: none; }
  .notes-table tbody th { width: auto; display: block; padding-bottom: 0.2rem; }
  .notes-table tbody td { display: block; }
  /* Phone toast: keep the full sentence on one line; desktop rules stay unchanged. */
  .drop-toast {
    width: calc(100vw - 1rem);
    max-width: calc(100vw - 1rem);
    box-sizing: border-box;
    padding-left: 0.85rem;
    padding-right: 0.85rem;
    justify-content: center;
    gap: 0.5rem;
  }
  .drop-toast p {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    line-height: 1.3;
    white-space: nowrap;
    text-align: center;
  }
  .audio-layout {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }
  .audio-art {
    max-height: 180px;
    width: 100%;
  }
  .audio-head {
    flex-wrap: wrap;
    row-gap: 0.45rem;
  }
  .archive-thumb-link, .archive-thumb { width: 112px; }
  .archive-thumb { height: 63px; }
  .archive-row {
    column-gap: 0.7rem;
    padding: 0.65rem;
    grid-template-areas:
      "thumb main"
      "covered covered";
  }
  .covered {
    grid-column: 1 / -1;
  }
}
.show-section { margin: 2rem 0 2.75rem; }
.show-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
  flex-wrap: wrap;
  margin: 0 0 1rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--line);
}
.show-section-head h2, main > h1.show-page-title {
  margin: 0;
  font-size: 1.35rem;
  color: var(--ink);
}
.section-link {
  font-family: Outfit, sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
}
.empty-state {
  background: var(--navy-card);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  padding: 0;
  margin: 0;
  color: var(--ink);
}
.empty-art {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--navy-mid);
}
.empty-state-copy {
  margin: 0;
  padding: 1.05rem 1.25rem 1.2rem;
  font-size: 1.05rem;
  border-top: 1px solid var(--line);
}
.empty-state-text .empty-state-copy { border-top: 0; }
.teaser-note {
  margin: 0.35rem 0 0;
  color: var(--electric);
  font-family: Outfit, sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
}
.teaser-card h2 { margin: 0; }
.teaser-row .archive-thumb-link { pointer-events: none; }
.show-kicker {
  margin: 0 0 0.35rem;
  color: var(--electric);
  font-family: Outfit, sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  scroll-margin-top: calc(var(--header-h) + 28px);
}
.show-kicker a { color: var(--electric); }
.archive-tools {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
  margin: 0 0 1.35rem;
}
.archive-tools label {
  font-family: Outfit, sans-serif;
  font-weight: 600;
  color: var(--ink);
}
.archive-tools select {
  background: var(--navy-mid);
  color: var(--ink);
  border: 1px solid var(--electric);
  border-radius: 8px;
  padding: 0.45rem 0.75rem;
  font-family: Outfit, sans-serif;
  font-weight: 500;
  font-size: 1rem;
  min-height: 2.4rem;
}
.archive-tools select:focus-visible {
  outline: 2px solid var(--electric);
  outline-offset: 2px;
}
.archive-group { margin: 0 0 2rem; }
.archive-group[hidden] { display: none !important; }
.archive-group > h2 {
  margin: 0 0 0.75rem;
  font-size: 1.2rem;
}
/* Filtered to one show (show-name links land here): heading + lead match the old show page. */
.archive-group.is-solo > h2 { margin: 0; font-size: 1.35rem; color: var(--ink); }
.archive-group-lead[hidden] { display: none; }
.archive-group.is-solo > .archive-group-lead { margin: 0.75rem 0 1rem; }
.recommended-links { margin: 2rem 0; }
.recommended-links h2 { margin: 0 0 0.7rem; }