/* ── FONT FACES ── */
@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/bebas-neue.woff2') format('woff2');}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/cinzel.woff2') format('woff2');}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/cinzel.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300;font-display:swap;src:url('fonts/cormorant-normal.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/cormorant-normal.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300;font-display:swap;src:url('fonts/cormorant-italic.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/cormorant-italic.woff2') format('woff2');}

/* ── RESET & ROOT ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

:root {
  --bg:    #07090d;
  --white: #c8d4e0;
  --dim:   #546070;
  --ghost: #1a2430;
  --teal:  #8596aa;
  --nav-h: 64px;
  --sec-nav-h: 44px;
  --font-display: 'Bebas Neue', sans-serif;
  --font-serif:   'Cormorant Garamond', serif;
  --font-caps:    'Cinzel', serif;
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--white);
  font-family: var(--font-serif);
  overflow-x: hidden;
}

/* ── FILM GRAIN ── */
body::after {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.035;
  pointer-events: none;
  z-index: 9000;
}

/* ── SITE NAV ── */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  display: flex;
  align-items: center;
  padding-left: 32px;
  padding-right: 32px;
  z-index: 7500;
  background: rgba(7,9,13,0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--ghost);
}
.nav-brand {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.nav-logo {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  background: var(--ghost);
  display: block;
}

.nav-wordmark {
  font-family: var(--font-caps);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 8px;
  color: var(--teal);
  text-transform: uppercase;
  margin-left: 14px;
  white-space: nowrap;
  text-decoration: none;
}
.nav-links {
  display: flex;
  gap: 36px;
  list-style: none;
  margin-left: auto;
  margin-right: 36px;
}
.nav-links a {
  font-family: var(--font-caps);
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--dim);
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.25s;
}
.nav-links a:hover { color: var(--white); }
.nav-links a.active { color: var(--white); }
.nav-cta {
  font-family: var(--font-caps);
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--teal);
  text-decoration: none;
  text-transform: uppercase;
  border: 1px solid var(--teal);
  padding: 9px 22px;
  transition: background 0.25s, color 0.25s;
}
.nav-cta:hover { background: var(--teal); color: var(--bg); }
/* ── HAMBURGER BUTTON ── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 8px;
  margin-left: 16px;
}
.nav-hamburger span {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--white);
  transition: transform 0.3s, opacity 0.3s;
}
.site-nav.nav-open .nav-hamburger span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.site-nav.nav-open .nav-hamburger span:nth-child(2) {
  opacity: 0;
}
.site-nav.nav-open .nav-hamburger span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Hide mobile-only CTA on desktop */
.nav-mobile-cta { display: none; }

@media (max-width: 520px) {
  .nav-cta-desktop { display: none; }
  .nav-hamburger { display: flex; margin-left: auto; }
  .site-nav { padding-top: env(safe-area-inset-top, 0px); padding-left: 20px; padding-right: 20px; }

  /* Mobile dropdown */
  .nav-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    top: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
    left: 0; right: 0;
    background: rgba(10,10,10,0.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--ghost);
    padding: 32px 0;
    gap: 0;
    margin: 0;
    list-style: none;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s, transform 0.25s;
  }
  .nav-links li { width: 100%; text-align: center; }
  .nav-links a {
    display: block;
    padding: 16px 24px;
    font-size: 13px;
    letter-spacing: 4px;
  }
  .nav-mobile-cta { display: block; margin-top: 16px; }
  .nav-mobile-cta .nav-cta {
    display: inline-block;
    border: 1px solid var(--ghost);
  }

  /* Open state */
  .site-nav.nav-open .nav-links {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
}

/* ── EYELIDS ── */
.eyelid {
  position: fixed;
  left: 0; right: 0;
  z-index: 8000;
  background: #000;
  overflow: hidden;
  transition: transform 2.2s cubic-bezier(0.4, 0, 0.15, 1);
  will-change: transform;
}
.eyelid-top    { top: 0; height: 50vh; transform-origin: top; }
.eyelid-bottom { bottom: 0; height: 50vh; transform-origin: bottom; }
.eyelid-top.open    { transform: translateY(-100%); }
.eyelid-bottom.open { transform: translateY(100%); }

/* "STAY AWAKE" as one line split at the seam — only complete when shutters are closed */
.eyelid-top::after,
.eyelid-bottom::before {
  content: 'STAY AWAKE';
  position: absolute;
  left: 0; right: 0;
  text-align: center;
  font-family: var(--font-caps);
  font-size: clamp(56px, 8.5vw, 120px);
  font-weight: 900;
  letter-spacing: 0.28em;
  white-space: nowrap;
  color: rgba(255,255,255,0.018);
  -webkit-text-stroke: 0.5px rgba(255,255,255,0.01);
  pointer-events: none;
  user-select: none;
  line-height: 1;
}
/* Top half: anchor text so its center sits at the bottom edge (seam) */
.eyelid-top::after {
  bottom: 0;
  transform: translateY(50%);
}
/* Bottom half: anchor text so its center sits at the top edge (seam) */
.eyelid-bottom::before {
  top: 0;
  transform: translateY(-50%);
}
.eyelid--silent::before,
.eyelid--silent::after { content: none; }

/* ── ENTRANCE ITEMS ── */
.e {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 2.4s cubic-bezier(0.16, 1, 0.3, 1),
              transform 2.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.e.in {
  opacity: 1;
  transform: translateY(0);
}

/* ── HERO ── */
.hero {
  position: relative;
  min-height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 20px) 24px 40px;
}

.hero-bg {
  position: absolute;
  inset: -40px;
  background-image: url('images/hero-bg-1.webp');
  background-size: cover;
  background-position: center;
  animation: bgDrift 28s ease-in-out infinite alternate;
  will-change: transform, filter;
  opacity: 0;
  transition: opacity 2.8s ease;
}
.hero-bg.visible { opacity: 1; }

@keyframes bgDrift {
  0%   { transform: scale(1.06) translate(0, 0);       filter: saturate(0.28) brightness(0.5) blur(0px); }
  18%  { transform: scale(1.07) translate(-4px, -2px); filter: saturate(0.22) brightness(0.45) blur(3.5px); }
  33%  { transform: scale(1.08) translate(-8px, -5px); filter: saturate(0.30) brightness(0.52) blur(0.5px); }
  50%  { transform: scale(1.07) translate(2px, -7px);  filter: saturate(0.18) brightness(0.42) blur(5px); }
  66%  { transform: scale(1.07) translate(6px, -8px);  filter: saturate(0.28) brightness(0.50) blur(1px); }
  82%  { transform: scale(1.08) translate(-2px, 2px);  filter: saturate(0.20) brightness(0.44) blur(4px); }
  100% { transform: scale(1.09) translate(-4px, 5px);  filter: saturate(0.28) brightness(0.50) blur(0.8px); }
}


