/* ============================================================
   The Connect Current — styles.css
   No framework. Design tokens below are the only place to edit
   brand colors — everything else references them.
   ============================================================ */

/* Site defaults to light (day) mode; theme.js flips to dark based on the
   visitor's stored choice or their local time (dark 7pm–6am). */
:root {
  --navy: #F2F5F8;
  --navy-light: #FFFFFF;
  --blue: #1E81AF;
  --blue-bright: #16688F;
  --cream: #0A1826;
  --cream-dim: rgba(10, 24, 38, 0.55);
  --text-primary: #0A1826;
  --text-secondary: rgba(10, 24, 38, 0.78);
  --border: rgba(10, 24, 38, 0.14);
  --border-strong: rgba(10, 24, 38, 0.32);
  --card-bg: #FFFFFF;
  --header-bg: rgba(255, 255, 255, 0.93);
  --track: rgba(10, 24, 38, 0.14);
  /* Which wordmark the splash sheen is masked to (see .page-splash__logo) */
  --splash-logo: url("../assets/logo-color-light.png");

  /* Brand fonts: Montserrat for headings, Inter for everything else */
  --font-heading: 'Montserrat', sans-serif;
  --font-sans: 'Inter', sans-serif;
  --font-mono: 'Inter', sans-serif;
  --space: 32px;
  --radius: 10px;
}

/* Dark mode — flipped when data-theme="dark" is set (either by the
   visitor's toggle click or automatically at sunset/sunrise) */
:root[data-theme="dark"] {
  --navy: #0A1826;
  --navy-light: #0F2233;
  /* Blues aligned to Connect.org's brand accent (#1E81AF) */
  --blue: #1E81AF;
  --blue-bright: #2EA3D9;
  --cream: #F7F3E9;
  --cream-dim: rgba(247, 243, 233, 0.62);
  --text-primary: #FFFFFF;
  --text-secondary: rgba(255, 255, 255, 0.85);
  --border: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.3);
  --card-bg: #111D2E;
  --header-bg: rgba(10, 24, 38, 0.92);
  --track: rgba(255, 255, 255, 0.14);
  --splash-logo: url("../assets/logo-color.png");

  /* Brand fonts: Montserrat for headings, Inter for everything else */
  --font-heading: 'Montserrat', sans-serif;
  --font-sans: 'Inter', sans-serif;
  --font-mono: 'Inter', sans-serif;
  --space: 32px;
  --radius: 10px;
}

/* (Light mode is the default; dark mode overrides above.) */

/* ---------- Reset & base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Branded scrollbar (Firefox) */
  scrollbar-color: var(--blue) var(--navy);
}

/* Branded scrollbar (Chrome/Edge/Safari) */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--navy); }
::-webkit-scrollbar-thumb {
  background: var(--blue);
  border-radius: 999px;
  border: 3px solid var(--navy);
}
::-webkit-scrollbar-thumb:hover { background: var(--blue-bright); }

body {
  margin: 0;
  background: var(--navy);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 0.5em;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--text-primary); }
a:hover { color: var(--blue-bright); }

.mono {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.07em;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: var(--space);
  padding-right: var(--space);
}

/* Visible focus everywhere — never remove outlines */
a:focus-visible,
button:focus-visible,
input:focus-visible,
audio:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--blue-bright);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------- Full-page splash / entrance animation ---------- */

.page-splash {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(46, 163, 217, 0.45), transparent 60%),
    radial-gradient(ellipse at 50% 80%, rgba(30, 129, 175, 0.22), transparent 65%),
    linear-gradient(160deg, var(--navy) 0%, #071626 55%, var(--navy) 100%);
  transition: opacity 1.1s cubic-bezier(0.32, 0.72, 0, 1),
              transform 1.1s cubic-bezier(0.32, 0.72, 0, 1),
              filter 0.9s ease;
}
:root[data-theme="light"] .page-splash {
  background:
    radial-gradient(ellipse at 50% 45%, rgba(30, 129, 175, 0.28), transparent 62%),
    radial-gradient(ellipse at 50% 82%, rgba(30, 129, 175, 0.14), transparent 65%),
    linear-gradient(160deg, #F7FAFC 0%, #E4EEF4 55%, #F7FAFC 100%);
}
/* Curtain-lift release: blur, bloom out, drift up. */
.page-splash.is-hiding {
  opacity: 0;
  transform: translateY(-8%) scale(1.02);
  filter: blur(6px);
  pointer-events: none;
}
.page-splash__inner {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  animation: splash-in 1.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* Masked to the wordmark's own alpha, so the sheen below sweeps across the
   letterforms instead of painting a visible rectangle over the transparent
   parts of the PNG. The mask follows whichever logo the theme is showing. */
.page-splash__logo {
  position: relative;
  overflow: hidden;              /* keeps the sheen inside the wordmark box */
  -webkit-mask-image: var(--splash-logo);
          mask-image: var(--splash-logo);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
.page-splash__logo img {
  width: min(300px, 48vw);
  height: auto;
  animation: splash-pulse 3.4s ease-in-out infinite;
  filter: drop-shadow(0 12px 40px rgba(30, 129, 175, 0.45));
}
/* "The current" — a band of light sweeping across the wordmark */
.page-splash__sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 35%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 65%
  );
  transform: translateX(-120%);
  animation: splash-sheen 3.4s cubic-bezier(0.5, 0, 0.2, 1) infinite;
  animation-delay: 0.7s;
  pointer-events: none;
}
@keyframes splash-sheen {
  0%        { transform: translateX(-120%); }
  45%, 100% { transform: translateX(120%);  }
}

/* Rising tide — three wave bands scroll at different speeds and swell
   upward, so the screen fills like water before the page is revealed. */
.page-splash__tide {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  height: 42vh;
  pointer-events: none;
  animation: tide-rise 2.6s cubic-bezier(0.32, 0.72, 0, 1) both;
}
.page-splash__band {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;                   /* two tiled copies of the wave path */
  height: 100%;
  will-change: transform;
}
.page-splash__band path { fill: currentColor; }
/* Each band drifts one full tile then repeats — seamless because the
   path is authored to tile at x = 1440. */
.page-splash__band--back {
  color: rgba(30, 129, 175, 0.24);
  animation: tide-drift 13s linear infinite;
}
.page-splash__band--mid {
  color: rgba(46, 163, 217, 0.20);
  height: 82%;
  animation: tide-drift 9s linear infinite reverse;
}
.page-splash__band--front {
  color: rgba(46, 163, 217, 0.30);
  height: 62%;
  animation: tide-drift 6.5s linear infinite;
}
@keyframes tide-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@keyframes tide-rise {
  0%   { transform: translateY(100%); opacity: 0; }
  40%  { opacity: 1; }
  100% { transform: translateY(0);    opacity: 1; }
}
/* Concentric ripple rings expanding out from the wordmark */
.page-splash__ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 260px;
  height: 260px;
  margin: -130px 0 0 -130px;
  border-radius: 50%;
  border: 1.5px solid rgba(46, 163, 217, 0.38);
  animation: splash-ripple 3.2s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  pointer-events: none;
}
.page-splash__ripple--b { animation-delay: 1s; border-color: rgba(46, 163, 217, 0.26); }
.page-splash__ripple--c { animation-delay: 2s; border-color: rgba(46, 163, 217, 0.16); }

