@import url("assets/colors_and_type.css");

/* =====================================================================
   PROLIFIC — landing page. All visuals derive from the design system.
   ===================================================================== */

/* ---- Univers LT Std Condensed (client-supplied) ----
   Added to the system as the condensed voice: 400 for running body,
   700 (bold condensed) for buttons, labels and the hero credit line. */
@font-face{
  font-family:"Univers Cn";
  src:url("assets/fonts/UniversLTStd-Cn.otf") format("opentype");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Univers Cn";
  src:url("assets/fonts/UniversLTStd-BoldCn.otf") format("opentype");
  font-weight:700;font-style:normal;font-display:swap;
}
:root{
  --font-cond:"Univers Cn","Arial Narrow",sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:auto}
body{
  background:var(--ink-900);
  color:var(--fg-1);
  font-family:var(--font-cond);
  font-size:17px;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  cursor:auto;
}

::selection{background:var(--blue);color:var(--highlight)}

img{display:block;max-width:100%}

a{color:inherit;text-decoration:none}

/* ---- non-hero imagery: black & white ---- */
.duo{filter:grayscale(1) contrast(1.06);}

/* =====================================================================
   THREE-COLUMN SHELL  ·  rails fixed, center scrolls
   ===================================================================== */
:root{
  --rail-w: clamp(150px, 17.5vw, 300px);
  --gutter: clamp(20px, 4vw, 56px);
}

/* center content column */
.shell{
  position:relative;
  z-index:2;
  margin-inline:auto;
  max-width: 980px;
  padding-inline: var(--gutter);
}
/* rails are hidden for now — the centred column spans the full width */

/* ---- RAILS ---- */
.rail{
  position:fixed;
  top:0;bottom:0;
  width:var(--rail-w);
  z-index:1;
  overflow:hidden;
  pointer-events:none;
  display:none;            /* shown only >=1024 */
  background:var(--ink-900);
}
.rail--left{left:0}
.rail--right{right:0}
/* .rail stays display:none — decorative side rails disabled for now */

.rail__track{
  position:absolute;
  top:-180px;left:0;right:0;
  display:flex;
  flex-direction:column;
  gap: clamp(10px, 1.4vw, 22px);
  padding: 10px clamp(8px,1vw,18px);
  will-change:transform;
}
.rail__fig{
  position:relative;
  overflow:hidden;
  background:var(--ink-800);
  opacity:.40;
}
.rail__fig img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(1) contrast(1.08) blur(.4px);
}
/* irregular heights — collage / contact-sheet rhythm */
.rail__fig.h1{aspect-ratio:3/4}
.rail__fig.h2{aspect-ratio:1/1}
.rail__fig.h3{aspect-ratio:4/5}
.rail__fig.h4{aspect-ratio:5/7}

/* inner vignette: rail dissolves into the dark center, not a hard line */
.rail::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
}
.rail--left::after{
  background:
    linear-gradient(to right, transparent 40%, var(--ink-900) 97%),
    linear-gradient(to bottom, var(--ink-900), transparent 14%, transparent 86%, var(--ink-900));
}
.rail--right::after{
  background:
    linear-gradient(to left, transparent 40%, var(--ink-900) 97%),
    linear-gradient(to bottom, var(--ink-900), transparent 14%, transparent 86%, var(--ink-900));
}

/* =====================================================================
   THIN TOP PROGRESS BAR (mobile)
   ===================================================================== */
.progress{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:60;
  background:transparent;display:block;
}
.progress__bar{height:100%;width:0;background:var(--cyan);transition:width .1s linear}
@media (min-width:1024px){ .progress{display:none} }

/* =====================================================================
   STICKY PRE-ORDER PILL
   ===================================================================== */
.pill{
  position:fixed;top:18px;right:18px;z-index:50;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;
  background:var(--gold);color:#1A1200;
  padding:11px 18px;border-radius:var(--r-1);
  display:inline-flex;align-items:center;gap:8px;
  opacity:0;transform:translateY(-12px);pointer-events:none;
  transition:opacity var(--dur-1) var(--ease),transform var(--dur-1) var(--ease),background var(--dur-1) var(--ease);
}
.pill.show{opacity:1;transform:translateY(0);pointer-events:auto}
.pill:hover{background:var(--gold-deep)}
.pill .arr{transition:transform var(--dur-1) var(--ease)}
.pill:hover .arr{transform:translateX(4px)}

