/* =========================================================
   JULIANNE CLAIRE
   Sleeve-grade layout. Black / white / gold / pastel pink.

   Motion is BPM-locked: every duration below is a multiple of
   one beat at 174bpm (drum & bass tempo). Change --bpm and the
   entire site re-times itself.
   ========================================================= */

:root{
  /* ── tempo ── */
  --bpm:   174;
  --beat:  calc(60s / 174);          /* 0.345s */
  --bar:   calc(60s / 174 * 4);      /* 1.379s */
  --phrase:calc(60s / 174 * 32);     /* 11.03s */

  /* ── ink ── */
  --black:   #050505;
  --black-2: #0c0c0d;
  --black-3: #141415;
  --white:   #f7f5f2;
  --dim:     rgba(247,245,242,.62);
  --faint:   rgba(247,245,242,.34);
  --hair:    rgba(247,245,242,.14);
  --hair-2:  rgba(247,245,242,.07);

  /* ── accents ── */
  --gold:     #c9a24a;
  --gold-lit: #f2d391;
  /* recolored from pastel pink to metallic silver to match the crest logo */
  --pink:     #dcd8d0;
  --pink-deep:#b3ada3;
  --silver:   #e9e6df;

  /* ── motion ── */
  --ease: cubic-bezier(.2,.7,.3,1);
  --pop:  cubic-bezier(.16,1,.3,1);

  /* ── metrics ── */
  --pad: clamp(1.1rem, 4.5vw, 5rem);
  --max: 1440px;
  --plh: 74px;               /* player height */

  /* ── fonts (swappable from the console) ── */
  --font-display: 'Anton', Impact, 'Arial Narrow', sans-serif;   /* headlines / the name */
  --font-body:    'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;  /* body copy */
  --font-mono:    'Space Mono', monospace;                       /* labels / tags */
  --font-serif:   'Instrument Serif', Georgia, serif;            /* quote accent */
}

/* ---------------- reset ---------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body,h1,h2,p,figure,blockquote,ol,ul,cite{ margin:0; padding:0; }
ol,ul{ list-style:none; }
img{ max-width:100%; display:block; }
button,input{ font:inherit; color:inherit; }
a{ color:inherit; text-decoration:none; }

body{
  background:var(--black);
  color:var(--white);
  font-family:var(--font-body);
  font-weight:300;
  font-size:clamp(.95rem,.9rem + .2vw,1.05rem);
  line-height:1.65;
  overflow-x:hidden;
  padding-bottom:var(--plh);
  -webkit-font-smoothing:antialiased;
}

::selection{ background:var(--gold); color:var(--black); }
:focus-visible{ outline:2px solid var(--gold-lit); outline-offset:3px; }

.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{ position:absolute;left:-999px;top:0;z-index:300;background:var(--gold);color:var(--black);padding:.7rem 1.1rem; }
.skip:focus{ left:.75rem;top:.75rem; }

/* =========================================================
   PRINT / FILM ARTEFACTS
   ========================================================= */

.fx{ position:fixed; inset:0; z-index:80; pointer-events:none; }

.fx__grain{
  display:none;   /* removed: grain dots were texturing all text + the photo */
  position:absolute; inset:-60%;
  opacity:.2;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain calc(var(--beat) * 2) steps(5) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 20%{transform:translate(-4%,3%)}
  40%{transform:translate(3%,-4%)} 60%{transform:translate(-3%,-2%)}
  80%{transform:translate(4%,2%)} 100%{transform:translate(0,0)}
}

/* No blend mode: the page sits on near-black, so straight alpha
   looks identical and skips a full-viewport compositing group. */
.fx__scan{
  display:none;   /* removed: global scanlines now live on the large text itself */
}

.fx__vig{
  position:absolute; inset:0;
  background:radial-gradient(130% 105% at 50% 45%, transparent 52%, rgba(0,0,0,.8));
}

/* technical column rules */
.rules{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  max-width:var(--max); margin-inline:auto; padding-inline:var(--pad);
  display:grid; grid-template-columns:repeat(4,1fr);
}
.rules i{ border-left:1px solid var(--hair-2); }
.rules i:last-child{ border-right:1px solid var(--hair-2); }

/* cursor light */
.spot{
  position:fixed; z-index:1; pointer-events:none;
  width:640px; height:640px; margin:-320px 0 0 -320px; border-radius:50%;
  background:radial-gradient(circle, rgba(201,162,74,.15), rgba(244,201,214,.08) 40%, transparent 66%);
  opacity:0; transition:opacity var(--phrase) var(--ease);
}
.spot.on{ opacity:1; transition-duration:calc(var(--bar) * 2); }

/* =========================================================
   HEADER
   ========================================================= */

.hd{
  position:fixed; inset:0 0 auto 0; z-index:70;
  display:flex; align-items:center; gap:1rem;
  padding:.85rem var(--pad);
  border-bottom:1px solid transparent;
  transition:background calc(var(--bar)/2) var(--ease),
             border-color calc(var(--bar)/2) var(--ease);
}
.hd.stuck{
  background:var(--header-bg, rgba(5,5,5,.82));
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--hair);
}

.hd__mark{ display:flex; align-items:center; gap:.65rem; position:relative; z-index:3; }
.hd__mark span{
  font-family:var(--font-display); font-size:1.15rem; letter-spacing:.02em;
  background:var(--gold); color:var(--black); padding:.28rem .42rem .18rem; line-height:1;
}
.hd__mark em{
  font-family:var(--font-mono); font-style:normal;
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--dim);
}

