:root {
  --bg: #ffffff;
  --fg: #0a0a0a;
  --muted: #767676;
  --faint: #a3a3a3;
  --line: #e6e6e6;
  --wash: #f7f7f7;
  --accent: #e5342b;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --head: 60px;
  --bar: 68px;
  --pad: 28px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------------- listening mode ----------------
   Playback flips the whole site dark and brings up slow-drifting
   colour behind the content. The palette is swapped by overriding the
   custom properties; the transitions below are on the elements that
   consume them, since custom properties themselves don't animate. */

body.playing {
  --bg: #08080a;
  --fg: #f4f2ee;
  --muted: #9c9890;
  --faint: #6e6b65;
  --line: rgba(255, 255, 255, 0.10);
  --wash: rgba(255, 255, 255, 0.045);
  --accent: #ff4d3f;
}

body,
header.site,
.bar,
.stage,
.sched-top,
.slot,
.mark,
nav.site a,
.play,
.stage .cue .ring,
input, textarea, select {
  transition:
    background-color .75s cubic-bezier(.4, 0, .2, 1),
    color .75s cubic-bezier(.4, 0, .2, 1),
    border-color .75s cubic-bezier(.4, 0, .2, 1);
}

/* Sits above the body background but below every bit of content. */
.ambient {
  position: fixed; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s ease;
}
body.playing .ambient { opacity: 1; }

.ambient i {
  position: absolute;
  display: block;
  width: 78vmax; height: 78vmax;
  border-radius: 50%;
  will-change: transform;
}
.ambient i:nth-child(1) {
  top: -32%; left: -22%;
  background: radial-gradient(circle at center, rgba(229, 52, 43, .38) 0%, rgba(229, 52, 43, 0) 62%);
  animation: drift-a 34s ease-in-out infinite alternate;
}
.ambient i:nth-child(2) {
  top: 6%; right: -30%;
  background: radial-gradient(circle at center, rgba(78, 46, 214, .34) 0%, rgba(78, 46, 214, 0) 64%);
  animation: drift-b 43s ease-in-out infinite alternate;
}
.ambient i:nth-child(3) {
  bottom: -38%; left: 8%;
  background: radial-gradient(circle at center, rgba(173, 44, 198, .30) 0%, rgba(173, 44, 198, 0) 62%);
  animation: drift-c 51s ease-in-out infinite alternate;
}
.ambient i:nth-child(4) {
  bottom: -20%; right: 2%;
  background: radial-gradient(circle at center, rgba(214, 122, 40, .26) 0%, rgba(214, 122, 40, 0) 60%);
  animation: drift-d 38s ease-in-out infinite alternate;
}

@keyframes drift-a {
  from { transform: translate3d(-6%, -4%, 0) scale(1); }
  to   { transform: translate3d(14%, 12%, 0) scale(1.22); }
}
@keyframes drift-b {
  from { transform: translate3d(6%, 8%, 0) scale(1.14); }
  to   { transform: translate3d(-12%, -10%, 0) scale(.92); }
}
@keyframes drift-c {
  from { transform: translate3d(-8%, 6%, 0) scale(.96); }
  to   { transform: translate3d(16%, -12%, 0) scale(1.28); }
}
@keyframes drift-d {
  from { transform: translate3d(10%, -6%, 0) scale(1.2); }
  to   { transform: translate3d(-10%, 8%, 0) scale(.95); }
}

/* Content rides above the gradients. */
.listen, .page { position: relative; z-index: 1; }

/* Let the colour through the chrome instead of covering it. */
body.playing header.site,
body.playing .bar {
  background: rgba(8, 8, 10, .58);
  backdrop-filter: saturate(140%) blur(20px);
  -webkit-backdrop-filter: saturate(140%) blur(20px);
}

@media (prefers-reduced-motion: reduce) {
  .ambient i { animation: none; }
  body, header.site, .bar, .stage, .sched-top, .slot,
  .mark, nav.site a, .play, .stage .cue .ring,
  input, textarea, select { transition-duration: .01ms; }
  .ambient { transition-duration: .01ms; }
}
a { color: inherit; }
::selection { background: var(--fg); color: var(--bg); }

.mono {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ---------------- header ---------------- */
header.site {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  height: var(--head);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--pad);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.mark {
  display: flex; align-items: center; gap: 9px;
  font-weight: 600; font-size: 15px; letter-spacing: -0.01em;
  text-decoration: none;
}
.mark .bullet {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--faint); transition: background .2s;
}
.mark .bullet.on { background: var(--accent); }
nav.site { display: flex; gap: 24px; }
nav.site a {
  font-size: 13.5px; color: var(--muted); text-decoration: none;
  transition: color .15s;
}
nav.site a:hover { color: var(--fg); }
nav.site a[aria-current] { color: var(--fg); }

/* ---------------- listen (home) ---------------- */
.listen {
  position: fixed; inset: var(--head) 0 var(--bar) 0;
  display: grid; grid-template-columns: 1.1fr 0.9fr;
}
.stage {
  display: flex; flex-direction: column; justify-content: center;
  padding: 40px var(--pad);
  border-right: 1px solid var(--line);
  cursor: pointer;
  min-width: 0;
}
.stage .status { display: flex; align-items: center; gap: 9px; margin-bottom: 26px; }
/* Red is for "we are broadcasting". An offline station is not an error. */
.stage .status .mono { color: var(--faint); }
.stage .status .mono.live { color: var(--accent); }
.pip {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .2 } }

