.album-credit {
  color: var(--ink);
  font-weight: 700;
}

.album-art {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(11rem, 1fr);
  align-items: start;
  gap: .9rem;
  margin-block: 1.25rem;
}

.album-art .avatar img {
  max-height: 33rem;
  width: auto;
}

.track audio {
  width: min(100%, 39rem);
}

.play-button {
  appearance: none;
  color: var(--yellow);
  background: var(--panel);
  border: 1px solid var(--yellow);
  font: inherit;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  padding: .45rem .75rem;
}

.play-button:hover {
  color: #171510;
  background: var(--yellow);
}

.edition-city {
  --yellow: #abd6f5;
  --red: #5f9ac1;
  --ink: #f1f6f8;
  --muted: #c4d1d8;
  --dark: #10191f;
  --panel: #1b2831;
  --line: #384a56;
}

.edition-city .hero {
  background: radial-gradient(ellipse at 82% 30%, #234052 0%, transparent 65%), #17242d;
}

.edition-city .site-header,
.edition-city .site-footer {
  background: #12222b;
}

.edition-city .band,
.edition-city .status {
  background: #192832;
}

.edition-greater {
  --yellow: #d9e791;
  --red: #80b594;
  --ink: #f3f6ed;
  --muted: #c4d1c3;
  --dark: #101b18;
  --panel: #1a2a23;
  --line: #3d5147;
}

.edition-greater .hero {
  background: radial-gradient(ellipse at 82% 30%, #28463c 0%, transparent 65%), #162721;
}

.edition-greater .site-header,
.edition-greater .site-footer {
  background: #14231d;
}

.edition-greater .band,
.edition-greater .status {
  background: #192923;
}

@media (max-width: 39rem) {
  .album-art {
    grid-template-columns: 1fr;
  }

  .album-art .avatar {
    max-width: 20rem;
  }
}