/* ==========================================================================
   Juice Radio — design system
   Brand: four colours in diagonal bands (violet / blush / red) with the
   black-and-white extruded logo. Sampled from the brand PDF and the show
   artwork on mmo.aiircdn.com.
   ========================================================================== */

:root {
  /* Brand constants — these never change with theme. */
  --brand-red:    #ED1D2F; /* marks, rules, ticks */
  --brand-fill:   #E01828; /* red behind white body text — 4.85:1 */
  --brand-violet: #6F60A7; /* holds white body text — 5.37:1 */
  --brand-blush:  #EFC2DB;
  --brand-black:  #0A0A0A;

  /* Semantic tokens — these DO flip with theme. Never use them as the
     background of a brand band; use the brand constants above. */
  --red:       #ED1D2F;
  --red-fill:  #E01828;
  --ink:       #0A0A0A;
  --paper:     #FFFFFF;
  --card:      #FFFFFF;
  --muted:     #6B5C64;
  --rule:      #E3D2DC;
  --tint:      #F8E4EF;

  --display: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;

  --gut: clamp(1.25rem, 4vw, 3rem);
  --maxw: 1180px;
  --player-h: 64px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --red:   #FF4757;
    --red-fill: #E01828;
    --ink:   #F7F2F4;
    --paper: #100A0D;
    --card:  #1B1216;
    --muted: #A8949C;
    --rule:  #33232B;
    --tint:  #241820;
  }
}
:root[data-theme="dark"] {
  --red:   #FF4757;
  --red-fill: #E01828;
  --ink:   #F7F2F4;
  --paper: #100A0D;
  --card:  #1B1216;
  --muted: #A8949C;
  --rule:  #33232B;
  --tint:  #241820;
}
:root[data-theme="light"] {
  --red:   #ED1D2F;
  --red-fill: #E01828;
  --ink:   #0A0A0A;
  --paper: #FFFFFF;
  --card:  #FFFFFF;
  --muted: #6B5C64;
  --rule:  #E3D2DC;
  --tint:  #F8E4EF;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  padding-bottom: var(--player-h);
}

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

a { color: inherit; }

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--brand-black); color: #fff; padding: .75rem 1.25rem;
}
.skip:focus { left: 0; }

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

/* ---------- type ---------- */
.eyebrow {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  letter-spacing: -.03em;
  text-wrap: balance;
  text-transform: uppercase;
  line-height: 1.04;
  margin: 0;
}
h1 { font-weight: 900; font-size: clamp(2rem, 5.5vw, 3.4rem); }
h2 { font-weight: 900; font-size: clamp(1.75rem, 4.2vw, 2.7rem); }
h3 { font-weight: 900; font-size: clamp(1.3rem, 3vw, 1.8rem); }
h4 { font-weight: 850; font-size: 1.1rem; letter-spacing: -.015em; }

.prose { max-width: 66ch; }
.prose p, .prose ul, .prose ol { margin: 0 0 1.15rem; }
.prose h2 { margin: 2.5rem 0 .9rem; }
.prose h3 { margin: 2rem 0 .7rem; }
.prose a { color: var(--red); text-underline-offset: .18em; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin-bottom: .4rem; }
.prose strong { font-weight: 650; }

.lede { font-size: 1.12rem; color: var(--muted); max-width: 60ch; }

/* ---------- header / nav ---------- */
.masthead {
  background: var(--brand-blush);
  clip-path: polygon(0 0, 100% 0, 100% 62%, 0 100%);
  padding-block: clamp(1rem, 2.5vw, 1.5rem) clamp(2rem, 5vw, 3.25rem);
}
.masthead-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.brand { display: block; flex: 0 0 auto; }
.brand img { width: clamp(112px, 15vw, 168px); display: block; }

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.35rem;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav a {
  font-family: var(--display);
  font-weight: 800;
  font-size: .93rem;
  text-transform: uppercase;
  letter-spacing: .01em;
  text-decoration: none;
  color: var(--brand-black);
  padding: .3rem 0;
  border-bottom: 3px solid transparent;
}
.nav a:hover { border-bottom-color: var(--brand-red); }
.nav a[aria-current="page"] { border-bottom-color: var(--brand-black); }

