:root {
  --bg: #26091e;
  --surface: #3b102f;
  --surface-2: #571745;
  --text: #fff5f2;
  --muted: #e0b8d1;
  --accent: #ff4e9a;
  --accent-2: #62ead1;
  --line: rgba(255, 245, 242, .18);
  --radius: 24px;
  --shadow: 0 28px 80px rgba(20, 0, 18, .48);
  --page-background: radial-gradient(circle at 50% -8%, rgba(255, 78, 154, .4), transparent 34%), radial-gradient(circle at 92% 42%, rgba(91, 73, 229, .22), transparent 28%), linear-gradient(145deg, #26091e, #190814 72%);
  font-family: Arial, Helvetica, sans-serif;
}

body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .45; background: radial-gradient(circle at 12% 30%, #fff 0 1px, transparent 2px), radial-gradient(circle at 72% 8%, #fff 0 1px, transparent 2px), radial-gradient(circle at 82% 70%, #ffb2d3 0 1px, transparent 2px), radial-gradient(circle at 34% 80%, #62ead1 0 1px, transparent 2px); background-size: 170px 170px, 230px 230px, 190px 190px, 260px 260px; }
.site-header { top: 10px; width: min(var(--max), calc(100% - 28px)); min-height: 68px; margin: 0 auto; padding: 9px 14px; border-color: rgba(255, 255, 255, .24); border-radius: 999px; background: rgba(43, 8, 34, .78); box-shadow: 0 14px 50px rgba(0, 0, 0, .22); }
.brand-mark { border: 0; border-radius: 50%; background: linear-gradient(145deg, #ff91bf, var(--accent)); color: #390a2b; box-shadow: 0 0 0 5px rgba(98, 234, 209, .14), 0 0 28px rgba(255, 78, 154, .4); font-weight: 900; }
.brand strong { font-size: 1.1rem; font-weight: 900; letter-spacing: -.02em; }
.site-nav a { font-size: .78rem; font-weight: 700; }
.site-nav a:hover, .site-nav a[aria-current="page"] { background: #fff4f0; color: #4a0d36; }
.hero { min-height: 780px; }
.hero-grid { grid-template-columns: minmax(0, 1.25fr) minmax(350px, .65fr); gap: 30px 68px; }
.hero-copy { position: relative; z-index: 3; }
.hero h1, .section-head h2, .prose h1 { font-weight: 900; letter-spacing: -.075em; }
.hero h1 { max-width: 850px; font-size: clamp(4rem, 8.2vw, 8.5rem); line-height: .82; font-style: italic; text-shadow: 0 8px 34px rgba(255, 78, 154, .25); }
.hero h1::after { content: "POP / 24 / 7"; display: inline-block; margin-left: .3em; padding: 8px 12px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; background: rgba(255, 255, 255, .08); color: var(--accent-2); font-size: .08em; font-style: normal; letter-spacing: .18em; vertical-align: .8em; }
.hero .lead { max-width: 610px; color: #ecc7dc; }
.hero-cta { padding: 13px 22px; border: 0; border-radius: 999px; background: var(--accent-2); color: #27091f; box-shadow: 0 10px 34px rgba(98, 234, 209, .18); }
.hero-cta span { color: #27091f; }
.hero-art { min-height: 420px; overflow: visible; border: 1px solid rgba(255, 255, 255, .26); border-radius: 50%; background: conic-gradient(from 210deg, #ff4e9a, #ffb7d7, #745be5, #62ead1, #fff1ec, #ff4e9a); box-shadow: inset 0 0 0 42px rgba(39, 7, 31, .12), 0 38px 90px rgba(0, 0, 0, .35), 0 0 80px rgba(255, 78, 154, .2); transform: rotate(5deg); }
.hero-art::before { width: 52%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #29091f 0 11%, #fff0e8 12% 14%, #ff4e9a 15% 42%, #481038 43%); box-shadow: 0 0 34px rgba(255, 255, 255, .32); }
.hero-art::after { top: 3%; right: 9%; width: 46%; height: 14%; border-radius: 50%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent); filter: blur(6px); transform: rotate(-28deg); }
.hero-art strong { z-index: 3; color: #fff; font-size: 3.4rem; text-shadow: 0 4px 14px #5c0e44; transform: rotate(-5deg); }
.hero-art-label { top: 48px; left: -20px; padding: 8px 15px; border-radius: 999px; background: #fff3ee; color: #4c0c38; box-shadow: 5px 7px 0 var(--accent-2); transform: rotate(-8deg); }
.equalizer { right: -18px; bottom: 52px; left: auto; padding: 10px 14px; border-radius: 999px; background: #471035; transform: rotate(-5deg); }
.equalizer i { width: 5px; border-radius: 99px; background: var(--accent-2); }
.hero-note { border: 1px solid rgba(255, 255, 255, .28); border-radius: 40px 14px 40px 14px; background: rgba(75, 15, 55, .72); box-shadow: 10px 12px 0 rgba(98, 234, 209, .1); backdrop-filter: blur(18px); }
.hero-note strong { color: var(--accent-2); }
.section-head h2 { max-width: 690px; }
.live-section::before { content: ""; position: absolute; inset: 34px 0; z-index: -1; border: 1px solid rgba(255, 255, 255, .09); border-radius: 46px; background: linear-gradient(100deg, rgba(255, 78, 154, .08), rgba(98, 234, 209, .035)); }
.station-grid { grid-template-columns: repeat(12, 1fr); gap: 18px; }
.station-card { grid-column: span 4; min-height: 285px; border-color: rgba(255, 255, 255, .2); background: linear-gradient(150deg, rgba(90, 23, 67, .92), rgba(48, 12, 38, .88)); box-shadow: 0 16px 42px rgba(0, 0, 0, .2); }
.station-card:first-child, .station-card:nth-child(2) { grid-column: span 6; min-height: 330px; }
.station-card:first-child { background: linear-gradient(135deg, #d93480, #712967 72%); }
.station-card:nth-child(2) { background: linear-gradient(135deg, #194f59, #31234f 75%); }
.station-card::after { content: "♪"; position: absolute; right: 15px; bottom: -26px; color: rgba(255, 255, 255, .075); font-size: 7rem; font-weight: 900; transform: rotate(-12deg); }
.station-card:hover, .station-card.is-current { transform: translateY(-7px) scale(1.01); border-color: rgba(255, 255, 255, .5); background: linear-gradient(145deg, #6f1b52, #39102d); box-shadow: 0 26px 65px rgba(255, 78, 154, .16); }
.tag { border-color: rgba(255, 255, 255, .24); background: rgba(255, 255, 255, .07); }
.station-order { color: var(--accent-2); }
.station-action { color: #ff8cbd !important; }
.journal-section .content-grid { grid-template-columns: 1.15fr .85fr .85fr; align-items: stretch; }
.journal-card { min-height: 320px; border: 0; border-radius: 36px; background: #f4c3d9; color: #3b102f; box-shadow: 0 24px 50px rgba(0, 0, 0, .22); }
.journal-card p, .journal-card a, .journal-card .eyebrow { color: #6a3152; }
.journal-card:nth-child(2) { background: #78dfce; color: #123f3b; transform: translateY(34px); }
.journal-card:nth-child(2) p, .journal-card:nth-child(2) a, .journal-card:nth-child(2) .eyebrow { color: #245f58; }
.journal-card:nth-child(3) { background: #9e8ee9; color: #251d54; }
.journal-card:nth-child(3) p, .journal-card:nth-child(3) a, .journal-card:nth-child(3) .eyebrow { color: #403478; }
.button { border-radius: 999px; }
.player-shell { border-color: rgba(255, 255, 255, .28); border-radius: 999px; background: rgba(57, 13, 43, .9); box-shadow: 0 24px 80px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .06); }
.play-button { background: var(--accent-2); color: #26091e; box-shadow: 0 0 25px rgba(98, 234, 209, .25); }

@media (max-width: 1000px) {
  .station-card { grid-column: span 6; }
  .journal-section .content-grid { grid-template-columns: 1fr 1fr; }
  .journal-card:first-child { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-art { width: min(500px, 86vw); min-height: auto; aspect-ratio: 1; margin: 10px auto 26px; }
}
@media (max-width: 560px) {
  .site-header { width: calc(100% - 16px); border-radius: 22px; }
  .hero h1 { font-size: clamp(3.5rem, 17vw, 5.8rem); }
  .hero-art-label { left: 0; }
  .equalizer { right: 0; }
  .station-grid { grid-template-columns: 1fr; }
  .station-card, .station-card:first-child, .station-card:nth-child(2) { grid-column: auto; min-height: 280px; }
  .journal-section .content-grid { grid-template-columns: 1fr; }
  .journal-card:first-child { grid-column: auto; }
  .journal-card:nth-child(2) { transform: none; }
  .player-shell { border-radius: 24px; }
}