/* London Calling Radio — v5
   Dark, calm, image-led. No shaders. Motion: hover only. */

:root {
  --bg: #121110;
  --bg-alt: #161514;
  --cream: #F4EFE6;
  --cream-dim: rgba(244, 239, 230, 0.72);
  --cream-mute: rgba(244, 239, 230, 0.45);
  --line: rgba(244, 239, 230, 0.15);
  --line-strong: rgba(244, 239, 230, 0.28);
  --crimson: #C8372C;
  --crimson-hot: #E32E1C;
  --header-h: 4rem;
  --bar-h: 4.25rem;
  --font-sans: "Instrument Sans", "Helvetica Neue", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --wrap: 74rem;
}

*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--bg);
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--cream);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  padding-bottom: var(--bar-h);
}
img { max-width: 100%; height: auto; display: block; }
button, input, textarea { font: inherit; color: inherit; }
a { color: var(--cream); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
:focus-visible { outline: 1px solid var(--cream); outline-offset: 3px; }
::selection { background: var(--crimson); color: var(--cream); }

.visually-hidden, .skip {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip:focus {
  position: fixed; left: 1rem; top: 1rem;
  width: auto; height: auto; clip: auto; margin: 0;
  padding: 0.6rem 0.9rem; z-index: 80;
  background: var(--bg); border: 1px solid var(--line);
}

.wrap {
  width: min(var(--wrap), calc(100% - 2rem));
  margin-inline: auto;
}
@media (min-width: 800px) {
  .wrap { width: min(var(--wrap), calc(100% - 3.5rem)); }
}

/* type */
.label, .section-idx, .player-kicker, .placeholder-note,
.age-label, .fineprint, .drawer-kicker, .media-card-artist,
.on-air-pill, .ad-slot {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.68rem;
}
.label {
  display: inline-block;
  color: var(--cream);
  margin: 0;
}
.label-accent { color: var(--crimson-hot); }
h1, h2, h3 {
  font-family: var(--font-sans);
  font-weight: 650;
  letter-spacing: -0.035em;
  line-height: 0.98;
  margin: 0;
}
h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); }
h2 { font-size: clamp(2rem, 4.5vw, 3.4rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.7rem); }
.section-lede, .lede, .on-air-line {
  color: var(--cream-dim);
  margin: 0;
  font-size: clamp(1.05rem, 1.7vw, 1.25rem);
  line-height: 1.5;
  font-weight: 400;
}
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }
cite { font-style: italic; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--cream);
  padding: 0.65rem 1.05rem;
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn:hover { background: var(--cream); color: var(--bg); border-color: var(--cream); }
.btn-live, .btn-primary {
  background: var(--crimson-hot);
  border-color: var(--crimson-hot);
  color: var(--cream);
}
.btn-live:hover, .btn-primary:hover {
  background: var(--cream);
  color: var(--bg);
  border-color: var(--cream);
}
.btn-support, .btn-ghost { border-color: var(--line-strong); }
.btn-compact { padding: 0.45rem 0.75rem; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.actions { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1.25rem; }
.placeholder-note { color: var(--cream-mute); }
.age-label {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.12rem 0.35rem;
  border: 1px solid var(--line);
  letter-spacing: 0.08em;
  color: var(--cream-dim);
  vertical-align: middle;
  text-transform: uppercase;
}

/* header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 0.85rem 0 1rem;
  background: rgba(18, 17, 16, 0.92);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 0.5rem; height: 100%; flex: none; text-decoration: none; }
.brand-tower { height: 1.85rem; width: auto; }
.brand-mark {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: 0.08em;
  line-height: 1;
}
.brand-mark span:nth-child(1),
.brand-mark span:nth-child(3) { color: var(--crimson-hot); }
.brand-mark span:nth-child(2) { color: var(--cream); }
.site-nav {
  display: none;
  flex: 1;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.15rem 1.05rem;
}
.site-nav a {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cream-dim);
}
.site-nav a:hover { color: var(--cream); }
.header-actions { display: flex; align-items: center; gap: 0.45rem; margin-left: auto; flex: none; }
.nav-toggle {
  display: block;
  margin-left: auto;
  width: 2.4rem; height: 2.4rem;
  border: 0; background: transparent;
  padding: 0; cursor: pointer;
  order: 2;
}
.header-actions { order: 3; }
.nav-toggle span {
  display: block; height: 1px; background: var(--cream);
  margin: 6px 4px;
}
@media (min-width: 1400px) {
  .nav-toggle { display: none; }
  .site-nav { display: flex; }
  .header-actions { margin-left: 0; }
}
@media (max-width: 1399px) {
  .site-nav {
    display: none;
    position: absolute;
    top: var(--header-h); left: 0; right: 0;
    background: rgba(18, 17, 16, 0.97);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    padding: 1rem 1.15rem 1.25rem;
    gap: 0.85rem;
  }
  .site-nav.is-open { display: flex; }
  .btn-support { display: none; } /* Support lives in the menu on small screens; Listen Live stays */
  .site-nav a[href="#support"] { /* still in nav */ }
}

