/* GB Music Radio — one-pager
   Tokens per design handoff: colour, type, spacing, zero radius, 2px rules. */

:root {
  --ink: #201E1D;
  --player-navy: #131A2E;
  --brand-navy: #22409A;
  /* GB Music Radio palette, GB Brand Book v1.0 p.18 — confirmed against the
     PDF's actual text positions (Pantone code + hex sit directly under
     their PRIMARY/SECONDARY/TERTIARY column header, not just nearby text):
       Primary   Berry        Pantone 214C   #C81D6A
       Secondary tint 1       Pantone 673C   #E48EB4
       Secondary tint 2       Pantone 517C   #F1C6DA
       Tertiary  shared grey  Pantone 663C   #EBEBEB (same across all GB sub-brands)
     Replaces the design prototype's #E6007E and its unrelated grey scale.
     The navy tones below are NOT brand-book-specified for GB Music Radio
     (its page defines no dark colour) — kept as-is deliberately, not an
     oversight; see project notes if that's revisited. */
  --magenta: #D70000; /* TEST — brand-book Berry is #C81D6A, see note above */
  --magenta-tint: #E48EB4;
  --magenta-tint-2: #F1C6DA;
  --brand-grey: #EBEBEB;
  --hairline: var(--brand-grey);
  --body-grey: #4A4645;
  --muted-grey: #56514F;
  --faint-grey: #8B8684;
  --navy-rule: #2D3554;
  --navy-border: #3C4468;
  --navy-light: #C8D2EE;
  --navy-body: var(--navy-light);

  /* GB Brand Book v1.0, p.18: GB Music Radio's headline font is Montserrat
     Medium (lighter than sibling sub-brands, for an "expressive,
     entertainment feel"); body copy is Roboto Regular. */
  --font-heading: 'Montserrat', Helvetica, Arial, sans-serif;
  --font-body: 'Roboto', Helvetica, Arial, sans-serif;

  --skel-a: rgba(200, 29, 106, 0.07);
  --skel-b: rgba(200, 29, 106, 0.16);
}

.hero, .player-bar {
  --skel-a: rgba(241, 198, 218, 0.16);
  --skel-b: rgba(241, 198, 218, 0.32);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-body);
  padding-bottom: 0;
}

body.player-open { padding-bottom: 80px; }

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

a { color: var(--magenta); text-decoration: none; }

button { font: inherit; }

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 32px;
  padding-right: 32px;
}

:focus-visible {
  outline: 2px solid var(--magenta);
  outline-offset: 2px;
}

@keyframes gbbar { 0%, 100% { transform: scaleY(0.2); } 50% { transform: scaleY(1); } }
@keyframes gbdot { 0%, 100% { opacity: 1; } 50% { opacity: .15; } }
@keyframes gbticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes gbshimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Loading state for any field or artwork block still waiting on a fetch
   (now_playing/just_played/art). Never shows fabricated content —
   text is hidden via the shimmer's own opaque background, and images just
   show the shimmer over the section's navy/ground fallback fill until the
   real value (or the confirmed navy "no match" fallback) is known. */
.skeleton {
  color: transparent !important;
  background-image: linear-gradient(100deg, var(--skel-a) 30%, var(--skel-b) 50%, var(--skel-a) 70%);
  background-size: 300% 100%;
  animation: gbshimmer 1.5s ease-in-out infinite;
}
.skeleton svg { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .meter span, .live-beacon { animation: none !important; }
  .ticker-track { animation: none !important; }
  .skeleton { animation: none !important; }
}

/* ---------- Header ---------- */

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 22px 32px;
}

.site-header img { height: 30px; width: auto; }
.site-header > a { display: flex; }

.site-header nav {
  display: flex;
  gap: 18px;
  align-items: center;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-family: var(--font-heading);
  font-weight: 500;
}

.nav-links {
  display: flex;
  gap: 26px;
  align-items: center;
}

.site-header nav a { color: var(--ink); }
.site-header nav a:hover { color: var(--magenta); }

/* Listen live is the whole point of the page and already sits above the
   fold — the in-page nav links aren't worth a hamburger menu, just drop
   them on narrow screens. Their targets stay reachable by scrolling. */
@media (max-width: 720px) {
  .nav-links { display: none; }
}

.btn {
  border: none;
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 500;
  text-transform: uppercase;
  display: inline-flex;
  gap: 9px;
  align-items: center;
  justify-content: center;
}

.btn-magenta {
  background: var(--magenta);
  color: #fff;
}
.btn-magenta:hover { background: var(--brand-navy); }

