/* ════════════════════════════════════════════════════════════
   LORENSA ✶ THE WORLD OF
   Nocturnal gloss ✶ renaissance ferocity ✶ monochrome + pink
   Anton / Instrument Serif / Space Grotesk — self-hosted
   ════════════════════════════════════════════════════════════ */

/* ---------- fonts: see assets/css/fonts.css ---------- */

/* ---------- tokens ---------- */
:root{
  --bg:       #070707;
  --bg-lift:  #0e0e0e;
  --bone:     #f4f1ea;
  --ink:      #0a0a0a;
  --muted:    rgba(244,241,234,.58);
  --faint:    rgba(244,241,234,.30);
  --line:     rgba(244,241,234,.14);
  --line-hard:rgba(244,241,234,.4);
  --pink:     #ff1a8c;
  --pink-dim: rgba(255,26,140,.16);
  --f-display:'Anton', 'Arial Narrow', Impact, sans-serif;
  --f-serif:  'Instrument Serif', Georgia, serif;
  --f-body:   'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --nav-h:    72px;
  --pad:      clamp(20px, 4vw, 64px);
}

/* ---------- reset / base ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; overflow-x:clip; }
body{
  background:var(--bg);
  color:var(--bone);
  font-family:var(--f-body);
  font-size:16px; font-weight:300;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img,svg,video,iframe{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul,ol{ list-style:none; }
::selection{ background:var(--pink); color:#000; }
:focus-visible{ outline:2px solid var(--pink); outline-offset:3px; }

/* film grain over everything */
body::after{
  content:""; position:fixed; inset:-50%; z-index:2000; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  opacity:.055;
  animation:grain 9s steps(6) infinite;
}
@keyframes grain{
  0%,100%{ transform:translate(0,0); } 20%{ transform:translate(-2%,3%); }
  40%{ transform:translate(3%,-2%); } 60%{ transform:translate(-3%,-3%); } 80%{ transform:translate(2%,2%); }
}

/* thin pink scrollbar */
::-webkit-scrollbar{ width:5px; height:5px; }
::-webkit-scrollbar-track{ background:#000; }
::-webkit-scrollbar-thumb{ background:var(--pink); }

.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;
}
.skip-link{
  position:fixed; top:-120px; left:16px; z-index:3000;
  background:var(--pink); color:#000; padding:10px 16px;
  font-weight:700; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  transition:top .2s;
}
.skip-link:focus{ top:12px; }

/* ---------- custom cursor ---------- */
@media (pointer:fine){
  .cursor-dot{
    position:fixed; top:0; left:0; z-index:2500; pointer-events:none;
    width:10px; height:10px; border-radius:50%;
    background:var(--pink);
    transform:translate(-50%,-50%);
    transition:width .25s, height .25s, opacity .25s, background .25s;
    mix-blend-mode:normal;
  }
  body.cursor-on *{ cursor:none !important; }
  .cursor-dot.is-link{ width:56px; height:56px; background:transparent; border:1.5px solid var(--pink); }
  .cursor-dot.is-hidden{ opacity:0; }
}
@media (pointer:coarse){ .cursor-dot{ display:none; } }

/* ---------- type utilities ---------- */
.display{
  font-family:var(--f-display); font-weight:400;
  text-transform:uppercase; line-height:.82; letter-spacing:.01em;
}
.serif-it{
  font-family:var(--f-serif); font-style:italic; font-weight:400;
  text-transform:none; letter-spacing:0;
}
.outline{
  color:transparent;
  -webkit-text-stroke:1.5px var(--bone);
}
.outline--pink{ -webkit-text-stroke:1.5px var(--pink); }
.chrome{
  background:linear-gradient(178deg,#ffffff 8%,#d9d9d9 32%,#7a7a7a 50%,#efefef 60%,#8f8f8f 82%,#dcdcdc 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.pink{ color:var(--pink); }
.label{
  font-family:var(--f-body); font-size:.68rem; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted);
}
.label--pink{ color:var(--pink); }
.label--bone{ color:var(--bone); }
.lead{
  font-size:clamp(1.05rem, 1.4vw, 1.3rem); font-weight:300;
  line-height:1.65; color:var(--muted); max-width:60ch;
}
.lead strong{ color:var(--bone); font-weight:500; }
.lead a{ color:var(--pink); }

/* rotated pink stamp */
.stamp{
  display:inline-block;
  font-family:var(--f-display); text-transform:uppercase;
  background:var(--pink); color:#000;
  font-size:clamp(.8rem, 1.4vw, 1.05rem); letter-spacing:.06em;
  padding:.5em 1em .45em;
  transform:rotate(-3.5deg);
  box-shadow:4px 4px 0 rgba(255,26,140,.25);
}
.stamp--flat{ transform:none; }

/* spinning circle badge */
.badge-spin{
  width:clamp(96px, 10vw, 150px); aspect-ratio:1;
  position:relative; display:block;
}
.badge-spin svg{ width:100%; height:100%; animation:spin 16s linear infinite; }
.badge-spin svg text{
  font-family:var(--f-body); font-size:9.2px; font-weight:500;
  letter-spacing:.32em; text-transform:uppercase; fill:var(--bone);
}
.badge-spin .badge-core{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; color:var(--pink);
}
.badge-spin:hover svg text{ fill:var(--pink); }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- header ---------- */
.site-head{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:0 var(--pad);
  transition:background .35s, border-color .35s, backdrop-filter .35s;
  border-bottom:1px solid transparent;
}
.site-head.scrolled{
  background:rgba(7,7,7,.82);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom-color:var(--line);
}
.brand{
  font-family:var(--f-display); font-size:1.45rem; letter-spacing:.06em;
  text-transform:uppercase; line-height:1; display:flex; align-items:center; gap:.4em;
}
.brand .star{ color:var(--pink); font-size:.75em; transform:translateY(-.06em); }
.brand:hover .star{ animation:spin 1.2s linear infinite; }
.site-nav{ display:flex; gap:clamp(16px, 2.4vw, 36px); align-items:center; }
.site-nav a{
  font-size:.7rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted); position:relative; padding:6px 0;
}
.site-nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1.5px;
  background:var(--pink); transition:right .25s;
}
.site-nav a:hover{ color:var(--bone); }
.site-nav a:hover::after, .site-nav a[aria-current="page"]::after{ right:0; }
.site-nav a[aria-current="page"]{ color:var(--bone); }
.nav-cta{
  font-family:var(--f-display); font-size:.82rem; letter-spacing:.1em; text-transform:uppercase;
  background:var(--pink); color:#000; padding:10px 18px 9px;
  clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  transition:background .2s, color .2s;
}
.nav-cta:hover{ background:var(--bone); }