/* live dot — calm, no expanding ring */
.live-dot {
  display: inline-block;
  width: 0.45rem; height: 0.45rem;
  border-radius: 50%;
  background: var(--crimson-hot);
  vertical-align: middle;
}

/* full-bleed masts hero — controls sit in the lower third, clear of the baked-in title */
.hero-masts {
  position: relative;
  isolation: isolate;
  height: calc(100svh - var(--header-h) - var(--bar-h));
  min-height: 28rem;
  max-height: 52rem;
  overflow: hidden;
  background: var(--bg);
}
.hero-masts-art { position: absolute; inset: 0; }
.hero-masts-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}
.hero-masts-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(18,17,16,0.42) 0%, rgba(18,17,16,0.08) 28%, rgba(18,17,16,0.12) 52%, rgba(18,17,16,0.82) 86%, rgba(18,17,16,0.94) 100%);
}
.on-air {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 1.4rem 1.15rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
  max-width: 42rem;
}
.on-air-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  color: var(--cream);
  border: 1px solid var(--crimson-hot);
  padding: 0.32rem 0.6rem;
  width: fit-content;
}
.on-air-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.play-live {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--crimson-hot);
  color: var(--cream);
  border: 0;
  padding: 0.7rem 1.15rem 0.7rem 0.85rem;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.play-live:hover { background: var(--cream); color: var(--bg); }
.play-live:hover .play-live-icon,
.play-live.is-playing:hover .play-live-icon { border-color: transparent; }
.play-live-icon {
  display: block;
  width: 0; height: 0;
  border-style: solid;
  border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent currentColor;
}
.play-live.is-playing .play-live-icon {
  width: 12px; height: 14px;
  border: 0;
  background:
    linear-gradient(currentColor, currentColor) 0 0 / 4px 100% no-repeat,
    linear-gradient(currentColor, currentColor) 8px 0 / 4px 100% no-repeat;
}
.stream-link {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream-dim);
}
.stream-link:hover { color: var(--cream); }

.lead-feature {
  position: relative;
  display: block;
  min-height: 22rem;
  overflow: hidden;
  text-decoration: none;
  color: var(--cream);
}
.lead-feature img {
  width: 100%;
  height: 100%;
  min-height: 22rem;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.7s ease;
}
.lead-feature:hover img { transform: scale(1.04); }
.media-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18,17,16,0.08) 20%, rgba(18,17,16,0.55) 62%, rgba(18,17,16,0.92) 100%);
  pointer-events: none;
}
.media-shade-deep {
  background: linear-gradient(180deg, rgba(18,17,16,0.25) 0%, rgba(18,17,16,0.55) 40%, rgba(18,17,16,0.94) 100%);
}
.lead-feature-copy {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.4rem 1.15rem 1.5rem;
  z-index: 1;
}
.lead-feature-copy h2 {
  margin: 0.45rem 0 0.5rem;
  font-size: clamp(1.7rem, 4.2vw, 3rem);
  max-width: 22ch;
}
.lead-feature-copy p { color: var(--cream-dim); max-width: 38ch; }

#xmas-feature { display: none; }
html.xmas-season #xmas-feature { display: block; }
#toptunes-lead { display: block; }
html.xmas-season #toptunes-lead { display: none; }
#xmas-music { display: none; }
html.xmas-season #xmas-music { display: none; }

.feature-band { border-bottom: 1px solid var(--line); }
.feature-band .lead-feature {
  display: block;
  height: 28rem;
  min-height: 22rem;
  overflow: hidden;
}
.feature-band .lead-feature img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center top;
}
@media (min-width: 800px) {
  .feature-band .lead-feature { height: 34rem; }
}

@media (max-width: 799px) {
  .hero-masts {
    height: auto;
    min-height: 0;
    max-height: none;
    display: flex;
    flex-direction: column;
  }
  .hero-masts-art {
    position: relative;
    aspect-ratio: 1501 / 1048;
  }
  .hero-masts-shade {
    background: linear-gradient(180deg, rgba(18,17,16,0.28) 0%, transparent 40%, rgba(18,17,16,0.2) 100%);
  }
  .on-air {
    position: relative;
    background: var(--bg);
    padding: 1.2rem 1.15rem 1.3rem;
    max-width: none;
    border-bottom: 1px solid var(--line);
  }
}
@media (min-width: 800px) {
  .on-air { padding: 2rem 2.4rem 2.15rem; gap: 1rem; }
  .lead-feature-copy { padding: 2rem 2.2rem 2.15rem; }
}

/* sections + grid */
.section { padding: 3rem 0 2.5rem; }
.section-head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  border-top: 1px solid var(--line);
  padding-top: 1.15rem;
  margin-bottom: 1.25rem;
}
.section-idx { color: var(--crimson-hot); }
.section-lede { max-width: 38rem; margin: -0.4rem 0 1.5rem; }