.hd__nav{ display:flex; gap:clamp(.9rem,2vw,2rem); margin-left:auto; }
.hd__nav a{
  font-family:var(--font-mono); font-size:.7rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--dim);
  display:flex; align-items:baseline; gap:.45rem; padding:.3rem 0;
  position:relative; transition:color calc(var(--beat)*1) var(--ease);
}
.hd__nav a i{ font-style:normal; color:var(--gold); font-size:.6rem; }
.hd__nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:100% 50%;
  transition:transform calc(var(--bar)/2) var(--pop);
}
.hd__nav a:hover{ color:var(--white); }
.hd__nav a:hover::after{ transform:scaleX(1); transform-origin:0 50%; }

.hd__bpm{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.16em;
  color:var(--faint); display:flex; align-items:center; gap:.45rem; margin-left:clamp(1rem,3vw,2.5rem);
}
.hd__bpm-n{ color:var(--white); }
.dot{
  width:6px; height:6px; border-radius:50%; background:var(--gold);
  animation:beat var(--beat) var(--ease) infinite;
}
@keyframes beat{
  0%{ transform:scale(1.5); opacity:1; }
  55%,100%{ transform:scale(.7); opacity:.35; }
}

.hd__burger{
  display:none; background:none; border:0; cursor:pointer;
  width:30px; height:22px; position:relative; z-index:3; margin-left:auto;
}
.hd__burger span{
  position:absolute; left:0; right:0; height:2px; background:var(--white);
  transition:transform calc(var(--bar)/2) var(--pop), opacity calc(var(--beat)) var(--ease);
}
.hd__burger span:nth-child(1){ top:2px; }
.hd__burger span:nth-child(2){ top:10px; }
.hd__burger span:nth-child(3){ top:18px; }
.hd__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.hd__burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hd__burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

/* =========================================================
   TYPE SYSTEM
   ========================================================= */

main{ position:relative; z-index:2; }

.tag{
  font-family:var(--font-mono); font-size:.7rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--gold);
  display:flex; align-items:center; gap:.7rem; margin-bottom:1.1rem;
}
.tag i{
  font-style:normal; background:var(--gold); color:var(--black);
  padding:.2rem .45rem; letter-spacing:.1em;
}
.tag--dark{ color:var(--black); }
.tag--dark i{ background:var(--black); color:var(--gold); }

/* the shout — silver poster type with THIN subtle scan-lines (1px @ ~20%,
   like the old global overlay) and gold + gray offset "shadow" ghosts. */
