/* ==========================================================================
   Political Baby — profile site
   Implementation of P0liticalbaby.dc.html (Claude Design project).
   Single maximalist editorial theme; no dark-mode variant by design.
   ========================================================================== */

:root {
  /* Palette (lifted from the design file) */
  --ink:        #14080b;
  --bg:         #1a0a0e;
  --cream:      #f2e6e8;
  --blush:      #f7dfe5;
  --red:        #d4002a;
  --red-bright: #ff1f4f;
  --red-deep:   #a3002a;
  --neon:       #ff1f3d;
  --magenta:    #d4006a;
  --pink:       #ff3b6b;
  --pink-soft:  #ff7aa0;
  --pink-pale:  #ffd1dc;
  --pink-wash:  #ffe3ea;
  --text:       #fbeef0;
  --gold:       #b8893a;
  --gold-light: #e8c77a;
  --card:       #22101a;
  --card-edge:  #4a2530;

  /* Type */
  --font-display: 'Bodoni Moda', 'Didot', Georgia, serif;
  --font-script:  'Pinyon Script', 'Snell Roundhand', cursive;
  --font-sans:    'Archivo Narrow', 'Arial Narrow', Helvetica, sans-serif;
  --font-mono:    'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Layout */
  --shell: 1240px;
  --ticker-h: 44px;
  --ticker-speed: 40s;   /* was the `tickerSeconds` prop (15–90s) */
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: var(--pink); text-decoration: none; }
a:hover { color: var(--pink-pale); }

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

/* `img` and several flex/grid blocks below set an explicit display, which
   would otherwise beat the UA rule for the hidden attribute. */
[hidden] { display: none !important; }

h1, h2, h3, h4 { text-wrap: balance; }

:focus-visible {
  outline: 3px solid var(--pink);
  outline-offset: 3px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 60;
  padding: 10px 16px; background: var(--ink); color: #fff;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em;
  transition: top .15s;
}
.skip-link:focus { top: 8px; color: #fff; }

.shell { max-width: var(--shell); margin: 0 auto; }

section[id] { scroll-margin-top: var(--ticker-h); }

/* Shared bits ------------------------------------------------------------- */

.eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .16em;
}
.eyebrow--dark { color: var(--red-deep); }
.eyebrow--pink { color: var(--pink-soft); }