/* =====================================================================
   GENERIC SECTION RHYTHM
   ===================================================================== */
section{position:relative}
.sect{padding-block: clamp(48px, 8vh, 104px);}
.sect--tight{padding-block: clamp(40px,6vh,72px)}

.eyebrow{
  font-family:var(--font-mono);font-size:var(--t-meta);
  letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3);
}
.eyebrow .mile{color:var(--cyan-bright)}

.mono{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.1em}
.divider{height:1px;background:var(--border);border:0;margin-block:0}

/* =====================================================================
   MOTION  ·  reveal system (IntersectionObserver toggles .in)
   ===================================================================== */
.reveal{opacity:0;transform:translateY(30px);
  transition:opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);}
.reveal.in{opacity:1;transform:none}

/* duotone images settle in: scale 1.06 -> 1, NO fade */
.settle{overflow:hidden}
.settle img{transform:scale(1.06);transition:transform var(--dur-3) var(--ease)}
.settle.in img{transform:scale(1)}

/* section head: oversized display type slides in from an edge and settles,
   sized to fit inside the centre column (no cropping off the frame) */
.headwrap{overflow:hidden;width:100%}
.head{
  font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(40px,9vw,116px);line-height:.92;color:var(--fg-1);
  white-space:nowrap;
  /* tight line-height lets cap ascenders overshoot the line box; the .headwrap
     overflow:hidden (for the slide reveal) would clip those tops, so reserve a
     little headroom inside the clip box. em-relative, so it scales with size. */
  padding-top:.16em;
  transition:transform var(--dur-3) var(--ease),opacity var(--dur-2) var(--ease);
}
.head--left{transform:translateX(-8vw);opacity:0;text-align:left}
.head--right{transform:translateX(8vw);opacity:0;text-align:right}
.head.in{transform:translateX(0);opacity:1}
.head .gold{color:var(--gold)}

/* line-draw underline on hover (tertiary links / mono labels) */
.draw{position:relative;display:inline-block;padding-bottom:4px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--fg-1)}
.draw::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--cyan-bright);transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur-1) var(--ease)}
.draw:hover::after{transform:scaleX(1)}

/* =====================================================================
   BUTTONS  (from the system)
   ===================================================================== */
.btn{
  font-family:var(--font-cond);font-size:15px;letter-spacing:.1em;
  text-transform:uppercase;font-weight:700;
  padding:16px 26px;border:1px solid transparent;border-radius:var(--r-1);
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  background:none;color:inherit;
  transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease),
             border-color var(--dur-1) var(--ease),transform .12s var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn{position:relative}
.btn--gold{background:var(--gold);color:#1A1200}
.btn--gold:hover{background:var(--gold-deep)}
.btn--blue{background:var(--blue);color:#fff;border-color:var(--blue)}
.btn--blue:hover{background:var(--blue-bright);border-color:var(--blue-bright)}
.btn--outline{background:transparent;color:var(--fg-1);border-color:var(--blue-bright)}
.btn--outline:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.btn .arr{transition:transform var(--dur-1) var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn--lg{padding:20px 34px;font-size:16px}
/* consistent-width section CTAs (store + foundation) */
.btn--cta{min-width:280px;justify-content:center}
@media (max-width:760px){.btn--cta{width:100%;min-width:0}}

/* line-draw underline on hover — every button (matches pre-order behaviour) */
.btn::after{content:"";position:absolute;left:14px;right:14px;bottom:8px;height:1px;
  background:currentColor;opacity:0;transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur-1) var(--ease),opacity var(--dur-1) var(--ease)}
.btn:hover::after{transform:scaleX(1);opacity:.6}
.btn--lg::after{left:18px;right:18px;bottom:10px}

:focus-visible{outline:2px solid var(--cyan-bright);outline-offset:3px}

/* =====================================================================
   SECTION 1 · HERO
   ===================================================================== */
/* the album cover is square — show it WHOLE at full viewport height; sides go black.
   Frame is pinned top+bottom (so height == viewport) and made square via aspect-ratio,
   then centred horizontally. Absolute positioning avoids flex/aspect-ratio quirks. */
.hero{position:relative;width:100%;height:100svh;background:#000;overflow:hidden;
  --hpx:clamp(16px,2vw,34px);--hpy:clamp(16px,2vw,34px);
  /* the cover JPG has baked-in letterbox bars (~11.6% top, ~12% bottom) —
     offset the logo/credit past them so they sit on the actual photo */
  --hbar-top:11.6%;--hbar-bot:12%;--hmark-h:clamp(64px,13%,128px)}
.hero__frame{position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);
  aspect-ratio:1/1;overflow:hidden}
.hero__img{position:absolute;inset:0}
/* rest scale is 1 → the WHOLE square cover shows, no cropping (gentle settle only) */
.hero__img img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);
  animation:heroZoom 2600ms var(--ease) forwards}
