/* ============================================================
   WATER&Co.  v2.1 — DEEP COBALT (Klein blue revival)
   Refs: Nuevo Tokyo gradients / FAYZE / A Lucid Dream poster.
   Deep void base, electric Klein cobalt blooms, chrome gradients,
   grain texture, drifting orbs, blue motion-blur portraits as
   full-bleed section backgrounds.
   ============================================================ */

:root {
  --void:        #03060F;
  --ink:         #060B18;
  --ink-2:       #08101F;
  --ink-3:       #0C1628;
  --surface:     #121E36;
  --surface-2:   #18284A;

  --chrome-1:    #FFFFFF;
  --chrome-2:    #E4E9F2;
  --chrome-3:    #ADB6C7;
  --chrome-4:    #6D778C;
  --mist:        #E8ECF3;
  --pewter:      #828DA4;
  --pewter-2:    #565F75;
  --pewter-3:    #2E3548;

  --klein:       #2D6EFF;          /* the bloom — primary electric accent */
  --klein-deep:  #0F38C8;
  --klein-light: #6F95FF;
  --cobalt:      #1A4FE0;
  --cream:       #EFE3C6;
  --cream-deep:  #C9B98C;

  --rule:        rgba(232, 236, 243, 0.10);
  --rule-bold:   rgba(232, 236, 243, 0.22);
  --rule-light:  rgba(232, 236, 243, 0.06);
  --pad:         clamp(28px, 5vw, 80px);
  --max:         1360px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
img, svg { display: block; max-width: 100%; }
button { border: none; cursor: pointer; font-family: inherit; }
a { color: inherit; text-decoration: none; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }

body {
  background: var(--ink);
  color: var(--mist);
  font-family: 'Cormorant Garamond', 'Times New Roman', serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.locked { overflow: hidden; height: 100vh; }

/* Grain — universal noise overlay (Lucid Dream / Fayze grain) */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 99;
  opacity: 0.28;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.9  0 0 0 0 0.92  0 0 0 0 0.95  0 0 0 0.3 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
}

em {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 300;
}

::selection { background: var(--mist); color: var(--void); }

/* hide leftover artifacts */
.section-id, .big-num, .big-num-label, .tech, .ambient { display: none !important; }

/* ============================================================
   CAUSTIC LIGHT DIVIDER — chrome + cobalt + cream band
   ============================================================ */
.manifesto::before,
.interlude::before,
.works::before,
.studio::before,
.subscribe::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(82%, 1240px);
  height: 1px;
  background: linear-gradient(to right,
    transparent,
    rgba(45, 110, 255, 0.0) 5%,
    rgba(45, 110, 255, 0.45) 30%,
    rgba(255, 255, 255, 0.95) 50%,
    rgba(239, 227, 198, 0.45) 70%,
    rgba(239, 227, 198, 0.0) 95%,
    transparent);
  opacity: 0.75;
  z-index: 3;
  filter: drop-shadow(0 0 8px rgba(45, 110, 255, 0.35));
  animation: caustic-drift 8s ease-in-out infinite alternate;
}
@keyframes caustic-drift {
  0%   { transform: translateX(-52%) scaleX(0.95); opacity: 0.40; }
  100% { transform: translateX(-48%) scaleX(1.05); opacity: 0.65; }
}
.manifesto, .interlude, .works, .studio, .subscribe {
  position: relative;
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 90;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: clamp(32px, 5vw, 80px);
  padding: 22px var(--pad);
  background: rgba(6, 11, 24, 0.65);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border-bottom: 1px solid var(--rule);
}
.nav-left, .nav-right {
  display: flex; gap: 30px;
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.30em;
  text-transform: uppercase;
}
.nav-right { justify-content: flex-end; }
.nav a {
  color: var(--chrome-3);
  transition: color 0.4s;
}
.nav a:hover { color: var(--klein-light); }
.nav .lang { font-weight: 500; color: var(--pewter); }
.nav a.active { color: var(--chrome-1); border-bottom: 1px solid var(--klein); padding-bottom: 4px; }

.brand {
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 500;
  font-size: 22px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mist) !important;
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
}
.brand-co {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 0.55em;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--klein-light);
}

/* ============================================================
   HERO — cobalt portal with water reflection + WATER&Co. mark
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  background: #000000;
  padding: 80px var(--pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
.hero-image {
  position: absolute; inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #000000;
}
.hero-portal .hero-image img {
  width: 100%; height: 100%;
  max-width: none;
  display: block;
  position: absolute;
  top: 0; left: 0;
  transform: none;
  object-fit: cover;
  object-position: center;
  filter: brightness(1.05) saturate(1.15);
  opacity: 1;
}
.hero-image::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(45, 110, 255, 0.40), transparent 60%),
    linear-gradient(180deg, rgba(45, 110, 255, 0.22) 0%, transparent 40%, transparent 60%, rgba(3, 6, 15, 0.55) 100%);
  mix-blend-mode: screen;
  pointer-events: none;
}

/* ====== Caustic moving light — slow drifting cobalt highlights ====== */
.hero-caustic {
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 38% 25% at 28% 38%, rgba(143, 186, 255, 0.22), transparent 60%),
    radial-gradient(ellipse 32% 22% at 72% 62%, rgba(45, 110, 255, 0.20), transparent 60%),
    radial-gradient(ellipse 26% 18% at 55% 25%, rgba(111, 149, 255, 0.18), transparent 60%);
  mix-blend-mode: screen;
  filter: blur(6px);
  animation: caustic-drift 14s ease-in-out infinite alternate;
}
@keyframes caustic-drift {
  0%   { transform: translate(0, 0) scale(1);    opacity: 0.55; }
  50%  { transform: translate(2vw, -1vh) scale(1.06); opacity: 0.75; }
  100% { transform: translate(-2vw, 1.5vh) scale(0.96); opacity: 0.6; }
}

/* ====== Animated ripple rings — cobalt light radiating from center ====== */
.hero-ripples {
  position: absolute;
  top: 50%; left: 50%;
  width: 160px; height: 160px;
  margin: -80px 0 0 -80px;
  z-index: 1;
  pointer-events: none;
}
.hero-ripple {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(143, 186, 255, 0.65);
  opacity: 0;
  box-shadow:
    0 0 30px rgba(45, 110, 255, 0.5),
    inset 0 0 24px rgba(45, 110, 255, 0.25);
  animation: hero-ripple-out 12s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
}
.hero-ripple:nth-child(1) { animation-delay: 0s;   }
.hero-ripple:nth-child(2) { animation-delay: 2s;   }
.hero-ripple:nth-child(3) { animation-delay: 4s;   }
.hero-ripple:nth-child(4) { animation-delay: 6s;   }
.hero-ripple:nth-child(5) { animation-delay: 8s;   }
.hero-ripple:nth-child(6) { animation-delay: 10s;  }
@keyframes hero-ripple-out {
  0%   { transform: scale(0);   opacity: 0;    border-color: rgba(143, 186, 255, 0.95); }
  6%   { opacity: 0.75; }
  100% { transform: scale(38);  opacity: 0;    border-color: rgba(45, 110, 255, 0); }
}
.hero-veil {
  position: absolute; inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse at 50% 53%, transparent 0%, rgba(0, 0, 0, 0.20) 70%, rgba(0, 0, 0, 0.55) 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.30) 0%, transparent 30%, transparent 70%, rgba(0, 0, 0, 0.50) 100%);
  pointer-events: none;
}

