:root {
  --ink: #071014;
  --ink2: #0b171d;
  --surface: #0d1b21;
  --surface-raised: #11242b;
  --paper: #f3ecdf;
  --gold: #d8b36a;
  --teal: #52e5e0;
  --muted: #a8b4b6;
  --line: rgba(216, 179, 106, .18);
  --soft-line: rgba(255, 255, 255, .10);
}

body {
  background:
    radial-gradient(circle at 86% 10%, rgba(82, 229, 224, .055), transparent 30rem),
    radial-gradient(circle at 12% 44%, rgba(216, 179, 106, .045), transparent 34rem),
    var(--ink);
}

main {
  background: linear-gradient(180deg, rgba(11, 23, 29, .2), rgba(7, 16, 20, .45));
}

.nav-wrap {
  background: linear-gradient(180deg, rgba(7, 16, 20, .88), rgba(7, 16, 20, .36));
  backdrop-filter: blur(10px);
}

.hero-bg {
  background:
    radial-gradient(circle at 78% 45%, rgba(82, 229, 224, .13), transparent 29%),
    radial-gradient(circle at 16% 14%, rgba(216, 179, 106, .09), transparent 31%),
    linear-gradient(112deg, var(--ink) 44%, var(--ink2) 100%);
}

.ticker {
  background: rgba(7, 16, 20, .78);
}

.section {
  position: relative;
  background: transparent;
  border-top: 1px solid var(--soft-line);
}

.section::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .012), transparent 14rem);
}

.section > * {
  position: relative;
  z-index: 1;
}

.price-release,
.truth-remains,
.latest,
.catalog,
.video-section,
.story,
.platforms,
.connect {
  background-color: transparent;
}

.price-release {
  background-image:
    radial-gradient(circle at 20% 18%, rgba(216, 179, 106, .075), transparent 28rem),
    radial-gradient(circle at 82% 34%, rgba(82, 229, 224, .045), transparent 26rem);
}

.truth-remains {
  background-image: radial-gradient(circle at 88% 48%, rgba(82, 229, 224, .065), transparent 30rem);
}

.truth-remains::before {
  opacity: .35;
}

.catalog {
  color: #f8f3e9;
  background-image: radial-gradient(circle at 10% 10%, rgba(216, 179, 106, .055), transparent 28rem);
}

.catalog .eyebrow,
.price-release .eyebrow {
  color: var(--gold);
}

.catalog .section-head > p,
.section-head > p,
.feature-copy > p:not(.tag),
.truth-remains-copy > p:not(.eyebrow),
.story-copy > p:not(.eyebrow) {
  color: var(--muted);
}

.album {
  padding: 14px 14px 18px;
  border: 1px solid var(--soft-line);
  background: rgba(13, 27, 33, .52);
  transition: transform .35s ease, border-color .35s ease, background .35s ease;
}

.album:hover {
  transform: translateY(-6px);
  border-color: rgba(216, 179, 106, .42);
  background: rgba(17, 36, 43, .7);
}

.album:hover img {
  transform: none;
}

.album span,
.album b {
  color: #f8f3e9;
}

.album small {
  color: #8fa0a4;
}

.video-card,
.story-art,
.truth-remains-art,
.feature-cover img,
.price-art img {
  border: 1px solid var(--soft-line);
  box-shadow: 0 28px 70px rgba(0, 0, 0, .38);
}

.story {
  background-image: radial-gradient(circle at 16% 48%, rgba(216, 179, 106, .055), transparent 25rem);
}

.story-art span {
  background: var(--gold);
}

.credentials {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.price-art::before {
  border-color: rgba(216, 179, 106, .4);
}

.price-copy h2 em,
.truth-remains h2 em {
  color: var(--teal);
}

.release-credit {
  color: #aeb9bc;
}

.full-player {
  border-color: var(--soft-line);
  background: rgba(13, 27, 33, .72);
  box-shadow: 0 22px 55px rgba(0, 0, 0, .28);
}

.full-player > p {
  color: var(--gold);
}

.full-player audio {
  accent-color: var(--teal);
}

.full-player small {
  color: #8fa0a4;
}

.lyrics {
  border-top-color: var(--line);
}

.lyrics-columns {
  column-rule-color: var(--soft-line);
}

.lyrics-columns p {
  color: #d7dddd;
}

.lyrics-columns .chorus {
  color: #b9f4f1;
  border-left-color: var(--teal);
}

.lyrics-jump {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--ink);
}

.lyrics-jump:hover {
  border-color: var(--teal);
  background: var(--teal);
}

.platform-grid {
  border-color: var(--line);
}

.platform-grid a {
  border-color: var(--soft-line);
  background: rgba(13, 27, 33, .34);
}

.platform-grid a:hover {
  background: var(--teal);
}

.connect {
  color: #f8f3e9;
  align-items: center;
  background-image:
    radial-gradient(circle at 78% 50%, rgba(82, 229, 224, .09), transparent 26rem),
    linear-gradient(90deg, rgba(216, 179, 106, .045), transparent 48%);
}

.connect .eyebrow {
  color: var(--gold);
}

.connect .button.primary {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
}

.connect .button.primary:hover {
  background: var(--teal);
  border-color: var(--teal);
}

footer {
  background: #050c0f;
  border-top-color: var(--line);
}

dialog {
  background: var(--surface);
  border-color: rgba(216, 179, 106, .46);
}

@media (max-width: 620px) {
  .nav-wrap nav {
    background: rgba(7, 16, 20, .98);
    border-bottom: 1px solid var(--line);
  }

  .album {
    padding: 12px 12px 17px;
  }

  .lyrics-jump {
    box-shadow: 0 12px 35px rgba(0, 0, 0, .48);
  }
}

/* In-site listening experience */
.video-card {
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

#release-modal {
  width: min(1080px, 94vw);
  max-height: 92vh;
  overflow: auto;
}

#release-modal .modal-body {
  grid-template-columns: minmax(280px, .72fr) minmax(420px, 1.28fr);
}

#release-modal .modal-content {
  padding: 44px 42px;
  align-self: center;
}

.player-label {
  margin: 25px 0 10px !important;
  color: var(--gold) !important;
  font: 600 .66rem Inter, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
}

#modal-player {
  display: block;
  width: 100%;
  height: 175px;
  border: 0;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
}

.player-note {
  margin: 10px 0 0 !important;
  color: #7f8d90 !important;
  font-size: .72rem;
  line-height: 1.55 !important;
}

@media (max-width: 760px) {
  #release-modal .modal-body {
    grid-template-columns: 1fr;
  }

  #release-modal .modal-body > img {
    max-height: 30vh;
  }

  #release-modal .modal-content {
    padding: 30px 22px 26px;
  }

  #modal-player {
    height: 185px;
  }
}

@media (max-width: 900px) {
  .credentials {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}