/* =============================================================================
   PRXD.JAY — PERMANENT FRAMEWORK STYLES
   Era colors live in theme.css. Nothing hardcoded here.
   Mobile-first. Every breakpoint is min-width.

   DESIGN LAWS FOR THIS SITE:
   · No cards. No boxes. No rounded surfaces. Lists, rules, and stickers only.
   · Everything sits slightly off-grid. Nothing is perfectly square to the page.
   · Mono for machine text (labels, nav, metadata). Serif for human text.
   ========================================================================== */

/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body,h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl,dd{margin:0}
ul[class],ol[class]{list-style:none;padding:0}
img,video,svg,iframe{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;padding:0}
a{color:inherit;text-decoration:none}

/* ---------- PAGE ---------- */
html,body{background:var(--ink)}
body{
  font-family:var(--font-body);
  color:var(--bone);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}

.skip{position:absolute;left:-9999px;top:0;z-index:200;padding:14px 20px;background:var(--bone);color:var(--ink);font-family:var(--font-mono);font-size:.8rem}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--bone);outline-offset:3px}

/* ---------- LAYOUT ---------- */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-y);position:relative;z-index:1}

/* Torn tape strip between sections instead of a hairline */
.section + .section::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:repeating-linear-gradient(90deg,
    var(--line) 0 14px, transparent 14px 19px,
    var(--line) 19px 41px, transparent 41px 44px);
  opacity:.9;
}

/* ---------- TYPE ---------- */
/* Anton — the face off his own video title cards. It ships a single weight
   and no italic, so asking for either gets a synthesised fake. Pin both:
   the weight comes from the letterforms, not from a bold axis. */
.display{
  font-family:var(--font-display);
  font-weight:400;font-style:normal;
  line-height:.94;letter-spacing:var(--tracking-display);
}
.h-sec{font-size:clamp(2.2rem,15vw,5rem)}
.eyebrow{
  font-family:var(--font-mono);font-size:.62rem;
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--bone-faint);font-weight:400;
}
.caption{font-family:var(--font-mono);color:var(--bone-dim);font-size:.76rem;line-height:1.6;max-width:46ch;letter-spacing:.02em}
.mono{font-family:var(--font-mono)}

.sec-head{margin-bottom:40px;position:relative}
.sec-head .eyebrow{display:block;margin-bottom:14px}
.sec-head .caption{margin-top:14px}
.sec-head .display{transform:rotate(var(--tilt));transform-origin:0 50%}

/* Chrome class kept for compatibility — now a flat bone fill, no metal */
.chrome{color:var(--bone);-webkit-text-fill-color:currentColor;background:none}

/* VHS chroma split on the big wordmark */
.vhs{position:relative;display:inline-block}
html[data-shimmer="on"] .vhs{
  text-shadow:
    -.018em 0 0 rgba(255,59,48,.42),
     .018em 0 0 rgba(95,208,216,.38);
  animation:vhsdrift 5.5s steps(9) infinite;
}
@keyframes vhsdrift{
  0%,88%,100%{text-shadow:-.018em 0 0 rgba(255,59,48,.42), .018em 0 0 rgba(95,208,216,.38)}
  90%{text-shadow:-.06em 0 0 rgba(255,59,48,.6), .05em 0 0 rgba(95,208,216,.5);transform:translateX(1px)}
  94%{text-shadow:.04em 0 0 rgba(255,59,48,.5), -.04em 0 0 rgba(95,208,216,.45);transform:translateX(-1px)}
}

/* Handwritten margin scrawl */
.scrawl{
  font-family:var(--font-hand);font-size:1.35rem;line-height:1.2;
  color:var(--mark);transform:rotate(-4deg);display:inline-block;
}

/* Inverted tape-label sticker */
.sticker{
  display:inline-block;background:var(--sticker-bg);color:var(--sticker-fg);
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.18em;
  text-transform:uppercase;padding:5px 11px 4px;
  transform:rotate(-1.4deg);
}

/* ---------- TEXTURE LAYERS ---------- */
.grain{
  position:fixed;inset:-50%;z-index:60;pointer-events:none;
  opacity:var(--grain-opacity);mix-blend-mode:screen;
  background-image:var(--grain-url);background-size:200px 200px;
}
html[data-grain="off"] .grain{display:none}
html[data-motion="on"] .grain{animation:grainshift .9s steps(3) infinite}
@keyframes grainshift{
  0%{transform:translate(0,0)}33%{transform:translate(-2%,1%)}
  66%{transform:translate(1%,-2%)}100%{transform:translate(0,0)}
}

/* Scanlines + vignette + hiss flicker */
.ambient{
  position:fixed;inset:0;z-index:61;pointer-events:none;
  background:
    var(--vignette),
    repeating-linear-gradient(180deg,
      rgba(0,0,0,var(--scanline-op)) 0 1px,
      transparent 1px var(--scanline-gap));
}
html[data-glow="off"] .ambient{background:var(--vignette)}
html[data-motion="on"] .ambient::after{
  content:"";position:absolute;inset:0;background:var(--bone);
  opacity:0;animation:hiss 7s steps(1) infinite;
}
@keyframes hiss{
  0%,96%,100%{opacity:0}
  97%{opacity:var(--flicker-op)}
  98%{opacity:0}
  99%{opacity:calc(var(--flicker-op) * .6)}
}

/* ---------- INTRO CURTAIN ---------- */
.curtain{position:fixed;inset:0;z-index:120;background:var(--ink);display:grid;place-items:center;text-align:center;padding:var(--gutter)}
.curtain[hidden]{display:none}
.curtain.is-out{animation:curtainOut .7s steps(6) forwards}
@keyframes curtainOut{
  0%{opacity:1}40%{opacity:.6;filter:contrast(2.4) brightness(1.6)}
  70%{opacity:.25}100%{opacity:0;visibility:hidden}
}
.curtain__inner{position:relative;z-index:2;max-width:820px}
.curtain__mark{font-size:clamp(3.6rem,20vw,9rem);margin-bottom:18px}
.curtain__say{font-family:var(--font-mono);font-size:clamp(.72rem,2vw,.9rem);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--bone-faint);margin-bottom:48px}
.curtain__btn{
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  min-height:48px;padding:0 6px;color:var(--bone);
  border-bottom:1px solid var(--bone-faint);transition:border-color var(--dur) var(--ease),letter-spacing var(--dur) var(--ease);
}
.curtain__btn::before{content:"\25B8  "}
.curtain__btn:hover,.curtain__btn:focus-visible{border-color:var(--bone);letter-spacing:.3em}