/* ====== FLASHING WAVE BANDS — over the hero portal ====== */
.hero-waves {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: screen;
}
.hero-wave-top {
  position: absolute;
  top: 18%;
  left: -8%;
  right: -8%;
  height: 90px;
  background:
    radial-gradient(ellipse 55% 100% at 50% 50%,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(143, 186, 255, 0.50) 25%,
      rgba(45, 110, 255, 0.35) 55%,
      transparent 75%);
  filter: blur(10px);
  animation: enter-wave-top 9s ease-in-out infinite;
  opacity: 0;
}
.hero-wave-mid {
  position: absolute;
  top: 28%;
  left: -5%;
  right: -5%;
  height: 4px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(143, 186, 255, 0.50) 20%,
    rgba(255, 255, 255, 0.65) 50%,
    rgba(143, 186, 255, 0.50) 80%,
    transparent 100%);
  filter: blur(1.5px);
  box-shadow:
    0 0 12px rgba(45, 110, 255, 0.55),
    0 0 24px rgba(143, 186, 255, 0.35);
  animation: enter-wave-mid 11s ease-in-out infinite;
  opacity: 0;
}
.hero-wave-bot {
  position: absolute;
  bottom: 24%;
  left: 0;
  right: 0;
  height: 60px;
  pointer-events: none;
}
.hero-wave-bot::before,
.hero-wave-bot::after {
  content: "";
  position: absolute;
  left: -5%;
  right: -5%;
  height: 3px;
  filter: blur(1px);
}
.hero-wave-bot::before {
  top: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(45, 110, 255, 0.60) 15%,
    rgba(143, 186, 255, 0.75) 50%,
    rgba(45, 110, 255, 0.60) 85%,
    transparent 100%);
  box-shadow:
    0 0 10px rgba(45, 110, 255, 0.55),
    0 0 20px rgba(45, 110, 255, 0.35);
  animation: enter-wave-line-1 8s ease-in-out infinite;
  opacity: 0;
}
.hero-wave-bot::after {
  top: 32px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(111, 149, 255, 0.65) 12%,
    rgba(255, 255, 255, 0.60) 50%,
    rgba(111, 149, 255, 0.65) 88%,
    transparent 100%);
  box-shadow:
    0 0 14px rgba(111, 149, 255, 0.60),
    0 0 28px rgba(143, 186, 255, 0.35);
  animation: enter-wave-line-2 10s ease-in-out infinite;
  opacity: 0;
}
.hero-text {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 var(--pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.hero-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--chrome-2);
  margin-bottom: 36px;
}
.hero-mark {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: clamp(96px, 17vw, 280px);
  line-height: 0.86;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: baseline;
  max-width: 100%;
  background: linear-gradient(180deg,
    #FFFFFF 0%, #DCE6F5 14%, #6F95FF 32%, #1F4FE8 50%, #0C1730 80%, #03060F 100%);
  background-size: 100% 260%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter:
    drop-shadow(0 0 40px rgba(45, 110, 255, 0.45))
    drop-shadow(0 8px 80px rgba(0, 0, 0, 0.85));
  animation: chrome-shimmer 10s ease-in-out infinite;
}
.hero-mark .L { display: inline-block; }
.hero-mark .hero-co {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 0.22em;
  letter-spacing: 0.005em;
  text-transform: none;
  vertical-align: super;
  margin-left: 0.06em;
  -webkit-text-fill-color: var(--klein-light);
  background: none;
  color: var(--klein-light);
  text-shadow: 0 0 18px rgba(45, 110, 255, 0.55);
}
.hero-tag {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(24px, 2.8vw, 36px);
  letter-spacing: 0.06em;
  color: var(--cream);
  margin-top: 40px;
  text-shadow: 0 0 28px rgba(239, 227, 198, 0.40);
}
.hero-tag em { color: var(--cream); font-style: italic; }
.hero-coord {
  position: absolute;
  bottom: 44px; left: 0; right: 0;
  z-index: 2;
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--chrome-3);
  text-align: center;
}

/* ============================================================
   MANIFESTO — full-bleed blue motion-blur portrait BG
   with mission text overlaid
   ============================================================ */
.manifesto {
  position: relative;
  background: var(--ink-2);
  padding: 200px var(--pad);
  text-align: center;
  border-top: 1px solid var(--rule);
  overflow: hidden;
}
.manifesto-photo {
  background-color: #1a1d22;
  background-image:
    linear-gradient(rgba(8, 12, 20, 0.22), rgba(8, 12, 20, 0.36)),
    url('images/portrait_blur_warhol.jpg');
  background-size: auto, cover;
  background-position: center, center 18%;
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, fixed;
  padding: 140px var(--pad) 180px;
  min-height: 100vh;
}
/* hide the inner img — we use a fixed-attachment background instead */
.m-photo { display: none !important; }

/* faint scanline overlay — futurist terminal feel */
.manifesto-photo::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(91, 207, 224, 0.022) 2px,
    rgba(91, 207, 224, 0.022) 3px
  );
}
.manifesto > * { position: relative; z-index: 2; }

/* ============= MATRIX MISSION — text floats directly over photo ============= */
.manifesto-typewriter { text-align: left; }