/* ── DREAM LIGHT BLOBS ── */
.dream-blobs {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  opacity: 1;
}
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  will-change: transform, opacity;
}
/* Blob 1 — cool steel, drifts top-left */
.blob-1 {
  width: 520px; height: 420px;
  background: radial-gradient(ellipse, rgba(133,150,170,0.22) 0%, transparent 68%);
  top: -10%; left: -8%;
  animation: blobDrift1 38s ease-in-out infinite alternate;
}
/* Blob 2 — pale steel, drifts centre-right */
.blob-2 {
  width: 460px; height: 560px;
  background: radial-gradient(ellipse, rgba(200,212,224,0.14) 0%, transparent 65%);
  top: 20%; right: -12%;
  animation: blobDrift2 52s ease-in-out infinite alternate;
}
/* Blob 3 — deep teal tint, anchors centre */
.blob-3 {
  width: 640px; height: 380px;
  background: radial-gradient(ellipse, rgba(100,130,150,0.13) 0%, transparent 70%);
  top: 40%; left: 20%;
  animation: blobDrift3 45s ease-in-out infinite alternate;
}
/* Blob 4 — whisper of light, bottom-left */
.blob-4 {
  width: 340px; height: 440px;
  background: radial-gradient(ellipse, rgba(180,200,220,0.12) 0%, transparent 62%);
  bottom: -5%; left: 10%;
  animation: blobDrift4 60s ease-in-out infinite alternate;
}
/* Blob 5 — tiny bright core, top-right */
.blob-5 {
  width: 260px; height: 260px;
  background: radial-gradient(ellipse, rgba(220,230,240,0.16) 0%, transparent 58%);
  top: 5%; right: 15%;
  animation: blobDrift5 34s ease-in-out infinite alternate;
}

@keyframes blobDrift1 {
  from { transform: translate(0, 0) scale(1); opacity: 0.7; }
  33%  { transform: translate(60px, 80px) scale(1.12); opacity: 0.4; }
  66%  { transform: translate(30px, 140px) scale(0.92); opacity: 0.9; }
  to   { transform: translate(90px, 60px) scale(1.06); opacity: 0.55; }
}
@keyframes blobDrift2 {
  from { transform: translate(0, 0) scale(1); opacity: 0.5; }
  40%  { transform: translate(-80px, 60px) scale(1.08); opacity: 0.85; }
  70%  { transform: translate(-40px, -50px) scale(0.96); opacity: 0.35; }
  to   { transform: translate(-100px, 30px) scale(1.14); opacity: 0.65; }
}
@keyframes blobDrift3 {
  from { transform: translate(0, 0) scale(1); opacity: 0.6; }
  30%  { transform: translate(-50px, -40px) scale(1.10); opacity: 0.3; }
  60%  { transform: translate(70px, 50px) scale(0.94); opacity: 0.8; }
  to   { transform: translate(20px, -60px) scale(1.04); opacity: 0.45; }
}
@keyframes blobDrift4 {
  from { transform: translate(0, 0) scale(1); opacity: 0.55; }
  45%  { transform: translate(90px, -70px) scale(1.16); opacity: 0.8; }
  to   { transform: translate(40px, -30px) scale(0.90); opacity: 0.35; }
}
@keyframes blobDrift5 {
  from { transform: translate(0, 0) scale(1); opacity: 0.8; }
  50%  { transform: translate(-60px, 80px) scale(1.20); opacity: 0.3; }
  to   { transform: translate(-30px, 50px) scale(0.88); opacity: 0.65; }
}

.hero-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 50%,
    transparent 15%,
    rgba(7,9,13,0.58) 55%,
    rgba(7,9,13,0.97) 100%);
  z-index: 1;
}

.particles {
  position: absolute; inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.particle {
  position: absolute;
  border-radius: 50%;
  background: var(--white);
  animation: particleRise linear infinite;
}

@keyframes particleRise {
  from {
    transform: translateY(110vh) translateX(0);
    opacity: var(--op);
  }
  to {
    transform: translateY(-120px) translateX(var(--drift));
    opacity: calc(var(--op) * 0.2);
  }
}

.hero-content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 900px;
}

/* ── ARTIST LABEL ── */
.hero-label {
  font-family: var(--font-caps);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 8px;
  color: var(--dim);
  text-transform: uppercase;
  margin-bottom: 8px;
}

/* ── WAKE UP TITLE ── */
.hero-title-wrap {
  position: relative;
  margin-bottom: 12px;
  line-height: 0.83;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(48px, 18.5vw, 320px);
  line-height: 0.88;
  letter-spacing: 0.05em;
  color: var(--white);
  display: block;
  text-transform: uppercase;
  user-select: none;
  white-space: nowrap;
}


/* ── WAKE UP DREAM LETTERS ── */
.letter {
  display: inline-block;
  animation: letterDream var(--dur, 4s) var(--del, 0s) ease-in-out infinite alternate;
  will-change: filter, opacity, transform;
}
@keyframes letterDream {
  from { filter: blur(0px); opacity: 1; transform: translateY(0) scale(1); }
  to   { filter: blur(var(--blr, 1.5px)); opacity: var(--op, 0.78);
         transform: translateY(var(--ty, -1px)) scale(var(--sc, 0.995)); }
}

.hero-title-ghost {
  position: absolute;
  inset: 0;
  font-family: var(--font-display);
  font-size: clamp(48px, 18.5vw, 320px);
  line-height: 0.88;
  letter-spacing: 6px;
  color: var(--teal);
  display: block;
  text-transform: uppercase;
  clip-path: inset(36% 0 36% 0);
  opacity: 0;
  animation: tealGlitch 16s 6s linear infinite;
  pointer-events: none;
  white-space: nowrap;
}

@keyframes tealGlitch {
  0%, 88%  { opacity: 0; transform: translateX(0); }
  90%      { opacity: 0.28; transform: translateX(-4px); }
  91%      { opacity: 0; transform: translateX(0); }
  93%      { opacity: 0.18; transform: translateX(3px); }
  95%,100% { opacity: 0; transform: translateX(0); }
}

/* ── VERTICAL DIVIDER ── */
.hero-divider {
  width: 1px;
  height: 36px;
  background: var(--ghost);
  margin: 0 auto 18px;
  transform-origin: top center;
  transform: scaleY(0);
  opacity: 0;
  animation: dividerGrow 0.7s 1.3s cubic-bezier(0.22,1,0.36,1) forwards;
  will-change: transform, opacity;
}

@keyframes dividerGrow {
  from { transform: scaleY(0); opacity: 0; }
  to   { transform: scaleY(1); opacity: 1; }
}

