/* interlectra — record sleeve design system.
   Black, chrome, one magenta. One typeface: ITC Avant Garde Gothic.
   The artwork carries the colour; motion only where it means something. */

/* TeX Gyre Adventor — free Avant Garde clone (URW Gothic lineage) under the GUST Font License,
   which allows web use; licence in /fonts/. Latin subset, WOFF2. Only regular + bold exist, so the
   500 weight renders as 400 and 600 as 700. */
@font-face{font-family:'IX Adventor';src:url('/fonts/adventor-regular.woff2') format('woff2');font-weight:400 500;font-style:normal;font-display:swap}
@font-face{font-family:'IX Adventor';src:url('/fonts/adventor-bold.woff2') format('woff2');font-weight:600 800;font-style:normal;font-display:swap}
@font-face{font-family:'IX Adventor';src:url('/fonts/adventor-italic.woff2') format('woff2');font-weight:400 500;font-style:italic;font-display:swap}
@font-face{font-family:'IX Adventor';src:url('/fonts/adventor-bolditalic.woff2') format('woff2');font-weight:600 800;font-style:italic;font-display:swap}
/* ITC Avant Garde (the real one) — LOCAL PREVIEW ONLY for side-by-side comparison: desktop licence,
   files live outside site/ (fonts-local/). Only fetched when html.f-avant is set. */
