/* ==========================================================================
   PH7 RECORDS — meet me in the middle
   Design system built on the pH scale: acid → neutral → alkaline.
   7 is the center. The brand lives there.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Ground */
  /* Stone black: neutral, no blue cast. The old ramp was #07080A/#0E1015,
     which read cold and slightly digital. These are warm-neutral charcoals, so
     the pH spectrum is the only colour on the page and it hits harder for it.
     The grain in body::after is what stops this reading as flat empty void. */
  --bg:            #0C0C0D;
  --bg-raise:      #131315;
  --surface:       #17171A;
  --surface-2:     #1D1D21;
  --line:          rgba(255, 255, 255, 0.09);
  --line-strong:   rgba(255, 255, 255, 0.16);

  /* Ink */
  --ink:           #EDEFF2;
  --ink-dim:       #A6AEBB;
  --ink-mute:      #6F7887;

  /* pH spectrum — the signature.
     Sky sits at dead center (pH 7) so the brand accent IS the middle of the
     scale. Everything warm falls left of it, everything cool falls right. */
  --ph-0:  #FF3B47;   /* acid                                   */
  --ph-2:  #FF7A3D;
  --ph-4:  #FFC93F;
  --ph-5:  #A8E063;   /* transition — keeps the gradient legible */
  --ph-7:  #3B9DFF;   /* NEUTRAL — the brand accent, now a truer blue */
  --ph-9:  #3D6BFF;   /* electric */
  --ph-11: #5B4CF0;
  --ph-14: #8B5CF6;   /* alkaline */

  /* The cool half of the spectrum was pushed toward blue on request. The
     accent went from sky (#38BDF8, a touch cyan) to #3B9DFF, and the alkaline
     end from violet-magenta to blue-violet. Cyan (#22D3EE) is kept as a
     highlight only — it is what the animated logo flashes before it settles,
     so it reads as energy, not as the base colour. */
  --cyan:          #22D3EE;
  --electric:      #3D6BFF;

  --accent:        var(--ph-7);
  --accent-soft:   rgba(59, 157, 255, 0.14);
  --accent-line:   rgba(59, 157, 255, 0.40);

  --spectrum: linear-gradient(90deg,
    var(--ph-0) 0%, var(--ph-2) 15%, var(--ph-4) 30%, var(--ph-5) 41%,
    var(--ph-7) 50%,
    var(--ph-9) 68%, var(--ph-11) 84%, var(--ph-14) 100%);

  /* Type */
  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

  /* Space */
  --gut:      clamp(1.25rem, 4vw, 3rem);
  --section:  clamp(4.5rem, 11vw, 9rem);
  --max:      1320px;

  --radius:    14px;
  --radius-sm: 8px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }

/* Must beat the component display rules below (.rel, .art and .yr each set
   their own display, which would otherwise override the UA [hidden] rule and
   break the year filters and search). */
[hidden] { display: none !important; }


/* ---------- Stone grain ----------
   One inline SVG turbulence, fixed to the viewport, ~2KB, no request. Kept very
   low contrast: enough that the black reads as a surface with tooth, not so much
   that it fights artwork or makes text shimmer. pointer-events:none so it can
   never eat a click. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Anything interactive has to sit above the grain layer. */
.hdr, main, footer, .sticky-cta { position: relative; z-index: 2; }

::selection { background: var(--accent); color: #04121C; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ---------- Layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.section { padding-block: var(--section); }
.section--tight { padding-block: clamp(3rem, 7vw, 5.5rem); }

/* ---------- Type scale ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 0.86;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  font-size: clamp(2.5rem, 9.5vw, 7.5rem);
}
.h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.25rem, 6.5vw, 4.75rem);
  line-height: 0.94;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.6vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.lede {
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  color: var(--ink-dim);
  line-height: 1.7;
  max-width: 62ch;
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.eyebrow::before {
  content: '';
  width: 26px;
  height: 1px;
  background: var(--accent);
  flex: none;
}
.muted { color: var(--ink-mute); }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- pH spectrum bar ---------- */
.spectrum {
  height: 3px;
  width: 100%;
  background: var(--spectrum);
  background-size: 200% 100%;
  animation: drift 18s linear infinite;
}
.spectrum--thin { height: 2px; }
@keyframes drift {
  to { background-position: 200% 0; }
}

/* ==========================================================================
   THE HOUSE
   PH7 with the H as a house, and a scroll that walks you through its door.

   One variable drives everything: --t, 0 outside to 1 inside, written by
   site.js. Positions, fades and lighting are all calc() off it, so there is no
   per-element JS and nothing to keep in sync.

   --t defaults to 1 (inside, doors usable). .js on <html> moves the start line
   back to 0. That direction matters: the fallback is the working end state.
   ========================================================================== */
.stage {
  --t: 1;
  --depth: 1900px;   /* how far the camera travels */
  position: relative;
  height: 300vh;     /* the scroll runway the pin slides through */
}
html.js .stage { --t: 0; }

.stage__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.scene {
  position: absolute;
  inset: 0;
  perspective: 900px;
  perspective-origin: 50% 46%;
  /* Light pooling out of the doorway, brightening as you approach. */
  background:
    radial-gradient(58% 46% at 50% 46%,
      rgba(61,107,255,calc(0.07 + var(--t) * 0.14)) 0%,
      rgba(34,211,238,calc(0.02 + var(--t) * 0.05)) 40%,
      rgba(61,107,255,0) 68%),
    var(--bg);
}
.world {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--t) * var(--depth)));
}