/* ---------- HEADER / NAV ---------- */
.hdr{
  position:fixed;inset:0 0 auto;z-index:80;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px var(--gutter);
  font-family:var(--font-mono);
  transition:background var(--dur) var(--ease);
}
.hdr.is-stuck{background:linear-gradient(180deg,rgba(var(--ink-rgb),.94),rgba(var(--ink-rgb),0))}
.hdr__mark{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase}
.hdr__era{display:none;font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-faint)}
.menu-btn{
  display:inline-flex;align-items:center;gap:10px;min-height:44px;
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
}
.menu-btn__bars{display:grid;gap:3px;width:16px}
.menu-btn__bars i{display:block;height:1px;background:currentColor;transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease)}
.menu-btn[aria-expanded="true"] .menu-btn__bars i:nth-child(1){transform:translateY(4px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .menu-btn__bars i:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] .menu-btn__bars i:nth-child(3){transform:translateY(-4px) rotate(-45deg)}

.nav{
  position:fixed;inset:0;z-index:79;background:var(--ink);
  display:flex;flex-direction:column;justify-content:center;
  padding:100px var(--gutter) calc(var(--gutter) + env(safe-area-inset-bottom));
  opacity:0;visibility:hidden;transition:opacity var(--dur) var(--ease),visibility var(--dur);
}
.nav.is-open{opacity:1;visibility:visible}
.nav__list{display:flex;flex-direction:column}
.nav__link{
  display:flex;align-items:baseline;gap:16px;padding-block:9px;
  border-bottom:1px solid var(--line);
  font-family:var(--font-display);font-style:normal;font-weight:400;
  font-size:clamp(1.9rem,9vw,2.9rem);line-height:1.06;
  color:var(--bone-dim);transition:color var(--dur-fast) var(--ease),padding-left var(--dur-fast) var(--ease);
}
.nav__link:hover,.nav__link:focus-visible,.nav__link[aria-current="true"]{color:var(--bone);padding-left:12px}
.nav__link span{font-family:var(--font-mono);font-style:normal;font-size:.56rem;letter-spacing:.14em;color:var(--bone-faint)}
.nav__foot{margin-top:34px;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-faint)}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:100svh;min-height:100dvh;display:grid;align-items:end;overflow:hidden;padding:0 var(--gutter) calc(48px + env(safe-area-inset-bottom))}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media img,.hero__media video{
  width:100%;height:100%;object-fit:cover;object-position:var(--focal,50% 35%);
  filter:grayscale(.55) contrast(1.16) brightness(.72);
}
.hero__media::after{content:"";position:absolute;inset:0;background:var(--scrim)}
.hero__media.is-empty{background:linear-gradient(180deg,var(--ink-3),var(--ink))}
.hero__inner{position:relative;z-index:2;width:100%;max-width:var(--max);margin-inline:auto}
.hero__kicker{display:block;margin-bottom:18px}
.hero__name{font-size:clamp(2.6rem,17vw,8.5rem);margin-bottom:16px;transform:rotate(var(--tilt));transform-origin:0 50%}
.hero__say{font-family:var(--font-mono);font-size:.66rem;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--bone-dim);margin-bottom:32px}
.hero__cta{display:flex;flex-wrap:wrap;gap:22px;align-items:center}
.hero__scroll{display:none;position:absolute;right:var(--gutter);bottom:48px;z-index:2;writing-mode:vertical-rl;font-family:var(--font-mono);font-size:.54rem;letter-spacing:.28em;text-transform:uppercase;color:var(--bone-faint)}
.hero__scroll::after{content:"";display:block;width:1px;height:46px;margin:12px auto 0;background:linear-gradient(var(--bone-faint),transparent)}

/* ---------- BUTTONS — underlined mono, no pills ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;min-height:48px;
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  border-bottom:1px solid var(--bone-faint);
  transition:border-color var(--dur-fast) var(--ease),letter-spacing var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.btn::after{content:"\2192";transition:transform var(--dur-fast) var(--ease)}
.btn:hover,.btn:focus-visible{border-color:var(--bone);letter-spacing:.26em}
.btn:hover::after,.btn:focus-visible::after{transform:translateX(5px)}
.btn--solid{background:var(--sticker-bg);color:var(--sticker-fg);border:0;padding:0 16px;transform:rotate(-1deg)}
.btn--solid:hover,.btn--solid:focus-visible{transform:rotate(0deg);letter-spacing:.24em}

/* ---------- LINK HUB — J-card tracklist index, no cards ---------- */
.hub{display:block;border-top:1px solid var(--line)}
.hub__item{
  position:relative;display:flex;align-items:baseline;gap:14px;
  min-height:60px;padding:16px 2px;
  border-bottom:1px solid var(--line);
  font-family:var(--font-mono);
  transition:padding-left var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.hub__item:hover,.hub__item:focus-visible{padding-left:12px}
.hub__num{flex:0 0 auto;font-size:.62rem;letter-spacing:.1em;color:var(--bone-faint)}
.hub__ico{display:none}
.hub__txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;overflow:hidden}
.hub__txt .hub__dots{display:none}
.hub__label{font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.hub__dots{flex:1;min-width:14px;height:1px;align-self:center;background:repeating-linear-gradient(90deg,var(--line) 0 2px,transparent 2px 6px)}
.hub__note{font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--bone-faint);white-space:nowrap}
.hub__arrow{flex:0 0 auto;color:var(--bone-faint);transition:transform var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.hub__item:hover .hub__arrow,.hub__item:focus-visible .hub__arrow{transform:translateX(5px);color:var(--bone)}

/* Featured link = inverted sticker row */
.hub__item--primary{
  background:var(--sticker-bg);color:var(--sticker-fg);
  padding:22px 16px;margin-bottom:14px;border-bottom:0;
  transform:rotate(-.7deg);align-items:center;
}
.hub__item--primary:hover,.hub__item--primary:focus-visible{transform:rotate(0deg);padding-left:16px}
.hub__item--primary .hub__num,.hub__item--primary .hub__arrow{color:var(--sticker-fg);opacity:.65}
.hub__item--primary .hub__label{font-family:var(--font-display);font-style:normal;font-weight:400;font-size:1.5rem;letter-spacing:-.01em;text-transform:none}
.hub__item--primary .hub__note{display:inline;color:var(--sticker-fg);opacity:.6}
.hub__item--primary .hub__dots{background:repeating-linear-gradient(90deg,rgba(0,0,0,.28) 0 2px,transparent 2px 6px)}
.hub__pulse{display:none}

/* ---------- BIO ---------- */
.bio__grid{display:grid;gap:38px}
.bio__portrait{position:relative;overflow:visible;aspect-ratio:4/5;background:var(--ink-3);transform:rotate(1.1deg);border:1px solid var(--line)}
.bio__portrait img{width:100%;height:100%;object-fit:cover;filter:grayscale(.35) contrast(1.08) brightness(1.02)}
/* tape strips at the corners */
.bio__portrait::before,.bio__portrait::after{
  content:"";position:absolute;width:76px;height:22px;background:var(--tape);
  border-left:1px solid var(--tape-edge);border-right:1px solid var(--tape-edge);
}
.bio__portrait::before{top:-11px;left:-16px;transform:rotate(-24deg)}
.bio__portrait::after{bottom:-11px;right:-16px;transform:rotate(-24deg)}

.bio__quote{
  font-family:var(--font-display);font-style:normal;font-weight:400;
  font-size:clamp(1.5rem,6.4vw,2.15rem);line-height:1.22;
  color:var(--bone);margin-bottom:30px;text-indent:-.4em;
}
.bio__quote::before{content:"\201C"}
.bio__quote::after{content:"\201D"}
.bio__body p{color:var(--bone-dim);margin-bottom:17px;max-width:var(--max-text)}
.bio__body p:first-child{color:var(--bone)}

.bio__stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));margin-top:38px;border-top:1px solid var(--line)}
.bio__stat{padding:18px 0;border-bottom:1px solid var(--line)}
.bio__stat b{display:block;font-family:var(--font-display);font-style:normal;font-weight:400;font-size:1.9rem;line-height:1;margin-bottom:8px}
.bio__stat span{font-family:var(--font-mono);font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-faint)}
.bio__facts{margin-top:26px;display:grid;gap:0}
.bio__fact{display:flex;flex-wrap:wrap;gap:4px 14px;font-family:var(--font-mono);font-size:.68rem;padding-block:10px;border-bottom:1px solid var(--line)}
.bio__fact dt{color:var(--bone-faint);letter-spacing:.16em;text-transform:uppercase;font-size:.56rem;min-width:104px;padding-top:3px}
.bio__fact dd{color:var(--bone-dim);flex:1}

