/* Album sleeves create the rhythm of this chapter. */
.releases-section{position:relative;padding:clamp(76px,9vw,140px) 7vw;background:var(--color-bg);color:var(--color-text);scroll-margin-top:32px}
.releases-inner{width:min(100%,1120px);margin-inline:auto}
.release-section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin:0 auto 38px;max-width:1120px}
.release-section-heading .eyebrow{margin:0 0 16px;color:var(--color-text-warm);font:var(--weight-medium) var(--size-micro)/var(--leading-label) var(--font-label);letter-spacing:var(--tracking-label)}
.release-section-heading h2{margin:0;color:var(--color-text);font:var(--weight-strong) clamp(38px,5.5vw,76px)/1.04 var(--font-heading);letter-spacing:var(--tracking-title)}
.release-section-heading p:not(.eyebrow){margin:16px 0 0;color:var(--color-text-muted);font:var(--weight-regular) var(--size-body)/var(--leading-body) var(--font-body);letter-spacing:var(--tracking-body)}
.release-section-heading>a{display:inline-flex;align-items:center;min-height:44px;padding:8px 0;font:var(--weight-medium) var(--size-control)/var(--leading-label) var(--font-label);color:var(--color-text-warm);white-space:nowrap;text-decoration:underline;text-underline-offset:6px}
.release-grid{--release-row-gap:42px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--release-row-gap) 24px;max-width:1120px;margin-inline:auto}
.release-card{min-width:0;display:flex;flex-direction:column;align-items:stretch;position:relative}
.release-feature{display:block;color:var(--color-text);text-decoration:none;min-width:0}
.release-artwork{aspect-ratio:1;position:relative;overflow:hidden;background:var(--color-surface);border:1px solid var(--color-border)}
.release-artwork img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.release-artwork.without-image{display:grid;place-items:center;padding:20px;background:var(--color-surface)}
.release-artwork-fallback{color:var(--color-text-muted);font:var(--weight-medium) clamp(13px,1.3vw,18px)/1.5 var(--font-heading);text-align:center;overflow-wrap:anywhere}
.release-title{margin:17px 0 7px;color:var(--color-text);font:var(--weight-strong) clamp(16px,1.55vw,21px)/1.35 var(--font-heading);letter-spacing:var(--tracking-body);overflow-wrap:anywhere;text-wrap:pretty}
.release-metadata{margin:0;color:var(--color-text-muted);font:var(--weight-regular) 11px/1.6 var(--font-label);letter-spacing:var(--tracking-body);overflow-wrap:anywhere}
.release-metadata:empty{display:none}
.release-date{display:flex;flex-wrap:wrap;gap:4px 10px;margin:7px 0 13px;color:var(--color-text-muted);font:var(--weight-regular) 10px/1.6 var(--font-label);letter-spacing:var(--tracking-body)}
.release-announced{color:var(--color-text-warm)}
.release-chart{display:flex;flex-direction:column;justify-content:flex-end;gap:3px;min-height:44px;margin:auto 0 0;padding:10px 0 0;border-top:1px solid var(--color-border);text-decoration:none;overflow-wrap:anywhere}
.release-chart-context{font:var(--weight-regular) 10px/1.65 var(--font-body);color:var(--color-text-muted);letter-spacing:var(--tracking-body)}
.release-chart-result{font:var(--weight-medium) 11px/1.6 var(--font-body);color:var(--color-text-warm);letter-spacing:var(--tracking-body)}
.release-play{display:inline-flex;align-items:center;justify-content:flex-start;align-self:flex-start;min-height:44px;padding:10px 0 8px;margin:auto 0 0;color:var(--color-text-warm);font:var(--weight-medium) var(--size-control)/var(--leading-label) var(--font-label);text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--color-border-warm);transition:color .2s ease,text-decoration-color .2s ease}
.release-chart+.release-play{margin-top:8px}
.release-feature:focus-visible,.release-play:focus-visible,.release-chart:focus-visible,.release-section-heading>a:focus-visible{outline:2px solid var(--color-warm);outline-offset:5px}
@media(hover:hover){a.release-feature:hover .release-artwork img{transform:scale(1.025)}a.release-feature:hover .release-title,.release-play:hover,.release-chart:hover .release-chart-result,.release-section-heading>a:hover{color:var(--color-warm)}.release-play:hover{text-decoration-color:var(--color-warm)}}
@media(max-width:900px){.release-grid{--release-row-gap:34px;column-gap:18px}.release-title{font-size:17px}}
@media(max-width:760px){.releases-section{padding:76px 7vw 88px}.release-section-heading{margin-bottom:28px;gap:14px;flex-wrap:wrap}.release-section-heading h2{font-size:clamp(38px,9vw,56px)}.release-grid{--release-row-gap:32px;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px}.release-title{margin-top:13px;font-size:16px}.release-metadata{font-size:10px}.release-chart-context{font-size:10px}.release-play{font-size:11px}}
@media(max-width:380px){.release-grid{--release-row-gap:30px;column-gap:14px}.release-title{font-size:15px}.release-section-heading p:not(.eyebrow){font-size:14px}}
/* Share the five content rows, so wrapped titles never displace chart ranks.
   Explicit positions also keep optional dates, chart data and controls aligned.
   The flex layout above remains the fallback for browsers without subgrid. */
@supports(grid-template-rows:subgrid){
 .release-grid{row-gap:0}
 .release-card{display:grid;grid-row:span 5;grid-template-columns:minmax(0,1fr);grid-template-rows:subgrid;row-gap:0;padding-block-end:var(--release-row-gap)}
 .release-card>.release-feature{grid-row:1;align-self:start}
 .release-card>.release-metadata{grid-row:2;align-self:start}
 .release-card>.release-date{grid-row:3;align-self:start;margin-bottom:0}
 .release-card>.release-chart{grid-row:4;align-self:stretch;margin-top:13px}
 .release-card>.release-play{grid-row:5;align-self:end;justify-self:start;margin-top:8px}
}
@media(prefers-reduced-motion:reduce){.release-artwork img,.release-play{transition:none}a.release-feature:hover .release-artwork img{transform:none}}
body.motion-reduced .release-artwork img,body.motion-reduced .release-play{transition:none}
body.motion-reduced a.release-feature:hover .release-artwork img{transform:none}