.shout{
  font-family:var(--font-display);
  font-weight:400; text-transform:uppercase;
  font-size:clamp(2.6rem, 1rem + 8vw, 8.5rem);
  line-height:.88; letter-spacing:-.015em;
  position:relative; display:inline-block;
  color:transparent; -webkit-text-fill-color:transparent;
  background-image:
    repeating-linear-gradient(0deg, rgba(8,7,9,.22) 0 1px, rgba(8,7,9,0) 1px 4px),
    linear-gradient(var(--white), var(--white));
  -webkit-background-clip:text; background-clip:text;
}
.shout::before,.shout::after{
  content:attr(data-txt); position:absolute; inset:0; pointer-events:none; z-index:-1;
  -webkit-text-fill-color:currentColor;   /* undo the transparent fill so the ghost shows */
}
/* shadows scale with the mood: full in dark, gone in light (they alias on cream) */
.shout::before{ color:var(--gold); transform:translate(-4px,3px);  opacity:calc(var(--mood-intensity,1) * .55); }
.shout::after { color:#8f8a7f;     transform:translate(4px,-3px);  opacity:calc(var(--mood-intensity,1) * .5);  }
/* on the gold Connect panel: solid black for max clarity, one subtle shadow */
.shout--dark{
  background-image:none;
  -webkit-text-fill-color:var(--black); color:var(--black);
  text-shadow:3px 3px 0 rgba(92,70,22,.4);
}
.shout--dark::before,.shout--dark::after{ display:none; }

.sec{ max-width:var(--max); margin-inline:auto; padding:clamp(4.5rem,10vh,8rem) var(--pad); }
.sec__head{ margin-bottom:clamp(2.2rem,5vw,3.6rem); }
.sec__sub{
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.1em;
  color:var(--faint); margin-top:1.1rem; text-transform:uppercase;
}

.prose{ color:var(--dim); max-width:54ch; margin-bottom:1.1rem; }
.prose--lead{ color:var(--white); font-size:clamp(1.05rem,1rem + .45vw,1.3rem); line-height:1.55; }

/* =========================================================
   HERO
   ========================================================= */

.hero{
  min-height:100svh; position:relative;
  max-width:var(--max); margin-inline:auto;
  padding:7.5rem var(--pad) 4rem;
  display:flex; flex-direction:column; justify-content:center;
}

/* the record */
.disc{
  position:absolute; z-index:-1;
  right:-6vw; top:50%; translate:0 -50%;
  width:min(62vw,720px); aspect-ratio:1;
  animation:spin calc(var(--phrase) * 2) linear infinite;
  will-change:transform;
}
.disc__plate{
  position:absolute; inset:0; border-radius:50%;
  background:
    /* edge falloff painted in, not masked — a mask on a spinning
       element repaints every frame; this composites once */
    radial-gradient(circle at 50% 50%,
      transparent 30%, rgba(5,5,5,.5) 68%, var(--black) 94%),
    repeating-radial-gradient(circle at 50% 50%,
      rgba(247,245,242,.07) 0 1px, transparent 1px 6px),
    conic-gradient(from 0deg,
      var(--gold-lit) 0deg, #0a0a0a 62deg, var(--pink) 128deg,
      #0a0a0a 196deg, var(--gold) 262deg, #0a0a0a 322deg, var(--gold-lit) 360deg);
  opacity:.9;
}
.disc__half{
  position:absolute; inset:0; border-radius:50%;
  background-image:radial-gradient(circle at center, var(--black) .9px, transparent 1.5px);
  background-size:6px 6px;
  opacity:.5;
}
/* the smooth grooveless paper label in the middle of the record */
.disc__sticker{
  position:absolute; inset:29%; z-index:2; border-radius:50%;
  background:#0a0810;
  box-shadow:0 0 0 2px var(--gold), 0 3px 26px rgba(0,0,0,.85), inset 0 0 22px rgba(0,0,0,.55);
  overflow:hidden;
}
/* the crest logo printed on that label */
.disc__label{
  position:absolute; inset:0; z-index:2; border-radius:50%;
  object-fit:cover; object-position:50% 26%;
}
.disc__hole{
  position:absolute; inset:47.5%; border-radius:50%; z-index:3;
  background:var(--black); box-shadow:0 0 0 3px rgba(10,8,16,.9), 0 0 0 4px rgba(201,162,74,.55);
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---- real images inserted into the sleeve theme (v5) ---- */
.art--cover img{ filter:none; object-position:50% 24%; }
.art--cover .art__dots{ opacity:.28; }
.art--tall img{ object-position:50% 34%; }
.art--tall .art__dots{ display:none; }   /* clean photo — no halftone on the portrait */

.hero__meta{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--dim);
  display:flex; gap:.8rem; align-items:center; margin-bottom:clamp(1rem,2.5vw,1.8rem);
}
.hero__meta b{ color:var(--gold); font-weight:400; }

.hero__name{ margin-bottom:clamp(1.6rem,4vw,2.8rem); }
.hero__line{
  display:block; width:fit-content;
  font-family:var(--font-display);
  font-weight:400; text-transform:uppercase;
  font-size:clamp(3.4rem, .5rem + 15.5vw, 15rem);
  line-height:.8; letter-spacing:-.02em;
  position:relative;
}
/* both hero lines: silver, thin subtle lines, same gold + gray shadow ghosts */
.hero__line--fill,
.hero__line--out{
  color:transparent; -webkit-text-fill-color:transparent;
  background-image:
    repeating-linear-gradient(0deg, rgba(8,7,9,.2) 0 1px, rgba(8,7,9,0) 1px 5px),
    linear-gradient(var(--white), var(--white));
  -webkit-background-clip:text; background-clip:text;
}
.hero__line--out{ margin-left:.06em; }
.hero__line::before,
.hero__line::after{
  content:attr(data-txt); position:absolute; inset:0; pointer-events:none; z-index:-1;
  -webkit-text-fill-color:currentColor;
}
.hero__line::before{ color:var(--gold); transform:translate(-4px,4px);  opacity:calc(var(--mood-intensity,1) * .42); }
.hero__line::after { color:#8f8a7f;     transform:translate(4px,-3px);  opacity:calc(var(--mood-intensity,1) * .45); }

.hero__foot{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:clamp(1.1rem,2.4vw,1.7rem);
  max-width:46rem;
}
.hero__lede{ max-width:44ch; color:var(--dim); font-size:clamp(.98rem,.94rem + .35vw,1.16rem); }
.hero__tags{ display:flex; flex-wrap:wrap; gap:.4rem; }
.hero__tags i{
  font-family:var(--font-mono); font-style:normal;
  font-size:.64rem; letter-spacing:.16em; text-transform:uppercase;
  border:1px solid var(--hair); color:var(--dim); padding:.4rem .7rem;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:.6rem; }

.btn{
  font-family:var(--font-mono); font-weight:700;
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  padding:1rem 1.9rem; border:1.5px solid transparent;
  display:inline-flex; align-items:center; justify-content:center;
  transition:transform calc(var(--bar)/2) var(--pop),
             background calc(var(--beat)*1) var(--ease),
             color calc(var(--beat)*1) var(--ease),
             box-shadow calc(var(--bar)/2) var(--ease);
}
.btn--gold{ background:var(--gold); color:var(--black); }
.btn--gold:hover{ transform:translate(-3px,-3px); box-shadow:6px 6px 0 var(--pink); }
.btn--out{ border-color:var(--hair); color:var(--white); }
.btn--out:hover{ transform:translate(-3px,-3px); border-color:var(--gold); box-shadow:6px 6px 0 rgba(201,162,74,.35); }

.hero__cue{
  position:absolute; left:var(--pad); bottom:1.6rem;
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.28em; color:var(--faint);
  display:flex; align-items:center; gap:.7rem;
}
.hero__cue span{ width:48px; height:1px; background:var(--hair); position:relative; overflow:hidden; }
.hero__cue span::after{
  content:''; position:absolute; inset:0; width:45%; background:var(--gold);
  animation:cue calc(var(--bar) * 2) var(--ease) infinite;
}
@keyframes cue{ 0%{transform:translateX(-100%)} 60%,100%{transform:translateX(240%)} }

/* =========================================================
   MIXTAPE BANDS
   ========================================================= */

.bands{ position:relative; z-index:3; padding:3rem 0; }
.band{
  overflow:hidden; white-space:nowrap;
  padding:.55rem 0; margin-block:-.4rem;
}
.band--gold{ background:var(--gold); color:var(--black); rotate:-2.2deg; }
.band--line{
  border-block:1px solid var(--hair); background:var(--black-2);
  rotate:1.6deg; color:var(--white);
}
.band__track{
  display:inline-flex; align-items:center; gap:1.6rem; padding-inline:.8rem;
  font-family:var(--font-display); text-transform:uppercase;
  font-size:clamp(1.1rem,2.6vw,2.1rem); letter-spacing:.01em;
  animation:roll calc(var(--phrase) * 2) linear infinite;
}
.band__track--rev{ animation-direction:reverse; }
.band--line .band__track b{ color:var(--gold); }
.band--gold .band__track b{ color:var(--white); }
.band__track b{ font-family:var(--font-mono); font-size:.7em; font-weight:400; }
@keyframes roll{ to{ transform:translateX(-50%); } }

/* =========================================================
   SLEEVE / TRACK INDEX
   ========================================================= */

.sleeve{
  display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem); align-items:start;
}
.sleeve__art{ position:sticky; top:6rem; }

.art{ position:relative; overflow:hidden; background:var(--black-2); }
.art__ph{
  aspect-ratio:1; display:grid; place-content:center; gap:0;
  background:
    radial-gradient(90% 80% at 78% 12%, var(--pink) 0%, transparent 58%),
    linear-gradient(152deg, var(--gold-lit) 0%, var(--gold) 42%, var(--pink-deep) 100%);
  text-align:center;
}
.art__t1,.art__t2{
  display:block; font-family:var(--font-display); text-transform:uppercase;
  color:var(--black); line-height:.82; letter-spacing:-.02em;
  font-size:clamp(2.4rem,7vw,4.6rem);
}
/* second word knocked out as an outline — reads on any artwork */
.art__t2{
  color:transparent;
  -webkit-text-stroke:2px var(--black);
  text-stroke:2px var(--black);
}
@supports not ((-webkit-text-stroke:1px red) or (text-stroke:1px red)){
  .art__t2{ color:var(--white); }
}

.art--tall .art__ph{ aspect-ratio:3/4; }
.art__ph--p{
  background:
    radial-gradient(70% 55% at 32% 18%, var(--pink) 0%, transparent 60%),
    linear-gradient(168deg, var(--gold) 0%, var(--pink-deep) 55%, var(--black-2) 100%);
  place-content:center;
}
.art__ph--p span{
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.3em; color:var(--black);
}

/* halftone screen */
.art__dots{
  position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(circle at center, rgba(5,5,5,.8) 1.5px, transparent 2.05px);
  background-size:6px 6px;
  mix-blend-mode:multiply; opacity:.9;
}
.art img{ width:100%; aspect-ratio:1; object-fit:cover; filter:grayscale(1) contrast(1.15) brightness(1.05); }
/* the portrait keeps its own colour (e.g. sepia) — no forced grayscale */
.art--tall img{ aspect-ratio:3/4; filter:contrast(1.03); }

.art__stamp{
  position:absolute; top:6%; right:6%; z-index:2;
  width:clamp(56px,7vw,84px); aspect-ratio:1; border-radius:50%;
  background:var(--black); color:var(--gold-lit);
  display:grid; place-content:center; text-align:center;
  font-family:var(--font-mono); font-weight:700; font-size:.62rem;
  letter-spacing:.1em; line-height:1.25;
  border:1px solid var(--gold);
  rotate:-9deg;
  animation:stampPulse var(--bar) var(--ease) infinite;
}
@keyframes stampPulse{
  0%{ transform:scale(1.06); } 40%,100%{ transform:scale(1); }
}

.sleeve__cat{
  display:flex; justify-content:space-between;
  font-family:var(--font-mono); font-size:.64rem; letter-spacing:.2em;
  color:var(--faint); padding-top:.7rem; border-top:1px solid var(--hair-2); margin-top:.7rem;
}

/* track index */
.idx{ border-top:1px solid var(--hair); margin-bottom:2rem; }
.idx__row{
  display:grid; grid-template-columns:auto 1fr auto auto;
  align-items:center; gap:clamp(.8rem,2vw,1.6rem);
  padding:clamp(.7rem,1.6vw,1.05rem) 0;
  border-bottom:1px solid var(--hair-2);
  transition:padding-left calc(var(--bar)/2) var(--pop),
             background calc(var(--beat)*1) var(--ease);
}
.idx__row:hover{ background:rgba(247,245,242,.04); padding-left:.9rem; }
.idx__n{
  font-family:var(--font-display); font-size:clamp(1.3rem,2.4vw,2rem);
  color:transparent; -webkit-text-stroke:1px var(--gold); line-height:1;
  transition:color calc(var(--beat)*1) var(--ease);
}
.idx__row:hover .idx__n{ color:var(--gold); }
.idx__t{
  font-family:var(--font-mono); font-size:clamp(.82rem,1.4vw,1rem);
  letter-spacing:.02em; position:relative;
}
.idx__row:hover .idx__t::before,
.idx__row:hover .idx__t::after{
  content:attr(data-txt); position:absolute; inset:0; pointer-events:none;
}
.idx__row:hover .idx__t::before{ color:var(--gold); transform:translateX(-2px); opacity:.7; z-index:-1; }
.idx__row:hover .idx__t::after { color:var(--pink); transform:translateX(2px);  opacity:.7; z-index:-1; }

.idx__b{ display:flex; align-items:flex-end; gap:2px; height:16px; opacity:0; transition:opacity calc(var(--beat)*1) var(--ease); }
.idx__row:hover .idx__b{ opacity:1; }
.idx__b i{ width:2px; background:var(--gold-lit); height:25%; animation:eq var(--bar) var(--ease) infinite alternate; }
.idx__b i:nth-child(2){ animation-duration:calc(var(--bar) * .6); }
.idx__b i:nth-child(3){ animation-duration:calc(var(--bar) * 1.4); }
.idx__b i:nth-child(4){ animation-duration:calc(var(--bar) * .8); }
.idx__b i:nth-child(5){ animation-duration:calc(var(--bar) * 1.1); }
@keyframes eq{ to{ height:100%; } }

.idx__d{ font-family:var(--font-mono); font-size:.74rem; color:var(--faint); }

/* collaboration rows carry a collaborator avatar + artist link */
.idx__row--collab{ grid-template-columns:auto 44px 1fr auto auto auto; }
.idx__av{ width:44px; height:44px; }
.idx__av a{ display:block; width:100%; height:100%; border-radius:8px; overflow:hidden;
  border:1px solid var(--hair); background:rgba(247,245,242,.04); }
.idx__av img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform calc(var(--beat)*1) var(--ease); }
.idx__av a:hover img{ transform:scale(1.06); }
.idx__link{ display:inline-flex; align-items:center; }
.idx__link a{ font-family:var(--font-mono); font-size:.9rem; color:var(--dim);
  text-decoration:none; line-height:1; padding:.15rem .3rem;
  transition:color calc(var(--beat)*1) var(--ease); }
.idx__link a:hover{ color:var(--gold-lit); }

.dsp{ display:flex; flex-wrap:wrap; gap:.45rem; }
.dsp__l{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; padding:.65rem 1rem;
  border:1px solid var(--hair); color:var(--dim);
  display:inline-flex; gap:.5rem; align-items:center;
  transition:transform calc(var(--bar)/2) var(--pop),
             background calc(var(--beat)*1) var(--ease),
             color calc(var(--beat)*1) var(--ease),
             border-color calc(var(--beat)*1) var(--ease),
             box-shadow calc(var(--bar)/2) var(--ease);
}
.dsp__l i{ font-style:normal; color:var(--gold); }
.dsp__l:hover{
  background:var(--white); color:var(--black); border-color:var(--white);
  transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--gold);
}
.dsp__l:hover i{ color:var(--black); }

