/* Archways & Ceilings: the website's navy, warm ivory and coral palette,
   with album-specific sleeve treatments. */
:root {
  --brand-navy: #08314d;
  --brand-navy-deep: #06273e;
  --brand-navy-hover: #0b466e;
  --brand-red: #d63e39;
  --brand-red-hover: #a72f2b;
  --brand-ivory: #f0eae3;
  --brand-white: #ffffff;
  --brand-text: #443d3d;
  --brand-muted: #625d57;
  --brand-border: #d7d3ce;
  --brand-gold: #f2bc40;
  --brand-light-text: #e2e8eb;

  /* Bridge the existing decorative variables to the brand colors. */
  --gold: var(--brand-gold);
  --teal: var(--brand-navy);
  --copper: var(--brand-red);
  --ink: var(--brand-navy);
  --cream: var(--brand-ivory);
}

html {
  color-scheme: light;
  background: var(--brand-ivory);
}

body,
body[data-album-theme=a-little-curve-in-everything],
body[data-album-theme=album-two] {
  background-color: var(--brand-ivory);
  background-image:
    radial-gradient(ellipse 80% 900px at 100% 180px, #ffffffd9, transparent),
    radial-gradient(ellipse 65% 800px at 0 1100px, #ffffffb3, transparent);
  color: var(--brand-text);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
[role=button]:focus-visible {
  outline-color: var(--brand-red-hover);
}

/* Navy masthead and high-contrast station controls. */
.top {
  background: linear-gradient(100deg, var(--brand-navy), var(--brand-navy-deep));
  border-bottom-color: #ffffff3d;
  box-shadow: 0 8px 24px #08314d24;
  color: var(--brand-white);
  color-scheme: dark;
}

.top:after {
  background: linear-gradient(90deg, var(--brand-red), var(--brand-ivory) 65%, transparent);
}

.brand { filter: drop-shadow(0 4px 15px #00000020); }
.crew, .crew b { color: var(--brand-ivory); }
.install-icon { color: currentColor; }

.outline {
  background: var(--brand-white);
  border-color: #08314d70;
  color: var(--brand-navy);
}

.outline:hover {
  background: var(--brand-navy);
  border-color: var(--brand-navy);
  color: var(--brand-white);
}

.outline[aria-pressed=true] {
  background: var(--brand-navy);
  border-color: var(--brand-navy);
  color: var(--brand-white);
}

.top .outline, .player .outline {
  background: #ffffff08;
  border-color: #f0eae370;
  color: var(--brand-white);
}

.top .outline:hover, .player .outline:hover,
.top .outline[aria-pressed=true], .player .outline[aria-pressed=true] {
  background: var(--brand-red);
  border-color: var(--brand-red);
  color: var(--brand-white);
}

.top :focus-visible, .player :focus-visible,
.new-video :focus-visible {
  outline-color: var(--brand-white);
}

.on-air {
  color: #e2e8ebb3;
  border-color: #f0eae347;
  background: #ffffff05;
}
.on-air:before { background: #e2e8eb80; }
.playing .on-air {
  color: var(--brand-white);
  border-color: var(--brand-red);
  box-shadow: 0 0 20px #d63e3933;
}
.playing .on-air:before {
  background: var(--brand-red);
  box-shadow: 0 0 10px #d63e3999;
}

/* The existing curves and vinyl keep their personality in the new palette. */
.hero-flourish .teal { color: var(--brand-navy); }
.hero-flourish .copper { color: var(--brand-red); }
.hero-flourish .gold { color: var(--brand-gold); }
.eyebrow { color: var(--brand-navy); }
.eyebrow i { background: var(--brand-red); box-shadow: 0 0 0 4px #d63e3910; }
h1 { color: var(--brand-navy); text-shadow: 2px 3px 0 #ffffff80; }
h1 span {
  color: var(--brand-red);
  background: none;
  -webkit-text-fill-color: var(--brand-red);
  text-shadow: none;
  filter: none;
}
.intro-copy, .station-intro>span { color: var(--brand-text); }
.station-intro strong { color: var(--brand-navy); }
.intro-copy:after {
  border-bottom-color: var(--brand-red);
  box-shadow: 0 3px 0 -2px var(--brand-navy);
}

.record {
  background: #101820;
  border-color: var(--brand-navy);
  box-shadow: 12px 13px 0 #08314d22, 20px 21px 0 #d63e3912, 0 0 50px #08314d10;
}
.record-spin {
  background: repeating-radial-gradient(circle, #19232b 0 2px, #35414a 3px, #101820 4px 7px);
}
.record-label {
  background: radial-gradient(circle at 35% 35%, var(--brand-navy), var(--brand-navy-deep) 75%);
  border-color: var(--brand-gold);
  box-shadow: inset 0 0 0 5px var(--brand-navy-deep), inset 0 0 0 6px #f2bc4040;
}
.record-sticker {
  background: var(--brand-red);
  color: var(--brand-white);
  box-shadow: 0 0 0 3px var(--brand-ivory), 0 0 0 4px #08314d50;
}

.sound-ribbon {
  background: linear-gradient(90deg, #ffffff80, #ffffffd9, #ffffff80);
  border-color: #08314d30;
  color: var(--brand-navy);
}
.sound-ribbon i { color: var(--brand-red); }
#status { color: var(--brand-muted); }

/* Featured song, video and the video invitation share a navy sleeve. */
.new-video, .new-song {
  background: radial-gradient(ellipse at 80% 10%, #ffffff0d, transparent 70%), var(--brand-navy);
  border-color: #08314d66;
  box-shadow: 0 0 32px #08314d14;
}
.new-video-button { color: var(--brand-white); }
.new-video-art:after { box-shadow: inset -20px 0 35px #08314d44; }
.drops-grid .new-song-art {
  background: linear-gradient(145deg, var(--brand-navy-deep), var(--brand-navy));
}
.drop-badge, .new-song .drop-badge {
  background: var(--brand-red);
  color: var(--brand-white);
}
.drop-kicker, .drop-script { color: var(--brand-ivory); }
.drop-meta { color: var(--brand-light-text); }
.drop-title, #new-video-title { color: var(--brand-white); }
.drops-heading .kicker { color: var(--brand-muted); }
.drops-heading h2 { color: var(--brand-navy); }
.new-video-play {
  background: var(--brand-red);
  border-color: #ffffff80;
  box-shadow: 0 0 0 8px #ffffff1a, 0 6px 22px #00000040;
}
.new-video-play:before { border-left-color: var(--brand-white); }

.video-strip {
  background: radial-gradient(ellipse at 0 0, #ffffff0d, transparent 60%), var(--brand-navy);
  border-color: #08314d70;
  color: var(--brand-white);
  box-shadow: 0 12px 32px #08314d18, inset 0 0 0 5px #ffffff04;
}
.video-strip:before { color: #f0eae380; }
.video-strip:after {
  border-color: #ffffff1f;
  box-shadow: 0 0 0 12px #ffffff07, 0 0 0 24px #ffffff05;
}
#video-strip-label { color: var(--brand-ivory); text-shadow: none; }
#video-strip-label:after { border-bottom-color: var(--brand-red); }
.video-strip-count { color: var(--brand-light-text); }
.video-strip-play {
  background: var(--brand-red);
  border-color: #ffffff80;
  box-shadow: 0 0 0 5px #ffffff08;
}
.video-strip-play:before { border-left-color: var(--brand-white); }
#video-thumbnails img { border-color: var(--brand-navy); }

/* Light album sleeves and song rows, with clear selected states. */
.section-head .kicker { color: var(--brand-muted); }
.section-head h2 { color: var(--brand-navy); }
.section-head h2:before { background: var(--brand-red); }
.section-head h2 span { color: var(--brand-muted); }

.album-choice, .album-choice:nth-child(2n) {
  background: linear-gradient(125deg, var(--brand-white), #faf8f5);
  border-color: var(--brand-border);
  color: var(--brand-navy);
  box-shadow: 0 8px 24px #08314d0d;
}
.album-choice:before {
  border-color: #08314d12;
  box-shadow: 0 0 0 10px #08314d07, 0 0 0 20px #08314d04;
}
.album-choice:after, .album-choice small { color: var(--brand-muted); }
.album-choice strong { color: var(--brand-navy); }
.album-choice[aria-pressed=true] {
  background: linear-gradient(125deg, var(--brand-white), var(--brand-ivory));
  border-color: var(--brand-navy);
  box-shadow: inset 3px 0 0 var(--brand-red), 0 8px 28px #08314d14;
}
.album-choice[aria-pressed=true]:before { border-color: #08314d80; }
.album-choice-placeholder, .album-card .album.upcoming,
.track img, .track .thumb, .video-cover {
  background: var(--brand-navy);
  color: var(--brand-ivory);
}
.album, .album-type { background-color: var(--brand-navy); color: var(--brand-white); }
.album-type span { color: var(--brand-ivory); }
.album-card .album {
  border-color: #08314d30;
  box-shadow: 6px 6px 0 #08314d18, 12px 12px 0 #d63e390d, 0 14px 32px #08314d1a;
}
.album-card .kicker { color: var(--brand-muted); }
.album-card h3 { color: var(--brand-navy); }
.album-card>p:not(.kicker), .album-info>p:not(.kicker) { color: var(--brand-text); }
.album-info .album-meta { color: var(--brand-muted); }
.album-empty { background: var(--brand-white); color: var(--brand-navy); border-color: #08314d70; }
.album-empty span { color: var(--brand-muted); }
.play-album {
  background: var(--brand-red);
  color: var(--brand-white);
  border-color: var(--brand-red);
  box-shadow: 0 4px 0 var(--brand-red-hover), 0 9px 22px #08314d18;
}
.play-album:hover { background: var(--brand-red-hover); border-color: var(--brand-red-hover); }
.play-album:active { box-shadow: 0 2px 0 var(--brand-red-hover); }

.tracks { background: var(--brand-white); }
.track {
  background: var(--brand-white);
  border-color: #08314d1c;
  color: var(--brand-navy);
}
.track:nth-child(even) { background: #faf8f5; }
.track:last-child { border-color: #08314d1c; }
.track:hover { background: var(--brand-ivory); }
.track[aria-pressed=true] {
  background: linear-gradient(90deg, #08314d12, #08314d05);
  color: var(--brand-navy);
  box-shadow: inset 3px 0 0 var(--brand-red);
}
.track .number, .track small, .track .length { color: var(--brand-muted); }
.track .arrow {
  color: var(--brand-navy);
  background: #08314d05;
  border-color: #08314d70;
  box-shadow: 0 0 0 3px #08314d03;
}
.track[aria-pressed=true] .arrow {
  background: var(--brand-red);
  border-color: var(--brand-red);
  color: var(--brand-white);
  box-shadow: 0 0 12px #d63e3918;
}

/* Navy playback bar and expanded sleeve, including the native seek control. */
.player {
  background: linear-gradient(110deg, #08314df7, #06273ef7);
  border-top-color: #ffffff66;
  box-shadow: 0 -8px 35px #08314d33;
  color: var(--brand-white);
  color-scheme: dark;
}
.player:before { background: linear-gradient(90deg, var(--brand-red), var(--brand-ivory), var(--brand-red)); }
.player-name strong { color: var(--brand-white); }
.player-name small, .timeline span { color: var(--brand-light-text); }
.now-spinning, .player:not(:has(.main-play[aria-label=Pause])) .now-spinning { color: var(--brand-ivory); }
.player-cover { border-color: #f0eae380; }
.equalizer i { background: var(--brand-red); }
.transport button { color: var(--brand-white); }
.transport .main-play {
  background: var(--brand-red);
  color: var(--brand-white);
  box-shadow: 0 0 0 4px #ffffff10;
}
.transport .main-play:hover, .transport .main-play:active { background: var(--brand-red-hover); }
.timeline input { accent-color: var(--brand-ivory); color-scheme: dark; }
.player-expand { color: var(--brand-ivory); }
.grab { background: #f0eae399; }
.swipe-hint { color: var(--brand-light-text); }
#player-shade { background: #06273eb3; }
.player.expanded {
  background: radial-gradient(ellipse at top, #0b466e80, transparent 70%), var(--brand-navy);
  box-shadow: 0 -15px 60px #06273e66;
}
.expanded .player-cover { border-color: #f0eae3a0; }
.expanded .sheet-artist { color: var(--brand-light-text); }

/* Dialogs and supplementary states use the same light surfaces. */
dialog {
  background: var(--brand-white);
  border-color: #08314d70;
  color: var(--brand-text);
  color-scheme: light;
}
dialog::backdrop { background: #06273ecc; }
.dialog-head h2, #chooser-title { color: var(--brand-navy); }
.dialog-head button { background: var(--brand-red); color: var(--brand-white); }
.dialog-head button:hover { background: var(--brand-red-hover); }
.video-card {
  background: #faf8f5;
  border-color: var(--brand-border);
  color: var(--brand-navy);
}
.video-card:hover { background: var(--brand-ivory); border-color: var(--brand-navy); }
.video-card small { color: var(--brand-red-hover); }
#video-chooser p, #video-status { color: var(--brand-muted); }
#resume-offer {
  background: var(--brand-white);
  border-color: #08314d70;
  color: var(--brand-navy);
}
.error { color: var(--brand-red-hover)!important; }

/* Older feature markup remains in the same palette if shown. */
.feature { background: var(--brand-navy); color: var(--brand-white); }
.feature-wash { background: linear-gradient(90deg, #08314d 10%, #08314dcc 43%, #08314d55); }
.feature .tag { background: var(--brand-red); color: var(--brand-white); }
.watch { color: var(--brand-white); text-shadow: 0 2px 10px #06273e; }
.play-circle { background: var(--brand-red); color: var(--brand-white); }
.watch:hover .play-circle { background: var(--brand-red-hover); }

footer { border-top-color: #08314d40; color: var(--brand-navy); }
footer:before { background: var(--brand-ivory); color: var(--brand-red); }
footer .footer-signature, footer b { color: var(--brand-navy); }
footer p { color: var(--brand-muted); }

@media (hover:hover) {
  .album-choice:hover { border-color: var(--brand-navy); box-shadow: 0 10px 26px #08314d18; }
  .track:hover { background: var(--brand-ivory); }
  .track:hover .arrow { background: var(--brand-red); border-color: var(--brand-red); color: var(--brand-white); }
  .video-strip:hover { border-color: var(--brand-navy); box-shadow: 0 12px 30px #08314d24; }
  .video-strip:hover .video-strip-play { background: var(--brand-red-hover); }
  .new-video-button:hover .new-video-play {
    background: var(--brand-red-hover);
    box-shadow: 0 0 0 12px #ffffff1a, 0 6px 22px #00000040;
  }
}

@media (max-width:760px) {
  .record { box-shadow: 6px 7px 0 #08314d22, 11px 12px 0 #d63e3912; }
  .record-label { box-shadow: inset 0 0 0 3px var(--brand-navy-deep), inset 0 0 0 4px #f2bc4040; }
  .album-card .album { box-shadow: 4px 4px 0 #08314d18, 8px 8px 0 #d63e390d; }
}

/* Christmas singles have a permanent home beside the two albums. */
.album-choice[data-kind=collection]:after { content: 'CHRISTMAS / SINGLES'; }
.album-info .collection-note { color: var(--brand-muted); }
@media (min-width:1050px) {
  .album-selector { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width:1049px) {
  .album-choice[data-kind=collection] { grid-column: 1 / -1; display: flex; align-items: center; gap: 32px; }
  .album-choice[data-kind=collection] img { margin: 4px 0; }
  .album-choice[data-kind=collection][aria-pressed=true]:before { left: 40px; top: 22px; }
}

/* Behind the Curves: a navy sleeve for the workshop artwork. */
.album-choice[data-album-id="album-two"] {
  gap: 20px;
  background: linear-gradient(135deg, #0b3d5b, var(--brand-navy-deep));
  border-color: #31566c;
  box-shadow: 0 8px 24px #08314d20;
}
.album-choice[data-album-id="album-two"]:before {
  width: 210px; height: 210px;
  left: auto; top: auto; right: -90px; bottom: -110px;
  z-index: 0;
  border: 1px solid #f0eae32e;
  background: none;
  box-shadow: 0 0 0 14px #f0eae309, 0 0 0 28px #f0eae307;
}
.album-choice[data-album-id="album-two"]:after {
  content: 'ALBUM 02';
  color: #f0eae3b3;
}
.album-choice[data-album-id="album-two"] img {
  width: 92px; height: 92px;
  transform: none;
  border: 1px solid #f0eae34d;
  box-shadow: 4px 4px 0 #f0eae317, 0 5px 18px #0003;
}
.album-choice[data-album-id="album-two"] strong { color: var(--brand-ivory); font-size: 18px; }
.album-choice[data-album-id="album-two"] small { color: #d8e3e8; }
.album-choice[data-album-id="album-two"][aria-pressed=true] {
  border-color: var(--brand-red);
  box-shadow: inset 4px 0 0 var(--brand-red), 0 8px 28px #08314d24;
}
.album-choice[data-album-id="album-two"]:focus-visible { outline-color: var(--brand-navy); }
body[data-album-theme="album-two"] .album-card .album {
  border: 1px solid #08314d4d;
  box-shadow: 5px 5px 0 #08314d26, 10px 10px 0 #d63e391c, 0 16px 32px #08314d1f;
}
@media (max-width:760px) {
  .album-choice[data-album-id="album-two"] img { width: 76px; height: 76px; }
  .album-choice[data-album-id="album-two"] strong { font-size: 14px; }
}
@media (hover:hover) {
  .album-choice[data-album-id="album-two"]:hover { border-color: var(--brand-red); box-shadow: 0 10px 26px #08314d33; }
}