@font-face{font-family:'IX Avant';src:url('/_localfonts/ITCAvantGardeStd-Bk.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'IX Avant';src:url('/_localfonts/ITCAvantGardeStd-Md.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:'IX Avant';src:url('/_localfonts/ITCAvantGardeStd-Demi.ttf') format('truetype');font-weight:600 800;font-display:swap}

:root{
  --bg:#0b0b0c;--bg2:#111113;--raise:#161618;--line:rgba(255,255,255,.1);--line2:rgba(255,255,255,.18);
  --text:#fff;--silver:#c0c0c0;--dim:#8c8c8c;--mute:#555;--mag:#ff0088;--glow:#ff0088;
  --f:'IX Adventor','Century Gothic','Futura',Helvetica,Arial,sans-serif;
  --pad:clamp(18px,3.6vw,56px);--max:1440px;--ease:cubic-bezier(.2,.7,.2,1);--out:cubic-bezier(.16,1,.3,1)
}
html.f-avant{--f:'IX Avant','IX Adventor',Helvetica,Arial,sans-serif}
/* background options (local switcher). Glow is the default, on soft black: pure #000 makes the covers' shadows and
   the floor reflection vanish, and reads harsher on OLED; a touch of lift keeps depth without looking grey. */
html.bg-black{--bg:#000;--bg2:#0a0a0a;--raise:#111}
html.bg-charcoal{--bg:#121212;--bg2:#181818;--raise:#1d1d1d}
html.bg-midnight{--bg:#07070d;--bg2:#0d0d16;--raise:#13131d}
/* Glow (the chosen default): soft black lit from above by a faint chrome-blue and magenta haze, like the logo */
body{background:radial-gradient(ellipse 90% 60% at 50% -10%,rgba(90,130,255,.10),transparent 60%),radial-gradient(ellipse 70% 50% at 85% 0%,rgba(255,0,136,.07),transparent 60%),var(--bg);background-attachment:fixed}
html.bg-soft body,html.bg-black body,html.bg-charcoal body,html.bg-midnight body{background:var(--bg)}
/* font comparison switch — rendered only on localhost (see make.py head()) */
.font-sw{position:fixed;left:14px;bottom:14px;z-index:90;display:flex;flex-wrap:wrap;max-width:calc(100vw - 28px);gap:2px;padding:4px;border-radius:999px;background:rgba(20,20,20,.9);box-shadow:0 0 0 1px rgba(255,255,255,.15);font:600 11px/1 -apple-system,BlinkMacSystemFont,sans-serif}
.font-sw button{padding:8px 12px;border-radius:999px;color:#aaa;letter-spacing:0;text-transform:none}
.font-sw button[aria-pressed=true]{background:#fff;color:#000}
.font-sw .sep{width:1px;margin:4px 6px;background:rgba(255,255,255,.2)}
.menu{background:color-mix(in srgb,var(--bg) 96%,transparent)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.65 var(--f);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;text-transform:inherit;letter-spacing:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:1px solid var(--mag);outline-offset:4px}
::selection{background:var(--mag);color:#fff}
.vh{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 16px;background:var(--mag);color:#fff}
.skip:focus{top:12px}
.lab{font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase}
.dim{color:var(--dim)}
.mag{color:var(--mag)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}

/* cross-page transitions: the header stays put, the artwork morphs between grid and page */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut .28s var(--ease) both}
::view-transition-new(root){animation:vtIn .5s var(--out) both}
@keyframes vtOut{to{opacity:0;transform:translateY(-10px)}}
@keyframes vtIn{from{opacity:0;transform:translateY(14px)}}
.site-head{view-transition-name:head}
::view-transition-group(*){animation-duration:.55s;animation-timing-function:var(--out)}

/* ------------------------------------------------------------ header */
.site-head{position:relative;z-index:30;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:34px;max-width:var(--max);margin:0 auto;padding:20px var(--pad) 0}
.brand{display:flex;flex-direction:column;gap:10px}
.logo{position:relative;display:block;width:clamp(190px,20vw,270px)}
.logo-hint{margin:0;font-size:9.5px;color:var(--dim);white-space:nowrap}
.logo-hint.intro-fade{animation-delay:1.2s}
.hint-touch{display:none}
@media(hover:none){.hint-desk{display:none}.hint-touch{display:inline}}
.logo.intro{clip-path:inset(0 100% 0 0);animation:wipe 1.3s var(--ease) .1s forwards}
@keyframes wipe{to{clip-path:inset(-20% -5% -20% 0)}}
/* letter art is a 7:6 canvas with the wordmark in the band 32%–57% of its height:
   0.32 × 6/7 = 27.43% of the width is cropped off the top */
.band{display:block;position:relative;height:0;padding-bottom:21.43%}
.letter-stage{position:absolute;left:0;top:0;width:100%;aspect-ratio:7/6;margin:-27.43% 0 0;font-size:0;font-weight:400;pointer-events:none}
.letter-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.lt{opacity:0;transition:opacity .15s}
.lt-active{filter:drop-shadow(0 0 8px var(--mag))}
.lt-hover{filter:drop-shadow(0 0 8px rgba(255,0,136,.8))}
.nav{display:flex;gap:26px}
.nav a{position:relative;color:var(--silver);transition:color .2s}
.nav a::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--mag);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
.nav a:hover,.nav a[aria-current=page]{color:var(--text)}
.nav a:hover::after,.nav a[aria-current=page]::after{transform:scaleX(1);transform-origin:left}
.nav a[href="/play"]{color:var(--text)}
.nav a[href="/play"]::before{content:'';display:inline-block;width:6px;height:6px;margin:0 7px 1px 0;border-radius:50%;background:var(--mag);box-shadow:0 0 8px var(--mag);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}
.head-r{display:flex;align-items:center;gap:22px;justify-self:end}
.meta{display:flex;flex-direction:column;align-items:flex-end;line-height:1.75;min-width:180px}
.meta .c{color:var(--dim)}
.meta .t{font-weight:600}
.nowp{display:none;align-items:center;gap:10px;color:var(--mag)}
.nowp.on{display:inline-flex}
.menu-btn{display:none;width:40px;height:40px;position:relative}
.menu-btn i{position:absolute;left:9px;right:9px;height:1.5px;background:currentColor;transition:transform .35s var(--ease),opacity .2s}
.menu-btn i:nth-child(1){top:14px}.menu-btn i:nth-child(2){top:20px}.menu-btn i:nth-child(3){top:26px}
.menu-open .menu-btn i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-open .menu-btn i:nth-child(2){opacity:0}
.menu-open .menu-btn i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.menu{position:fixed;inset:0;z-index:25;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:100px var(--pad) 60px;background:rgba(0,0,0,.96);visibility:hidden;opacity:0;transition:opacity .3s,visibility 0s .3s}
.menu a{font-size:clamp(34px,9vw,56px);font-weight:600;line-height:1.15;letter-spacing:-.01em;opacity:0;transform:translateY(20px);transition:opacity .4s,transform .5s var(--out)}
.menu a[aria-current=page]{color:var(--mag)}
.menu-open .menu{visibility:visible;opacity:1;transition:opacity .3s}
.menu-open .menu a{opacity:1;transform:none}
.menu-open .menu a:nth-child(2){transition-delay:.04s}.menu-open .menu a:nth-child(3){transition-delay:.08s}.menu-open .menu a:nth-child(4){transition-delay:.12s}
.menu-open .menu a:nth-child(5){transition-delay:.16s}.menu-open .menu a:nth-child(6){transition-delay:.2s}.menu-open .menu a:nth-child(7){transition-delay:.24s}
@media(max-width:900px){.site-head{grid-template-columns:1fr auto;gap:14px}.nav{display:none}.menu-btn{display:block}.meta{display:none}.logo{width:180px}}
@media(min-width:901px){.menu{display:none}}

/* ------------------------------------------------------------ rolling type */
.roll{display:inline-flex;flex-wrap:wrap}
/* word gaps are margins, not space elements, so a wrapped line never starts with a gap */
/* the clip box is padded on every side (and pulled back with negative margins) so glyphs that
   overhang their advance width — Avant Garde's round s, o, c at tight tracking — aren't shaved */
.roll .w{display:inline-flex;overflow:hidden;padding:.04em .12em .12em;margin:-.04em -.12em -.12em}
.roll .w:not(:last-child){margin-right:calc(.28em - .12em)}
.roll .ch{display:inline-block}
.roll .sp{display:inline-block;width:.3em}

/* ------------------------------------------------------------ sleeve (3D printed card) */
.sleeve-3d{position:relative;perspective:1600px}
.sleeve{position:relative;transform:rotateY(var(--ry,-14deg)) rotateX(var(--rx,5deg)) rotateZ(var(--rz,-7deg));transition:transform .6s var(--ease)}
/* floor reflection: a mirrored, faded copy of the cover. -webkit-box-reflect was tried first but Chromium
   paints the artwork blank when it meets the 3D tilt + float animation (seen on mobile and with view transitions) */
.refl{position:absolute;left:0;right:0;top:calc(100% + 8px);aspect-ratio:1;background:var(--art) center/cover;transform:scaleY(-1);pointer-events:none;
  -webkit-mask-image:linear-gradient(to top,rgba(0,0,0,.15),transparent 30%);mask-image:linear-gradient(to top,rgba(0,0,0,.15),transparent 30%)}
/* the reflection hangs below its sleeve (~30% of the sleeve's height, plus the tilt), so reserve that space */
.fc{padding-bottom:16%}
.rel-hero{padding-bottom:clamp(90px,14vw,190px)}
.sleeve img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:2px;box-shadow:40px 60px 90px -20px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.08)}
.sleeve::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:2px;
  background:linear-gradient(115deg,rgba(255,255,255,.16),rgba(255,255,255,.03) 26%,transparent 44%,transparent 72%,rgba(255,255,255,.06));mix-blend-mode:screen}
.sleeve::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:2px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),inset 0 0 22px rgba(0,0,0,.35)}
.sticker{position:absolute;z-index:3;top:5%;right:5%;width:18%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;text-align:center;transform-origin:50% 60%;
  background:radial-gradient(circle at 35% 30%,#fff,#d6d6d6);color:#111;font-size:clamp(7px,.8vw,10px);font-weight:600;letter-spacing:.04em;line-height:1.15;text-transform:uppercase;box-shadow:0 2px 6px rgba(0,0,0,.4);
  transform:rotate(-8deg);animation:stick .7s cubic-bezier(.2,.9,.3,1) var(--stick-d,.7s) both;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
/* comes in big and high off the sleeve, slaps down past flat, settles; the shadow tightens as it lands */
@keyframes stick{
  0%{opacity:0;transform:translate(30%,-40%) scale(2.1) rotate(-34deg);box-shadow:0 26px 30px rgba(0,0,0,.25)}
  55%{opacity:1;transform:scale(.88) rotate(-3deg);box-shadow:0 1px 2px rgba(0,0,0,.5)}
  75%{transform:scale(1.06) rotate(-10deg)}
  100%{transform:scale(1) rotate(-8deg);box-shadow:0 2px 6px rgba(0,0,0,.4)}}
.slot .sticker{--stick-d:.95s}
.sleeve-3d:hover .sticker,.slot a:hover .sticker{transform:scale(1.08) rotate(-2deg)}

/* ------------------------------------------------------------ crate (home) */
.crate{position:relative;height:min(74vh,720px);min-height:460px;overflow:hidden;overflow-x:clip;overflow-y:visible;isolation:isolate;touch-action:pan-y}
/* overflow-y:visible lets the glow fade out past the crate's edges instead of ending in a hard line (browsers
   without overflow:clip keep the hidden fallback above) */
.crate::before{content:'';position:absolute;left:50%;top:46%;width:min(1000px,170vw);aspect-ratio:1;translate:-50% -50%;z-index:-1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--glow) 24%,transparent),color-mix(in srgb,var(--glow) 8%,transparent) 38%,transparent 64%);transition:background 1.2s;animation:drift 14s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate(-3%,-2%)}to{transform:translate(3%,2%) scale(1.08)}}
.slots{position:absolute;inset:0;display:grid;place-items:center;perspective:1400px;perspective-origin:50% 30%}
.slot{grid-area:1/1;position:relative;width:min(46vh,430px,68vw);margin-top:-5vh;transform-style:preserve-3d}
.float{animation:float 7s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-8px)}}
.pulse{transform:scale(calc(1 + var(--beat,0) * .03));transition:transform .08s linear}
.slot a{display:block}
.arrow{position:absolute;top:50%;z-index:5;width:56px;height:56px;margin-top:-28px;display:grid;place-items:center;color:var(--silver);border-radius:50%;transition:color .2s,background .3s}
.arrow:hover{color:var(--text);background:rgba(255,255,255,.06)}
.arrow svg{width:24px;height:24px;transition:transform .3s var(--ease)}
.arrow.prev{left:var(--pad)}.arrow.next{right:var(--pad)}
.arrow.prev:hover svg{transform:translateX(-4px)}.arrow.next:hover svg{transform:translateX(4px)}
.hint{position:absolute;left:0;right:0;bottom:22px;text-align:center;color:var(--mute);transition:opacity .6s}
.hint.gone{opacity:0}
.caption{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:20px;max-width:var(--max);margin:0 auto;padding:0 var(--pad) 26px}
.count{display:flex;align-items:baseline;gap:8px;color:var(--dim);font-variant-numeric:tabular-nums}
.odo{display:inline-flex;height:1.3em;overflow:hidden;color:var(--text)}
.odo .col{display:flex;flex-direction:column;transition:transform .7s var(--ease)}
.odo .col span{height:1.3em;line-height:1.3em}
.cap-title{text-align:center;min-width:0}
.cap-title h2{display:flex;justify-content:center;margin:0;font-size:clamp(26px,3.2vw,48px);font-weight:600;letter-spacing:-.01em;text-transform:uppercase;line-height:1.02}
.cap-title .sub{display:flex;justify-content:center;margin-top:10px;color:var(--dim)}
.acts{display:flex;justify-content:flex-end;align-items:center;gap:26px}
.act{position:relative;display:inline-flex;align-items:center;gap:10px;padding:6px 0}
.act .ar{color:var(--mag);transition:transform .3s var(--ease)}
.act:hover .ar{transform:translateX(5px)}
.act[hidden]{display:none}
.auto{color:var(--dim);transition:color .2s}
.auto:hover{color:var(--text)}
.auto-dot{width:7px;height:7px;border-radius:50%;background:var(--mute);transition:background .2s,box-shadow .2s}
.auto[aria-pressed=true] .auto-dot{background:var(--mag);box-shadow:0 0 8px var(--mag)}
@media(max-width:760px){.auto .auto-t{font-size:0}.auto .auto-t::after{content:'Auto';font-size:11px}}
@media(max-width:760px){.caption{grid-template-columns:1fr auto;grid-template-areas:"t t" "c a"}.cap-title{grid-area:t;margin-bottom:8px}.count{grid-area:c}.acts{grid-area:a;gap:18px}}