/* ── TAGLINE WORD REDACTION GLITCH ── */
.r-word {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.r-word::before {
  content: '';
  position: absolute;
  left: -1px; right: -1px;
  top: 1px; bottom: 1px;
  background: var(--white);
  opacity: 0;
  pointer-events: none;
}
@keyframes rA {
  0%,100%  { opacity:0; }
  5%       { opacity:0; }
  5.1%     { opacity:1; }
  13%      { opacity:1; }
  13.1%    { opacity:0; }
}
@keyframes rB {
  0%,100%  { opacity:0; }
  30%      { opacity:0; }
  30.1%    { opacity:1; }
  40%      { opacity:1; }
  40.2%    { opacity:0; }
}
@keyframes rC {
  0%,100%  { opacity:0; }
  60%      { opacity:0; }
  60.1%    { opacity:1; }
  70%      { opacity:1; }
  70.1%    { opacity:0; }
}
@keyframes lineStutter {
  0%,100% { transform:translateX(0) skewX(0); filter:none; text-shadow:none; }

  4.97%  { transform:translateX(0); filter:none; text-shadow:none; }
  5.0%   { transform:translateX(-22px) skewX(-9deg) scaleY(1.04);
            filter:blur(3px) brightness(1.6);
            text-shadow:-12px 0 var(--teal), 12px 0 var(--white),
                         0 0 20px var(--teal); }
  5.05%  { transform:translateX(16px) skewX(4deg);
            filter:blur(1px) brightness(0.8);
            text-shadow:8px 0 var(--teal), -4px 0 var(--white); }
  5.08%  { transform:translateX(-8px) skewX(-2deg);
            filter:blur(2px);
            text-shadow:-6px 0 var(--teal); }
  5.11%  { transform:translateX(18px) skewX(6deg);
            filter:blur(3.5px) brightness(1.4);
            text-shadow:10px 0 var(--white), -10px 0 var(--teal); }
  5.14%  { transform:translateX(-4px); filter:blur(1px); text-shadow:none; }
  5.2%   { transform:translateX(2px); filter:none; }
  5.28%  { transform:translateX(0); }

  12.97% { transform:translateX(0); filter:none; text-shadow:none; }
  13.0%  { transform:translateX(20px) skewX(8deg) scaleY(0.97);
            filter:blur(2.5px) brightness(1.5);
            text-shadow:-10px 0 var(--white), 10px 0 var(--teal),
                         0 0 18px var(--teal); }
  13.04% { transform:translateX(-14px) skewX(-5deg);
            filter:blur(1.5px);
            text-shadow:7px 0 var(--teal); }
  13.07% { transform:translateX(10px) skewX(3deg);
            filter:blur(3px) brightness(1.3);
            text-shadow:-8px 0 var(--teal), 6px 0 var(--white); }
  13.1%  { transform:translateX(-5px); filter:blur(1px); text-shadow:none; }
  13.18% { transform:translateX(2px); filter:none; }
  13.26% { transform:translateX(0); }

  29.97% { transform:translateX(0); filter:none; text-shadow:none; }
  30.0%  { transform:translateX(-24px) skewX(-10deg);
            filter:blur(4px) brightness(1.7);
            text-shadow:-14px 0 var(--teal), 14px 0 var(--white),
                         0 0 24px var(--white); }
  30.04% { transform:translateX(17px) skewX(6deg);
            filter:blur(2px);
            text-shadow:9px 0 var(--teal); }
  30.07% { transform:translateX(-9px);
            filter:blur(3px) brightness(0.75);
            text-shadow:-5px 0 var(--white), 8px 0 var(--teal); }
  30.1%  { transform:translateX(20px) skewX(7deg);
            filter:blur(2.5px) brightness(1.4);
            text-shadow:11px 0 var(--white), -9px 0 var(--teal); }
  30.14% { transform:translateX(-3px); filter:blur(1px); text-shadow:none; }
  30.22% { transform:translateX(1px); filter:none; }
  30.3%  { transform:translateX(0); }

  40.07% { transform:translateX(0); filter:none; text-shadow:none; }
  40.1%  { transform:translateX(22px) skewX(9deg) scaleY(1.03);
            filter:blur(3.5px) brightness(1.5);
            text-shadow:-11px 0 var(--white), 13px 0 var(--teal),
                         0 0 20px var(--teal); }
  40.14% { transform:translateX(-15px) skewX(-6deg);
            filter:blur(2px);
            text-shadow:8px 0 var(--teal), -6px 0 var(--white); }
  40.18% { transform:translateX(11px) skewX(4deg);
            filter:blur(3px); text-shadow:none; }
  40.22% { transform:translateX(-4px); filter:blur(1px); }
  40.3%  { transform:translateX(2px); filter:none; }
  40.38% { transform:translateX(0); }

  59.97% { transform:translateX(0); filter:none; text-shadow:none; }
  60.0%  { transform:translateX(-26px) skewX(-11deg) scaleY(1.05);
            filter:blur(4.5px) brightness(1.8);
            text-shadow:-15px 0 var(--teal), 15px 0 var(--white),
                         0 0 28px var(--teal); }
  60.04% { transform:translateX(19px) skewX(7deg);
            filter:blur(2px) brightness(1.3);
            text-shadow:10px 0 var(--white); }
  60.07% { transform:translateX(-11px) skewX(-4deg);
            filter:blur(3.5px);
            text-shadow:-8px 0 var(--teal), 7px 0 var(--white); }
  60.1%  { transform:translateX(14px) skewX(5deg);
            filter:blur(2px) brightness(0.8); text-shadow:none; }
  60.14% { transform:translateX(-3px); filter:blur(1px); }
  60.22% { transform:translateX(2px); filter:none; text-shadow:none; }
  60.3%  { transform:translateX(0); }

  69.97% { transform:translateX(0); filter:none; text-shadow:none; }
  70.0%  { transform:translateX(23px) skewX(10deg);
            filter:blur(3px) brightness(1.6);
            text-shadow:-12px 0 var(--white), 12px 0 var(--teal),
                         0 0 22px var(--white); }
  70.04% { transform:translateX(-16px) skewX(-7deg);
            filter:blur(1.5px);
            text-shadow:9px 0 var(--teal); }
  70.08% { transform:translateX(8px); filter:blur(2.5px) brightness(1.4);
            text-shadow:-6px 0 var(--white), 8px 0 var(--teal); }
  70.12% { transform:translateX(-4px); filter:blur(1px); text-shadow:none; }
  70.2%  { transform:translateX(2px); filter:none; }
  70.28% { transform:translateX(0); }
}
/* Hide redaction bars while tagline is not yet revealed */
#e5:not(.in) .r-word::before { opacity: 0 !important; }

/* Sparse per-word assignments */
.rw1::before { animation: rA 28s  -2.0s  infinite; will-change: opacity; }
.rw2::before { animation: rB 22s  -8.5s  infinite; will-change: opacity; }
.rw3::before { animation: rC 35s  -14s   infinite; will-change: opacity; }
.rw4::before { animation: rA 30s  -22s   infinite; will-change: opacity; }
.rw5::before { animation: rB 25s  -4.0s  infinite; will-change: opacity; }
.rw6::before { animation: rC 32s  -20s   infinite; will-change: opacity; }
.rw7::before { animation: rA 26s  -16s   infinite; will-change: opacity; }
.rw8::before { animation: rB 20s  -11s   infinite; will-change: opacity; }

/* ── HIDDEN MESSAGE IN REDACTION ── */
.r-word[data-hidden]::after {
  content: attr(data-hidden);
  position: absolute;
  left: -1px; right: -1px;
  top: 1px; bottom: 1px;
  text-align: center;
  color: rgba(0, 0, 0, 0.25);
  font-family: inherit;
  font-style: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  pointer-events: none;
  user-select: none;
  opacity: 0;
}
.rw2[data-hidden]::after { animation: rB 22s -8.5s infinite; }
.rw2.truth-visible ~ .rw8[data-hidden]::after { opacity: 1; }

.hero-tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 26px;
  font-weight: 300;
  color: var(--dim);
  margin-bottom: 8px;
  letter-spacing: 0.3px;
  animation: lineStutter 28s -2.0s linear infinite;
  will-change: transform, filter, opacity;
}