.btn {
  display: inline-block;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: background-color .18s, color .18s, transform .18s, box-shadow .18s;
}
.btn--red,
.btn--blush {
  padding: 16px 28px;
  border: 2px solid;
  box-shadow: 5px 5px 0 var(--ink);
}
.btn--red   { background: var(--red);   color: #fff; border-color: #fff; }
.btn--blush { background: #f7d6de; color: var(--ink); border-color: var(--ink); padding: 16px 24px; }

.btn--red:hover,
.btn--red:focus-visible   { background: var(--red-bright); color: #fff; transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }
.btn--blush:hover,
.btn--blush:focus-visible { background: #fff; color: var(--ink); transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }

.btn--ink {
  align-self: start;
  padding: 12px 20px;
  background: var(--ink);
  color: #fff;
}
.btn--ink:hover, .btn--ink:focus-visible { background: var(--red); color: #fff; }

/* Image slots ------------------------------------------------------------- */
/* Design-time <image-slot> becomes a real <img> with a styled empty state:
   drop a file at the src path and it simply appears. */

.slot {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background:
    repeating-linear-gradient(135deg, rgba(255,59,107,.10) 0 10px, transparent 10px 20px),
    #2b1a1e;
}
.slot > img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.slot::after {
  content: attr(data-placeholder);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pink-soft);
}
.slot--avatar { background: var(--blush); border-radius: 50%; }
.slot--avatar::after { content: none; }

/* ── Ticker ─────────────────────────────────────────────────────────────── */

.ticker {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: stretch;
  height: var(--ticker-h);
  background: var(--cream);
  color: var(--ink);
  border-bottom: 3px solid var(--red);
}

.ticker__live {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0 34px 0 18px;
  background: var(--red);
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: .06em;
  flex-shrink: 0;
  clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%);
}
.ticker__dot {
  font-size: 11px;
  animation: pbBlink 1.6s ease-in-out infinite;
}

.ticker__window {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.ticker__track {
  display: flex;
  white-space: nowrap;
  will-change: transform;
}
.ticker__track.is-animated {
  animation: pbTicker var(--ticker-speed) linear infinite;
}
.ticker__line {
  font-weight: 700;
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.ticker__contact {
  display: flex;
  align-items: center;
  padding: 0 18px;
  background: var(--ink);
  color: var(--pink-soft);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  flex-shrink: 0;
}
.ticker__contact:hover { color: var(--pink-pale); background: #000; }

@keyframes pbTicker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes pbBlink  { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ── Hero ───────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  overflow: hidden;
  background-color: #c9934f;
  /* Leopard print: dark cores over tan rosettes. */
  background-image:
    radial-gradient(ellipse 22px 16px at 20% 30%, #2a1508 55%, transparent 58%),
    radial-gradient(ellipse 14px 18px at 70% 60%, #2a1508 55%, transparent 58%),
    radial-gradient(ellipse 18px 12px at 45% 85%, #2a1508 55%, transparent 58%),
    radial-gradient(ellipse 30px 22px at 20% 30%, #8a5420 60%, transparent 63%),
    radial-gradient(ellipse 22px 26px at 70% 60%, #8a5420 60%, transparent 63%),
    radial-gradient(ellipse 26px 18px at 45% 85%, #8a5420 60%, transparent 63%);
  background-size: 110px 96px;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 40%, rgba(26,10,14,.15), rgba(26,10,14,.75));
}
.hero__inner {
  position: relative;
  padding: 72px 24px 56px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 48px;
  align-items: center;
}
.hero__copy { display: flex; flex-direction: column; gap: 22px; }

.hero__eyebrow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  color: #fff;
}
.onair {
  padding: 4px 10px;
  border: 2px solid var(--pink);
  border-radius: 6px;
  background: var(--magenta);
  box-shadow: 0 0 14px var(--pink);
  color: #fff;
}
.onair__dot { animation: pbBlink 1.6s ease-in-out infinite; }

.hero__title {
  margin: 0;
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(84px, 13vw, 168px);
  line-height: .82;
  color: #eef0f4;
  text-shadow:
    0 1px 0 #fff,
    0 2px 0 #9aa0aa,
    0 4px 0 #6c7280,
    0 6px 18px rgba(0,0,0,.6),
    0 0 30px rgba(255,255,255,.35);
}
.hero__tagline {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 30px);
  font-style: italic;
  line-height: 1.25;
  color: #fff;
  max-width: 520px;
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
}
.hero__lede {
  margin: 0;
  font-size: 18px;
  color: var(--pink-wash);
  max-width: 480px;
  line-height: 1.45;
  text-shadow: 0 1px 8px rgba(0,0,0,.7);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 6px 0 0;
}

/* TV / studio frame */
.tv {
  justify-self: center;
  width: 100%;
  max-width: 520px;
  padding: 22px 22px 54px;
  background: linear-gradient(#f4ecea, #e2d6d4);
  border-radius: 34px 34px 46px 46px;
  box-shadow: 0 30px 60px rgba(0,0,0,.5), inset 0 -6px 0 #cdbfbd;
  position: relative;
}
.tv__screen {
  aspect-ratio: 4 / 3.4;
  border-radius: 14px;
  overflow: hidden;
  border: 6px solid #1f2a22;
  background: #2b1a1e;
}
.tv__caption {
  position: absolute;
  bottom: 18px;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px;
  color: #9a8c8a;
  letter-spacing: .2em;
}

/* ── About ──────────────────────────────────────────────────────────────── */

.about {
  background-color: var(--blush);
  color: var(--ink);
  background-image: radial-gradient(circle at 12px 12px, rgba(212,0,42,.08) 3px, transparent 4px);
  background-size: 48px 48px;
}
.about__inner {
  padding: 96px 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: 56px;
  align-items: start;
}
.about__left { display: flex; flex-direction: column; gap: 16px; }
.about__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(44px, 6vw, 80px);
  line-height: .95;
  letter-spacing: -.02em;
}
.about__title em { color: var(--red); }

.about__frames {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 20px;
  max-width: 420px;
}
.frame { margin: 0; background: #e9cfd6; }
.frame .slot { background: #e9cfd6; }
.frame .slot::after { color: var(--red-deep); }
.frame--rect {
  aspect-ratio: 3 / 4;
  border: 8px solid var(--gold);
  box-shadow: inset 0 0 0 2px var(--gold-light), 0 10px 20px rgba(0,0,0,.2);
}
.frame--oval {
  aspect-ratio: 3 / 4;
  border: 8px solid var(--gold);
  border-radius: 50% / 40%;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0,0,0,.2);
  margin-top: 40px;
}

.about__right {
  display: flex;
  flex-direction: column;
  gap: 24px;
  font-size: 21px;
  line-height: 1.55;
  text-wrap: pretty;
}
.about__right p { margin: 0; }
.about__standfirst {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 30px);
  line-height: 1.35;
}
.about__shout {
  font-weight: 700;
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: .01em;
}

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin: 0;
  padding-top: 20px;
  border-top: 2px solid var(--ink);
}
.stat dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 800;
  line-height: 1.1;
}
.stat dt {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
}

/* ── Press ──────────────────────────────────────────────────────────────── */

.press { background: var(--red); color: #fff; }
.press__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 88px 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  text-align: center;
}
.press__quote {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(28px, 4vw, 52px);
  line-height: 1.18;
}
.press__cite {
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ── Video essays ───────────────────────────────────────────────────────── */

.essays { background: var(--ink); }
.essays__inner {
  padding: 96px 24px;
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.essays__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
}
.essays__head > div:first-child { display: flex; flex-direction: column; gap: 12px; }
.essays__title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(52px, 8vw, 112px);
  line-height: .85;
  text-transform: uppercase;
  color: var(--neon);
  text-shadow: 0 0 6px var(--neon), 0 0 18px rgba(255,31,61,.8), 3px 3px 0 #000;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 640px;
}
.pill {
  padding: 9px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--pink-soft);
  background: transparent;
  color: var(--pink-pale);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: .03em;
  transition: background-color .18s, color .18s;
}
.pill:hover { background: rgba(255,59,107,.25); color: #fff; }
.pill.is-on { background: var(--pink); color: var(--ink); }

/* Player */
.player {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 28px;
  align-items: center;
  padding: 20px;
  background: var(--cream);
  color: var(--ink);
  border: 3px solid var(--pink);
}
.player__stage {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
}
.player__stage .slot::after { color: var(--pink-soft); }
.player__stage iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 2;
}
.player__play {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 100%;
  border: 0;
  background: rgba(20,8,11,.35);
  color: #fff;
  font-size: 34px;
  cursor: pointer;
  transition: background-color .2s;
}
.player__play > span[aria-hidden] {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 30px var(--neon);
  transition: transform .2s;
}
.player__play:hover { background: rgba(20,8,11,.15); }
.player__play:hover > span[aria-hidden] { transform: scale(1.08); }

.player__meta { display: flex; flex-direction: column; gap: 14px; }
.player__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .12em;
}
.nowplaying { background: var(--red); color: #fff; padding: 3px 8px; }
.player__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.05;
}
.player__desc { margin: 0; font-size: 19px; line-height: 1.5; }

/* Cards */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
  gap: 22px;
}
.card {
  display: flex;
  flex-direction: column;
  padding: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  background: var(--card);
  border: 2px solid var(--card-edge);
  box-shadow: 6px 6px 0 var(--red);
  transition: transform .25s, border-color .25s;
}
.card:hover,
.card:focus-visible { transform: translateY(-6px) rotate(-1deg); border-color: var(--pink); }
.card.is-current { border-color: var(--pink); }
.card[hidden] { display: none; }

.card__thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: #3a1a24;
}
.card__thumb .slot { position: absolute; inset: 0; }
.card__veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20,8,11,0);
  transition: background-color .25s;
}
.card__play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-size: 24px;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .25s, transform .25s;
  box-shadow: 0 0 24px var(--neon);
}
.card:hover .card__veil,
.card:focus-visible .card__veil { background: rgba(20,8,11,.45); }
.card:hover .card__play,
.card:focus-visible .card__play { opacity: 1; transform: scale(1); }