/* preview button (everywhere): eq bars move with the real audio */
.play{position:relative;display:inline-flex;align-items:center;gap:10px;padding:6px 0}
.play::after{content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--mag);transform:scaleX(var(--p,0));transform-origin:left}
.play.is-playing{color:var(--mag)}
.eq{display:inline-flex;align-items:flex-end;gap:2px;height:12px}
.eq i{width:2px;height:100%;background:currentColor;transform-origin:bottom;transform:scaleY(.25);transition:transform .07s linear}

.strip{position:relative;display:flex;gap:18px;overflow-x:auto;padding:26px var(--pad) 32px;scrollbar-width:none;border-block:1px solid var(--line)}
.strip::-webkit-scrollbar{display:none}
.th{flex:none;width:clamp(96px,9vw,124px);display:flex;flex-direction:column;gap:10px;text-align:left;opacity:.5;transition:opacity .3s;animation:thIn .7s var(--ease) backwards}
.th:hover,.th.on{opacity:1}
.th img{width:100%;aspect-ratio:1;object-fit:cover;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.th span{font-size:9.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-bottom:7px}
@keyframes thIn{from{opacity:0;transform:translateY(14px)}}
.marker{position:absolute;left:0;bottom:31px;height:2px;width:0;background:var(--mag);transition:transform .6s var(--ease),width .6s var(--ease);pointer-events:none}

/* ------------------------------------------------------------ sections */
.sec{padding:clamp(70px,9vw,130px) 0 0}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;margin-bottom:34px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.sec-head h2{margin:0;font-size:clamp(30px,3.6vw,54px);font-weight:600;letter-spacing:-.015em;line-height:1}
.sec-head a{color:var(--dim);transition:color .2s}
.sec-head a:hover{color:var(--text)}
.statement{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--pad);align-items:end}
.statement p{margin:0;font-size:clamp(26px,3.4vw,52px);line-height:1.12;font-weight:500;letter-spacing:-.02em}
.statement p .dim{color:#6f6f6f}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 20px}
.stat b{display:block;font-size:clamp(40px,4.6vw,72px);font-weight:600;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.stat span{color:var(--dim)}
@media(max-width:820px){.statement{grid-template-columns:1fr}}

/* featured / "out now" */
.feat{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,64px)}
.fc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:end}
.fc .body{display:flex;flex-direction:column;gap:12px}
/* tilted 3D sleeves (and the crate, with its glow) are painted in the positioned layer, above ordinary text —
   so their drop shadows were darkening the titles beside them. Lift the text above them. */