.manifesto-typewriter .m-num {
  font-family: 'Share Tech Mono', 'IBM Plex Mono', monospace;
  font-style: normal;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: #6FE3FF;
  margin: 0 auto 18px;
  max-width: 1100px;
  text-shadow:
    0 0 8px rgba(111, 227, 255, 0.95),
    0 0 18px rgba(111, 227, 255, 0.60),
    0 0 32px rgba(45, 110, 255, 0.45);
}
.manifesto-typewriter .m-label {
  font-family: 'Share Tech Mono', 'IBM Plex Mono', monospace;
  font-style: normal;
  font-weight: 400;
  font-size: clamp(32px, 4.6vw, 64px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6FE3FF;
  margin: 0 auto 56px;
  max-width: 1100px;
  line-height: 1;
  background: none;
  -webkit-text-fill-color: #6FE3FF;
  display: block;
  position: relative;
  text-shadow:
    0 0 10px rgba(111, 227, 255, 0.90),
    0 0 24px rgba(111, 227, 255, 0.55),
    0 0 48px rgba(45, 110, 255, 0.40);
}
.manifesto-typewriter .m-label::after {
  content: "_";
  display: inline-block;
  color: #6FE3FF;
  margin-left: 0.18em;
  animation: cursor-blink 1.1s steps(2) infinite;
  text-shadow: 0 0 12px rgba(111, 227, 255, 0.95);
}
@keyframes cursor-blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

.manifesto-typewriter .m-prose {
  max-width: 1100px;
  margin: 0 auto;
  text-align: left;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  padding: 0;
  box-shadow: none;
}
.manifesto-typewriter .m-prose p {
  font-family: 'Share Tech Mono', 'IBM Plex Mono', monospace;
  font-weight: 400;
  font-size: clamp(15px, 1.55vw, 20px);
  line-height: 1.85;
  color: #B8F0FF;
  margin-bottom: 22px;
  letter-spacing: 0.02em;
  text-shadow:
    0 0 4px rgba(184, 240, 255, 0.85),
    0 0 12px rgba(91, 207, 224, 0.55),
    0 0 28px rgba(45, 110, 255, 0.40);
}
.manifesto-typewriter .m-prose p::before {
  content: "> ";
  color: #6FE3FF;
  font-weight: 400;
  opacity: 0.85;
}
.manifesto-typewriter .m-prose em {
  font-family: 'Share Tech Mono', 'IBM Plex Mono', monospace;
  font-style: normal;
  font-weight: 400;
  color: #E0FAFF;
  text-shadow:
    0 0 6px rgba(224, 250, 255, 0.95),
    0 0 18px rgba(111, 227, 255, 0.65);
}
.manifesto-typewriter .m-prose .m-key {
  font-family: 'Share Tech Mono', 'IBM Plex Mono', monospace;
  color: #FFFFFF;
  font-style: normal;
  font-weight: 400;
  text-shadow:
    0 0 8px rgba(255, 255, 255, 1),
    0 0 20px rgba(111, 227, 255, 0.85),
    0 0 36px rgba(45, 110, 255, 0.60);
  background: none;
  padding: 0;
}
.manifesto-typewriter .m-prose .m-final {
  margin-top: 32px;
  font-size: clamp(17px, 1.85vw, 24px);
  line-height: 1.55;
  font-weight: 400;
  font-style: normal;
  padding-top: 24px;
  border-top: 1px dashed rgba(111, 227, 255, 0.35);
  color: #E0FAFF;
}
.manifesto-typewriter .m-prose .m-final em {
  font-weight: 400;
  background: none;
  -webkit-text-fill-color: #FFFFFF;
  color: #FFFFFF;
  text-shadow:
    0 0 10px rgba(255, 255, 255, 1),
    0 0 24px rgba(111, 227, 255, 0.85),
    0 0 48px rgba(45, 110, 255, 0.65);
}
.manifesto-typewriter .m-prose .m-final::before {
  content: ">> ";
  color: #6FE3FF;
}

.manifesto-typewriter .m-rule {
  width: 120px; height: 1px;
  background: #6FE3FF; opacity: 0.65;
  margin: 64px 0 24px;
  box-shadow: 0 0 14px rgba(111, 227, 255, 0.75);
}
.manifesto-typewriter .m-sig {
  font-family: 'Share Tech Mono', 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: #6FE3FF;
  font-weight: 400;
  text-shadow: 0 0 10px rgba(111, 227, 255, 0.85);
  max-width: 1100px;
  margin: 0;
}
.manifesto-typewriter .m-sig::before { content: "// "; opacity: 0.75; }
.manifesto-typewriter .m-sig::after  { content: " //"; opacity: 0.75; }

/* center the whole composition by wrapping margins */
.manifesto-typewriter > * {
  margin-left: auto;
  margin-right: auto;
  max-width: 1100px;
}
.manifesto-typewriter .m-prose { max-width: 1100px; }

.m-num {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  color: var(--klein-light);
  margin-bottom: 26px;
  letter-spacing: 0.02em;
  text-shadow: 0 0 20px rgba(45, 110, 255, 0.50);
}
.m-label {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(56px, 7vw, 108px);
  letter-spacing: -0.012em;
  margin-bottom: 100px;
  line-height: 1;
  background: linear-gradient(180deg, var(--chrome-1) 0%, var(--chrome-2) 50%, var(--chrome-4) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 4px 30px rgba(0, 0, 0, 0.6));
}

.m-prose {
  max-width: 900px;
  margin: 0 auto;
  text-align: left;
}
.m-prose p {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.55;
  color: var(--mist);
  margin-bottom: 44px;
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.70);
}
.m-prose p:last-of-type { margin-bottom: 0; }
.m-prose em {
  font-style: italic;
  font-weight: 400;
  color: var(--chrome-2);
}
.m-prose .m-key {
  color: var(--klein-light);
  font-style: italic;
  font-weight: 500;
  text-shadow: 0 0 18px rgba(45, 110, 255, 0.40);
}
.m-prose .m-final {
  margin-top: 56px;
  font-size: clamp(30px, 4vw, 56px);
  line-height: 1.22;
  font-style: italic;
  font-weight: 500;
}
.m-prose .m-final em {
  font-weight: 600;
  background: linear-gradient(120deg, var(--cream) 0%, var(--chrome-2) 50%, var(--klein-light) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.m-rule {
  width: 80px; height: 1px;
  background: var(--klein-light); opacity: 0.55;
  margin: 80px auto 36px;
  box-shadow: 0 0 18px rgba(45, 110, 255, 0.55);
}
.m-sig {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--chrome-3);
  font-weight: 500;
}

/* ============================================================
   INTERLUDE — Warhol quote over full-bleed blue glossy hair photo
   Quote sits directly on the stretched-face band in elegant
   Cormorant Italic 300 — luxe editorial against the cobalt drama.
   ============================================================ */
.interlude {
  position: relative;
  border-top: 1px solid var(--rule);
  overflow: hidden;
  z-index: 2;
}
.interlude-band {
  background-color: #050a1c;
  background-image:
    linear-gradient(rgba(5, 10, 28, 0.06), rgba(5, 10, 28, 0.10)),
    /* teal tint — recolors the portrait to match the hero's cyan water */
    linear-gradient(rgba(47, 183, 212, 1), rgba(47, 183, 212, 1)),
    url('images/blue_portrait_hair_cropped.png');
  /* anchored RIGHT + anchored LOWER (crops forehead from top) */
  background-size: auto, auto, 125% auto;
  background-position: center, center, 100% 88%;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-blend-mode: normal, color, normal;
  /* photo and text scroll together as one unit */
  height: 100vh;
  padding: 0;
  position: relative;
  overflow: hidden;
}

.il-band {
  position: absolute;
  inset: 0;
  z-index: 2;
  border: none;
}

/* Quote — centered in the blue voided eye-band area */
.il-band-quote {
  position: absolute;
  top: 40%;
  left: 36%;
  transform: translate(-50%, -50%);
  text-align: center;
  border: none;
  padding: 0;
  margin: 0;
  width: max-content;
  max-width: 38%;
}
/* Each word — staggered fade-in (one-time, slow) */
.il-band-quote .qword {
  display: inline-block;
  opacity: 0;
}
.interlude-band.visible .il-band-quote .qword {
  animation: il-fade-in 1.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.interlude-band.visible .qw-1  { animation-delay: 0.30s; }
.interlude-band.visible .qw-2  { animation-delay: 0.55s; }
.interlude-band.visible .qw-3  { animation-delay: 0.80s; }
.interlude-band.visible .qw-4  { animation-delay: 1.05s; }
.interlude-band.visible .qw-5  { animation-delay: 1.40s; }
.interlude-band.visible .qw-6  { animation-delay: 1.65s; }
.interlude-band.visible .qw-7  { animation-delay: 1.90s; }
.interlude-band.visible .qw-8  { animation-delay: 2.15s; }
.interlude-band.visible .qw-9  { animation-delay: 2.50s; }
.interlude-band.visible .qw-10 { animation-delay: 2.75s; }
.interlude-band.visible .qw-11 { animation-delay: 3.00s; }
@keyframes il-fade-in {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* ===== WATER WAVE OVERLAY — continuous slow ripples across the section ===== */
.interlude-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    /* horizontal light bands — drifting "underwater caustics" — MUCH more visible */
    linear-gradient(180deg,
      transparent 0%,
      rgba(143, 186, 255, 0.30) 10%,
      transparent 22%,
      rgba(45, 110, 255, 0.28) 40%,
      transparent 52%,
      rgba(111, 149, 255, 0.32) 70%,
      transparent 82%,
      rgba(143, 186, 255, 0.26) 100%);
  background-size: 100% 60vh;
  animation: water-overlay 14s ease-in-out infinite;
  mix-blend-mode: screen;
  opacity: 1;
}
.interlude-band .il-band {
  position: absolute;
  inset: 0;
  z-index: 3;
}
@keyframes water-overlay {
  0%, 100% { background-position-y: 0;    transform: translateY(0); }
  50%      { background-position-y: 60vh; transform: translateY(-20px); }
}

/* second slower ripple layer for depth */
.interlude-band .il-water-2 {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse 70vw 28vh at 30% 35%, rgba(143, 186, 255, 0.28), transparent 65%),
    radial-gradient(ellipse 65vw 26vh at 75% 65%, rgba(45, 110, 255, 0.26), transparent 65%),
    radial-gradient(ellipse 50vw 20vh at 50% 50%, rgba(111, 149, 255, 0.18), transparent 70%);
  filter: blur(22px);
  mix-blend-mode: screen;
  animation: water-ripple-slow 20s ease-in-out infinite alternate;
}
@keyframes water-ripple-slow {
  0%   { transform: translate(0, 0)         scale(1);    opacity: 0.85; }
  100% { transform: translate(4vw, -2.5vh)  scale(1.12); opacity: 1; }
}
.il-band-quote .qline em {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #DCE9FF;
}
.il-band-quote .qline {
  font-family: 'Cormorant Garamond', serif;
  font-style: normal;
  font-weight: 400;
  font-size: clamp(28px, 3.6vw, 56px);
  line-height: 1.10;
  letter-spacing: 0.002em;
  color: #FFFFFF;
  text-shadow:
    0 0 20px rgba(255, 255, 255, 0.30),
    0 0 50px rgba(143, 186, 255, 0.45),
    0 2px 24px rgba(0, 0, 0, 0.60);
  margin: 0;
}
.il-band-quote .qline-1 { padding-left: 0; }
.il-band-quote .qline-2 { padding-left: 1.2em; }
.il-band-quote .qline-3 { padding-left: 2.4em; }

/* Attribution — centered in the blue voided stretch on the right */
.il-band-attr {
  position: absolute;
  top: 46%;
  left: 75%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 0.6vw, 12px);
  white-space: nowrap;
  opacity: 0;
}
.il-band-attr .attr-name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1vw, 18px);
}
.il-band-attr .attr-work {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2.6vw, 40px);
  letter-spacing: 0.04em;
  color: #DCE9FF;
  line-height: 1;
  text-shadow:
    0 0 16px rgba(255, 255, 255, 0.25),
    0 0 38px rgba(143, 186, 255, 0.38),
    0 2px 20px rgba(0, 0, 0, 0.55);
}
.interlude-band.visible .il-band-attr {
  animation: il-fade-in 2.0s cubic-bezier(0.16, 1, 0.3, 1) 4.8s both;
}
.il-band-attr .dash {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(18px, 2.2vw, 34px);
  color: #FFFFFF;
  line-height: 1;
  text-shadow:
    0 0 16px rgba(255, 255, 255, 0.30),
    0 2px 20px rgba(0, 0, 0, 0.55);
}
.il-band-attr cite {
  font-family: 'Cormorant Garamond', serif;
  font-style: normal;
  font-weight: 400;
  font-size: clamp(18px, 2.2vw, 34px);
  letter-spacing: 0.06em;
  color: #FFFFFF;
  text-shadow:
    0 0 18px rgba(255, 255, 255, 0.30),
    0 0 42px rgba(143, 186, 255, 0.40),
    0 2px 22px rgba(0, 0, 0, 0.55);
  line-height: 1;
}