/* ── DATE LINE ── */
.hero-date {
  font-family: var(--font-caps);
  font-size: 13px;
  letter-spacing: 5px;
  color: var(--dim);
  margin-bottom: 14px;
}
.hero-date .sep { color: var(--ghost); margin: 0 6px; }

/* ── COUNTDOWN ── */
.countdown {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  margin-bottom: 6px;
}

.countdown-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.countdown-num {
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 1;
  color: var(--white);
  min-width: 2.2ch;
  text-align: center;
  letter-spacing: 2px;
}

.countdown-label {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--dim);
  text-transform: uppercase;
  margin-top: 4px;
}

.countdown-sep {
  font-family: var(--font-display);
  font-size: 54px;
  line-height: 1.15;
  color: var(--ghost);
  padding-bottom: 14px;
  user-select: none;
}

.countdown-note {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--ghost);
  margin-bottom: 18px;
  letter-spacing: 0.5px;
}

/* ── PRE-SAVE BLOCK ── */
.presave-block {
  display: flex;
  justify-content: center;
  width: 100%;
}

.presave-btn {
  display: inline-block;
  background: var(--white);
  color: #0a0a0a;
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 4px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 40px;
  border: 1px solid var(--white);
  cursor: pointer;
  transition: background 0.35s, color 0.35s, letter-spacing 0.35s;
}

.presave-btn:hover {
  background: transparent;
  color: var(--white);
  letter-spacing: 6px;
}

/* ── SIGIL WATERMARK (hero) ── */
.hero-sigil {
  position: absolute;
  bottom: 40px;
  right: 48px;
  width: 88px;
  height: auto;
  opacity: 0;
  z-index: 10;
  animation: sigilBreathe 5s ease-in-out infinite alternate;
  mix-blend-mode: screen;
  transition: opacity 1.4s ease-out;
  will-change: transform, filter;
}

@keyframes sigilBreathe {
  from { transform: scale(0.98); filter: brightness(0.85); }
  to   { transform: scale(1.02); filter: brightness(1.05); }
}

/* ── SCROLL REVEAL ── */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(8px);
  transition: opacity 1.1s cubic-bezier(0.22,1,0.36,1),
              transform 1.1s cubic-bezier(0.22,1,0.36,1),
              filter 1.4s cubic-bezier(0.22,1,0.36,1);
}
[data-reveal].visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* ── ABOUT SECTION ── */
.about {
  background: #080a0c;
  padding: 120px 32px;
}

.about-inner {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.sigil-wrap {
  position: relative;
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 40px;
}

.sigil-large {
  width: 160px;
  height: 160px;
  object-fit: contain;
  animation: sigilBreathe 5s ease-in-out infinite alternate;
  mix-blend-mode: screen;
  position: relative;
  z-index: 1;
  border-radius: 4px;
  will-change: transform, filter;
}

.sigil-ring {
  position: absolute;
  inset: -28px;
  border-radius: 50%;
  border: 1px solid rgba(138,154,176,0.08);
  animation: ringOrbit 40s linear infinite;
}

.sigil-ring::before {
  content: '';
  position: absolute;
  top: -3px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(138,154,176,0.20);
}

@keyframes ringOrbit {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.about-section-label {
  font-family: var(--font-caps);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 6px;
  color: var(--dim);
  text-transform: uppercase;
  margin-bottom: 20px;
}

.about-rule {
  width: 100%;
  border: none;
  border-top: 1px solid var(--ghost);
  margin-bottom: 56px;
}

.about-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  text-align: left;
}

.about-col p {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 400;
  color: var(--dim);
  line-height: 1.9;
}

/* ── ALBUM / TRACKLIST SECTION ── */
.album {
  position: relative;
  overflow: hidden;
  padding: 120px 32px;
}

.album-bg {
  position: absolute;
  inset: -40px;
  background-image: url('images/hero-bg-2.webp');
  background-size: cover;
  background-position: center;
  filter: saturate(0.18) brightness(0.35);
  animation: bgDrift 28s ease-in-out infinite alternate;
}

.album-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 40%,
    rgba(7,9,13,0.25) 20%,
    rgba(7,9,13,0.78) 65%,
    rgba(7,9,13,0.97) 100%);
}

.album-inner {
  position: relative;
  z-index: 5;
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}

.album-title {
  font-family: var(--font-display);
  font-size: clamp(60px, 8vw, 80px);
  line-height: 1;
  color: var(--white);
  letter-spacing: 4px;
  margin-bottom: 14px;
}

.album-subtitle {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  font-weight: 300;
  color: var(--dim);
  margin-bottom: 10px;
  letter-spacing: 0.4px;
}

.album-date {
  font-family: var(--font-caps);
  font-size: 10px;
  letter-spacing: 6px;
  color: var(--dim);
  margin-bottom: 64px;
}

.tracklist {
  width: 100%;
  text-align: left;
}

.track {
  display: flex;
  align-items: center;
  padding: 14px 12px;
  border-bottom: 1px solid var(--ghost);
  border-left: 2px solid transparent;
  gap: 16px;
  cursor: default;
  transition: border-left-color 0.3s, background 0.3s;
}

.track:hover {
  border-left-color: var(--teal);
  background: rgba(74,154,138,0.03);
}

.track-num {
  font-family: var(--font-caps);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--ghost);
  min-width: 22px;
  flex-shrink: 0;
  transition: color 0.3s;
}

.track-dots {
  flex: 1;
  border-bottom: 1px dotted rgba(26,36,48,0.6);
  margin: 0 4px;
  height: 0;
  align-self: center;
}

.track-title {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 400;
  color: var(--dim);
  letter-spacing: 0.4px;
  transition: color 0.3s;
  text-align: right;
}

.track:hover .track-title { color: var(--white); }
.track:hover .track-num   { color: var(--dim); }

/* ── SECOND EMAIL SECTION ── */
.email-section {
  background: var(--bg);
  padding: 120px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.email-section-rule {
  width: 100px;
  border: none;
  border-top: 1px solid var(--ghost);
  margin-bottom: 64px;
}

.email-section-eyebrow {
  font-family: var(--font-caps);
  font-size: 10px;
  letter-spacing: 6px;
  color: var(--dim);
  text-transform: uppercase;
  margin-bottom: 18px;
}

.email-section-tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 20px;
  font-weight: 300;
  color: var(--dim);
  line-height: 1.75;
  margin-bottom: 44px;
  max-width: 440px;
}