.fc .body,.rel-hero > div:last-child,.caption{position:relative;z-index:1}
.fc h3{margin:0;font-size:clamp(24px,2.4vw,36px);font-weight:600;line-height:1.05;letter-spacing:-.01em}
.climb{display:flex;align-items:baseline;gap:10px}
.climb s{font-size:28px;color:var(--mute);text-decoration-thickness:2px}
.climb b{font-size:clamp(56px,6vw,88px);font-weight:600;line-height:.85;letter-spacing:-.04em;color:var(--mag)}
@media(max-width:980px){.feat{grid-template-columns:1fr}}
@media(max-width:480px){.fc{grid-template-columns:1fr;padding-bottom:0}.fc .sleeve-3d{margin-bottom:34%}}

/* cover grid — plain covers; the only hover is the small lift */
.covers{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:48px 26px}
.cover{display:flex;flex-direction:column;gap:12px;transition:transform .25s var(--ease)}
.cover:hover{transform:translateY(-3px)}
.cover[hidden]{display:none}
.cover .art{position:relative}
.cover img{width:100%;aspect-ratio:1;object-fit:cover;box-shadow:0 0 0 1px rgba(255,255,255,.06)}
.cover .badge{position:absolute;top:10px;right:10px;padding:4px 9px;border-radius:999px;background:#fff;color:#111;font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.cover h3{margin:0;font-size:17px;font-weight:600;line-height:1.25;letter-spacing:-.005em}
.cover .m{display:flex;justify-content:space-between;gap:10px;color:var(--dim)}
@media(max-width:560px){.covers{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 16px}.cover h3{font-size:15px}}
.filters{display:flex;gap:22px;flex-wrap:wrap}
.filters button{color:var(--mute);padding-bottom:5px;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.filters button:hover{color:var(--text)}
.filters button[aria-pressed=true]{color:var(--text);border-color:var(--mag)}
select.month{appearance:none;padding:9px 34px 9px 14px;background:var(--bg2) linear-gradient(45deg,transparent 50%,var(--dim) 50%) no-repeat calc(100% - 17px) 50%/5px 5px;
  border:1px solid var(--line2);color:var(--text);cursor:pointer;outline:0}
select.month:hover,select.month:focus{border-color:var(--mag)}
.empty-note{padding:40px 0}

/* press / credentials */
.press{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--pad)}
.press li{padding:24px 0;border-top:1px solid var(--line)}
.press .src{display:block;margin-bottom:10px;color:var(--mag)}
.press p{margin:0;font-size:15px;line-height:1.6;color:var(--silver)}
.press strong{color:var(--text);font-weight:600}
.press a{border-bottom:1px solid var(--line2)}
@media(max-width:900px){.press{grid-template-columns:1fr 1fr}}@media(max-width:600px){.press{grid-template-columns:1fr}}

/* rows (news, remixes) */
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--pad)}
@media(max-width:860px){.two{grid-template-columns:1fr}}
.rows{list-style:none;margin:0;padding:0}
.rows li{position:relative;border-top:1px solid var(--line)}
.rows li:last-child{border-bottom:1px solid var(--line)}
.rows li::before{content:'';position:absolute;left:0;top:-1px;height:1px;width:100%;background:var(--mag);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.rows li:hover::before{transform:scaleX(1)}
.rows a,.rows .r{display:grid;grid-template-columns:100px minmax(0,1fr) auto;gap:16px;align-items:center;padding:17px 0;font-size:15px;transition:padding .35s var(--ease)}
.rows a:hover{padding-left:8px}
.rows .d{font-size:11px;letter-spacing:.08em;color:var(--dim);font-variant-numeric:tabular-nums}
.rows .t{line-height:1.4}
.rows .t small{display:block;margin-top:2px;font-size:12px;color:var(--dim)}
.rows .x{color:var(--dim)}
.rows .x.mag{color:var(--mag)}
.rows img{width:52px;height:52px;object-fit:cover}
.rows.thumbs a{grid-template-columns:52px minmax(0,1fr) auto}
.rrow{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px}
.rrow .play{white-space:nowrap}
@media(max-width:480px){.rows a,.rows .r{grid-template-columns:78px minmax(0,1fr)}.rows .x{display:none}.rows.thumbs a{grid-template-columns:52px minmax(0,1fr)}}

/* signup */
.signup{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px;align-items:end;padding:clamp(28px,4vw,56px);border:1px solid var(--line)}
.signup h2{margin:0;font-size:clamp(32px,4vw,58px);font-weight:600;line-height:1;letter-spacing:-.02em}
.ml{display:flex;border-bottom:1px solid var(--silver)}
.ml input{flex:1;min-width:0;padding:14px 0;background:none;border:0;outline:0;color:var(--text);font:16px var(--f)}
.ml input::placeholder{color:var(--mute)}
.ml button{color:var(--mag);padding-left:16px}
.ml button:hover{color:var(--text)}
@media(max-width:760px){.signup{grid-template-columns:1fr}}

/* ------------------------------------------------------------ inner pages */
.page-head{padding:clamp(56px,8vw,110px) 0 clamp(30px,4vw,50px)}
.crumbs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:26px;color:var(--mute)}
.crumbs a{color:var(--dim)}.crumbs a:hover{color:var(--text)}
.kicker{color:var(--mag);margin-bottom:16px}
.page-head h1{margin:0;font-size:clamp(52px,9vw,150px);font-weight:600;line-height:.92;letter-spacing:-.035em}
/* merch product titles run long ("interlectra Embroided Snapback"): sized so the
   first two words hold on line one instead of collapsing to one word per line */
