@font-face{font-family:'Jonathan Display';src:url('/assets/jonathan-display-v1.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}
:root{color-scheme:dark;--ink:#0a0a0a;--paper:#f4f3ee;--muted:#a5a5a2;--gutter:clamp(24px,4vw,80px)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:32px}
body{margin:0;background:var(--ink);color:var(--paper);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
::selection{background:var(--paper);color:var(--ink)}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--paper);outline-offset:8px}
.skip{position:fixed;left:24px;top:-120px;padding:18px 24px;background:var(--paper);color:var(--ink);z-index:10;font-size:1rem}
.skip:focus{top:24px}
.hero{height:100svh;min-height:360px;position:relative;display:grid;place-items:center;isolation:isolate}
.hero-visual{position:relative;width:min(100%,75svh);height:100%;container-type:inline-size}
.masthead{position:absolute;inset:6.8% 3.5% auto;z-index:2;text-align:center}
h1{font-family:'Jonathan Display',Impact,'Arial Narrow',sans-serif;font-weight:900;font-synthesis:none;font-size:min(26.3cqw,18svh);letter-spacing:0;line-height:1;margin:0;white-space:nowrap;color:#fff}
.portrait{position:absolute;inset:0;margin:0;overflow:hidden}
.portrait img{width:100%;height:100%;display:block;object-fit:contain;object-position:center top}
.portrait:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 58%,rgba(10,10,10,.06) 70%,rgba(10,10,10,.35) 83%,rgba(10,10,10,.8) 94%,var(--ink) 100%),linear-gradient(90deg,var(--ink),transparent 4%,transparent 96%,var(--ink))}
.chapter-link{position:absolute;z-index:2;bottom:clamp(20px,3svh,40px);left:6%;right:6%;display:flex;align-items:center;justify-content:space-between;gap:40px;padding:14px 0;font-size:.875rem;text-transform:uppercase;letter-spacing:.16em}
.arrow{font-size:1.65rem;line-height:1;transition:transform .25s ease}
.chapter-link:hover .arrow{transform:translateY(5px)}
.music{padding:clamp(80px,10vw,160px) var(--gutter) clamp(96px,12vw,180px);border-top:1px solid #292929;display:grid;grid-template-columns:1fr 2fr;gap:40px;scroll-margin-top:24px}
.section-label{display:flex;align-items:baseline;gap:20px}
.small-line{display:inline-block;width:32px;height:1px;background:var(--muted);transform:translateY(-4px)}
h2{margin:0;font-size:.875rem;font-weight:400;letter-spacing:.16em;text-transform:uppercase;line-height:1.8}
.release-message{margin:0;max-width:800px;min-width:0;overflow-wrap:anywhere;font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(2.5rem,5vw,5.25rem);line-height:1.14;letter-spacing:-.035em;text-wrap:balance}
footer{border-top:1px solid #292929;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px;padding:32px var(--gutter);font-size:.875rem;color:var(--muted)}
footer a{padding:12px 0}footer a span{margin-left:20px}footer a:hover{color:var(--paper)}
@media(max-width:640px) and (orientation:portrait){
 .hero-visual{width:100%}
 .portrait img{object-fit:cover;object-position:62% center}
 .masthead{top:max(6.8svh,env(safe-area-inset-top));left:3%;right:3%}
 .portrait:after{background:linear-gradient(180deg,transparent 60%,rgba(10,10,10,.06) 72%,rgba(10,10,10,.35) 84%,rgba(10,10,10,.8) 95%,var(--ink) 100%)}
 .chapter-link{bottom:max(20px,env(safe-area-inset-bottom))}
}
@media(max-width:760px){
 .music{grid-template-columns:1fr;gap:40px;padding-top:72px;padding-bottom:100px}
 .release-message{font-size:clamp(2.75rem,8vw,4.5rem)}
 footer{padding-top:24px;padding-bottom:calc(24px + env(safe-area-inset-bottom));font-size:.8125rem}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}