.burger{ display:none; width:46px; height:46px; position:relative; z-index:220; }
.burger span{
  position:absolute; left:11px; right:11px; height:2px; background:var(--bone);
  transition:transform .3s, opacity .3s;
}
.burger span:nth-child(1){ top:17px; } .burger span:nth-child(2){ top:23px; } .burger span:nth-child(3){ top:29px; }
body.menu-open .burger span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
body.menu-open .burger span:nth-child(2){ opacity:0; }
body.menu-open .burger span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* full-screen menu */
.menu-overlay{
  position:fixed; inset:0; z-index:200;
  background:var(--bg);
  display:flex; flex-direction:column; justify-content:center; gap:8px;
  padding:calc(var(--nav-h) + 10px) var(--pad) 40px;
  opacity:0; visibility:hidden; transition:opacity .35s, visibility .35s;
}
body.menu-open .menu-overlay{ opacity:1; visibility:visible; }
body.menu-open{ overflow:hidden; }
.menu-overlay nav a{
  display:flex; align-items:baseline; gap:18px;
  font-family:var(--f-display); text-transform:uppercase; line-height:1;
  font-size:clamp(2.5rem, 10.5vw, 5.6rem);
  padding:.32rem 0; border-bottom:1px solid var(--line);
  transform:translateY(24px); opacity:0; transition:transform .5s, opacity .5s, color .2s;
}
body.menu-open .menu-overlay nav a{ transform:none; opacity:1; }
.menu-overlay nav a:nth-child(2){ transition-delay:.05s; }
.menu-overlay nav a:nth-child(3){ transition-delay:.1s; }
.menu-overlay nav a:nth-child(4){ transition-delay:.15s; }
.menu-overlay nav a:nth-child(5){ transition-delay:.2s; }
.menu-overlay nav a:hover{ color:var(--pink); }
.menu-overlay nav a .m-num{
  font-family:var(--f-serif); font-style:italic; font-size:.32em; color:var(--pink);
}
.menu-foot{
  display:flex; flex-wrap:wrap; gap:14px 28px; margin-top:30px;
}
.menu-foot a{ font-size:.7rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.menu-foot a:hover{ color:var(--pink); }

/* ---------- tickers ---------- */
.ticker{ overflow:hidden; user-select:none; }
.ticker__track{ display:flex; width:max-content; animation:tick 30s linear infinite; }
.ticker__track span{
  font-family:var(--f-display); text-transform:uppercase; white-space:nowrap;
  font-size:clamp(1.15rem, 2.2vw, 1.8rem); padding:.55em 0; letter-spacing:.04em;
}
.ticker__track span::after{ content:"\00a0\00a0✶\00a0\00a0"; }
@keyframes tick{ to{ transform:translateX(-50%); } }
.ticker--pink{ background:var(--pink); color:#000; }
.ticker--ghost{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.ticker--ghost .ticker__track{ animation-direction:reverse; animation-duration:38s; }
.ticker--ghost .ticker__track span{
  color:transparent; -webkit-text-stroke:1px var(--faint);
}
.ticker:hover .ticker__track{ animation-play-state:paused; }

/* giant marquee divider */
.marq-giant{ overflow:hidden; user-select:none; pointer-events:none; }
.marq-giant .ticker__track{ animation-duration:60s; }
.marq-giant .ticker__track span{
  font-size:clamp(5rem, 15vw, 15rem); line-height:1; padding:.05em 0;
  color:transparent; -webkit-text-stroke:1.5px var(--line-hard);
}
.marq-giant .ticker__track span::after{ content:"\00a0✶\00a0"; -webkit-text-stroke:0; color:var(--pink); }

/* ---------- hero ---------- */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:calc(var(--nav-h) + 20px) var(--pad) 0;
  overflow:hidden; isolation:isolate;
}
.hero-wall{
  position:absolute; inset:auto 0 auto 0; top:var(--nav-h); z-index:-3;
  display:flex; flex-direction:column; gap:.5vw;
  transform:rotate(0deg);
}
.hero-wall span{
  font-family:var(--f-display); text-transform:uppercase; white-space:nowrap;
  font-size:clamp(4rem, 10.5vw, 10.5rem); line-height:.9;
  color:transparent; -webkit-text-stroke:1px rgba(244,241,234,.10);
  animation:drift 40s linear infinite alternate;
}
.hero-wall span:nth-child(2){ animation-duration:52s; animation-direction:alternate-reverse; margin-left:-6vw; }
.hero-wall span:nth-child(3){ animation-duration:64s; margin-left:-12vw; }
@keyframes drift{ from{ transform:translateX(-3%);} to{ transform:translateX(3%);} }

.hero-portrait{
  position:absolute; z-index:-1;
  right:var(--pad); top:calc(var(--nav-h) + 4vh);
  width:clamp(240px, 30vw, 460px);
  aspect-ratio:4/5;
}
.hero-portrait .frame{ height:100%; }
.hero-portrait .frame img{ height:100%; }
.hero-portrait figcaption{
  margin-top:12px; display:flex; justify-content:space-between; gap:10px;
}

.hero-kicker{ position:relative; }
.hero-kicker .serif-it{
  display:block; font-size:clamp(1.5rem, 3vw, 2.6rem); color:var(--pink);
  margin-bottom:.2em;
}
.hero-title{
  font-size:clamp(4rem, 17.5vw, 17.5rem);
  margin-left:-.04em;
  position:relative; z-index:1;
}
.hero-stamp{
  position:absolute; z-index:2;
  right:clamp(6%, 12vw, 26%); top:-1.2em;
}
.hero-stamp .stamp{ font-size:clamp(.9rem, 1.7vw, 1.3rem); }
.hero-badge{
  position:absolute; z-index:5;
  right:calc(var(--pad) + clamp(240px, 30vw, 460px) - 62px);
  top:calc(var(--nav-h) + 4vh - 34px);
}
.hero-badge .badge-spin{ width:clamp(96px, 9vw, 128px); }
.hero-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px 34px;
  border-top:1px solid var(--line);
  margin-top:clamp(18px, 3.5vh, 40px);
  padding:20px 0 22px;
}
.hero-meta .spacer{ flex:1; }
.hero-scroll{
  display:inline-flex; align-items:center; gap:10px;
}
.hero-scroll::after{
  content:""; width:1.5px; height:34px; background:var(--pink);
  animation:pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ transform:scaleY(.35); opacity:.4;} 50%{ transform:scaleY(1); opacity:1;} }

/* ---------- frames (image treatment) ---------- */
.frame{
  position:relative; display:block;
}
.frame::before{
  content:""; position:absolute; inset:0; z-index:-1;
  border:1.5px solid var(--pink);
  transform:translate(12px,12px);
  transition:transform .3s;
}
.frame:hover::before{ transform:translate(6px,6px); }
.frame .frame-media{
  position:relative; overflow:hidden; background:var(--bg-lift);
  border:1px solid var(--line);
  clip-path:polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}
.frame img{
  width:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.14) brightness(.94);
  transition:filter .5s, transform .7s;
}
.frame:hover img{ filter:grayscale(0) contrast(1.02); transform:scale(1.025); }
.frame .frame-tag{
  position:absolute; top:14px; left:14px; z-index:3;
}
.frame.is-dead .frame-media::after{
  content:"L ✶"; position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-display); font-size:clamp(3rem, 7vw, 6rem);
  color:transparent; -webkit-text-stroke:1.5px rgba(244,241,234,.25);
  background:
    radial-gradient(circle at 20% 25%, var(--pink-dim), transparent 45%),
    radial-gradient(rgba(244,241,234,.10) 1px, transparent 1px);
  background-size:auto, 16px 16px;
}