@keyframes heroZoom{to{transform:scale(1)}}
/* darken the top (for the logo) and bottom (for the credit); leave the centre clear */
.hero__scrim{position:absolute;inset:0;
  background:linear-gradient(to bottom, rgba(4,7,15,.5) 0%, rgba(4,7,15,0) 26%, rgba(4,7,15,0) 60%, rgba(4,7,15,.5) 82%, rgba(4,7,15,.92) 100%);}
/* PROLIFIC mark — sits on the art, top-left */
.hero__mark{position:absolute;top:calc(var(--hbar-top) + var(--hpy));left:var(--hpx);z-index:4;
  height:var(--hmark-h);width:auto;max-width:48%;object-fit:contain;
  filter:drop-shadow(0 2px 16px rgba(0,0,0,.55));
  opacity:0;transform:translateY(-8px);animation:markIn 1000ms var(--ease) 400ms forwards}
@keyframes markIn{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.hero__mark{animation:none;opacity:1;transform:none}}
/* artist credit — toggles between bottom-right (default) and top-right */
.hero__sub{position:absolute;z-index:4;font-family:var(--font-cond);font-weight:700;
  font-size:clamp(12px,1.3vw,17px);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
  display:flex;flex-direction:row;align-items:center;gap:10px;white-space:nowrap;
  text-shadow:0 2px 12px rgba(0,0,0,.65);
  opacity:0;animation:markIn 1000ms var(--ease) 600ms forwards}
.hero__sub .sep{color:var(--gold);opacity:.7}
.hero[data-names="br"] .hero__sub{right:var(--hpx);bottom:calc(var(--hbar-bot) + var(--hpy))}
/* top-right credit: match the logo's box height and centre the line, so it
   sits vertically centred against the logo on the left */
.hero[data-names="tr"] .hero__sub{top:calc(var(--hbar-top) + var(--hpy));height:var(--hmark-h);
  align-items:center;right:calc(var(--hpx) + clamp(28px,7vw,130px))}

/* =====================================================================
   SECTION 2 · PRE-ORDER
   ===================================================================== */