/* hide old interlude elements that may still be defined elsewhere */
.il-photo, .il-archive, .il-line, .il-quote, .il-eyebrow, .il-attr, .il-rule,
.il-band-text, .il-band-rule { display: none; }
.interlude-band .il-band { display: block; }

@media (max-width: 900px) {
  .il-band-quote { position: absolute; top: 40%; max-width: 80%; }
  .il-band-attr  { position: absolute; top: auto; bottom: 18%; right: 50%; transform: translateX(50%); }
}

/* ============================================================
   PASSAGE — WATER MONOLOGUES essay (B&W editorial interlude)
   A warm-paper magazine page that breaks from the cobalt aesthetic
   for one moment of pure typography before the Collection.
   ============================================================ */
.passage {
  position: relative;
  background: #EFEAE0;
  color: #0E0E10;
  padding: clamp(120px, 14vw, 220px) clamp(28px, 6vw, 96px) clamp(90px, 11vw, 180px);
  font-family: 'Cormorant Garamond', serif;
  z-index: 4;
  overflow: hidden;
  isolation: isolate;
}
.passage::before,
.passage::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: min(82%, 1240px);
  height: 1px;
  background: linear-gradient(to right, transparent, #1A1714 30%, #1A1714 70%, transparent);
  opacity: 0.55;
  z-index: 2;
}
.passage::before { top: 0; }
.passage::after  { bottom: 0; }

.p-grain {
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.55'/></svg>");
  mix-blend-mode: multiply;
  opacity: 0.18;
  z-index: 1;
}

.passage > *:not(.p-grain) { position: relative; z-index: 2; }

/* HEADER */
.p-head {
  max-width: 1320px;
  margin: 0 auto clamp(60px, 7vw, 110px);
  text-align: center;
}
.p-label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: #1A1714;
  margin-bottom: 28px;
}
.p-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: clamp(56px, 7.5vw, 108px);
  line-height: 0.95;
  letter-spacing: -0.022em;
  color: #0B0B0E;
  margin-bottom: 22px;
}
.p-title em {
  font-style: italic;
  font-weight: 600;
}
.p-deck {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(16px, 1.5vw, 21px);
  color: #2A2622;
  max-width: 620px;
  margin: 0 auto;
  line-height: 1.5;
}

/* SPREAD — true magazine WRAP per Coco's Keynote mockup (2026-06-02):
   3 columns × 3 rows. Text flows in an L-shape SPIRAL around the image:
   TOP (over image) → LEFT (beside image) → RIGHT (beside image) → BOTTOM (under image).
   Image sits in the middle cell of the middle row. */
.p-spread {
  display: grid;
  grid-template-columns: 1fr clamp(220px, 26%, 290px) 1fr;
  grid-template-rows: auto auto auto;
  column-gap: clamp(28px, 3vw, 48px);
  row-gap: clamp(18px, 2.2vw, 32px);
  max-width: 1040px;
  margin: 0 auto;
  align-items: start;
}

/* Explicit grid placement for each zone */
.p-zone-top   { grid-column: 1 / 3; grid-row: 1; }   /* spans LEFT + IMAGE cols */
.p-zone-left  { grid-column: 1;     grid-row: 2; }
.p-figure     { grid-column: 2;     grid-row: 2; }
.p-zone-right { grid-column: 3;     grid-row: 2; }
.p-zone-bot   { grid-column: 2 / 4; grid-row: 3; }   /* spans IMAGE + RIGHT cols */

/* Shared text styling across all four zones */
.p-zone {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.62;
  color: #14110E;
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.p-zone p {
  margin: 0 0 18px;
  orphans: 3;
  widows: 3;
}
.p-zone p:last-child {
  margin-bottom: 0;
}
.p-zone em {
  font-style: italic;
  color: #0B0B0E;
}

/* Drop cap on the opening paragraph (top zone) */
.p-dropcap {
  float: left;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: 5.4em;
  line-height: 0.86;
  padding: 6px 12px 0 0;
  color: #0B0B0E;
}

/* ATTRIBUTION — quote source under the closing line of the passage */
.p-attr {
  margin-top: 28px !important;
  text-align: right;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(14px, 1.05vw, 16px);
  color: #2A2622;
  letter-spacing: 0.02em;
}
.p-attr em {
  font-style: italic;
  color: #0B0B0E;
}
.p-attr cite {
  display: block;
  margin-top: 4px;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: #0B0B0E;
}

/* FIGURE — sits in the middle cell, tight against the flanking text columns */
.p-figure {
  margin: 0;
  align-self: start;
}
.p-figure img {
  width: 100%;
  display: block;
  filter: grayscale(1) contrast(1.04);
  box-shadow:
    0 30px 80px -30px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(0, 0, 0, 0.12);
}
.p-figure figcaption {
  margin-top: 12px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 12.5px;
  text-align: center;
  color: #2A2622;
  letter-spacing: 0.04em;
}
.p-figure figcaption em {
  color: #0B0B0E;
  font-style: italic;
  font-weight: 500;
}

/* FOOTER — page number + byline */
.p-foot {
  max-width: 1320px;
  margin: clamp(70px, 8vw, 120px) auto 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #2A2622;
}
.p-byline .dot {
  color: #0B0B0E;
  margin-right: 8px;
  font-size: 13px;
}

/* RESPONSIVE — collapse the L-spiral into a single linear column */
@media (max-width: 900px) {
  .p-spread {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    row-gap: 24px;
  }
  .p-zone-top,
  .p-zone-left,
  .p-figure,
  .p-zone-right,
  .p-zone-bot {
    grid-column: 1;
    grid-row: auto;
  }
  .p-zone {
    font-size: 16px;
  }
  .p-dropcap {
    font-size: 4.6em;
  }
  .p-figure {
    max-width: 420px;
    margin: 0 auto;
  }
  .p-foot {
    flex-direction: column;
    gap: 14px;
    text-align: center;
  }
}

/* ============================================================
   WORKS — alternating editorial spreads with Klein blooms
   ============================================================ */
.works {
  background:
    radial-gradient(ellipse 50% 35% at 95% 5%, rgba(45, 110, 255, 0.22), transparent 60%),
    radial-gradient(ellipse 45% 30% at 5% 50%, rgba(45, 110, 255, 0.14), transparent 60%),
    radial-gradient(ellipse 40% 30% at 90% 95%, rgba(45, 110, 255, 0.16), transparent 60%),
    var(--ink-3);
  color: var(--mist);
  padding: 200px var(--pad) 240px;
  text-align: center;
  border-top: 1px solid var(--rule);
}
.w-section {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--klein-light);
  margin-bottom: 56px;
}
.w-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: clamp(72px, 12vw, 220px);
  line-height: 0.88;
  letter-spacing: -0.032em;
  text-align: center;
  margin-bottom: 22px;
  background: linear-gradient(180deg, var(--chrome-1) 0%, var(--chrome-2) 45%, var(--chrome-4) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 4px 32px rgba(45, 110, 255, 0.18));
}
/* Standalone Collection page — clear the fixed nav at the top */
.collection-body .works { padding-top: clamp(150px, 16vw, 220px); padding-bottom: 60px; }