@keyframes splash-in {
  0%   { opacity: 0; transform: translateY(28px) scale(0.86); filter: blur(6px); }
  55%  { opacity: 1; transform: translateY(0) scale(1);      filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1);      filter: blur(0); }
}
@keyframes splash-pulse {
  0%, 100% { opacity: 0.92; transform: translateY(0) scale(1); }
  50%      { opacity: 1;    transform: translateY(-8px) scale(1.02); }
}
@keyframes splash-ripple {
  0%   { transform: scale(0.35); opacity: 0.9; }
  70%  { opacity: 0.15; }
  100% { transform: scale(2.6);  opacity: 0; }
}
.page-splash .loader { height: 28px; }

/* On release the tide surges up past the viewport as the screen lifts —
   the two motions together read as one wave carrying the page in. */
.page-splash.is-hiding .page-splash__tide {
  animation: tide-surge 1.1s cubic-bezier(0.32, 0.72, 0, 1) forwards;
}
@keyframes tide-surge {
  to { transform: translateY(-115vh); }
}

@media (prefers-reduced-motion: reduce) {
  .page-splash__inner,
  .page-splash__logo img,
  .page-splash__sheen,
  .page-splash__ripple,
  .page-splash__tide,
  .page-splash__band { animation: none; }
  .page-splash__sheen { display: none; }
  .page-splash { transition: opacity 0.4s ease; }
}

/* Hero content rises + fades into place after the splash lifts */
.hero__content > * {
  opacity: 0;
  transform: translateY(22px);
  animation: hero-in 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.35s;
}
.hero__content > *:nth-child(1) { animation-delay: 0.35s; }
.hero__content > *:nth-child(2) { animation-delay: 0.5s;  }
.hero__content > *:nth-child(3) { animation-delay: 0.65s; }
.hero__content > *:nth-child(4) { animation-delay: 0.8s;  }
.hero__content > *:nth-child(5) { animation-delay: 0.95s; }
.hero__art {
  animation: hero-art-in 1.6s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.4s;
}
@keyframes hero-in {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes hero-art-in {
  from { opacity: 0; transform: scale(0.9) translateY(28px) rotate(-1.5deg); }
  to   { opacity: 1; transform: scale(1) translateY(0) rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__content > *, .hero__art { animation: none; opacity: 1; transform: none; }
}

/* ---------- Scroll reveal ----------
   ui.js tags qualifying blocks with .reveal, then flips .is-revealed the
   first time each one enters the viewport. Elements are visible by
   default so anything the observer misses still renders. */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
/* Staggered listen cards ripple in rather than snapping as a block */
.listen-btn.reveal:nth-child(2) { transition-delay: 0.06s; }
.listen-btn.reveal:nth-child(3) { transition-delay: 0.12s; }
.listen-btn.reveal:nth-child(4) { transition-delay: 0.18s; }
.listen-btn.reveal:nth-child(5) { transition-delay: 0.24s; }
.listen-btn.reveal:nth-child(6) { transition-delay: 0.30s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Scroll progress bar ---------- */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  z-index: 100;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, #0D4F6F, var(--blue), var(--blue-bright));
  pointer-events: none;
}

/* ---------- Theme toggle switch (animated sun/moon) ---------- */

.theme-switch {
  --w: 60px;
  position: relative;
  width: var(--w);
  height: 30px;
  padding: 0;
  margin: 0 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--track);
  cursor: pointer;
  overflow: hidden;
  transition: background 0.35s ease, border-color 0.35s ease;
}
.theme-switch__track {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, #cfe8f5 0%, #f2f5f8 100%);   /* day */
  transition: background 0.5s ease;
}
:root[data-theme="dark"] .theme-switch__track {
  background: linear-gradient(135deg, #0a1826 0%, #0f2233 100%);   /* night */
}
/* Sun icon shows in day mode, moon+stars show in dark mode */
.theme-switch__sun {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 18px;
  height: 18px;
  color: #E7A73A;
  opacity: 1;
  transition: opacity 0.35s ease;
}
.theme-switch__moon {
  position: absolute;
  top: 6px;
  left: 8px;
  width: 18px;
  height: 18px;
  color: rgba(255, 255, 255, 0.9);
  opacity: 0;
  transition: opacity 0.35s ease;
}
:root[data-theme="dark"] .theme-switch__sun { opacity: 0; }
:root[data-theme="dark"] .theme-switch__moon { opacity: 1; }

.theme-switch__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(140deg, #ffffff, #dbe4ec 90%);       /* day */
  box-shadow: 0 2px 6px rgba(10, 24, 38, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1), background 0.45s ease, box-shadow 0.45s ease;
}
/* In dark mode the thumb slides to the right and picks up brand blue
   (no more mustard yellow) */
:root[data-theme="dark"] .theme-switch__thumb {
  transform: translateX(30px);
  background: linear-gradient(140deg, #7CC8ED, #1E81AF 90%);
  box-shadow: 0 2px 10px rgba(30, 129, 175, 0.55);
}
.theme-switch:hover .theme-switch__thumb { filter: brightness(1.06); }
@media (prefers-reduced-motion: reduce) {
  .theme-switch__thumb, .theme-switch__track,
  .theme-switch__stars, .theme-switch__sun { transition: none; }
}

/* ---------- Custom cursor (fine pointers only) ---------- */

.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.cursor-dot {
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  background: var(--text-primary);
  mix-blend-mode: difference;
}
.cursor-ring {
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 1.5px solid var(--text-primary);
  mix-blend-mode: difference;
  transition: opacity 0.25s ease, width 0.22s ease, height 0.22s ease,
              margin 0.22s ease, background 0.22s ease, border-color 0.22s ease;
}
/* Grows over anything interactive; blend-mode keeps it readable on
   any background without picking a color */
.cursor-ring.is-hot {
  width: 54px;
  height: 54px;
  margin: -27px 0 0 -27px;
  background: rgba(255, 255, 255, 0.15);
}

@media (pointer: fine) {
  html.has-custom-cursor,
  html.has-custom-cursor * { cursor: none !important; }
  html.has-custom-cursor .cursor-dot,
  html.has-custom-cursor .cursor-ring { opacity: 1; }
}
/* Never hide the real cursor for touch or reduced-motion users */
@media (prefers-reduced-motion: reduce), (pointer: coarse) {
  html.has-custom-cursor,
  html.has-custom-cursor * { cursor: auto !important; }
  .cursor-dot, .cursor-ring { display: none; }
}

/* ---------- Skip link ---------- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--blue);
  color: #fff;
  padding: 12px 20px;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
}

/* ---------- Announcement bar (scrolling marquee) ---------- */

.announcement-bar {
  display: block;
  background: var(--blue);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  overflow: hidden;
  padding: 9px 0;
  text-decoration: none;
  transition: background 0.2s ease;
}
.announcement-bar:hover { background: var(--blue-bright); color: #fff; }

.marquee__icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  opacity: 0.9;
}

/* Infinite marquee.

   ui.js measures one group and clones it until the track is comfortably
   wider than the viewport, then writes the exact group width into
   --marquee-w and a duration into --marquee-dur. Translating by exactly
   one group's width lands the next copy pixel-perfect on the previous
   one's position, so the loop never visibly restarts — at any screen
   size. The percentage fallback keeps it sane before JS runs. */
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee var(--marquee-dur, 36s) linear infinite;
  will-change: transform;
  backface-visibility: hidden;   /* stops sub-pixel shimmer mid-scroll */
}
/* Pause on hover so anyone reading it can actually finish the sentence */
.announcement-bar:hover .marquee__track { animation-play-state: paused; }

.marquee__group {
  display: flex;
  align-items: center;
  gap: 32px;
  padding-right: 32px;
  flex-shrink: 0;      /* prevents the browser from squeezing groups on
                          reflow, which was what caused the glitchy reset */
  white-space: nowrap;
}

.marquee__sep {
  font-size: 1.05rem;
  opacity: 0.75;
}

@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-1 * var(--marquee-w, 50%)), 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .announcement-bar { text-align: center; }
  .marquee__group:nth-child(n + 2) { display: none; }
}

