.release-page { background: var(--background); }
.release-hero { position: relative; isolation: isolate; overflow: hidden; padding: 132px 0 72px; background: #101112; }
.release-hero::before,
.release-hero::after { position: absolute; inset: 0; content: ""; pointer-events: none; }
.release-hero::before {
  inset: -8%;
  z-index: -2;
  background: url("/img/Night%20Hope/night-hope-city-mobile.jpg") center 48% / cover no-repeat;
  animation: releases-city-drift 34s ease-in-out infinite alternate;
  will-change: transform;
}
.release-hero::after {
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(16, 17, 18, .76), rgba(16, 17, 18, .48) 44%, #101112 100%),
    radial-gradient(ellipse at 78% 18%, rgba(198, 161, 91, .17), transparent 46%),
    radial-gradient(ellipse at 12% 74%, rgba(198, 161, 91, .07), transparent 50%);
}
.release-hero-content { position: relative; z-index: 1; }
.release-page-heading { margin-bottom: 38px; }
.release-page-heading .eyebrow { color: #c6a15b; }
.release-page-heading h1 { margin: 10px 0 8px; font-size: clamp(2.7rem, 8vw, 4.2rem); line-height: .96; }
.release-page-heading > p:last-child { margin: 0; color: #c6c7c2; font-size: .95rem; }
.featured-release { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .94fr); gap: clamp(30px, 5vw, 72px); align-items: center; }
.featured-copy { min-width: 0; }
.release-kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; color: #d1d0c9; font-size: .67rem; font-weight: 700; letter-spacing: .12em; }
.featured-release h2 { margin: 0; font-size: clamp(2.7rem, 7vw, 5.5rem); line-height: .94; letter-spacing: -.055em; }
.featured-byline { margin: 10px 0 18px; color: #c6a15b; font-size: .8rem; font-weight: 700; letter-spacing: .16em; }
.featured-description { max-width: 390px; margin: 0; color: #d2d3ce; font-size: 1rem; line-height: 1.65; }
.featured-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.featured-actions .button { min-height: 54px; }
.featured-artwork { width: min(100%, 460px); margin: 0; justify-self: end; }
.featured-artwork img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 1px solid #ffffff24; box-shadow: 0 24px 70px #0009, 0 0 36px #c6a15b12; }
.release-archive { position: relative; padding: 64px 0 88px; border-top: 1px solid #ffffff20; background: linear-gradient(180deg, #101112, #151616 54%, #101112); }
.archive-heading { margin-bottom: 28px; }
.archive-heading .eyebrow { color: var(--gold); }
.archive-heading h2 { margin: 10px 0 0; font-size: clamp(2rem, 4vw, 3rem); }
.release-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.release-card { min-width: 0; padding: 22px; border: 1px solid var(--line); border-radius: 2px; background: linear-gradient(135deg, #ffffff04, transparent 58%), #171819; }
.release-card-heading { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: 16px; margin-bottom: 16px; }
.release-card-art { display: block; width: 88px; aspect-ratio: 1; object-fit: cover; border: 1px solid #ffffff28; filter: saturate(.68) brightness(.82); }
.release-coming-soon .release-card-art { filter: grayscale(.82) brightness(.76); }
.release-card h3 { margin: 0; font-size: 1.25rem; line-height: 1.2; letter-spacing: -.025em; font-weight: 600; }
.release-subtitle { margin: 5px 0 0; color: var(--muted); font-size: .72rem; line-height: 1.5; }
.release-description { margin: 0 0 12px; color: var(--muted); font-size: .82rem; line-height: 1.6; }
.release-metadata { margin: 0; color: #c6a15b; font-size: .63rem; font-weight: 700; line-height: 1.7; letter-spacing: .06em; }
.release-metadata span { padding-inline: 5px; color: #797a76; }
.archive-actions { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 14px; }
.archive-actions a,
.archive-audio-link { display: inline-flex; align-items: center; min-height: 44px; color: #e0c38a; font-size: .7rem; font-weight: 700; }
.archive-actions a:hover,
.archive-audio-link:hover { color: #fff; }
.release-card audio { display: block; width: 100%; height: 44px; margin-top: 18px; accent-color: var(--gold); color-scheme: dark; }
.archive-audio-link { gap: 10px; margin-top: 4px; }
.coming-soon { display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; border: 1px solid #c6a15b66; color: #d5bb80; font-size: .62rem; font-weight: 700; letter-spacing: .1em; }
.site-footer { margin-top: 0; }
@keyframes releases-city-drift {
  from { transform: scale(1.04) translate3d(-2%, .5%, 0); }
  to { transform: scale(1.105) translate3d(2%, -1%, 0); }
}
@media (min-width: 601px) {
  .release-hero { padding: 150px 0 80px; }
  .release-hero::before { background-image: url("/img/Night%20Hope/night-hope-city-desktop.jpg"); background-position: center 50%; animation-duration: 24s; }
  .release-archive { padding-block: 72px 100px; }
}
@media (max-width: 600px) {
  .release-hero { padding: 102px 0 58px; }
  .release-hero::before { inset: -4%; background-position: 48% 48%; animation-duration: 46s; }
  .release-hero::after { background: linear-gradient(180deg, rgba(16, 17, 18, .73), rgba(16, 17, 18, .50) 36%, #101112 100%), radial-gradient(ellipse at 80% 15%, rgba(198, 161, 91, .15), transparent 44%); }
  .release-page-heading { margin-bottom: 30px; }
  .release-page-heading h1 { font-size: clamp(2.5rem, 12vw, 3.5rem); }
  .featured-release { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .featured-release h2 { font-size: clamp(2.7rem, 12vw, 4rem); }
  .featured-description { font-size: .95rem; }
  .featured-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .featured-actions .button { width: 100%; }
  .featured-artwork { width: min(78vw, 290px); justify-self: center; }
  .release-archive { padding-block: 48px 64px; }
  .release-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .release-card { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .release-hero::before { animation: none; transform: none; will-change: auto; }
}