/* Collection first slide — cobalt liquid behind the floating title */
.collection-hero {
  position: relative;
  overflow: hidden;
  /* full-bleed: break out of the .works horizontal padding */
  margin-left: calc(-1 * var(--pad));
  margin-right: calc(-1 * var(--pad));
  /* pull up so the liquid fills from the very top of the section (cancel works padding-top) */
  margin-top: calc(-1 * clamp(150px, 16vw, 220px));
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: clamp(60px, 9vw, 140px);
}
.collection-hero > .ch-liquid {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url('images/soon_overlay.gif') center / cover no-repeat;
}
.collection-hero > .ch-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(ellipse 92% 80% at 50% 50%,
    rgba(3, 6, 15, 0.55) 0%,
    rgba(3, 6, 15, 0.42) 52%,
    rgba(3, 6, 15, 0.72) 100%);
}
.collection-hero > .w-section,
.collection-hero > .w-title,
.collection-hero > .w-soon { position: relative; z-index: 2; }
.collection-hero > .w-soon { margin-bottom: 0; }
.w-soon {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--klein-light);
  text-align: center;
  margin: 0 auto 120px;
}
.w-title em {
  font-style: italic;
  font-weight: 700;
  background: linear-gradient(120deg, var(--cream) 0%, var(--klein-light) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* "The Collection." — each letter floats on a staggered delay so the
   bob snakes across the word like a wave on water */
.w-title .wl {
  display: inline-block;
  line-height: 1.3;               /* vertical room: ascenders/descenders */
  padding: 0.12em 0.22em 0.16em;  /* horizontal room too, so italic overhang isn't clipped */
  margin: 0 -0.22em;              /* cancel the horizontal padding so letter spacing is unchanged */
  background: linear-gradient(180deg, var(--chrome-1) 0%, var(--chrome-2) 45%, var(--chrome-4) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: letter-wave 6.5s ease-in-out infinite;
  will-change: transform;
}
.w-title .wl-em {
  font-style: italic;
  font-weight: 700;
  background: linear-gradient(120deg, var(--cream) 0%, var(--klein-light) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.w-title .wl-space { display: inline-block; width: 0.28em; }
@keyframes letter-wave {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-22px); }
}
@media (prefers-reduced-motion: reduce) {
  .w-title .wl { animation: none; }
}

.frame {
  max-width: 1240px;
  margin: 0 auto;
  padding: 100px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 7vw, 110px);
  align-items: center;
  border-bottom: 1px solid var(--rule);
  position: relative;
  text-align: left;
}
.frame:last-child { border-bottom: none; }
.frame-right { direction: rtl; }
.frame-right > * { direction: ltr; }

.f-num {
  position: absolute;
  top: 50px; left: 0;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--klein-light);
}
.frame-right .f-num { left: auto; right: 0; }

.f-image {
  position: relative;
  overflow: hidden;
  box-shadow:
    0 40px 120px -30px rgba(0, 0, 0, 0.85),
    0 0 0 1px var(--rule);
  background: var(--surface);
}
.f-image img {
  width: 100%;
  display: block;
  filter: grayscale(40%) contrast(1.10) brightness(0.92);
  transition: transform 1.2s ease, filter 0.8s ease;
}
.frame:hover .f-image img {
  transform: scale(1.04);
  filter: grayscale(10%) contrast(1.10) brightness(1.00);
}
.f-image::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(3, 6, 15, 0.55) 100%);
  pointer-events: none;
}
.f-blank {
  aspect-ratio: 3 / 4;
  width: 100%;
  position: relative;
}
.f-blank-1 {
  background:
    radial-gradient(circle at 30% 30%, rgba(45, 110, 255, 0.22), transparent 55%),
    linear-gradient(165deg, #1A2438 0%, #060A14 100%);
}
.f-blank-2 {
  background:
    radial-gradient(circle at 70% 40%, rgba(239, 227, 198, 0.18), transparent 55%),
    linear-gradient(165deg, #1A2438 0%, #060A14 100%);
}
.f-blank-3 {
  background:
    radial-gradient(circle at 50% 80%, rgba(45, 110, 255, 0.18), transparent 55%),
    linear-gradient(165deg, #1A2438 0%, #02050C 100%);
}
.f-blank::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(232, 236, 243, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232, 236, 243, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
}

.f-text { padding: 0 12px; }
.frame-right .f-text { text-align: right; }

.f-name {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: clamp(44px, 6vw, 88px);
  line-height: 0.98;
  letter-spacing: -0.022em;
  margin-bottom: 22px;
  background: linear-gradient(180deg, var(--chrome-1) 0%, var(--chrome-3) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.f-name em {
  font-style: italic;
  font-weight: 600;
  background: linear-gradient(120deg, var(--chrome-1) 0%, var(--klein-light) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.f-class {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(16px, 1.4vw, 20px);
  color: var(--cream);
  margin-bottom: 30px;
  letter-spacing: 0.03em;
}
.f-desc {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.70;
  color: var(--chrome-3);
  margin-bottom: 40px;
  max-width: 480px;
}
.frame-right .f-desc { margin-left: auto; }
.f-link {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--klein-light);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--klein-light);
  display: inline-block;
  transition: letter-spacing 0.4s, color 0.4s, text-shadow 0.4s;
}
.f-link:hover {
  letter-spacing: 0.44em;
  color: var(--chrome-1);
  text-shadow: 0 0 18px rgba(45, 110, 255, 0.6);
}

/* ============================================================
   STUDIO — Auntie Coco
   ============================================================ */
.studio {
  background:
    radial-gradient(ellipse 60% 45% at 50% 35%, rgba(45, 110, 255, 0.20), transparent 60%),
    radial-gradient(ellipse 50% 40% at 5% 100%, rgba(45, 110, 255, 0.10), transparent 60%),
    var(--ink-3);
  color: var(--mist);
  padding: 240px var(--pad) 260px;
  text-align: center;
  border-top: 1px solid var(--rule);
}
/* Standalone studio page — full-screen, centered */
.studio-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 140px var(--pad);
  border-top: none;
}
.s-section {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--klein-light);
  margin-bottom: 80px;
}
.s-portrait {
  position: relative;
  width: 100%;
  max-width: 440px;
  aspect-ratio: 4 / 5;
  margin: 0 auto 88px;
  overflow: hidden;
  background: var(--void);
  box-shadow:
    0 50px 140px -30px rgba(0, 0, 0, 0.85),
    0 0 0 1px var(--rule-bold),
    inset 0 0 80px rgba(45, 110, 255, 0.12);
}
.s-portrait > img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: contrast(1.15) brightness(0.92) saturate(1.10);
}
.s-portrait::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(3, 6, 15, 0.65) 100%);
  pointer-events: none;
  z-index: 2;
}
.s-portrait figcaption {
  position: absolute;
  bottom: 18px; left: 0; right: 0;
  z-index: 3;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 18px;
  color: var(--mist);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.8);
}
.cap-fallback {
  display: none;
  position: absolute; inset: 0;
  align-items: center; justify-content: center;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 22px;
  color: rgba(232, 236, 243, 0.55);
  z-index: 3;
}
.s-portrait.missing {
  background:
    radial-gradient(circle at 50% 50%, rgba(45, 110, 255, 0.10), transparent 65%),
    repeating-linear-gradient(45deg, transparent 0 26px, rgba(232, 236, 243, 0.03) 26px 27px),
    var(--ink-3);
  display: flex; align-items: center; justify-content: center;
}
.s-portrait.missing .cap-fallback { display: flex; }
.s-portrait.missing figcaption { display: none; }

/* portrait stack */
.portrait-stack .ps-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: ps-flip 18s infinite ease-in-out;
  filter: contrast(1.15) brightness(0.92) saturate(1.10);
  z-index: 1;
}
.portrait-stack .ps-img:nth-child(1) { animation-delay: 0s; }
.portrait-stack .ps-img:nth-child(2) { animation-delay: 6s; }
.portrait-stack .ps-img:nth-child(3) { animation-delay: 12s; }
@keyframes ps-flip {
  0%        { opacity: 0; transform: scale(1.04); }
  5%, 28%   { opacity: 1; transform: scale(1.00); }
  33%, 100% { opacity: 0; transform: scale(1.00); }
}
.portrait-stack.missing .ps-img { display: none !important; }