.card__dur {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 2;
  pointer-events: none;
  background: rgba(0,0,0,.85);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 2px 6px;
}
.card__dur[hidden] { display: none; }

.card__body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.card__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 23px;
  line-height: 1.1;
  color: #fff;
}
.card__desc { font-size: 16px; line-height: 1.45; color: #f0cdd6; }
.card__meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--pink-soft);
  letter-spacing: .06em;
}

.cards__empty {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: .06em;
  color: var(--pink-soft);
}
.cards__empty[hidden] { display: none; }

/* ── In production ──────────────────────────────────────────────────────── */

.soon { background: var(--blush); color: var(--ink); }
.soon__inner {
  padding: 88px 24px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.soon__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 24px;
}
.soon__card {
  padding: 36px;
  background: var(--ink);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 18px;
  border: 3px solid var(--red);
}
.soon__card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1;
}
.soon__sub { margin: 0; font-size: 19px; color: #f0cdd6; }
.tag {
  align-self: start;
  margin: 0;
  padding: 4px 10px;
  background: var(--magenta);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  box-shadow: 0 0 14px var(--pink);
}

/* ── Themes ─────────────────────────────────────────────────────────────── */

.themes { background: var(--bg); }
.themes__inner {
  padding: 96px 24px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.themes__list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.themes__list li {
  display: flex;
  gap: 20px;
  align-items: baseline;
  padding: 18px 0;
  border-top: 1px solid var(--card-edge);
}
.themes__n {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--pink-soft);
  width: 32px;
  flex-shrink: 0;
}
.themes__label {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.2vw, 40px);
  line-height: 1.1;
  color: var(--text);
}