/* ---------- GALLERY — taped-down prints, scattered ---------- */
.gal{display:grid;grid-template-columns:repeat(2,1fr);gap:26px 18px}
.gal__cell{
  position:relative;aspect-ratio:var(--gal-ratio,3/4);overflow:visible;background:var(--ink-3);
  border:1px solid var(--line);
}
.gal__cell:nth-child(4n+1){transform:rotate(-1.6deg)}
.gal__cell:nth-child(4n+2){transform:rotate(1.2deg);margin-top:16px}
.gal__cell:nth-child(4n+3){transform:rotate(.8deg)}
.gal__cell:nth-child(4n+4){transform:rotate(-1.1deg);margin-top:10px}

.gal__cell::before{
  content:"";position:absolute;top:-9px;left:50%;margin-left:-30px;
  width:60px;height:19px;background:var(--tape);
  border-left:1px solid var(--tape-edge);border-right:1px solid var(--tape-edge);
  transform:rotate(-2.5deg);z-index:2;
}
.gal__cell img{width:100%;height:100%;object-fit:cover;filter:grayscale(.3) contrast(1.06) brightness(1.02);transition:filter var(--dur) var(--ease)}
.gal__cell:hover img,.gal__cell:focus-within img{filter:grayscale(0) contrast(1.05) brightness(1)}
.gal__ph{
  position:absolute;inset:0;display:grid;place-content:center;gap:7px;text-align:center;padding:14px;
  background:repeating-linear-gradient(45deg,rgba(237,230,214,.02) 0 8px,transparent 8px 16px);
}
.gal__ph b{font-family:var(--font-mono);font-size:.54rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-faint)}
.gal__ph span{font-family:var(--font-mono);font-size:.52rem;color:var(--bone-faint);opacity:.6}

/* Lightbox */
.lbx{position:fixed;inset:0;z-index:130;display:grid;place-items:center;background:rgba(var(--ink-rgb),.97);padding:calc(var(--gutter) + 46px) var(--gutter);opacity:0;visibility:hidden;transition:opacity var(--dur) var(--ease),visibility var(--dur)}
.lbx.is-open{opacity:1;visibility:visible}
.lbx img{max-width:100%;max-height:82vh;object-fit:contain}
.lbx__close,.lbx__nav{width:48px;height:48px;display:grid;place-items:center;font-family:var(--font-mono);color:var(--bone);position:absolute}
.lbx__close{top:14px;right:14px}
.lbx__nav{top:50%;transform:translateY(-50%)}
.lbx__nav--prev{left:8px}
.lbx__nav--next{right:8px}

/* ---------- VIDEO — VHS label under a still. Click to play only. ---------- */
.vids{display:grid;gap:32px}
.vid{position:relative;aspect-ratio:16/9;width:100%;overflow:hidden;border:1px solid var(--line);background:var(--ink-3);transform:rotate(-.5deg)}
.vid img{width:100%;height:100%;object-fit:cover;filter:grayscale(.35) contrast(1.08) brightness(.9);transition:filter var(--dur) var(--ease)}
.vid:hover img{filter:grayscale(.15) brightness(.9)}
.vid__btn{position:absolute;inset:0;display:grid;place-items:center;width:100%;height:100%}
.vid__play{
  position:relative;z-index:2;width:0;height:0;
  border-left:26px solid var(--bone);
  border-top:16px solid transparent;border-bottom:16px solid transparent;
  transition:transform var(--dur-fast) var(--ease),opacity var(--dur-fast) var(--ease);
}
.vid__play svg{display:none}
.vid__btn:hover .vid__play,.vid__btn:focus-visible .vid__play{transform:scale(1.16)}
.vid__meta{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:11px 14px;background:linear-gradient(180deg,transparent,rgba(var(--ink-rgb),.92));
  pointer-events:none;font-family:var(--font-mono);
}
.vid__title{display:block;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase}
.vid__note{display:block;font-size:.56rem;letter-spacing:.1em;color:var(--bone-faint);margin-top:3px}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid--ph .vid__btn{cursor:default}
.vid--ph .vid__play{opacity:.28}
.vid__phbg{position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(237,230,214,.02) 0 9px,transparent 9px 18px)}

/* ---------- MUSIC — taped cover + tracklist, no cards ---------- */
.feat{display:grid;gap:32px;margin-bottom:56px}
.feat__art{position:relative;aspect-ratio:1/1;overflow:visible;background:var(--ink-3);border:1px solid var(--line);transform:rotate(-1.5deg)}
.feat__art img{width:100%;height:100%;object-fit:cover;filter:contrast(1.06) brightness(.95)}
.feat__art::before{
  content:"";position:absolute;top:-10px;left:-18px;width:82px;height:22px;
  background:var(--tape);border-left:1px solid var(--tape-edge);border-right:1px solid var(--tape-edge);
  transform:rotate(-27deg);z-index:2;
}
.feat__body{display:flex;flex-direction:column;justify-content:center}
.feat__title{font-size:clamp(2.3rem,11vw,3.6rem);margin:12px 0 12px}
.feat__meta{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-faint)}
.feat__blurb{color:var(--bone-dim);margin:0 0 26px;max-width:42ch}
.embed{overflow:hidden;background:var(--ink-3);border:1px solid var(--line);margin-top:26px}
.embed iframe{border:0;width:100%;display:block}

/* Release list = numbered tracklist */
.rel{display:block;border-top:1px solid var(--line)}
.rel__item{
  display:flex;align-items:baseline;gap:12px;padding:14px 2px;
  border-bottom:1px solid var(--line);font-family:var(--font-mono);
  transition:padding-left var(--dur-fast) var(--ease);
}
.rel__item:hover,.rel__item:focus-visible{padding-left:12px}
.rel__num{font-size:.6rem;color:var(--bone-faint);flex:0 0 auto}
.rel__art{flex:0 0 30px;width:30px;height:30px;object-fit:cover;align-self:center;border:1px solid var(--line);filter:grayscale(.35) brightness(.92);transition:filter var(--dur-fast) var(--ease)}
.rel__item:hover .rel__art,.rel__item:focus-visible .rel__art{filter:grayscale(0) brightness(1)}
.rel__title{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rel__dots{flex:1;min-width:14px;height:1px;align-self:center;background:repeating-linear-gradient(90deg,var(--line) 0 2px,transparent 2px 6px)}
.rel__meta{font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-faint);flex:0 0 auto}

/* ---------- EARLY ACCESS — underline fields, no boxes ---------- */
.list__box{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:34px 0;position:relative}
.form{display:grid;gap:22px;max-width:520px}
.field{display:grid;gap:6px}
.field label{font-family:var(--font-mono);font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-faint)}
.field input{
  width:100%;min-height:44px;padding:0 0 6px;
  background:transparent;border:0;border-bottom:1px solid var(--line);
  color:var(--bone);font-family:var(--font-mono);font-size:16px;letter-spacing:.04em;
  transition:border-color var(--dur-fast) var(--ease);
}
.field input::placeholder{color:var(--bone-faint);opacity:.7}
.field input:focus{border-bottom-color:var(--bone);outline:none}
.field input:user-invalid{border-bottom-color:var(--mark)}
.consent{display:flex;gap:12px;align-items:flex-start;font-family:var(--font-mono);font-size:.66rem;line-height:1.5;color:var(--bone-dim);padding-block:2px}
.consent input{flex:0 0 18px;width:18px;height:18px;margin-top:2px;accent-color:var(--bone);border-radius:0}
.form__msg{font-family:var(--font-mono);font-size:.68rem;min-height:1.2em}
.form__msg[data-state="ok"]{color:var(--bone)}
.form__msg[data-state="err"]{color:var(--mark-hot)}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0;pointer-events:none}
.form button[disabled]{opacity:.5;cursor:not-allowed}
.form .btn{justify-self:start}