.s-headline {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: clamp(52px, 7vw, 130px);
  line-height: 1.08;          /* room so clip:text descenders (g) aren't cut */
  padding-bottom: 0.08em;
  letter-spacing: -0.028em;
  max-width: 1000px;
  margin: 0 auto 72px;
  background: linear-gradient(180deg, var(--chrome-1) 0%, var(--chrome-2) 50%, var(--chrome-4) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.s-headline em {
  font-style: italic;
  font-weight: 700;
  background: linear-gradient(120deg, var(--klein-light) 0%, var(--chrome-2) 60%, var(--cream) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.s-body {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(19px, 1.8vw, 24px);
  line-height: 1.75;
  color: var(--chrome-3);
  max-width: 680px;
  margin: 0 auto 30px;
}
.s-body em {
  font-style: italic;
  color: var(--cream);
  font-weight: 500;
}

/* ===== STUDIO — movement film as a full-bleed ambient overlay ===== */
.studio-page { position: relative; overflow: hidden; background: var(--void); }

/* ===== STUDIO — cobalt liquid GIF "coming soon" (same as Shop) ===== */
.studio-soon { background: var(--void); }
.studio-soon > .soon-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(ellipse 92% 75% at 50% 50%,
    rgba(3, 6, 15, 0.55) 0%,
    rgba(3, 6, 15, 0.42) 52%,
    rgba(3, 6, 15, 0.68) 100%);
}
.studio-soon .s-inner { position: relative; z-index: 2; }
/* glitch emblem layered over the cobalt liquid, screen-blended (black drops out) */
.studio-soon > .s-glitch {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.18;
}
.studio-soon > .s-glitch video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* push the electric-cyan glitch into the site's deep cobalt tone */
  filter: brightness(0.72) sepia(1) hue-rotate(188deg) saturate(4.2);
}
/* standout cream-gold headline over the busy cobalt/glitch background */
.studio-soon .s-headline {
  background: linear-gradient(120deg, #FFF6DD 0%, var(--cream) 48%, var(--cream-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter:
    drop-shadow(0 2px 16px rgba(3, 6, 15, 0.85))
    drop-shadow(0 0 34px rgba(45, 110, 255, 0.40));
}
.studio-soon .s-headline em {
  background: linear-gradient(120deg, #FFFFFF 0%, #FFF6DD 50%, var(--cream) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ===== STUDIO — film still with transparent glitch layer ===== */
.studio-still {
  position: relative;
  overflow: hidden;
  background: var(--void);
  line-height: 0;
}
.ss-photo {
  width: 100%;
  display: block;
  object-fit: cover;
  filter: contrast(1.06) brightness(0.96);
}
/* faint vignette so edges sink into the page */
.studio-still::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(ellipse 90% 80% at 50% 50%,
    transparent 55%, rgba(3, 6, 15, 0.55) 100%);
}
/* the flashes over the photo — kept transparent so the picture reads clearly */
.ss-glitch {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.18;
}
.ss-glitch video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.72) sepia(1) hue-rotate(188deg) saturate(4.2);
}
/* "Let's meet in the writers room." overlaid on the film still */
.ss-caption {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--pad);
  pointer-events: none;
  background: radial-gradient(ellipse 70% 50% at 50% 50%,
    rgba(3, 6, 15, 0.50) 0%, transparent 65%);
}
.ssc-line {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.04;
  font-size: clamp(34px, 5.6vw, 96px);
  max-width: 15ch;
  background: linear-gradient(180deg, #FFF6DD 0%, var(--cream) 55%, var(--cream-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter:
    drop-shadow(0 3px 22px rgba(3, 6, 15, 0.95))
    drop-shadow(0 0 40px rgba(45, 110, 255, 0.35));
}
.ssc-line em { font-style: italic; font-weight: 700; }

/* ===== STUDIO — "what it is" intro section (below the coming-soon) ===== */
.studio-intro {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 55% 45% at 50% 0%, rgba(45, 110, 255, 0.14), transparent 60%),
    radial-gradient(ellipse 50% 40% at 8% 100%, rgba(45, 110, 255, 0.08), transparent 60%),
    var(--ink-2);
  padding: clamp(120px, 16vw, 220px) var(--pad);
  text-align: center;
  border-top: 1px solid var(--rule);
}
/* transparent flashes behind the intro text (text stays above) */
.studio-intro > .si-glitch {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.18;
}
.studio-intro > .si-glitch video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.72) sepia(1) hue-rotate(188deg) saturate(4.2);
}
.studio-intro > .si-inner { position: relative; z-index: 1; }

/* transparent flashes carried through the studio footer (last slide) */
.studio-body .foot { position: relative; overflow: hidden; }
.studio-body .foot > .foot-glitch {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.18;
}
.studio-body .foot > .foot-glitch video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.72) sepia(1) hue-rotate(188deg) saturate(4.2);
}
/* keep footer content above the flashes */
.studio-body .foot > p,
.studio-body .foot > div:not(.foot-glitch) { position: relative; z-index: 1; }
.si-label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--klein-light);
  margin-bottom: 48px;
}
.si-headline {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: clamp(40px, 6vw, 104px);
  line-height: 1.06;
  padding-bottom: 0.08em;
  letter-spacing: -0.026em;
  max-width: 1000px;
  margin: 0 auto 56px;
  background: linear-gradient(180deg, var(--chrome-1) 0%, var(--chrome-2) 50%, var(--chrome-4) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.si-headline em {
  font-style: italic;
  font-weight: 700;
  background: linear-gradient(120deg, var(--klein-light) 0%, var(--chrome-2) 55%, var(--cream) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.si-body {
  max-width: 720px;
  margin: 0 auto;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(19px, 1.7vw, 25px);
  line-height: 1.85;
  color: var(--chrome-3);
}
.si-body p { margin-bottom: 1.4em; }
.si-body p:last-child { margin-bottom: 0; }
.si-body em {
  font-style: italic;
  font-weight: 500;
  color: var(--cream);
}
.si-sign {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2.4vw, 34px);
  color: var(--cream);
  margin-top: 60px;
}
.s-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.s-bg video {
  width: 100%; height: 100%;
  object-fit: cover;
  /* tint the movement deep cobalt to match the world, dimmed so text reads */
  filter: brightness(0.62) sepia(1) hue-rotate(188deg) saturate(4.0);
  opacity: 0.85;
}
/* scrim — clear-ish center, falling off to near-black at the edges so the
   chrome headline + body stay legible over the moving figure */
.s-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 75% at 50% 48%,
      rgba(3, 6, 15, 0.20) 0%,
      rgba(3, 6, 15, 0.55) 55%,
      rgba(3, 6, 15, 0.90) 100%),
    linear-gradient(180deg,
      rgba(3, 6, 15, 0.55) 0%,
      rgba(3, 6, 15, 0.15) 24%,
      rgba(3, 6, 15, 0.15) 76%,
      rgba(3, 6, 15, 0.60) 100%);
}
.s-inner {
  position: relative;
  z-index: 2;
  text-align: center;
}
.s-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--chrome-3);
  margin-top: 14px;
}

/* ============================================================
   SUBSCRIBE
   ============================================================ */
.subscribe {
  background: var(--void);
  color: var(--mist);
  padding: 240px var(--pad) 260px;
  text-align: center;
  border-top: 1px solid var(--rule);
  position: relative;
  overflow: hidden;
}
.subscribe::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 35%, rgba(45, 110, 255, 0.12), transparent 55%);
  pointer-events: none;
  z-index: 0;
}
.subscribe > * { position: relative; z-index: 1; }
/* photo underlay — sits behind the content; text + colors unchanged */
.subscribe > .sub-bg,
.subscribe > .sub-veil {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.sub-bg img,
.sub-bg video {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;   /* keep the "4269-0" numbers in frame at the top */
  opacity: 0.82;
  filter: contrast(1.08) brightness(0.9);
}
/* top stays crisp black & white (light scrim); bottom washes cobalt blue */
.sub-veil {
  background: linear-gradient(180deg,
    rgba(3, 6, 15, 0.26) 0%,
    rgba(3, 6, 15, 0.30) 40%,
    rgba(20, 60, 185, 0.40) 66%,
    rgba(45, 110, 255, 0.58) 100%);
}
.sub-section {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--klein-light);
  margin-bottom: 56px;
}
.sub-line {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: clamp(76px, 12vw, 200px);
  line-height: 0.88;
  letter-spacing: -0.034em;
  margin-bottom: 56px;
  background: linear-gradient(180deg, var(--chrome-1) 0%, var(--chrome-2) 45%, var(--chrome-4) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 6px 60px rgba(45, 110, 255, 0.22));
}
.sub-line em {
  font-style: italic;
  font-weight: 700;
  background: linear-gradient(120deg, var(--cream) 0%, var(--klein-light) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.sub-sub {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.85;
  color: var(--chrome-3);
  margin-bottom: 72px;
}
.sub-form {
  display: flex;
  max-width: 520px; margin: 0 auto 24px;
  border: 1px solid var(--rule-bold);
  background: rgba(19, 28, 46, 0.45);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: border-color 0.4s, box-shadow 0.4s;
}
.sub-form:focus-within {
  border-color: var(--klein-light);
  box-shadow: 0 0 32px rgba(45, 110, 255, 0.28);
}
.sub-form input {
  flex: 1;
  background: transparent;
  border: none;
  padding: 22px 24px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 400;
  color: var(--mist);
  outline: none;
  font-style: italic;
}
.sub-form input::placeholder { color: var(--pewter); font-style: italic; }
.sub-form button {
  background: var(--klein);
  color: var(--void);
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  padding: 22px 36px;
  font-weight: 600;
  transition: background 0.4s, letter-spacing 0.4s;
}
.sub-form button:hover {
  background: var(--chrome-1);
  letter-spacing: 0.40em;
}
.sub-fine {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 14px;
  color: var(--pewter);
  margin-top: 24px;
}

/* ===== SUBSCRIBE PAGE ONLY — eyes photo + bold treatment ===== */
/* drop the photo below the fixed nav so the "4269-0" numbers aren't clipped */
.subscribe-page .sub-bg,
.subscribe-page .sub-veil { top: 112px; }
.subscribe-page .sub-sub {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: clamp(21px, 1.9vw, 28px);
  color: var(--cream);
  text-shadow: 0 2px 18px rgba(3, 6, 15, 0.75);
  margin-top: 64px;
  margin-bottom: 340px;
}
.subscribe-page .sub-fine {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cream);
  text-shadow: 0 2px 16px rgba(3, 6, 15, 0.7);
  margin-top: 28px;
}
.subscribe-page .sub-fine em { font-style: normal; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot {
  background: var(--void);
  color: var(--mist);
  padding: 120px var(--pad) 56px;
  text-align: center;
  border-top: 1px solid var(--rule);
}
.foot-mark {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: clamp(88px, 20vw, 320px);
  line-height: 0.83;
  letter-spacing: -0.045em;
  display: inline-flex;
  align-items: baseline;
  background: linear-gradient(180deg, var(--chrome-1) 0%, var(--chrome-2) 35%, var(--chrome-4) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 8px 60px rgba(45, 110, 255, 0.22));
}
.foot-mark .foot-co {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 0.22em;
  vertical-align: super;
  margin-left: 0.6em;          /* clear gap so it doesn't overlap the R / its period */
  letter-spacing: normal;      /* don't inherit the big mark's tight tracking */
  -webkit-text-fill-color: var(--klein-light);
  background: none;
  color: var(--klein-light);
}
.foot-tag {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  color: var(--cream);
  margin: 28px 0 90px;
  letter-spacing: 0.04em;
}
.foot-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  max-width: 1080px;
  margin: 0 auto 60px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--rule);
}
.foot-h {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--klein-light);
  margin-bottom: 22px;
  font-weight: 500;
}
.foot-h-sub { margin-top: 28px; }
.foot-cols a {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 16px;
  color: var(--mist);
  padding: 6px 0;
  opacity: 0.82;
  transition: opacity 0.3s, color 0.3s;
}
.foot-cols a:hover { opacity: 1; color: var(--klein-light); }
.foot-meta {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--pewter);
}