/* ---------- video facade ---------- */
.yt{
  position:relative; aspect-ratio:16/9; background:var(--bg-lift); overflow:hidden;
}
.yt img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.12) brightness(.92);
  transition:filter .5s, transform .7s;
}
.yt:hover img{ filter:grayscale(0); transform:scale(1.02); }
.yt iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.yt-play{
  position:absolute; inset:0; z-index:4;
  display:flex; align-items:center; justify-content:center;
}
.yt-play span{
  display:inline-flex; align-items:center; gap:12px;
  background:var(--pink); color:#000;
  font-family:var(--f-display); font-size:clamp(1.05rem, 1.9vw, 1.5rem);
  text-transform:uppercase; letter-spacing:.05em;
  padding:.6em 1.25em .55em;
  clip-path:polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
  transition:transform .2s, background .2s;
}
.yt-play span::before{ content:"▶"; font-size:.75em; }
.yt-play:hover span{ transform:scale(1.07); }
.yt.is-dead{
  background:
    radial-gradient(circle at 78% 20%, var(--pink-dim), transparent 50%),
    radial-gradient(rgba(244,241,234,.09) 1px, transparent 1px) 0 0/18px 18px,
    var(--bg-lift);
}
.yt.is-dead::before{
  content:attr(data-title); position:absolute; left:18px; bottom:14px; z-index:1;
  font-family:var(--f-serif); font-style:italic;
  font-size:clamp(1rem, 1.8vw, 1.4rem); color:var(--muted);
}

/* ---------- sections ---------- */
.section{ position:relative; padding:clamp(64px, 10vw, 140px) var(--pad); }
.section--line{ border-top:1px solid var(--line); }
.section--tight{ padding-top:clamp(30px, 4vw, 60px); }
.sec-head{
  position:relative;
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
  margin-bottom:clamp(30px, 5vw, 64px);
}
.sec-head__left{ display:flex; flex-direction:column; gap:12px; }
.sec-kicker{ display:flex; align-items:center; gap:14px; }
.sec-kicker .k-num{
  font-family:var(--f-serif); font-style:italic; font-size:1.5rem; color:var(--pink);
}
.sec-title{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(3rem, 9vw, 8.5rem);
  text-transform:uppercase; line-height:.84;
}
.num-ghost{
  position:absolute; z-index:-1; top:-.35em; right:0;
  font-family:var(--f-display); line-height:1;
  font-size:clamp(8rem, 22vw, 22rem);
  color:transparent; -webkit-text-stroke:1.5px rgba(244,241,234,.09);
  pointer-events:none; user-select:none;
}

/* arrow link */
.arrow-link{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.72rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  color:var(--bone);
}
.arrow-link::after{ content:"→"; color:var(--pink); transition:transform .25s; }
.arrow-link:hover{ color:var(--pink); }
.arrow-link:hover::after{ transform:translateX(6px); }

/* buttons */
.btn{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--f-display); font-size:clamp(.95rem, 1.4vw, 1.15rem);
  letter-spacing:.08em; text-transform:uppercase;
  background:var(--pink); color:#000;
  padding:16px 26px 14px;
  clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
  transition:background .2s, color .2s, transform .2s;
}
.btn:hover{ background:var(--bone); }
.btn--ghost{
  background:transparent; color:var(--bone);
  box-shadow:inset 0 0 0 1.5px rgba(244,241,234,.5);
}
.btn--ghost:hover{ background:transparent; color:var(--pink); box-shadow:inset 0 0 0 1.5px var(--pink); }
.btn--dark{ background:var(--ink); color:var(--bone); }
.btn--dark:hover{ background:var(--pink); color:#000; }

/* ---------- split (latest) ---------- */
.split{
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(28px, 5vw, 80px); align-items:start;
}
.split__copy{ position:sticky; top:calc(var(--nav-h) + 28px); }
.split__copy .serif-lead{
  font-family:var(--f-serif); font-style:italic;
  font-size:clamp(1.4rem, 2.4vw, 2rem); color:var(--muted);
  margin:16px 0 10px;
}
.split__copy .giant{
  font-family:var(--f-display); text-transform:uppercase; line-height:.85;
  font-size:clamp(3.4rem, 8.5vw, 8rem);
  margin-bottom:24px;
}
.split__copy .giant > span{ display:block; }
.split__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }

/* ---------- cards / strips ---------- */
.strip{
  display:grid; grid-auto-flow:column;
  grid-auto-columns:clamp(270px, 31vw, 480px);
  gap:clamp(16px, 2.2vw, 32px);
  overflow-x:auto; padding:18px 4px 20px;
  scroll-snap-type:x mandatory;
  scrollbar-width:thin; scrollbar-color:var(--pink) transparent;
}
.strip > *{ scroll-snap-align:start; }
.card{
  display:block; position:relative;
  border:1px solid var(--line); background:var(--bg-lift);
  transition:border-color .3s, transform .3s;
}
.card:hover{ border-color:var(--pink); transform:translateY(-4px); }
.card__media{ position:relative; aspect-ratio:16/10; overflow:hidden; }
.card__media img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.12);
  transition:filter .45s, transform .6s;
}
.card:hover .card__media img{ filter:grayscale(0); transform:scale(1.04); }
.card__media.is-dead{
  background:
    radial-gradient(circle at 30% 30%, var(--pink-dim), transparent 55%),
    radial-gradient(rgba(244,241,234,.09) 1px, transparent 1px) 0 0/16px 16px,
    var(--bg-lift);
}
.card__num{
  position:absolute; top:-14px; left:10px; z-index:2;
  font-family:var(--f-display); line-height:1;
  font-size:clamp(3.4rem, 6vw, 5.4rem);
  color:transparent; -webkit-text-stroke:1.5px var(--bone);
  text-shadow:none; pointer-events:none;
}
.card__body{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 18px; border-top:1px solid var(--line);
}
.card__title{
  font-family:var(--f-display); text-transform:uppercase;
  font-size:clamp(1.2rem, 2vw, 1.7rem); letter-spacing:.02em;
}
.card:hover .card__title{ color:var(--pink); }
.card__meta{ font-family:var(--f-serif); font-style:italic; font-size:.95rem; color:var(--muted); white-space:nowrap; }

/* music grid */
.music-grid{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(18px, 2.6vw, 34px);
}
.music-grid .card--wide{ grid-column:1 / -1; }
.card--wide .card__media{ aspect-ratio:21/9; }
.card--wide .card__title{ font-size:clamp(2rem, 4.4vw, 3.6rem); }
.card--wide .card__stamp{ position:absolute; top:18px; right:18px; z-index:3; }

/* ---------- quotes ---------- */
.quote-wall{ display:grid; gap:clamp(40px, 6vw, 76px); }
.quote{ text-align:center; position:relative; }
.quote .q-star{ display:block; color:var(--pink); font-size:1.1rem; margin-bottom:18px; }
.quote blockquote{
  font-family:var(--f-display); text-transform:uppercase; line-height:.95;
  font-size:clamp(1.8rem, 4.8vw, 4.4rem);
  max-width:24ch; margin:0 auto;
}
.quote--pink blockquote{ color:var(--pink); }
.quote--outline blockquote{ color:transparent; -webkit-text-stroke:1.5px var(--bone); }
.quote footer{
  margin-top:16px;
  font-family:var(--f-serif); font-style:italic;
  font-size:clamp(1rem, 1.6vw, 1.25rem); color:var(--muted);
}
.quote footer a{ color:var(--pink); font-family:var(--f-body); font-style:normal; font-size:.62rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase; margin-left:14px; }
.quote footer a:hover{ text-decoration:underline; }