.wrap-grid {
  width: min(var(--wrap), calc(100% - 2rem));
  margin-inline: auto;
}
@media (min-width: 800px) {
  .wrap-grid { width: min(var(--wrap), calc(100% - 3.5rem)); }
}

.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
.media-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-alt);
  color: inherit;
  text-decoration: none;
  min-width: 0;
  cursor: pointer;
}
a.media-card { cursor: pointer; }
.media-card-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
  background: var(--bg-alt);
}
.media-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}
.media-card:hover .media-card-media img { transform: scale(1.05); }
.media-card-media .label,
.lead-feature-copy .label {
  padding: 0.22rem 0.45rem;
  background: rgba(18, 17, 16, 0.72);
}
.media-card-media .label {
  position: absolute;
  top: 0.85rem; left: 0.85rem;
  z-index: 1;
}
.media-card-copy {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  padding: 1.1rem 0.95rem 1.05rem;
}
.media-card-artist { color: var(--cream-dim); margin: 0 0 0.25rem; }
.media-card-copy h3 { margin: 0 0 0.3rem; }
.media-card-copy p:not(.media-card-artist) { color: var(--cream-dim); font-size: 0.95rem; }
.media-card-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.7rem 0.85rem;
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.card-lg .media-card-media { aspect-ratio: 4 / 5; }
.card-type .media-card-media {
  aspect-ratio: auto;
  min-height: 16rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0;
  background:
    linear-gradient(165deg, rgba(200,55,44,0.16), transparent 42%),
    var(--bg-alt);
  border: 1px solid var(--line);
}
.card-type .media-card-media .label,
.card-type .media-card-copy { position: relative; top: auto; left: auto; }
.card-type .media-card-media .label { padding: 0.9rem 1rem 0; }
.card-type .media-card-copy { padding: 1.2rem 1rem 1.15rem; }
.card-type:hover .media-card-media img { transform: none; }

@media (min-width: 800px) {
  .card-grid {
    grid-template-columns: repeat(12, 1fr);
    gap: 0.85rem;
  }
  .card-lg { grid-column: 1 / 9; grid-row: 1 / 3; }
  .card-lg,
  #toptunes,
  #rockers { height: 100%; }
  .card-lg .media-card-media { aspect-ratio: auto; min-height: 28rem; height: 100%; }
  #toptunes { grid-column: 9 / 13; grid-row: 1; }
  #rockers { grid-column: 9 / 13; grid-row: 2; }
  #toptunes .media-card-media,
  #rockers .media-card-media { aspect-ratio: auto; min-height: 16rem; height: 100%; }
  #latest-singles { grid-column: 1 / 5; grid-row: 3; }
  #xmas-music { grid-column: 5 / 9; }
  .merch-grid .media-card { grid-column: span 4; }
}

.series-links {
  list-style: none;
  margin: 0.7rem 0 0;
  padding: 0;
}
.series-links li { border-top: 1px solid var(--line); }
.series-links a {
  display: block;
  padding: 0.55rem 0;
  text-decoration: none;
  font-size: 0.95rem;
  color: var(--cream-dim);
}
.series-links a:hover { color: var(--cream); }
.shirt-mark {
  font-size: 3rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  color: var(--crimson-hot);
  margin: 0 0 0.8rem;
}
.shirt-mark span { color: var(--cream); }

/* artists */
.artist-rows {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}
.artist-row {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--line);
}
.artist-row h3 { margin-bottom: 0.7rem; font-size: clamp(1.5rem, 3vw, 2.1rem); }