/* ---------- CONTACT ---------- */
.contact__mail{
  display:inline-block;font-family:var(--font-display);font-style:normal;font-weight:400;
  font-size:clamp(1.5rem,8vw,3rem);letter-spacing:-.02em;word-break:break-word;line-height:1.1;
  border-bottom:1px solid var(--line);padding-bottom:4px;
  transition:border-color var(--dur) var(--ease);
}
.contact__mail:hover,.contact__mail:focus-visible{border-color:var(--bone)}
.contact__alt{display:flex;flex-wrap:wrap;gap:22px;margin-top:34px}

/* ---------- FOOTER ---------- */
.ftr{border-top:1px solid var(--line);padding:56px var(--gutter) calc(42px + env(safe-area-inset-bottom));text-align:center;position:relative;z-index:1}
.ftr__mark{font-family:var(--font-display);font-style:normal;font-weight:400;font-size:clamp(2.2rem,16vw,7rem);line-height:.94;letter-spacing:-.03em}
.ftr__note{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-faint);margin-top:10px}
.ftr__legal{margin-top:32px;font-family:var(--font-mono);font-size:.54rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-faint);line-height:1.9}

/* ---------- SCROLL REVEAL ---------- */
html[data-motion="on"] .reveal{opacity:0;transform:translateY(16px)}
html[data-motion="on"] .reveal.is-in{opacity:1;transform:none;transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* =============================================================================
   BREAKPOINTS
   ========================================================================== */
@media (min-width:560px){
  .hub__txt{flex-direction:row;align-items:baseline;gap:10px}
  .hub__txt .hub__dots{display:block}
  .gal{grid-template-columns:repeat(3,1fr);gap:30px 22px}
}

@media (min-width:860px){
  :root{--gutter:44px}
  body{font-size:18px}
  .hdr{padding:22px var(--gutter)}
  .hdr__era{display:block}
  .hero__scroll{display:block}
  .nav{padding:120px 8vw}
  .bio__grid{grid-template-columns:.8fr 1.2fr;gap:60px;align-items:start}
  .bio__portrait{position:sticky;top:120px}
  .feat{grid-template-columns:.85fr 1.15fr;gap:52px;align-items:center}
  .vids{grid-template-columns:repeat(2,1fr);gap:38px}
  .vids > :first-child{grid-column:1 / -1}
  .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px}
  .sec-head .caption{margin-top:0;text-align:right}
}

@media (min-width:1200px){ .h-sec{font-size:5.4rem} }

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .reveal{opacity:1 !important;transform:none !important}
}

/* ---------- PRINT (EPK one-pager) ---------- */
@media print{
  .hdr,.nav,.grain,.ambient,.curtain,.hero__scroll,.lbx{display:none !important}
  body{background:#fff;color:#000;font-size:11pt}
  .section{padding-block:18px}
  .section + .section::before{background:#000;opacity:.2}
  *{transform:none !important;filter:none !important}
  a::after{content:" (" attr(href) ")";font-size:.72em;color:#555}
}

/* =============================================================================
   REBOOT ADDITIONS — dock, door, prompt, bands, richer imagery
   ========================================================================== */

/* ---------- HERO SLIDESHOW (kills the dead-black screen) ---------- */
.hero__slides{position:absolute;inset:0;overflow:hidden}
.hero__slides img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:var(--focal,50% 32%);
  filter:grayscale(.42) contrast(1.14) brightness(.66);
  opacity:0;   /* crossfade timing lives in the CONVERSION LAYER below */
}
.hero__slides img.is-on{opacity:1}
html[data-motion="on"] .hero__slides img.is-on{animation:push 9s var(--ease) forwards}
@keyframes push{from{transform:scale(1.0)}to{transform:scale(1.10)}}

/* ---------- THE DOOR ---------- */
.curtain__media{position:absolute;inset:0;z-index:0;overflow:hidden}
.curtain__media img,.curtain__media video{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(.5) contrast(1.16) brightness(.42);
  opacity:0;transition:opacity 1.4s var(--ease);position:absolute;inset:0;
}
.curtain__media img.is-on,.curtain__media video{opacity:1}
.curtain__media::after{content:"";position:absolute;inset:0;background:radial-gradient(75% 60% at 50% 50%,rgba(var(--ink-rgb),.30),rgba(var(--ink-rgb),.86) 85%)}
.curtain__tag{
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--bone-dim);margin-bottom:26px;
}
.curtain__btn{
  border:1px solid var(--bone);padding:17px 38px;min-height:auto;font-size:.8rem;
  background:transparent;position:relative;overflow:hidden;
}
.curtain__btn span{position:relative;z-index:2;transition:color var(--dur) var(--ease)}
.curtain__btn::after{
  content:"";position:absolute;inset:0;background:var(--bone);
  transform:translateY(101%);transition:transform var(--dur) var(--ease-out);
}
.curtain__btn:hover::after,.curtain__btn:focus-visible::after{transform:translateY(0)}
.curtain__btn:hover span,.curtain__btn:focus-visible span{color:var(--ink)}
.curtain__meta{
  position:absolute;left:0;right:0;bottom:calc(28px + env(safe-area-inset-bottom));
  display:flex;justify-content:center;gap:26px;flex-wrap:wrap;z-index:2;
  font-family:var(--font-mono);font-size:.54rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--bone-faint);padding-inline:var(--gutter);
}

/* ---------- STICKY DOCK — the fast path ---------- */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:75;
  display:flex;align-items:stretch;justify-content:center;
  background:rgba(var(--ink-rgb),.90);
  backdrop-filter:blur(18px) saturate(130%);
  -webkit-backdrop-filter:blur(18px) saturate(130%);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
  transform:translateY(105%);transition:transform var(--dur) var(--ease-out);
}
.dock.is-up{transform:translateY(0)}
.dock__item{
  flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:5px;padding:11px 4px 12px;min-height:58px;
  color:var(--bone-dim);
  transition:color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease);
}
.dock__item:hover,.dock__item:focus-visible{color:var(--bone);background:rgba(237,230,214,.07)}
.dock__item svg{width:19px;height:19px}
.dock__item span{
  font-family:var(--font-mono);font-size:.46rem;letter-spacing:.14em;
  text-transform:uppercase;white-space:nowrap;
}
body:has(.dock.is-up) .ftr{padding-bottom:calc(80px + env(safe-area-inset-bottom))}

/* ---------- LINK HUB — destination-explicit ---------- */
.hub__cta{
  flex:0 0 auto;font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bone-faint);border-bottom:1px solid transparent;padding-bottom:1px;
  transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.hub__item:hover .hub__cta,.hub__item:focus-visible .hub__cta{color:var(--bone);border-color:var(--bone)}
.hub__ico{display:block;flex:0 0 17px;width:17px;height:17px;color:var(--bone-faint);align-self:center;transition:color var(--dur-fast) var(--ease)}
.hub__item:hover .hub__ico{color:var(--bone)}
.hub__art{
  flex:0 0 68px;width:68px;height:68px;object-fit:cover;align-self:center;
  border:1px solid rgba(0,0,0,.25);
}
.hub__item--primary{gap:16px}
.hub__item--primary .hub__cta{color:rgba(0,0,0,.6);font-size:.6rem}
.hub__item--primary:hover .hub__cta{color:var(--ink);border-color:var(--ink)}

