/* ============================================================
   EREBUS RADIO - styles.css
   Dark, full-bleed nightlife/broadcast. Unbounded + Spline Sans.
   ============================================================ */

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
ul, ol { list-style: none; margin: 0; padding: 0; }
img, picture, video, iframe { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* ---- Tokens ---- */
:root {
  --font-display: "Unbounded", system-ui, sans-serif;
  --font-body: "Spline Sans", system-ui, sans-serif;
  --font-mono: "Spline Sans Mono", ui-monospace, monospace;

  --fs-hero: clamp(2.7rem, 6.2vw, 5.4rem);
  --fs-h1: clamp(2.3rem, 5vw, 4rem);
  --fs-h2: clamp(1.7rem, 3.2vw, 2.6rem);
  --fs-h3: clamp(1.25rem, 2vw, 1.6rem);
  --fs-lg: clamp(1.15rem, 1.6vw, 1.35rem);
  --fs-body: 1.0625rem;
  --fs-label: 0.78rem;

  /* Neutrals are tinted toward the brand hue (h44, sampled from the logo's
     orange hex-sphere) so surfaces read as warm charcoal rather than the
     aubergine cast the previous h340 tint gave them. */
  --bg: oklch(15% 0.018 44);
  --bg-deep: oklch(11% 0.016 44);
  --surface: oklch(19% 0.022 44);
  --surface-2: oklch(24% 0.024 44);
  --line: oklch(34% 0.024 44);
  --line-strong: oklch(46% 0.03 44);
  --text: oklch(96% 0.007 44);
  --text-muted: oklch(74% 0.016 44);
  --text-dim: oklch(60% 0.016 44);
  /* Small header/topbar text sits brighter than --text-muted so it holds up
     against the hero video when the sticky header overlaps it. */
  --text-header: oklch(88% 0.014 44);
  /* Brand orange. The logo's brightest orange is oklch(61.8% 0.172 44);
     lifted to 70% L so it carries a CTA on a dark page and keeps 6.9:1 as
     text on --bg / 6.4:1 for --accent-ink on the button. */
  --accent: oklch(70% 0.175 44);
  --accent-hover: oklch(75% 0.15 44);
  --accent-ink: oklch(20% 0.03 44);
  /* Semantic "live" only (the ON AIR dot). Drawn from the deep red hexagons
     in the logo (h25), not a second brand accent. */
  --live: oklch(58% 0.19 25);

  --scrim-strong: oklch(9% 0.016 44 / 0.82);

  /* Legibility shadow for small text in the header/topbar, which the sticky
     header carries over the hero video on scroll. Tight and downward so it
     reads as depth, not as a glow. */
  --shadow-text: 0 1px 2px oklch(0% 0 0 / 0.55);

  --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px;
  --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px;
  --space-4xl: 96px; --space-5xl: 128px;

  --measure: 66ch;
  --container: 1240px;
  --pad-x: clamp(20px, 5vw, 48px);
  --sec-y: clamp(64px, 9vw, 128px);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  --radius: 4px;
  --radius-lg: 8px;
}

/* ---- Base ---- */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.62;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; line-height: 1.02; letter-spacing: -0.02em; overflow-wrap: break-word; }
p { max-width: var(--measure); }
strong { color: var(--text); font-weight: 600; }
::selection { background: var(--accent); color: var(--accent-ink); }

.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--pad-x); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.media-cover { width: 100%; height: 100%; object-fit: cover; }

.skip-link {
  position: fixed; top: -100px; left: var(--space-md); z-index: 200;
  background: var(--accent); color: var(--accent-ink); font-weight: 600;
  padding: var(--space-sm) var(--space-lg); border-radius: var(--radius);
  transition: top 200ms var(--ease-out);
}
.skip-link:focus { top: var(--space-md); }