/* ---------- inverted bone sections ---------- */
.bone{
  background:var(--bone); color:var(--ink);
}
.bone .label{ color:rgba(10,10,10,.55); }
.bone .label--pink{ color:var(--pink); }
.bone .lead{ color:rgba(10,10,10,.72); }
.bone .lead strong{ color:var(--ink); }
.bone .outline{ -webkit-text-stroke-color:var(--ink); }
.bone ::selection{ background:var(--ink); color:var(--bone); }

/* prose (about) */
.prose{
  max-width:70ch;
  font-size:clamp(1.1rem, 1.5vw, 1.4rem); font-weight:300; line-height:1.7;
}
.prose p + p{ margin-top:1.6em; }
.prose strong{ font-weight:500; }
.prose .dcap::first-letter{
  font-family:var(--f-serif); font-style:italic; font-weight:400;
  font-size:3.2em; float:left; line-height:.8;
  padding:.08em .12em 0 0; color:var(--pink);
}
.pull{
  font-family:var(--f-display); text-transform:uppercase; line-height:.9;
  font-size:clamp(2.2rem, 6.5vw, 5.6rem);
  margin:clamp(44px, 8vw, 90px) 0;
  max-width:16ch;
}
.big-quote{
  font-family:var(--f-serif); font-style:italic;
  font-size:clamp(1.7rem, 3.6vw, 3.1rem); line-height:1.25;
  max-width:26ch;
  margin:clamp(44px, 8vw, 90px) auto;
  text-align:center;
}
.big-quote .attr{
  display:block; margin-top:20px;
  font-family:var(--f-body); font-style:normal;
  font-size:.68rem; font-weight:500; letter-spacing:.26em; text-transform:uppercase;
  color:var(--pink);
}
.route{ display:flex; flex-wrap:wrap; gap:10px 20px; align-items:center; }
.route .label + .label::before{ content:"→\00a0\00a0"; color:var(--pink); }

/* ---------- release pages ---------- */
.page-hero{
  position:relative;
  padding:calc(var(--nav-h) + clamp(52px, 9vw, 120px)) var(--pad) clamp(32px, 5vw, 64px);
  overflow:hidden;
}
.page-hero .serif-over{
  display:block; font-family:var(--f-serif); font-style:italic;
  font-size:clamp(1.4rem, 2.8vw, 2.4rem); color:var(--pink); margin-bottom:.25em;
}
.page-title{
  font-family:var(--f-display); text-transform:uppercase; line-height:.82;
  font-size:clamp(3.6rem, 13.5vw, 13rem);
  margin-left:-.03em;
}
.page-hero .lead{ margin-top:28px; }
.crumbs{ display:flex; align-items:center; gap:18px; margin-bottom:26px; }
.crumbs a:hover{ color:var(--pink); }
.rel-stamp{ position:absolute; right:var(--pad); top:calc(var(--nav-h) + clamp(40px, 7vw, 90px)); }

.release-meta{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  border:1px solid var(--line); border-right:0;
  margin-top:clamp(28px, 4vw, 48px);
}
.release-meta > *{
  padding:18px 20px; border-right:1px solid var(--line);
  display:flex; flex-direction:column; gap:6px;
}
.release-meta b{
  font-family:var(--f-serif); font-style:italic; font-weight:400;
  font-size:1.15rem; color:var(--bone);
}
.release-meta a b{ color:var(--pink); }
.release-body{ padding:0 var(--pad) clamp(64px, 10vw, 140px); display:grid; gap:clamp(48px, 7vw, 100px); }
.rel-sec{ position:relative; }
.rel-sec__head{
  display:flex; align-items:baseline; gap:18px;
  border-top:1px solid var(--line);
  padding-top:18px; margin-bottom:26px;
}
.rel-sec__head h2{
  font-family:var(--f-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(1.6rem, 3.4vw, 2.8rem);
}
.rel-sec__head .k-num{ font-family:var(--f-serif); font-style:italic; color:var(--pink); font-size:1.3rem; }
.rel-sec__head .side{ margin-left:auto; }
.rel-sec .lead{ margin-top:24px; }

/* SOON block v2 */
.soon{
  position:relative;
  border:1px solid var(--line);
  background:
    radial-gradient(rgba(244,241,234,.07) 1px, transparent 1px) 0 0/18px 18px,
    var(--bg-lift);
  padding:clamp(34px, 5vw, 64px);
  display:flex; flex-wrap:wrap; align-items:center; gap:20px 40px;
  overflow:hidden;
}
.soon .soon-word{
  font-family:var(--f-display); text-transform:uppercase; line-height:1;
  font-size:clamp(2.8rem, 7vw, 5.8rem);
  color:transparent; -webkit-text-stroke:1.5px rgba(244,241,234,.45);
}
.soon .soon-note{
  font-family:var(--f-serif); font-style:italic;
  font-size:clamp(1.05rem, 1.6vw, 1.3rem); color:var(--muted); max-width:40ch;
}
.soon .stamp{ margin-left:auto; font-size:.72rem; }

/* pager */
.pager{ display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line); }
.pager a{
  padding:clamp(28px, 4.5vw, 52px) var(--pad);
  display:flex; flex-direction:column; gap:12px;
  transition:background .25s;
}
.pager a:hover{ background:var(--bg-lift); }
.pager a + a{ border-left:1px solid var(--line); text-align:right; align-items:flex-end; }
.pager .pager__dir{ font-family:var(--f-serif); font-style:italic; font-size:1.05rem; color:var(--pink); }
.pager .pager__title{
  font-family:var(--f-display); text-transform:uppercase;
  font-size:clamp(1.7rem, 3.8vw, 3.2rem);
}
.pager a:hover .pager__title{ color:var(--pink); }

/* ---------- press page ---------- */
.press-also{
  display:flex; flex-wrap:wrap; gap:14px 44px; align-items:baseline; justify-content:center;
  padding-top:clamp(40px, 6vw, 70px);
}
.press-also .also-name{
  font-family:var(--f-display); text-transform:uppercase;
  font-size:clamp(1.4rem, 3.2vw, 2.4rem);
  color:transparent; -webkit-text-stroke:1.2px var(--faint);
  transition:color .3s;
}
.press-also .also-name:hover{ color:var(--faint); }