/* =========================================================
   COLLAGE / ABOUT
   ========================================================= */

.collage{
  display:grid; grid-template-columns:repeat(12,1fr);
  column-gap:clamp(1rem,3vw,2.5rem);
}
.collage__img{ grid-column:1/7; grid-row:1/3; position:relative; }
.collage__img::before{
  content:''; position:absolute; inset:auto auto -18px -18px;
  width:55%; aspect-ratio:1; background:var(--pink); z-index:-1;
}
.collage__txt{
  grid-column:7/13; grid-row:1; align-self:start;
  background:var(--black); border:1px solid var(--hair-2);
  padding:clamp(1.4rem,3vw,2.4rem); margin-top:clamp(2rem,6vw,4.5rem);
  position:relative; z-index:2;
}
.collage__q{
  grid-column:7/13; grid-row:2; align-self:start;
  background:var(--black); border-left:3px solid var(--gold);
  padding:clamp(1.2rem,2.5vw,2rem); margin-top:1.4rem;
  position:relative; z-index:2;
}
.collage__q p{
  font-family:var(--font-serif); font-style:italic;
  font-size:clamp(1.25rem,1rem + 1.3vw,1.95rem); line-height:1.24; color:var(--white);
}
.collage__q cite{
  display:block; margin-top:1rem; font-style:normal;
  font-family:var(--font-mono); font-size:.66rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--gold);
}

