:root{--ink:#000;--yellow:#fff27a;--sky:#66c4ff;--pink:#d81f8a;--gutter:clamp(16px,3vw,32px);--sans:"Schibsted Grotesk","Helvetica Neue",Arial,sans-serif}
*{box-sizing:border-box}
@view-transition{navigation:auto}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--ink);font:400 1.125rem/1.45 var(--sans);overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit}a:hover{color:var(--pink)}
:focus-visible{outline:3px solid var(--pink);outline-offset:2px}
h1,h2,h3,p{margin:0}
.skip{position:absolute;left:-999px;top:8px;background:#000;color:#fff;padding:8px 14px;z-index:9}.skip:focus{left:8px}
.masthead{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;padding:24px var(--gutter) 0}
.masthead a{text-decoration:none}.mark{font-weight:500}.masthead nav{display:flex;gap:20px}
.masthead a[aria-current]{text-decoration:underline}
.statement{font-size:clamp(1.9rem,4.6vw,3.75rem);line-height:1.08;letter-spacing:-.02em;font-weight:400;max-width:21em;padding:clamp(40px,7vw,72px) var(--gutter)}
.side{padding:12px var(--gutter) 30px}
.side h2{font:500 1.125rem/1.4 var(--sans);margin-bottom:14px}
.shelf{list-style:none;margin:0;padding:0 0 12px;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:#000 transparent}
.shelf>li{flex:0 0 clamp(250px,26vw,340px);scroll-snap-align:start}
.mat{background:var(--mat);padding:clamp(22px,2.6vw,36px) clamp(22px,2.4vw,32px)}
figure{margin:0}.cover figure,.cover figcaption{display:contents}
.cover{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;text-decoration:none;container-type:inline-size;background:#1b1712}
.cover.flat{background:var(--flat)}
a.cover:hover{color:inherit}
.cover[hidden]{display:none}
.crop{position:absolute;inset:0;overflow:hidden}
.crop img{position:absolute;max-width:none}
.crop.fill img{inset:0;width:100%;height:100%;object-fit:cover}
.words{position:absolute;left:0;right:0;padding:5cqw 6cqw;box-sizing:border-box;overflow:hidden}
.words.top{top:0;padding-bottom:13cqw}.words.bottom{bottom:0;padding-top:13cqw;padding-bottom:3cqw}
.words.bottom .ctag{margin-top:2cqw}
.ctitle{display:block;line-height:1;overflow-wrap:break-word;hyphens:manual}
.ctag{display:block;font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-size:9cqw;line-height:1.1}
.tag-bottom{position:absolute;left:5cqw;right:5cqw;bottom:3cqw}
.tag-strip{position:absolute;left:5cqw;right:5cqw;bottom:3cqw}
.ln{display:block;line-height:1;white-space:nowrap;font-size:20cqw}
.ln i{display:inline-block}
.a-center{text-align:center}.a-left{text-align:left}
.a-spread .ln{display:flex;justify-content:space-between;font-size:17cqw;line-height:1.05}
.long .ln{white-space:normal;font-size:10.5cqw;line-height:1.1;text-wrap:balance}
h3.ctitle{margin:0;font-weight:inherit}
.drawn{position:absolute;inset:0;margin:0;pointer-events:none}.drawn svg{display:block;width:100%;height:100%}
.ctag{margin:0}
.f-grotesk{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-weight:700;letter-spacing:-.01em}
.f-didone{font-family:"Bodoni Moda",Didot,Georgia,serif;font-weight:500}
.f-geo{font-family:Jost,Futura,Arial,sans-serif;font-weight:700}
.f-compressed{font-family:Anton,Impact,sans-serif}
.f-gothic{font-family:"Pirata One",Georgia,serif}
.f-inscribed{font-family:Marcellus,Georgia,serif;letter-spacing:.14em}
.f-soft{font-family:Fraunces,Georgia,serif;font-weight:500;letter-spacing:.1em}
.loupe{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:0;z-index:4;background:#1b1712;clip-path:circle(var(--r,96px) at var(--x,50%) var(--y,50%))}
.loupe .crop{transform:scale(var(--z,5));transform-origin:var(--x,50%) var(--y,50%)}
.magnify:hover .loupe{opacity:1}
.loupe::after{content:"";position:absolute;inset:0;background:radial-gradient(circle var(--r,96px) at var(--x,50%) var(--y,50%),transparent 97%,#fff 98%)}
.words,.tag-strip,.tag-bottom{z-index:2}
.hang{text-decoration:none;display:block}
.hang figure{display:block}.still{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;background:#1b1712}
.still img{width:100%;height:100%;object-fit:cover;transform:scale(1.5);transition:transform .5s}
.hang:hover .still img{transform:scale(1)}
.still.sleeve{aspect-ratio:1}.still.jacket{aspect-ratio:2/3}.sleeve img,.jacket img,.hang:hover .sleeve img,.hang:hover .jacket img{transform:none}
.cap{display:block;font-size:.9375rem;line-height:1.3;margin-top:8px}
.credit{font-size:.8125rem;padding:16px var(--gutter) 20px}
.credit a{margin-right:14px}
/* the record */
.record{display:flex;flex-wrap:wrap;gap:32px;padding:clamp(28px,5vw,56px) var(--gutter) 40px}
.tracks{flex:1 1 400px;min-width:0}
.flip{display:flex;gap:24px;font-size:1.375rem;margin-bottom:16px}
.flip a{text-decoration:none}.flip a[aria-current]{font-weight:500;text-decoration:underline}
.track{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-size:1.625rem;line-height:1.2;padding:11px 0;border-top:1px solid #000;text-decoration:none}
.track small{font-size:.9375rem;white-space:nowrap}.track[aria-current]{color:var(--pink)}
.stage{flex:0 1 380px;min-width:0;width:100%}
.detail{padding:0 var(--gutter) 56px;display:grid;grid-template-columns:3fr 2fr;gap:clamp(28px,5vw,64px);align-items:start}
.detail h1{font-size:clamp(2rem,4.6vw,3.75rem);line-height:1.06;letter-spacing:-.02em;font-weight:400;grid-column:1/-1}
.prose{max-width:40rem;line-height:1.55}.prose p{margin:0 0 1em}.prose h2,.prose h3{font-weight:500;margin:1.4em 0 .4em;line-height:1.15}.prose h3{font-size:1.5rem}
.prose img,.prose figure{max-width:100%;height:auto;margin:1em 0}
.prose blockquote{margin:1.2em 0;padding-left:18px;border-left:3px solid #000}
.meta{font-size:1rem}.meta dt{font-weight:500}.meta dd{margin:0 0 12px}
.shot{grid-column:1/-1;background:#000}.shot img,.shot video{width:100%}
.gallery{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:20px}.gallery figure{margin:0}.gallery figure.tall{max-width:320px}.gallery video,.gallery img{width:100%;display:block;background:#000}.gallery figcaption{font-size:.9375rem;margin-top:6px}
.closer{background:#111;color:#fff;padding:20px var(--gutter)}
.closer a{color:#fff}.closer p{margin-bottom:12px}
.viewer{height:min(78vh,720px);background:#111}
.page{padding:clamp(32px,6vw,64px) var(--gutter) 64px}
.page h1{font-size:clamp(2.4rem,6vw,4.75rem);line-height:1.04;letter-spacing:-.02em;font-weight:400;margin-bottom:.5em}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:32px;margin-top:40px}
.cols h2{font-size:1.125rem;font-weight:500;margin-bottom:8px}.cols ul{list-style:none;margin:0;padding:0}.cols li{border-top:1px solid #000;padding:8px 0;line-height:1.3}
.btn{display:inline-block;margin-top:18px;background:#000;color:#fff;padding:12px 22px;text-decoration:none}.btn:hover{color:var(--yellow)}
.play{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}.play iframe{width:100%;height:352px;border:0}
@media(max-width:760px){.detail{grid-template-columns:1fr}.stage{flex-basis:100%}.track{font-size:1.375rem}.shelf>a{flex-basis:74vw}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}@view-transition{navigation:none}}

.lookbox{border:0;padding:0;background:#fff;max-width:min(92vw,1100px)}.lookbox::backdrop{background:#fff}.lookbox img{display:block;max-width:100%;max-height:82vh;margin:auto}.lookbox p{margin:10px 0 0;font-size:.9375rem}

.trends-card{background:#16246e;color:#f6d44f;display:flex;align-items:center;justify-content:center;font:700 clamp(36px,5vw,60px)/1 Archivo,Arial,sans-serif}
.play iframe{scroll-margin-top:24px}

.scroll{overflow-x:auto}.scroll svg{min-width:720px}.plate figure{margin:0}
.legend{list-style:none;display:flex;flex-wrap:wrap;gap:6px 18px;padding:0;margin:12px 0 0}.legend i{display:inline-block;width:12px;height:12px;margin-right:6px}
.drop{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:20px!important;max-width:none!important}.drop label,.wrapped button{font:inherit;font-size:1rem;border:1px solid #000;background:#fff;color:#000;padding:10px 16px;cursor:pointer}.drop input{font-size:.875rem;max-width:100%}.wrapped button:focus-visible,.drop input:focus-visible{outline:2px solid #16246e;outline-offset:2px}

.sound{font:inherit;font-size:.875rem;border:1px solid #000;background:#fff;padding:2px 10px;margin-left:8px;cursor:pointer}.sound[aria-pressed=true]{background:#000;color:#fff}
.still.sleeve{overflow:visible;background:none}.sleeve img{position:relative;z-index:1}
.disc{position:absolute;inset:3%;border-radius:50%;background-size:34%;background-position:center;background-repeat:no-repeat;background-color:#111;box-shadow:inset 0 0 0 1px #333;transition:transform .45s ease}
.disc::after{content:"";position:absolute;inset:0;border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 3px,#2a2a2a 3px 4px);-webkit-mask:radial-gradient(circle,transparent 18%,#000 18.5%);mask:radial-gradient(circle,transparent 18%,#000 18.5%)}
.blurb{position:absolute;inset:0;margin:0;padding:12% 10%;background:#fff;color:#000;font-size:.9375rem;line-height:1.35;overflow:hidden}
.still.jacket{background:#fff}.jacket img{position:relative;transition:opacity .3s ease}
.look .still img{transition:none}
@media(hover:hover){
.hang:hover .disc,.hang:focus-visible .disc{transform:translateX(16%)}
.hang:hover .sleeve.playing .disc{animation:spin 3s linear infinite}
@keyframes spin{from{transform:translateX(16%) rotate(0)}to{transform:translateX(16%) rotate(360deg)}}
.hang:hover .jacket:has(.blurb) img,.hang:focus-visible .jacket:has(.blurb) img{opacity:0}
.look:hover .still img{transform:scale(3)}
}
@media(prefers-reduced-motion:reduce){.hang:hover .disc{transform:none}}

#site-content{overflow-x:clip}

.tracks-list{margin:0;padding-left:1.6em;font-size:1.0625rem;line-height:1.3}.tracks-list li{padding:5px 0}.tracks-list b{font-weight:500;display:block}
#scene-clock:not(.x) rect{transform-box:fill-box}

.scene[hidden]{display:none}
#save{margin-top:16px}

.lib[hidden]{display:none}
.deck-bars{display:flex;align-items:flex-end;gap:6px;height:min(46vh,380px)}.deck-bars button{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;border:0!important;background:none!important;padding:0!important;cursor:pointer}.deck-bars i{display:block;height:var(--h);background:#16246e;transition:background .15s}.deck-bars button[aria-pressed=true] i{background:#e64aa6}.deck-bars span{font-size:.875rem}
.note{margin:14px 0 0;font-size:1.0625rem}.big-num{font:400 clamp(80px,12vw,180px)/.9 Anton,Impact,sans-serif;margin:0}
.cloud{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:1.25rem}
.scrub{display:flex;align-items:center;gap:12px;margin-top:20px;font-size:1.125rem}.scrub input{flex:1;accent-color:#16246e}.scrub output{font-weight:700}
.gig-list{list-style:none;margin:0;padding:0;overflow:auto;max-height:calc(100svh - 150px)}.gig-list li{display:grid;grid-template-columns:5.5em 1fr;gap:0 12px;padding:9px 0;border-top:1px solid #000}.gig-list time{grid-row:span 2;font-size:.9375rem}.gig-list b{font-weight:500}.gig-list span{font-size:.9375rem}
.wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:2px;max-height:calc(100svh - 150px);overflow:auto}.wall img{display:block;width:100%;aspect-ratio:1;object-fit:cover;transition:transform .15s}.wall img:hover{transform:scale(1.8);position:relative;z-index:1}
.diary{display:flex;gap:6px;overflow-x:auto}.day{display:flex;flex-direction:column;gap:3px}.day time{font-size:.6875rem;writing-mode:vertical-rl}.day i{display:block;width:18px;height:18px}

#progress{position:fixed;top:0;left:0;right:0;height:2px;background:#16246e;transform:scaleX(0);transform-origin:left;z-index:5}
.wrapped-head{padding:12px var(--gutter) 0}.wrapped-head h1{font-size:clamp(28px,3vw,40px);font-weight:400;letter-spacing:-.01em;margin:0}
.scene{--p:1;height:260svh;position:relative}
.pin{position:sticky;top:0;height:100svh;box-sizing:border-box;padding:clamp(16px,3vh,32px) var(--gutter);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(12px,2.5vh,28px);overflow:hidden}
.scene.static{height:auto;padding:clamp(40px,8vh,96px) var(--gutter)}.try .scene-copy{max-width:44em;margin:0 auto;text-align:left}
.scene-copy{text-align:center;max-width:44em;flex:none}
.scene-copy h2{font:500 clamp(20px,2.4vw,30px)/1.2 var(--sans);letter-spacing:-.01em;margin:0;text-wrap:balance}
.scene-copy p{font-size:.9375rem;line-height:1.35;margin:4px auto 0;color:#444}.scene-copy p:empty{display:none}
.count{font:400 clamp(100px,24vw,340px)/.95 Anton,Impact,sans-serif!important;color:#16246e!important;margin:0 0 8px!important;font-variant-numeric:tabular-nums}
.plate{flex:1;min-height:0;width:min(100%,1100px);display:flex;flex-direction:column;align-items:center;justify-content:center}
.plate>svg,.plate svg{display:block;width:100%;height:100%;max-height:100%;font-family:var(--sans)}.plate figure{margin:0;width:100%;height:100%}
.scroll{overflow:hidden;height:100%}.scroll svg{min-width:0}
.big-num{color:#16246e}.scrub{display:none}
.deck-bars{width:100%;height:min(56svh,460px)}.deck-bars i{height:calc(var(--h)*clamp(0,(var(--p) - var(--t)*.5)/.4,1))}.deck-bars button{justify-content:flex-end}
.note{text-align:center}.cloud{justify-content:center}
.draw{stroke-dasharray:1;stroke-dashoffset:calc(1 - clamp(0,(var(--p) - var(--t)*.6)/.4,1))}
.grow{transform-box:fill-box;transform-origin:bottom;transform:scaleY(clamp(0,(var(--p) - var(--t)*.6)/.4,1))}
.in{opacity:clamp(0,(var(--p) - var(--t)*.6)/.4,1)}
#seasons{justify-content:center}#seasons svg{height:auto;max-height:70svh;clip-path:inset(0 calc((1 - var(--p))*100%) 0 0)}
.tracks-list{columns:2;column-gap:40px;width:min(100%,760px);padding-left:1.4em}.tracks-list li{break-inside:avoid}
.gig-list{width:min(100%,760px);max-height:none;overflow:hidden}.gig-list li{padding:6px 0}
.wall{width:100%;grid-template-columns:repeat(auto-fill,minmax(36px,1fr));max-height:100%;overflow:hidden;align-content:center}
.poem .pin{text-align:center}.kicker{margin:0 auto 20px!important}.poem blockquote{font:400 clamp(38px,7vw,110px)/1.05 "Bodoni Moda",Didot,Georgia,serif;color:#16246e;margin:0 auto 28px;max-width:1100px;text-wrap:balance}
@media(max-width:800px){.tracks-list{columns:1}.scene{height:200svh}.scroll{overflow-x:auto}.scroll svg{min-width:640px;height:auto}}
@media(prefers-reduced-motion:reduce){.scene{height:auto}.pin{position:static;height:auto;min-height:80svh}#progress{display:none}}
.today-words{font:500 clamp(20px,2.4vw,30px)/1.25 var(--sans)!important;color:#000!important;margin:0 auto 10px!important;max-width:32em}#today-song{font-size:1.0625rem}