.oneway-release-page { background: #050505; }

.release-hero {
	display: grid;
	grid-template-columns: minmax(300px, 47vw) minmax(0, 1fr);
	min-height: calc(100vh - 58px);
	background: #0c0c0c;
}
.release-hero-art { display: grid; place-items: center; padding: clamp(2rem, 6vw, 6rem); background: #f2df00; }
.release-hero-art img { display: block; width: min(100%, 620px); box-shadow: 1.3rem 1.3rem 0 rgba(0,0,0,.22); }
.release-hero-copy { align-self: center; padding: clamp(2rem, 7vw, 7rem); }
.release-artist { margin: 0 0 .5rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.release-artist a { color: #f4f1e8; text-decoration-color: #f2df00; text-underline-offset: .25em; }
.release-hero h1, .player-section h2, .release-story h2, .edition-gallery h2, .back-to-artist h2 {
	margin: 0;
	font-family: Impact, "Arial Black", sans-serif;
	font-size: clamp(3rem, 8vw, 7.5rem);
	font-weight: 900;
	letter-spacing: .02em;
	line-height: .92;
	text-transform: uppercase;
}
.release-hero h1 { color: #f2df00; }
.release-deck { max-width: 680px; margin: 1.4rem 0 2rem; color: #c9c6be; font-size: clamp(1rem, 2vw, 1.2rem); }
.release-facts { display: flex; flex-wrap: wrap; gap: 1rem 2rem; margin: 0; }
.release-facts div { min-width: 110px; }
.release-facts dt { color: #f2df00; font-size: .68rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.release-facts dd { margin: .15rem 0 0; color: #f4f1e8; }

.player-section { padding: 5rem 0; }
.player-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; }
.player-heading > p { max-width: 390px; margin: 0; color: #b7b7b2; text-align: right; }
.player-section h2, .release-story h2, .edition-gallery h2, .back-to-artist h2 { font-size: clamp(2.5rem, 6vw, 5.3rem); }

.master-player { position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: minmax(220px, .7fr) minmax(300px, 1.3fr); gap: 1.5rem; align-items: center; padding: 1.15rem 1.3rem; border: 1px solid rgba(242,223,0,.35); background: rgba(10,10,10,.97); box-shadow: 0 .7rem 2rem rgba(0,0,0,.4); }
.now-playing span { display: block; color: #f2df00; font-size: .65rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.now-playing strong { display: block; font-size: 1.05rem; }
.master-player audio { width: 100%; accent-color: #f2df00; }
.player-message { grid-column: 1 / -1; min-height: 1.2em; margin: -.6rem 0 0; color: #d0a9a9; font-size: .78rem; }

.release-playlist { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; margin: 1.2rem 0 0; padding: 0; }
.release-playlist button { display: grid; grid-template-columns: 2.2rem minmax(0,1fr) auto; gap: .75rem; align-items: center; width: 100%; min-height: 58px; border: 1px solid rgba(255,255,255,.1); padding: .7rem .85rem; background: #101010; color: #f4f1e8; font: inherit; text-align: left; cursor: pointer; }
.release-playlist button:hover, .release-playlist button:focus-visible, .release-playlist button.is-active { border-color: #f2df00; background: #17170c; }
.release-playlist button > span { color: #f2df00; font-size: .72rem; font-weight: 900; }
.release-playlist button strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.release-playlist button small { color: #8f8f8b; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.release-playlist button.is-active small { color: #f2df00; }

.release-story { padding: 5rem 0; background: #f2df00; color: #050505; }
.release-story .section-kicker { color: #050505; }
.release-story-grid { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(280px,.75fr); gap: clamp(2rem,7vw,6rem); align-items: center; }
.release-story-grid > div > p:not(.section-kicker) { max-width: 760px; font-size: 1.03rem; }
.release-story figure { margin: 0; }
.release-story figure img { display: block; width: 100%; box-shadow: 1rem 1rem 0 rgba(0,0,0,.2); }
.release-story figcaption { margin-top: .75rem; font-size: .78rem; }

.edition-gallery { padding: 5rem 0; }
.edition-grid { display: grid; grid-template-columns: 1.4fr .8fr .8fr; gap: 1rem; align-items: stretch; margin-top: 2rem; }
.edition-grid figure { display: flex; flex-direction: column; margin: 0; padding: 1rem; border: 1px solid rgba(255,255,255,.1); background: #101010; }
.edition-grid img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; }
.edition-grid figcaption { margin-top: .7rem; color: #b7b7b2; font-size: .75rem; }

.back-to-artist { padding: 5rem 0; border-top: 1px solid rgba(242,223,0,.28); background: linear-gradient(90deg,#050505,#17170c); }
.back-to-artist p:not(.section-kicker) { max-width: 650px; color: #b7b7b2; }

@media screen and (max-width: 800px) {
	.release-hero, .release-story-grid { grid-template-columns: 1fr; }
	.release-hero-art { padding: 2rem; }
	.release-hero-art img { width: min(80vw, 520px); }
	.player-heading { align-items: flex-start; flex-direction: column; }
	.player-heading > p { text-align: left; }
	.master-player { position: static; grid-template-columns: 1fr; }
	.player-message { grid-column: auto; }
	.edition-grid { grid-template-columns: 1fr 1fr; }
	.edition-grid figure:first-child { grid-column: 1 / -1; }
}

@media screen and (max-width: 560px) {
	.release-playlist { grid-template-columns: 1fr; }
	.release-playlist button { grid-template-columns: 2rem minmax(0,1fr); }
	.release-playlist button small { display: none; }
	.edition-grid { grid-template-columns: 1fr; }
	.edition-grid figure:first-child { grid-column: auto; }
}