/* ---- Eyebrow / labels ---- */
.eyebrow, .hero__eyebrow, .pagehero__eyebrow, .listen__kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex; align-items: center; gap: var(--space-xs);
}
.eyebrow::before {
  content: ""; width: 22px; height: 2px; background: var(--accent);
  display: inline-block;
}

/* ---- ON AIR pill ---- */
.onair { display: inline-flex; align-items: center; gap: var(--space-xs); }
.onair__dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--live);
  box-shadow: 0 0 0 0 var(--live);
  animation: onair-pulse 2.4s var(--ease-in-out) infinite;
}
.onair__label {
  font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-header);
  text-shadow: var(--shadow-text);
}
@keyframes onair-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* ---- Top bar ---- */
.topbar {
  background: var(--bg-deep);
  border-bottom: 1px solid var(--line);
  font-size: 0.85rem;
}
.topbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-md); min-height: 40px; padding-block: var(--space-2xs);
}
.topbar__mail {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  color: var(--text-header); font-family: var(--font-mono); letter-spacing: 0.02em;
  text-shadow: var(--shadow-text);
  transition: color 200ms var(--ease-out);
}
.topbar__mail svg { width: 15px; height: 15px; flex: none; filter: drop-shadow(0 1px 2px oklch(0% 0 0 / 0.55)); }
.topbar__live { flex: none; }

/* ---- Header ---- */
.header {
  position: sticky; top: 0; z-index: 100;
  background: oklch(15% 0.018 44 / 0.72);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: background 250ms var(--ease-out), border-color 250ms var(--ease-out);
}
.header--scrolled {
  background: oklch(13% 0.017 44 / 0.92);
  border-bottom-color: var(--line);
}
.header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-lg); min-height: 68px;
}
.brand { display: inline-flex; align-items: center; gap: var(--space-sm); flex: none; }
.brand__mark { width: 40px; height: 40px; flex: none; filter: drop-shadow(0 2px 6px oklch(0% 0 0 / 0.4)); }
.brand__word {
  font-family: var(--font-display); font-weight: 700; font-size: 1.18rem;
  letter-spacing: -0.01em; line-height: 1; color: var(--text);
  text-shadow: var(--shadow-text);
}
.brand__word span { color: var(--accent); font-weight: 500; }

.nav { display: none; }
.nav__list { display: flex; align-items: center; gap: clamp(var(--space-md), 2vw, var(--space-xl)); }
.nav__item { display: inline-flex; }
.nav__link {
  font-size: 0.95rem; font-weight: 500; color: var(--text-header);
  text-shadow: var(--shadow-text);
  position: relative; padding-block: var(--space-xs);
  transition: color 200ms var(--ease-out);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform 220ms var(--ease-out);
}
.nav__link--active { color: var(--text); }
.nav__link--active::after { transform: scaleX(1); }

.header__actions { display: flex; align-items: center; gap: var(--space-sm); flex: none; }