.preorder{display:grid;grid-template-columns:minmax(0,0.78fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start}
@media (max-width:760px){.preorder{grid-template-columns:1fr}}
.po__art{position:relative;border:1px solid var(--border);background:#000}
.po__art img{width:100%;aspect-ratio:1/1;object-fit:cover}
.po__art .tag{position:absolute;left:0;bottom:0;background:var(--ink-900);
  padding:8px 12px;border-top:1px solid var(--border);border-right:1px solid var(--border)}
.po__title{font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(40px,5vw,68px);line-height:.9;color:var(--fg-1);padding-bottom:.1em}
.tracklist{list-style:none;margin-top:8px;border-top:1px solid var(--border)}
.tracklist li{display:flex;align-items:baseline;gap:16px;
  padding:13px 2px;border-bottom:1px solid var(--border);
  font-family:var(--font-mono);font-size:13px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--fg-2);
  opacity:0;transform:translateX(14px);
  transition:opacity var(--dur-1) var(--ease),transform var(--dur-1) var(--ease)}
.tracklist.in li{opacity:1;transform:none}
.tracklist .num{color:var(--cyan-bright);min-width:2.4ch}
.tracklist .dur{margin-left:auto;color:var(--fg-3)}
.tracklist .feat{margin-left:auto;color:var(--gold);font-size:12px;font-weight:700;text-align:right;text-transform:none;letter-spacing:.04em}
/* locked rows: title redacted behind a soft blur until release */
.tracklist li.locked{color:var(--fg-3)}
.tracklist li.locked .bar{display:inline-block;height:.62em;border-radius:2px;
  background:repeating-linear-gradient(90deg,var(--fg-2) 0 14px,var(--fg-3) 14px 22px);
  opacity:.4;filter:blur(3.5px)}

.formats{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.chip{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;padding:11px 15px;background:transparent;
  border:1px solid var(--border);color:var(--fg-2);border-radius:var(--r-1);
  cursor:pointer;display:flex;flex-direction:column;gap:3px;align-items:flex-start;
  transition:border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease),background var(--dur-1) var(--ease)}
.chip .price{color:var(--fg-3);font-size:10px}
.chip[aria-pressed="true"]{border-color:var(--cyan-bright);color:var(--highlight);background:var(--blue-deep)}
.chip[aria-pressed="true"] .price{color:var(--cyan-bright)}

.po__cta{margin-top:6px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.po__total{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--fg-3)}
.po__total b{color:var(--fg-1)}

.stack{display:flex;flex-direction:column;gap:22px}

/* pre-order left column: cover art, then (desktop) the pre-save button */
.po__left{display:flex;flex-direction:column}
.po__cta--desk{display:none}
@media (min-width:761px){
  .po__cta--desk{display:flex;margin-top:20px}
  .po__cta--mob{display:none}
}
/* mobile top bar: a small logo + credit sit in a black strip ABOVE the cover */
.mobilebar{display:none}
@media (max-width:760px){
  /* mobile lands straight on the square cover + tracklist; drop the big hero */
  .hero{display:none}
  /* left padding == shell gutter so the logo aligns with the cover's left edge;
     a touch more on the right gives the credit breathing room */
  .mobilebar{display:flex;align-items:center;justify-content:space-between;gap:10px;
    background:#000;padding:10px calc(var(--gutter) + 10px) 10px var(--gutter)}
  .mobilebar__mark{height:clamp(40px,11vw,56px);width:auto;max-width:46%;
    object-fit:contain;object-position:left center;flex:0 0 auto}
  /* tighten the gap between the header bar and the cover art */
  #preorder{padding-top:6px}
  #preorder .preorder{margin-top:0}
  .mobilebar__sub{font-family:var(--font-cond);font-weight:700;color:var(--gold);
    font-size:clamp(9.5px,2.6vw,12.5px);letter-spacing:.05em;text-transform:uppercase;
    display:flex;align-items:center;gap:6px;white-space:nowrap;flex:0 1 auto;min-width:0}
  .mobilebar__sub .sep{opacity:.7}
}

/* =====================================================================
   SECTION 3/5 · VIDEO
   ===================================================================== */
.video{margin-inline:auto}
.video--lg{max-width:1100px}
.video--sm{max-width:760px}
.facade{position:relative;aspect-ratio:16/9;background:#000;cursor:pointer;
  border:1px solid var(--border);overflow:hidden}
.facade img{width:100%;height:100%;object-fit:cover;opacity:.82;transition:transform var(--dur-3) var(--ease),opacity var(--dur-1) var(--ease)}
.facade:hover img{transform:scale(1.04);opacity:.92}
.facade__play{position:absolute;inset:0;display:grid;place-items:center}
.facade__play svg{width:clamp(54px,6vw,82px);height:auto;
  filter:drop-shadow(0 4px 24px rgba(0,0,0,.5))}
.facade__bars{position:absolute;left:0;right:0;height:18px;background:#000;pointer-events:none}
.facade__bars.t{top:0}.facade__bars.b{bottom:0}
.facade__meta{position:absolute;left:14px;bottom:24px;z-index:2;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cyan-bright)}
.facade iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.streamrow{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:26px;align-items:center}

/* =====================================================================
   SECTION 4 · QUOTE INTERLUDE
   ===================================================================== */
.quote{min-height:92svh;display:flex;flex-direction:column;justify-content:center;
  align-items:flex-start;gap:30px}
.quote__bar{font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(40px,7.4vw,104px);line-height:.94;color:var(--fg-1);
  max-width:16ch;letter-spacing:-.005em}
.quote__bar .w{display:inline-block;margin-right:.26em;opacity:0;will-change:transform,opacity}
.quote__bar .w.snap{animation:wordSnap 420ms var(--ease) forwards}
@keyframes wordSnap{from{opacity:0}to{opacity:1;transform:none}}
.quote__bar .accent{color:var(--cyan-bright)}
.quote__cite{font-family:var(--font-mono);font-size:13px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--fg-3);
  border-left:2px solid var(--gold);padding-left:18px;
  opacity:0;transition:opacity var(--dur-2) var(--ease)}
.quote__cite.in{opacity:1}

/* =====================================================================
   SECTION · VIDEOS (combined, horizontal pinned)
   ===================================================================== */
.videos{position:relative;--vw-slide:min(66vw,940px)}
.videos__pin{height:100svh;display:flex;align-items:center;overflow:hidden}
/* side padding = half the empty space, so the first/last slide sit dead-centre */
.videos__track{display:flex;gap:clamp(24px,4vw,72px);
  padding-inline:calc((100vw - var(--vw-slide)) / 2);
  align-items:center;will-change:transform}
.vslide{flex:0 0 auto;width:var(--vw-slide);display:flex;flex-direction:column;gap:18px;margin:0}
.vslide .facade{width:100%}
.vslide__foot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.vslide__title{font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(28px,3vw,46px);line-height:1;color:var(--fg-1);
  display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.vslide__tag{font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;color:var(--cyan-bright)}
@media (max-width:1023px){
  .videos__pin{height:auto;display:block;overflow:visible}
  .videos__track{flex-direction:column;gap:42px;padding-inline:clamp(20px,5vw,40px);
    max-width:620px;margin-inline:auto}
  .vslide{width:100%}
  .videos__track .gspacer{display:none}
}

/* =====================================================================
   SECTION 6 · GALLERY (horizontal pinned)
   ===================================================================== */
.gallery{position:relative}
.gallery__pin{height:100svh;display:flex;align-items:center;overflow:hidden}
.gallery__track{display:flex;gap:clamp(20px,3vw,52px);padding-inline:clamp(20px,6vw,90px);
  align-items:center;will-change:transform}
.gphoto{position:relative;flex:0 0 auto;background:#000;border:1px solid var(--border)}
.gspacer{flex:0 0 22vw}
.gphoto img{height:min(68vh,600px);width:auto;display:block}
.gphoto figcaption{position:absolute;left:0;bottom:0;background:var(--ink-900);
  padding:7px 12px;border-top:1px solid var(--border);border-right:1px solid var(--border);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg-3)}
.gallery__intro{display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;flex-wrap:wrap;margin-bottom:6px}
/* mobile fallback: horizontal swipe scroller */
.gallery__scroll{display:none}
@media (max-width:1023px){
  .gallery__pin{display:none}
  .gallery__scroll{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
    padding:4px 0 18px;-webkit-overflow-scrolling:touch}
  .gallery__scroll .gphoto{scroll-snap-align:center}
  .gallery__scroll .gphoto img{height:52vh;max-height:440px;width:auto;max-width:none}
}

/* =====================================================================
   VINYL VARIANTS  ·  reuses .gallery layout; clickable → lightbox
   ===================================================================== */
/* Vinyl slider · frameless, enlarged, no captions */
.gphoto.gphoto--variant{background:transparent;border:0}
.gphoto.gphoto--variant img{height:min(80vh,720px);width:auto}
/* small product label under each slide */
.gphoto--variant figcaption{position:static;background:transparent;border:0;
  padding:12px 4px 0;text-align:center;font-family:var(--font-mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.gphoto--variant a{display:block}
.gphoto--variant a img{cursor:pointer;transition:opacity .2s ease}
.gphoto--variant a:hover img{opacity:.85}
@media (max-width:1023px){
  /* size by width so a whole landscape vinyl fits within the screen */
  .gallery__scroll .gphoto.gphoto--variant img{width:min(88vw,560px);height:auto;max-height:none}
  /* shirts are taller than vinyls: vertically center each image in the row,
     and pin every caption to the bottom so they line up */
  .gallery__scroll .gphoto--variant{display:flex;flex-direction:column;align-items:center}
  .gallery__scroll .gphoto--variant > a,
  .gallery__scroll .gphoto--variant > img{margin-block:auto}
}

/* =====================================================================
   LIGHTBOX  ·  expanded view for vinyl variants
   ===================================================================== */
.lightbox{position:fixed;inset:0;z-index:100;display:none;place-items:center;
  background:rgba(4,7,15,.93);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  padding:clamp(20px,5vw,80px);cursor:zoom-out}
.lightbox.open{display:grid}
.lightbox__img{max-width:100%;max-height:100%;width:auto;height:auto;
  border:1px solid var(--border);box-shadow:0 24px 90px rgba(0,0,0,.6)}
.lightbox__close{position:fixed;top:14px;right:20px;z-index:101;background:none;border:0;
  color:var(--highlight);font-size:38px;line-height:1;cursor:pointer;font-family:var(--font-cond);
  opacity:.85;transition:opacity .2s var(--ease)}
.lightbox__close:hover{opacity:1}

/* =====================================================================
   SECTION 7 · SHOP THE MARATHON
   ===================================================================== */
.shop{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(28px,4vw,68px);align-items:center}
@media (max-width:760px){.shop{grid-template-columns:1fr}}
.shop__img{position:relative;background:#000;border:1px solid var(--border)}
.shop__img img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:grayscale(1) contrast(1.06)}
/* brand-mark variant: logo centred on its own black field, no duotone */
.shop__img--logo{display:grid;place-items:center;aspect-ratio:4/5;
  background:#000;padding:clamp(28px,6%,64px)}
.shop__img--logo img{width:min(78%,360px);height:auto;aspect-ratio:auto;
  object-fit:contain;filter:none}
.shop__story p{font-family:var(--font-cond);font-size:19px;
  line-height:1.5;color:var(--fg-2);max-width:42ch}

/* =====================================================================
   SECTION 8 · FOUNDATION (light mode)
   ===================================================================== */
.foundation[data-mode="light"]{background:var(--paper);color:var(--fg-1)}
.foundation{position:relative}
.foundation .inner{padding-block:clamp(48px,8vh,104px)}
.foundation .head{color:var(--fg-1)}
.foundation__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,4vw,64px);align-items:center;margin-top:30px}
@media (max-width:760px){.foundation__grid{grid-template-columns:1fr}}
.foundation p{font-size:var(--t-body-lg);line-height:1.65;color:var(--fg-2);max-width:46ch}
.foundation .cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.foundation .eyebrow{color:var(--grey);font-size:var(--t-meta);line-height:1.4;letter-spacing:.2em;max-width:none}
.foundation .draw{color:var(--ink-900)}
.foundation .draw::after{background:var(--blue)}
.foundation__art{position:relative;aspect-ratio:4/3;background:#000;border:1px solid var(--grey-line);overflow:hidden}
.foundation__art img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}
/* logo variant: NNF mark shown large, no frame (sits on the light section) */
.foundation__art--logo{background:transparent;border:0;aspect-ratio:auto;
  display:grid;place-items:center;padding:0;overflow:visible;margin-top:-22px}
.foundation__art--logo img{width:min(100%,560px);height:auto;object-fit:contain;filter:none}

/* =====================================================================
   LAYOUT SWITCH  ·  stacked vs grid shops (small, barely-visible)
   ===================================================================== */
/* pre-order header: tiny "TRACKLIST" label under the album/availability heading */
.po__kicker{font-family:var(--font-mono);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--fg-3);margin-top:10px}

/* show/hide the two layouts */
body[data-shops="grid"]    .shops-stacked{display:none}
body[data-shops="stacked"] .shops-grid{display:none}

/* =====================================================================
   SHOPS · GRID LAYOUT (three columns: image top, info + CTA below)
   ===================================================================== */
.shopsgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px);
  margin-top:38px;align-items:stretch}