/* ---------- gallery ---------- */
.gallery-hero{
  min-height:68svh; display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--nav-h) + 40px) var(--pad) clamp(40px, 6vw, 80px);
  position:relative; overflow:hidden;
}
.gallery-hero > .label{ margin-bottom:20px; }
.giant-soon{
  font-family:var(--f-display); text-transform:uppercase; line-height:.8;
  font-size:clamp(5.5rem, 26vw, 24rem);
  margin-left:-.03em;
}
.polaroids{
  display:flex; flex-wrap:wrap; gap:clamp(18px, 3vw, 40px);
  padding:0 var(--pad) clamp(40px, 6vw, 80px);
}
.pol{
  flex:1 1 200px; max-width:280px;
  background:var(--bg-lift); border:1px solid var(--line);
  padding:12px 12px 16px;
  transform:rotate(var(--r, -2deg));
  transition:transform .3s, border-color .3s;
}
.pol:hover{ transform:rotate(0) translateY(-6px); border-color:var(--pink); }
.pol .pol-img{
  aspect-ratio:4/5; position:relative;
  background:
    radial-gradient(circle at 30% 25%, var(--pink-dim), transparent 50%),
    radial-gradient(rgba(244,241,234,.08) 1px, transparent 1px) 0 0/14px 14px,
    #0b0b0b;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.pol .pol-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.1); transition:filter .4s; }
.pol:hover .pol-img img{ filter:grayscale(0); }
.pol .pol-img .pol-ghost{
  font-family:var(--f-display); font-size:2.6rem;
  color:transparent; -webkit-text-stroke:1.2px rgba(244,241,234,.22);
}
.pol .pol-cap{
  display:flex; justify-content:space-between; gap:8px; margin-top:12px;
}

/* thumbnail strip (gallery interim) */
.thumb-grid{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:12px; }
.thumb-grid a{ position:relative; aspect-ratio:3/4; overflow:hidden; border:1px solid var(--line); background:var(--bg-lift); }
.thumb-grid img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.1); transition:filter .4s, transform .5s; }
.thumb-grid a:hover img{ filter:grayscale(0); transform:scale(1.05); }
.thumb-grid a:hover{ border-color:var(--pink); }
.thumb-grid .t-label{
  position:absolute; left:10px; bottom:10px; z-index:2;
  font-size:.6rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--bone); text-shadow:0 1px 10px rgba(0,0,0,.9);
}

/* ---------- spotify ---------- */
.spotify-wrap{ border:1px solid var(--line); background:var(--bg-lift); padding:clamp(14px, 2vw, 26px); }
.spotify-wrap iframe{ width:100%; height:352px; border:0; }