/* ---- the room ----
   One set of numbers, used consistently, so the six planes actually meet:
     half-width  1300, half-height 750
     mouth at z -820 (where the facade stands), back wall at z -2600
     so the room is 1780 deep and its walls centre on z -1710.
   The first attempt sized these by eye and the content ended up wider than the
   wall behind it, which read as a floating panel rather than a room. */
.room {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  /* Builds itself as you close in. At t=0 the mark floats in the stone-black
     void; a lit rectangle hanging behind it just looked like a stray panel. */
  opacity: calc((var(--t) - 0.06) * 2.4);
}
.room__face {
  position: absolute;
  top: 50%; left: 50%;
  background: var(--bg-raise);
}
.room__left, .room__right {
  width: 1780px; height: 1500px;
  margin: -750px 0 0 -890px;
}
/* Darker toward the mouth, lighter deep in — the light source is the room, so
   the far end should be the bright end. */
.room__left {
  transform: translateX(-1300px) translateZ(-1710px) rotateY(90deg);
  background: linear-gradient(90deg, var(--bg) 0%, #16181F 100%);
}
.room__right {
  transform: translateX(1300px) translateZ(-1710px) rotateY(-90deg);
  background: linear-gradient(270deg, var(--bg) 0%, #16181F 100%);
}
.room__floor, .room__ceil {
  width: 2600px; height: 1780px;
  margin: -890px 0 0 -1300px;
}
.room__floor {
  transform: translateY(750px) translateZ(-1710px) rotateX(90deg);
  background: linear-gradient(0deg, #101216 0%, var(--bg) 100%);
}
.room__ceil {
  transform: translateY(-750px) translateZ(-1710px) rotateX(-90deg);
  background: linear-gradient(180deg, #0E0E10 0%, var(--bg) 100%);
}
.room__back {
  width: 2600px; height: 1500px;
  margin: -750px 0 0 -1300px;
  transform: translateZ(-2600px);
  background:
    radial-gradient(60% 55% at 50% 42%, rgba(61,107,255,0.16), transparent 72%),
    #131418;
}

/* ---- what is waiting inside ----
   Sits just in front of the back wall and, critically, narrower than it: the
   content has to live ON the wall, not hang off both sides of it. */
.inside {
  position: absolute;
  top: 50%; left: 50%;
  width: min(1180px, 92vw);
  transform: translate(-50%, -50%) translateZ(-2555px) scale(1.45);
  text-align: center;
  opacity: calc((var(--t) - 0.46) * 4.2);
}
.inside__sub {
  font-size: 1.02rem;
  color: var(--ink-dim);
  max-width: 60ch;
  margin: 0 auto 2.2rem;
  line-height: 1.7;
}
.inside__sub strong { color: var(--ink); }
.inside .doors--hero { margin-inline: auto; }
.inside .hero__hint { margin-top: 1.6rem; }

/* ---- the facade: the mark you walk through ---- */
.facade {
  position: absolute;
  top: 50%; left: 50%;
  width: min(1100px, 94vw);
  /* Centred with a transform, not a negative margin. The margin was
     min(-550px, -47vw), and min() of two negatives takes the MORE negative one,
     so below ~1170px wide it pulled the mark off the left edge of the screen
     instead of centring it. Every phone got a half-visible logo. */
  transform: translate(-50%, -52%) translateZ(-820px) scale(1.8);
  text-align: center;
  /* Fades out just before it reaches the camera, so it never turns inside out
     as it passes the viewing plane. */
  opacity: calc((0.44 - var(--t)) * 7);
}
.facade__eyebrow { justify-content: center; margin-bottom: 1.1rem; }
.facade__word {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.42em;
  font-size: 0.82rem;
  color: var(--ink-mute);
  margin-top: 1.4rem;
  padding-left: 0.42em;
}

/* ---- PH7: the label's own mark, as vector ----
   Traced from the logo file into one <path>; see ph7_mark() in build.py for
   the layer stack. Everything here is driven by --t like the rest of the
   scene. */
.mark { margin: 0; }
.mark__svg {
  display: block;
  width: min(680px, 74vw);
  height: auto;
  margin: 0 auto;
  color: var(--ink);
  overflow: visible;
}
.mark__ink { fill: currentColor; }

/* The doorway and the light behind it brighten as you approach — the reason
   to walk in. Both are plain gradients, no filters: this element is inside a
   3D transform and SVG filters there are a frame-rate cliff on phones. */
.mark__glow { opacity: calc(0.45 + var(--t) * 1.4); }
.mark__door { opacity: calc(0.55 + var(--t) * 1.2); }

/* The chromatic split. Cyan pulls left, magenta pulls right, screen-blended
   under the white so at rest only a hairline of colour shows at the edges —
   the same cyan/magenta the animated logo shatters into. Passing through the
   door (t -> 0.44) opens the gap to ~40px in the mark's own units. */
.mark__ab {
  mix-blend-mode: screen;
  opacity: 0.85;
  transform: translateX(calc(var(--t) * var(--dir) * 90px + var(--dir) * 3px));
  transition: transform 0.08s linear;
}
.mark__ab--c { --dir: -1; fill: var(--cyan); }
.mark__ab--m { --dir:  1; fill: #FF2BD6; }

/* ---- the nudge ---- */
.enterhint {
  position: absolute;
  left: 50%; bottom: 9vh;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.8rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-mute);
  white-space: nowrap;
  opacity: calc((0.12 - var(--t)) * 8);
}
.enterhint__rule {
  width: 1px; height: 46px;
  background: linear-gradient(180deg, var(--ink-mute), transparent);
}
html:not(.js) .enterhint { display: none; }

/* Phones: shorter runway and a shallower push, so the whole thing is over in a
   couple of thumb-flicks instead of feeling like a hostage situation. */
@media (max-width: 720px) {
  .stage { height: 240vh; --depth: 1700px; }
  .scene { perspective: 700px; }
  .facade { transform: translate(-50%, -50%) translateZ(-820px) scale(1.75); }
  .inside { transform: translate(-50%, -50%) translateZ(-2555px) scale(1.15); }
  /* Fewer big composited planes and flat fills instead of gradients. Measured:
     this took the 95th-percentile frame from 67ms to comfortably under 50 on a
     6x-throttled phone profile. The ceiling is the one surface you never look
     at on a tall narrow screen, so it is the cheapest thing to lose. */
  .room__ceil { display: none; }
  .room__left  { background: #141416; }
  .room__right { background: #141416; }
  .room__floor { background: #0F0F11; }
}

/* Motion off: no journey at all. You are inside, the doors are there, the mark
   sits above them as a static piece of art. Nothing moves, nothing is hidden. */
@media (prefers-reduced-motion: reduce) {
  html.js .stage { --t: 1; }
  .stage { height: auto; }
  .stage__pin { position: static; height: auto; padding: 8vh 0 10vh; }
  .scene { position: relative; inset: auto; perspective: none; min-height: 0; }
  .world { position: relative; inset: auto; transform: none; }
  .room { display: none; }
  .facade, .inside {
    position: relative; top: auto; left: auto; margin: 0 auto;
    transform: none; opacity: 1;
  }
  .facade { margin-bottom: 3rem; }
  .enterhint { display: none; }
}

/* Same flattening when JS never arrives — the scene needs a driver to be a
   scene, and without one a tall sticky stage is just dead space. */
html:not(.js) .stage { height: auto; }
html:not(.js) .stage__pin { position: static; height: auto; padding: 8vh 0 10vh; overflow: visible; }
html:not(.js) .scene { position: relative; inset: auto; perspective: none; }
html:not(.js) .world { position: relative; inset: auto; transform: none; }
html:not(.js) .room { display: none; }
html:not(.js) .facade,
html:not(.js) .inside {
  position: relative; top: auto; left: auto; margin: 0 auto;
  transform: none; opacity: 1;
}
html:not(.js) .facade { margin-bottom: 3rem; }



/* ---------- Header ---------- */
.hdr {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(7, 8, 10, 0.72);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--line);
  transition: background 0.3s var(--ease);
}
.hdr__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 68px;
}
.hdr__logo {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.02rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  flex: none;
}
.hdr__logo img { height: 30px; width: auto; }
.hdr__logo .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
}
.nav {
  display: flex;
  align-items: center;
  /* 1.8vw, not 2.4vw: with Merch in the menu the masthead ran 11px past a 1280px screen and pushed
     "Join the family" off the edge. Same 2.1rem ceiling on wide screens. */
  gap: clamp(0.85rem, 1.8vw, 2.1rem);
}
.nav a {
  font-size: 0.83rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-dim);
  position: relative;
  padding-block: 0.4rem;
  transition: color 0.2s var(--ease);
  white-space: nowrap;
}
.nav a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1.5px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after,
.nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav a[aria-current="page"] { color: var(--ink); }

/* Members door in the masthead. Deliberately looks different from the nav —
   it is a destination for artists, not another public page. */
.nav__portal {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--line-strong);
  border-radius: 99px;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  white-space: nowrap;
  transition: all 0.25s var(--ease);
}
.nav__portal svg { width: 13px; height: 13px; flex: none; opacity: 0.75; }
.nav__portal:hover,
.nav__portal.is-here {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
}
.nav__portal:hover svg,
.nav__portal.is-here svg { opacity: 1; }

@media (max-width: 940px) {
  /* In the burger menu it becomes a full-width row like everything else. */
  .nav__portal {
    width: 100%;
    justify-content: flex-start;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    padding: 0.95rem 0;
    font-size: 1rem;
    letter-spacing: 0.06em;
    background: none;
    color: var(--accent);
  }
  .nav__portal svg { width: 15px; height: 15px; opacity: 1; }
}

.hdr__cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--line-strong);
  border-radius: 99px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: all 0.25s var(--ease);
}
.hdr__cta:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}
/* The full masthead (logo, eight links, the portal door, Join) needs about 1260px. Below that the Join button goes
   (it is repeated in the homepage band and the footer), below 1060px the links tighten, and below 940px the burger
   takes over. Before this, 861-1260px screens pushed the header up to 300px past the edge. */