/* ============================================================
   ENTER GATE — preserved
   ============================================================ */
.enter-gate {
  position: fixed; inset: 0;
  z-index: 1000;
  background: var(--void);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition: opacity 1.4s cubic-bezier(0.7, 0, 0.3, 1),
              transform 1.4s cubic-bezier(0.7, 0, 0.3, 1),
              filter 1.4s ease-out;
}
.enter-gate.exit {
  opacity: 0;
  transform: translateY(-6vh) scale(1.06);
  filter: blur(20px);
  pointer-events: none;
}
.enter-fx { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.enter-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  mix-blend-mode: screen;
}
.enter-orb-1 {
  width: 90vmin; height: 90vmin;
  background: radial-gradient(circle, rgba(45, 110, 255, 0.75) 0%, transparent 60%);
  top: -10vmin; left: -10vmin;
  animation: orb-a 26s ease-in-out infinite alternate;
}
.enter-orb-2 {
  width: 80vmin; height: 80vmin;
  background: radial-gradient(circle, rgba(15, 56, 200, 0.7) 0%, transparent 60%);
  bottom: -15vmin; right: -15vmin;
  animation: orb-b 32s ease-in-out infinite alternate;
}
@keyframes orb-a {
  0%   { transform: translate(0, 0)         scale(1)    rotate(0); }
  50%  { transform: translate(15vw, 25vh)   scale(1.25) rotate(60deg); }
  100% { transform: translate(40vw, 50vh)   scale(0.95) rotate(120deg); }
}
@keyframes orb-b {
  0%   { transform: translate(0, 0)         scale(1)    rotate(0); }
  50%  { transform: translate(-20vw, -10vh) scale(0.85) rotate(-50deg); }
  100% { transform: translate(-45vw, -45vh) scale(1.15) rotate(-110deg); }
}
.enter-facet {
  position: absolute;
  width: 160vmin; height: 160vmin;
  top: 50%; left: 50%;
  margin-top: -80vmin; margin-left: -80vmin;
  border-radius: 50%;
  mix-blend-mode: overlay;
  filter: blur(20px);
  opacity: 0.55;
  background: conic-gradient(from 0deg,
    transparent 0deg,
    rgba(228, 233, 242, 0.5) 60deg,
    rgba(45, 110, 255, 0.5) 110deg,
    transparent 180deg,
    rgba(228, 233, 242, 0.4) 250deg,
    rgba(15, 56, 200, 0.4) 300deg,
    transparent 360deg);
  animation: facet-spin 60s linear infinite;
}
@keyframes facet-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.enter-ripple {
  position: absolute;
  top: 50%; left: 50%;
  width: 200px; height: 200px;
  margin: -100px 0 0 -100px;
  border-radius: 50%;
  border: 1px solid rgba(111, 149, 255, 0.55);
  opacity: 0;
  animation: enter-ripple 7s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
  box-shadow:
    0 0 30px rgba(45, 110, 255, 0.35),
    inset 0 0 20px rgba(45, 110, 255, 0.20);
}

/* ============== HORIZONTAL WAVE BANDS — entry gate overlay ============== */
.enter-waves {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: screen;
}
/* Top wide curved wave — bright cobalt with white center */
.enter-wave-top {
  position: absolute;
  top: 18%;
  left: -8%;
  right: -8%;
  height: 90px;
  background:
    radial-gradient(ellipse 55% 100% at 50% 50%,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(143, 186, 255, 0.50) 25%,
      rgba(45, 110, 255, 0.35) 55%,
      transparent 75%);
  filter: blur(10px);
  animation: enter-wave-top 9s ease-in-out infinite;
  opacity: 0;
}
@keyframes enter-wave-top {
  0%    { opacity: 0;    transform: translateX(-4vw) translateY(0); }
  4%    { opacity: 1;    transform: translateX(-3vw) translateY(-4px); filter: blur(8px) brightness(1.4); }
  10%   { opacity: 0.35; }
  18%   { opacity: 0; }
  44%   { opacity: 0;    transform: translateX(2vw); }
  50%   { opacity: 1;    transform: translateX(2.5vw) translateY(-6px); filter: blur(8px) brightness(1.5); }
  56%   { opacity: 0.40; }
  68%   { opacity: 0; }
  100%  { opacity: 0;    transform: translateX(4vw); }
}

/* Middle thin glow line */
.enter-wave-mid {
  position: absolute;
  top: 28%;
  left: -5%;
  right: -5%;
  height: 4px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(143, 186, 255, 0.50) 20%,
    rgba(255, 255, 255, 0.65) 50%,
    rgba(143, 186, 255, 0.50) 80%,
    transparent 100%);
  filter: blur(1.5px);
  box-shadow:
    0 0 12px rgba(45, 110, 255, 0.55),
    0 0 24px rgba(143, 186, 255, 0.35);
  animation: enter-wave-mid 11s ease-in-out infinite;
  opacity: 0;
}
@keyframes enter-wave-mid {
  0%    { opacity: 0;    transform: translateX(3vw)  scaleX(0.95); }
  16%   { opacity: 0; }
  22%   { opacity: 0.95; transform: translateX(2vw)  scaleX(1);    filter: blur(1.5px) brightness(1.5); }
  30%   { opacity: 0.30; }
  44%   { opacity: 0; }
  74%   { opacity: 0;    transform: translateX(-2vw); }
  80%   { opacity: 0.85; transform: translateX(-2.5vw) scaleX(1.05); filter: blur(1.5px) brightness(1.4); }
  88%   { opacity: 0.25; }
  100%  { opacity: 0;    transform: translateX(-3vw); }
}