/* ---------- FULL-BLEED IMAGE BANDS ---------- */
.band{position:relative;height:52vh;min-height:280px;overflow:hidden;z-index:1}
.band img{width:100%;height:100%;object-fit:cover;filter:grayscale(.3) contrast(1.08) brightness(.8);transition:filter var(--dur-slow) var(--ease)}
.band:hover img{filter:grayscale(.05) brightness(.8)}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--ink-rgb),.7),transparent 30%,transparent 70%,rgba(var(--ink-rgb),.8))}
.band__cap{
  position:absolute;left:var(--gutter);bottom:20px;z-index:2;
  font-family:var(--font-mono);font-size:.56rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--bone-dim);
}

/* ---------- ARCHIVE TOGGLE ---------- */
.arch__btn{
  display:flex;align-items:center;gap:12px;width:100%;
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;padding:20px 2px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  color:var(--bone-dim);transition:color var(--dur-fast) var(--ease);
}
.arch__btn:hover,.arch__btn:focus-visible{color:var(--bone)}
.arch__btn i{font-style:normal;font-size:.52rem;color:var(--bone-faint);letter-spacing:.12em;flex:1;text-align:left}
.arch__btn u{text-decoration:none;transition:transform var(--dur) var(--ease);display:inline-block}
.arch__btn[aria-expanded="true"] u{transform:rotate(180deg)}
.arch__panel{display:none}
.arch__panel.is-open{display:block}

/* ---------- SLIDE-UP LIST PROMPT ---------- */
.prompt{
  position:fixed;left:0;right:0;bottom:0;z-index:110;
  background:var(--ink);border-top:1px solid var(--bone);
  padding:26px var(--gutter) calc(24px + env(safe-area-inset-bottom));
  transform:translateY(110%);transition:transform .6s var(--ease-out);
}
.prompt.is-up{transform:translateY(0)}
.prompt[hidden]{display:none}
.prompt__inner{max-width:var(--max);margin-inline:auto;display:grid;gap:16px}
.prompt__title{font-family:var(--font-display);font-style:normal;font-weight:400;font-size:1.9rem;line-height:1.05}
.prompt__body{font-family:var(--font-mono);font-size:.72rem;line-height:1.55;color:var(--bone-dim);max-width:46ch}
.prompt__row{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center}
.prompt__yes{
  background:var(--bone);color:var(--ink);border:0;
  font-family:var(--font-mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
  padding:14px 26px;transition:transform var(--dur-fast) var(--ease);
}
.prompt__yes:hover,.prompt__yes:focus-visible{transform:translateY(-2px)}
.prompt__no{
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bone-faint);
  border-bottom:1px solid transparent;padding-bottom:2px;min-height:44px;
}
.prompt__no:hover,.prompt__no:focus-visible{color:var(--bone-dim);border-color:var(--bone-faint)}

/* ---------- INTERACTION POLISH ---------- */
.gal__cell{cursor:pointer;transition:transform var(--dur) var(--ease-out),filter var(--dur) var(--ease)}
.gal__cell:hover{transform:rotate(0deg) scale(1.02);z-index:3}
.vid{transition:transform var(--dur) var(--ease-out)}
.vid:hover{transform:rotate(0deg)}
.feat__art,.bio__portrait{transition:transform var(--dur-slow) var(--ease-out)}
.feat__art:hover,.bio__portrait:hover{transform:rotate(0deg)}
.bio__stat{transition:background var(--dur) var(--ease)}
.bio__stat:hover{background:rgba(237,230,214,.03)}

/* Live counter roll-in */
.bio__stat b{font-variant-numeric:tabular-nums}

@media (min-width:600px){
  .prompt__inner{grid-template-columns:1fr auto;align-items:center;gap:28px}
  .prompt__row{justify-content:flex-end}
  .dock__item span{font-size:.5rem}
}
@media (min-width:860px){
  .band{height:62vh}
  .dock{justify-content:center}
  .dock__item{flex:0 0 128px}
}

/* =============================================================================
   CONVERSION LAYER
   Everything below exists to do one of two jobs: make the site obvious to
   navigate, or make joining the list the easiest thing on the page.
   ========================================================================== */

/* ---------- HERO: motion on stills ----------------------------------------
   A stack of photos reads as a slideshow. A stack of photos that each drift a
   different direction reads as footage. Four variants so no two neighbours
   move the same way. Clips (.mp4/.gif) get the same treatment on top of their
   own motion, which is what stops a short loop feeling short.
   ------------------------------------------------------------------------ */
.hero__slides video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:var(--focal,50% 32%);
  filter:grayscale(.42) contrast(1.14) brightness(.66);
  opacity:0;   /* crossfade timing lives in the CONVERSION LAYER below */
}
.hero__slides video.is-on{opacity:1}

/* Keep half the source saturation, then let the theme add a faint wash. */
.hero__slides img,
.hero__slides video{
  filter:saturate(.5) contrast(var(--media-contrast,1.48)) brightness(var(--media-exposure,.82));
}

html[data-motion="on"] .hero__slides .is-on.drift-0{animation:drift0 11s var(--ease) forwards}
html[data-motion="on"] .hero__slides .is-on.drift-1{animation:drift1 11s var(--ease) forwards}
html[data-motion="on"] .hero__slides .is-on.drift-2{animation:drift2 11s var(--ease) forwards}
html[data-motion="on"] .hero__slides .is-on.drift-3{animation:drift3 11s var(--ease) forwards}
@keyframes drift0{from{transform:scale(1.00) translate3d(0,0,0)}      to{transform:scale(1.13) translate3d(-1.6%,-1.1%,0)}}
@keyframes drift1{from{transform:scale(1.12) translate3d(1.4%,.9%,0)} to{transform:scale(1.00) translate3d(0,0,0)}}
@keyframes drift2{from{transform:scale(1.03) translate3d(1.2%,-.6%,0)}to{transform:scale(1.14) translate3d(-1.0%,1.0%,0)}}
@keyframes drift3{from{transform:scale(1.10) translate3d(-1.2%,1.0%,0)}to{transform:scale(1.01) translate3d(.8%,-.8%,0)}}

/* VHS tracking bar — one slow sweep down the hero. Sells "tape", and gives
   the frame movement even when a still is holding. */
html[data-motion="on"] .hero__media::before{
  content:"";position:absolute;left:0;right:0;height:14vh;z-index:1;
  pointer-events:none;opacity:.5;
  background:linear-gradient(180deg,
    transparent, rgba(237,230,214,.045) 42%, rgba(95,208,216,.05) 52%, transparent);
  animation:track 9s linear infinite;
}
@keyframes track{from{top:-16vh}to{top:104vh}}

.hero__start{
  margin-top:26px;font-family:var(--font-mono);font-size:.64rem;
  letter-spacing:.1em;color:var(--bone-faint);
}
.hero__start a{
  color:var(--bone);border-bottom:1px solid var(--bone-faint);padding-bottom:2px;
  letter-spacing:.16em;transition:border-color var(--dur-fast) var(--ease);
}
.hero__start a:hover,.hero__start a:focus-visible{border-color:var(--bone)}

/* ---------- DESKTOP HEADER NAV --------------------------------------------
   Below 860px the menu button does the work. Above it, every section is one
   visible click away — a menu you have to open first is a menu most people
   never open.
   ------------------------------------------------------------------------ */