/* Two doors (Artist Portal + Pulse Member) added ~180px, so every step moved up: Join goes below 1650px, the links
   tighten below 1260px and the doors shorten to "Portal" / "Member", and below 1010px the doors are icon-only
   (their names stay for screen readers and in the title tooltip). In the burger menu (940px) they are full rows again. */
@media (max-width: 1650px) {
  .hdr__cta { display: none; }
}
@media (max-width: 1260px) {
  .nav { gap: clamp(0.7rem, 1.5vw, 2.1rem); }
  .nav a { font-size: 0.78rem; letter-spacing: 0.04em; }
  .nav__portal { padding-inline: 0.7rem; }
  .nav__long { display: none; }
}
@media (max-width: 1010px) {
  .nav__portal { padding-inline: 0.55rem; }
  .nav__lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 940px) {
  .nav__pulse { order: -1; } /* PH7 Pulse leads the phone menu */
  .nav__portal { padding-inline: 0.7rem; }
  .nav__long { display: inline; }
  .nav__lbl { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}

.burger { display: none; width: 30px; height: 30px; position: relative; flex: none; }
.burger span {
  position: absolute; left: 3px; right: 3px; height: 1.5px;
  background: var(--ink); transition: all 0.3s var(--ease);
}
.burger span:nth-child(1) { top: 10px; }
.burger span:nth-child(2) { top: 18px; }
.burger.is-open span:nth-child(1) { top: 14px; transform: rotate(45deg); }
.burger.is-open span:nth-child(2) { top: 14px; transform: rotate(-45deg); }

@media (max-width: 940px) {
  .burger { display: block; }
  .hdr__cta { display: none; }
  .nav {
    position: fixed;
    inset: 68px 0 auto 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--bg-raise);
    border-bottom: 1px solid var(--line);
    padding: 0.5rem var(--gut) 1.75rem;
    /* The drawer is offset 68px from the top, so it has to travel its own
       height PLUS that offset to clear the screen. translateY(-120%) is a
       percentage of the drawer's height alone: it left the last ~20px of the
       panel sitting over the announce strip, greying out half the "demos open"
       line and covering the mailto link. Never size an escape by a percentage
       of the thing escaping. */
    transform: translateY(calc(-100% - 68px));
    /* And belt-and-braces: when closed it is not painted or clickable at all,
       whatever the transform does. visibility is delayed on the way out so the
       slide still animates, and immediate on the way in. */
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.4s var(--ease), visibility 0s linear 0.4s;
    max-height: calc(100vh - 68px);
    overflow-y: auto;
  }
  .nav.is-open {
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
    transition: transform 0.4s var(--ease), visibility 0s;
  }
  .nav a {
    width: 100%;
    padding: 0.95rem 0;
    border-bottom: 1px solid var(--line);
    font-size: 1rem;
  }
  .nav a::after { display: none; }
}