/* =========================================================
   GIGS
   ========================================================= */

.gigs{ border-top:1px solid var(--hair); }
.gig{
  display:grid;
  grid-template-columns:auto minmax(0,1.1fr) minmax(0,.8fr) minmax(0,.8fr) auto;
  align-items:center; gap:clamp(.9rem,2.6vw,2rem);
  padding:clamp(1rem,2.2vw,1.5rem) 0;
  border-bottom:1px solid var(--hair-2);
  transition:padding-left calc(var(--bar)/2) var(--pop), background calc(var(--beat)) var(--ease);
}
.gig:hover{ background:rgba(247,245,242,.035); padding-left:.9rem; }
.gig__d{ display:flex; align-items:baseline; gap:.4rem; min-width:5.5rem; }
.gig__d b{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.7rem,3.2vw,2.6rem); line-height:1; letter-spacing:-.02em;
}
.gig__d i{ font-family:var(--font-mono); font-style:normal; font-size:.66rem; letter-spacing:.18em; color:var(--gold); }
.gig__v{ font-family:var(--font-display); text-transform:uppercase; font-size:clamp(1rem,1.9vw,1.45rem); letter-spacing:.005em; }
.gig__c,.gig__m{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; color:var(--faint); }
.gig__b{
  font-family:var(--font-mono); font-size:.66rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  padding:.6rem 1.15rem; border:1px solid var(--hair); color:var(--white); white-space:nowrap;
  transition:all calc(var(--beat)*1) var(--ease);
}
a.gig__b:hover{ background:var(--gold); color:var(--black); border-color:var(--gold); }
.gig__b--x{ opacity:.35; border-style:dashed; }
.gig--off{ opacity:.45; }