.hdr__nav{display:none}
@media (min-width:860px){
  .hdr__nav{
    display:flex;align-items:center;gap:22px;margin-left:auto;margin-right:26px;
  }
  .hdr__nav a{
    font-family:var(--font-mono);font-size:.6rem;letter-spacing:.16em;
    text-transform:uppercase;color:var(--bone-dim);white-space:nowrap;
    padding:6px 0;border-bottom:1px solid transparent;
    transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
  }
  .hdr__nav a:hover,.hdr__nav a:focus-visible,.hdr__nav a[aria-current="true"]{
    color:var(--bone);border-bottom-color:var(--bone);
  }
  .hdr__nav a.hdr__nav--join{
    background:var(--sticker-bg);color:var(--sticker-fg);
    padding:7px 13px;border:0;letter-spacing:.14em;
  }
  .hdr__nav a.hdr__nav--join:hover{opacity:.86}
  .hdr .menu-btn{display:none}
  /* The nav now owns this space. The tagline still shows in the mobile menu. */
  .hdr__era{display:none}
}
@media (min-width:860px) and (max-width:1090px){
  .hdr__nav{gap:15px;margin-right:16px}
  .hdr__nav a{font-size:.55rem;letter-spacing:.1em}
}

/* ---------- NEXT DROP BAR ---------- */
.drop{
  position:relative;z-index:1;border-bottom:1px solid var(--line);
  background:var(--ink-2);padding-block:26px;
}
.drop[hidden]{display:none}
.drop__inner{display:grid;gap:20px}
.drop__kick{display:block;margin-bottom:8px}
.drop__title{font-size:clamp(1.9rem,9vw,3rem);line-height:1}
.drop__kind{
  display:inline-block;margin-top:8px;font-family:var(--font-mono);
  font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-faint);
}
.drop__clock{display:flex;gap:18px;margin-bottom:18px}
.drop__u{display:flex;flex-direction:column;gap:4px}
.drop__u b{
  font-family:var(--font-mono);font-size:1.5rem;line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
}
.drop__u i{
  font-style:normal;font-family:var(--font-mono);font-size:.5rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--bone-faint);
}
.drop__cta{display:flex;flex-wrap:wrap;gap:16px 22px;align-items:center}
@media (min-width:860px){
  .drop__inner{grid-template-columns:1fr auto;align-items:center;gap:40px}
  .drop__right{text-align:right}
  .drop__clock{justify-content:flex-end}
  .drop__cta{justify-content:flex-end}
}

/* ---------- WHAT YOU GET ---------- */
.perks{margin:0 0 34px;border-top:1px solid var(--line)}
.perks__item{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding:14px 2px;border-bottom:1px solid var(--line);font-family:var(--font-mono);
}
.perks__n{font-size:.58rem;color:var(--bone-faint);flex:0 0 auto}
.perks__k{
  font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;
  font-weight:600;color:var(--bone);
  flex:0 0 auto;min-width:118px;
}
.perks__v{
  font-size:.77rem;line-height:1.55;font-weight:500;
  color:var(--bone-dim);flex:1 1 240px;letter-spacing:.01em;
}

/* The list has one job: explain the value in a single glance. */
#list .sec-head .caption{
  max-width:40ch;font-size:.8rem;line-height:1.5;
  font-weight:600;color:var(--bone);
}
#list .field label,
#list .join__fine,
#list .join__go{font-weight:600}
#list .join__fine{color:var(--bone-dim)}

/* ---------- THE JOIN FORM ---------- */
.join{gap:18px;max-width:560px}
.join__row{display:flex;gap:18px;align-items:flex-end;flex-wrap:wrap}
.join__row--end{align-items:center;gap:14px 22px}
.field--grow{flex:1 1 240px;min-width:0}
.join__go{flex:0 0 auto;white-space:nowrap}
.join__two{display:grid;gap:18px}
@media (min-width:560px){ .join__two{grid-template-columns:1fr 1fr} }
.join__fine{
  font-family:var(--font-mono);font-size:.6rem;line-height:1.6;
  color:var(--bone-faint);letter-spacing:.02em;max-width:46ch;
}
.join__skip{
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--bone-faint);min-height:44px;
  border-bottom:1px solid transparent;padding-bottom:2px;
}
.join__skip:hover,.join__skip:focus-visible{color:var(--bone-dim);border-color:var(--bone-faint)}
.join__done-head{margin-bottom:24px}
.join__title{
  font-family:var(--font-display);font-style:normal;font-weight:400;
  font-size:clamp(1.7rem,7vw,2.4rem);line-height:1.08;margin-bottom:10px;
}
.join__title:focus{outline:none}
.join__body{
  font-family:var(--font-mono);font-size:.72rem;line-height:1.65;
  color:var(--bone-dim);max-width:50ch;
}
.join__done{max-width:560px}

/* The payoff row — a record to play, right now, no hunting for it. */
.reward{
  display:flex;align-items:center;gap:16px;margin:26px 0 22px;
  background:var(--sticker-bg);color:var(--sticker-fg);
  padding:16px 18px;transform:rotate(-.7deg);
  transition:transform var(--dur) var(--ease-out);
}
.reward:hover,.reward:focus-visible{transform:rotate(0deg)}
.reward__tag{
  font-family:var(--font-mono);font-size:.5rem;letter-spacing:.2em;
  text-transform:uppercase;opacity:.55;flex:0 0 auto;align-self:flex-start;padding-top:3px;
}
.reward__txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.reward__txt b{
  font-family:var(--font-display);font-style:normal;font-weight:400;
  font-size:1.35rem;line-height:1.05;letter-spacing:-.01em;
}
.reward__txt i{font-style:normal;font-family:var(--font-mono);font-size:.58rem;opacity:.65;line-height:1.5}
.reward__cta{
  flex:0 0 auto;font-family:var(--font-mono);font-size:.56rem;letter-spacing:.16em;
  text-transform:uppercase;border-bottom:1px solid rgba(0,0,0,.4);padding-bottom:2px;
}
/* Below desktop the three-across row is cramped, and its right edge lands
   exactly where the floating skin toggle sits. Stack it. */
@media (max-width:859px){
  .reward{flex-wrap:wrap;gap:10px 14px}
  .reward__txt{flex:1 1 100%}
  .reward__cta{flex:0 0 auto;order:3;margin-right:auto}
  .reward__tag{padding-top:0}
}
.join__share{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;margin-top:6px}
.join__share-lbl{
  font-family:var(--font-mono);font-size:.62rem;color:var(--bone-faint);letter-spacing:.02em;
}

/* ---------- SLIDE-UP BAR ----------------------------------------------------
   On a phone this thing is covering the record someone came to hear. It gets
   one line of pitch and one field, and it gets out of the way fast.
   ------------------------------------------------------------------------ */
.prompt__act{width:100%}
.prompt__act .join{gap:12px;max-width:none}
.prompt__act .form__msg{font-size:.62rem}
.prompt .join__title{font-size:1.3rem}
.prompt .join__body{font-size:.66rem}
.prompt .reward{margin:14px 0 10px;padding:12px 14px}
.prompt .reward__txt b{font-size:1.05rem}

@media (max-width:599px){
  .prompt{padding:18px var(--gutter) calc(16px + env(safe-area-inset-bottom))}
  .prompt__inner{gap:12px}
  .prompt__body{display:none}                 /* the title alone makes the point */
  .prompt__title{font-size:1.45rem;padding-right:70px}
  .join--compact .field label{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;
  }
  .join--compact .join__row{gap:12px;flex-wrap:nowrap;align-items:center}
  .join--compact .field--grow{flex:1 1 auto}
  .join--compact .join__go{padding:0 14px;font-size:.62rem}
  /* Pinned to the bar's own top-right corner, well clear of "I'M IN" —
     the way out should never sit next to the way in. */
  .prompt__no{
    position:absolute;top:6px;right:var(--gutter);
    min-height:0;padding:8px 0;font-size:.54rem;
  }
}
@media (min-width:600px){
  .prompt__inner{grid-template-columns:minmax(0,1fr) minmax(300px,.9fr) auto;gap:26px}
  .prompt__copy{min-width:0}
}