.email-section .email-block {
  max-width: 380px;
}

.email-section-closing {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--ghost);
  line-height: 1.75;
  margin-top: 32px;
  max-width: 280px;
}

/* ── FOOTER ── */
footer {
  background: var(--bg);
  padding: 56px 32px 52px;
  border-top: 1px solid var(--ghost);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}

.footer-wordmark {
  font-family: var(--font-caps);
  font-size: 11px;
  letter-spacing: 6px;
  color: var(--teal);
}

.footer-url {
  font-family: var(--font-caps);
  font-size: 9px;
  letter-spacing: 4px;
  color: var(--teal);
  text-decoration: none;
  transition: color 0.25s;
}
.footer-url:hover { color: var(--white); }

.footer-links {
  display: flex;
  gap: 24px;
  list-style: none;
}

.footer-links a {
  font-family: var(--font-caps);
  font-size: 9px;
  letter-spacing: 4px;
  color: var(--teal);
  text-decoration: none;
  transition: color 0.25s;
}
.footer-links a:hover { color: var(--white); }

.footer-copy {
  font-family: var(--font-caps);
  font-size: 9px;
  letter-spacing: 4px;
  color: var(--teal);
}

/* ── HERO FOOTER (minimal, index only) ── */
.hero-footer {
  background: var(--bg);
  padding: 32px;
  text-align: center;
  border-top: 1px solid var(--ghost);
}

/* ── PAGE BODY ── */
.page-body { padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px)); }

/* ── ABOUT PAGE — NARRATIVE ── */
.bio-page {
  padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
}

.bio-header {
  position: relative;
  padding: 96px 32px 64px;
  max-width: 700px;
  margin: 0 auto;
  overflow: hidden;
}

.bio-sigil-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 500px;
  object-fit: contain;
  opacity: 0.04;
  pointer-events: none;
  user-select: none;
  filter: grayscale(1);
  mix-blend-mode: screen;
}

.bio-lead {
  font-family: var(--font-serif);
  font-size: clamp(19px, 2.1vw, 22px);
  font-weight: 400;
  color: var(--white);
  line-height: 1.82;
  position: relative;
  z-index: 1;
}

.bio-section {
  padding: 0 32px 72px;
  max-width: 700px;
  margin: 0 auto;
}

.bio-rule {
  width: 48px;
  border: none;
  border-top: 1px solid var(--ghost);
  margin: 0 0 48px;
}

.bio-section-label {
  display: block;
  font-family: var(--font-caps);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 5px;
  color: var(--dim);
  text-transform: uppercase;
  margin-bottom: 36px;
  opacity: 0.5;
}

.bio-p {
  font-family: var(--font-serif);
  font-size: clamp(17px, 1.75vw, 19px);
  font-weight: 400;
  color: var(--teal);
  line-height: 1.92;
  margin-bottom: 28px;
}

.bio-p:last-of-type { margin-bottom: 0; }

/* ── DISCOGRAPHY (narrative) ── */
.disco-section .bio-rule { margin-bottom: 40px; }

.disco-item {
  padding: 44px 0;
  border-top: 1px solid var(--ghost);
}

.disco-item:last-child { border-bottom: 1px solid var(--ghost); }

.disco-year {
  display: block;
  font-family: var(--font-caps);
  font-size: 9px;
  letter-spacing: 4px;
  color: var(--dim);
  text-transform: uppercase;
  margin-bottom: 10px;
  opacity: 0.45;
}

.disco-title {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(20px, 2.1vw, 23px);
  font-weight: 400;
  color: var(--white);
  line-height: 1.25;
  margin-bottom: 16px;
}

.disco-desc {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(15px, 1.55vw, 17px);
  font-weight: 300;
  color: var(--dim);
  line-height: 1.88;
  margin-bottom: 22px;
}

.disco-links {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  align-items: center;
}

.disco-link {
  font-family: var(--font-caps);
  font-size: 9px;
  letter-spacing: 3px;
  color: var(--dim);
  text-decoration: none;
  text-transform: uppercase;
  opacity: 0.55;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: opacity 0.25s, color 0.25s, border-color 0.25s;
}

.disco-link:hover {
  opacity: 1;
  color: var(--teal);
  border-bottom-color: var(--teal);
}

/* ── OPEN LETTER CTA ── */
.open-letter-cta-wrap {
  max-width: 700px;
  margin: 0 auto;
  padding: 8px 32px 120px;
}

.open-letter-cta {
  font-family: var(--font-caps);
  font-size: 10px;
  letter-spacing: 4px;
  color: var(--teal);
  text-decoration: none;
  text-transform: uppercase;
  transition: opacity 0.3s, color 0.3s;
}

.open-letter-cta:hover {
  opacity: 1;
  color: var(--teal);
}

/* ── BIO PAGE — REDESIGN ── */

/* Ambient particle layer (fixed, behind everything) */
.bio-particles-wrap {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Give the inner container explicit dimensions so absolute children resolve correctly */
#bio-particles {
  position: absolute;
  inset: 0;
}

/* Fine dust particles */
.bio-dust {
  position: absolute;
  bottom: 0;
  border-radius: 50%;
  background: var(--white);
  animation: bioParticleRise linear infinite;
}

/* Soft orb particles — larger, glowing */
.bio-particle-orb {
  position: absolute;
  bottom: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200,220,255,1) 0%, rgba(160,190,230,0.6) 40%, rgba(133,150,170,0) 70%);
  filter: blur(8px);
  animation: bioParticleRise linear infinite;
}

@keyframes bioParticleRise {
  from {
    transform: translateY(0) translateX(0);
    opacity: var(--op);
  }
  to {
    transform: translateY(-110vh) translateX(var(--drift));
    opacity: calc(var(--op) * 0.1);
  }
}

/* Subtle ambient glow that breathes slowly */
.bio-particles-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 20% 60%, rgba(160,190,230,0.10) 0%, transparent 70%),
    radial-gradient(ellipse 50% 35% at 80% 30%, rgba(160,190,230,0.08) 0%, transparent 70%);
  animation: bioGlowDrift 28s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes bioGlowDrift {
  0%   { opacity: 0.5; transform: translateY(0) scale(1); }
  50%  { opacity: 1;   transform: translateY(-22px) scale(1.05); }
  100% { opacity: 0.6; transform: translateY(10px) scale(0.97); }
}

/* Intro hero */
.bio-intro {
  position: relative;
  z-index: 2;
  padding: calc(var(--nav-h) + var(--sec-nav-h) + env(safe-area-inset-top, 0px) + 60px) 32px 56px;
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}

.bio-photo-wrap {
  width: 210px;
  height: 210px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 28px;
  border: 1px solid rgba(133, 150, 170, 0.18);
  box-shadow: 0 0 80px rgba(133, 150, 170, 0.07),
              0 0 0 5px rgba(18, 26, 38, 0.7);
}

.bio-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
}

