:root{--paper:#eeeae3;--ink:#000;--story-progress:0;--photo-opacity:0;--intro-opacity:1;--single-opacity:0;--cue-opacity:1}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--ink)}
body{margin:0;background:var(--ink);color:var(--paper);font-family:Athelas,Georgia,'Times New Roman',serif;overflow-x:hidden}
img{display:block;max-width:100%}
.story-scene{position:relative;height:300svh;background:#000}
.story{position:sticky;top:0;height:100svh;display:grid;place-items:center;padding:2rem 1.25rem;overflow:hidden;background:#000;text-align:center;isolation:isolate}
.story-photo,.story-photo img,.story-shade{position:absolute;inset:0;width:100%;height:100%}
.story-photo{z-index:-3;opacity:var(--photo-opacity);transform:scale(calc(1.04 - var(--photo-opacity) * .04));will-change:opacity,transform}
.story-photo img{object-fit:cover;object-position:center calc(18% + var(--story-progress) * 82%);filter:grayscale(1) contrast(1.08) brightness(.78);will-change:object-position}
.story-shade{z-index:-2;opacity:var(--single-opacity);background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.2) 20%,rgba(0,0,0,.72) 60%,#000 100%);pointer-events:none}
.intro-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;opacity:var(--intro-opacity);transform:scale(calc(.96 + var(--intro-opacity) * .04));will-change:opacity,transform}
.logo{width:min(43.4vw,630px);height:auto;filter:drop-shadow(0 12px 35px rgba(255,255,255,.05))}
h1{margin:2.5rem 0 0;padding-left:.55em;font-size:1.35rem;font-weight:400;line-height:1;letter-spacing:.55em;text-transform:uppercase}
.scroll-cue{position:absolute;z-index:3;left:50%;bottom:2.25rem;display:flex;flex-direction:column;align-items:center;gap:.55rem;color:var(--paper);font:400 .68rem/1 Arial,sans-serif;letter-spacing:.28em;text-decoration:none;text-transform:uppercase;opacity:var(--cue-opacity);transform:translateX(-50%);text-shadow:0 2px 12px #000;pointer-events:none}
.scroll-cue svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.4;animation:bounce 1.8s ease-in-out infinite}
@keyframes bounce{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(9px);opacity:1}}
.single-content{position:absolute;z-index:2;inset:0;padding:1.5rem 1.25rem 2.5rem;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:clamp(1.1rem,2.4vh,1.75rem);opacity:var(--single-opacity);transform:translateY(calc((1 - var(--single-opacity)) * 44px));pointer-events:none;will-change:opacity,transform}
.story.single-active .single-content{pointer-events:auto}
.single-copy{display:flex;flex-direction:column;align-items:center;gap:clamp(.8rem,1.7vh,1.25rem);text-shadow:0 4px 24px #000}
.genre{margin:0;font-size:clamp(1.3rem,2.5vw,2.65rem);font-weight:700;font-style:italic}
.genre span{padding:0 .25em;font-style:normal;font-weight:400}
.release{font-size:clamp(.95rem,1.65vw,1.65rem);line-height:1.42;letter-spacing:.1em;text-transform:uppercase}
.release p{margin:0}
.mobile-single{display:flex;flex-direction:column;align-items:center;gap:1.6rem}
.mobile-cover{position:relative;display:block;flex:0 0 auto;width:min(72vw,340px);height:min(72vw,340px);overflow:hidden;box-shadow:0 18px 42px rgba(0,0,0,.42)}
.mobile-cover picture{position:absolute;inset:0;display:block}
.mobile-cover img{display:block;width:100%;height:100%}
.mobile-cover img{object-fit:cover}
.mobile-listen{display:inline-flex;align-items:center;justify-content:center;padding:.9rem 1.35rem;border:1px solid rgba(255,255,255,.55);border-radius:999px;color:#fff;text-transform:uppercase;text-decoration:none;font-size:.78rem;letter-spacing:.16em;background:rgba(0,0,0,.42);backdrop-filter:blur(8px)}
.site-footer{min-height:120px;padding:2rem 1.5rem;display:flex;align-items:center;justify-content:center;gap:2.25rem;background:#000;color:var(--paper);border-top:1px solid rgba(255,255,255,.18)}
.site-footer p{margin:0;font:400 .82rem/1 Arial,sans-serif;letter-spacing:.2em;text-transform:uppercase}
.socials{display:flex;align-items:center;gap:1.1rem}
.socials a{width:34px;height:34px;display:grid;place-items:center;color:var(--paper);border:1px solid rgba(255,255,255,.32);border-radius:50%;transition:color .2s,border-color .2s,transform .2s}
.socials a:hover,.socials a:focus-visible{color:#fff;border-color:#fff;transform:translateY(-2px)}
.socials svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7}
.socials svg path{fill:currentColor;stroke:none}.socials .dot{fill:currentColor;stroke:none}
.socials .linktree-icon{width:19px;height:19px}
@media(max-width:700px){.story-scene{height:280svh}.logo{width:70vw}h1{font-size:2rem;letter-spacing:.32em;padding-left:.32em}.story-photo img{object-position:center calc(8% + var(--story-progress) * 82%)}.single-content{padding:1.25rem;gap:1rem}.genre{font-size:clamp(1.02rem,4.5vw,1.4rem)}.release{font-size:clamp(.76rem,3.2vw,.95rem);line-height:1.5;letter-spacing:.075em}.site-footer{min-height:145px;padding:1.75rem 1.25rem;flex-direction:column;gap:1.25rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.scroll-cue svg{animation:none}.story-photo{transform:none}}