/* ---------- footer ---------- */
.site-foot{ margin-top:clamp(64px, 10vw, 140px); }
.foot-links{ border-top:1px solid var(--line); }
.foot-links a{
  position:relative; z-index:0; overflow:hidden;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:clamp(16px, 2.4vw, 28px) var(--pad);
  border-bottom:1px solid var(--line);
  font-family:var(--f-display); text-transform:uppercase; line-height:1;
  font-size:clamp(2rem, 6vw, 4.8rem);
  transition:color .3s, padding-left .4s cubic-bezier(.16,1,.3,1);
}
.foot-links a::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--pink); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .55s cubic-bezier(.76,0,.24,1);
}
.foot-links a .hint{
  font-family:var(--f-serif); font-style:italic; font-size:.3em; color:var(--faint);
  letter-spacing:0; text-transform:none; transition:color .3s;
}
.foot-links a::after{ content:"↗"; color:var(--faint); font-size:.45em; transition:color .3s, transform .3s; }
.foot-links a:hover{ color:#000; padding-left:calc(var(--pad) + 18px); }
.foot-links a:hover::before{ transform:scaleX(1); }
.foot-links a:hover .hint{ color:rgba(0,0,0,.6); }
.foot-links a:hover::after{ color:#000; transform:translate(6px,-6px); }
.foot-bottom{
  display:flex; flex-wrap:wrap; gap:12px 34px; align-items:center; justify-content:space-between;
  padding:26px var(--pad) 34px;
}
.foot-bottom .label{ font-size:.62rem; }
.foot-bottom .serif-it{ color:var(--pink); font-size:1rem; }

/* ---------- reveal ---------- */
.rv{ opacity:0; transform:translateY(30px); transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
.rv.in{ opacity:1; transform:none; }
[data-stagger] > *{ transition-delay:calc(var(--i, 0) * 90ms); }

/* ---------- responsive ---------- */
@media (max-width: 1080px){
  .hero-portrait{ opacity:.55; }
}
@media (max-width: 980px){
  .site-nav, .nav-cta{ display:none; }
  .burger{ display:block; }
  .split{ grid-template-columns:1fr; }
  .split__copy{ position:static; }
  .music-grid{ grid-template-columns:1fr; }
  .thumb-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .thumb-grid a:nth-child(n+4){ display:none; }
  .hero-portrait{
    position:relative; right:auto; top:auto; width:min(72vw, 340px);
    margin:0 0 26px; opacity:1; order:-1;
  }
  .hero{ justify-content:flex-end; }
  .hero-badge{ display:none; }
  .hero-stamp{ position:static; display:inline-block; margin:14px 0 0; }
  .release-meta{ grid-template-columns:1fr 1fr; border-right:1px solid var(--line); border-bottom:0; }
  .release-meta > *{ border-bottom:1px solid var(--line); border-right:0; }
  .release-meta > *:nth-child(odd){ border-right:1px solid var(--line); }
}
@media (max-width: 640px){
  .sec-head{ flex-direction:column; align-items:flex-start; gap:16px; }
  .pager{ grid-template-columns:1fr; }
  .pager a + a{ border-left:0; border-top:1px solid var(--line); text-align:left; align-items:flex-start; }
  .quote blockquote{ font-size:clamp(1.6rem, 8vw, 2.4rem); }
  .release-meta{ grid-template-columns:1fr; }
  .release-meta > *:nth-child(odd){ border-right:0; }
}

/* ════════════════════════════════════════════════════════════
   MOTION LAYER v3
   ════════════════════════════════════════════════════════════ */
:root{ --ease-out:cubic-bezier(.16,1,.3,1); --ease-io:cubic-bezier(.76,0,.24,1); }

/* scroll progress */
.progress{
  position:fixed; top:0; left:0; z-index:2600; pointer-events:none;
  width:100%; height:2px; background:var(--pink);
  transform-origin:0 50%; transform:scaleX(0);
}

/* ambient spotlight that follows the pointer */
.spot{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  mix-blend-mode:screen; opacity:0; transition:opacity .8s;
  background:radial-gradient(40vmax 40vmax at var(--mx,50%) var(--my,35%),
    rgba(255,26,140,.14), rgba(255,26,140,.05) 34%, transparent 68%);
}
body.spot-on .spot{ opacity:1; }

/* page-transition curtain */
.curtain{
  position:fixed; inset:0; z-index:2400; pointer-events:none;
  background:var(--pink); transform:translateY(101%);
  display:flex; align-items:center; justify-content:center;
}
.curtain::after{
  content:"✶"; font-size:14vmin; color:#000; line-height:1;
  animation:spin 3s linear infinite;
}
html.nav-in .curtain{ transform:none; }
.curtain.leaving{ transition:transform .55s var(--ease-io); transform:none; pointer-events:auto; }
html.nav-in .curtain.entering{ transition:transform .75s var(--ease-io) .06s; transform:translateY(-101%); }

/* preloader (home) */
.preloader{
  position:fixed; inset:0; z-index:2450; background:var(--bg);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:var(--pad); overflow:hidden;
}
body.is-loading{ overflow:hidden; }
.pre-mark{
  position:absolute; top:22px; left:var(--pad);
  font-family:var(--f-display); font-size:1.45rem; letter-spacing:.06em; text-transform:uppercase;
}
.pre-mark span{ color:var(--pink); }
.pre-words{
  position:absolute; right:var(--pad); bottom:calc(var(--pad) + 46px);
  text-align:right; font-family:var(--f-serif); font-style:italic;
  font-size:clamp(1.15rem, 2.2vw, 1.9rem); color:var(--muted); line-height:1.25;
}
.pre-count{
  font-family:var(--f-display); font-size:clamp(5.5rem, 20vw, 17rem);
  line-height:.8; margin-left:-.03em; display:flex; align-items:baseline;
}
.pre-count small{
  font-family:var(--f-serif); font-style:italic; font-size:.2em;
  color:var(--pink); margin-left:.15em;
}
.pre-bar{ height:2px; background:var(--line); margin-top:26px; }
.pre-bar i{ display:block; height:100%; width:0; background:var(--pink); }
.pre-curtain{
  position:absolute; inset:0; background:var(--pink); transform:translateY(101%);
}
.preloader.wipe .pre-curtain{ transition:transform .5s var(--ease-io); transform:none; }
.preloader.done{ transition:transform .85s var(--ease-io); transform:translateY(-101%); }

/* hero intro sequence */
[data-intro]{
  opacity:0; transform:translateY(24px);
  transition:opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out);
  transition-delay:var(--d, 0s);
}
body.ready [data-intro]{ opacity:1; transform:none; }
.hero-stamp[data-intro]{ transform:translateY(24px) rotate(-14deg) scale(.9); }

/* masked word / char reveals */
.tsplit .w{
  display:inline-block;
  clip-path:inset(-.4em -.3em -.16em -.3em);
}
.tsplit .wi{
  display:inline-block;
  transform:translateY(1.5em) rotate(2deg); transform-origin:0 100%;
  transition:transform 1.15s var(--ease-out);
  transition-delay:calc(var(--i, 0) * 42ms);
  will-change:transform;
}
.tsplit.in .wi{ transform:none; }
.hero-title .w{ clip-path:inset(-.3em -.1em -.15em -.1em); }
.hero-title .wi{ transform:translateY(1.25em) rotate(0); transition-duration:1.25s; }
body.ready .hero-title .wi{ transform:none; transition-delay:calc(.28s + var(--i, 0) * 60ms); }
.giant-soon .wi{ transition-duration:1.3s; transition-delay:calc(var(--i,0) * 70ms); }

/* media clip reveals */
.rv-clip{
  clip-path:inset(0 100% 0 0);
  transition:clip-path 1.25s var(--ease-io);
}
.rv-clip img{
  transform:scale(1.18);
  transition:transform 1.6s var(--ease-out) .05s, filter .5s;
}
.rv-clip.in{ clip-path:inset(0 -18px -18px 0); }
.rv-clip.in img{ transform:none; }
.card__media.rv-clip.in{ clip-path:inset(0 0 0 0); }
.card:hover .card__media.rv-clip.in img{ transform:scale(1.04); }
.frame.rv-clip.in:hover img, .yt:hover img{ transform:scale(1.025); }

/* tilt + magnetic */
[data-tilt]{ transition:transform .7s var(--ease-out), border-color .3s; transform-style:preserve-3d; }
[data-tilt].tilting{ transition:transform .12s ease-out, border-color .3s; }
.card.rv{ transition:opacity .9s var(--ease-out), transform .6s var(--ease-out), border-color .3s; }
.btn, .nav-cta, .badge-spin, .yt-play span{ transition:transform .5s var(--ease-out), background .25s, color .25s, box-shadow .25s; }

/* cursor labels */
.cursor-dot .cur-label{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--f-display); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:#000; opacity:0; transition:opacity .2s;
}
@media (pointer:fine){
  .cursor-dot.is-label{ width:70px; height:70px; background:var(--pink); border:0; }
  .cursor-dot.is-label .cur-label{ opacity:1; }
}

/* velocity skew targets */
[data-skew]{ will-change:transform; }
.ticker__in{ display:block; }

/* rotator */
.rotator{ display:inline-grid; vertical-align:baseline; text-align:left; color:var(--pink); }
.rotator span{
  grid-area:1/1; white-space:nowrap; opacity:0;
  transform:translateY(55%) rotate(2deg); transform-origin:0 100%;
  transition:opacity .45s, transform .7s var(--ease-out);
}
.rotator span.on{ opacity:1; transform:none; }
.rotator span.off{ opacity:0; transform:translateY(-55%) rotate(-2deg); transition:opacity .35s, transform .5s var(--ease-io); }

/* menu overlay hover */
.menu-overlay nav a{ transition:transform .5s var(--ease-out), opacity .5s, color .2s, padding-left .4s var(--ease-out); }
.menu-overlay nav a:hover{ padding-left:.2em; }
.quote:hover .q-star{ animation:spin 1.6s linear infinite; }

/* ---------- STORY section (home) ---------- */
.story{ position:relative; overflow:hidden; }
.story-seal{
  position:absolute; right:-7vw; top:-6vw; z-index:0;
  width:clamp(280px, 44vw, 660px); aspect-ratio:1; pointer-events:none;
}
.story-seal .seal-text{
  font-family:var(--f-display); font-size:12.5px; letter-spacing:.2em; text-transform:uppercase;
  fill:rgba(10,10,10,.20);
}
.story-seal .seal-ring{ fill:none; stroke:rgba(10,10,10,.16); stroke-width:1; stroke-dasharray:2 5; }
.story-seal .seal-star{ fill:var(--pink); font-size:70px; }
.story > *:not(.story-seal){ position:relative; z-index:1; }
.manifesto{
  font-family:var(--f-display); text-transform:uppercase; line-height:.9;
  font-size:clamp(2.4rem, 7vw, 6.8rem);
  max-width:19ch; margin:22px 0 clamp(44px, 6vw, 84px);
}
.manifesto .sw{ color:rgba(10,10,10,.12); transition:color .45s ease; }
.manifesto .sw.on{ color:var(--ink); }
.manifesto em{ font-family:var(--f-serif); font-style:italic; text-transform:none; letter-spacing:0; }
.manifesto em .sw.on{ color:var(--pink); }
.story-grid{
  display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(30px, 5vw, 90px); align-items:center;
}
.story-copy .rot-line{
  font-family:var(--f-serif); font-style:italic;
  font-size:clamp(1.5rem, 2.8vw, 2.4rem); line-height:1.2; margin-bottom:22px;
}
.story-copy .lead{ margin-bottom:32px; }

/* journey (TLV → NYC → LA) */
.journey{ position:relative; --jn-ink:var(--ink); --jn-bg:var(--bone); --jn-mute:rgba(10,10,10,.55); --jn-faint:rgba(10,10,10,.14); }
.journey--dark{ --jn-ink:var(--bone); --jn-bg:var(--bg); --jn-mute:rgba(244,241,234,.6); --jn-faint:rgba(244,241,234,.16); }
.journey svg{ width:100%; height:auto; overflow:visible; display:block; }
.jn-track{ fill:none; stroke:var(--jn-faint); stroke-width:1.5; stroke-dasharray:3 7; }
.jn-path{ fill:none; stroke:var(--jn-ink); stroke-width:2; stroke-linecap:round; }
.jn-node .ring{ fill:var(--jn-bg); stroke:var(--jn-ink); stroke-width:1.5; transition:fill .4s, stroke .4s; }
.jn-node .ring2{ fill:none; stroke:var(--pink); stroke-width:1; opacity:0; transition:opacity .4s; }
.jn-node.on .ring{ fill:var(--pink); stroke:var(--pink); }
.jn-node.on .ring2{ opacity:1; animation:halo 1.8s ease-out infinite; }
.jn-node .city{
  font-family:var(--f-display); font-size:22px; text-transform:uppercase; letter-spacing:.02em;
  fill:var(--jn-ink); opacity:.22; transition:opacity .45s;
}
.jn-node .note{
  font-family:var(--f-serif); font-style:italic; font-size:12.5px;
  fill:var(--jn-mute); opacity:0; transition:opacity .6s .15s, transform .6s .15s;
  transform:translateY(6px);
}
.jn-node .year{ font-family:var(--f-body); font-size:9px; letter-spacing:.24em; text-transform:uppercase; fill:var(--pink); opacity:0; transition:opacity .4s; }
.jn-node.on .city{ opacity:1; }
.jn-node.on .note, .jn-node.on .year{ opacity:1; transform:none; }
.jn-dot{ fill:var(--pink); }
.jn-halo{ fill:none; stroke:var(--pink); stroke-width:1.2; animation:halo 1.6s ease-out infinite; }
@keyframes halo{ from{ r:6; opacity:.8; } to{ r:24; opacity:0; } }
.journey .jn-legend{
  display:flex; justify-content:space-between; gap:12px; margin-top:8px;
}
@media (max-width: 980px){
  .story-grid{ grid-template-columns:1fr; }
  .story-seal{ width:60vw; right:-16vw; top:-10vw; }
}
@media (max-width: 640px){
  .jn-node .note{ display:none; }
  .jn-node .city{ font-size:34px; }
  .jn-node .year{ font-size:15px; }
  .jn-node .ring{ r:9; } .jn-node .ring2{ r:10; }
  .jn-path{ stroke-width:3; }
}

/* release sticky index */
.rel-layout{
  display:grid; grid-template-columns:200px minmax(0,1fr);
  gap:clamp(24px, 4vw, 70px);
  padding:0 var(--pad) clamp(64px, 10vw, 140px);
}
.rel-layout .release-body{ padding:0; }
.rel-index{
  position:sticky; top:calc(var(--nav-h) + 22px); align-self:start;
}
.rel-index .label{ display:block; margin-bottom:10px; }
.rel-index a{
  display:flex; align-items:center; gap:12px;
  padding:10px 0; border-bottom:1px solid var(--line);
  font-size:.66rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); transition:color .25s, padding-left .3s var(--ease-out);
}
.rel-index a .n{ font-family:var(--f-serif); font-style:italic; font-size:.95rem; color:var(--pink); letter-spacing:0; text-transform:none; }
.rel-index a::after{ content:"✶"; margin-left:auto; color:var(--pink); font-size:.55rem; opacity:0; transition:opacity .25s, transform .4s var(--ease-out); transform:rotate(-90deg); }
.rel-index a:hover, .rel-index a.active{ color:var(--bone); }
.rel-index a.active{ padding-left:6px; }
.rel-index a.active::after{ opacity:1; transform:none; }
@media (max-width: 980px){
  .rel-layout{ grid-template-columns:1fr; }
  .rel-index{ position:static; display:flex; gap:0 22px; overflow-x:auto; padding-bottom:6px; scrollbar-width:none; }
  .rel-index::-webkit-scrollbar{ display:none; }
  .rel-index .label{ display:none; }
  .rel-index a{ border-bottom:0; white-space:nowrap; padding:6px 0; }
  .rel-index a::after{ display:none; }
}