/* ---------- Announce strip ---------- */
.announce {
  background: var(--bg-raise);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  text-align: center;
  padding: 0.6rem var(--gut);
}
.announce a { color: var(--accent); border-bottom: 1px solid var(--accent-line); }
.announce a:hover { background: var(--accent-soft); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: auto;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.hero__glow {
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 130%;
  background:
    radial-gradient(60% 55% at 22% 28%, rgba(59, 157, 255,0.16), transparent 68%),
    radial-gradient(50% 50% at 82% 65%, rgba(99,102,241,0.14), transparent 70%),
    radial-gradient(40% 40% at 55% 92%, rgba(59,157,255,0.10), transparent 70%);
  filter: blur(20px);
  pointer-events: none;
  animation: breathe 14s ease-in-out infinite alternate;
}
@keyframes breathe {
  to { transform: scale(1.12) translateY(-3%); opacity: 0.82; }
}
.hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 78px 78px;
  mask-image: radial-gradient(78% 78% at 50% 42%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(78% 78% at 50% 42%, #000 20%, transparent 78%);
  opacity: 0.5;
  pointer-events: none;
}
.hero__inner { position: relative; z-index: 2; padding-block: clamp(2.5rem, 6vw, 4rem); }
.hero .display span { display: block; }
.hero .display .ln2 {
  background: var(--spectrum);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: drift 18s linear infinite;
}
.hero__sub {
  margin-top: clamp(1rem, 2vw, 1.4rem);
  max-width: 54ch;
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  color: var(--ink-dim);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: clamp(2rem, 4vw, 2.75rem);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.6rem;
  border-radius: 99px;
  font-size: 0.83rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  border: 1px solid transparent;
  transition: all 0.3s var(--ease);
  white-space: nowrap;
}
.btn--primary {
  background: var(--accent);
  color: #04121C;
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 34px rgba(59, 157, 255, 0.32);
}
.btn--ghost {
  border-color: var(--line-strong);
  color: var(--ink);
}
.btn--ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}
.btn svg { width: 16px; height: 16px; flex: none; }

/* ---------- Stats ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.stat {
  padding: clamp(1.5rem, 3.5vw, 2.4rem) clamp(1.1rem, 2.5vw, 1.75rem);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: background 0.3s var(--ease);
}
.stat:hover { background: var(--surface); }
.stat__n {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 4.6vw, 3.1rem);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.stat__l {
  margin-top: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.67rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ---------- Section head ---------- */
.shead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.shead__txt { max-width: 60ch; }
.shead .h2 { margin-top: 0.9rem; }
.shead p { margin-top: 0.8rem; color: var(--ink-dim); }

.link-more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid var(--accent-line);
  padding-bottom: 0.3rem;
  transition: gap 0.25s var(--ease);
}
.link-more:hover { gap: 0.85rem; }