.btn-small {
  font-size: 12px;
  letter-spacing: 0.14em;
  padding: 12px 18px;
  gap: 8px;
}

/* ---------- Player hero ---------- */

.hero {
  background: var(--player-navy);
  color: #fff;
  overflow: hidden;
  position: relative;
}

.hero-flag {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
}

.hero-grid {
  position: relative;
  z-index: 1;
  padding: 60px 32px 52px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 56px;
  align-items: center;
}

.hero-left { min-width: 0; }

.hero h1 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(46px, 7vw, 100px);
  line-height: 0.86;
  letter-spacing: -0.035em;
  margin: 0;
}

.hero h1 .accent { color: var(--navy-light); }

/* Client-supplied sticker artwork in place of the text headline. The PNG
   (1200x360) has transparent padding either side of the sticker, so crop
   it in CSS rather than shipping a re-encoded copy: the box takes the
   sticker's own 806x360 proportions and object-position lines the crop
   up with where the sticker sits in the file (213px in from the left). */
.hero-sticker {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
  aspect-ratio: 806 / 360;
  object-fit: cover;
  object-position: 54% 50%;
}

.hero-right {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.now-playing-art {
  width: 100%;
  max-width: 250px;
  aspect-ratio: 1 / 1;
  background-color: var(--brand-navy);
  background-size: cover;
  background-position: center;
}

.eyebrow-magenta {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy-light);
}

.np-title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  margin-top: 10px;
}

.np-meta {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 8px;
  color: var(--navy-body);
}

.meter {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 26px;
}
.meter span {
  width: 5px;
  height: 100%;
  transform-origin: bottom;
  animation: gbbar 1.1s ease-in-out infinite;
}
.meter span:nth-child(odd) { background: var(--magenta); }
.meter span:nth-child(even) { background: #fff; }
.meter span:nth-child(1) { animation-duration: 1.1s; }
.meter span:nth-child(2) { animation-duration: 1.4s; animation-delay: .12s; }
.meter span:nth-child(3) { animation-duration: .9s; animation-delay: .28s; }
.meter span:nth-child(4) { animation-duration: 1.25s; animation-delay: .05s; }
.meter span:nth-child(5) { animation-duration: 1.05s; animation-delay: .34s; }
.meter span:nth-child(6) { animation-duration: 1.5s; animation-delay: .2s; }
.meter span:nth-child(7) { animation-duration: .95s; animation-delay: .4s; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
}

.btn-large {
  font-size: 15px;
  letter-spacing: 0.08em;
  padding: 18px 24px;
  gap: 12px;
}
.hero-actions .btn-magenta:hover { background: #fff; color: var(--player-navy); }

.btn-outline-dark {
  background: none;
  border: 2px solid var(--navy-body);
  color: #fff;
  cursor: pointer;
}
.btn-outline-dark:hover { border-color: var(--magenta); color: var(--magenta); }

/* Mobile hero: centred instead of left-aligned, and compact enough that
   both CTAs land above the fold on a typical phone (the whole point of
   this page is getting someone listening, so Listen live/Download app
   are what needs to be visible without scrolling — not the headline). */
@media (max-width: 720px) {
  .site-header { padding: 14px 20px; justify-content: center; }

  .hero-grid {
    padding: 20px 20px 20px;
    gap: 16px;
    text-align: center;
  }
  .hero h1 { font-size: clamp(34px, 12vw, 56px); }
  .hero-sticker { max-width: 340px; margin: 0 auto; }
  .hero-right { align-items: center; gap: 10px; }
  .now-playing-art { max-width: 140px; }
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .hero-actions .btn-large {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 20px;
  }
}

.ticker-wrap {
  position: relative;
  z-index: 1;
  border-top: 2px solid var(--navy-rule);
  overflow: hidden;
  white-space: nowrap;
}

.ticker-track {
  display: inline-flex;
  gap: 40px;
  padding: 14px 0;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy-body);
  width: max-content;
  animation: gbticker 34s linear infinite;
}
.ticker-track .sep { color: var(--magenta); }

/* ---------- Just played ---------- */

.just-played {
  padding: 44px 32px 8px;
}

.just-played-head {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  align-items: center;
  justify-content: space-between;
  border-top: 2px solid var(--ink);
  padding-top: 18px;
}

.just-played-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.btn-outline {
  background: none;
  border: 2px solid var(--ink);
  color: var(--ink);
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 11px 15px;
  cursor: pointer;
  display: inline-flex;
  gap: 9px;
  align-items: center;
}
.btn-outline:hover { background: var(--magenta); border-color: var(--magenta); color: #fff; }

.carousel {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 24px 0 8px;
}

.carousel-card {
  flex: none;
  width: 168px;
  scroll-snap-align: start;
}

.carousel-sleeve {
  position: relative;
  width: 168px;
  height: 168px;
  background-size: cover;
  background-position: center;
  background-color: var(--brand-navy);
}

.up-next-flag {
  position: absolute;
  left: 0;
  top: 0;
  background: var(--magenta);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 6px 9px;
}

.carousel-card .title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.2;
  margin-top: 12px;
}
.carousel-card .artist {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-grey);
  margin-top: 5px;
}
.carousel-card .time {
  font-size: 12px;
  color: var(--faint-grey);
  margin-top: 4px;
}