.bio-artist-name {
  font-family: var(--font-caps);
  font-size: clamp(14px, 2vw, 18px);
  font-weight: 400;
  letter-spacing: 10px;
  color: var(--white);
  text-transform: uppercase;
  margin-bottom: 12px;
}

.bio-genre-tags {
  font-family: var(--font-caps);
  font-size: 9px;
  letter-spacing: 4px;
  color: var(--teal);
  text-transform: uppercase;
  margin-bottom: 36px;
  opacity: 0.8;
}

.bio-letter {
  display: inline-block;
  animation: bioGlitch var(--dur, 7s) var(--del, 0s) linear infinite;
  will-change: transform, filter;
}

@keyframes bioGlitch {
  0%, 97%    { transform: translateX(0) skewX(0deg); filter: none; opacity: 1; text-shadow: none; }
  97.04%     { transform: translateX(var(--gx, -3px)) skewX(-5deg);
               filter: blur(0.8px) brightness(2); opacity: 0.65;
               text-shadow: -2px 0 var(--teal), 2px 0 var(--white); }
  97.08%     { transform: translateX(var(--gx2, 5px)) skewX(3deg);
               filter: blur(0.3px); opacity: 1; text-shadow: none; }
  97.12%     { transform: translateX(var(--gx3, -2px)) skewX(-1deg);
               filter: blur(1.2px) brightness(0.5); opacity: 0.8;
               text-shadow: -1px 0 var(--teal); }
  97.17%     { transform: translateX(0) skewX(0deg); filter: none; opacity: 1; text-shadow: none; }
  100%       { transform: translateX(0) skewX(0deg); filter: none; opacity: 1; text-shadow: none; }
}

.bio-thesis {
  font-family: var(--font-serif);
  font-size: clamp(17px, 1.8vw, 20px);
  font-weight: 400;
  color: var(--teal);
  line-height: 1.88;
  max-width: 560px;
  margin: 0 auto;
}

/* Content column */
.bio-col {
  position: relative;
  z-index: 2;
  max-width: 700px;
  margin: 0 auto;
  padding: 0 32px 72px;
}

/* Fixed secondary nav — sits 1px below site header */
.section-sticky-nav {
  position: fixed;
  top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 1px);
  left: 0; right: 0;
  z-index: 98;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 28px;
  background: rgba(18, 26, 38, 0.96);
  border-bottom: 1px solid rgba(133, 150, 170, 0.12);
  padding: 12px 32px;
}

/* Scroll offset so anchor jumps clear both fixed bars */
#sec-identity, #sec-faith, #sec-ai, #sec-mission, #sec-disco {
  scroll-margin-top: calc(var(--nav-h) + var(--sec-nav-h) + env(safe-area-inset-top, 0px) + 8px);
}

/* Section bars — solid dark strip, full bleed within col */
.section-bar {
  display: flex;
  align-items: center;
  gap: 18px;
  background: rgba(18, 26, 38, 0.94);
  border-left: 3px solid var(--teal);
  padding: 16px 32px;
  margin: 72px -32px 44px;
}

.section-bar h2 {
  font-family: var(--font-caps);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 8px;
  color: var(--white);
  text-transform: uppercase;
  margin: 0;
}

.section-nav-link {
  font-family: var(--font-caps);
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--teal);
  text-decoration: none;
  transition: color 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}
.section-nav-link:hover { color: var(--white); }
.section-nav-link.active {
  color: var(--white);
  font-weight: 700;
  letter-spacing: 4px;
}

/* Pull quote — border-left treatment */
.bio-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(17px, 1.85vw, 20px);
  font-weight: 300;
  color: var(--white);
  line-height: 1.82;
  border-left: 2px solid var(--teal);
  padding: 8px 0 8px 24px;
  margin: 36px 0;
  opacity: 0.88;
  letter-spacing: 0.01em;
}

/* Impact text — large, dramatic, centered */
.bio-impact {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 300;
  color: var(--white);
  line-height: 1.45;
  text-align: center;
  padding: 32px 0;
  letter-spacing: 0.01em;
}

/* Discography — timeline grid */
.disco-timeline { margin-top: 8px; }

.disco-row-cover {
  width: 72px;
  height: 72px;
  object-fit: cover;
  object-position: center;
  display: block;
  border: 1px solid rgba(133,150,170,0.15);
  opacity: 0.82;
  transition: opacity 0.3s;
}
.disco-row:hover .disco-row-cover { opacity: 1; }

.disco-row {
  display: grid;
  grid-template-columns: 72px 60px 1fr;
  gap: 0 20px;
  padding: 40px 0;
  border-top: 1px solid var(--ghost);
}

.disco-row:last-child { border-bottom: 1px solid var(--ghost); }

.disco-row-year {
  display: block;
  font-family: var(--font-caps);
  font-size: 9px;
  letter-spacing: 3px;
  color: var(--dim);
  opacity: 0.45;
  text-transform: uppercase;
  padding-top: 6px;
}

.disco-row-title {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(19px, 2vw, 22px);
  font-weight: 400;
  color: var(--white);
  line-height: 1.25;
  margin-bottom: 12px;
}

.disco-row-desc {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(14px, 1.5vw, 16px);
  font-weight: 300;
  color: var(--dim);
  line-height: 1.88;
  margin-bottom: 18px;
}

.disco-row-links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.disco-row-link {
  font-family: var(--font-caps);
  font-size: 9px;
  letter-spacing: 3px;
  color: var(--dim);
  text-decoration: none;
  text-transform: uppercase;
  border: 1px solid var(--dim);
  border-radius: 99px;
  padding: 6px 14px;
  opacity: 0.6;
  transition: opacity 0.25s, color 0.25s, border-color 0.25s;
}
.disco-row-link:hover {
  opacity: 1;
  color: var(--teal);
  border-color: var(--teal);
}

/* Wake Up — featured treatment */
.disco-row--wake { border-top-color: rgba(133, 150, 170, 0.2); }
.disco-row--wake .disco-row-title { text-shadow: 0 0 40px rgba(133, 150, 170, 0.1); }
.disco-row--wake .disco-row-year { color: var(--teal); opacity: 0.65; }
.disco-row--wake .disco-row-link { color: var(--teal); opacity: 0.65; }
.disco-row--wake .disco-row-link:hover { opacity: 1; }

/* Open letter CTA */
.open-letter-cta {
  display: inline-flex;
  align-items: center;
  position: relative;
}
.open-letter-cta::after {
  content: '';
  display: block;
  height: 1px;
  width: 0;
  background: currentColor;
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  margin-left: 12px;
  flex-shrink: 0;
}
.open-letter-cta:hover { color: var(--white); }
.open-letter-cta:hover::after { width: 48px; }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .hero-sigil { display: none; }
  .about-cols  { grid-template-columns: 1fr; gap: 32px; }
  .about       { padding: 80px 32px; }
  .album       { padding: 80px 32px; }
  .email-section { padding: 80px 32px; }
  footer       { padding: 48px 24px; gap: 16px; }
  .hero-label  { font-size: 9px; letter-spacing: 6px; }
  .hero-sub    { letter-spacing: 6px; }
  .bio-intro   { padding: calc(var(--nav-h) + var(--sec-nav-h) + env(safe-area-inset-top, 0px) + 40px) 24px 40px; }
  .bio-col     { padding: 0 24px 56px; }
  .section-bar { margin-left: -24px; margin-right: -24px; padding-left: 24px; padding-right: 24px; margin-top: 56px; gap: 8px 20px; }
  .section-sticky-nav { gap: 6px 18px; padding: 10px 24px; }
  .section-nav-link { font-size: 8px; letter-spacing: 2px; }
  .section-nav-link.active { letter-spacing: 3px; }
  .open-letter-cta-wrap { padding: 8px 24px 80px; }
}