/* ---------- Header / nav ---------- */

/* Liquid glass: translucent, saturated blur with a light top edge */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-bg);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  border-bottom: 1px solid var(--border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 64px;
  padding-top: 32px;
  padding-bottom: 22px;   /* extra breathing room up top; logo still centered */
  position: relative;
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  padding: 8px 0;
  min-width: 0;
}

/* The global `img { height: auto }` reset would override the logos'
   height attribute — pin them explicitly so they never overflow */
.nav__brand img { height: 36px; width: auto; }

.nav__links {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav__links a {
  color: var(--text-primary);
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.08rem;      /* Round 8: header links slightly bigger */
  letter-spacing: 0.01em;
  padding: 12px 15px;      /* comfortable 44px touch targets */
}

/* The Subscribe pill is excluded — it keeps white text on its blue fill,
   otherwise the hover colour lands blue-on-blue and the label vanishes. */
.nav__links a:not(.nav__cta):hover,
.nav__links a:not(.nav__cta)[aria-current="page"] {
  color: var(--blue-bright);
}

.nav__cta { margin-left: 8px; }

/* Icon buttons in the nav (search, theme) */
.nav-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.nav-icon-btn:hover {
  color: var(--blue-bright);
  background: var(--track);
}

/* Spotlight-style search overlay */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  justify-content: center;
  padding-top: 14vh;
  background: rgba(3, 12, 22, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}
.search-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
.search-box {
  width: min(680px, calc(100vw - 40px));
  height: fit-content;
  padding: 12px 16px 12px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  background: color-mix(in srgb, var(--card-bg) 82%, transparent);
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: saturate(180%) blur(28px);
  -webkit-backdrop-filter: saturate(180%) blur(28px);
  transform: scale(0.96) translateY(-8px);
  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}
.search-overlay.is-open .search-box { transform: scale(1) translateY(0); }
.search-box svg { color: var(--cream-dim); flex-shrink: 0; }
.search-box input {
  flex: 1;
  font-family: var(--font-sans);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--text-primary);
  background: transparent;
  border: 0;
  padding: 12px 0;
  min-height: 44px;
}
.search-box input:focus { outline: none; }
.search-box input::placeholder { color: var(--cream-dim); }
.search-box__kbd {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--cream-dim);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 8px;
  white-space: nowrap;
}

/* Results dropdown under the search box */
.search-results {
  width: min(680px, calc(100vw - 40px));
  margin-top: 10px;
  padding: 8px;
  background: color-mix(in srgb, var(--card-bg) 88%, transparent);
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: saturate(180%) blur(28px);
  -webkit-backdrop-filter: saturate(180%) blur(28px);
  max-height: 60vh;
  overflow-y: auto;
  transform: scale(0.98) translateY(-4px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.2s ease;
}
.search-overlay.is-open .search-results.has-results {
  transform: scale(1) translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.search-result {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--text-primary);
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease;
}
.search-result + .search-result { margin-top: 2px; }
.search-result:hover,
.search-result.is-focused {
  background: var(--track);
  transform: translateX(2px);
}
.search-result img {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  flex-shrink: 0;
}
.search-result__body { min-width: 0; flex: 1; }
.search-result__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.98rem;
  margin: 0 0 2px;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.search-result__meta {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  color: var(--cream-dim);
  margin: 0;
}
.search-result mark {
  background: rgba(30, 129, 175, 0.22);
  color: inherit;
  padding: 0 2px;
  border-radius: 3px;
}
.search-results__empty {
  padding: 24px 16px;
  color: var(--cream-dim);
  text-align: center;
  font-size: 0.9rem;
}

/* ---------- Listen page ---------- */

.listen-page { padding: 56px var(--space) 72px; }
.listen-page h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 12px; }
.listen-page__lead {
  color: var(--text-secondary);
  font-size: 1.05rem;
  font-weight: 500;
  max-width: 60ch;
  margin: 0 0 48px;
}
/* Wide enough that every platform name and its call-to-action sit on a
   single line — six cards land as two even rows of three on desktop. */
.listen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 20px;
}
.listen-btn {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px 26px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 18px;
  color: var(--text-primary);
  text-decoration: none;
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}
.listen-btn:hover {
  transform: translateY(-3px);
  border-color: var(--blue-bright);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.28);
  color: var(--text-primary);
}
.listen-btn img {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  flex-shrink: 0;
}
.listen-btn__name {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.15rem;
  margin: 0 0 2px;
}
.listen-btn__cta {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--cream-dim);
  margin: 0;
}
.listen-btn__arrow {
  margin-left: auto;
  color: var(--blue-bright);
  display: inline-flex;
  opacity: 0.7;
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.3s ease;
}
.listen-btn:hover .listen-btn__arrow { opacity: 1; transform: translate(3px, -3px); }
@media (prefers-reduced-motion: reduce) {
  .search-overlay, .search-box { transition: none; }
}