/* =========================================================
   CONNECT — the inverted plate
   ========================================================= */

.sec--connect{
  background:var(--gold); color:var(--black);
  max-width:none; text-align:center;
  position:relative; overflow:hidden;
}
.sec--connect::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(circle at center, rgba(5,5,5,.08) 1px, transparent 1.7px);
  background-size:9px 9px;
}
.sec--connect > *{ position:relative; z-index:2; }
.sec--connect .tag{ justify-content:center; }
.connect__sub{
  font-family:var(--font-mono); font-weight:700; font-size:.92rem; letter-spacing:.08em;
  text-transform:uppercase; max-width:46ch; margin:1.4rem auto 0; color:var(--black);
}

.join{ display:flex; flex-wrap:wrap; gap:0; max-width:30rem; margin:2.4rem auto 0; }
.join input{
  flex:1 1 13rem; min-width:0; background:rgba(255,255,255,.14);
  border:2px solid var(--black); border-right:0; padding:1rem 1.2rem;
  font-family:var(--font-mono); font-weight:700; font-size:.86rem; letter-spacing:.08em; color:var(--black);
}
.join input::placeholder{ color:rgba(5,5,5,.45); }
.join input:focus{ outline:0; background:rgba(255,255,255,.35); }
.join button{
  flex:0 0 auto; cursor:pointer; background:var(--black); color:var(--gold-lit);
  border:2px solid var(--black); padding:1rem 1.7rem;
  font-family:var(--font-mono); font-weight:700; font-size:.82rem;
  letter-spacing:.16em; text-transform:uppercase;
  transition:background calc(var(--beat)) var(--ease), color calc(var(--beat)) var(--ease);
}
.join button:hover{ background:var(--white); color:var(--black); }
.join__msg{
  flex:1 0 100%; min-height:1.3rem; margin-top:.7rem;
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.1em; color:rgba(5,5,5,.75);
}
.join__msg.err{ color:#7a1327; }
/* release countdown */
.countdown{ display:flex; flex-direction:column; align-items:flex-start; gap:.6rem; margin:1.7rem 0 0; font-family:var(--font-mono); }
.countdown__row{ display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap; }
.countdown__label{ font-size:.62rem; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); }
.countdown__u{ display:inline-flex; align-items:baseline; gap:.32rem; }
.countdown__u b{ font-size:1.2rem; font-weight:700; color:var(--white); font-variant-numeric:tabular-nums; }
.countdown__u i{ font-size:.56rem; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); font-style:normal; }
.countdown--out .countdown__label{ color:var(--gold-lit); font-size:.8rem; letter-spacing:.2em; }

.collablist{ max-width:44rem; margin:2.4rem auto 0; }
.collab__cover{ width:100%; max-width:22rem; margin:0 auto 2rem; border-radius:12px; box-shadow:0 24px 60px -24px rgba(0,0,0,.65); }
.secbody{ max-width:44rem; margin:2rem auto 0; }
.join__consent{
  max-width:30rem; margin:.9rem auto 0; text-align:center;
  font-family:var(--font-body); font-size:.72rem; line-height:1.5; color:rgba(5,5,5,.5);
}

.soc{ display:flex; flex-wrap:wrap; gap:1.4rem; justify-content:center; margin-top:2.6rem; }
.soc a{
  font-family:var(--font-mono); font-size:.84rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--black);
  border-bottom:2px solid rgba(5,5,5,.35); padding-bottom:.15rem;
  transition:border-color calc(var(--beat)) var(--ease);
}
.soc a:hover{ border-bottom-color:var(--black); }