@media (max-width: 480px) {
  .hero           { justify-content: flex-start; padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 20px); }
  .hero-title     { font-size: 42vw; }
  .hero-title-wrap { margin-bottom: 6px; }
  .hero-tagline   { margin-bottom: 4px; }
  .hero-date      { margin-bottom: 8px; }
  .countdown      { margin-bottom: 2px; }
  .countdown-note { margin-bottom: 10px; }
  .hero-title > span,
  .hero-title-ghost > span { display: block !important; }
  .hero-title > span:nth-child(2),
  .hero-title-ghost > span:nth-child(2) { display: none !important; }
  .countdown      { gap: 2px; }
  .countdown-num  { font-size: 36px; }
  .countdown-sep  { font-size: 34px; }
  .hero-date      { letter-spacing: 2px; }
  .hero-content   { padding: 0 28px; }
  .hero-tagline   { font-size: 22px; }
  .footer-links   { gap: 16px; flex-wrap: wrap; justify-content: center; }
  .bio-intro   { padding: calc(var(--nav-h) + var(--sec-nav-h) + env(safe-area-inset-top, 0px) + 28px) 20px 32px; }
  .bio-col     { padding: 0 20px 48px; }
  .section-bar { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; margin-top: 44px; margin-bottom: 36px; gap: 8px 16px; }
  .section-sticky-nav { gap: 6px 14px; padding: 10px 20px; }
  .section-nav-link { font-size: 7px; letter-spacing: 1.5px; }
  .section-nav-link.active { letter-spacing: 2px; }
  .bio-photo-wrap { width: 170px; height: 170px; }
  .bio-impact  { font-size: clamp(20px, 5vw, 26px); padding: 24px 0; }
  .disco-row   { grid-template-columns: 52px 44px 1fr; gap: 0 12px; padding: 32px 0; }
  .disco-row-cover { width: 52px; height: 52px; }
  .open-letter-cta-wrap { padding: 8px 20px 64px; }
}

/* ── NAV DROPDOWN (Lyrics) ── */
.nav-has-dropdown {
  position: relative;
}
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 260px;
  background: rgba(7, 9, 13, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--ghost);
  padding: 18px 0 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 7600;
}
.nav-has-dropdown:hover .nav-dropdown,
.nav-has-dropdown:focus-within .nav-dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown a {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  letter-spacing: 0.3px;
  color: var(--dim);
  padding: 10px 24px;
  text-decoration: none;
  text-transform: none;
  transition: color 0.2s;
}
.nav-dropdown a:hover { color: var(--white); }

/* Mobile: lyrics dropdown as accordion in hamburger menu */
@media (max-width: 520px) {
  .nav-has-dropdown .nav-dropdown,
  .nav-has-dropdown:hover .nav-dropdown,
  .nav-has-dropdown:focus-within .nav-dropdown {
    position: static !important;
    transform: none !important;
    left: auto !important;
    border: none;
    background: none;
    backdrop-filter: none;
    padding: 0;
    opacity: 1;
    pointer-events: auto;
    display: none;
  }
  .nav-has-dropdown.mobile-open .nav-dropdown {
    display: block;
  }
  .nav-dropdown a {
    font-size: 16px;
    letter-spacing: 0.3px;
    padding: 8px 24px;
    color: var(--dim);
    font-style: italic;
    font-family: var(--font-serif);
    white-space: normal;
    text-align: center;
  }
  .nav-has-dropdown > a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  .nav-has-dropdown > a::after {
    content: '▾';
    font-size: 10px;
    opacity: 0.5;
  }
  .nav-has-dropdown.mobile-open > a::after {
    content: '▴';
  }
}

/* Non-link dropdown trigger (Music nav) */
.nav-has-dropdown > a:not([href]) { cursor: default; }

/* ── LYRICS PAGE ── */
.lyr-page {
  padding-top: calc(var(--nav-h) + var(--sec-nav-h) + env(safe-area-inset-top, 0px));
  min-height: 100vh;
}

/* Fixed album nav — matches section-sticky-nav style */
.lyr-album-nav {
  position: fixed;
  top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 1px);
  left: 0; right: 0;
  z-index: 98;
  background: rgba(18, 26, 38, 0.96);
  border-bottom: 1px solid rgba(133, 150, 170, 0.12);
}
.lyr-album-nav-inner {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 0;
  padding: 12px 32px;
}
.lyr-album-nav-inner::-webkit-scrollbar { display: none; }
.lyr-album-nav-link {
  font-family: var(--font-caps);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--teal);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  padding: 0 8px;
  transition: color 0.2s;
}
.lyr-album-nav-link:first-child { padding-left: 0; }
.lyr-album-nav-link:hover { color: var(--white); }
.lyr-album-nav-link.active {
  color: var(--white);
  font-weight: 700;
  letter-spacing: 3px;
}
.lyr-album-nav-sep {
  color: var(--ghost);
  flex-shrink: 0;
  font-size: 10px;
  user-select: none;
  padding: 0 2px;
}

/* Album sections */
.lyr-content {
  max-width: 740px;
  margin: 0 auto;
  padding: 80px 32px 120px;
}
.lyr-album {
  margin-bottom: 140px;
  scroll-margin-top: calc(var(--nav-h) + var(--sec-nav-h) + env(safe-area-inset-top, 0px) + 8px);
}
.lyr-album-header {
  text-align: center;
  margin-bottom: 52px;
}
.lyr-album-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 7vw, 52px);
  letter-spacing: 6px;
  color: var(--white);
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 12px;
}
.lyr-album-year {
  font-family: var(--font-caps);
  font-size: 10px;
  letter-spacing: 6px;
  color: var(--dim);
  text-transform: uppercase;
}