/* Hamburger (pure CSS checkbox toggle) — hidden on desktop */
.nav-toggle {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  cursor: pointer;
}
.nav-hamburger span {
  display: block;
  height: 2px;
  background: var(--text-primary);
  border-radius: 2px;
}
.nav-toggle:focus-visible + .nav-hamburger {
  outline: 2px solid var(--blue-bright);
  outline-offset: 2px;
}

/* ---------- Buttons ---------- */

/* Components below set an explicit `display`, which would otherwise outrank
   the browser's `[hidden] { display: none }` and leave hidden elements
   (the Load More button in particular) stubbornly on screen. */
[hidden] { display: none !important; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 22px;
  border: 0;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  text-decoration: none;
}

.btn--primary {
  background: var(--blue);
  color: #fff;
  font-weight: 800;
  padding-left: 30px;
  padding-right: 30px;
}
/* The nav Subscribe pill gets noticeably more room on the sides.
   Scoped under .nav__links so it outranks the generic `.nav__links a`
   padding rule rather than losing the cascade to it. */
.nav__links .nav__cta {
  padding: 12px 52px;
  min-height: 48px;
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.06em;
}
.btn--primary:hover {
  background: var(--blue-bright);
  color: #fff;
}

/* Secondary action — outlined, for pairing beside a primary button */
.btn--ghost {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  padding-left: 26px;
  padding-right: 26px;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.btn--ghost:hover {
  border-color: var(--blue-bright);
  color: var(--blue-bright);
  background: var(--track);
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---------- Crooked-media arrow icon ---------- */

.arrow-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  vertical-align: -2px;
  transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1);
}
.contact-card__arrow .arrow-icon,
.about-page__contact-arrow .arrow-icon { width: 18px; height: 18px; vertical-align: 0; }
.listen-btn__arrow .arrow-icon { width: 18px; height: 18px; vertical-align: 0; }
.footer__links .arrow-icon { width: 13px; height: 13px; vertical-align: -1px; margin-left: 3px; }
.section-head__link .arrow-icon { width: 14px; height: 14px; margin-left: 2px; }
.btn .arrow-icon { width: 14px; height: 14px; margin-left: 4px; vertical-align: -1px; }

/* ---------- Hero ---------- */

.hero {
  padding: 72px 0 64px;
  position: relative;
  overflow: hidden;
}
/* Soft blue glow behind the hero */
.hero::before {
  content: '';
  position: absolute;
  top: -220px;
  right: -160px;
  width: 640px;
  height: 640px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(30, 129, 175, 0.28), transparent 65%);
  pointer-events: none;
}
/* Flowing wave lines, echoing the cover artwork.
   Waves run edge-to-edge across every full-width section, subtly */
.hero,
.featured,
.episodes {
  position: relative;
  overflow-x: clip;   /* keep waves from spilling sideways, but let the
                         orb pop above the featured section */
  overflow-y: visible;
}
.hero::after,
.featured::after,
.episodes::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../assets/waves.svg') center right / cover no-repeat;
  opacity: 0.22;
  pointer-events: none;
}
.featured::after { opacity: 0.12; transform: scaleY(-1); }
.episodes::after {
  opacity: 0.09;
  background-position: left center;
  transform: scale(1.05);
}
:root[data-theme="dark"] .hero::after { opacity: 0.14; }
:root[data-theme="dark"] .featured::after { opacity: 0.08; }
:root[data-theme="dark"] .episodes::after { opacity: 0.06; }
.hero > .container,
.featured > .container,
.episodes > .container { position: relative; z-index: 1; }

/* Scroll-driven wave pulse — a blue swell that sweeps across the
   background from left to right whenever the visitor scrolls.
   ui.js triggers a new pulse by toggling the .is-crashing class
   and setting a --pulse-tint hue based on scroll direction. */
.wave-pulse {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.4s ease;
  mix-blend-mode: screen;
}
.wave-pulse::before {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  top: -50%;
  height: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgba(46, 163, 217, 0.40), rgba(30, 129, 175, 0.12) 45%, transparent 70%);
  filter: blur(40px);
}
.wave-pulse.is-crashing {
  opacity: 1;
}
.wave-pulse.is-crashing::before {
  animation: wave-crash 1.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.wave-pulse.is-crashing-reverse::before {
  animation: wave-crash-reverse 1.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes wave-crash {
  0%   { transform: translateY(0)    scaleX(0.85); opacity: 0; }
  25%  { opacity: 0.8; }
  100% { transform: translateY(320%) scaleX(1.1); opacity: 0; }
}
@keyframes wave-crash-reverse {
  0%   { transform: translateY(320%) scaleX(0.85); opacity: 0; }
  25%  { opacity: 0.8; }
  100% { transform: translateY(0)    scaleX(1.1); opacity: 0; }
}
:root[data-theme="light"] .wave-pulse { mix-blend-mode: multiply; }
:root[data-theme="light"] .wave-pulse::before {
  background: radial-gradient(ellipse at 50% 50%, rgba(30, 129, 175, 0.25), rgba(30, 129, 175, 0.08) 45%, transparent 70%);
}
@media (prefers-reduced-motion: reduce) {
  .wave-pulse { display: none; }
}

.hero__layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: center;
}

.hero__eyebrow {
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 10px;
}

.hero__title {
  font-size: clamp(2rem, 5vw, 3.6rem);
  margin: 0 0 18px;
  white-space: nowrap;      /* "The Connect Current" stays on one line */
  letter-spacing: -0.01em;
  line-height: 1.02;
}
@media (max-width: 640px) {
  .hero__title { white-space: normal; font-size: clamp(2rem, 8.5vw, 2.9rem); }
}

.hero__host {
  color: var(--blue-bright);
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 26px;
}

.hero__description {
  color: var(--text-secondary);
  max-width: 56ch;
  margin: 0 0 28px;
}

.hero__art img {
  border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.hero-player {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-top: 4px;
}

.hero-player__label {
  color: var(--blue-bright);
  text-transform: uppercase;
  margin: 0 0 6px;
}

.hero-player__title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 14px;
}
.hero-player__title a {
  color: var(--text-primary);
  text-decoration: none;
}
.hero-player__title a:hover { color: var(--blue-bright); }

audio {
  width: 100%;
  display: block;
}

/* ---------- Custom podcast player ---------- */

.player {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 18px;
}
.player audio { display: none; }

.player__play {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 0;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--blue-bright));
  box-shadow: 0 8px 24px rgba(46, 144, 196, 0.35);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.player__play:hover {
  transform: scale(1.06);
  box-shadow: 0 10px 28px rgba(58, 169, 224, 0.45);
}
.player__play svg { margin-left: 1px; }

.player__body {
  flex: 1;
  min-width: 180px;
}

.player__seek {
  --fill: 0%;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--blue-bright) var(--fill), var(--track) var(--fill));
  cursor: pointer;
  margin: 8px 0 6px;
}
.player__seek::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 0;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
  transition: transform 0.12s ease;
}
.player__seek::-webkit-slider-thumb:hover { transform: scale(1.25); }
.player__seek::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 0;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}