.stage .artist {
  font-size: clamp(34px, 4.6vw, 62px);
  line-height: 1.04; letter-spacing: -0.035em; font-weight: 600;
}
.stage .track {
  margin-top: 14px; font-size: 18px; color: var(--muted);
}
.stage .cue {
  margin-top: 34px;
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 14px; color: var(--muted);
}
.stage .cue .ring {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line);
  display: grid; place-items: center; font-size: 12px;
  transition: border-color .2s, background .2s, color .2s;
}
.stage:hover .cue .ring { border-color: var(--fg); background: var(--fg); color: var(--bg); }

/* ---------------- schedule ---------------- */
.sched-pane { display: flex; flex-direction: column; min-height: 0; }
.sched-top {
  flex: none;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; padding: 20px var(--pad) 14px;
  border-bottom: 1px solid var(--line);
}
.sched-scroll { overflow-y: auto; padding-bottom: 20px; }
.slot {
  display: grid; grid-template-columns: 118px 1fr auto;
  gap: 14px; align-items: baseline;
  padding: 11px var(--pad);
  border-bottom: 1px solid var(--line);
}
.slot:hover { background: var(--wash); }
.slot.now { background: var(--wash); }
.slot .t {
  font-family: var(--mono); font-size: 12px; color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.slot.now .t { color: var(--accent); }
.slot .w { font-size: 15px; font-weight: 500; letter-spacing: -0.01em; }
.slot .w.open { color: var(--faint); font-weight: 400; }
.slot .g {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint);
}
.slot.now .g { color: var(--accent); }

/* ---------------- player bar ---------------- */
.bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  height: var(--bar);
  display: flex; align-items: center; gap: 15px;
  padding: 0 var(--pad);
  background: var(--bg);
  border-top: 1px solid var(--line);
}
.play {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  border: none; cursor: pointer;
  background: var(--fg); color: var(--bg);
  display: grid; place-items: center; font-size: 11px; line-height: 1;
  transition: transform .15s, opacity .15s;
}
.play:hover { transform: scale(1.06); }
.play:disabled { opacity: .25; cursor: not-allowed; transform: none; }
.bar .meta { min-width: 0; }
.bar .meta .v {
  font-size: 14px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bar .right {
  margin-left: auto; font-family: var(--mono); font-size: 11px;
  letter-spacing: .06em; color: var(--faint); white-space: nowrap;
}

/* ---------------- inner pages ---------------- */
.page { padding: calc(var(--head) + 72px) 0 calc(var(--bar) + 88px); }
.wrap { max-width: 760px; margin: 0 auto; padding: 0 var(--pad); }
.wrap.wide { max-width: 1000px; }

h1 {
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.1; letter-spacing: -0.03em; font-weight: 600;
  margin-top: 12px;
}
h2 {
  font-size: 19px; font-weight: 600; letter-spacing: -0.015em;
  margin: 44px 0 12px;
}
.page p { color: var(--muted); }
.page p + p { margin-top: 15px; }
.page .intro { font-size: 18.5px; color: var(--fg); margin-top: 22px; }

.rows { margin-top: 34px; border-top: 1px solid var(--line); }
.row { display: grid; grid-template-columns: 40px 1fr; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.row .n { font-family: var(--mono); font-size: 12px; color: var(--accent); }
.row h3 { font-size: 16px; font-weight: 600; margin-bottom: 6px; letter-spacing: -0.01em; }
.row p { font-size: 15px; }

ul.plain { list-style: none; margin-top: 14px; display: grid; gap: 10px; }
ul.plain li { color: var(--muted); padding-left: 18px; position: relative; font-size: 15px; }
ul.plain li::before {
  content: ''; position: absolute; left: 0; top: 9px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}

/* ---------------- form ---------------- */
form { display: grid; gap: 17px; margin-top: 32px; }
.field { display: grid; gap: 7px; }
label { font-size: 13px; font-weight: 500; }
label .opt { color: var(--faint); font-weight: 400; }
input[type=text], input[type=email], textarea, select {
  font: inherit; font-size: 15px; padding: 11px 13px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--fg); width: 100%;
  transition: border-color .15s;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--fg); }
textarea { min-height: 92px; resize: vertical; }
.check { display: flex; gap: 11px; align-items: flex-start; font-size: 14px; color: var(--muted); line-height: 1.45; }
.check input { margin-top: 3px; flex: none; width: 15px; height: 15px; accent-color: var(--accent); }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px;
  font: inherit; font-size: 15px; font-weight: 500;
  border: 1px solid var(--fg); background: var(--fg); color: var(--bg);
  text-decoration: none; cursor: pointer; transition: opacity .15s;
}
.btn:hover { opacity: .82; }

/* ---------------- responsive ---------------- */
@media (max-width: 860px) {
  :root { --pad: 20px; }
  .listen {
    position: static; inset: auto;
    display: block;
    padding-top: var(--head); padding-bottom: var(--bar);
  }
  .stage { border-right: none; border-bottom: 1px solid var(--line); padding: 56px var(--pad); }
  .sched-scroll { overflow: visible; }
  nav.site { gap: 16px; }
  nav.site a { font-size: 13px; }
}
@media (max-width: 560px) {
  .slot { grid-template-columns: 108px 1fr; }
  .slot .g { display: none; }
  .bar .right { display: none; }
  nav.site { gap: 13px; }
  nav.site a { font-size: 12.5px; }
  .mark { font-size: 14px; }
}