/* support / advertise */
.split-band {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--line);
}
.split-panel {
  padding: 2.4rem 1.15rem 2.5rem;
  background: var(--bg);
}
.split-panel:first-child { border-bottom: 1px solid var(--line); }
.split-panel h2 { margin: 0.55rem 0 0.9rem; }
.split-panel > p { color: var(--cream-dim); max-width: 36rem; }
.tier-list {
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0;
}
.tier-list li {
  padding: 0.85rem 0;
  border-top: 1px solid var(--line);
  color: var(--cream-dim);
}
.tier-list strong { color: var(--cream); font-weight: 650; }
.ad-slots { display: grid; gap: 0.5rem; margin: 1.2rem 0 1.5rem; }
.ad-slot {
  border: 1px solid var(--line);
  padding: 0.85rem 1rem;
  display: flex;
  justify-content: space-between;
  color: var(--cream-dim);
  min-height: 3.4rem;
  align-items: center;
}
.enquire { display: grid; gap: 0.7rem; max-width: 26rem; }
.enquire h3 { font-size: 1.15rem; }
.enquire label {
  display: grid; gap: 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.enquire input, .enquire textarea {
  border: 1px solid var(--line);
  background: var(--bg-alt);
  padding: 0.6rem 0.7rem;
}
@media (min-width: 900px) {
  .split-band { grid-template-columns: 1fr 1fr; }
  .split-panel { padding: 3rem 2.4rem 3.2rem; }
  .split-panel:first-child { border-bottom: 0; border-right: 1px solid var(--line); }
}

/* about band — edge-to-edge photo */
.about-band { position: relative; min-height: 0; border-top: 1px solid var(--line); background: var(--bg-alt); }
.about-band-copy { padding: 4.5rem 0 4rem; max-width: 42rem; }
.about-band-copy h2 { font-size: clamp(3rem, 8vw, 6rem); margin: 0.4rem 0 1.1rem; }
.about-band-copy .section-lede { margin-bottom: 1rem; }

/* footer + player + drawer */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 1.4rem 0 1.5rem;
  background: var(--bg);
}
.site-footer .wrap { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.site-footer p { margin: 0; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; color: var(--cream-dim); }
.fineprint { color: var(--cream-mute); }

.intro-mute {
  position: fixed;
  left: 1rem;
  bottom: calc(var(--bar-h) + 0.75rem);
  z-index: 45;
  border: 1px solid var(--line);
  background: rgba(18, 17, 16, 0.88);
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.45rem 0.7rem;
  cursor: pointer;
}
.intro-mute:hover { background: var(--cream); color: var(--bg); }
.intro-mute[hidden] { display: none; }

.player-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  height: var(--bar-h);
  background: rgba(22, 21, 20, 0.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
}
.player-bar-inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0 1rem;
  width: min(96rem, 100%);
  margin: 0 auto;
}
.player-play {
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--cream);
  cursor: pointer;
  display: grid;
  place-items: center;
  flex: none;
}
.player-play:hover, .player-play.is-playing {
  background: var(--crimson-hot);
  border-color: var(--crimson-hot);
}
.player-play-icon {
  display: block; width: 0; height: 0;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent var(--cream);
  margin-left: 2px;
}
.player-play.is-playing .player-play-icon {
  width: 10px; height: 12px; border: 0; margin: 0;
  background:
    linear-gradient(var(--cream), var(--cream)) 0 0 / 3px 100% no-repeat,
    linear-gradient(var(--cream), var(--cream)) 7px 0 / 3px 100% no-repeat;
}
.player-now { display: flex; flex-direction: column; gap: 0.08rem; min-width: 0; flex: 1; }
.player-kicker { color: var(--crimson-hot); }
.player-title {
  font-size: 1rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.player-vol { display: none; width: 7.5rem; flex: none; }
.player-vol input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 1px;
  background: var(--line-strong); border: 0; cursor: pointer;
}
.player-vol input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--cream); border: 0;
}
.player-drawer-btn {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
}
.player-drawer-btn:hover { background: var(--cream); color: var(--bg); }
@media (min-width: 700px) {
  .player-vol { display: flex; align-items: center; }
}

.drawer-root[hidden] { display: none; }
.drawer-root { position: fixed; inset: 0; z-index: 60; }
.drawer-backdrop {
  position: absolute; inset: 0;
  background: rgba(18, 17, 16, 0.55);
}
.drawer {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(32rem, 100%);
  background: var(--bg-alt);
  border-left: 1px solid var(--line);
  padding: 1.3rem 1.4rem 5.5rem;
  overflow: auto;
}
.drawer-close {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.45rem 0.7rem;
  cursor: pointer;
  float: right;
}
.drawer-kicker { color: var(--cream-mute); margin: 2.2rem 0 0.55rem; }
.drawer h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); margin-bottom: 1.1rem; }
.track-list { list-style: none; margin: 1rem 0 1.3rem; padding: 0; border-top: 1px solid var(--line); }
.track-list li {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: none;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--line);
}
.bc-player { margin: 1.1rem 0; }
.bc-player iframe { border: 0; width: 100%; height: 120px; background: var(--bg); }
.bc-player-ep iframe, .bc-player-rockers iframe, .bc-player-album iframe { height: 280px; }
.bc-player-noart iframe { height: 340px; }

@media (prefers-reduced-motion: reduce) {
  .lead-feature img,
  .media-card-media img,
  .lead-feature:hover img,
  .media-card:hover .media-card-media img {
    transition: none;
    transform: none;
  }
}

/* hide Support from duplicating: it's in header-actions on desktop and in nav as well — nav doesn't include Support to keep header slim; added via header button. Mobile menu should include it. */