.player__times {
  display: flex;
  justify-content: space-between;
  color: var(--cream-dim);
}

.player__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.player__pill {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 14px;
  min-height: 36px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.player__pill:hover {
  color: var(--text-primary);
  border-color: var(--blue-bright);
}
/* Speed pill lights up once it leaves 1× so the state is obvious */
.player__rate {
  min-width: 52px;
  font-variant-numeric: tabular-nums;
}
.player__rate.is-active {
  color: #fff;
  background: var(--blue);
  border-color: var(--blue);
}
.player__rate.is-active:hover {
  background: var(--blue-bright);
  border-color: var(--blue-bright);
  color: #fff;
}

/* Volume — mute button plus a slider that expands on hover/focus,
   the way the Apple Podcasts transport behaves. */
.player__volume {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 2px;
}
.player__mute {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.player__mute:hover {
  color: var(--text-primary);
  border-color: var(--blue-bright);
}
.player.is-muted .player__mute { color: var(--cream-dim); }

.player__vol {
  --fill: 100%;
  appearance: none;
  -webkit-appearance: none;
  width: 0;
  opacity: 0;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--blue-bright) var(--fill), var(--track) var(--fill));
  cursor: pointer;
  transition: width 0.28s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.2s ease;
}
/* Reveal on hover, on keyboard focus, and while dragging */
.player__volume:hover .player__vol,
.player__volume:focus-within .player__vol {
  width: 72px;
  opacity: 1;
}
.player__vol::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  transition: transform 0.12s ease;
}
.player__vol::-webkit-slider-thumb:hover { transform: scale(1.2); }
.player__vol::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}
/* Touch devices have no hover — keep the slider permanently open */
@media (hover: none) {
  .player__vol { width: 72px; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .player__vol { transition: none; }
}

/* Mini equalizer between the timestamps — dances while playing */
.player__eq {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.player__eq i {
  width: 3px;
  height: 100%;
  border-radius: 2px;
  background: var(--blue-bright);
  transform: scaleY(0.3);
  transform-origin: bottom;
}
.player.is-playing .player__eq { opacity: 1; }
.player.is-playing .player__eq i { animation: equalize 0.8s ease-in-out infinite; }
.player.is-playing .player__eq i:nth-child(2) { animation-delay: 0.15s; }
.player.is-playing .player__eq i:nth-child(3) { animation-delay: 0.3s; }
.player.is-playing .player__eq i:nth-child(4) { animation-delay: 0.45s; }

@media (prefers-reduced-motion: reduce) {
  .player.is-playing .player__eq i { animation: none; transform: scaleY(0.7); }
}

/* ---------- Mobile floating player ----------
   Docks the hero/episode player to the bottom of the viewport while
   playing and scrolled past its normal position. Uses safe-area-inset
   so it sits above the iOS home indicator. */
.player__sentinel {
  position: absolute;
  top: 0; left: 0;
  height: 1px; width: 1px;
  pointer-events: none;
}
@media (max-width: 767px) {
  .player.player--docked {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 90;
    padding: 12px 14px;
    background: color-mix(in srgb, var(--card-bg) 88%, transparent);
    backdrop-filter: saturate(180%) blur(24px);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    border: 1px solid var(--border-strong);
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
    gap: 10px;
    animation: dock-in 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .player.player--docked .player__actions { display: none; }
  .player.player--docked .player__body { min-width: 0; }
  .player.player--docked .player__play { width: 46px; height: 46px; }
  .player.player--docked .player__times { font-size: 0.72rem; }
}
@keyframes dock-in {
  from { transform: translateY(120%); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .player.player--docked { animation: none; }
}

/* ---------- Featured section ---------- */

.featured {
  background: var(--navy-light);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 88px 0 56px;
}

/* Breaking-wave crest above the "New to…" section only.
   Traditional arch that curls forward — evokes a wave cresting on
   the San Diego coast. Rendered from an SVG file so it stays crisp
   at any size and can be reused (and swapped out) without touching
   every markup file. */
/* The wrapper carries the idle float so JS is free to drive the image's
   own transform for the cursor parallax without the two fighting. */
.wave-crest-wrap {
  position: relative;
  display: block;
  width: clamp(120px, 22vw, 200px);
  margin: 8px 0 44px;
  cursor: pointer;
  animation: wave-float 5s ease-in-out infinite;
  transform-origin: 50% 60%;
  -webkit-tap-highlight-color: transparent;
}
.wave-crest-wrap:focus-visible {
  outline: 2px solid var(--blue-bright);
  outline-offset: 8px;
  border-radius: 10px;
}
.wave-crest {
  display: block;
  width: 100%;
  height: auto;
  color: var(--blue);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
/* Springy overshoot on the way back down from a splash */
.wave-crest-wrap.is-splashing .wave-crest {
  transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Rings that expand from wherever the wave was struck */
.wave-ripple {
  position: absolute;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid var(--blue-bright);
  border-radius: 50%;
  pointer-events: none;
  animation: wave-ripple-out 900ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes wave-ripple-out {
  from { transform: scale(0.3); opacity: 0.85; }
  to   { transform: scale(9);   opacity: 0; }
}
@keyframes wave-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25%      { transform: translateY(-8px) rotate(2deg); }
  50%      { transform: translateY(-3px) rotate(-1deg); }
  75%      { transform: translateY(-6px) rotate(1deg); }
}
@media (prefers-reduced-motion: reduce) {
  .wave-crest-wrap { animation: none; }
  .wave-crest { transition: none; }
  .wave-ripple { display: none; }
}

.featured .container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 48px;
  align-items: center;
}

.featured__intro h2 { font-size: 2.1rem; }
.featured__intro p { color: var(--text-secondary); font-weight: 500; }

.featured__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.featured-card {
  text-decoration: none;
  display: block;
}
.featured-card__image {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  margin-bottom: 14px;
  width: 100%;
}
.featured-card__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 6px;
}
.featured-card:hover .featured-card__title { color: var(--blue-bright); }
.featured-card__meta { color: var(--cream-dim); margin: 0; }

/* ---------- Episodes + sidebar layout ---------- */

.episodes { padding: 64px 0; }

.episodes__layout {
  display: grid;
  grid-template-columns: 65fr 35fr;
  gap: 48px;
  align-items: start;
}

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.featured__intro { text-align: left; }
.featured__intro .wave-crest-wrap { margin: 0 0 32px; }
.section-head h1,
.section-head h2 { font-size: 2.1rem; margin: 0; }

.episodes__intro {
  color: var(--text-secondary);
  font-size: 1.05rem;
  font-weight: 500;
  /* Narrow enough to break onto two lines, balanced so they're even */
  max-width: 52ch;
  text-wrap: balance;
  margin: -8px 0 28px;
  line-height: 1.55;
}
.section-head__link {
  color: var(--blue-bright);
  text-decoration: none;
  font-weight: 500;
  padding: 10px 0;
}
.section-head__link:hover { text-decoration: underline; }

/* Segmented filter (Apple-style sliding control) + filter panel */
.chips {
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 2;               /* sits above the section's wave overlay */
}
.seg-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.filter { position: relative; }
.filter__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--card-bg);
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.filter__btn:hover,
.filter__btn[aria-expanded="true"] {
  border-color: var(--blue-bright);
  color: var(--blue-bright);
}
.filter__panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 40;
  width: min(340px, calc(100vw - 2 * var(--space)));
  background: color-mix(in srgb, var(--card-bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(26px);
  -webkit-backdrop-filter: saturate(180%) blur(26px);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  padding: 20px;
  animation: panel-in 0.24s cubic-bezier(0.32, 0.72, 0, 1);
}

@keyframes panel-in {
  from { opacity: 0; transform: translateY(-8px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .filter__panel { animation: none; }
}
.filter__group + .filter__group { margin-top: 16px; }
.filter__label {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cream-dim);
  margin: 0 0 8px;
}
.filter__opts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.filter__opt {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 14px;
  min-height: 34px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.filter__opt:hover { border-color: var(--blue-bright); color: var(--text-primary); }
.filter__opt.is-active {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
.filter__clear {
  margin-top: 18px;
  width: 100%;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--blue-bright);
  background: transparent;
  border: 0;
  padding: 10px;
  min-height: 40px;
  cursor: pointer;
}
.filter__clear:hover { text-decoration: underline; }
/* Liquid-glass segmented control, evenly gapped */
.segmented {
  position: relative;
  display: inline-flex;
  gap: 2px;
  background: color-mix(in srgb, var(--card-bg) 72%, transparent);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.segmented__thumb {
  position: absolute;
  top: 5px;
  left: 0;
  height: calc(100% - 10px);
  background: var(--blue);
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(30, 129, 175, 0.4);
  transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1),
              width 0.42s cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform, width;
}
.segmented__btn {
  position: relative;
  z-index: 1;
  font-family: var(--font-sans);
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-secondary);
  background: transparent;
  border: 0;
  border-radius: 999px;
  padding: 0 20px;
  height: 36px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.22s ease;
}
.segmented__btn:hover { color: var(--text-primary); }
.segmented__btn.is-active { color: #fff; }

/* Episode cards */
.episode-grid {
  display: grid;
  gap: 20px;
}

/* Cards deal in as the feed lands, top-down. Because render.js writes the
   whole grid in one pass, the stagger is pure CSS — no JS orchestration. */
.episode-card,
.featured-card {
  animation: card-in 0.62s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.episode-card:nth-child(1),  .featured-card:nth-child(1) { animation-delay: 0.02s; }
.episode-card:nth-child(2),  .featured-card:nth-child(2) { animation-delay: 0.08s; }
.episode-card:nth-child(3),  .featured-card:nth-child(3) { animation-delay: 0.14s; }
.episode-card:nth-child(4)  { animation-delay: 0.20s; }
.episode-card:nth-child(5)  { animation-delay: 0.26s; }
.episode-card:nth-child(6)  { animation-delay: 0.32s; }
.episode-card:nth-child(7)  { animation-delay: 0.38s; }
.episode-card:nth-child(n + 8) { animation-delay: 0.44s; }
@keyframes card-in {
  from { opacity: 0; transform: translateY(18px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .episode-card, .featured-card { animation: none; }
}

.episode-card {
  position: relative;
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 22px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1),
              border-color 0.35s ease,
              box-shadow 0.35s ease;
}
/* Gradient sheen that fades in on hover */
.episode-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(46, 163, 217, 0.12), transparent 55%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.episode-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}
.episode-card:hover::before { opacity: 1; }
.episode-card__image { transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1); }
.episode-card:hover .episode-card__image { transform: scale(1.05); }
.episode-card__image-link { overflow: hidden; border-radius: 8px; display: block; }

.episode-card__image {
  border-radius: 8px;
  width: 100%;
}
.episode-card__meta {
  color: var(--cream-dim);
  margin: 0 0 8px;
}
.episode-card__title {
  font-size: 1.35rem;
  font-weight: 800;
  margin: 0 0 8px;
  line-height: 1.2;
}
.episode-card__title a {
  color: var(--text-primary);
  text-decoration: none;
}
.episode-card__title a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
.episode-card:hover .episode-card__title a { color: var(--blue-bright); }
.episode-card__preview {
  color: var(--cream-dim);
  font-size: 0.88rem;
  margin: 0;
}

.episode-card__tag {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--blue-bright);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 9px;
  margin-left: 6px;
  vertical-align: 1px;
}

.episodes__more {
  text-align: center;
  margin-top: 32px;
}

/* Loading + unavailable states */
.loading-note { color: var(--cream-dim); }

/* Equalizer loading animation */
.loader {
  display: inline-flex;
  align-items: flex-end;
  gap: 5px;
  height: 34px;
  padding: 24px 4px;
  box-sizing: content-box;
}
.loader i {
  width: 6px;
  height: 100%;
  border-radius: 3px;
  background: var(--blue);
  transform-origin: bottom;
  animation: equalize 0.9s ease-in-out infinite;
}
.loader i:nth-child(2) { animation-delay: 0.12s; }
.loader i:nth-child(3) { animation-delay: 0.24s; }
.loader i:nth-child(4) { animation-delay: 0.36s; }
.loader i:nth-child(5) { animation-delay: 0.48s; }

@keyframes equalize {
  0%, 100% { transform: scaleY(0.25); }
  50%      { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  .loader i { animation: none; transform: scaleY(0.6); }
}
.feed-unavailable {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px;
  text-align: center;
}
.feed-unavailable p { margin: 0 0 8px; font-weight: 700; }
.feed-unavailable__hint { color: var(--text-secondary); font-weight: 400 !important; }

/* ---------- Sidebar ---------- */

.sidebar {
  display: grid;
  gap: 28px;
}

/* Newsletter card — clean, JotForm-style form */
.sidebar__card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 32px;
}
.sidebar__card h2 {
  font-size: 1.45rem;
  font-weight: 800;
  white-space: nowrap;      /* newsletter header stays on one line */
  margin: 0 0 6px;
}
.sidebar__card__lead {
  color: var(--cream-dim);
  font-size: 0.88rem;
  margin: 0 0 20px;
}

.email-form { display: grid; gap: 12px; position: relative; }
/* Labels are for screen readers — the placeholders carry the visual cue */
.email-form > label,
.email-form__row label {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.email-form input[type="text"],
.email-form input[type="email"] {
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--text-primary);
  background: var(--navy);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 13px 16px;
  min-height: 48px;
  width: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.email-form input::placeholder { color: var(--cream-dim); }
.email-form input[type="text"]:focus,
.email-form input[type="email"]:focus {
  border-color: var(--blue-bright);
  box-shadow: 0 0 0 3px rgba(30, 129, 175, 0.25);
  outline: none;
}
.email-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.email-form__gdpr {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 6px 0 4px;
  background: color-mix(in srgb, var(--navy) 65%, transparent);
  display: grid;
  gap: 8px;
}
.email-form__gdpr legend {
  font-family: var(--font-heading);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cream-dim);
  padding: 0 6px;
  /* A legend is vertically centred on the fieldset's top border, so a second
     line straddles it and looks broken. Sized to stay on one line instead. */
  font-size: 0.66rem;
  white-space: nowrap;
}
.email-form__gdpr label {
  position: static;
  clip: auto;
  width: auto;
  height: auto;
  white-space: normal;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-primary);
  font-weight: 500;
  cursor: pointer;
  line-height: 1.35;
}
.email-form__gdpr input[type="checkbox"] {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  accent-color: var(--blue);
  margin-top: 2px;
}
.email-form .btn { margin-top: 2px; width: 100%; }
.email-form__note {
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--cream-dim);
  text-align: center;
  margin: 0;
}
@media (max-width: 480px) {
  .email-form__row { grid-template-columns: 1fr; }
}

/* "Listen On" — flush with the page background, official platform logos */
.listen-on {
  padding: 8px 4px;
}
.listen-on h2 {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cream-dim);
  margin-bottom: 18px;
}
/* Colored platform icons + themed labels — reads correctly in both themes */
.platform-logos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
  justify-items: start;
}
.platform-logos a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 6px 12px 6px 6px;
  border-radius: 12px;
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-primary);
  transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
}
.platform-logos a:hover {
  background: var(--track);
  transform: translateX(3px);
  color: var(--blue-bright);
}
.platform-logos img {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  flex-shrink: 0;
}

