/* ==========================================================================
   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); }

/* ---------- 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); }

/* ---------- 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); }
.band-dark .tracks li.msg, .band-violet .tracks li.msg { color: var(--on-2); }