/* Pulsing signal rings over the masts photo */
.ring-pulses { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; }
.ring-pulse { position: absolute; width: var(--s, 160px); height: var(--s, 160px); transform: translate(-50%, -50%); }
.ring-pulse i {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(120, 255, 140, 0.9);
  box-shadow: 0 0 18px rgba(80, 255, 120, 0.7), inset 0 0 18px rgba(80, 255, 120, 0.45);
  opacity: 0; transform: scale(0.08);
  animation: ring-out 3.2s cubic-bezier(.2,.6,.3,1) infinite;
  animation-delay: var(--d, 0s);
}
.ring-pulse i + i { animation-delay: calc(var(--d, 0s) + 1.6s); }
.ring-pulse::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 14%; height: 14%;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(220,255,200,0.95), rgba(80,255,120,0) 70%);
  animation: core-glow 1.6s ease-in-out infinite; animation-delay: var(--d, 0s);
}
@keyframes ring-out { 0% { opacity: 0; transform: scale(0.08); } 12% { opacity: 0.9; } 100% { opacity: 0; transform: scale(1); } }
@keyframes core-glow { 0%,100% { opacity: 0.45; transform: translate(-50%,-50%) scale(1); } 50% { opacity: 1; transform: translate(-50%,-50%) scale(1.6); } }
@media (prefers-reduced-motion: reduce) { .ring-pulses { display: none; } }