/* ---------- Single episode page ---------- */

.episode-page { padding: 48px var(--space) 72px; }

.episode-page__back { margin: 0 0 28px; }
.episode-page__back a {
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 500;
  padding: 10px 0;
}
.episode-page__back a:hover { color: var(--blue-bright); }

.episode-page__layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 48px;
  align-items: start;
  margin-bottom: 48px;
}
.episode-page__art {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  width: 100%;
}
.episode-page__meta {
  color: var(--blue-bright);
  text-transform: uppercase;
  margin: 0 0 14px;
}
.episode-page__title {
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  margin-bottom: 24px;
}
.episode-page__platforms {
  color: var(--cream-dim);
  margin-top: 16px;
}
.episode-page__platforms a { color: var(--text-secondary); }
.episode-page__platforms a:hover { color: var(--blue-bright); }

.episode-page__notes {
  max-width: 75ch;
  color: var(--text-secondary);
}
.episode-page__notes a { color: var(--blue-bright); }
.episode-page__notes p { margin: 0 0 1em; }

/* Episode page: two-column with a sidebar in the former empty space */
.episode-page__grid {
  display: grid;
  grid-template-columns: 65fr 35fr;
  gap: 48px;
  align-items: start;
}

/* Platform icon row (episode pages) */
.platform-icons {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0 0;
  padding: 0;
}
.platform-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1), border-color 0.25s ease, box-shadow 0.25s ease;
}
.platform-icons a:hover {
  transform: translateY(-3px);
  border-color: var(--blue-bright);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.3);
}
.platform-icons img { width: 26px; height: 26px; border-radius: 7px; }