.bkg{
  margin-top:2.2rem; font-family:var(--font-mono); font-weight:700;
  font-size:.82rem; letter-spacing:.08em; color:var(--black);
}
.bkg a{ border-bottom:2px solid rgba(5,5,5,.5); }
.bkg summary{ cursor:pointer; display:inline-block; list-style:none; border-bottom:2px solid rgba(5,5,5,.5); }
.bkg summary::-webkit-details-marker{ display:none; }
.bkg[open] summary{ margin-bottom:1.3rem; }
.bookform{ display:flex; flex-direction:column; gap:.7rem; max-width:30rem; margin:0 auto; text-align:left; }
.bookform__in{ width:100%; background:rgba(255,255,255,.25); border:1px solid rgba(5,5,5,.22); border-radius:8px;
  padding:.7rem .85rem; font-family:var(--font-body); font-weight:400; font-size:.9rem; letter-spacing:0; color:#17140f; }
.bookform__in::placeholder{ color:rgba(5,5,5,.45); }
.bookform__in:focus{ outline:0; border-color:rgba(5,5,5,.5); background:rgba(255,255,255,.42); }
textarea.bookform__in{ resize:vertical; min-height:5rem; }
.bookform__btn{ align-self:flex-start; cursor:pointer; border:0; border-radius:999px; background:#17140f; color:#f4f1ea;
  padding:.7rem 1.5rem; font-family:var(--font-mono); font-weight:700; font-size:.78rem; letter-spacing:.06em; }
.bookform__btn:disabled{ opacity:.55; cursor:default; }
.bookform__msg{ min-height:1.1rem; font-family:var(--font-mono); font-weight:400; font-size:.72rem; color:rgba(5,5,5,.7); }
.bookform__msg.err{ color:#7a1327; }
.bookform__alt{ margin-top:1rem; font-weight:400; font-size:.75rem; color:rgba(5,5,5,.6); }

/* =========================================================
   FOOTER
   ========================================================= */

.ft{
  position:relative; z-index:2;
  display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; justify-content:space-between;
  padding:1.8rem var(--pad);
  font-family:var(--font-mono); font-size:.64rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--faint);
  border-top:1px solid var(--hair-2);
}
.ft b{ font-weight:400; }
.ft__mid{ color:var(--gold); }

/* =========================================================
   PLAYER BAR
   ========================================================= */

.pl{
  position:fixed; inset:auto 0 0 0; z-index:75; height:var(--plh);
  display:flex; align-items:center; gap:clamp(.7rem,2vw,1.4rem);
  padding:0 var(--pad);
  /* solid rather than backdrop-filter: the page behind is near-black,
     so the blur is invisible but the compositing cost is not */
  background:#070707;
  border-top:1px solid var(--hair);
}
.pl__btn{
  flex:0 0 auto; width:40px; height:40px; cursor:pointer;
  background:var(--gold); color:var(--black); border:0;
  display:grid; place-items:center; position:relative;
  transition:background calc(var(--beat)) var(--ease), transform calc(var(--bar)/2) var(--pop);
}
.pl__btn:hover{ transform:scale(1.06); background:var(--gold-lit); }
.pl__i{ width:15px; height:15px; fill:currentColor; grid-area:1/1; }
.pl__i--pause{ display:none; }
.pl.playing .pl__i--play{ display:none; }
.pl.playing .pl__i--pause{ display:block; }
.pl.playing .pl__btn::after{
  content:''; position:absolute; inset:0; border:1.5px solid var(--gold);
  animation:ring var(--bar) var(--ease) infinite;
}
@keyframes ring{
  0%{ transform:scale(1); opacity:.9; } 100%{ transform:scale(1.7); opacity:0; }
}

.pl__meta{ flex:0 0 auto; display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.pl__meta b{
  font-family:var(--font-mono); font-weight:700; font-size:.74rem; letter-spacing:.06em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pl__meta i{
  font-family:var(--font-mono); font-style:normal;
  font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--faint);
}
.pl__wave{ flex:1 1 auto; height:44px; width:100%; min-width:0; cursor:pointer; }
.pl__bpm{
  flex:0 0 auto; font-family:var(--font-display); font-size:1.15rem;
  color:var(--gold); display:flex; align-items:baseline; gap:.3rem;
}
.pl__bpm small{ font-family:var(--font-mono); font-size:.55rem; letter-spacing:.18em; color:var(--faint); }

/* =========================================================
   REVEAL
   ========================================================= */

.reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity calc(var(--bar) * 1.2) var(--pop) var(--d,0s),
             transform calc(var(--bar) * 1.4) var(--pop) var(--d,0s);
}
.reveal.in{ opacity:1; transform:none; }

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width:1080px){
  .sleeve{ grid-template-columns:1fr; }
  .sleeve__art{ position:static; max-width:26rem; }
  .collage{ grid-template-columns:1fr; }
  .collage__img,.collage__txt,.collage__q{ grid-column:1/-1; grid-row:auto; }
  .collage__img{ max-width:24rem; }
  .collage__txt{ margin-top:2rem; }
  .gig{ grid-template-columns:auto 1fr auto; row-gap:.3rem; }
  .gig__c{ grid-column:2; }
  .gig__m{ grid-column:2/-1; }
  .rules{ display:none; }
}

@media (max-width:760px){
  .hd__burger{ display:block; }
  .hd__bpm{ display:none; }
  .hd__nav{
    position:fixed; inset:0 0 auto 0; margin:0;
    flex-direction:column; align-items:flex-start; gap:1.3rem;
    padding:5.5rem var(--pad) 2.4rem;
    background:#070707;
    border-bottom:1px solid var(--hair);
    transform:translateY(-102%); transition:transform calc(var(--bar)) var(--pop);
  }
  .hd__nav.open{ transform:none; }
  .hd__nav a{ font-size:1.05rem; letter-spacing:.1em; }

  .hero{ min-height:94svh; padding-top:6.5rem; }
  .hero__foot{ grid-template-columns:1fr; }
  .hero__cue{ display:none; }
  /* lift the disc behind the wordmark so it never sits under body copy */
  .disc{ right:-28vw; top:30%; translate:0 -50%; width:94vw; opacity:.5; }

  .idx__row{ grid-template-columns:auto 1fr auto; }
  .idx__b{ display:none; }
  .collage__img::before{ display:none; }

  .pl__meta{ display:none; }
  .ft{ flex-direction:column; gap:.35rem; }
}

@media (max-width:420px){
  .pl__bpm{ display:none; }
}

/* =========================================================
   PREFERENCES
   ========================================================= */

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

@media (prefers-contrast:more){
  :root{
    --dim:rgba(247,245,242,.88); --faint:rgba(247,245,242,.72);
    --hair:rgba(247,245,242,.35); --hair-2:rgba(247,245,242,.2);
  }
  .fx__scan,.fx__vig{ opacity:.25; }
  .shout::before,.shout::after{ display:none; }
}