/* ════════════════════════════════════════════════════════════
   MOTION v4 additions
   ════════════════════════════════════════════════════════════ */

/* smooth (inertial) scroll is JS-driven — native smooth must be off then */
html.js-smooth{ scroll-behavior:auto; }

/* hero: breathing aura behind the portrait + slow float */
.hero-portrait::before{
  content:""; position:absolute; inset:-14%; z-index:-1; pointer-events:none;
  background:radial-gradient(closest-side, rgba(255,26,140,.30), rgba(255,26,140,.08) 55%, transparent 72%);
  filter:blur(28px);
  animation:breathe 6.5s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{ opacity:.45; transform:scale(.94); }
  50%{ opacity:.95; transform:scale(1.06); }
}
body.ready .hero-portrait{ animation:float 7.5s ease-in-out 2.4s infinite; }
@keyframes float{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-9px); }
}
.hero-kicker{ will-change:transform, opacity; }

/* floating "listen" pill */
.float-listen{
  position:fixed; right:22px; bottom:22px; z-index:95;
  display:flex; align-items:center; gap:12px;
  padding:10px 16px 10px 12px;
  background:rgba(7,7,7,.86); color:var(--bone);
  border:1px solid rgba(255,26,140,.55);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  opacity:0; transform:translateY(18px);
  transition:opacity .5s var(--ease-out), transform .6s var(--ease-out), background .25s, color .25s;
  pointer-events:none;
}
body.past-hero .float-listen{ opacity:1; transform:none; pointer-events:auto; }
.float-listen:hover{ background:var(--pink); color:#000; }
.float-listen .fl-text{ display:flex; flex-direction:column; line-height:1.05; }
.float-listen .fl-text b{ font-family:var(--f-display); font-weight:400; text-transform:uppercase; letter-spacing:.06em; font-size:.95rem; }
.float-listen .fl-text small{ font-family:var(--f-serif); font-style:italic; font-size:.8rem; opacity:.7; }
.float-listen .eq{ display:flex; align-items:flex-end; gap:3px; height:18px; }
.float-listen .eq i{ display:block; width:3px; height:100%; background:var(--pink); transform-origin:50% 100%; animation:eq 1.1s ease-in-out infinite; }
.float-listen:hover .eq i{ background:#000; }
.float-listen .eq i:nth-child(1){ animation-delay:-.9s; } .float-listen .eq i:nth-child(2){ animation-delay:-.3s; }
.float-listen .eq i:nth-child(3){ animation-delay:-.6s; } .float-listen .eq i:nth-child(4){ animation-delay:-.15s; }
@keyframes eq{ 0%,100%{ transform:scaleY(.25); } 50%{ transform:scaleY(1); } }
@media (max-width: 640px){ .float-listen{ right:14px; bottom:14px; padding:9px 12px 9px 10px; } .float-listen .fl-text small{ display:none; } }

/* motion toggle (footer) */
.motion-toggle{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--f-body); font-size:.62rem; font-weight:500; letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted); border:1px solid var(--line); padding:7px 11px;
  transition:color .2s, border-color .2s;
}
.motion-toggle b{ font-weight:500; color:var(--pink); }
.motion-toggle:hover{ color:var(--bone); border-color:var(--pink); }
.motion-toggle .mt-dot{ width:6px; height:6px; border-radius:50%; background:var(--pink); box-shadow:0 0 0 3px rgba(255,26,140,.2); }
html.calm .motion-toggle .mt-dot{ background:var(--faint); box-shadow:none; }

/* huge screens (27" iMac, 4K/5K) — keep measure + composition */
@media (min-width: 2000px){
  :root{ --pad:calc((100vw - 1880px) / 2); }
  .hero-portrait{ width:clamp(240px, 30vw, 640px); }
  .hero-title{ font-size:clamp(4rem, 17.5vw, 22rem); }
  .hero-wall span{ font-size:clamp(4rem, 10.5vw, 16rem); }
  .hero-kicker .serif-it{ font-size:clamp(1.5rem, 3vw, 3.4rem); }
  .sec-title{ font-size:clamp(3rem, 9vw, 10rem); }
  .page-title{ font-size:clamp(3.6rem, 13.5vw, 15rem); }
  .spot{ background:radial-gradient(52vmax 52vmax at var(--mx,50%) var(--my,35%), rgba(255,26,140,.13), rgba(255,26,140,.05) 34%, transparent 68%); }
}