/* Bottom two sharp lines */
.enter-wave-bot {
  position: absolute;
  bottom: 24%;
  left: 0;
  right: 0;
  height: 60px;
  pointer-events: none;
}
.enter-wave-bot::before,
.enter-wave-bot::after {
  content: "";
  position: absolute;
  left: -5%;
  right: -5%;
  height: 3px;
  filter: blur(1px);
}
.enter-wave-bot::before {
  top: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(45, 110, 255, 0.60) 15%,
    rgba(143, 186, 255, 0.75) 50%,
    rgba(45, 110, 255, 0.60) 85%,
    transparent 100%);
  box-shadow:
    0 0 10px rgba(45, 110, 255, 0.55),
    0 0 20px rgba(45, 110, 255, 0.35);
  animation: enter-wave-line-1 8s ease-in-out infinite;
  opacity: 0;
}
.enter-wave-bot::after {
  top: 32px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(111, 149, 255, 0.65) 12%,
    rgba(255, 255, 255, 0.60) 50%,
    rgba(111, 149, 255, 0.65) 88%,
    transparent 100%);
  box-shadow:
    0 0 14px rgba(111, 149, 255, 0.60),
    0 0 28px rgba(143, 186, 255, 0.35);
  animation: enter-wave-line-2 10s ease-in-out infinite;
  opacity: 0;
}
@keyframes enter-wave-line-1 {
  0%    { opacity: 0;    transform: translateX(-3vw); }
  8%    { opacity: 1;    transform: translateX(-2.5vw); filter: blur(1px) brightness(1.6); }
  16%   { opacity: 0.30; }
  30%   { opacity: 0; }
  56%   { opacity: 0;    transform: translateX(1vw); }
  62%   { opacity: 0.95; transform: translateX(1.5vw); filter: blur(1px) brightness(1.5); }
  72%   { opacity: 0.25; }
  84%   { opacity: 0; }
  100%  { opacity: 0;    transform: translateX(3vw); }
}
@keyframes enter-wave-line-2 {
  0%    { opacity: 0;    transform: translateX(2vw); }
  12%   { opacity: 0; }
  18%   { opacity: 1;    transform: translateX(1.5vw); filter: blur(1px) brightness(1.55); }
  26%   { opacity: 0.30; }
  38%   { opacity: 0; }
  66%   { opacity: 0;    transform: translateX(-1vw); }
  72%   { opacity: 0.90; transform: translateX(-1.5vw); filter: blur(1px) brightness(1.45); }
  80%   { opacity: 0.25; }
  92%   { opacity: 0; }
  100%  { opacity: 0;    transform: translateX(-2vw); }
}
.enter-ripple-2 { animation-delay: 2.3s; }
.enter-ripple-3 { animation-delay: 4.6s; }
@keyframes enter-ripple {
  0%   { opacity: 0; transform: scale(0); border-color: rgba(228, 233, 242, 0.9); }
  6%   { opacity: 0.7; }
  100% { opacity: 0; transform: scale(8); border-color: rgba(45, 110, 255, 0.0); }
}
.enter-corner {
  position: absolute;
  z-index: 3;
  font-family: 'Inter', 'SF Mono', monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--chrome-3);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 36px 40px;
  opacity: 0;
  animation: fade-in 1.4s ease-out 2.6s forwards;
}
.enter-corner .dim { color: var(--chrome-4); font-weight: 400; }
.enter-corner .sym { color: var(--klein-light); font-weight: 400; }
.enter-corner-tl { top: 0; left: 0; }
.enter-corner-tr { top: 0; right: 0; text-align: right; }
.enter-corner-bl { bottom: 0; left: 0; }
.enter-corner-br { bottom: 0; right: 0; text-align: right; }
.enter-mark { position: relative; z-index: 2; text-align: center; padding: 0 var(--pad); }
.enter-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--chrome-2);
  margin-bottom: 36px;
  opacity: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  animation: fade-in 1.4s ease-out 2.4s forwards;
}
.enter-eyebrow .sym { color: var(--klein-light); font-weight: 400; }
.enter-word {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: clamp(110px, 22vw, 380px);
  line-height: 0.86;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: baseline;
  color: #5B8EFF;
  filter:
    drop-shadow(0 0 70px rgba(45, 110, 255, 0.75))
    drop-shadow(0 0 24px rgba(111, 149, 255, 0.55));
}
/* Each WATER letter — vivid electric cobalt gradient + shimmer */
.enter-word .EL {
  display: inline-block;
  opacity: 0;
  transform: translateY(48px) scale(0.7);
  filter: blur(14px);
  background: linear-gradient(180deg,
    #8FBAFF   0%,
    #5B8EFF  20%,
    #2D6EFF  50%,
    #1F4FE8  78%,
    #4F7EFF 100%);
  background-size: 100% 200%;
  background-position: 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation:
    enter-letter-rise 2s cubic-bezier(0.16, 1, 0.3, 1) forwards,
    chrome-shimmer 10s ease-in-out infinite;
}
.enter-word .EL-t { animation-delay: 0.6s; }
.enter-word .EL-a { animation-delay: 1.0s; }
.enter-word .EL-e { animation-delay: 1.0s; }
.enter-word .EL-w { animation-delay: 1.4s; }
.enter-word .EL-r { animation-delay: 1.4s; }
@keyframes enter-letter-rise {
  0%   { opacity: 0; transform: translateY(48px) scale(0.7); filter: blur(14px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.enter-co {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 0.22em;
  letter-spacing: 0.005em;
  text-transform: none;
  vertical-align: super;
  margin-left: 0.06em;
  -webkit-text-fill-color: var(--klein-light);
  background: none;
  color: var(--klein-light);
  text-shadow: 0 0 28px rgba(45, 110, 255, 0.7);
  opacity: 0;
  animation: enter-co-gradual 3.6s cubic-bezier(0.16, 1, 0.3, 1) 3.0s forwards;
}
@keyframes enter-co-gradual {
  0%   { opacity: 0; transform: translateY(-6px); filter: blur(6px); letter-spacing: 0.20em; }
  40%  { opacity: 0.25; filter: blur(2px); }
  100% { opacity: 0.92; transform: translateY(0); filter: blur(0); letter-spacing: 0.005em; }
}
.enter-tag {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 32px);
  letter-spacing: 0.06em;
  color: var(--cream);
  margin-top: 36px;
  text-shadow: 0 0 30px rgba(239, 227, 198, 0.40);
  opacity: 0;
  animation: fade-in 1.6s ease-out 2.6s forwards;
}
.enter-btn {
  position: absolute;
  bottom: clamp(80px, 12vh, 140px);
  left: 50%; transform: translateX(-50%);
  z-index: 3;
  background: transparent;
  padding: 22px 44px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--chrome-1);
  border: 1px solid var(--chrome-3);
  display: inline-flex;
  align-items: center;
  gap: 18px;
  opacity: 0;
  cursor: pointer;
  overflow: hidden;
  animation: fade-in 1.4s ease-out 3.2s forwards,
             pulse-glow 3.4s ease-in-out 3.2s infinite;
  transition: color 0.5s, border-color 0.5s, letter-spacing 0.5s, transform 0.5s;
}
.enter-btn-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, var(--klein-deep), var(--klein));
  opacity: 0;
  transition: opacity 0.5s;
  z-index: -1;
}
.enter-btn .enter-btn-text,
.enter-btn .enter-btn-arrow { position: relative; z-index: 1; }
.enter-btn:hover {
  border-color: var(--klein-light);
  letter-spacing: 0.42em;
  transform: translateX(-50%) translateY(-2px);
}
.enter-btn:hover .enter-btn-bg { opacity: 1; }
.enter-btn-arrow { font-size: 16px; transition: transform 0.5s; }
.enter-btn:hover .enter-btn-arrow { transform: translateX(6px); }
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 rgba(45, 110, 255, 0); }
  50%      { box-shadow: 0 0 36px rgba(45, 110, 255, 0.45); }
}
@keyframes fade-in {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .frame {
    grid-template-columns: 1fr;
    gap: 56px;
    padding: 80px 0;
  }
  .frame-right { direction: ltr; }
  .frame-right .f-text { text-align: left; }
  .frame-right .f-desc { margin-left: 0; }
  .f-num { position: relative; top: auto; left: auto; margin-bottom: 24px; }
  .frame-right .f-num { right: auto; }
}
@media (max-width: 720px) {
  .nav { grid-template-columns: auto auto; gap: 20px; }
  .nav-left { gap: 14px; }
  .nav-right { display: none; }
  .nav-left a { font-size: 9.5px; letter-spacing: 0.18em; }
  .hero-coord { font-size: 9.5px; letter-spacing: 0.28em; padding: 0 var(--pad); }
  .foot-cols { grid-template-columns: 1fr 1fr; gap: 36px; }
  .enter-corner { font-size: 9px; padding: 22px; letter-spacing: 0.16em; }
  .enter-corner span:last-child { display: none; }
  .enter-btn { padding: 18px 28px; font-size: 10.5px; letter-spacing: 0.28em; gap: 12px; }
}
@media (max-width: 480px) {
  .foot-cols { grid-template-columns: 1fr; }
}