@media (max-width:900px){.shopsgrid{grid-template-columns:1fr;max-width:460px;margin-inline:auto}}
.shopcard{display:flex;flex-direction:column;background:var(--ink-800);
  border:1px solid var(--border)}
.shopcard__img{height:clamp(180px,18vw,240px);display:grid;place-items:center;overflow:hidden;
  padding:clamp(22px,3%,40px);border-bottom:1px solid var(--border)}
.shopcard__img--dark{background:#000}
.shopcard__img--light{background:var(--paper)}
.shopcard__img img{max-width:84%;max-height:82%;width:auto;height:auto;object-fit:contain}
/* square brand marks (TMC, NNF) zoom in to fill the panel; wide wordmark stays */
.shopcard__img--dark img[src*="tmc"]{max-width:96%;max-height:98%}
.shopcard__img--light img{max-width:108%;max-height:118%}
.shopcard__body{display:flex;flex-direction:column;gap:13px;padding:clamp(22px,2vw,30px);flex:1}
.shopcard__title{font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(22px,1.9vw,30px);line-height:1.02;color:var(--fg-1)}
.shopcard__copy{font-family:var(--font-cond);font-size:16px;
  line-height:1.5;color:var(--fg-2)}
.shopcard__meta{font-size:10px;letter-spacing:.14em;color:var(--fg-3);margin-top:auto}
/* all three CTAs: identical size, single line, pinned to the bottom of the card */
.shopcard .btn{align-self:stretch;justify-content:center;text-align:center;
  margin-top:auto;white-space:nowrap;font-size:14px;letter-spacing:.06em;padding-inline:18px}

/* =====================================================================
   SECTION 9 · FOOTER / FINISH
   ===================================================================== */
.finish{background:var(--ink-900);text-align:center;padding-block:clamp(36px,6vh,72px);
  position:relative;overflow:hidden}
.finish__mark{font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(34px,7.5vw,104px);line-height:1.02;color:var(--fg-1);
  letter-spacing:.01em;white-space:nowrap;margin-bottom:clamp(28px,5vh,56px)}
.finish__inf{font-family:var(--font-mono);font-size:14px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--cyan-bright);margin-top:0}
.finish__row{display:flex;flex-wrap:wrap;gap:clamp(18px,4vw,32px);justify-content:center;
  align-items:center;margin-top:0}