/* ── Selected threads ───────────────────────────────────────────────────── */

.threads { background: var(--cream); color: var(--ink); }
.threads__inner {
  padding: 96px 24px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.threads__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
  gap: 16px;
}
.threads__head > div:first-child { display: flex; flex-direction: column; gap: 12px; }
.threads__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 5vw, 68px);
  line-height: 1;
}
.threads__all {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--red-deep);
}
.threads__all:hover { color: var(--red); }

.threads__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 20px;
}
.thread {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px;
  background: #fff;
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  transition: box-shadow .2s, transform .2s;
}
.thread:hover,
.thread:focus-visible {
  color: var(--ink);
  box-shadow: 6px 6px 0 var(--red);
  transform: translate(-2px, -2px);
}
.thread__who { display: flex; gap: 10px; align-items: center; }
.thread__who .slot {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}
.thread__name { font-weight: 700; }
.thread__text { font-size: 19px; line-height: 1.45; }
.thread__note {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--red-deep);
}

/* ── Contact ────────────────────────────────────────────────────────────── */

.contact { background: var(--red); color: #fff; }
.contact__inner {
  padding: 96px 24px 40px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.contact__script {
  margin: 0;
  font-family: var(--font-script);
  font-size: clamp(64px, 10vw, 140px);
  line-height: .9;
  color: #fff;
}
.contact__mail {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 4vw, 52px);
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 8px;
  word-break: break-word;
}
.contact__mail:hover { color: var(--ink); }

.contact__social { display: flex; flex-wrap: wrap; gap: 12px; }
.contact__social a {
  padding: 14px 22px;
  border: 2px solid #fff;
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  transition: background-color .18s, color .18s;
}
.contact__social a:hover,
.contact__social a:focus-visible { background: #fff; color: var(--red); }

.contact__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.4);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
}

/* ── Narrow screens ─────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .ticker__live { font-size: 15px; padding: 0 28px 0 12px; }
  .ticker__line { font-size: 15px; }
  .ticker__contact { padding: 0 12px; font-size: 11px; }
  .hero__inner { padding: 48px 16px 40px; gap: 36px; }
  .about__inner,
  .essays__inner,
  .themes__inner,
  .threads__inner { padding: 64px 16px; }
  .press__inner,
  .soon__inner { padding: 64px 16px; }
  .contact__inner { padding: 64px 16px 32px; }
  .about__shout { font-size: 21px; }
  .about__right { font-size: 19px; }
  .player { padding: 14px; }
  .soon__card { padding: 24px; }
  .thread { padding: 20px; }
}

/* ── Motion preferences ─────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticker__track.is-animated { animation: none; }
  .ticker__window { overflow-x: auto; }
  .ticker__dot, .onair__dot { animation: none; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ── Print ──────────────────────────────────────────────────────────────── */

@media print {
  .ticker, .player__play, .filters { display: none; }
  body { background: #fff; color: #000; }
}