/* Apple-style share row */
.share {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.share__label {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cream-dim);
  margin-right: 4px;
}
.share__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--card-bg) 75%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--text-primary);
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1), background 0.25s ease,
              border-color 0.25s ease, color 0.25s ease;
}
.share__btn:hover {
  transform: translateY(-3px) scale(1.06);
  border-color: var(--blue-bright);
  color: var(--blue-bright);
  background: var(--track);
}
.share__btn:active { transform: translateY(-1px) scale(0.98); }
/* "Copied" confirmation bubble */
.share__btn::after {
  content: 'Copied';
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--blue);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
}
.share__btn.is-copied::after { opacity: 1; transform: translateX(-50%) translateY(0); }

.episode-page__transcript {
  max-width: 75ch;
  margin-top: 56px;
  border-top: 1px solid var(--border);
  padding-top: 32px;
}
.episode-page__transcript h2 { font-size: 1.5rem; }
.episode-page__transcript-body { color: var(--text-secondary); }
.episode-page__transcript-body p { margin: 0 0 1em; }

.episode-not-found {
  text-align: center;
  padding: 80px 0;
}
.episode-not-found p { color: var(--text-secondary); margin-bottom: 24px; }

/* ---------- About page ---------- */

.about-page { padding: 56px var(--space) 72px; }
.about-page h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 40px; }
.about-page__layout {
  display: grid;
  grid-template-columns: 65fr 35fr;
  gap: 48px;
  align-items: start;
  margin-top: 24px;
}
.about-page__portrait {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center 30%;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  margin-bottom: 40px;
  box-shadow: 0 22px 60px rgba(10, 24, 38, 0.15);
}
.about-page__text p { color: var(--text-secondary); margin: 0 0 1.1em; }
.about-page__text a { color: var(--blue-bright); }

/* Contact block at the bottom of the about page */
.about-page__contact {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}
.about-page__contact-label {
  color: var(--blue);
  margin: 0 0 16px;
}
.about-page__contact-links {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.about-page__contact-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  transition: color 0.2s ease;
}
.about-page__contact-link:first-child {
  border-top: 1px solid var(--border);
}
.about-page__contact-link:hover {
  color: var(--blue-bright);
}
.about-page__contact-arrow {
  color: var(--blue-bright);
  display: inline-flex;
  transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1);
}
.about-page__contact-link:hover .about-page__contact-arrow {
  transform: translate(3px, -3px);
}

/* ---------- Contact page ---------- */

.contact-page { padding: 56px var(--space) 72px; max-width: 900px; }
.contact-page h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 14px; }
.contact-page__lead {
  color: var(--text-secondary);
  font-size: 1.05rem;
  max-width: 60ch;
  margin: 0 0 40px;
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 48px;
}
@media (max-width: 640px) {
  .contact-grid { grid-template-columns: 1fr; }
}
.contact-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px 28px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  color: var(--text-primary);
  text-decoration: none;
  transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1),
              border-color 0.25s ease,
              box-shadow 0.25s ease;
}
.contact-card:hover {
  transform: translateY(-3px);
  border-color: var(--blue-bright);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.22);
  color: var(--text-primary);
}
.contact-card > div { flex: 1; min-width: 0; }
.contact-card__name {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.05rem;
  margin: 0 0 4px;
  color: var(--text-primary);
}
.contact-card__value {
  font-size: 0.9rem;
  color: var(--cream-dim);
  margin: 0;
}
.contact-card__arrow {
  color: var(--blue-bright);
  flex-shrink: 0;
  display: inline-flex;
  transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1);
}
.contact-card:hover .contact-card__arrow { transform: translate(3px, -3px); }