/* ---- Hamburger ---- */
.navtoggle {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 10px; flex: none;
}
.navtoggle__bar {
  height: 2px; width: 100%; background: var(--text); border-radius: 2px;
  transition: transform 250ms var(--ease-out), opacity 200ms var(--ease-out);
}
.navtoggle[aria-expanded="true"] .navtoggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navtoggle[aria-expanded="true"] .navtoggle__bar:nth-child(2) { opacity: 0; }
.navtoggle[aria-expanded="true"] .navtoggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- Mobile nav ---- */
.mobilenav {
  position: fixed; inset: 0; z-index: 90;
  width: 100%; max-width: 100%;
  background: var(--bg-deep);
  display: flex; flex-direction: column; justify-content: flex-start;
  /* Top padding clears the sticky header (topbar + header ~108px) so the
     first link never sits behind it, even on short in-app-browser viewports. */
  padding: calc(var(--space-5xl) + var(--space-md)) var(--pad-x) var(--space-2xl);
  transform: translateY(-100%);
  transition: transform 380ms var(--ease-in-out);
  overflow: hidden auto;
  visibility: hidden;
}
.mobilenav--open { transform: translateY(0); visibility: visible; }
.mobilenav__list { display: flex; flex-direction: column; gap: var(--space-xs); }
.mobilenav__link {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.8rem, 8vw, 2.6rem); letter-spacing: -0.02em;
  color: var(--text); padding-block: var(--space-xs);
  display: inline-block; width: fit-content;
  transition: color 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.mobilenav__foot {
  margin-top: auto; padding-top: var(--space-xl);
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: var(--space-md);
}
.mobilenav__foot .btn { width: 100%; }
.mobilenav__foot .topbar__mail { font-size: 0.95rem; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  font-weight: 600; font-size: 0.95rem; letter-spacing: 0.01em;
  padding: 0.8em 1.5em; border-radius: var(--radius);
  max-width: 100%; text-align: center; white-space: normal; overflow-wrap: break-word;
  transition: background 200ms var(--ease-out), color 200ms var(--ease-out),
              border-color 200ms var(--ease-out), transform 130ms var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn__icon { width: 18px; height: 18px; flex: none; }
.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--ghost { border: 1px solid var(--line-strong); color: var(--text); }
.btn--light { background: var(--text); color: var(--bg-deep); }

/* ---- Marquee ---- */
.marquee {
  overflow: hidden; border-block: 1px solid var(--line);
  background: var(--bg-deep); padding-block: var(--space-md);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex; align-items: center; gap: var(--space-2xl); width: max-content;
  animation: marquee 32s linear infinite;
}
.marquee__item {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.1rem, 2.2vw, 1.7rem); letter-spacing: 0.01em;
  color: var(--text); white-space: nowrap; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: var(--space-2xl);
}
.marquee__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Centred brand logo overlaid on the genre strip, with a black radial fade
   behind it so the scrolling text reads softly around the mark. */
.marqueeband { position: relative; z-index: 3; }
.marquee__brand {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: clamp(220px, 30vw, 320px); aspect-ratio: 1 / 1;
  display: grid; place-items: center; pointer-events: none;
}
.marquee__brand::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(closest-side,
    var(--bg) 32%,
    color-mix(in oklch, var(--bg) 55%, transparent) 54%,
    transparent 76%);
}
.marquee__logo {
  position: relative; width: clamp(104px, 15vw, 187px); height: auto; aspect-ratio: 1 / 1;
  filter: drop-shadow(0 4px 20px oklch(0% 0 0 / 0.55));
}

/* ---- Home hero ---- */
.hero { position: relative; min-height: 75dvh; display: flex; align-items: center; isolation: isolate; }
.hero__media { position: absolute; inset: 0; z-index: -2;
  background: var(--bg-deep) url("/assets/hero-poster.jpg") center 42% / cover no-repeat; }
.hero__img, .hero__video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.hero__video { display: block; }
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, var(--bg) 2%, transparent 42%),
    linear-gradient(105deg, var(--scrim-strong) 8%, transparent 62%),
    linear-gradient(to bottom, oklch(9% 0.016 44 / 0.55), transparent 30%);
}
.hero__inner { width: 100%; padding-block: var(--space-2xl); }
.hero__eyebrow { margin-bottom: var(--space-lg); }
.hero__title {
  font-size: var(--fs-hero); font-weight: 800; line-height: 0.96; letter-spacing: -0.03em;
  max-width: 20ch; text-wrap: pretty;
}
.hero__title em { font-style: normal; color: var(--accent); }
.hero__lede {
  margin-top: var(--space-lg); font-size: var(--fs-lg); color: var(--text-muted);
  max-width: 48ch; line-height: 1.55;
}
.hero__actions { margin-top: var(--space-xl); display: flex; flex-wrap: wrap; gap: var(--space-sm); }
/* Forced hero H1 break is desktop-only; let it wrap naturally on phones,
   balanced so no single word is stranded on its own line. */
@media (max-width: 767px) {
  .hero__title br { display: none; }
  .hero__title { text-wrap: balance; }
}