/* ---------- Six decades ---------- */

.decades-section { padding: 64px 32px 56px; }

.section-head {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: baseline;
  justify-content: space-between;
}

h2 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(28px, 4vw, 52px);
  letter-spacing: -0.025em;
  margin: 0;
}

.section-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-navy);
}

.decades-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 32px 28px;
  margin-top: 48px;
}

.decade {
  min-width: 0;
  border-top: 2px solid var(--ink);
  padding-top: 18px;
}
.decade .dot {
  width: 14px;
  height: 14px;
  display: block;
  margin-top: -25px;
}
.decade .dot.navy { background: var(--brand-navy); }
.decade .dot.magenta { background: var(--magenta); }
.decade .years {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(28px, 2.6vw, 40px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-top: 18px;
}
.decade .label {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-grey);
  margin-top: 8px;
}

/* ---------- Ways to listen ---------- */

.listen-section { padding: 64px 32px; }

.listen-rows { display: flex; flex-direction: column; margin-top: 40px; }

.listen-row {
  display: grid;
  /* Weighted, not equal-fr: the description needs real room to stay on
     one line (its job per spec) — equal thirds left it narrow enough to
     wrap on the longer Nation Player/GB Music Radio app copy, making
     that row taller than the rest and throwing off the divider rhythm.
     CTA sizes to its own fixed min-width. Below the breakpoint this
     switches to a stacked layout instead, where none of this applies. */
  grid-template-columns: minmax(200px, 1.1fr) minmax(420px, 1.6fr) auto;
  gap: 16px 28px;
  align-items: center;
  border-top: 2px solid var(--ink);
  /* Fixed min-height (not just padding) so rows without a CTA — DAB+
     Radio, Smart speaker — don't end up visibly shorter than the rows
     that have a button; every divider stays evenly spaced regardless
     of what a given row actually contains. */
  min-height: 90px;
  padding: 22px 0;
}
.listen-row.last { border-bottom: 2px solid var(--ink); }