/* ---------- EXIT MODAL ---------- */
.modal{
  position:fixed;inset:0;z-index:125;display:grid;place-items:center;
  padding:var(--gutter);background:rgba(var(--ink-rgb),.86);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transition:opacity var(--dur) var(--ease);
}
.modal.is-open{opacity:1}
.modal__panel{
  position:relative;width:100%;max-width:560px;background:var(--ink-2);
  border:1px solid var(--bone-faint);padding:38px var(--gutter) 30px;
  transform:translateY(14px);transition:transform var(--dur) var(--ease-out);
}
.modal.is-open .modal__panel{transform:none}
.modal__x{
  position:absolute;top:6px;right:8px;width:44px;height:44px;
  display:grid;place-items:center;color:var(--bone-faint);font-size:.8rem;
}
.modal__x:hover,.modal__x:focus-visible{color:var(--bone)}
.modal__title{font-size:clamp(1.8rem,7vw,2.5rem);margin-bottom:12px}
.modal__body{
  font-family:var(--font-mono);font-size:.72rem;line-height:1.65;
  color:var(--bone-dim);margin-bottom:26px;max-width:44ch;
}
.modal__no{
  display:block;margin-top:18px;font-family:var(--font-mono);font-size:.6rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--bone-faint);min-height:44px;
}
.modal__no:hover,.modal__no:focus-visible{color:var(--bone-dim)}

/* ---------- DOCK: the join button is the only inverted one ---------- */
.dock__item--join{
  background:var(--sticker-bg);color:var(--sticker-fg);
}
.dock__item--join:hover,.dock__item--join:focus-visible{
  background:var(--bone);color:var(--ink);opacity:.9;
}
.dock__item--join svg{color:currentColor}

/* ---------- MISC ---------- */
.feat__story{margin:-6px 0 24px;max-width:34ch;color:var(--mark)}
.ftr__links{display:inline-block;margin-top:10px}
.ftr__links a{border-bottom:1px solid var(--line);padding-bottom:1px}
.ftr__links a:hover,.ftr__links a:focus-visible{border-color:var(--bone-faint);color:var(--bone-dim)}

@media (prefers-reduced-motion:reduce){
  html[data-motion="on"] .hero__media::before{animation:none;display:none}
}

/* ---------- PLAIN DOCUMENT PAGES (privacy / terms / 404) ---------- */
.doc{max-width:70ch;margin-inline:auto;padding:120px var(--gutter) 90px}
.doc h1{font-family:var(--font-display);font-style:normal;font-weight:400;font-size:clamp(2.2rem,10vw,3.4rem);line-height:1;margin-bottom:10px}
.doc__date{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-faint);margin-bottom:44px}
.doc h2{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;margin:40px 0 14px;padding-top:18px;border-top:1px solid var(--line)}
.doc p,.doc li{color:var(--bone-dim);margin-bottom:14px}
.doc ul{list-style:none;padding:0}
.doc li{padding-left:20px;position:relative}
.doc li::before{content:"—";position:absolute;left:0;color:var(--bone-faint)}
.doc a{color:var(--bone);border-bottom:1px solid var(--line)}
.doc a:hover,.doc a:focus-visible{border-color:var(--bone)}
.doc strong{color:var(--bone);font-weight:400}
.doc__back{display:inline-block;margin-top:52px;font-family:var(--font-mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;border-bottom:1px solid var(--bone-faint);padding-bottom:3px}
.doc__back:hover{border-color:var(--bone)}

/* 404 */
.oops{min-height:100svh;display:grid;place-items:center;text-align:center;padding:var(--gutter)}
.oops__code{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.3em;color:var(--bone-faint);margin-bottom:20px}
.oops__title{font-family:var(--font-display);font-style:normal;font-weight:400;font-size:clamp(2.6rem,14vw,5rem);line-height:.95;margin-bottom:18px}
.oops__body{font-family:var(--font-mono);font-size:.72rem;color:var(--bone-dim);margin-bottom:38px}
.oops__row{display:flex;flex-wrap:wrap;gap:18px 26px;justify-content:center}

/* =============================================================================
   SIDE RAIL — the whole menu, on screen the whole time
   -----------------------------------------------------------------------------
   Desktop only (>=1100px). Nothing to open, nothing to remember. The page
   reserves the space rather than floating over it, so the rail never covers
   a photo and the layout never jumps when it appears.
   ========================================================================== */
.rail{display:none}

@media (min-width:1100px){
  :root{--rail-w:196px}

  body{padding-left:var(--rail-w)}

  .rail{
    display:flex;flex-direction:column;justify-content:center;gap:34px;
    position:fixed;top:0;left:0;bottom:0;width:var(--rail-w);z-index:82;
    padding:28px 22px calc(28px + env(safe-area-inset-bottom));
    background:var(--ink);border-right:1px solid var(--line);
  }
  .rail__mark{
    position:absolute;top:26px;left:22px;right:22px;
    font-family:var(--font-mono);font-size:.7rem;letter-spacing:.2em;
    text-transform:uppercase;color:var(--bone);
  }
  .rail__list{display:flex;flex-direction:column}
  .rail__link{
    display:flex;align-items:baseline;gap:11px;padding:11px 0;
    border-bottom:1px solid var(--line);
    font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;
    text-transform:uppercase;color:var(--bone-dim);
    transition:color var(--dur-fast) var(--ease),padding-left var(--dur-fast) var(--ease);
  }
  .rail__link:hover,.rail__link:focus-visible{color:var(--bone);padding-left:7px}
  .rail__n{font-size:.5rem;color:var(--bone-faint);flex:0 0 auto}
  .rail__t{flex:1}
  /* Where you are right now, without having to guess */
  .rail__link[aria-current="true"]{color:var(--bone)}
  .rail__link[aria-current="true"] .rail__t{
    border-bottom:1px solid var(--bone);padding-bottom:2px;
  }
  .rail__link--join{
    margin-top:14px;border-bottom:0;
    background:var(--sticker-bg);color:var(--sticker-fg);
    padding:12px 12px;justify-content:center;
  }
  .rail__link--join:hover,.rail__link--join:focus-visible{padding-left:12px;opacity:.87}
  .rail__link--join .rail__n{display:none}
  .rail__link--join .rail__t{flex:0 0 auto;border-bottom:0 !important;padding-bottom:0 !important}
  .rail__foot{
    position:absolute;left:22px;right:22px;bottom:26px;
    font-family:var(--font-mono);font-size:.5rem;letter-spacing:.16em;
    text-transform:uppercase;color:var(--bone-faint);line-height:1.8;
  }

  /* Fixed furniture has to start where the rail ends, not at the window edge */
  .hdr,.dock,.prompt{left:var(--rail-w)}
  .hdr__nav{display:none}                  /* the rail is the menu now */
  .hdr .menu-btn{display:none}
  .hdr__mark{opacity:0;pointer-events:none} /* the rail already says the name */

  /* The rail is the navigation, so the curtain and overlays sit above it */
  .curtain,.lbx,.modal{z-index:130}
}

/* The rail owns the left edge, so the skin toggle moves off it */
@media (min-width:1100px){ .skin-btn{right:14px} }

/* The release sticker and the genre kicker were landing on top of each other */
.hero__inner .sticker{margin-bottom:16px}

/* Crossfade without holding two video decoders active for several seconds. */
.hero__slides img,.hero__slides video{transition:opacity 1.2s var(--ease) .25s}
.hero__slides img.is-on,.hero__slides video.is-on{transition:opacity .85s var(--ease) 0s}
.curtain__media img,.curtain__media video{transition:opacity 1.15s var(--ease) .2s}
.curtain__media img.is-on,.curtain__media video.is-on{transition:opacity .8s var(--ease) 0s}

/* ---------- THE DOOR AS A LOADING SCREEN ---------------------------------
   The hero opens on video. Rather than let someone walk into a stutter,
   the door holds shut until the opening clip has frames ready — and looks
   deliberate while it does. A tape spooling up, not a spinner. */
.curtain[data-loading] .curtain__btn{
  cursor:progress; color:var(--bone-dim); border-color:var(--bone-faint);
}
.curtain[data-loading] .curtain__btn::before{ content:"" }
.curtain[data-loading] .curtain__btn:hover::after{ transform:translateY(101%) }
.curtain[data-loading] .curtain__btn span{ letter-spacing:.34em; opacity:.75 }

/* the spool: a bar that fills, then keeps a low pulse so it never looks stuck */
.curtain[data-loading] .curtain__btn::after{
  content:"";position:absolute;left:0;bottom:0;top:auto;right:auto;
  height:2px;width:100%;background:var(--bone);opacity:.85;
  transform:translateY(0);
  transform-origin:0 50%;
  animation:spool 2.6s var(--ease-out) forwards;
}
@keyframes spool{
  0%  {transform:scaleX(0)}
  55% {transform:scaleX(.72)}
  100%{transform:scaleX(.94)}
}
html[data-motion="on"] .curtain[data-loading] .curtain__say{ animation:blink 1.5s steps(2) infinite }
@keyframes blink{0%,60%{opacity:1}61%,100%{opacity:.45}}

@media (prefers-reduced-motion:reduce){
  .curtain[data-loading] .curtain__btn::after{animation:none;transform:scaleX(.9)}
}

/* ---------- THE STILL, TREATED LIKE A HELD TAPE FRAME --------------------
   One photo sits in a run of moving footage. Left alone it reads as the
   video stopping. So it gets its own treatment: a deeper push-in than the
   clips, plus an exposure flicker — the look of a tape paused on a frame,
   where the picture never quite sits still.

   Its own class rather than a shared drift, so the two animations
   (transform + filter) can run together without fighting. */
html[data-motion="on"] .hero__slides .is-on.drift-still,
html[data-motion="on"] .curtain__media .is-on.drift-still{
  animation:driftStill 9s var(--ease) forwards,
            tapehold  2.9s steps(5) infinite;
}
@keyframes driftStill{
  from{transform:scale(1.02) translate3d(.6%,.4%,0)}
  to  {transform:scale(1.19) translate3d(-1.4%,-1.2%,0)}
}
/* exposure breathing + a touch of chroma drift, like tracking on a paused VHS */
@keyframes tapehold{
  0%,100%{filter:saturate(.5) contrast(1.42) brightness(.90)}
  20%    {filter:saturate(.5) contrast(1.48) brightness(.94)}
  40%    {filter:saturate(.5) contrast(1.38) brightness(.86)}
  60%    {filter:saturate(.5) contrast(1.50) brightness(.92)}
  80%    {filter:saturate(.5) contrast(1.40) brightness(.88)}
}

/* While a still is up, the tracking bar sweeps harder — it's the only thing
   left carrying motion, so it has to do more of the work. */
html[data-motion="on"] .hero__media:has(.hero__slides[data-kind="still"])::before{
  animation-duration:4.2s;
  opacity:.9;
}

@media (prefers-reduced-motion:reduce){
  .hero__slides .is-on.drift-still,
  .curtain__media .is-on.drift-still{animation:none}
}

/* ---------- FEATURED RELEASE ROW ON A PHONE -----------------------------
   Cover + title + "PLAY ON SPOTIFY" + arrow is more than fits across 375px,
   and the title was getting clipped mid-word. Let the row wrap and send the
   call to action to its own line rather than shrinking the release name. */
@media (max-width:559px){
  .hub__item--primary{flex-wrap:wrap;gap:12px 14px}
  .hub__item--primary .hub__txt{flex:1 1 0;min-width:0;overflow:visible}
  .hub__item--primary .hub__label{white-space:normal;font-size:1.35rem;line-height:1.02}
  .hub__item--primary .hub__note{white-space:normal}
  .hub__item--primary .hub__arrow{order:3}
  .hub__item--primary .hub__cta{flex:0 0 100%;order:4}
}

/* ---------- NOISE OVER THE FOOTAGE --------------------------------------
   The clips are compressed off YouTube, so flat areas band and the joins
   between them show. A layer of grain sitting on top of the footage hides
   both, and matches the tape treatment the rest of the page already has.
   Sits above the video, below the scrim and the wordmark. */
.hero__slides::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background-image:var(--grain-url);
  background-size:190px 190px;
  opacity:.16;
  mix-blend-mode:overlay;
}

