.upcoming-page { background: #09090b; }
.upcoming-page .site-header { background: rgba(9,9,11,.92); }
.upcoming-hero { position: relative; min-height: 82vh; display: grid; align-items: end; padding: 160px clamp(24px,8vw,130px) 90px; isolation: isolate; overflow: hidden; }
.upcoming-hero-art { position: absolute; z-index: -2; inset: 0 0 0 42%; background: url("assets/ricin-fall-crown.jpg") center/cover no-repeat; filter: brightness(.5) saturate(1.1); }
.upcoming-hero::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg,#09090b 8%,rgba(9,9,11,.96) 35%,rgba(9,9,11,.25) 82%),linear-gradient(0deg,#09090b,transparent 40%); }
.upcoming-intro { max-width: 830px; }
.upcoming-intro h1 { font-size: clamp(4.5rem,11vw,10rem); }
.upcoming-intro > p:last-child { max-width: 610px; color: #c6c2bd; font-size: 1.05rem; }
.back-link { display: inline-block; margin-bottom: 55px; color: #a9a5a0; font-family: "Barlow Condensed",sans-serif; font-weight: 700; letter-spacing: .12em; text-decoration: none; text-transform: uppercase; }
.back-link:hover { color: var(--red-bright); }
.release-preview { background: #0d0d10; }
.sample-card { display: grid; grid-template-columns: minmax(260px,460px) minmax(300px,650px); gap: clamp(42px,8vw,110px); align-items: center; justify-content: center; }
.sample-card > img { box-shadow: 26px 26px 0 rgba(176,22,32,.2); }
.sample-info h3 { margin: 10px 0 24px; font-size: clamp(3.4rem,6vw,6rem); }
.sample-info > p:not(.release-label,.sample-note) { color: #bbb7b3; }
.audio-player { display: grid; grid-template-columns: 62px 1fr 48px; gap: 18px; align-items: center; margin-top: 34px; padding: 20px; border: 1px solid rgba(255,255,255,.16); background: rgba(0,0,0,.34); }
.play-button { width: 60px; height: 60px; border: 0; color: white; background: var(--red); cursor: pointer; font-size: 1.15rem; transition: .2s; }
.play-button:hover:not(:disabled) { background: var(--red-bright); transform: scale(1.04); }
.play-button:disabled { cursor: not-allowed; opacity: .45; }
.player-meta { display: flex; justify-content: space-between; gap: 15px; margin-bottom: 8px; font-family: "Barlow Condensed",sans-serif; letter-spacing: .05em; text-transform: uppercase; }
.player-status { color: var(--muted); font-size: .75rem; }
.seek { width: 100%; height: 4px; accent-color: var(--red-bright); cursor: pointer; }
.seek:disabled { cursor: not-allowed; opacity: .45; }
.time { display: flex; justify-content: space-between; color: #77747a; font-size: .7rem; }
.mute-button { padding: 9px 4px; border: 0; color: #c8c4c0; background: transparent; font-family: "Barlow Condensed",sans-serif; font-weight: 800; cursor: pointer; }
.mute-button:disabled { opacity: .35; cursor: not-allowed; }
.sample-note { color: #706d72; font-size: .77rem; }
.next-drop { margin-top: clamp(100px,14vw,190px); padding: clamp(60px,8vw,100px); border-left: 4px solid var(--red); background: linear-gradient(110deg,rgba(176,22,32,.14),transparent 65%); }
.next-drop h2 { margin: 0 0 28px; font-size: clamp(3.2rem,7vw,7rem); }
.next-drop > p:last-child { color: var(--muted); }

@media (max-width: 780px) {
  .release-nav { position: static; display: flex; opacity: 1; visibility: visible; background: transparent; }
  .release-nav a { font-size: .8rem; }
  .upcoming-hero { min-height: 760px; padding-inline: 22px; }
  .upcoming-hero-art { inset: 0; opacity: .7; }
  .upcoming-hero::after { background: linear-gradient(0deg,#09090b 8%,rgba(9,9,11,.62),rgba(9,9,11,.15)); }
  .sample-card { grid-template-columns: 1fr; }
  .audio-player { grid-template-columns: 52px 1fr; padding: 15px; }
  .play-button { width: 50px; height: 50px; }
  .mute-button { grid-column: 2; justify-self: end; }
}