.merch-product .page-head h1{font-size:clamp(38px,8.4vw,118px)}
.standfirst{margin:26px 0 0;max-width:46ch;font-size:clamp(18px,1.7vw,23px);line-height:1.5;color:var(--silver)}
.standfirst a{color:var(--text);border-bottom:1px solid var(--line2)}
.page-head .row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}

.prose{max-width:68ch;font-size:17px;line-height:1.75;color:#dcdcdc}
.prose h2{margin:2.2em 0 .6em;font-size:clamp(24px,2.4vw,34px);font-weight:600;line-height:1.1;letter-spacing:-.015em;color:var(--text)}
.prose h2:first-child{margin-top:0}
.prose p{margin:0 0 1.1em}
.prose a{color:var(--text);border-bottom:1px solid var(--mag);transition:color .2s}
.prose a:hover{color:var(--mag)}
.prose strong{color:var(--text);font-weight:600}
.prose .credit{font-size:14px;color:var(--dim)}

.layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(40px,6vw,100px);align-items:start}
@media(max-width:900px){.layout{grid-template-columns:1fr}}
.aside{position:sticky;top:30px;display:flex;flex-direction:column;gap:40px}
.dl{margin:0}
.dl div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:14px;padding:14px 0;border-top:1px solid var(--line);font-size:15px}
.dl dt{color:var(--dim)}
.dl dd{margin:0}
.dl a{border-bottom:1px solid var(--line2)}
.elsewhere{display:flex;flex-wrap:wrap;gap:10px 24px}
.elsewhere a{color:var(--silver)}.elsewhere a:hover{color:var(--mag)}
.callout{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;margin-top:50px;padding:32px;border:1px solid var(--line)}
.callout h3{margin:4px 0;font-size:28px;font-weight:600}
.callout p{margin:0;color:var(--silver)}

