/* Listen — single landing page. Builds on holding.css tokens. */

.listen {
  padding: clamp(1.5rem, 6vw, 4rem) var(--gutter) clamp(3rem, 8vw, 5rem);
}
.listen-inner {
  max-width: 28rem;
  margin: 0 auto;
}

.release { margin: 0; }
.cover { margin: 0; }
.cover img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .7);
}

.release-meta {
  text-align: center;
  padding: 1.5rem 0 1.25rem;
}
.kicker {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--bone-2);
  margin-bottom: .35rem;
}
.release h1 {
  font-size: clamp(2.1rem, 9vw, 2.9rem);
  line-height: 1;
  margin-bottom: .45rem;
}
.artist {
  font-size: 1.15rem;
  color: var(--bone);
}

/* Platform list — full-width rows give big thumb targets on phones. */

.platforms-heading {
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bone-2);
  margin: 0 0 .5rem;
}
.platforms {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--brass-2);
}
.platforms li { border-bottom: 1px solid var(--moss); }
.platforms li:last-child { border-bottom-color: var(--brass-2); }

.platform {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4.25rem;
  padding: .7rem .25rem;
  color: var(--bone);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.platform:hover, .platform:active { background: var(--pine-2); color: var(--bone); }

.platform-icon { flex: none; width: 2.75rem; height: 2.75rem; }
.platform-name {
  flex: 1;
  font-family: var(--sans);
  font-size: 1.1rem;
  font-weight: 500;
}
.platform-cta {
  flex: none;
  font-family: var(--sans);
  font-size: .9rem;
  font-weight: 500;
  padding: .5em 1.05em .6em;
  border: 1px solid var(--brass-2);
  border-radius: 3px;
  color: var(--brass);
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.platform:hover .platform-cta { background: var(--brass); color: var(--ink); }

/* Ticket call to action */

.cta { margin-top: 1.75rem; }
.cta .btn {
  display: flex;
  width: 100%;
  min-height: 3.25rem;
  font-size: 1rem;
  padding: .7em 1.25em .8em;
  text-align: center;
  line-height: 1.25;
}