/* ---- Page hero (subpages) ---- */
.pagehero { position: relative; isolation: isolate; display: flex; align-items: flex-end;
  min-height: clamp(340px, 56vh, 560px); }
.pagehero__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 40%; }
.pagehero__scrim { position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, var(--bg) 3%, transparent 55%),
    linear-gradient(100deg, var(--scrim-strong) 5%, transparent 65%); }
.pagehero__inner { padding-top: var(--space-4xl); padding-bottom: var(--space-2xl); }
.pagehero__eyebrow { margin-bottom: var(--space-md); }
.pagehero__title { font-size: var(--fs-h1); max-width: 18ch; text-wrap: balance; }
.pagehero__lede { margin-top: var(--space-md); font-size: var(--fs-lg); color: var(--text-muted); max-width: 52ch; }

/* ---- Section ---- */
.section { padding-block: var(--sec-y); }
.section--deep { background: var(--bg-deep); }
.section--feature { padding-block: calc(var(--sec-y) * 0.5); }
.section__head { max-width: 60ch; margin-bottom: var(--space-2xl); }
.section__title { font-size: var(--fs-h2); margin-top: var(--space-sm); }
.section__lede { margin-top: var(--space-md); color: var(--text-muted); font-size: var(--fs-lg); }

/* ---- Split (asymmetric) ---- */
.split { display: grid; gap: var(--space-2xl); align-items: center; }
.split__media { position: relative; border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 4 / 3; border: 1px solid var(--line); }
.split__img { width: 100%; height: 100%; object-fit: cover; }
.split__body > * + * { margin-top: var(--space-md); }
.split__body .eyebrow { margin-bottom: var(--space-2xs); }

/* ---- Feature rows (square image left, text right) ---- */
.feature { display: grid; gap: var(--space-xl); align-items: center; }
.feature__media { position: relative; border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 1 / 1; border: 1px solid var(--line); }
.feature__img { width: 100%; height: 100%; object-fit: cover; }
.feature__body > * + * { margin-top: var(--space-md); }
.feature__text { color: var(--text-muted); font-size: var(--fs-lg); line-height: 1.55; max-width: 54ch; }
@media (min-width: 900px) {
  .feature { grid-template-columns: minmax(0, 265px) minmax(0, 1fr); gap: var(--space-3xl); }
}
/* Feature blocks on the home page link through to their strand page. Only the
   title is a real link; the ::after stretches its hit area over the whole
   block, so the whole thing is clickable but screen readers announce one link
   rather than three pointing at the same page. */
.feature--linked { position: relative; }
.feature__link { color: inherit; }
.feature__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.feature__more {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent);
}
.feature__more svg { width: 15px; height: 15px; flex: none; transition: transform 200ms var(--ease-out); }
.feature--linked .feature__img { transition: transform 450ms var(--ease-out); }

/* ---- DJ profiles (alternating editorial rows, deliberately not a card grid) ---- */
.djs { display: flex; flex-direction: column; gap: var(--space-4xl); }
.dj { display: grid; gap: var(--space-lg); align-items: start; }
/* Source photos vary from 400x225 to 1601x2400, so a fixed 4:3 frame keeps the
   rhythm. The ratio lives on the container, not the img: the width/height
   attributes are presentation hints that make both of the img's dimensions
   definite, which makes aspect-ratio on the img itself a no-op. */
.dj__media { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line);
  aspect-ratio: 4 / 3; }