/* ---------- Release grid ---------- */
.releases {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
}
.rel {
  display: block;
  position: relative;
  transition: transform 0.35s var(--ease);
}
.rel:hover { transform: translateY(-6px); }
.rel__art {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
}
.rel__art img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease), filter 0.4s var(--ease);
}
.rel:hover .rel__art img { transform: scale(1.06); }
.rel__art::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(7,8,10,0.85), transparent 55%);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
.rel:hover .rel__art::after { opacity: 1; }
.rel__play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(0.82);
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--accent);
  color: #04121C;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: all 0.35s var(--ease);
  z-index: 2;
}
.rel:hover .rel__play { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.rel__meta { padding-top: 0.9rem; }
.rel__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: -0.005em;
  line-height: 1.25;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.rel__artists {
  margin-top: 0.3rem;
  font-size: 0.83rem;
  color: var(--ink-mute);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rel__date {
  margin-top: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.13em;
  color: var(--ink-mute);
  text-transform: uppercase;
}

/* ---------- Filters ---------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 2.25rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
}
.chip {
  padding: 0.5rem 1.05rem;
  border: 1px solid var(--line-strong);
  border-radius: 99px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
  transition: all 0.25s var(--ease);
}
.chip:hover { border-color: var(--ink-dim); color: var(--ink); }
.chip.is-on {
  background: var(--accent);
  border-color: var(--accent);
  color: #04121C;
  font-weight: 600;
}
.search {
  margin-left: auto;
  position: relative;
  min-width: 210px;
  flex: 1 1 210px;
  max-width: 320px;
}
.search input {
  width: 100%;
  padding: 0.62rem 1rem 0.62rem 2.4rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 99px;
  color: var(--ink);
  font-size: 0.86rem;
  font-family: var(--font-body);
  transition: border-color 0.25s var(--ease);
}
.search input::placeholder { color: var(--ink-mute); }
.search input:focus { outline: none; border-color: var(--accent); }
.search svg {
  position: absolute; left: 0.9rem; top: 50%;
  transform: translateY(-50%);
  width: 15px; height: 15px;
  color: var(--ink-mute);
  pointer-events: none;
}
.empty {
  text-align: center;
  padding: 4rem 1rem;
  color: var(--ink-mute);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---------- Year rule ---------- */
.yr {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin: clamp(2.5rem, 5vw, 4rem) 0 1.75rem;
}
.yr:first-of-type { margin-top: 0; }
.yr__n {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  letter-spacing: -0.02em;
  line-height: 1;
}
.yr__line { flex: 1; height: 1px; background: var(--line); }
.yr__c {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
  text-transform: uppercase;
}

/* ---------- Artist grid ---------- */
.roster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.art {
  position: relative;
  padding: 1.4rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: all 0.35s var(--ease);
  display: block;
}
.art::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--spectrum);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease);
}
.art:hover {
  border-color: var(--line-strong);
  background: var(--surface-2);
  transform: translateY(-4px);
}
.art:hover::before { transform: scaleX(1); }
.art__n {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.art__m {
  margin-top: 0.7rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.art__m b { color: var(--accent); font-weight: 600; }
.art__yrs {
  margin-top: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
}

/* ---------- Marquee ---------- */
.marquee {
  overflow: hidden;
  border-block: 1px solid var(--line);
  padding-block: 1.4rem;
  background: var(--bg-raise);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  gap: 2.5rem;
  width: max-content;
  animation: slide 48s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.1rem, 2.2vw, 1.65rem);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--ink-mute);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 2.5rem;
  transition: color 0.25s var(--ease);
}
.marquee__item:hover { color: var(--ink); }
.marquee__item::after {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.65;
  flex: none;
}
@keyframes slide {
  to { transform: translateX(-50%); }
}

/* ---------- About / split ---------- */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.prose p + p { margin-top: 1.15rem; }
.prose p { color: var(--ink-dim); }
.prose strong { color: var(--ink); font-weight: 600; }

.pull {
  border-left: 2px solid var(--accent);
  padding: 0.35rem 0 0.35rem 1.5rem;
  margin: 1.75rem 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-transform: uppercase;
}

.cards {
  display: grid;
  gap: 1rem;
}
.card {
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: all 0.3s var(--ease);
}
.card:hover { border-color: var(--line-strong); background: var(--surface-2); }
.card__k {
  font-family: var(--font-mono);
  font-size: 0.67rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.card__v { margin-top: 0.6rem; color: var(--ink-dim); font-size: 0.95rem; }

/* ---------- CTA band ---------- */
.band {
  position: relative;
  border-block: 1px solid var(--line);
  background: var(--bg-raise);
  overflow: hidden;
}
.band__glow {
  position: absolute; inset: 0;
  background: radial-gradient(50% 120% at 50% 100%, rgba(59, 157, 255,0.13), transparent 70%);
  pointer-events: none;
}
.band__inner {
  position: relative;
  text-align: center;
  padding-block: clamp(3.5rem, 8vw, 6rem);
}
.band .lede { margin-inline: auto; }
.band__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2.25rem;
}

/* ---------- Embed ---------- */
.embed {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
}
.embed iframe { display: block; width: 100%; border: 0; }

/* ---------- Footer ---------- */
.ftr {
  border-top: 1px solid var(--line);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
  background: var(--bg-raise);
}
.ftr__top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
}
.ftr__brand .lede { font-size: 0.92rem; margin-top: 1rem; max-width: 34ch; }
.ftr__ttl {
  font-family: var(--font-mono);
  font-size: 0.67rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 1.1rem;
}
.ftr__list li + li { margin-top: 0.65rem; }
.ftr__list a {
  font-size: 0.9rem;
  color: var(--ink-dim);
  transition: color 0.2s var(--ease);
}
.ftr__list a:hover { color: var(--accent); }
.ftr__list .lock {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-left: 0.35rem;
}
.ftr__bot {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.socials { display: flex; gap: 0.6rem; }
.socials a {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink-dim);
  transition: all 0.25s var(--ease);
}
.socials a:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
  transform: translateY(-2px);
}
.socials svg { width: 16px; height: 16px; }