/* ---------- CALM mode ----------
   Set on <html> when the OS asks for reduced motion (or via the footer toggle).
   Keeps the site alive — fades, slow tickers, drawn lines — but removes the
   vestibular triggers: parallax, skew, spin, tilt, zooms, sweeping wipes.     */
html.calm{ scroll-behavior:smooth; }
html.calm body::after{ animation:none; }
html.calm .hero-wall span, html.calm .badge-spin svg, html.calm .curtain::after, html.calm .brand:hover .star,
html.calm .hero-portrait, html.calm .hero-portrait::before, html.calm .float-listen .eq i, html.calm .quote:hover .q-star{ animation:none; }
html.calm .float-listen .eq i{ transform:scaleY(.6); }
html.calm .ticker__track{ animation-duration:75s; }
html.calm .marq-giant .ticker__track{ animation-duration:130s; }
html.calm .rv{ transform:none; }
html.calm [data-intro]{ transform:none; }
html.calm .tsplit .wi{ transform:none; opacity:0; transition:opacity .9s var(--ease-out); transition-delay:calc(var(--i,0) * 28ms); }
html.calm .tsplit.in .wi{ opacity:1; }
html.calm .tsplit .w{ clip-path:none; }
html.calm .hero-title .wi{ opacity:0; transform:none; }
html.calm body.ready .hero-title .wi{ opacity:1; transform:none; transition:opacity 1s var(--ease-out); transition-delay:calc(.2s + var(--i,0) * 50ms); }
html.calm .rv-clip{ clip-path:none; opacity:0; transition:opacity 1.1s var(--ease-out); }
html.calm .rv-clip.in{ opacity:1; clip-path:none; }
html.calm .rv-clip img{ transform:none; }
html.calm .card__media.rv-clip.in{ clip-path:none; }
html.calm .rotator span{ transform:none !important; }
html.calm .preloader .pre-curtain{ display:none; }
html.calm .preloader.done{ transition:opacity .7s; opacity:0; transform:none; }
html.calm .curtain{ display:none; }
html.calm [data-tilt]{ transform:none !important; }
html.calm .story-seal, html.calm .num-ghost, html.calm [data-skew]{ transform:none !important; }
html.calm .foot-links a:hover{ padding-left:var(--pad); }
html.calm .cursor-dot{ transition:none; }

/* ════════════════════════════════════════════════════════════
   v5 — THE LIST (email capture) + popup + stats
   ════════════════════════════════════════════════════════════ */
.hp-field{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }

.signup-form{ display:flex; flex-wrap:wrap; gap:12px; align-items:stretch; max-width:640px; }
.signup-form .sf-mail{
  flex:1 1 260px; min-width:0;
  background:transparent; border:1px solid rgba(244,241,234,.35);
  color:var(--bone); font-family:var(--f-body); font-weight:300; font-size:1rem;
  padding:15px 18px; outline:none;
  transition:border-color .25s, box-shadow .25s;
}
.signup-form .sf-mail::placeholder{ color:var(--faint); font-family:var(--f-serif); font-style:italic; }
.signup-form .sf-mail:focus{ border-color:var(--pink); box-shadow:0 0 0 1px var(--pink); }
.signup-form .btn{ flex:0 0 auto; }
.signup-note{ font-family:var(--f-serif); font-style:italic; font-size:.92rem; color:var(--faint); margin-top:12px; }
.signup-done{
  display:none; align-items:center; gap:14px;
  font-family:var(--f-serif); font-style:italic; font-size:clamp(1.2rem,2vw,1.6rem); color:var(--bone);
}
.signup-done .sd-star{ color:var(--pink); animation:spin 6s linear infinite; display:inline-block; }
.signup-wrap.is-done .signup-form, .signup-wrap.is-done .signup-note{ display:none; }
.signup-wrap.is-done .signup-done{ display:flex; }
.signup-err{ display:none; font-size:.8rem; letter-spacing:.06em; color:var(--pink); margin-top:10px; }
.signup-wrap.is-err .signup-err{ display:block; }

/* home section */
.signup-sec .sec-title{ max-width:12ch; }
.signup-sec .signup-form{ margin-top:26px; }

/* footer row */
.foot-signup{
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:18px clamp(24px,4vw,60px); align-items:center;
  padding:clamp(26px,4vw,44px) var(--pad);
  border-top:1px solid var(--line);
}
.foot-signup h2{
  font-family:var(--f-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(1.6rem,3.4vw,2.8rem); line-height:.9;
}
.foot-signup h2 .serif-it{ display:block; font-size:.55em; color:var(--pink); text-transform:none; margin-top:.25em; }
@media (max-width:980px){ .foot-signup{ grid-template-columns:1fr; } }

/* ── popup ── */
.pop{ position:fixed; inset:0; z-index:2300; display:none; }
.pop.open{ display:block; }
.pop-back{ position:absolute; inset:0; background:rgba(0,0,0,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); opacity:0; transition:opacity .4s; }
.pop.open .pop-back{ opacity:1; }
.pop-card{
  position:absolute; left:50%; top:50%;
  width:min(92vw, 760px);
  background:var(--bg); border:1px solid var(--line);
  display:grid; grid-template-columns:240px minmax(0,1fr);
  transform:translate(-50%,-50%) translateY(30px) rotate(-1deg); opacity:0;
  transition:transform .55s var(--ease-out), opacity .45s;
  box-shadow:0 40px 120px rgba(0,0,0,.6), 0 0 0 1px rgba(255,26,140,.12), 18px 18px 0 rgba(255,26,140,.14);
}
.pop.open .pop-card{ transform:translate(-50%,-50%) rotate(0); opacity:1; }
.pop-side{ position:relative; overflow:hidden; background:var(--bg-lift); border-right:1px solid var(--line); }
.pop-side img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.1); }
.pop-side .pop-stamp{ position:absolute; left:12px; bottom:14px; z-index:2; font-size:.72rem; }
.pop-main{ padding:clamp(24px,4vw,44px); }
.pop-kick{ font-family:var(--f-serif); font-style:italic; font-size:1.3rem; color:var(--pink); }
.pop-title{ font-family:var(--f-display); text-transform:uppercase; line-height:.85; font-size:clamp(2.2rem,6vw,3.6rem); margin:.1em 0 .3em; }
.pop-copy{ color:var(--muted); font-size:.98rem; line-height:1.6; max-width:38ch; margin-bottom:22px; }
.pop-copy strong{ color:var(--bone); font-weight:500; }
.pop-later{ margin-top:16px; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); }
.pop-later:hover{ color:var(--pink); }
.pop-x{
  position:absolute; right:10px; top:10px; z-index:3;
  width:42px; height:42px; display:flex; align-items:center; justify-content:center;
  color:var(--muted); font-size:1.2rem;
}
.pop-x:hover{ color:var(--pink); }
@media (max-width:640px){ .pop-card{ grid-template-columns:1fr; } .pop-side{ display:none; } }
html.calm .pop-card{ transition:opacity .45s; transform:translate(-50%,-50%); }