/* Position bias favours faces, which sit high in most of these photos. */
.dj__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.dj__body > * + * { margin-top: var(--space-md); }
.dj__name { font-size: var(--fs-h2); }
.dj__show { display: block; margin-top: var(--space-xs); }
.dj__bio { color: var(--text-muted); }
.dj__bio > * + * { margin-top: var(--space-md); }
.dj__tags { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.dj__tag {
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim);
  border: 1px solid var(--line); border-radius: 100px;
  padding: 4px var(--space-sm);
}
.dj__links { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
.dj__link {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  font-size: 0.92rem; font-weight: 500; color: var(--accent);
  border-bottom: 1px solid transparent; transition: border-color 200ms var(--ease-out);
}
.dj__link svg { width: 14px; height: 14px; flex: none; }
.dj__handles { font-size: 0.92rem; color: var(--text-dim); }

@media (min-width: 860px) {
  /* Top-aligned, not centred: bios run from two to three paragraphs, and
     centring leaves the photo starting below the name on the shorter ones. */
  .dj { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: start; }
  /* Alternate sides without reordering the DOM, so the reading order and the
     mobile stack stay image-then-text throughout. The column template flips
     too, otherwise the media would land in the 7fr column on even rows and
     the photos would jump between two different widths down the page. */
  .dj:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .dj:nth-child(even) .dj__media { grid-column: 2; grid-row: 1; }
  .dj:nth-child(even) .dj__body { grid-column: 1; grid-row: 1; }
}

/* ---- Strengths (numbered stack, not cards) ---- */
.strengths { display: flex; flex-direction: column; }
.strengths__item {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-md) var(--space-lg);
  align-items: baseline; padding-block: var(--space-xl);
  border-top: 1px solid var(--line);
}
.strengths__item:last-child { border-bottom: 1px solid var(--line); }
.strengths__num {
  font-family: var(--font-mono); font-weight: 600; font-size: 0.95rem;
  color: var(--accent); letter-spacing: 0.05em; padding-top: 0.4em;
}
.strengths__title { font-size: var(--fs-h3); font-weight: 700; }
.strengths__text { grid-column: 2; color: var(--text-muted); max-width: 60ch; margin-top: var(--space-2xs); }

/* ---- Media band (full-bleed image + text) ---- */
.band { position: relative; isolation: isolate; display: flex; align-items: center;
  min-height: clamp(420px, 62vh, 620px); }
.band__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 35%; }
.band__scrim { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, var(--scrim-strong) 10%, oklch(9% 0.016 44 / 0.45) 55%, transparent 100%); }
.band__inner { padding-block: var(--space-4xl); }
.band__title { font-size: var(--fs-h2); max-width: 20ch; text-wrap: balance; }
.band__text { margin-top: var(--space-md); color: var(--text); max-width: 46ch; font-size: var(--fs-lg); }
.band__inner .btn { margin-top: var(--space-xl); }

/* ---- Founder (About editorial) ---- */
.founder { display: grid; gap: var(--space-2xl); align-items: start; }
.founder__media { position: relative; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--line); aspect-ratio: 3 / 4; }
/* Robert's portrait is exactly 3:4, so it fills the frame with no crop. The
   old 32% bias was tuned for the landscape microphone still that used to sit
   here; it would only matter again if this were swapped for a wider photo. */
.founder__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.founder__body > * + * { margin-top: var(--space-md); }
.founder__lead { font-size: var(--fs-lg); color: var(--text); }
.founder__body p { color: var(--text-muted); }
.founder__sign {
  font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent); margin-top: var(--space-lg);
}

/* ---- Schedule (broadcast EPG) ---- */
.epg { display: flex; flex-direction: column; gap: var(--space-2xl); }
.epg__day { }
.epg__dayname {
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3);
  display: flex; align-items: baseline; gap: var(--space-md);
  padding-bottom: var(--space-md); border-bottom: 2px solid var(--line-strong);
}
.epg__dayname span {
  font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim);
}
.epg__slot {
  display: grid; grid-template-columns: 1fr; gap: var(--space-2xs) var(--space-lg);
  padding-block: var(--space-md); border-bottom: 1px solid var(--line);
  transition: background 200ms var(--ease-out);
}
.epg__time {
  font-family: var(--font-mono); font-weight: 600; font-size: 0.95rem;
  color: var(--accent); letter-spacing: 0.02em; font-variant-numeric: tabular-nums;
}
.epg__show { font-weight: 600; font-size: 1.1rem; color: var(--text); }
.epg__host { color: var(--text-muted); font-size: 0.95rem; }
.epg__tag {
  display: inline-block; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim);
  border: 1px solid var(--line); border-radius: 100px; padding: 3px 10px; margin-top: var(--space-2xs);
}