.listen-title {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.listen-title svg { flex: none; }
.listen-title .name {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(19px, 1.8vw, 24px);
  line-height: 1.1;
}

.listen-desc {
  font-size: 15px;
  line-height: 1.5;
  color: var(--body-grey);
  min-width: 0;
}

.listen-cta-wrap { display: flex; justify-content: flex-end; min-width: 0; }

/* The weighted columns need real room to keep every description on one
   line — below ~1050px the description column gets squeezed back down
   near its minmax floor, which isn't wide enough for the longest lines
   (Nation Player, GB Music Radio app) and they wrap again. Rather than
   chase an exact px floor, just switch to a clean vertical stack with a
   full-width CTA below that point. */
@media (max-width: 1050px) {
  .listen-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .listen-cta-wrap { justify-content: stretch; }
  .listen-cta-wrap .btn-listen { width: 100%; min-width: 0; box-sizing: border-box; }
}

.btn-listen {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 14px 18px;
  display: inline-flex;
  gap: 9px;
  align-items: center;
  justify-content: center;
  min-width: 190px;
  box-sizing: border-box;
}

.btn-listen.magenta {
  background: var(--magenta);
  color: #fff;
  border: none;
  cursor: pointer;
}
.btn-listen.magenta:hover { background: var(--brand-navy); }

.btn-listen.muted {
  color: var(--faint-grey);
}

/* ---------- Closing band ---------- */

.closing-band { background: var(--brand-navy); color: #fff; }

.closing-inner {
  padding: 60px 32px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
  align-items: center;
}

.closing-headline {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(26px, 3.4vw, 46px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0;
}

.closing-right {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
}

.streaming-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy-light);
}

.live-beacon { flex: none; animation: gbdot 1.6s ease-in-out infinite; }

.closing-inner .btn-large:hover { background: #fff; color: var(--brand-navy); }

/* ---------- Pre-launch "coming soon" mode (js/site-mode.js) ---------- */

html.coming-soon [data-coming-soon="hide"],
html:not(.coming-soon) [data-coming-soon="show"] { display: none !important; }
/* Footer link grid is hidden, so the bottom strip sits directly under
   the footer's own 2px rule — drop its hairline to avoid a double line. */
html.coming-soon .footer-bottom { border-top: 0; }

/* Hero promo: replaces the now-playing block until launch. */
.promo {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 520px;
}

.promo-title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 0.98;
  letter-spacing: -0.025em;
}

.promo-date {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(18px, 1.8vw, 24px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  margin-top: -4px;
}

.promo-player {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 8px;
  padding: 12px 20px 12px 12px;
  border: 2px solid var(--navy-border);
  background: var(--player-navy);
}

.promo-toggle {
  flex: none;
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: var(--magenta);
  color: #fff;
  cursor: pointer;
}
.promo-toggle:hover { background: #fff; color: var(--player-navy); }
.promo-toggle .icon-pause { display: none; }
.promo.is-playing .promo-toggle .icon-play { display: none; }
.promo.is-playing .promo-toggle .icon-pause { display: block; }

.promo-player-text { flex: 1; min-width: 0; text-align: left; }
.promo-player-label {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.promo-player-sub {
  margin-top: 4px;
  font-size: 14px;
  color: var(--navy-body);
}

/* Meter only animates while the promo is actually playing. */
.promo-player .meter { flex: none; height: 22px; }
.promo-player .meter span { animation-play-state: paused; transform: scaleY(0.2); }
.promo.is-playing .promo-player .meter span { animation-play-state: running; }

.promo-volume { display: flex; align-items: center; gap: 8px; flex: none; }
.promo-volume input[type="range"] { width: 96px; accent-color: var(--magenta); }
.promo-mute {
  display: inline-flex;
  padding: 4px;
  border: none;
  background: none;
  color: var(--navy-body);
  cursor: pointer;
}
.promo-mute:hover { color: #fff; }
.promo-mute .icon-muted { display: none; }
.promo.is-muted .promo-mute .icon-volume { display: none; }
.promo.is-muted .promo-mute .icon-muted { display: block; }

@media (max-width: 720px) {
  .promo { align-items: center; gap: 12px; }
  .promo-player { width: 100%; box-sizing: border-box; flex-wrap: wrap; }
  /* Not enough room for meter + volume beside the label on a phone: drop
     the decorative meter and give the volume control its own full row. */
  .promo-player .meter { display: none; }
  .promo-volume { width: 100%; }
  .promo-volume input[type="range"] { flex: 1; width: auto; }
}

/* ---------- Simple content pages (contact/terms/privacy/cookies) ---------- */

.page-content {
  max-width: 760px;
  margin: 0 auto;
  padding: 64px 32px 96px;
}

.page-content h1 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(32px, 5vw, 52px);
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}

.page-content .updated {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-grey);
  margin: 0 0 40px;
}

.page-content .intro {
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink);
  max-width: 42em;
}

.page-content h2 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.01em;
  margin: 40px 0 14px;
  border-top: 2px solid var(--ink);
  padding-top: 24px;
}

.page-content p, .page-content li {
  font-size: 16px;
  line-height: 1.6;
  color: var(--body-grey);
  max-width: 42em;
}

.page-content ul { padding-left: 20px; margin: 0 0 16px; }
.page-content a { text-decoration: underline; }

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 32px;
}

.contact-card {
  padding: 22px;
  border: 2px solid var(--ink);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact-card .label {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-grey);
}

.contact-card a {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 18px;
  color: var(--magenta);
  text-decoration: none;
  word-break: break-word;
}
.contact-card a:hover { color: var(--brand-navy); }

/* ---------- Footer ---------- */

.site-footer { border-top: 2px solid var(--ink); margin-top: 16px; }

.footer-grid {
  padding: 64px 32px 48px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 48px 40px;
}

.footer-brand {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.footer-brand img { height: 26px; width: auto; }

.social-row { display: flex; gap: 20px; align-items: center; }
.social-row a { color: var(--ink); display: inline-flex; }
.social-row a:hover { color: var(--magenta); }

.footer-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.footer-col .heading {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}
.footer-col a {
  color: var(--body-grey);
  font-size: 15px;
  line-height: 1.3;
}
.footer-col a:hover { color: var(--magenta); }

.footer-bottom {
  padding: 24px 32px 48px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  align-items: center;
  justify-content: space-between;
  border-top: 2px solid var(--hairline);
}
.footer-bottom .copyright { font-size: 13px; color: var(--muted-grey); }
.footer-bottom .strap {
  font-family: var(--font-heading);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--muted-grey);
}