.contact-page__social {
  padding-top: 36px;
  border-top: 1px solid var(--border);
}
.contact-page__social-label {
  color: var(--blue);
  margin: 0 0 16px;
}
.social-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.social-list a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-primary);
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9rem;
  min-height: 44px;
  transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.social-list a:hover {
  border-color: var(--blue-bright);
  color: var(--blue-bright);
  transform: translateY(-2px);
}

/* Footer social row — small icon-only pills under the slogan */
.footer__social {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: flex;
  gap: 10px;
}
.footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  background: transparent;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.footer__social a:hover {
  color: var(--blue-bright);
  border-color: var(--blue-bright);
  background: var(--track);
  transform: translateY(-2px);
}

/* ---------- 404 page ---------- */

.error-page {
  padding: 90px var(--space) 110px;
  max-width: 720px;
  text-align: center;
}
.error-page__wave {
  width: clamp(150px, 30vw, 220px);
  height: auto;
  margin: 0 auto 28px;
  animation: error-drift 7s ease-in-out infinite;
}
@keyframes error-drift {
  0%, 100% { transform: translateX(-8px) translateY(0); }
  50%      { transform: translateX(8px)  translateY(-5px); }
}
.error-page__code {
  color: var(--blue);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.error-page__title {
  font-size: clamp(1.9rem, 5vw, 3rem);
  margin: 0 0 18px;
}
.error-page__lead {
  color: var(--text-secondary);
  font-size: 1.05rem;
  margin: 0 auto 34px;
  max-width: 52ch;
}
.error-page__actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
.error-page__hint {
  color: var(--cream-dim);
  font-size: 0.88rem;
  margin: 0;
}
.error-page__hint kbd {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: 6px;
  padding: 2px 7px;
  margin: 0 2px;
  color: var(--text-primary);
}
@media (prefers-reduced-motion: reduce) {
  .error-page__wave { animation: none; }
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--navy-light);
  border-top: 1px solid var(--border);
  padding: 56px 0 24px;
}

.footer__layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 48px;
}

.footer__about {
  padding-top: 32px;         /* drops the wordmark for a more balanced eye line */
}
.footer__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px;
}
.footer__brand a {
  display: inline-flex;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.footer__brand a:hover { opacity: 0.85; }
.footer__brand img { height: 72px; width: auto; }

.footer__slogan {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
  white-space: nowrap;     /* tagline stays on one line */
}

.footer__heading {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cream-dim);
  margin: 0 0 6px;
}

.footer__links {
  display: grid;
  gap: 0;
  align-content: start;
  justify-items: start;
}
/* Every entry the same size, weight, tracking, height, and leading so the
   column reads as one uniform list rather than a stack of odd sizes. */
.footer__links a {
  color: var(--text-primary);
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
  letter-spacing: 0.01em;
  padding: 11px 0;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  transition: color 0.15s ease, transform 0.15s ease;
}
.footer__links a:hover {
  color: var(--blue-bright);
}
.footer__links a:hover .arrow-icon { transform: translate(2px, -2px); }

.footer__copyright {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--cream-dim);
  border-top: 1px solid var(--border);
  margin-top: 44px;
  padding-top: 22px;
}
.footer__copyright__note { margin-right: auto; }
.footer__produced {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--cream-dim);
  font-weight: 600;
  transition: color 0.2s ease;
}
.footer__produced:hover { color: var(--blue-bright); }
.footer__connect-logo {
  height: 34px;
  width: auto;
  transition: opacity 0.2s ease;
}
.footer__produced:hover .footer__connect-logo { opacity: 0.85; }

/* ============================================================
   Responsive — tablet (768–1024px)
   ============================================================ */

@media (max-width: 1024px) {
  .hero__layout,
  .episodes__layout,
  .episode-page__grid,
  .about-page__layout { gap: 32px; }

  .hero__title { font-size: clamp(2rem, 4.5vw, 2.8rem); }
  .section-head h2, .featured__intro h2 { font-size: 1.6rem; }

  .featured .container {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* ============================================================
   Responsive — mobile (<768px)
   ============================================================ */

@media (max-width: 767px) {
  :root { --space: 20px; }

  /* Hamburger nav */
  .nav-hamburger { display: flex; }
  .nav__links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--navy-light);
    border-bottom: 1px solid var(--border);
    padding: 12px var(--space) 20px;
    gap: 0;
  }
  .nav-toggle:checked ~ .nav__links { display: flex; }
  .nav__links a {
    padding: 13px 4px;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .nav__cta {
    margin: 12px 0 0;
    justify-content: center;
  }

  /* Single column everywhere */
  .hero { padding: 36px 0; }
  .hero__layout { grid-template-columns: 1fr; }
  .hero__art { order: -1; max-width: 320px; }

  .featured { padding: 40px 0; }
  .featured__grid { grid-template-columns: 1fr; }

  .episodes { padding: 44px 0; }
  .episodes__layout { grid-template-columns: 1fr; }

  .episode-card {
    grid-template-columns: 96px 1fr;
    gap: 16px;
    padding: 16px;
  }

  .episode-page__layout,
  .episode-page__grid,
  .about-page__layout { grid-template-columns: 1fr; gap: 28px; }
  .footer__layout { grid-template-columns: 1fr; gap: 32px; text-align: left; }
  .footer__social { justify-content: flex-start; }

  .episode-page__art { max-width: 320px; }

  /* Mobile polish */
  .hero__title { font-size: clamp(2rem, 8.5vw, 2.9rem); }
  .hero__eyebrow { font-size: 0.72rem; }
  .featured__intro h2, .section-head h2 { font-size: 1.5rem; }

  .container { padding-left: 18px; padding-right: 18px; }

  /* When docked player is up, add breathing room so it never covers the
     footer or the last episode card */
  main { padding-bottom: 96px; }
  .listen-grid { gap: 12px; }
  .listen-btn { padding: 18px 20px; gap: 14px; }
  .listen-btn img { width: 40px; height: 40px; }

  /* Contact grid: full column on mobile with generous tap targets */
  .contact-card { padding: 18px; }
  .about-page__contact { padding-top: 24px; }

  /* Hero player padding trims down */
  .hero-player { padding: 16px 18px; }
  .player__actions { gap: 6px; }
  .player__pill { padding: 7px 12px; }

  /* Marquee text a touch smaller so it doesn't wrap */
  .announcement-bar { font-size: 0.9rem; }
}

/* Extra-small phones: keep the player playable */
@media (max-width: 380px) {
  .player__volume { display: none; }   /* system volume controls audio anyway */
  .nav__brand img { height: 30px; }
}