/* ---- Listen cards ---- */
.listen { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
.listen__card {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--surface);
}
.listen__media { position: relative; aspect-ratio: 16 / 10; min-width: 0; }
.listen__img { width: 100%; height: 100%; object-fit: cover; }
.listen__body { padding: var(--space-xl); display: flex; flex-direction: column; gap: var(--space-sm); }
.listen__title { font-size: var(--fs-h3); font-weight: 700; }
.listen__text { color: var(--text-muted); }
.listen__cta { margin-top: var(--space-md); }

/* ---- Mixcloud player (cookie-safe click-to-load facade) ---- */
.player { position: relative; border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--surface); }
.player__facade { display: block; width: 100%; position: relative; text-align: left;
  color: var(--text); cursor: pointer; overflow: hidden;
  min-height: clamp(260px, 40vw, 360px);
  transition: transform 130ms var(--ease-out); }
.player__facade:active { transform: scale(0.99); }
.player__bg { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 45%; }
.player__scrim { position: absolute; inset: 0;
  background: linear-gradient(180deg, oklch(9% 0.016 44 / 0.45), oklch(9% 0.016 44 / 0.84)); }
.player__inner { position: relative; z-index: 1; min-height: inherit;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-md); padding: var(--space-2xl); text-align: center; }
.player__play { width: 76px; height: 76px; border-radius: 50%; flex: none;
  background: var(--accent); color: var(--accent-ink); display: grid; place-items: center;
  transition: transform 220ms var(--ease-out), background 200ms var(--ease-out); }
.player__play svg { width: 30px; height: 30px; margin-left: 3px; }
.player__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); }
.player__note { font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.5;
  letter-spacing: 0.01em; color: var(--text-muted); max-width: 44ch; }
.player__frame { padding: var(--space-md); }
.player__caption { font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted);
  display: inline-flex; align-items: center; gap: var(--space-xs); margin-bottom: var(--space-sm); }
.player__caption .onair__dot { width: 8px; height: 8px; }
.player__frame iframe { width: 100%; border: 0; display: block; border-radius: var(--radius); }
@media (hover: hover) and (pointer: fine) {
  .player__facade:hover .player__play { transform: scale(1.08); background: var(--accent-hover); }
}

/* Compact variant (homepage strip) */
.player--compact .player__facade { min-height: 0; padding: var(--space-md) var(--space-lg); background: var(--surface); }
.player__row { display: flex; align-items: center; gap: var(--space-md); text-align: left; }
.player--compact .player__play { width: 54px; height: 54px; }
.player--compact .player__play svg { width: 22px; height: 22px; margin-left: 2px; }
.player__copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.player--compact .player__title { font-size: 1.15rem; }
.player--compact .player__note { font-size: 0.72rem; max-width: 60ch; }

/* ---- Contact ---- */
.contact { position: relative; isolation: isolate; }
.contact__media { position: absolute; inset: 0; z-index: -2; }
.contact__img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 45%; }
.contact__scrim { position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, var(--scrim-strong) 0%, oklch(9% 0.016 44 / 0.6) 55%, oklch(11% 0.016 44 / 0.4) 100%),
    linear-gradient(to bottom, oklch(9% 0.016 44 / 0.5), transparent 30%); }
.contact__wrap { display: grid; gap: var(--space-2xl); align-items: center;
  padding-block: var(--sec-y); }