/* =========================================================
   MOOD CONTROL SLIDER STYLES
   ========================================================= */
.mood-control-wrapper {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-left: auto;
  margin-right: 1.4rem;
  padding: .45rem .85rem;
  border: 1px solid var(--gold);
  background: rgba(201,162,74,.07);
  border-radius: 999px;
  position: relative;
  z-index: 3;
}
.mood-label {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.mood-vulnerability {
  color: var(--white);
  opacity: calc(1 - var(--mood-intensity, 1) + 0.4);
}
.mood-hope {
  color: var(--gold);
  opacity: calc(var(--mood-intensity, 1) + 0.4);
}
.slider-container {
  width: 150px;
  position: relative;
  display: flex;
  align-items: center;
}
#mood-slider {
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  background: linear-gradient(90deg, rgba(247,245,242,.3), var(--gold));
  border: none;
  border-radius: 999px;
  outline: none;
  cursor: pointer;
  z-index: 2;
}
#mood-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--gold-lit);
  border: 2px solid var(--black);
  box-shadow: 0 0 0 2px var(--gold), 0 0 14px rgba(242,211,145,.85);
  cursor: pointer;
}
#mood-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--black);
  background: var(--gold-lit);
  box-shadow: 0 0 0 2px var(--gold), 0 0 14px rgba(242,211,145,.85);
  cursor: pointer;
}
/* the track now shows the gradient itself — old fill overlay retired */
.slider-track-highlight { display: none; }

@media (max-width: 768px) {
  .mood-control-wrapper {
    margin-right: 0.5rem;
    gap: 0.4rem;
    padding: .3rem .55rem;
  }
  .mood-label { display: none; }   /* save room on phones; the gold track shows the range */
  .slider-container {
    width: 92px;
  }
}

/* =========================================================
   PRIVATE ACCESS GATE
   ========================================================= */
body.gated{ overflow:hidden; }
.gate{
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center; padding:2rem;
  background:radial-gradient(120% 90% at 50% 28%, #14110b, #08070a 72%);
}
.gate__box{ width:100%; max-width:23rem; text-align:center; }
.gate__crest{
  width:130px; height:130px; margin:0 auto 1.6rem; border-radius:50%;
  overflow:hidden; border:1px solid #c9a24a; box-shadow:0 0 44px -8px rgba(201,162,74,.55);
}
.gate__crest img{ width:100%; height:100%; object-fit:cover; object-position:50% 24%; }
.gate__eyebrow{
  font-family:var(--font-mono); font-size:.66rem; font-weight:700;
  letter-spacing:.34em; text-transform:uppercase; color:#c9a24a; margin-bottom:.9rem;
}
.gate__title{
  font-family:var(--font-serif); font-size:2.5rem; letter-spacing:.02em;
  line-height:1; color:#f7f5f2; margin-bottom:1rem;
}
.gate__sub{
  font-family:var(--font-body); font-size:.9rem; line-height:1.55;
  color:rgba(247,245,242,.6); max-width:28ch; margin:0 auto 1.8rem;
}
.gate__btn{
  display:inline-flex; align-items:center; gap:.7rem; cursor:pointer;
  background:#f2ede4; color:#17140f; border:0; border-radius:999px;
  padding:.9rem 1.6rem; font-family:var(--font-mono); font-weight:700;
  font-size:.8rem; letter-spacing:.04em;
  transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .4s ease;
}
.gate__btn:hover{ transform:translateY(-2px); box-shadow:0 12px 34px -12px rgba(201,162,74,.65); }
.gate__btn:disabled{ opacity:.6; cursor:default; transform:none; box-shadow:none; }
.gate__err{
  min-height:1.2rem; margin-top:1.15rem; font-family:var(--font-mono);
  font-size:.72rem; letter-spacing:.03em; color:#e8a0a0;
}

/* gate socials — shown so locked-out visitors can still follow along */
.gate__social{ margin-top:2.4rem; }
.gate__social-label{
  display:block; margin:0 auto 1.1rem; max-width:26ch;
  font-family:var(--font-mono); font-size:.6rem; font-weight:700;
  letter-spacing:.26em; text-transform:uppercase; color:rgba(201,162,74,.72);
  position:relative;
}
.gate__social-label::before,
.gate__social-label::after{
  content:""; position:absolute; top:50%; width:1.4rem; height:1px;
  background:linear-gradient(90deg, transparent, rgba(201,162,74,.5));
}
.gate__social-label::before{ right:calc(100% + .8rem); transform:scaleX(-1); }
.gate__social-label::after{ left:calc(100% + .8rem); }
.gate__social-row{ display:flex; justify-content:center; gap:.85rem; }
.gate__ic{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(201,162,74,.4); color:#c9a24a; background:transparent;
  transition:transform .3s cubic-bezier(.16,1,.3,1), color .25s ease,
             border-color .25s ease, background .25s ease, box-shadow .35s ease;
}
.gate__ic svg{ width:20px; height:20px; fill:currentColor; }
.gate__ic:hover{
  transform:translateY(-3px); color:#08070a; background:#c9a24a;
  border-color:#c9a24a; box-shadow:0 10px 26px -10px rgba(201,162,74,.7);
}
.gate__ic[data-hide-empty]{ display:none; }

/* now-playing track */
.idx__row.active .idx__n{ color:var(--gold); -webkit-text-stroke:0; }
.idx__row.active .idx__t{ color:#fff; }
.idx__row.active .idx__b{ opacity:1; }