/* release page */
.rel-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,7vw,120px);align-items:center;padding:clamp(40px,6vw,90px) 0}
.rel-hero .sleeve-3d{max-width:560px;width:100%;justify-self:center}
.rel-hero h1{margin:0;font-size:clamp(40px,5vw,84px);font-weight:600;line-height:.95;letter-spacing:-.035em}
.facts{display:flex;flex-wrap:wrap;gap:6px 16px;margin:22px 0 0;color:var(--dim)}
.facts span+span::before{content:'';display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--mute);margin:0 16px 2px 0;vertical-align:middle}
.rel-hero .lede{margin:28px 0 0;font-size:clamp(18px,1.6vw,22px);line-height:1.55;color:#e4e4e4;max-width:40ch}
.rel-hero ul{list-style:none;margin:26px 0 0;padding:0;max-width:52ch;font-size:15px;color:var(--silver)}
.rel-hero ul li{padding:12px 0;border-top:1px solid var(--line)}
.rel-hero ul .k{display:inline-block;min-width:80px;color:var(--dim)}
.links{display:flex;flex-wrap:wrap;gap:14px 28px;margin-top:30px;align-items:center}
.links a{position:relative;padding-bottom:5px}
.links a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--mag);transform-origin:left;transition:transform .35s var(--ease)}
.links a:hover::after{transform:scaleX(.3)}
.btn{display:inline-flex;align-items:center;gap:12px;padding:15px 26px;background:var(--text);color:#000;transition:background .25s,color .25s}
.btn:hover{background:var(--mag);color:#fff}
.btn::after{display:none}
.pager{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);margin-top:clamp(60px,8vw,110px)}
.pager a{display:flex;align-items:center;gap:18px;padding:30px 0;transition:color .2s}
.pager a:last-child{justify-content:flex-end;text-align:right;border-left:1px solid var(--line);padding-left:20px}
.pager img{width:64px;height:64px;object-fit:cover}
.pager b{display:block;font-size:clamp(18px,2vw,26px);font-weight:600;letter-spacing:-.01em}
.pager a:hover b{color:var(--mag)}
@media(max-width:860px){.rel-hero{grid-template-columns:1fr;padding-bottom:clamp(40px,6vw,90px)}.rel-hero .sleeve-3d{max-width:420px;margin-bottom:34%}}
@media(max-width:560px){.pager img{display:none}}

/* news page */
.news-list{list-style:none;margin:0;padding:0}
.news-item{display:grid;grid-template-columns:160px minmax(0,1fr);gap:clamp(20px,4vw,60px);padding:36px 0;border-top:1px solid var(--line)}
.news-item[hidden]{display:none}
.news-item time{display:block;font-size:22px;font-weight:600;letter-spacing:-.01em}
.news-item .tag{display:block;margin-top:6px;color:var(--mag)}
.news-item h2{margin:0 0 10px;font-size:clamp(22px,2.3vw,32px);font-weight:600;line-height:1.15;letter-spacing:-.015em}
.news-item p{margin:0 0 14px;max-width:62ch;color:var(--silver);font-size:16px}
.news-item a{border-bottom:1px solid var(--mag);padding-bottom:3px}
@media(max-width:640px){.news-item{grid-template-columns:1fr;gap:10px}}
/* news artwork + release countdown (make.py news_page: optional img + countdown fields) */
.news-main{display:flex;gap:22px;align-items:flex-start;margin-top:14px}
.news-art{width:180px;height:180px;flex:none;object-fit:cover;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 24px 50px -20px #000}
.news-copy{min-width:0;flex:1}
.news-copy p{margin-top:0}
@media(max-width:640px){.news-main{flex-direction:column}.news-art{width:min(100%,320px);height:auto;aspect-ratio:1}}
.cd{display:flex;gap:10px;margin:2px 0 18px}
.cd[hidden]{display:none}
.cd-u{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:68px;padding:12px 8px 10px;border:1px solid var(--line2);background:var(--bg2)}
.cd-u b{font-size:30px;font-weight:600;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.cd-u span{font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}

/* shows */
.empty{padding:clamp(40px,6vw,80px);border:1px dashed var(--line2);display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.empty h2{margin:0;font-size:clamp(28px,3.4vw,48px);font-weight:600;line-height:1;letter-spacing:-.02em}
.empty p{margin:10px 0 0;color:var(--silver);max-width:46ch}

/* ------------------------------------------------------------ footer */
.site-foot{margin-top:clamp(90px,11vw,160px);border-top:1px solid var(--line)}
.site-foot .wrap{padding-top:clamp(56px,7vw,100px);padding-bottom:100px}
.site-foot .mail{display:block;margin:14px 0 0;font-size:clamp(28px,6.4vw,104px);font-weight:600;letter-spacing:-.04em;line-height:1;overflow-wrap:anywhere;transition:color .3s}
.site-foot .mail:hover{color:var(--mag)}
.foot-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;margin-top:60px;padding-top:30px;border-top:1px solid var(--line)}
.foot-grid h2{margin:0 0 14px;color:var(--dim)}
.foot-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:15px}
.foot-grid a{color:var(--silver)}.foot-grid a:hover{color:var(--text)}
.foot-bar{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:56px;color:var(--mute)}
@media(max-width:700px){.foot-grid{grid-template-columns:1fr 1fr}}

/* ------------------------------------------------------------ motion helpers */
.rv{opacity:0;transform:translateY(28px)}
.rv.in{opacity:1;transform:none;transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
.lines .ln{display:block;overflow:hidden}
.lines .ln > span{display:block}
.intro-fade{opacity:0;animation:fadeIn .9s var(--ease) forwards}
@keyframes fadeIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  .logo.intro{clip-path:none}.intro-fade{opacity:1}.rv{opacity:1;transform:none}
}

/* ------------------------------------------------------------ home: promo-mix banner (make.py mix_banner) */
.mix-banner{display:flex;align-items:center;gap:18px clamp(18px,3vw,30px);margin-top:clamp(18px,3vw,30px);padding:18px clamp(18px,3vw,30px);border:1px solid var(--line);background:linear-gradient(110deg,color-mix(in srgb,var(--mag) 12%,var(--bg2)),var(--bg2) 60%);transition:border-color .3s}
.mix-banner:hover{border-color:var(--mag)}
.mix-play{display:grid;place-items:center;width:46px;height:46px;flex:none;border-radius:50%;background:var(--mag);color:#fff;box-shadow:0 0 24px color-mix(in srgb,var(--mag) 55%,transparent)}
.mix-copy{display:flex;flex-direction:column;gap:4px;min-width:0}
.mix-h{font-size:clamp(22px,2.6vw,34px);font-weight:600;letter-spacing:-.02em;line-height:1.1}
.mix-copy .dim{font-size:14px}
.mix-banner .btn{margin-left:auto;flex:none}
@media(max-width:760px){.mix-banner{flex-wrap:wrap}.mix-banner .btn{margin-left:0}}
/* home: release countdown banner (make.py countdown_banner) — replaces the promo-mix banner */
.countdown-banner .cd-art{width:64px;height:64px;flex:none;object-fit:cover;box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.countdown-banner .cd{margin:0 0 0 auto}
.countdown-banner .cd-u{min-width:60px;padding:10px 6px 8px}
.countdown-banner .cd-u b{font-size:24px}
@media(max-width:900px){.countdown-banner .cd{margin-left:0}.countdown-banner{flex-wrap:wrap}}

/* ------------------------------------------------------------ home: game teaser */
.teaser{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(20px,4vw,50px);padding:clamp(22px,3vw,36px);border:1px solid var(--line);background:linear-gradient(110deg,color-mix(in srgb,var(--mag) 9%,var(--bg2)),var(--bg2) 55%);transition:border-color .3s}
.teaser:hover{border-color:var(--mag)}
.teaser-art{display:flex;padding-right:36px}
.teaser-art img{width:clamp(70px,8vw,110px);aspect-ratio:1;object-fit:cover;margin-right:-36px;box-shadow:-10px 10px 30px rgba(0,0,0,.6);transition:transform .5s var(--out)}
.teaser-art img:nth-child(1){transform:rotate(-8deg)}.teaser-art img:nth-child(2){transform:rotate(-2deg) translateY(-6px)}.teaser-art img:nth-child(3){transform:rotate(4deg)}.teaser-art img:nth-child(4){transform:rotate(10deg) translateY(4px)}
.teaser:hover .teaser-art img:nth-child(1){transform:rotate(-14deg) translateX(-10px)}.teaser:hover .teaser-art img:nth-child(4){transform:rotate(16deg) translateX(10px)}
.teaser-copy{display:flex;flex-direction:column;gap:6px}
.teaser-h{font-size:clamp(28px,3.4vw,50px);font-weight:600;letter-spacing:-.02em;line-height:1}
@media(max-width:760px){.teaser{grid-template-columns:1fr}.teaser .btn{justify-self:start}}

/* ------------------------------------------------------------ merch */
.ptiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(30px,4vw,52px) clamp(18px,2.4vw,30px);margin-top:clamp(30px,4vw,50px)}
.ptile{display:flex;flex-direction:column;gap:11px}
.ptile-art{position:relative;overflow:hidden;box-shadow:0 24px 50px -20px #000}
.ptile-art img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform .7s var(--out),opacity .4s var(--ease)}
.ptile-art img:last-child{position:absolute;inset:0;opacity:0}
.ptile:hover .ptile-art img:first-child{transform:scale(1.05)}
.ptile:hover .ptile-art img:last-child{opacity:1}
.ptile-info{display:flex;flex-direction:column;gap:4px}
.ptile-info h3{margin:0;font-size:clamp(15px,1.3vw,18px);font-weight:600;line-height:1.3;letter-spacing:-.005em;transition:color .25s}
.ptile:hover .ptile-info h3{color:var(--mag)}
.ptile-price{font-size:15px}
.ptile-note{color:var(--dim)}
.ptile-colors{font-size:13px;color:var(--silver);line-height:1.55}
.ptile-spec{color:var(--dim)}
@media(min-width:960px){.ptiles{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* merch product page — one colour preview; Buy checks out on Fourthwall */
.mprod{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,64px);margin-top:clamp(24px,3vw,40px);align-items:start}
.mprod-gal{display:flex;flex-direction:column;gap:12px}
.mprod-main{position:relative;overflow:hidden;box-shadow:0 24px 50px -20px #000}
.mprod-main img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.mprod-thumbs{display:flex;gap:10px;flex-wrap:wrap}
.mprod-thumbs button{width:clamp(56px,6vw,76px);padding:0;overflow:hidden;border:1px solid var(--line);opacity:.55;transition:opacity .25s,border-color .25s}
.mprod-thumbs button img{width:100%;aspect-ratio:3/4;object-fit:cover}
.mprod-thumbs button:hover{opacity:.9}
.mprod-thumbs button[aria-pressed=true]{opacity:1;border-color:var(--mag)}
.mprod-info{display:flex;flex-direction:column;gap:14px;position:sticky;top:90px}
.mprod-info h2{margin:0;font-size:clamp(24px,2.4vw,34px);font-weight:600;line-height:1.1;letter-spacing:-.01em}
.mprod-price{font-size:clamp(20px,2vw,24px);font-weight:600}
.mprod-sel{color:var(--dim)}
.mprod-opt{display:flex;flex-direction:column;gap:8px}
.mprod-opt b{color:var(--text);font-weight:600}
.mprod-btns{display:flex;flex-wrap:wrap;gap:8px}
.mprod-btns button{padding:10px 16px;border:1px solid var(--line2);color:var(--silver);font-size:14px;transition:background .2s,color .2s,border-color .2s}
.mprod-btns button:hover{border-color:var(--text);color:var(--text)}
.mprod-btns button[aria-pressed=true]{background:var(--text);color:#000;border-color:var(--text)}
.mprod-btns.swatches{gap:10px}
.mprod-btns .sw{display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px;align-items:center;padding:6px 14px 6px 6px;text-align:left}
.mprod-btns .sw img{width:52px;aspect-ratio:3/4;object-fit:cover;display:block}
.mprod-btns .sw span{white-space:nowrap}
.mprod-buyrow{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.mprod-shop{color:var(--silver)}
.mprod-shop:hover{color:var(--mag)}
/* size guide — full measurements, inches with cm underneath */
.sizeguide h2{margin:0 0 16px;font-size:clamp(22px,2.2vw,30px);font-weight:600;letter-spacing:-.01em}
.sizeguide-wrap{overflow-x:auto;border:1px solid var(--line)}
.sizeguide table{width:100%;border-collapse:collapse;min-width:520px;font-size:14px}
.sizeguide thead th{font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);white-space:nowrap}
.sizeguide tbody th[scope=row]{text-align:left;padding:12px 16px;font-weight:600;white-space:nowrap}
.sizeguide tbody td{padding:10px 16px;border-top:1px solid var(--line)}
.sizeguide tbody td b{display:block;font-weight:600;white-space:nowrap}
.sizeguide tbody td span{display:block;font-size:12px;color:var(--dim);white-space:nowrap}
.sizeguide tbody tr:hover td,.sizeguide tbody tr:hover th{background:var(--bg2)}
.sizeguide-how{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--silver)}
.sizeguide .lab.dim{margin:12px 0 0}
.mprod-details{list-style:none;margin:8px 0 0;padding:14px 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:7px;font-size:14px;color:var(--silver)}
@media(max-width:900px){.mprod{grid-template-columns:1fr}.mprod-info{position:static}}

/* ------------------------------------------------------------ the game */
.game{position:relative;min-height:520px;padding:clamp(24px,4vw,56px);border:1px solid var(--line);background:var(--bg2);overflow:hidden}
.g-screen[hidden]{display:none}
.g-start{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(30px,6vw,90px);align-items:center;min-height:420px}
.g-stack{position:relative;width:clamp(170px,22vw,260px);aspect-ratio:1}
.g-stack img{position:absolute;inset:0;width:100%;aspect-ratio:1;object-fit:cover;box-shadow:0 30px 60px -20px #000;animation:shuffle 6s var(--ease) infinite}
.g-stack img:nth-child(1){--r:-10deg;animation-delay:0s}.g-stack img:nth-child(2){--r:-3deg;animation-delay:-1.5s}.g-stack img:nth-child(3){--r:5deg;animation-delay:-3s}.g-stack img:nth-child(4){--r:11deg;animation-delay:-4.5s}
@keyframes shuffle{0%,100%{transform:rotate(var(--r))}12%{transform:rotate(var(--r)) translateY(-14px)}24%{transform:rotate(var(--r))}}
.g-go{font-size:13px;padding:20px 34px}
.g-best{margin:18px 0 6px}
.g-small{margin:0;color:var(--dim);max-width:40ch}
.g-top{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--dim)}
.g-top b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.g-streak{color:var(--mag)}
.g-timer{height:2px;margin:16px 0 30px;background:var(--line)}
.g-timer i{display:block;height:100%;background:var(--mag);transform-origin:left;transform:scaleX(var(--t,1))}
.g-mid{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(24px,5vw,70px);align-items:center}
.g-mystery{perspective:1200px}
.g-card{position:relative;aspect-ratio:1;transform-style:preserve-3d;transition:transform .8s var(--out)}
.g-card.flip{transform:rotateY(180deg)}
.g-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.g-front{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:linear-gradient(135deg,#1c1c20,#0e0e10);box-shadow:inset 0 0 0 1px var(--line2),0 30px 60px -20px #000}
.g-front b{font-size:110px;font-weight:600;line-height:.8;color:var(--mute)}
.g-front .eq{height:28px;gap:4px;color:var(--mag)}
.g-front .eq i{width:5px}
.g-back{transform:rotateY(180deg)}
.g-back img{width:100%;height:100%;object-fit:cover;box-shadow:0 30px 60px -20px #000}
.g-opts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.g-opt{display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;align-items:center;padding:10px;border:1px solid var(--line2);text-align:left;cursor:pointer;transition:border-color .2s,background .2s,transform .2s,opacity .3s}
.g-opt:hover:not(:disabled){border-color:var(--text);transform:translateY(-2px)}
.g-opt img{width:64px;height:64px;object-fit:cover}
.g-opt b{display:block;font-size:15px;font-weight:600;line-height:1.25}
.g-opt small{display:block;margin-top:3px;font-size:11px;color:var(--dim)}
.g-opt:disabled{cursor:default}
.g-opt.right{border-color:var(--mag);background:color-mix(in srgb,var(--mag) 16%,transparent)}
.g-opt.wrong{animation:shake .4s}
.g-opt.dim{opacity:.35}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.g-foot{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:60px;margin-top:26px}
.g-msg{margin:0;font-size:18px;font-weight:600}
.g-msg .pts{color:var(--mag)}
.g-pop{position:absolute;pointer-events:none;font-size:34px;font-weight:600;color:var(--mag);animation:popUp 1s var(--out) forwards}
@keyframes popUp{from{opacity:0;transform:translateY(10px) scale(.7)}25%{opacity:1;transform:translateY(-10px) scale(1.1)}to{opacity:0;transform:translateY(-60px) scale(1)}}
.g-end{text-align:center;padding:20px 0}
.g-final{font-size:clamp(90px,16vw,200px);font-weight:600;letter-spacing:-.05em;line-height:.9;font-variant-numeric:tabular-nums}
.g-rank{margin:12px 0 6px;font-size:clamp(24px,3vw,40px);font-weight:600;color:var(--mag)}
.g-recap{max-width:640px;margin:44px auto 0;text-align:left}
/* newsletter ask under the final score — the moment someone's most into the music */
.g-ml{max-width:520px;margin:40px auto 0;padding:26px 28px 24px;border:1px solid var(--line);text-align:left}
.g-ml-h{margin:0 0 10px;font-size:18px;font-weight:600;line-height:1.3}
.g-ml .ml-ok{margin:14px 0 0}
@media(max-width:760px){.g-start{grid-template-columns:1fr;justify-items:start}.g-mid{grid-template-columns:1fr}.g-mystery{max-width:220px}.g-opts{grid-template-columns:1fr}}

/* ------------------------------------------------------------ release-week intro (home; make.py drop_intro)
   The sleeve lands, the record slides out and spins, the sticker slaps on, the title rolls up. Hidden unless the
   inline head script sets html.drop-on; if site.js never runs, the failsafe fades it out on its own. */
.drop{position:fixed;inset:0;z-index:100;display:none;place-items:center;overflow:hidden;
  background:radial-gradient(circle at 38% 46%,color-mix(in srgb,var(--glow) 20%,transparent),transparent 58%),var(--bg);
  animation:dropGone .6s ease 9s forwards}
html.drop-on .drop{display:grid}
@keyframes dropGone{to{opacity:0;visibility:hidden}}
.drop-in{display:grid;grid-template-columns:auto minmax(0,auto);align-items:center;gap:clamp(60px,8vw,130px);padding:var(--pad);max-width:100%}
.drop-stage{position:relative;width:min(50vh,420px,62vw);aspect-ratio:1;margin-right:clamp(0px,9vw,150px)}
.drop-sleeve{position:relative;z-index:2;--stick-d:1.5s;animation:dropSleeve 1.1s var(--out) .15s both}
.drop-sleeve img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:2px;box-shadow:40px 60px 90px -20px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.1)}
@keyframes dropSleeve{from{opacity:0;transform:translateY(60px) scale(.9) rotate(-3deg)}}
/* the record: grooves, a sheen that stays put while the disc turns, the cover as its centre label */
.drop-rec{position:absolute;inset:3%;z-index:1;animation:dropOut 1s var(--out) .9s both}
.drop-rec::after{content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 20deg,transparent,rgba(255,255,255,.1) 8%,transparent 18%,transparent 50%,rgba(255,255,255,.07) 58%,transparent 68%)}
/* the record stays hidden behind the sleeve until the sleeve has landed — the sleeve fades in, so an
   already-visible record showed through on its own for the first half second */
@keyframes dropOut{from{opacity:0;transform:translateX(0)}6%{opacity:1}to{transform:translateX(46%)}}
.disc{position:absolute;inset:0;border-radius:50%;box-shadow:0 30px 60px -10px rgba(0,0,0,.9);
  background:radial-gradient(circle,transparent 30%,rgba(0,0,0,.5) 31%,transparent 33%),repeating-radial-gradient(circle,#101012 0 1px,#18181b 1.5px 3px);
  animation:spin 1.8s linear infinite}
.disc b{position:absolute;inset:33%;border-radius:50%;background:center/cover}
.disc b::after{content:'';position:absolute;inset:46%;border-radius:50%;background:var(--bg)}
@keyframes spin{to{transform:rotate(1turn)}}
.drop-k{animation:dropUp .7s var(--ease) 1.05s both}
.drop-t{margin:18px 0 16px;font-size:clamp(44px,7vw,104px);font-weight:700;line-height:.95;letter-spacing:-.02em;display:flex;flex-wrap:wrap;column-gap:.26em}
/* at this size a masked roll shows the mask's hard edge slicing the letters, so each letter rises out of a blur instead */
.drop-t .w{display:inline-flex}
.drop-t .ch{display:inline-block;animation:dropCh .8s var(--ease) calc(1.15s + var(--i) * 34ms) both}
@keyframes dropCh{from{opacity:0;transform:translateY(.28em);filter:blur(10px)}}
.drop-d{animation:dropUp .7s var(--ease) 1.5s both}
.drop-acts{display:flex;flex-wrap:wrap;align-items:center;gap:26px;margin-top:38px;animation:dropUp .7s var(--ease) 1.75s both}
.drop-acts .btn{font:inherit;letter-spacing:inherit;text-transform:inherit;border:0;cursor:pointer}
.drop-acts .act{color:var(--text);cursor:pointer}
.drop-acts .act:hover .ar{transform:translateX(4px)}
@keyframes dropUp{from{opacity:0;transform:translateY(14px)}}
/* leaving: the record slides home, then the whole thing lifts away to the crate underneath */
html.drop-off .drop{animation:dropLeave .55s cubic-bezier(.55,0,.8,.2) .12s forwards}
html.drop-off .drop-rec{transition:transform .3s var(--ease);transform:translateX(0);animation:none}
@keyframes dropLeave{to{opacity:0;transform:scale(1.04)}}
@media(max-width:760px){
  .drop-in{grid-template-columns:1fr;justify-items:center;text-align:center;gap:30px}
  .drop-stage{width:min(40vh,58vw);margin-right:26vw}
  .drop-t{justify-content:center;margin:12px 0 10px}
  .drop-acts{justify-content:center;margin-top:24px}
}
@media(prefers-reduced-motion:reduce){
  .drop *,.drop *::after{animation:none!important}
  .drop-rec{transform:translateX(46%)}
}