.contact__intro > * + * { margin-top: var(--space-md); }
.contact__mail {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  font-family: var(--font-mono); color: var(--text); font-size: 1.05rem;
  letter-spacing: 0.01em; margin-top: var(--space-md);
  transition: color 200ms var(--ease-out);
}
.contact__mail svg { width: 18px; height: 18px; flex: none; color: var(--accent); }
.contact__panel {
  background: oklch(13% 0.017 44 / 0.92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(var(--space-lg), 4vw, var(--space-2xl));
}

/* ---- Form ---- */
.form { display: flex; flex-direction: column; gap: var(--space-md); }
.form__row { display: grid; gap: var(--space-md); }
.form__group { display: flex; flex-direction: column; gap: var(--space-2xs); }
.form__label {
  font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted);
}
.form__input, .form__textarea {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 0.75em 0.9em; color: var(--text);
  transition: border-color 200ms var(--ease-out), background 200ms var(--ease-out);
  width: 100%;
}
.form__input::placeholder, .form__textarea::placeholder { color: var(--text-dim); }
.form__input:focus, .form__textarea:focus {
  outline: none; border-color: var(--accent); background: oklch(26% 0.024 44);
}
.form__textarea { resize: vertical; min-height: 130px; }
.form__submit { align-self: flex-start; margin-top: var(--space-2xs); }
.form-success {
  background: oklch(24% 0.05 150);
  border: 1px solid oklch(50% 0.09 150);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
}
/* Hidden via the attribute, not the class: the deploy-injected handler
   reveals the box with success.hidden = false. A blanket display:none on
   the class could never be undone by that, so the box stayed invisible and
   the hidden form left an empty panel behind. */
.form-success[hidden] { display: none; }
.form-success h3 { font-size: var(--fs-h3); margin-bottom: var(--space-xs); }
.form-success p { color: var(--text-muted); }

/* ---- CTA band ---- */
.ctaband { position: relative; isolation: isolate; display: flex; align-items: center;
  min-height: clamp(380px, 52vh, 520px); text-align: left; }
.ctaband__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%;
  object-fit: cover; object-position: 60% 50%; }
.ctaband__scrim { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, var(--scrim-strong) 20%, oklch(9% 0.016 44 / 0.4) 70%, transparent); }
.ctaband__inner { padding-block: var(--space-4xl); }
.ctaband__title { font-size: var(--fs-h1); max-width: 16ch; text-wrap: balance; }
.ctaband__actions { margin-top: var(--space-xl); display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* ---- Footer ---- */
.footer { background: var(--bg-deep); border-top: 1px solid var(--line); padding-block: var(--space-4xl) var(--space-xl); }
.footer__inner { display: grid; gap: var(--space-2xl); }
.footer__brand { display: flex; flex-direction: column; gap: var(--space-md); max-width: 40ch; }
.footer__brand .brand { align-self: flex-start; }
.footer__brand p { color: var(--text-muted); font-size: 0.95rem; }
.footer__col { min-width: 0; }
.footer__heading {
  font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim);
  margin-bottom: var(--space-md);
}
.footer__list { display: flex; flex-direction: column; gap: var(--space-xs); }
.footer__link, .footer__mail {
  color: var(--text-muted); font-size: 0.95rem;
  transition: color 200ms var(--ease-out);
}
.footer__mail { font-family: var(--font-mono); word-break: break-word; }
.footer__bottom {
  margin-top: var(--space-3xl); padding-top: var(--space-lg);
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg);
  align-items: center; justify-content: space-between;
  font-size: 0.85rem; color: var(--text-dim);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.footer__legal a { color: var(--text-dim); transition: color 200ms var(--ease-out); }