.social{display:inline-flex;color:#fff;opacity:.82;transition:opacity .2s ease,transform .2s ease}
.social svg{width:26px;height:26px;display:block}
.social:hover{opacity:1;transform:translateY(-2px)}
.finish__legal{margin-top:18px;font-family:var(--font-mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}

/* placeholder note tag, sits on client-supplied media */
.supply{position:absolute;top:10px;right:10px;z-index:4;
  font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-900);background:var(--cyan-bright);padding:4px 8px;border-radius:var(--r-1);
  opacity:.9}

/* =====================================================================
   CUSTOM CURSOR (desktop, pointer-fine only)
   ===================================================================== */
.cursor{position:fixed;top:0;left:0;z-index:90;pointer-events:none;
  width:8px;height:8px;border-radius:50%;background:var(--cyan-bright);
  transform:translate(-50%,-50%);mix-blend-mode:screen;
  transition:width .25s var(--ease),height .25s var(--ease),background .25s var(--ease),opacity .3s}
.cursor.ring{width:38px;height:38px;background:transparent;
  border:1.5px solid var(--cyan-bright)}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* =====================================================================
   MOBILE  ·  most users are here. Tighten rhythm, force stacked shops.
   ===================================================================== */
/* Small screens have no room for the 3-up grid, so always show the
   stacked shops and hide the layout toggle entirely. */
@media (max-width: 900px){
  .shops-grid{display:none !important;}
  .shops-stacked{display:block !important;}
  .lswitch{display:none !important;}
}

@media (max-width: 760px){
  /* tighter vertical rhythm between sections */
  .sect{padding-block: clamp(28px, 4.5vh, 48px);}
  .sect--tight{padding-block: clamp(22px, 3.5vh, 38px);}
  .foundation .inner{padding-block: clamp(34px, 6vh, 56px);}
  .shell{max-width:none;}

  /* hero: keep the RIGHT of the photo (Nipsey) flush to the screen edge;
     the left (palms) is the side that crops away */
  .hero__img img{object-position:100% center}
  .hero__topbar{height:clamp(58px,9vh,78px);padding-inline:18px;gap:12px}
  .hero__mark{height:70%;max-width:46%}
  .hero__sub{font-size:11px;letter-spacing:.12em;gap:8px}

  /* pre-order: art on top, then list + button */
  .preorder{gap:22px}
  .po__art img{aspect-ratio:1/1}
  /* equalise the space above (cover→title) and below (title→list) */
  .stack{gap:14px}
  .po__title{font-size:clamp(38px,13vw,56px);line-height:.82;margin:0}
  .tracklist{margin-top:0}

  /* shop + foundation: consistent stack — image on top, content left,
     headings + body + buttons all left-aligned */
  .shop{display:flex;flex-direction:column;gap:20px;align-items:stretch}
  .shop__img{order:-1}
  .shop__img--logo{aspect-ratio:16/10;padding:clamp(22px,7%,40px)}
  .shop__img--logo img{width:min(56%,240px)}
  .shop__story .head{font-size:clamp(30px,9vw,46px) !important;text-align:left}
  .shop__story p{max-width:none}
  .shop__story .btn{align-self:flex-start}

  .foundation__grid{display:flex;flex-direction:column;gap:18px;margin-top:20px;align-items:stretch}
  .foundation__art{order:-1}
  .foundation__art--logo{margin-top:0}
  .foundation__art--logo img{width:min(64%,300px)}
  .foundation .head{font-size:clamp(30px,9vw,46px) !important;text-align:left}
  .foundation p{max-width:none}
  .foundation .cta-row{margin-top:22px}
  .foundation .cta-row .btn{flex:1 1 auto;justify-content:center}

  /* quote: a beat, but don't waste a whole tall screen */
  .quote{min-height:62svh}
  .quote__bar{max-width:none}

  /* videos + gallery headers sit closer to their content */
  .videos__track{gap:32px}

  /* finish: tighten */
  .finish__row{gap:8px 16px}
}

@media (max-width: 460px){
  .hero__topbar{height:clamp(56px,9vh,82px);padding-inline:14px;gap:10px}
  .hero__mark{height:74%;max-width:48%}
  .hero__sub{font-size:10px;letter-spacing:.1em;gap:7px}
  .tracklist li{font-size:12px;gap:10px}
  .tracklist .feat{font-size:10px}
}

/* =====================================================================
   UNIVERS EVERYWHERE  ·  condensed bold replaces Anton on the display
   heads (kept late so it wins over the per-class --font-display).
   ===================================================================== */
.head,.po__title,.quote__bar,.vslide__title,.shopcard__title,.finish__mark{
  font-family:var(--font-cond);font-weight:700;letter-spacing:.005em;
}

/* =====================================================================
   VIEW SWITCH  ·  whole-page layouts (original / paper)
   ===================================================================== */
/* view/shop/credit controls now live in the .dock (see above) */

/* =====================================================================
   ALTERNATE VIEWS  ·  shared — drop the background rails + shop toggle,
   force the stacked shops, and concentrate the copy (.x-lite hidden).
   ===================================================================== */
body[data-view="light"] .rail{display:none !important}
body[data-view="light"] .x-lite{display:none !important}
/* mobile header in paper view: white bar, black logo + black credit */
body[data-view="light"] .mobilebar{background:var(--paper)}
body[data-view="light"] .mobilebar__mark{filter:brightness(0)}
body[data-view="light"] .mobilebar__sub,
body[data-view="light"] .mobilebar__sub .sep{color:var(--ink-900)}
@media (min-width:1024px){
  body[data-view="light"] .page{padding-inline:0}
}

/* ---- PAPER · gallery-on-white, concentrated (light tokens flipped) ---- */
body[data-view="light"]{
  --bg:var(--paper);--surface:var(--paper-2);--border:var(--grey-line);
  --fg-1:var(--ink-900);--fg-2:#34495E;--fg-3:var(--grey);--line:var(--blue);
  background:var(--paper);color:var(--ink-900);
}
body[data-view="light"] .page{background:var(--paper)}
body[data-view="light"] .finish{background:var(--paper)}
body[data-view="light"] .finish__inf{color:var(--blue)}
body[data-view="light"] .vslide__tag{color:var(--blue)}
/* tracklist on white: the cyan numbers + gold features don't read — darken them */
body[data-view="light"] .tracklist .num{color:var(--blue)}
body[data-view="light"] .tracklist .feat{color:var(--ink-900)}
body[data-view="light"] .tracklist li{color:var(--fg-2)}
body[data-view="light"] .tracklist li.locked{color:var(--fg-3)}

/* =====================================================================
   REDUCED MOTION  ·  simple-fade fallbacks
   ===================================================================== */
@media (prefers-reduced-motion: reduce){
  .hero__img img{animation:none;transform:scale(1)}
  .hero__cueline::after{animation:none}
  .reveal,.head,.tracklist li,.settle img,.quote__cite{transition:opacity 300ms linear}
  .reveal{transform:none}
  .head--left,.head--right{transform:none}
  .tracklist li{transform:none}
  .settle img{transform:none!important}
  .quote__bar .w{opacity:1!important;animation:none}
  .cursor{display:none}
}