/* ---------- page head ---------- */
.page-head {
  background: var(--brand-fill);
  color: #fff;
  margin-top: -1px;
  padding-block: clamp(2rem, 5vw, 3.5rem) clamp(2.25rem, 5.5vw, 3.75rem);
}
.page-head h1 { color: #fff; }
.page-head .eyebrow { color: rgba(255,255,255,.85); }
.page-head .lede { color: rgba(255,255,255,.92); margin-top: 1rem; }

/* ---------- bands (fixed palette, never theme tokens) ---------- */
/* Tinted from the current artwork by tint.js; falls back to brand violet. */
[data-tint] { transition: background-color 700ms ease; }
@media (prefers-reduced-motion: reduce) { [data-tint] { transition: none; } }

.band-violet {
  --on: #FFFFFF;
  --on-2: rgba(255,255,255,.84);
  background: var(--brand-violet);
  color: var(--on);
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.band-dark {
  --on: #FFFFFF;
  --on-2: rgba(255,255,255,.78);
  --hair: rgba(255,255,255,.18);
  background: var(--brand-black);
  color: var(--on);
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.band-violet h2, .band-dark h2, .band-violet h3, .band-dark h3 { color: var(--on); }
.band-violet p, .band-dark p { color: var(--on-2); }
.band-violet .eyebrow { color: rgba(255,255,255,.8); }
.band-dark .eyebrow { color: #FF4757; }

/* Diagonal join: a band overlapping the one above it on a slope. */
.band-diag {
  margin-top: -4vw;
  clip-path: polygon(0 4vw, 100% 0, 100% 100%, 0 100%);
  padding-top: calc(clamp(2.5rem, 6vw, 4.5rem) + 4vw);
}
.band-diag-pad { padding-bottom: calc(clamp(2.5rem, 6vw, 4.5rem) + 4vw); }

/* ---------- sections ---------- */
main > section { margin-top: clamp(2.5rem, 6vw, 4.5rem); }
main > section:first-child { margin-top: 0; }

.sec-head { margin-bottom: 1.75rem; }
.sec-head h2 { margin-top: .5rem; }
.sec-head p { margin: .8rem 0 0; color: var(--muted); max-width: 62ch; }

.tick { height: 5px; width: 32px; background: var(--brand-red); margin-bottom: 1rem; }

/* ---------- cards / grid ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.grid > * { background: var(--card); padding: 1.5rem 1.35rem; }
.band-dark .grid { background: var(--hair); border-color: var(--hair); }
.band-dark .grid > * { background: var(--brand-black); }

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1rem;
  text-transform: uppercase;
  padding: .9rem 1.5rem;
  text-decoration: none;
  border: 2px solid transparent;
  text-align: center;
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn-primary { background: var(--brand-fill); color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-light { background: #fff; color: var(--brand-black); }
.btn:hover { transform: translate(-2px,-2px); box-shadow: 4px 4px 0 rgba(10,10,10,.3); }

@media (prefers-reduced-motion: reduce) {
  .btn:hover { transform: none; box-shadow: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- hero player ----------
   The primary action on a radio site is "listen". This is that invitation. */
.hero-player {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: center;
}
/* Below this the three-column hero cannot hold a meaningful cover, so drop it
   rather than shrink it back to a thumbnail. */
@media (max-width: 560px) {
  .hero-player { grid-template-columns: auto 1fr; }
  .hero-player .np-art { display: none; }
}

.hero-play {
  width: clamp(84px, 13vw, 116px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 0;
  background: #fff;
  color: var(--brand-black);
  cursor: pointer;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  box-shadow: 0 0 0 0 rgba(255,255,255,.55);
  transition: transform .15s ease, box-shadow .4s ease;
}
.hero-play svg { width: 34%; height: 34%; fill: currentColor; margin-left: 8%; }
.hero-play[data-state="playing"] svg { margin-left: 0; }
.hero-play:hover { transform: scale(1.06); }
.hero-play:active { transform: scale(.98); }

/* A slow pulse that says "this is the button" without being a nightclub. */
@media (prefers-reduced-motion: no-preference) {
  .hero-play[data-state="paused"] { animation: juice-pulse 2.8s ease-out infinite; }
}
@keyframes juice-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.5); }
  70%  { box-shadow: 0 0 0 22px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

/* The track is the hero on a music station — not the station name. */
.now-track {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(1.8rem, 5.6vw, 3.9rem);
  line-height: 1.02;
  letter-spacing: -.035em;
  margin: .35rem 0 0;
  text-wrap: balance;
}
.now-artist {
  font-size: clamp(1.05rem, 2.3vw, 1.5rem);
  margin: .45rem 0 0;
  opacity: .9;
}
.hero-play-cap {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin: .7rem 0 0;
  text-align: center;
  opacity: .9;
}

/* Artwork is hidden outright when there is none, rather than painting an
   empty box — ad breaks and idents have no artwork to show. */
.np-art[hidden] { display: none; }

.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; border: 0;
}

/* ---------- ways to listen ----------
   Sits on the hero, which is tinted from the artwork and so can be any hue
   inside the legible band. Translucent white works on all of them; a fixed
   colour would not. */
.ways {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(.6rem, 2vw, 1.1rem);
  list-style: none;
  margin: clamp(2rem, 5vw, 3rem) 0 0;
  padding: 0;
}
.ways a {
  display: grid;
  justify-items: center;
  gap: .6rem;
  text-decoration: none;
  color: inherit;
  width: clamp(76px, 15vw, 104px);
}
.ways-ico {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  background: rgba(255,255,255,.15);
  border: 1.5px solid rgba(255,255,255,.28);
  transition: background-color .15s ease, transform .15s ease;
}
.ways-ico svg {
  width: 46%;
  height: 46%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ways span.label {
  font-family: var(--display);
  font-weight: 800;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .01em;
  text-align: center;
  line-height: 1.15;
}
.ways a:hover .ways-ico { background: rgba(255,255,255,.3); transform: translateY(-3px); }
.ways a:focus-visible .ways-ico { outline: 3px solid #fff; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .ways a:hover .ways-ico { transform: none; }
}

/* ---------- now playing ---------- */
.np {
  display: flex;
  gap: 1.15rem;
  align-items: center;
}
/* Scaled to sit with the display type beside it — at ~104px it read as a
   thumbnail bolted on rather than the sleeve of the record that's playing. */
.np-art {
  width: clamp(120px, 19vw, 208px);
  aspect-ratio: 1;
  object-fit: cover;
  background: rgba(255,255,255,.16);
  flex: 0 0 auto;
  box-shadow: 0 14px 34px -14px rgba(0,0,0,.6);
}
.np-track { font-family: var(--display); font-weight: 900; font-size: clamp(1.2rem,3vw,1.75rem); letter-spacing: -.025em; }
.np-artist { font-size: 1rem; opacity: .86; margin-top: .15rem; }

/* ---------- track list ---------- */
.tracks { list-style: none; margin: 0; padding: 0; }
.tracks li {
  display: grid;
  grid-template-columns: 3.4rem 44px 1fr;
  gap: .9rem;
  align-items: center;
  padding: .6rem 0;
  border-top: 1px solid var(--rule);
}
.tracks li:first-child { border-top: 0; }
.tracks time { font-family: var(--mono); font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.tracks img { width: 44px; height: 44px; object-fit: cover; background: var(--tint); }
.tracks .t { font-weight: 640; font-size: .97rem; line-height: 1.25; }
.tracks .a { font-size: .88rem; color: var(--muted); }

/* ---------- schedule ---------- */
.daybar { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.75rem; padding: 0; list-style: none; }
.daybar button {
  font-family: var(--display); font-weight: 800; font-size: .88rem; text-transform: uppercase;
  padding: .55rem 1rem; border: 2px solid var(--rule); background: var(--card); color: var(--ink);
  cursor: pointer;
}
.daybar button[aria-pressed="true"] { background: var(--brand-fill); border-color: var(--brand-fill); color: #fff; }

.shows { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.show {
  background: var(--card);
  display: grid;
  grid-template-columns: 5.5rem 84px 1fr;
  gap: 1.1rem;
  align-items: center;
  padding: 1rem 1.15rem;
}
@media (max-width: 560px) { .show { grid-template-columns: 4.5rem 60px 1fr; gap: .8rem; } }
.show time { font-family: var(--mono); font-size: .92rem; font-variant-numeric: tabular-nums; color: var(--muted); }
.show img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--tint); }
.show h3 { font-size: clamp(1.05rem, 2.4vw, 1.3rem); }
.show p { margin: .3rem 0 0; font-size: .92rem; color: var(--muted); }
.show.is-live { background: var(--tint); }
.live-flag {
  display: inline-block; font-family: var(--mono); font-size: .64rem; letter-spacing: .12em;
  background: var(--brand-fill); color: #fff; padding: .16rem .45rem; margin-left: .5rem;
  vertical-align: .18em;
}

/* ---------- team ---------- */
.people { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1.5rem; }
.person img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--tint); }
.person h3 { margin-top: .8rem; font-size: 1.15rem; }
.person p { margin: .2rem 0 0; color: var(--muted); font-size: .92rem; }

/* ---------- support / directory ---------- */
.orgs { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.org { background: var(--card); padding: 1.5rem 1.35rem; }
.org h3 { font-size: 1.15rem; }
.org p { margin: .55rem 0 0; font-size: .93rem; color: var(--muted); }
.org .phone {
  display: inline-block; margin-top: .8rem; font-family: var(--mono); font-size: .95rem;
  font-weight: 600; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--brand-red);
}

/* ---------- footer ---------- */
.foot { border-top: 3px solid var(--ink); margin-top: clamp(3rem, 7vw, 5rem); padding-block: 2.25rem 3rem; }
.foot-in { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1.75rem 2rem; }
.foot h4 { margin-bottom: .7rem; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.foot a { text-decoration: none; font-size: .94rem; color: var(--muted); }
.foot a:hover { color: var(--ink); }
.foot-legal {
  margin-top: 2rem; padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-size: .84rem; color: var(--muted);
  display: flex; flex-wrap: wrap; gap: .35rem 1rem;
  align-items: baseline; justify-content: space-between;
}
.foot-legal p { margin: 0; }
/* Quieter than the copyright beside it: useful when you go looking, invisible
   when you aren't. */
.foot-build { font-family: var(--mono); font-size: .74rem; opacity: .75; }

/* ---------- persistent player ---------- */
.player {
  position: fixed;
  inset: auto 0 0 0;
  height: var(--player-h);
  background: var(--brand-black);
  color: #fff;
  display: flex;
  align-items: center;
  gap: .9rem;
  padding-inline: clamp(.75rem, 3vw, 1.5rem);
  z-index: 50;
  border-top: 3px solid var(--brand-fill);
}
.player-btn {
  width: 42px; height: 42px; flex: 0 0 auto;
  border: 0; border-radius: 50%;
  background: #fff; color: var(--brand-black);
  cursor: pointer;
  display: grid; place-items: center;
}
.player-btn svg { width: 17px; height: 17px; fill: currentColor; }
.player-meta { min-width: 0; flex: 1; }
.player-t { font-weight: 650; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-a { font-size: .8rem; color: rgba(255,255,255,.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-live {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .14em;
  background: var(--brand-fill); padding: .2rem .45rem; flex: 0 0 auto;
}
.player-art { width: 42px; height: 42px; object-fit: cover; flex: 0 0 auto; background: rgba(255,255,255,.14); }

/* Volume. The speaker outline is stroked, unlike the solid play triangle above
   it — deliberate, so the secondary control never competes with the primary. */
.player-vol {
  display: flex; align-items: center; gap: .5rem;
  flex: 0 0 auto;
}
.player-vol-btn {
  width: 30px; height: 30px; flex: 0 0 auto;
  border: 0; background: none; padding: 0;
  color: rgba(255,255,255,.8);
  cursor: pointer;
  display: grid; place-items: center;
}
.player-vol-btn:hover { color: #fff; }
.player-vol-btn svg {
  width: 19px; height: 19px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.player-vol .vol-off { display: none; }
.player-vol[data-muted="true"] .vol-on { display: none; }
.player-vol[data-muted="true"] .vol-off { display: block; }
.player-vol[data-muted="true"] .player-vol-btn { color: var(--brand-fill); }

.player-vol-range {
  -webkit-appearance: none; appearance: none;
  width: 84px; height: 4px; flex: 0 0 auto;
  border-radius: 2px;
  cursor: pointer;
  /* --v is set by volume.js, so the track reads as a level rather than a bare
     dot on a line. Muting drives it to 0 without losing the stored setting. */
  background: linear-gradient(
    to right,
    #fff calc(var(--v, 1) * 100%),
    rgba(255,255,255,.28) calc(var(--v, 1) * 100%)
  );
}
.player-vol-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 13px; height: 13px; border-radius: 50%;
  background: #fff; border: 0; cursor: pointer;
}
.player-vol-range::-moz-range-thumb {
  width: 13px; height: 13px; border-radius: 50%;
  background: #fff; border: 0; cursor: pointer;
}
.player-vol-range:focus-visible {
  outline: 2px solid var(--brand-fill); outline-offset: 3px;
}

/* Desktop only. Phones have volume rockers, and mute is a worse stop button
   than the stop button: muted playback keeps pulling the stream over mobile
   data for audio nobody is hearing. The bar is tight at this width anyway, and
   the track title earns the space. */
@media (max-width: 620px) {
  .player-vol { display: none; }
}

/* ---------- surface ownership ----------
   A band sets colour on all its descendants. Any component that paints its OWN
   background must therefore restate its own text colour, or the band's colour
   bleeds through and you get white-on-white. This block must stay last so it
   wins on source order against the .band-* rules above.
   ---------------------------------------- */
/* Components that DO paint a surface: pin their own colours. */
.shows, .orgs { color: var(--ink); }
.show h3, .org h3 { color: var(--ink); }
.show p, .org p { color: var(--muted); }
.show time { color: var(--muted); }

/* Components that DON'T paint a surface (.tracks, .person) sit directly on
   whatever is behind them, so they must follow the band instead of pinning
   --ink — which would be near-black text on a black band. */
.tracks .t, .person h3 { color: var(--ink); }
.tracks .a, .tracks time, .person p { color: var(--muted); }

.band-dark .tracks .t, .band-violet .tracks .t,
.band-dark .person h3, .band-violet .person h3 { color: var(--on); }
.band-dark .tracks .a, .band-dark .tracks time,
.band-violet .tracks .a, .band-violet .tracks time,
.band-dark .person p, .band-violet .person p { color: var(--on-2); }
.band-dark .tracks li, .band-violet .tracks li { border-top-color: rgba(255,255,255,.2); }
.band-dark .tracks a, .band-violet .tracks a { color: inherit; }

/* ---------- utility ---------- */
.stack > * + * { margin-top: 1.1rem; }
.table-scroll { overflow-x: auto; }
.center { text-align: center; }
[hidden] { display: none !important; }

.player-art[hidden] { display: none; }

/* Loading / empty states inside .tracks are single-cell children, so without
   this they land in the 3.4rem time column and wrap to shreds. */
.tracks li.msg { display: block; padding: .9rem 0; color: var(--muted); }

/* A track arriving while you watch. Brief and small: the list updates itself
   now, and the point is to notice that it moved, not to be shown a performance
   every three minutes. */
@keyframes track-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.tracks li.is-new { animation: track-in .45s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .tracks li.is-new { animation: none; }
}
.band-dark .tracks li.msg, .band-violet .tracks li.msg { color: var(--on-2); }

.person-role { font-family: var(--display); font-weight: 800; text-transform: uppercase;
               font-size: .95rem; letter-spacing: -.01em; margin: .55rem 0 0; color: var(--ink); }
.person-slot { font-family: var(--mono); font-size: .72rem; letter-spacing: .08em;
               text-transform: uppercase; margin: .3rem 0 .6rem; color: var(--muted); }

/* ---------- card icons + store badges ---------- */
/* Same glyphs as the hero tiles, but on a light card the translucent-white
   treatment would vanish — so these carry the brand red instead. */
.card-ico {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  color: var(--red);
  margin-bottom: .9rem;
}
.card-ico svg {
  width: 100%; height: 100%;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.grid > * > p { color: var(--muted); font-size: .94rem; }
.grid > * > p strong { color: var(--ink); }

.stores { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: 1.1rem; }
.store { display: block; line-height: 0; }
/* Apple ships an SVG tight to the artwork. Google ships a PNG with 41px of
   clear space baked in on every side of a 646x250 file, so its artwork is only
   67% of the image — at an equal CSS height it renders a third smaller.
   62px makes the visible badges match, and the negative margin cancels the
   padding so the two sit on the same optical edges. */
.store img { display: block; width: auto; }
.store-apple  img { height: 42px; }
.store-google img { height: 62px; margin: -10px; }
.store:hover { opacity: .85; }

/* Org name is the link to their site; the phone number sits under the blurb.
   Underlined because on a page of crisis services the clickable thing must be
   unmistakable, not inferred from a hover. */
.org h3 a { text-decoration: underline; text-underline-offset: .16em; text-decoration-thickness: 2px; }
.org h3 a:hover { color: var(--red); }

/* ---------- forms ---------- */
.form { max-width: 680px; display: grid; gap: 1.15rem; }
.field { margin: 0; display: grid; gap: .4rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

.field label {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: .8rem; letter-spacing: .01em;
}
.req { color: var(--red); }

.field input, .field select, .field textarea {
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--card);
  border: 2px solid var(--rule);
  border-radius: 0;
  padding: .75rem .85rem;
  width: 100%;
}
.field textarea { resize: vertical; min-height: 8rem; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--ink);
}
.field .is-invalid { border-color: var(--red); }

/* Honeypot — off-screen rather than display:none, which some bots skip. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin: .5rem 0 0; }
.form-status { font-size: .92rem; color: var(--muted); }
.form-status.is-error { color: var(--red); font-weight: 600; }
button.btn { cursor: pointer; font-family: var(--display); }
button.btn:disabled { opacity: .6; cursor: default; }

.form-done h2 { margin-bottom: .75rem; }
.form-done p { color: var(--muted); max-width: 52ch; }

.hint { font-size: .82rem; color: var(--muted); }
fieldset.checks { border: 0; padding: 0; margin: 0; display: grid; gap: .5rem; }
fieldset.checks legend {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: .8rem; padding: 0; margin-bottom: .5rem;
}
.checks label, .check-single label {
  display: flex; align-items: flex-start; gap: .6rem;
  font: inherit; font-size: .97rem; text-transform: none; letter-spacing: 0; font-weight: 400;
  cursor: pointer;
}
.checks input[type="checkbox"], .check-single input[type="checkbox"] {
  width: 1.15rem; height: 1.15rem; margin: .15rem 0 0; flex: 0 0 auto;
  accent-color: var(--brand-fill);
}
.check-single .is-invalid { outline: 2px solid var(--red); outline-offset: 2px; }

/* ---------- stat tiles + big-number blocks (advertise, why-radio) ---------- */
  .stat-num { font-family: var(--display); font-weight:900; font-size: clamp(2.3rem,5.2vw,3.1rem);
              line-height:1; letter-spacing:-.045em; font-variant-numeric: tabular-nums; }
  .stat-label { font-weight:650; font-size:.97rem; margin-top:.55rem; line-height:1.3; }
  .stat-meta { font-family: var(--mono); font-size:.68rem; letter-spacing:.07em; text-transform:uppercase;
               color: var(--muted); margin-top:.45rem; line-height:1.45; }
  .grid > .is-lead { background: var(--brand-fill); color:#fff; }
  .grid > .is-lead .stat-meta { color: rgba(255,255,255,.88); }
  .grid > .is-lead .tick { background:#fff; }
  .grid > .is-ctx { background: var(--tint); }


  .ten-head { font-family: var(--display); font-weight:900; text-transform:uppercase;
              font-size: clamp(2.4rem, 8vw, 5.4rem); line-height:1; letter-spacing:-.045em;
              margin:.4rem 0 1.6rem; color:#fff; }
  .ten { width:100%; max-width:620px; height:auto; display:block; }
  .ten-sub { font-family: var(--display); font-weight:800; text-transform:uppercase;
             font-size: clamp(1rem, 2.6vw, 1.55rem); letter-spacing:-.02em; line-height:1.15;
             margin:1.25rem 0 0; max-width:28ch; color:#fff; }
  .ten-body { margin-top:2.25rem; max-width:62ch; display:grid; gap:1rem; }
  .ten-body strong { color:#fff; }

/* A single hard line inside a band of prose. */
.jab {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(1.35rem, 3.2vw, 2.1rem);
  line-height: 1.05;
  letter-spacing: -.03em;
  text-wrap: balance;
  margin: 1.75rem 0;
}
.band-violet .jab, .band-dark .jab { color: #fff; }