/* A restrained theme wash over footage that still keeps half its own color. */
.hero__slides::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--hero-tint,var(--bone));
  mix-blend-mode:color;opacity:.12;
}
html[data-motion="on"] .hero__slides::after{animation:grainshift .8s steps(3) infinite}
html[data-grain="off"] .hero__slides::after{display:none}

/* A touch more on the clips than the stills — they're the compressed ones. */
.hero__slides[data-kind="clip"]::after{opacity:.22}

/* ---------- LOADING BAR DRIVEN BY REAL PROGRESS -------------------------
   `--load` is set from JS as each clip finishes buffering (0 -> 1), so the
   bar reflects what has actually downloaded instead of animating on a
   guessed duration and then sitting full while the page is still stalling. */
.curtain[data-loading] .curtain__btn::after{
  animation:none;
  transform:scaleX(var(--load,0));
  transition:transform .35s var(--ease-out);
}

/* ---------- THE DOOR'S PORTRAIT -----------------------------------------
   The artist photo is only 531x640, so filling a desktop screen with it is
   a 3x upscale — it goes to mush and the grain turns to porridge. Push it
   back instead of trying to present it as a hero image: framed off the
   wordmark, darker, and softened just enough that the upscaling reads as
   atmosphere rather than a low-res photo. */
.curtain__media img{
  object-position:50% 22%;
  filter:grayscale(.45) contrast(1.12) brightness(.34) saturate(.85) blur(1.4px);
  transform:scale(1.06);           /* hides the blur's soft edge */
}
/* Deepen the middle so the name always has something dark to sit on. */
.curtain__media::after{
  background:
    radial-gradient(58% 46% at 50% 46%, rgba(0,0,0,.72), rgba(0,0,0,.30) 60%, transparent 78%),
    radial-gradient(78% 62% at 50% 50%, rgba(0,0,0,.30), rgba(0,0,0,.9) 88%);
}

/* On phones, continuous grain and live backdrop blur consume GPU time even
   when nothing is moving. Keep their look as a static layer instead. */
@media (max-width:640px){
  html[data-motion="on"] .grain,
  html[data-motion="on"] .hero__slides::after{animation:none}
  .dock{backdrop-filter:none;-webkit-backdrop-filter:none}

  /* Keep the reel's photography, but stop asking a phone GPU to animate and
     blend several full-screen layers for every decoded video frame. */
  html[data-motion="on"] .hero__slides video.is-on.drift-0,
  html[data-motion="on"] .hero__slides video.is-on.drift-1,
  html[data-motion="on"] .hero__slides video.is-on.drift-2,
  html[data-motion="on"] .hero__slides video.is-on.drift-3{animation:none}
  .hero__slides img,.hero__slides video{transition:opacity .42s linear}
  html[data-motion="on"] .hero__media::before,
  .ambient::after{display:none}
  .grain{mix-blend-mode:normal;opacity:.04}
  .hero__slides::after{mix-blend-mode:normal;opacity:.08}
  .hero__slides[data-kind="clip"]::after{opacity:.10}
  .hero__slides::before{mix-blend-mode:normal;opacity:.09}
}