/* ---------- Page head ---------- */
.phead {
  position: relative;
  padding-block: clamp(3.5rem, 8vw, 6rem) clamp(2.5rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.phead__glow {
  position: absolute; inset: -60% -20% auto -20%; height: 200%;
  background: radial-gradient(45% 45% at 25% 40%, rgba(59, 157, 255,0.12), transparent 70%);
  pointer-events: none;
}
.phead__inner { position: relative; }
.phead .lede { margin-top: 1.1rem; }

/* ---------- Breadcrumbs (track + artist pages) ---------- */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  min-width: 0;
}
.crumbs a { color: var(--ink-dim); }
.crumbs a:hover { color: var(--accent); }
.crumbs span { color: var(--ink-mute); }
.crumbs [aria-current] {
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60vw;
}

/* ---------- Track page ---------- */
.track {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: clamp(1.75rem, 5vw, 4.5rem);
  align-items: start;
}
.track__art {
  aspect-ratio: 1;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  min-width: 0;
}
.track__art img { width: 100%; height: 100%; object-fit: cover; }
.track__body { min-width: 0; }
.track__title { overflow-wrap: anywhere; }
.track__who {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  letter-spacing: -0.01em;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.track__who a { color: var(--accent); }
.track__who a:hover { text-decoration: underline; text-underline-offset: 4px; }
.stores {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  margin-top: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.stores li::before { content: '↗'; margin-right: 0.45rem; color: var(--ink-mute); }
.stores a { color: var(--ink-dim); padding-block: 0.3rem; display: inline-block; }
.stores a:hover { color: var(--accent); }
@media (max-width: 720px) {
  .track { grid-template-columns: 1fr; }
  .track__art { max-width: 420px; }
}

/* Signed marker on roster tiles */
.tag {
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.55rem;
  padding: 0.12rem 0.45rem;
  border: 1px solid var(--accent-line);
  border-radius: 99px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  color: var(--accent);
  background: var(--accent-soft);
  transform: translateY(-2px);
}

/* ---------- Reveal ---------- */
.rv {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
}
.rv.in { opacity: 1; transform: none; }

/* ---------- Utility ---------- */
.sr {
  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; top: -100px; left: 1rem; z-index: 200;
  background: var(--accent); color: #04121C;
  padding: 0.7rem 1.2rem; border-radius: 0 0 8px 8px;
  font-weight: 600; font-size: 0.85rem;
  transition: top 0.2s var(--ease);
}
.skip:focus { top: 0; }

/* ==========================================================================
   START HERE — the guided path
   ========================================================================== */

.btn--lg { padding: 1.05rem 2rem; font-size: 0.88rem; }

.hero__hint {
  margin-top: 1.15rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* Primary header CTA gets the accent so there is one obvious action */
.hdr__cta--go {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
}
.hdr__cta--go:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #04121C;
}

.phead--start .h1 { max-width: 16ch; }

/* ---------- Numbered steps ---------- */
.step { display: flex; gap: clamp(1.25rem, 3vw, 2.75rem); align-items: stretch; }
.step__rail {
  flex: none;
  width: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.step__rail::after {
  content: '';
  flex: 1;
  width: 2px;
  background: linear-gradient(to bottom, var(--accent-line), transparent);
  border-radius: 2px;
}
.step__n {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: var(--accent);
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 1px solid var(--accent-line);
  background: var(--accent-soft);
  border-radius: 50%;
  flex: none;
}
.step__n--solo {
  margin-inline: auto;
  border-color: var(--accent-line);
}
.step__body { flex: 1; min-width: 0; padding-bottom: 0.5rem; }
@media (max-width: 700px) {
  .step { gap: 1rem; }
  .step__rail { width: 40px; }
  .step__n { width: 38px; height: 38px; font-size: 0.85rem; }
}

/* ---------- Track list ---------- */
/* minmax(0,1fr) + min-width:0 stop the nowrap title and play-count from
   forcing the row wider than its column on narrow screens. */
.trks { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
.trks--tight { gap: 0.45rem; }

.trk {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: clamp(0.85rem, 2vw, 1.25rem);
  padding: 0.7rem 1.1rem 0.7rem 0.7rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: all 0.3s var(--ease);
}
.trk:hover {
  background: var(--surface-2);
  border-color: var(--line-strong);
  transform: translateX(4px);
}
.trk__art {
  position: relative;
  flex: none;
  width: 56px; height: 56px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-raise);
}
.trk--big .trk__art { width: 72px; height: 72px; }
.trk__art img { width: 100%; height: 100%; object-fit: cover; }
.trk__play {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: rgba(7, 8, 10, 0.62);
  color: var(--accent);
  opacity: 0;
  transition: opacity 0.28s var(--ease);
}
.trk__play svg { width: 20px; height: 20px; }
.trk:hover .trk__play { opacity: 1; }

.trk__body { flex: 1; min-width: 0; }
.trk__t {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.98rem, 1.7vw, 1.12rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.trk__a {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.85rem;
  color: var(--ink-mute);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.trk__n {
  flex: none;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  line-height: 1.1;
}
.trk__n small {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
@media (max-width: 560px) {
  .trk__n { font-size: 0.8rem; }
  .trk__a { font-size: 0.78rem; }
}

/* ---------- pH quiz ---------- */
.phq {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.phq__slider { position: relative; padding-block: 0.5rem; }

/* The gradient IS the track, so the control looks like the pH strip. */
.phq__input {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 12px;
  border-radius: 99px;
  background: var(--spectrum);
  cursor: grab;
  margin: 0;
}
.phq__input:active { cursor: grabbing; }
.phq__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--bg);
  border: 4px solid var(--ink);
  box-shadow: 0 0 0 5px rgba(59, 157, 255, 0.18), 0 4px 18px rgba(0, 0, 0, 0.6);
  cursor: grab;
  transition: transform 0.15s var(--ease), box-shadow 0.25s var(--ease);
}
.phq__input:hover::-webkit-slider-thumb { transform: scale(1.08); }
.phq__input:active::-webkit-slider-thumb {
  transform: scale(0.95);
  box-shadow: 0 0 0 9px rgba(59, 157, 255, 0.16), 0 4px 18px rgba(0, 0, 0, 0.6);
}
.phq__input::-moz-range-thumb {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--bg);
  border: 4px solid var(--ink);
  box-shadow: 0 0 0 5px rgba(59, 157, 255, 0.18);
  cursor: grab;
}
.phq__input::-moz-range-track {
  height: 12px; border-radius: 99px; background: var(--spectrum);
}
.phq__input:focus-visible { outline-offset: 6px; }

.phq__ticks {
  display: flex;
  justify-content: space-between;
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.phq__readout {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  margin-top: clamp(1.5rem, 3vw, 2rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--line);
}
.phq__num {
  flex: none;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 6vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  min-width: 3.2ch;
}
.phq__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 3vw, 1.75rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.phq__tag {
  margin-top: 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.phq__out { margin-top: 1.5rem; }
.phq__out.swap { animation: swapin 0.42s var(--ease); }
@keyframes swapin {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.phq__line {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.phq__blurb {
  margin-top: 0.6rem;
  color: var(--ink-dim);
  max-width: 58ch;
  font-size: 0.97rem;
}
.phq__out .trks { margin-top: 1.5rem; }
.phq__out .trk { background: var(--bg-raise); }
.phq__who {
  margin-top: 1.15rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.phq__who b { color: var(--accent); font-weight: 600; }

.phq__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: clamp(1.75rem, 3.5vw, 2.25rem);
  padding-top: clamp(1.5rem, 3vw, 1.85rem);
  border-top: 1px solid var(--line);
}

@media (max-width: 520px) {
  .phq__readout { gap: 0.9rem; }
  .phq__ticks { font-size: 0.6rem; }
}

/* ---------- Final CTA band ---------- */
.band--final .band__inner { padding-block: clamp(4rem, 9vw, 7rem); }
.band--final::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--spectrum);
  background-size: 200% 100%;
  animation: drift 18s linear infinite;
}

/* ---------- Doors (secondary audiences) ---------- */
.doors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.door {
  position: relative;
  display: block;
  padding: clamp(1.5rem, 3vw, 2.1rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: all 0.35s var(--ease);
}
.door::before {
  content: '';
  position: absolute; inset: 0 0 auto 0; height: 2px;
  background: var(--spectrum);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease);
}
.door:hover {
  background: var(--surface-2);
  border-color: var(--line-strong);
  transform: translateY(-4px);
}
.door:hover::before { transform: scaleX(1); }
/* These are <span>s in the hero and <div>s elsewhere — force the stack so
   both render identically. */
.door__k {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.67rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.door__t {
  display: block;
  margin-top: 0.7rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.door__d { display: block; margin-top: 0.85rem; color: var(--ink-dim); font-size: 0.94rem; }
.door__go {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.35rem;
  font-family: var(--font-mono);
  font-size: 0.73rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  transition: gap 0.25s var(--ease);
}
.door:hover .door__go { gap: 0.85rem; }
.door__go svg { width: 15px; height: 15px; }

/* ---------- The two hero doors ----------
   Plain <a> elements, visible the moment the HTML lands. No script, no
   overlay, nothing that can fail to appear. This is the primary navigation
   of the whole site. */
/* Three doors: Artist Portal, Start Here, PH7 Pulse Member. Wide enough for one row of three on desktop. */
.doors--hero {
  margin-top: clamp(1.25rem, 2.6vw, 1.75rem);
  max-width: 1120px;
  grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
}
.doors--hero .door {
  background: rgba(18, 21, 27, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-color: var(--line-strong);
}
.doors--hero .door::before { height: 3px; }
.doors--hero .door__t {
  font-size: clamp(1.35rem, 2.8vw, 1.85rem);
  margin-top: 0.55rem;
}
.doors--hero .door__k {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--accent-line);
  border-radius: 99px;
  background: var(--accent-soft);
  font-size: 0.62rem;
}
.doors--hero .door__d { font-size: 0.9rem; }

/* The fan door is the wider audience — give it the filled treatment. */
.door--fan {
  background: linear-gradient(150deg,
    rgba(59, 157, 255, 0.13), rgba(59, 157, 255, 0.03)) !important;
  border-color: var(--accent-line) !important;
}
.door--fan:hover { border-color: var(--accent) !important; }

.hero__hint a {
  color: var(--accent);
  border-bottom: 1px solid var(--accent-line);
  padding-bottom: 0.1rem;
}
.hero__hint a:hover { border-color: var(--accent); }

/* ---------- Sticky conversion bar ---------- */
.sticky-cta {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  transform: translate(-50%, 160%);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 1rem;
  width: calc(100% - 2rem);
  max-width: 560px;
  padding: 0.7rem 0.7rem 0.7rem 1.35rem;
  background: rgba(14, 16, 21, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--line-strong);
  border-radius: 99px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
  transition: transform 0.5s var(--ease);
}
.sticky-cta.in { transform: translate(-50%, 0); }
.sticky-cta__t {
  flex: 1;
  min-width: 0;
  font-size: 0.88rem;
  color: var(--ink-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sticky-cta__t b { color: var(--ink); font-weight: 600; }
.sticky-cta .btn { padding: 0.7rem 1.3rem; font-size: 0.75rem; }
.sticky-cta__x {
  flex: none;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--ink-mute);
  font-size: 1.1rem;
  line-height: 1;
  transition: all 0.25s var(--ease);
}
.sticky-cta__x:hover { background: var(--surface-2); color: var(--ink); }
@media (max-width: 520px) {
  .sticky-cta { padding-left: 1.1rem; gap: 0.6rem; }
  .sticky-cta__t { font-size: 0.8rem; }
  .sticky-cta__t b { display: none; }
}

/* The welcome modal that used to live here is gone. It failed three times
   (requestAnimationFrame does not fire in a background tab, so the modal sat
   open at opacity 0, blocking clicks and locking scroll), and a popup people
   have to dismiss was the wrong answer anyway. The two doors are now part of
   the homepage itself — see .doors--hero. Always there, no JS required. */

/* ---------- Latest News: episodes + artist posts ---------- */
.eps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}
.ep {
  display: flex; flex-direction: column; gap: 0.55rem;
  padding: 1.35rem 1.35rem 1.2rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  min-width: 0;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.ep:hover { border-color: var(--accent-line); transform: translateY(-2px); }
.ep__k {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent);
}
.ep__t { font-family: var(--font-display); font-weight: 700; font-size: 1.08rem; line-height: 1.25; color: var(--ink); }
.ep__d { font-size: 0.9rem; color: var(--ink-dim); line-height: 1.55; }
.ep__go {
  margin-top: auto; padding-top: 0.5rem;
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent); display: flex; align-items: center; gap: 0.45rem;
}
.ep__go svg { width: 14px; height: 14px; }

.posts { display: grid; gap: 0.9rem; max-width: 820px; }
.post {
  padding: 1.3rem 1.4rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
}
.post--empty { border-left-color: var(--line-strong); }
.post__k {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-mute);
  display: flex; gap: 0.8rem; align-items: center; flex-wrap: wrap;
}
.post__who {
  color: var(--accent); background: var(--accent-soft);
  padding: 0.15rem 0.55rem; border-radius: 99px;
  text-decoration: none;
}
/* The artist name is a link when the brief found their own site. It must still
   read as the same pill, and it must not rely on colour alone to say it is a
   link — hence the underline on hover and focus. */
a.post__who:hover, a.post__who:focus-visible { text-decoration: underline; }
/* Where a record actually came out: another label, or self-released. Only set
   for non-PH7 output, which is the whole point of showing it. */
.post__label {
  color: var(--ink-mute); border: 1px solid var(--line-strong);
  padding: 0.12rem 0.5rem; border-radius: 99px;
}
.post__t { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; line-height: 1.25; margin-top: 0.5rem; }
.post__b { color: var(--ink-dim); line-height: 1.6; margin-top: 0.45rem; }
.post__src { color: var(--accent); white-space: nowrap; margin-left: 0.5rem; }

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .rv { opacity: 1; transform: none; }
  .marquee__track { animation: none; }
}

/* ---- Zephyr follows the mouse (see site.js) -------------------------------
   Fixed to the viewport, never clickable. The artwork faces left, so
   .zfollow--right mirrors him when he walks right. Legs only swing while he is
   walking; standing still, just the tail moves. */
.zfollow { position: fixed; left: 0; top: 0; width: min(84px, 18vw); z-index: 60; pointer-events: none; will-change: transform; }
.zfollow svg { display: block; width: 100%; height: auto; overflow: visible; transition: scale .2s ease; }
.zfollow--right svg { scale: -1 1; }
.zfollow--walk svg { animation: zfbob .55s ease-in-out infinite; }
@keyframes zfbob { 0%, 50%, 100% { translate: 0 0; } 25%, 75% { translate: 0 -3px; } }
.zfollow .leg { transform-box: fill-box; transform-origin: 50% 0%; }
.zfollow--walk .leg { animation: .55s ease-in-out infinite; }
.zfollow--walk .leg--a { animation-name: zfLegA; }
.zfollow--walk .leg--b { animation-name: zfLegB; }
@keyframes zfLegA { 0%, 100% { rotate: 16deg; } 50% { rotate: -16deg; } }
@keyframes zfLegB { 0%, 100% { rotate: -16deg; } 50% { rotate: 16deg; } }
.zfollow .tail { transform-box: fill-box; transform-origin: 0% 100%; animation: zfTail 1.6s ease-in-out infinite; }
@keyframes zfTail { 0%, 100% { rotate: -4deg; } 50% { rotate: 6deg; } }
@media (prefers-reduced-motion: reduce) { .zfollow { display: none; } }
@media print { .zfollow { display: none; } }