/* Bolder top menu */
.site-nav { gap: 0.2rem 1.6rem; align-items: center; }
.site-nav a {
  position: relative;
  font-family: var(--font-sans, "Instrument Sans", system-ui, sans-serif);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--cream);
  padding: 0.35rem 0;
  transition: color .2s ease;
}
.site-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--crimson-hot); transform: scaleX(0); transform-origin: left;
  transition: transform .25s ease;
}
.site-nav a:hover, .site-nav a:focus-visible { color: #fff; }
.site-nav a:hover::after, .site-nav a:focus-visible::after { transform: scaleX(1); }
@media (min-width: 1400px) { .site-nav a[href="#support"] { display: none; } }
@media (max-width: 1399px) { .site-nav a { font-size: 1.15rem; } }

/* Bolder On Air panel */
@media (min-width: 761px) {
  .on-air {
    left: clamp(1rem, 3vw, 2.5rem); right: auto; bottom: clamp(1rem, 3vw, 2.2rem);
    max-width: 34rem; gap: 0.9rem;
    padding: 1.4rem 1.6rem 1.5rem;
    background: rgba(18, 17, 16, 0.55);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(244, 239, 230, 0.16);
    border-left: 3px solid var(--crimson-hot);
    box-shadow: 0 20px 60px rgba(0,0,0,0.45);
  }
}
.on-air-pill {
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.2em;
  background: var(--crimson-hot); color: #fff; border: 0;
  padding: 0.42rem 0.8rem 0.42rem 0.7rem;
  box-shadow: 0 0 22px rgba(227, 46, 28, 0.55);
}
.on-air-pill .live-dot { background: #fff; animation: live-blink 1.4s ease-in-out infinite; }
@keyframes live-blink { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }
.on-air-line {
  color: var(--cream);
  font-family: var(--font-sans, "Instrument Sans", system-ui, sans-serif);
  font-size: clamp(1.25rem, 2.1vw, 1.6rem); font-weight: 600; line-height: 1.3;
}
.play-live {
  border-radius: 999px; padding: 0.55rem 1.4rem 0.55rem 0.55rem; gap: 0.8rem;
  font-weight: 700; font-size: 0.95rem; letter-spacing: 0.12em;
  box-shadow: 0 0 0 0 rgba(227,46,28,0.6); animation: play-glow 2.4s ease-out infinite;
}
.play-live-icon { box-sizing: content-box; }
.play-live::before {
  content: ""; order: -1; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: rgba(255,255,255,0.18); display: none;
}
@keyframes play-glow { 0% { box-shadow: 0 0 0 0 rgba(227,46,28,0.55); } 70%,100% { box-shadow: 0 0 0 14px rgba(227,46,28,0); } }
.play-live-icon { margin-left: 0.9rem; border-width: 9px 0 9px 15px; }
.stream-link { font-size: 0.75rem; color: var(--cream); text-underline-offset: 4px; }
.stream-link:hover { color: var(--crimson-hot); }
@media (prefers-reduced-motion: reduce) { .play-live, .on-air-pill .live-dot { animation: none; } }

/* Compact On Air panel (keep the photo the star) */
@media (min-width: 761px) {
  .on-air { max-width: 25rem; gap: 0.65rem; padding: 1rem 1.15rem 1.1rem; background: rgba(18,17,16,0.45); }
}
.on-air-pill { font-size: 0.68rem; padding: 0.3rem 0.6rem; box-shadow: 0 0 14px rgba(227,46,28,0.45); }
.on-air-line { font-size: clamp(1rem, 1.4vw, 1.15rem); }
.play-live { font-size: 0.82rem; padding: 0.45rem 1.1rem 0.45rem 0.45rem; }
.play-live-icon { margin-left: 0.7rem; border-width: 7px 0 7px 12px; }

/* Stronger bottom player strip */
.player-bar {
  background: linear-gradient(90deg, rgba(40,12,10,0.88), rgba(18,17,16,0.86) 45%, rgba(10,30,16,0.86));
  border-top: 0;
  box-shadow: 0 -10px 30px rgba(0,0,0,0.45);
}
.player-bar::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--crimson-hot), #ff6a4d 40%, #46e07a);
  opacity: 0.9;
}
.player-bar-inner { gap: 1rem; padding: 0 clamp(0.8rem, 2vw, 1.6rem); }
.player-play {
  width: 3rem; height: 3rem; background: var(--crimson-hot); border-color: var(--crimson-hot);
  box-shadow: 0 0 18px rgba(227,46,28,0.55);
  transition: transform .15s ease, box-shadow .2s ease;
}
.player-play:hover { transform: scale(1.06); box-shadow: 0 0 26px rgba(227,46,28,0.8); background: var(--crimson-hot); }
.player-play-icon { border-width: 8px 0 8px 13px; margin-left: 3px; }
.player-eq { display: inline-flex; align-items: flex-end; gap: 3px; height: 1.3rem; flex: none; }
.player-eq i { display: block; width: 3px; height: 30%; background: #46e07a; border-radius: 1px; opacity: 0.85; }
.player-play.is-playing ~ .player-eq i, .player-eq i { animation: eq 1.1s ease-in-out infinite; }
.player-eq i:nth-child(2) { animation-delay: .2s; } .player-eq i:nth-child(3) { animation-delay: .45s; }
.player-eq i:nth-child(4) { animation-delay: .1s; } .player-eq i:nth-child(5) { animation-delay: .35s; }
@keyframes eq { 0%,100% { height: 25%; } 50% { height: 100%; } }
.player-kicker {
  display: inline-flex; align-items: center; gap: .35rem; width: fit-content;
  font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: #fff; background: var(--crimson-hot); padding: 0.12rem 0.45rem;
}
.player-kicker::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: live-blink 1.4s ease-in-out infinite; }
.player-title { font-weight: 700; font-size: 1.05rem; }
.player-tag { font-style: normal; font-weight: 400; color: var(--cream-dim); margin-left: .5rem; }
@media (max-width: 699px) { .player-tag { display: none; } }
.player-vol input[type="range"] { height: 3px; background: linear-gradient(90deg, var(--crimson-hot), #46e07a); border-radius: 2px; }
.player-vol input[type="range"]::-webkit-slider-thumb { width: 14px; height: 14px; box-shadow: 0 0 8px rgba(255,255,255,.6); }
.player-drawer-btn { border-color: rgba(244,239,230,0.35); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .player-eq i, .player-kicker::before { animation: none; } }

/* Remove the On Air panel; the bottom strip carries it */
.hero-masts .on-air { display: none !important; }
:root { --bar-h: 5rem; }
.player-play { width: 3.4rem; height: 3.4rem; }
.player-title { font-size: 1.15rem; }
@media (max-width: 760px) { .hero-masts { border-bottom: 1px solid var(--line); } }
@media (max-width: 480px) { .player-eq { display: none; } .player-title { font-size: 1rem; } .player-bar-inner { gap: 0.7rem; } }

/* Featured release: clear button; on mobile, cover first then text below */
.feature-cta {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: 1rem;
  background: var(--crimson-hot); color: #fff; border-radius: 999px;
  padding: .6rem 1.2rem; font-weight: 700; font-size: .9rem; letter-spacing: .04em;
}
.feature-cta::after { content: "→"; }
@media (max-width: 799px) {
  .feature-band .lead-feature { height: auto; display: flex !important; flex-direction: column; }
  html:not(.xmas-season) #xmas-feature, html.xmas-season #toptunes-lead { display: none !important; }
  .feature-band .lead-feature img { position: static; aspect-ratio: 1 / 1; height: auto; object-position: center; }
  .feature-band .lead-feature .media-shade { display: none; }
  .feature-band .lead-feature-copy { position: static; padding: 1.2rem 1.15rem 1.6rem; background: var(--bg); }
  .feature-band .lead-feature-copy h2 { font-size: 1.6rem; }
  .feature-band .lead-feature:hover img { transform: none; }
}

/* Aiko releases inside her section */
.aiko-releases { display: grid; grid-template-columns: minmax(0, 26rem); gap: 1.2rem; margin: 1.4rem 0 2rem; padding: 0; }

/* Billy Ricci Music: three equal cards now La Collection lives under Aiko */
@media (min-width: 800px) {
  #music #toptunes { grid-column: 1 / 5; grid-row: 1; }
  #music #rockers { grid-column: 5 / 9; grid-row: 1; }
  #music #latest-singles { grid-column: 9 / 13; grid-row: 1; }
  #music #toptunes .media-card-media, #music #rockers .media-card-media { aspect-ratio: 1 / 1; min-height: 0; height: auto; }
  #music #latest-singles .media-card-media { height: 100%; }
}
@media (min-width: 800px) {
  #music #toptunes { grid-column: 1 / 4; }
  #music #rockers { grid-column: 4 / 7; }
  #music #closingdown { grid-column: 7 / 10; grid-row: 1; }
  #music #latest-singles { grid-column: 10 / 13; }
  #music #closingdown .media-card-media { height: 100%; min-height: 0; aspect-ratio: 1 / 1; }
}
#closingdown h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1.15; }

/* Bandcamp header button */
.btn-bandcamp{background:transparent;color:#fff;border:2px solid #e32c14;font-weight:600;white-space:nowrap}
.btn-bandcamp:hover,.btn-bandcamp:focus-visible{background:#e32c14;color:#fff}
@media (max-width:480px){.header-actions .btn{padding-inline:.7rem;font-size:.8rem}}
@media (min-width:1400px){.site-nav{flex-wrap:nowrap}.site-nav a{font-size:.84rem;white-space:nowrap}.site-nav{gap:1.1rem}.header-actions .btn{padding-inline:.85rem}}
html.page-aiko:not(.age-confirmed) .age-gate{background:rgba(5,4,7,.55);backdrop-filter:blur(6px)}

/* Novels rows */
.novel-list{display:grid;gap:2.5rem;margin-top:1.5rem}
.novel-row{display:grid;grid-template-columns:minmax(10rem,16rem) 1fr;gap:2rem;align-items:start;padding-bottom:2.5rem;border-bottom:1px solid var(--line,#2a2a2a)}
.novel-row:last-child{border-bottom:0;padding-bottom:0}
.novel-cover img{display:block;width:100%;height:auto;border-radius:.4rem;box-shadow:0 14px 40px rgba(0,0,0,.6);transition:transform .25s}
.novel-cover:hover img{transform:translateY(-4px)}
.novel-copy h3{font-size:clamp(1.8rem,3vw,2.6rem);margin:.6rem 0 .8rem;line-height:1.05}
.novel-copy h3 span{display:block;font-size:.5em;color:#e32c14;font-weight:600;margin-top:.35rem}
.novel-copy>p{max-width:38rem;color:var(--muted,#bbb);line-height:1.6}
.novel-quote{margin:1rem 0;padding-left:1rem;border-left:3px solid #e32c14;font-size:1.05rem;font-style:italic;max-width:36rem}
.novel-quote footer{font-style:normal;font-size:.8rem;color:var(--muted,#999);margin-top:.3rem;letter-spacing:.04em}
@media (max-width:640px){.novel-row{grid-template-columns:7.5rem 1fr;gap:1rem}.novel-copy h3{font-size:1.5rem}.novel-quote{font-size:.95rem}}

/* Kids Books */
.kids-series{margin-top:2rem}
.kids-series+.kids-series{margin-top:3rem;padding-top:2.5rem;border-top:1px solid var(--line,#2a2a2a)}
.kids-series-head h3{font-size:clamp(1.6rem,2.6vw,2.2rem);margin:.5rem 0 .5rem}
.kids-series-head p{max-width:40rem;color:var(--muted,#bbb);line-height:1.6;margin:0 0 1.3rem}
.kids-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
.kid-book{display:block;color:inherit;text-decoration:none}
.kid-cover{display:block;aspect-ratio:1/1;background:#0c0c10;border-radius:.6rem;overflow:hidden;border:1px solid var(--line,#2a2a2a);transition:transform .25s,border-color .25s}
.kid-cover img{width:100%;height:100%;object-fit:contain;display:block}
.kid-book:hover .kid-cover,.kid-book:focus-visible .kid-cover{transform:translateY(-4px);border-color:#e32c14}
.kid-title{display:block;margin-top:.55rem;font-size:.92rem;font-weight:600;line-height:1.3}
@media (max-width:720px){.kids-grid{grid-template-columns:repeat(2,1fr);gap:.8rem}}

/* Merch coming soon strip */
.merch-soon-inner{display:flex;align-items:center;gap:2.5rem;padding:2rem;border:1px solid var(--line,#2a2a2a);border-radius:1rem;background:linear-gradient(120deg,rgba(227,44,20,.12),rgba(40,255,120,.06))}
.merch-soon .shirt-mark{font-size:clamp(3rem,8vw,5.5rem);font-weight:800;margin:0;line-height:1;flex:none}
.merch-soon h2{margin:.3rem 0 .5rem}
@media (max-width:640px){.merch-soon-inner{flex-direction:column;align-items:flex-start;gap:1rem;padding:1.4rem}}

/* YouTube */
.yt-feature{position:relative;aspect-ratio:16/9;border-radius:.8rem;overflow:hidden;border:1px solid var(--line,#2a2a2a);margin:1.2rem 0 1.4rem;background:#000;max-width:56rem}
.yt-feature iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-bottom:1.4rem}
.yt-tile{color:inherit;text-decoration:none;display:block}
.yt-thumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:.6rem;border:1px solid var(--line,#2a2a2a);transition:border-color .25s,transform .25s}
.yt-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.yt-play{position:absolute;left:50%;top:50%;width:3.2rem;height:2.2rem;transform:translate(-50%,-50%);background:#e32c14;border-radius:.6rem;box-shadow:0 4px 18px rgba(0,0,0,.5)}
.yt-play::after{content:"";position:absolute;left:54%;top:50%;transform:translate(-50%,-50%);border-left:.8rem solid #fff;border-top:.5rem solid transparent;border-bottom:.5rem solid transparent}
.yt-tile:hover .yt-thumb{border-color:#e32c14;transform:translateY(-3px)}
.yt-title{display:block;margin-top:.5rem;font-weight:600;font-size:.92rem}
@media (max-width:720px){.yt-grid{grid-template-columns:repeat(2,1fr);gap:.8rem}}
/* Schedule */
.schedule-soon{padding:1.6rem;border:1px dashed var(--line,#3a3a3a);border-radius:1rem;margin-top:1rem}
/* Schedule (real) */
.schedule-app{margin-top:1rem}
.sched-tabs{display:flex;gap:.4rem;flex-wrap:wrap;margin:1.2rem 0 1rem}
.sched-tab{font:inherit;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;padding:.55rem .9rem;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--cream-dim);cursor:pointer}
.sched-tab:hover{color:var(--cream);border-color:var(--cream)}
.sched-tab[aria-selected="true"]{background:var(--crimson);border-color:var(--crimson);color:#fff}
.sched-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.sched-show{display:grid;grid-template-columns:9rem 1fr auto;gap:1rem;align-items:center;padding:1rem .25rem;border-bottom:1px solid var(--line)}
.sched-time{font-variant-numeric:tabular-nums;color:var(--crimson-hot);font-size:.9rem;letter-spacing:.04em}
.sched-info h3{margin:0;font-size:1.05rem}
.sched-info p{margin:.2rem 0 0;color:var(--cream-dim);font-size:.9rem}
.sched-sponsor{font-size:.78rem;color:var(--cream-dim);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.sched-sponsor:hover{color:var(--cream)}
.sched-show.is-live{background:linear-gradient(90deg,rgba(227,46,28,.18),transparent);border-left:3px solid var(--crimson);padding-left:.75rem}
.sched-onair{display:inline-block;margin-left:.5rem;font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;background:var(--crimson);color:#fff;padding:.15rem .45rem;border-radius:999px;vertical-align:middle}
@media (max-width:640px){.sched-show{grid-template-columns:1fr;gap:.35rem}.sched-act{justify-self:start}}
.lcr-red{color:var(--crimson)}
.section-head h2 .lcr-red,.sched-title .lcr-red{color:var(--crimson)!important;-webkit-text-fill-color:var(--crimson)}
#schedule .section-head{position:relative}
.sched-video{position:absolute;top:0;right:0;width:clamp(12rem,26vw,20rem);aspect-ratio:688/464;object-fit:cover;border-radius:.9rem;border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.45)}
#schedule .section-head h2{padding-right:clamp(12rem,27vw,21rem)}
@media (max-width:900px){.sched-video{position:static;display:block;width:100%;max-width:26rem;margin:1rem 0 0}#schedule .section-head h2{padding-right:0}}
@media (max-width:900px){#schedule .section-head{flex-wrap:wrap}#schedule .sched-video{order:3;flex:0 0 100%;width:100%;max-width:none;height:auto;margin:1rem 0 0}}
.sched-title .sched-sub{display:block;font-size:.55em;margin-top:.25em;color:var(--cream-dim);letter-spacing:.01em}
/* Latest single video */
.latest-video .latest-video-media{aspect-ratio:auto;background:#000;display:flex;align-items:center}
.latest-video .ltd-video{width:100%;aspect-ratio:16/9;display:block;background:#000}
.latest-video-copy{padding:.9rem 1rem .2rem}
.latest-video-copy .label{position:static;display:inline-block;margin-bottom:.4rem}
.latest-video-copy h3{margin:.1rem 0 0}
.latest-video iframe.ltd-video{width:100%;aspect-ratio:560/435;height:auto}
/* Christmas single: shown only in the Christmas season (until 31 Dec 2026) */
#xmas-single{display:none}
html.xmas-season #xmas-single{display:flex;flex-direction:column}
@media (min-width:800px){
  #music #xmas-single{grid-column:1 / 4;grid-row:2}
  #music #xmas-single .media-card-media,#music #latest-singles .media-card-media{aspect-ratio:1/1;min-height:0;height:auto}
}
/* Christmas season: Open Your Heart (Hit) takes Closing Down Sale's slot; CDS returns 1 Jan 2027 */
html.xmas-season #closingdown{display:none}
@media (min-width:800px){ html.xmas-season #music #xmas-single{grid-column:7 / 10;grid-row:1} }