/* ---- Legal pages (deploy-rendered) ---- */
.legal-page { background: var(--bg); padding-block: var(--sec-y); }
.legal-page__inner { max-width: 68ch; margin-inline: auto; padding-inline: var(--pad-x); }
.legal-page__title { font-size: var(--fs-h1); margin-bottom: var(--space-md); margin-top: var(--space-lg); }
.legal-page__last-updated {
  font-family: var(--font-mono); font-size: 0.85rem; color: var(--text-dim);
  letter-spacing: 0.04em; margin-bottom: var(--space-2xl);
}
.legal-page__body { color: var(--text-muted); }
.legal-page__body > * + * { margin-top: var(--space-md); }
.legal-page__body p, .legal-page__body li { max-width: 70ch; }
.legal-page__body ul { list-style: disc; padding-left: 1.4em; display: flex; flex-direction: column; gap: var(--space-xs); }
.legal-page__body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.legal-page__section-heading {
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3);
  color: var(--text); margin-top: var(--space-2xl);
}
.legal-page__section-subheading {
  font-weight: 600; font-size: 1.1rem; color: var(--text); margin-top: var(--space-lg);
}

/* ---- Reveal (JS-gated; visible without JS) ---- */
html.js .reveal { opacity: 0; transform: translateY(18px); }
html.js .reveal.is-visible {
  opacity: 1; transform: none;
  transition: opacity 620ms var(--ease-in-out), transform 620ms var(--ease-in-out);
}

/* ---- Hover (gated) ---- */
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--accent-hover); }
  .btn--ghost:hover { border-color: var(--text); background: oklch(24% 0.024 44); }
  .btn--light:hover { background: oklch(88% 0.008 44); }
  .nav__link:hover { color: var(--text); }
  .nav__link:hover::after { transform: scaleX(1); }
  .topbar__mail:hover, .footer__link:hover, .footer__mail:hover,
  .footer__legal a:hover, .contact__mail:hover { color: var(--accent); }
  .mobilenav__link:hover { color: var(--accent); transform: translateX(6px); }
  .listen__card:hover { border-color: var(--line-strong); }
  .epg__slot:hover { background: oklch(19% 0.022 44 / 0.6); }
  .split__media:hover .split__img, .listen__card:hover .listen__img,
  .feature__media:hover .feature__img { transform: scale(1.04); }
  .split__img, .listen__img, .feature__img { transition: transform 600ms var(--ease-out); }
  /* Whole linked feature block reacts, not just the image the cursor is over */
  .feature--linked:hover .feature__img { transform: scale(1.04); }
  .feature--linked:hover .feature__link { color: var(--accent); }
  .feature--linked:hover .feature__more svg { transform: translateX(4px); }
  .dj__link:hover { border-bottom-color: var(--accent); }
}

/* ---- Responsive ---- */
@media (min-width: 560px) {
  .form__row--two { grid-template-columns: 1fr 1fr; }
  .listen__card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .listen__media { aspect-ratio: auto; }
  .epg__slot {
    grid-template-columns: 130px 1fr auto; align-items: baseline;
  }
  .epg__slot .epg__tag { justify-self: end; margin-top: 0; }
}
@media (min-width: 900px) {
  .nav { display: block; }
  .navtoggle { display: none; }
  .header__actions .btn--nav-cta { display: inline-flex; }
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split--reverse .split__media { order: 2; }
  .founder { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .founder--reverse .founder__media { order: 2; }
  .contact__wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .listen { grid-template-columns: minmax(0, 1fr); }
  /* Four columns is too tight at tablet width, so pair them up first and only
     go to a single row once there is room. */
  .footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl) var(--space-3xl); }
}
@media (min-width: 1040px) {
  .footer__inner { grid-template-columns: 1.6fr 1fr 1fr 1.1fr; gap: var(--space-3xl); }
}
@media (max-width: 899px) {
  .header__actions .btn--nav-cta { display: none; }
}
@media (max-width: 560px) {
  .onair__label { display: none; }
  .topbar__mail { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar__inner { gap: var(--space-sm); }
  /* text-wrap: balance can overflow the wide display face at narrow widths */
  .hero__title, .pagehero__title, .ctaband__title, .band__title,
  .section__title, .band__title { text-wrap: wrap; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .marquee__track { animation: none; }
  html.js .reveal { opacity: 1; transform: none; }
  /* Show the poster still instead of the moving hero footage */
  .hero__video { display: none; }
}