/* ---------- Playlist drawer ---------- */

.scrim {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(19, 26, 46, 0.55);
}
.scrim[hidden] { display: none; }

.playlist-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 71;
  width: min(420px, 100%);
  background: #fff;
  border-left: 2px solid var(--ink);
  display: flex;
  flex-direction: column;
}
.playlist-drawer[hidden] { display: none; }

.playlist-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 20px 24px;
  border-bottom: 2px solid var(--ink);
  flex: none;
}
.playlist-head .title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.015em;
}
.playlist-head .subtitle {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-grey);
  margin-top: 6px;
}

.icon-btn {
  background: none;
  border: 2px solid var(--ink);
  color: var(--ink);
  padding: 9px;
  cursor: pointer;
  display: inline-flex;
  flex: none;
}
.icon-btn:hover { background: var(--magenta); border-color: var(--magenta); color: #fff; }

.playlist-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 8px 24px 24px;
}

.playlist-row {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 2px solid var(--hairline);
}
.playlist-row .sleeve {
  width: 48px;
  height: 48px;
  flex: none;
  background-size: cover;
  background-position: center;
  background-color: var(--brand-navy);
}
.playlist-row .info { min-width: 0; flex: 1 1 auto; }
.playlist-row .title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.2;
}
.playlist-row .artist {
  font-size: 13px;
  color: var(--muted-grey);
  margin-top: 3px;
}
.playlist-row .time {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 13px;
  color: var(--faint-grey);
  flex: none;
}

.playlist-foot {
  flex: none;
  border-top: 2px solid var(--ink);
  padding: 18px 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}
.playlist-foot .prompt {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-grey);
}
.playlist-foot .btn-magenta {
  font-size: 12px;
  letter-spacing: 0.14em;
  padding: 12px 16px;
}

/* ---------- Sticky player bar ---------- */

.player-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: var(--player-navy);
  color: #fff;
  display: none;
}
body.player-open .player-bar { display: block; }

.progress-strip {
  height: 4px;
  background: var(--navy-rule);
  position: relative;
}
/* No elapsed/duration data is available from the Nation Radio now_playing
   endpoint (plain-text "Title by Artist" only), so the fill/marker stay
   hidden rather than fabricate a position. Re-enable if that data ever
   becomes available. */
.progress-fill,
.progress-marker {
  display: none;
}

.player-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.player-art {
  width: 58px;
  height: 58px;
  flex: none;
  background-color: var(--brand-navy);
  background-size: cover;
  background-position: center;
}

.play-toggle {
  background: var(--magenta);
  border: none;
  color: #fff;
  width: 48px;
  height: 48px;
  flex: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.play-toggle:hover { background: #fff; color: var(--player-navy); }
.play-toggle svg.icon-pause { display: block; }
.play-toggle svg.icon-play { display: none; }
.play-toggle.is-paused svg.icon-pause { display: none; }
.play-toggle.is-paused svg.icon-play { display: block; }

.player-meta { min-width: 0; flex: 1 1 180px; }
.player-meta .eyebrow-magenta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
}
.player-meta .np-title {
  font-size: 17px;
  line-height: 1.1;
  margin-top: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.player-meta .np-meta {
  font-size: 12px;
  margin-top: 3px;
}
.player-meta .stream-error {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--magenta);
  margin-top: 5px;
  display: none;
}
body.stream-error .player-meta .stream-error { display: block; }

.player-meter { display: flex; align-items: flex-end; gap: 3px; height: 22px; flex: none; }
.player-meter span {
  width: 4px;
  height: 100%;
  transform-origin: bottom;
  animation: gbbar 1.1s ease-in-out infinite;
}
.player-meter span:nth-child(odd) { background: var(--magenta); }
.player-meter span:nth-child(even) { background: #fff; }
.player-meter span:nth-child(1) { animation-duration: 1.1s; }
.player-meter span:nth-child(2) { animation-duration: 1.4s; animation-delay: .15s; }
.player-meter span:nth-child(3) { animation-duration: .9s; animation-delay: .3s; }
.player-meter span:nth-child(4) { animation-duration: 1.25s; animation-delay: .05s; }

.player-volume { display: flex; align-items: center; gap: 10px; flex: none; }
.player-volume input[type="range"] { width: 96px; accent-color: var(--magenta); }

.player-close {
  background: none;
  border: 2px solid var(--navy-border);
  color: #fff;
  padding: 9px;
  cursor: pointer;
  display: inline-flex;
  flex: none;
}
.player-close:hover { border-color: var(--magenta); color: var(--magenta); }