/* Dividers between albums */
.lyr-divider {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0 0 140px;
}
.lyr-divider-line {
  flex: 1;
  height: 1px;
  background: var(--ghost);
}
.lyr-divider-sigil {
  width: 40px;
  height: 40px;
  opacity: 0.08;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Tracklist */
.lyr-tracklist {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Individual track */
.lyr-track {
  border-top: 1px solid rgba(26, 36, 48, 0.6);
}
.lyr-track:last-child {
  border-bottom: 1px solid rgba(26, 36, 48, 0.6);
}
.lyr-track-header {
  display: flex;
  align-items: baseline;
  gap: 14px;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 18px 0;
  text-align: left;
  color: inherit;
  transition: color 0.2s;
}
.lyr-track-header:hover .lyr-track-title { color: var(--white); }
.lyr-track-num {
  font-family: var(--font-caps);
  font-size: 9px;
  letter-spacing: 3px;
  color: var(--dim);
  flex-shrink: 0;
  min-width: 28px;
  opacity: 0.6;
}
.lyr-track-title {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 400;
  color: var(--teal);
  transition: color 0.2s;
  line-height: 1.2;
}
.lyr-track-toggle {
  margin-left: auto;
  font-size: 11px;
  color: var(--dim);
  opacity: 0.5;
  transition: transform 0.25s;
  flex-shrink: 0;
}
.lyr-track.open .lyr-track-toggle {
  transform: rotate(180deg);
}
.lyr-track.open .lyr-track-title {
  color: var(--white);
}

/* Track lyrics body */
.lyr-track-body {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.lyr-track.open .lyr-track-body {
  max-height: 8000px;
}

/* Individual lyric pages — always show lyrics, hide toggle, show header */
.lyr-page-single .lyr-album-cover {
  width: 220px;
  height: 220px;
  opacity: 1;
  box-shadow: 0 12px 48px rgba(0,0,0,0.55);
}
.lyr-page-single .lyr-track-body {
  max-height: none;
  overflow: visible;
}
.lyr-page-single .lyr-track-toggle { display: none; }
.lyr-page-single .lyr-track-header { cursor: default; }
.lyr-page-single .lyr-album-header[data-reveal] {
  opacity: 1;
  transform: none;
  filter: none;
}
.lyr-lyrics {
  padding: 4px 0 32px 42px;
  border-left: 2px solid rgba(133, 150, 170, 0.1);
  margin-left: 28px;
  margin-bottom: 8px;
}
.lyr-lyrics p {
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--dim);
  line-height: 1.65;
  margin: 0;
}
.lyr-lyrics p.lyr-blank {
  height: 12px;
}
.lyr-lyrics p.lyr-hebrew,
.lyr-lyrics p.lyr-greek {
  font-style: italic;
  opacity: 0.85;
  letter-spacing: 0.5px;
}
.lyr-lyrics p.lyr-paren {
  color: var(--teal);
  opacity: 0.7;
}

/* Streaming links inside album header */
.lyr-album-links {
  justify-content: center;
  margin-top: 10px;
}

/* Album cover thumbnail */
.lyr-album-cover {
  display: block;
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 4px;
  margin: 0 auto 20px;
  opacity: 0.9;
}

/* Wake Up placeholder */
.lyr-placeholder {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--dim);
  opacity: 0.6;
  padding: 8px 0 24px;
}

/* Back to top */
.back-to-top {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 500;
  width: 40px;
  height: 40px;
  background: rgba(7, 9, 13, 0.85);
  border: 1px solid var(--ghost);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  color: var(--teal);
  font-size: 16px;
  text-decoration: none;
}
.back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
}
.back-to-top:hover { color: var(--white); border-color: var(--teal); }

/* Reveal animation (reuse existing pattern) */
.lyr-album-header[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s, transform 0.6s;
}
.lyr-album-header[data-reveal].visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 768px) {
  .lyr-content { padding: 60px 24px 100px; }
  .lyr-album { margin-bottom: 100px; }
  .lyr-divider { margin-bottom: 100px; }
  .lyr-album-nav { display: none !important; }
  .lyr-page { padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px)); }
  .alb-page { padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px)); }
  .lyr-album-title { font-size: clamp(28px, 8vw, 44px); }
  .lyr-lyrics { padding-left: 24px; margin-left: 20px; }
}
@media (max-width: 480px) {
  .lyr-content { padding: 48px 20px 80px; }
  .lyr-track-title { font-size: 18px; }
  .lyr-lyrics p { font-size: 15px; }
}

/* ── ALBUM PAGE ── */
.alb-page {
  padding-top: calc(var(--nav-h) + var(--sec-nav-h) + env(safe-area-inset-top, 0px));
  min-height: 100vh;
}

.alb-hero {
  text-align: center;
  padding: 40px 32px 24px;
}

.alb-cover {
  display: block;
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 4px;
  margin: 0 auto 28px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55);
}

.alb-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 7vw, 56px);
  letter-spacing: 6px;
  color: var(--white);
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 12px;
}

.alb-release {
  font-family: var(--font-caps);
  font-size: 10px;
  letter-spacing: 4px;
  color: var(--dim);
  text-transform: uppercase;
  margin-bottom: 28px;
}

.alb-links {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.alb-content {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 32px 120px;
}

.alb-section {
  margin-bottom: 72px;
}
.alb-section:first-child .section-bar {
  margin-top: 0;
}

.alb-body p {
  font-family: var(--font-serif);
  font-size: 17px;
  color: var(--dim);
  line-height: 1.85;
  margin-bottom: 1.4em;
}
.alb-body p:last-child { margin-bottom: 0; }
.alb-body em { font-style: italic; color: var(--teal); }

/* Track by track */
.alb-tracklist { list-style: none; padding: 0; }
.alb-track {
  padding: 22px 0;
  border-top: 1px solid rgba(26, 36, 48, 0.6);
}
.alb-track:last-child { border-bottom: 1px solid rgba(26, 36, 48, 0.6); }
.alb-track-title {
  display: block;
  font-family: var(--font-caps);
  font-size: 10px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 8px;
}
.alb-track-desc {
  display: block;
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--dim);
  line-height: 1.75;
}

@media (max-width: 768px) {
  .alb-cover { width: 160px; height: 160px; }
  .alb-content { padding: 0 24px 100px; }
  .alb-body p { font-size: 16px; }
}
@media (max-width: 480px) {
  .alb-cover { width: 130px; height: 130px; }
  .alb-hero { padding: 44px 20px 48px; }
  .alb-content { padding: 0 20px 80px; }
  .alb-section-bar { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; }
}

/* Lyrics index page */
.lyr-index-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 5vw, 44px);
  letter-spacing: 6px;
  color: var(--white);
  text-transform: uppercase;
  margin-bottom: 48px;
}
.lyr-index-album {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 20px 0;
  border-top: 1px solid rgba(133,150,170,0.12);
  text-decoration: none;
  transition: opacity 0.2s;
}
.lyr-index-album:last-child { border-bottom: 1px solid rgba(133,150,170,0.12); }
.lyr-index-album:hover { opacity: 0.75; }
.lyr-index-album img { border-radius: 4px; flex-shrink: 0; }
.lyr-index-album-name {
  display: block;
  font-family: var(--font-caps);
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 6px;
}
.lyr-index-album-year {
  display: block;
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--dim);
}
.lyr-back {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid rgba(133,150,170,0.12);
}
.lyr-back a {
  font-family: var(--font-caps);
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--dim);
  text-decoration: none;
  transition: color 0.2s;
}
.lyr-back a:hover { color: var(--teal); }