/* ═══════════════════════════════════════════════════════════
   THE BOOK OF REMEMBERING — cosmic minimal
   ═══════════════════════════════════════════════════════════ */

:root{
  --void:        #01010a;
  --void-2:      #04040f;
  --ink:         #ece9e4;
  --ink-70:      rgba(236,233,228,.70);
  --ink-45:      rgba(236,233,228,.45);
  --ink-25:      rgba(236,233,228,.25);
  --ink-12:      rgba(236,233,228,.12);
  --star:        #cfc6ff;
  --ember:       #e8d7b0;
  --line:        rgba(207,198,255,.16);

  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --gutter: clamp(20px, 5vw, 72px);
  --col: 42rem;

  /* notch / home-indicator insets — 0 on desktop, real values on phones */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:rgba(207,198,255,.22);
}

body{
  margin:0;
  background:
    radial-gradient(1200px 800px at 78% -10%, #06061a 0%, transparent 60%),
    radial-gradient(900px 700px at 10% 30%, #040410 0%, transparent 55%),
    linear-gradient(180deg, #01010a 0%, #02020c 45%, #01010a 100%);
  background-color: var(--void);
  color: var(--ink);
  font-family: var(--sans);
  font-weight:300;
  font-size:16px;
  line-height:1.7;
  overflow-x:hidden;
  /* keep flow content clear of the notch / rounded corners in landscape */
  padding-left:var(--sal);
  padding-right:var(--sar);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

::selection{ background:rgba(207,198,255,.28); color:#fff; }

img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button,input,textarea{ font:inherit; color:inherit; }

/* class selectors like .form{display:flex} outrank the UA [hidden] rule */
[hidden]{ display:none !important; }

/* ── cosmos layers ───────────────────────────────────────── */

#cosmos{
  position:fixed; inset:0;
  width:100%; height:100%;
  z-index:0;
  pointer-events:none;
  filter:blur(1.5px);
  opacity:.92;
}

.nebula{
  position:fixed;
  border-radius:50%;
  filter:blur(150px);
  opacity:.42;
  pointer-events:none;
  z-index:0;
  mix-blend-mode:screen;
  will-change:transform;
}
.nebula--a{
  width:62vw; height:62vw;
  top:-20vw; right:-16vw;
  background:radial-gradient(circle at 40% 40%, rgba(66,50,150,.5), rgba(28,24,88,.16) 55%, transparent 72%);
  animation:driftA 46s ease-in-out infinite alternate;
}
.nebula--b{
  width:54vw; height:54vw;
  bottom:-18vw; left:-14vw;
  background:radial-gradient(circle at 60% 50%, rgba(18,70,96,.38), rgba(12,28,64,.14) 55%, transparent 72%);
  animation:driftB 58s ease-in-out infinite alternate;
}
@keyframes driftA{ to{ transform:translate3d(-6vw,7vh,0) scale(1.12); } }
@keyframes driftB{ to{ transform:translate3d(7vw,-6vh,0) scale(1.08); } }

.grain{
  position:fixed; inset:-50%;
  z-index:2;
  pointer-events:none;
  opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 8s steps(6) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)} 20%{transform:translate(-4%,3%)}
  40%{transform:translate(3%,-4%)} 60%{transform:translate(-3%,-2%)}
  80%{transform:translate(4%,4%)} 100%{transform:translate(0,0)}
}

.vignette{
  position:fixed; inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 34%, rgba(0,0,6,.6) 72%, rgba(0,0,6,.96) 100%),
    linear-gradient(180deg, rgba(0,0,6,.45) 0%, transparent 18%, transparent 82%, rgba(0,0,6,.5) 100%);
}

/* ── preloader ───────────────────────────────────────────── */

.preloader{
  position:fixed; inset:0;
  z-index:100;
  background:#01010a;
  display:grid;
  place-items:center;
  transition:opacity 1.1s var(--ease), visibility 1.1s;
}
.preloader.is-done{ opacity:0; visibility:hidden; }
.preloader__point{
  position:absolute;
  width:5px; height:5px; border-radius:50%;
  background:#efeaff;
  box-shadow:0 0 18px 5px rgba(207,198,255,.75);
  animation:pointPulse 2.2s ease-in-out infinite;
}
.preloader__ring{
  position:absolute;
  width:80px; height:80px;
  border-radius:50%;
  border:1px solid rgba(207,198,255,.35);
  animation:ringExpand 2.4s var(--ease-out) infinite;
}
.preloader__word{
  position:absolute;
  bottom:16vh;
  font-family:var(--sans);
  font-size:10px;
  letter-spacing:.55em;
  text-transform:uppercase;
  color:rgba(236,233,228,.4);
  animation:fadeInOut 2.4s ease-in-out infinite;
}
@keyframes pointPulse{ 50%{ transform:scale(1.6); opacity:.7; } }
@keyframes ringExpand{ 0%{ transform:scale(.3); opacity:0 } 40%{ opacity:.8 } 100%{ transform:scale(2.4); opacity:0 } }
@keyframes fadeInOut{ 0%,100%{ opacity:.15 } 50%{ opacity:.7 } }

/* ── cursor ──────────────────────────────────────────────── */

.cursor-dot,.cursor-ring{
  position:fixed; top:0; left:0;
  z-index:99;
  pointer-events:none;
  border-radius:50%;
  opacity:0;
  transition:opacity .4s ease;
}
.cursor-dot{
  width:5px; height:5px;
  margin:-2.5px 0 0 -2.5px;
  background:#efeaff;
  box-shadow:0 0 10px 2px rgba(207,198,255,.6);
}
.cursor-ring{
  width:34px; height:34px;
  margin:-17px 0 0 -17px;
  border:1px solid rgba(207,198,255,.4);
  transition:opacity .4s ease, width .35s var(--ease-out), height .35s var(--ease-out),
             margin .35s var(--ease-out), border-color .35s ease, background-color .35s ease;
}
body.cursor-on .cursor-dot,
body.cursor-on .cursor-ring{ opacity:1; }
body.cursor-hot .cursor-ring{
  width:58px; height:58px;
  margin:-29px 0 0 -29px;
  border-color:rgba(232,215,176,.55);
  background:rgba(232,215,176,.06);
}

/* ── progress ────────────────────────────────────────────── */

.progress{
  position:fixed; top:var(--sat); left:var(--sal); right:var(--sar);
  height:1px;
  z-index:60;
  background:rgba(255,255,255,.05);
}
.progress span{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg, rgba(207,198,255,.15), rgba(207,198,255,.95));
  box-shadow:0 0 12px rgba(207,198,255,.6);
  transition:width .12s linear;
}

/* ── nav ─────────────────────────────────────────────────── */

.nav{
  position:fixed; top:0; left:0; right:0;
  z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
  padding:calc(22px + var(--sat)) calc(var(--gutter) + var(--sar)) 22px calc(var(--gutter) + var(--sal));
  transition:transform .55s var(--ease), background-color .5s ease, backdrop-filter .5s ease, border-color .5s ease;
  border-bottom:1px solid transparent;
}
.nav.is-solid{
  background:rgba(2,2,12,.62);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:rgba(255,255,255,.05);
}
.nav.is-hidden{ transform:translateY(-105%); }
.nav.is-menu{ transform:none; border-bottom-color:rgba(255,255,255,.06); }

.nav__brand{
  display:flex; align-items:center; gap:11px;
  padding:13px 0; margin:-13px 0;   /* 44px hit area without swelling the bar */
  font-size:10.5px;
  letter-spacing:.36em;
  text-transform:uppercase;
  color:var(--ink-70);
  transition:color .4s ease;
}
.nav__brand:hover{ color:var(--ink); }
.nav__mark{
  width:7px; height:7px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #fff, #8b7fd8);
  box-shadow:0 0 12px 2px rgba(207,198,255,.7);
  animation:markPulse 4s ease-in-out infinite;
}
@keyframes markPulse{ 50%{ box-shadow:0 0 20px 4px rgba(207,198,255,.45); } }

.nav__links{ display:flex; gap:clamp(16px,2.6vw,38px); }
.nav__links a{
  position:relative;
  font-size:10.5px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--ink-45);
  padding-bottom:4px;
  transition:color .4s ease;
}
.nav__links a::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:100%; height:1px;
  background:linear-gradient(90deg, transparent, var(--star), transparent);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .5s var(--ease-out);
}
.nav__links a:hover{ color:var(--ink); }
.nav__links a:hover::after,
.nav__links a.is-active::after{ transform:scaleX(1); }
.nav__links a.is-active{ color:var(--ink); }

/* menu toggle — shown by the 860px query, where .nav__links hide */
.nav__toggle{
  display:none;
  position:relative;
  width:44px; height:44px;
  margin:-11px -8px -11px 0;   /* 44px hit area, slim bar */
  padding:0; border:0;
  background:transparent;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.nav__toggle i{
  position:absolute; left:11px; right:11px;
  height:1px;
  background:linear-gradient(90deg, var(--star), rgba(236,233,228,.8));
  box-shadow:0 0 8px rgba(207,198,255,.5);
  transition:transform .45s var(--ease-out);
}
.nav__toggle i:nth-child(1){ top:18px; }
.nav__toggle i:nth-child(2){ top:26px; }
.nav__toggle.is-open i:nth-child(1){ transform:translateY(4px) rotate(45deg); }
.nav__toggle.is-open i:nth-child(2){ transform:translateY(-4px) rotate(-45deg); }

/* menu overlay: the sections, on phones */
.menu{
  position:fixed; inset:0;
  z-index:48;
  display:grid; place-items:center;
  padding:calc(96px + var(--sat)) 24px calc(48px + var(--sab));
  opacity:0; visibility:hidden;
  /* visibility flips to visible instantly on open (so focus can land inside);
     it lingers on close only to let the fade-out finish */
  transition:opacity .5s var(--ease), visibility 0s linear .5s;
}
.menu.is-open{
  opacity:1; visibility:visible;
  transition:opacity .5s var(--ease), visibility 0s;
}
.menu__veil{
  position:absolute; inset:0;
  background:radial-gradient(circle at 50% 42%, rgba(7,6,26,.9), rgba(1,1,10,.975) 72%);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.menu__links{
  position:relative;
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(18px, 5vh, 34px);
}
.menu__links a{
  position:relative;
  font-family:var(--serif);
  font-size:clamp(30px, 8.5vw, 42px);
  font-weight:300;
  letter-spacing:.045em;
  color:rgba(236,233,228,.82);
  padding:6px 10px;
  opacity:0;
  transform:translateY(20px);
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out),
             color .4s ease, text-shadow .4s ease;
}
.menu__links a em{
  position:absolute; top:.4em; left:-1.2em;
  font-family:var(--sans); font-style:normal;
  font-size:9px; letter-spacing:.3em;
  color:rgba(207,198,255,.5);
}
.menu__links a:nth-child(1){ transition-delay:0ms; }
.menu__links a:nth-child(2){ transition-delay:70ms; }
.menu__links a:nth-child(3){ transition-delay:140ms; }
.menu.is-open .menu__links a{ opacity:1; transform:none; }
.menu__links a:active{
  color:#fff;
  text-shadow:0 0 30px rgba(160,146,255,.6);
}
.menu__when{
  position:absolute; left:0; right:0;
  bottom:calc(24px + var(--sab));
  margin:0; text-align:center;
  font-size:9px;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:rgba(207,198,255,.55);
  opacity:0;
  transition:opacity .7s var(--ease) 220ms;
}
.menu.is-open .menu__when{ opacity:1; }

/* ── shared type ─────────────────────────────────────────── */

.eyebrow{
  margin:0;
  font-size:10px;
  letter-spacing:.52em;
  text-transform:uppercase;
  color:rgba(207,198,255,.62);
}

.btn{
  position:relative;
  display:inline-flex;
  align-items:center; justify-content:center;
  padding:16px 34px;
  border-radius:999px;
  border:1px solid var(--ink-12);
  background:rgba(255,255,255,.02);
  font-size:11px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--ink-70);
  cursor:pointer;
  overflow:hidden;
  transition:color .45s var(--ease), border-color .45s var(--ease),
             transform .45s var(--ease-out), box-shadow .45s ease;
  will-change:transform;
}
.btn span{ position:relative; z-index:2; }
.btn::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(135deg, #f6f3ff 0%, #ddd4ff 46%, #b6a7ff 100%);
  opacity:0;
  transition:opacity .45s var(--ease);
  z-index:1;
}
.btn:hover{
  color:#0a0916;
  border-color:rgba(233,228,255,.95);
  box-shadow:0 14px 46px -16px rgba(160,146,255,.95), 0 0 0 1px rgba(255,255,255,.25) inset;
}
.btn:hover::before{ opacity:1; }
.btn:active{ transform:scale(.97); }
.btn--ghost{ background:transparent; }

/* ── reveal system ───────────────────────────────────────── */

[data-reveal]{
  opacity:0;
  transform:translateY(22px);
  filter:blur(8px);
  transition:opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out), filter 1.1s var(--ease-out);
  transition-delay:var(--d, 0ms);
}
[data-reveal].is-in{ opacity:1; transform:none; filter:blur(0); }

.word{
  display:inline-block;
  opacity:0;
  transform:translateY(.5em);
  filter:blur(10px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out);
  transition-delay:var(--d, 0ms);
}
.is-in .word, .word.is-in{ opacity:1; transform:none; filter:blur(0); }

.ln{
  display:block;
  opacity:0;
  transform:translateY(14px);
  filter:blur(6px);
  transition:opacity .95s var(--ease-out), transform .95s var(--ease-out), filter .95s var(--ease-out);
  transition-delay:var(--d, 0ms);
}
.is-in .ln, .ln.is-in{ opacity:1; transform:none; filter:blur(0); }

/* ── hero ────────────────────────────────────────────────── */

.hero{
  position:relative;
  z-index:3;
  min-height:100vh;
  min-height:100svh;          /* svh: the hero never jumps when the URL bar collapses */
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:120px var(--gutter) 90px;
  gap:26px;
  overflow-x:clip;   /* orbit/rings bleed past the viewport — clip so the page never pans sideways */
}

.hero__orbit{
  position:absolute;
  top:50%; left:50%;
  width:min(78vw, 720px);
  aspect-ratio:1;
  transform:translate(-50%,-54%);
  pointer-events:none;
  opacity:.85;
}
.hero__ring{
  position:absolute; inset:0;
  border-radius:50%;
  border:1px solid rgba(207,198,255,.14);
  animation:spin 90s linear infinite;
}
.hero__ring::after{
  content:"";
  position:absolute;
  top:6%; left:50%;
  width:6px; height:6px;
  margin-left:-3px;
  border-radius:50%;
  background:#efeaff;
  box-shadow:0 0 14px 4px rgba(207,198,255,.75);
}
.hero__ring--2{
  inset:14%;
  border-color:rgba(207,198,255,.09);
  animation-duration:140s;
  animation-direction:reverse;
}
.hero__ring--2::after{
  top:auto; bottom:12%; left:14%;
  width:4px; height:4px;
  background:var(--ember);
  box-shadow:0 0 12px 3px rgba(232,215,176,.55);
}
.hero__eclipse{
  position:absolute;
  top:50%; left:50%;
  width:44%; aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle, rgba(10,9,30,.9) 30%, rgba(6,6,22,.35) 62%, transparent 72%);
  box-shadow:0 0 90px 30px rgba(74,60,160,.20), inset 0 0 60px rgba(0,0,0,.9);
  animation:breathe 12s ease-in-out infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes breathe{ 50%{ transform:translate(-50%,-50%) scale(1.05); } }

.hero__title{
  position:relative;
  margin:0;
  font-family:var(--serif);
  font-weight:300;
  line-height:.98;
  letter-spacing:.02em;
  text-transform:uppercase;
  display:flex;
  flex-direction:column;
  gap:.06em;
}
.hero__line{ display:block; font-size:clamp(28px, 6.4vw, 72px); white-space:nowrap; }
.hero__line--lg{
  font-size:clamp(40px, 11vw, 132px);
  letter-spacing:.045em;
  color:#e7e2ff;
  text-shadow:0 0 70px rgba(160,146,255,.35);
}
/* gradient painted per letter — background-clip:text on the parent
   does not paint through the inline-block letter spans */
.hero__line--lg .ltr{
  background:linear-gradient(180deg, #ffffff 0%, #ded8ff 45%, #9d92d8 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
.hero__title .ltr{
  display:inline-block;
  opacity:0;
  transform:translateY(.42em) rotateX(38deg);
  filter:blur(14px);
  transition:opacity 1.2s var(--ease-out), transform 1.2s var(--ease-out), filter 1.2s var(--ease-out);
  transition-delay:var(--d, 0ms);
  will-change:transform,opacity;
}
.hero__title.is-in .ltr{ opacity:1; transform:none; filter:blur(0); }

.hero__rule{ width:min(320px, 60vw); height:1px; background:rgba(255,255,255,.07); overflow:hidden; }
.hero__rule span{
  display:block; height:100%; width:100%;
  background:linear-gradient(90deg, transparent, rgba(207,198,255,.8), transparent);
  transform:translateX(-100%);
  animation:ruleSweep 4.5s var(--ease) infinite;
}
@keyframes ruleSweep{ 0%{ transform:translateX(-100%) } 55%,100%{ transform:translateX(100%) } }

.hero__sub{
  margin:0;
  max-width:34rem;
  font-family:var(--serif);
  font-size:clamp(17px, 2.1vw, 22px);
  font-style:italic;
  font-weight:300;
  line-height:1.75;
  color:var(--ink-70);
}

.hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  justify-content:center;
  margin-top:8px;
}

.hero__when{
  margin:0;
  font-size:10px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:rgba(207,198,255,.6);
}

.scroll-cue{
  position:absolute;
  bottom:calc(34px + var(--sab)); left:50%;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:12px;
  opacity:.55;
  transition:opacity .4s ease;
}
.scroll-cue:hover{ opacity:1; }
.scroll-cue__line{
  width:1px; height:56px;
  background:linear-gradient(180deg, transparent, rgba(207,198,255,.7));
  overflow:hidden; position:relative;
}
.scroll-cue__line::after{
  content:"";
  position:absolute; left:0; top:-40%;
  width:100%; height:40%;
  background:#fff;
  animation:cueDrop 2.4s var(--ease) infinite;
}
@keyframes cueDrop{ 0%{ top:-40% } 70%,100%{ top:110% } }
.scroll-cue__label{
  font-size:9px;
  letter-spacing:.5em;
  text-transform:uppercase;
  color:var(--ink-45);
}

/* ── overture ────────────────────────────────────────────── */

.overture{
  position:relative;
  z-index:3;
  min-height:78vh;
  min-height:78svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:34px;
  padding:12vh var(--gutter);
}
.overture__line{
  margin:0;
  max-width:24ch;
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(26px, 4.6vw, 54px);
  line-height:1.35;
  letter-spacing:.01em;
  color:rgba(236,233,228,.92);
}

/* ── chapter ─────────────────────────────────────────────── */

.chapter{
  position:relative;
  z-index:3;
  padding:8vh var(--gutter) 4vh;
  scroll-margin-top:76px;
}

#overture,#felt,#enter{ scroll-margin-top:76px; }

/* ── threshold: the sealed chapter ────────────────────── */

.threshold{
  position:relative;
  z-index:3;
  min-height:86vh;
  min-height:86svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:24px;
  padding:12vh var(--gutter);
  scroll-margin-top:76px;
}

.seal{
  position:relative;
  width:min(46vw, 260px);
  aspect-ratio:1;
  display:grid;
  place-items:center;
  margin-bottom:14px;
}
.seal__ring{
  position:absolute; inset:0;
  border-radius:50%;
  border:1px solid rgba(207,198,255,.22);
  animation:spin 60s linear infinite;
}
.seal__ring::after{
  content:"";
  position:absolute;
  top:4%; left:50%;
  width:6px; height:6px;
  margin-left:-3px;
  border-radius:50%;
  background:#efeaff;
  box-shadow:0 0 16px 5px rgba(207,198,255,.8);
}
.seal__ring--2{
  inset:16%;
  border-color:rgba(207,198,255,.14);
  animation-duration:96s;
  animation-direction:reverse;
}
.seal__ring--2::after{
  top:auto; bottom:8%; left:18%;
  width:4px; height:4px;
  background:var(--ember);
  box-shadow:0 0 12px 4px rgba(232,215,176,.6);
}
.seal__core{
  position:absolute;
  width:56%; aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle at 42% 38%, rgba(30,26,72,.95), rgba(6,6,22,.98) 62%);
  box-shadow:
    inset 0 0 40px rgba(0,0,0,.9),
    0 0 70px 12px rgba(96,80,210,.28);
  animation:sealBreathe 7s ease-in-out infinite;
}
@keyframes sealBreathe{
  50%{ box-shadow: inset 0 0 40px rgba(0,0,0,.9), 0 0 96px 22px rgba(120,104,230,.42); }
}
.seal__lock{
  position:relative;
  width:34px; height:34px;
  color:rgba(224,216,255,.85);
  filter:drop-shadow(0 0 12px rgba(160,146,255,.8));
}

.threshold__title{
  margin:0;
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(34px, 6vw, 66px);
  line-height:1.08;
  color:#f3f1ec;
  text-shadow:0 0 60px rgba(160,146,255,.22);
}
.threshold__note{
  margin:0;
  max-width:38ch;
  font-family:var(--serif);
  font-size:clamp(16px, 2vw, 19px);
  font-style:italic;
  line-height:1.85;
  color:rgba(236,233,228,.6);
}
.threshold__actions{ margin-top:6px; }
.threshold__hint{
  margin:0;
  font-size:9.5px;
  letter-spacing:.44em;
  text-transform:uppercase;
  color:rgba(236,233,228,.32);
}

/* ── reader: the chapter, opened on click ─────────────── */

.reader{
  position:fixed; inset:0;
  z-index:80;
  overflow-y:auto;
  overscroll-behavior:contain;
  opacity:0;
  transition:opacity .85s var(--ease);
  /* fully opaque-on-translucent gradient, deliberately WITHOUT backdrop-filter:
     a full-viewport backdrop blur repaints on every scroll frame and janks. */
  background:
    radial-gradient(52% 40% at 50% 44%, rgba(163,148,255,.16), rgba(126,112,236,.05) 52%, transparent 74%),
    linear-gradient(180deg, rgba(1,1,10,.965) 0%, rgba(2,2,14,.982) 55%, rgba(1,1,10,.99) 100%);
}
.reader.is-open{ opacity:1; }
html.is-reading{ overflow:hidden; }
html.is-veiled{ overflow:hidden; }
body.is-reading .progress,
body.is-reading .nav{ opacity:0; pointer-events:none; }
/* freeze the ambient layers while the chapter is open — they are hidden behind
   the reader anyway, and stopping them frees the frame budget for scrolling */
body.is-reading .grain{ animation:none; }
body.is-reading .nebula{ animation-play-state:paused; }

.reader__bar{
  position:sticky; top:0;
  z-index:3;
  display:flex; align-items:center; justify-content:space-between;
  gap:18px;
  padding:calc(18px + var(--sat)) calc(var(--gutter) + var(--sar)) 18px calc(var(--gutter) + var(--sal));
  /* no backdrop-filter here either — it sits on the scrolling layer */
  background:linear-gradient(180deg, rgba(1,1,10,.99) 0%, rgba(1,1,10,.94) 62%, rgba(1,1,10,0) 100%);
}
.reader__where{
  font-size:9.5px;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:rgba(207,198,255,.72);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.reader__close{
  display:inline-flex; align-items:center; gap:10px;
  padding:9px 20px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.04);
  font-size:9.5px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:rgba(236,233,228,.8);
  cursor:pointer;
  transition:all .4s var(--ease);
  will-change:transform;
}
.reader__close svg{ width:13px; height:13px; }
.reader__close:hover{
  color:#0a0916;
  background:linear-gradient(135deg,#f6f3ff,#ddd4ff 60%,#b6a7ff);
  border-color:rgba(233,228,255,.95);
  box-shadow:0 12px 40px -16px rgba(160,146,255,.95);
}
.reader__progress{
  position:absolute; left:0; right:0; bottom:0;
  height:1px;
  background:rgba(255,255,255,.06);
}
.reader__progress i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg, rgba(207,198,255,.2), rgba(207,198,255,.95));
  box-shadow:0 0 12px rgba(207,198,255,.7);
  transition:width .12s linear;
}

.reader__page{
  padding:6vh calc(var(--gutter) + var(--sar)) calc(4vh + var(--sab)) calc(var(--gutter) + var(--sal));
}

.bloom{
  position:fixed; inset:0;
  z-index:90;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.95), rgba(196,183,255,.5) 32%, rgba(120,104,230,.12) 58%, transparent 74%);
}
.bloom.is-flash{ animation:bloomFlash 1s var(--ease-out) both; }
@keyframes bloomFlash{
  0%{ opacity:0; transform:scale(.35); }
  18%{ opacity:.9; transform:scale(.8); }
  100%{ opacity:0; transform:scale(1.9); }
}

/* ── prelude: the circular card that guards the chapter ─ */

.prelude{
  position:fixed; inset:0;
  z-index:85;
  display:grid;
  place-items:center;
  padding:calc(18px + var(--sat)) calc(18px + var(--sar)) calc(18px + var(--sab)) calc(18px + var(--sal));
  opacity:0;
  transition:opacity .6s var(--ease);
}
.prelude.is-open{ opacity:1; }
.prelude__veil{
  position:absolute; inset:0;
  background:radial-gradient(circle at 50% 50%, rgba(6,5,24,.55), rgba(1,1,10,.9) 78%);
}
.prelude__card{
  position:relative;
  width:min(86vw, calc(100vh - 48px - var(--sat) - var(--sab)), 560px);
  width:min(86vw, calc(100svh - 48px - var(--sat) - var(--sab)), 560px);
  aspect-ratio:1;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:radial-gradient(circle at 42% 34%, rgba(19,16,50,.95), rgba(4,4,15,.985) 74%);
  border:1px solid rgba(207,198,255,.26);
  box-shadow:
    inset 0 0 80px rgba(0,0,0,.75),
    0 0 110px rgba(96,80,210,.35),
    0 40px 120px -40px rgba(0,0,0,.9);
  opacity:0;
  transform:scale(.86) translateY(16px);
  transition:opacity .7s var(--ease-out), transform .9s var(--ease-out);
  animation:preludeGlow 7s ease-in-out infinite;
}
.prelude.is-open .prelude__card{ opacity:1; transform:none; }
@keyframes preludeGlow{
  50%{ box-shadow:
    inset 0 0 80px rgba(0,0,0,.75),
    0 0 150px 26px rgba(120,104,230,.5),
    0 40px 120px -40px rgba(0,0,0,.9); }
}
.prelude__ring{
  position:absolute; inset:3.5%;
  border-radius:50%;
  border:1px solid rgba(207,198,255,.2);
  animation:spin 70s linear infinite;
}
.prelude__ring::after{
  content:"";
  position:absolute; top:5%; left:50%;
  width:6px; height:6px;
  margin-left:-3px;
  border-radius:50%;
  background:#efeaff;
  box-shadow:0 0 16px 5px rgba(207,198,255,.8);
}
.prelude__ring--2{
  inset:10%;
  border-color:rgba(207,198,255,.12);
  animation-duration:110s;
  animation-direction:reverse;
}
.prelude__ring--2::after{
  top:auto; bottom:9%; left:20%;
  width:4px; height:4px;
  margin-left:0;
  background:var(--ember);
  box-shadow:0 0 12px 4px rgba(232,215,176,.6);
}
.prelude__inner{
  position:relative;
  z-index:1;
  width:74%;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:14px;
}
.prelude__eyebrow{ font-size:9.5px; color:rgba(216,208,255,.85); }
.prelude__title{
  margin:0;
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(26px, 5vw, 36px);
  line-height:1.08;
  color:#f3f1ec;
  text-shadow:0 0 46px rgba(160,146,255,.3);
}
.prelude__text{
  margin:0;
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(15.5px, 3.4vw, 20px);
  line-height:1.68;
  letter-spacing:.005em;
  color:rgba(244,242,237,.94);
  text-shadow:0 0 22px rgba(170,158,255,.25);
}
.prelude__btn{
  padding:14px 26px;
  font-size:10.5px;
  letter-spacing:.22em;
  white-space:nowrap;
  margin-top:6px;
  color:rgba(244,242,237,.95);
  border-color:rgba(255,255,255,.24);
}
.chapter__head{
  max-width:var(--col);
  margin:0 auto 8vh;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:22px;
}
.chapter__title{
  margin:0;
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(38px, 7vw, 74px);
  line-height:1.06;
  letter-spacing:.015em;
  color:#f3f1ec;
  text-shadow:0 0 60px rgba(160,146,255,.18);
}
.chapter__rule{
  display:block;
  width:120px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(207,198,255,.55), transparent);
}

.chapter__body{
  max-width:var(--col);
  margin:0 auto;
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(20px, 2.5vw, 25px);
  line-height:2;
  color:rgba(240,237,232,.92);
  letter-spacing:.005em;
}

/* read-along spotlight: --lit is written by the scroll loop (0 = far from the
   reading band, 1 = the line you are on). Falls back to fully lit without JS. */
.chapter__body p{
  margin:0 0 1.8em;
  color:rgba(245,242,237, calc(.42 + .58 * var(--lit, 1)));
  /* values are written every scroll frame — no transition, so they track the
     scroll position exactly instead of lagging behind it */
  text-shadow:
    0 0 calc(var(--lit, 1) * 30px) rgba(196,183,255, calc(var(--lit, 1) * .6));
}

.verse{ white-space:pre-line; }

.drop > .ln:first-child::first-letter,
.drop::first-letter{
  float:left;
  font-size:3.5em;
  line-height:.82;
  padding:.06em .12em 0 0;
  color:#f4f2ff;
  text-shadow:0 0 34px rgba(160,146,255,.55);
}

.prose.emphasis{
  font-style:italic;
  color:rgba(255,253,249, calc(.6 + .4 * var(--lit, 1)));
  letter-spacing:.01em;
}

.divider{
  text-align:center;
  color:rgba(207,198,255,.4);
  letter-spacing:.6em;
  font-size:15px;
  margin:3.4em 0 !important;
}

.echo{
  margin:2.6em 0 !important;
  text-align:center;
  font-size:clamp(26px, 4vw, 40px);
  line-height:1.4;
  font-style:italic;
  font-weight:300;
  color:rgba(255,255,255, calc(.62 + .38 * var(--lit, 1)));
  text-shadow:0 0 calc(24px + var(--lit, 1) * 52px) rgba(174,160,255, calc(.3 + var(--lit, 1) * .55));
  letter-spacing:.01em;
}
.echo--final{
  font-size:clamp(30px, 5vw, 50px);
  text-transform:none;
  padding-bottom:2vh;
}

.chapter__foot{
  max-width:var(--col);
  margin:10vh auto 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:22px;
  text-align:center;
}
.chapter__closes{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(18px, 2.3vw, 22px);
  font-style:italic;
  line-height:1.8;
  color:var(--ink-45);
}

/* ── panels (forms) ──────────────────────────────────────── */

.felt,.enter{
  position:relative;
  z-index:3;
  padding:14vh var(--gutter);
}
.enter{ padding-top:6vh; }

.panel{
  max-width:56rem;
  margin:0 auto;
  padding:clamp(34px, 6vw, 72px);
  border:1px solid rgba(255,255,255,.1);
  border-radius:2px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.022));
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  box-shadow:
    0 40px 120px -60px rgba(110,94,220,.75),
    inset 0 1px 0 rgba(255,255,255,.07);
  position:relative;
  overflow:hidden;
}
.panel::after{
  content:"";
  position:absolute;
  top:0; left:50%;
  width:60%; height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg, transparent, rgba(207,198,255,.5), transparent);
}
.panel--center{ text-align:center; }

.panel__head{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  margin-bottom:46px;
  text-align:center;
}
.panel__title{
  margin:0;
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(32px, 5vw, 54px);
  line-height:1.1;
  color:#f3f1ec;
}
.panel__sub{
  margin:0;
  max-width:44ch;
  font-size:14.5px;
  line-height:1.9;
  color:rgba(236,233,228,.72);
}

/* ── forms ───────────────────────────────────────────────── */

.form{ display:flex; flex-direction:column; gap:30px; }

.chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
}
.chip{
  padding:9px 18px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.035);
  font-size:10.5px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:rgba(236,233,228,.72);
  cursor:pointer;
  transition:all .4s var(--ease);
}
.chip:hover{ border-color:rgba(207,198,255,.6); color:#fff; transform:translateY(-2px); }
.chip.is-on{
  background:rgba(207,198,255,.13);
  border-color:rgba(207,198,255,.7);
  color:#efeaff;
  box-shadow:0 0 26px -8px rgba(160,146,255,.9);
}

.form__row{ display:grid; gap:30px; }
.form__row--2{ grid-template-columns:1fr 1fr; }

.field{ display:flex; flex-direction:column; gap:10px; text-align:left; }
.field__label{
  font-size:10px;
  letter-spacing:.4em;
  text-transform:uppercase;
  color:rgba(207,198,255,.78);
}
.field__label em{ font-style:normal; letter-spacing:.16em; color:rgba(236,233,228,.4); text-transform:none; }

.field input,
.field textarea{
  width:100%;
  padding:12px 2px 14px;
  background:rgba(255,255,255,.022);
  border:none;
  border-bottom:1px solid rgba(255,255,255,.24);
  font-family:var(--serif);
  font-size:19px;
  font-weight:300;
  color:#f6f4f0;
  outline:none;
  transition:border-color .45s var(--ease), box-shadow .45s var(--ease), background-color .45s var(--ease);
  resize:vertical;
  padding-left:10px;
  padding-right:10px;
}
.field textarea{ line-height:1.8; min-height:110px; }
.field input::placeholder,
.field textarea::placeholder{ color:rgba(236,233,228,.4); font-style:italic; }
.field input:focus,
.field textarea:focus{
  border-bottom-color:rgba(214,204,255,.95);
  background:rgba(255,255,255,.045);
  box-shadow:0 14px 34px -28px rgba(207,198,255,1);
}
.field.is-bad input,
.field.is-bad textarea{ border-bottom-color:rgba(255,120,120,.7); }

.field__error{
  font-size:11px;
  letter-spacing:.1em;
  color:rgba(255,140,140,.85);
  min-height:0;
}
.field__error:empty{ display:none; }

.check{
  display:flex;
  gap:14px;
  align-items:flex-start;
  cursor:pointer;
  text-align:left;
}
.check input{ position:absolute; opacity:0; width:0; height:0; }
.check__box{
  flex:0 0 auto;
  width:17px; height:17px;
  margin-top:3px;
  border:1px solid rgba(255,255,255,.4);
  border-radius:2px;
  position:relative;
  background:rgba(255,255,255,.04);
  transition:all .35s var(--ease);
}
.check__box::after{
  content:"";
  position:absolute;
  inset:3px;
  background:radial-gradient(circle, #fff, #b9a7ff);
  transform:scale(0);
  transition:transform .35s var(--ease-out);
}
.check input:checked + .check__box{ border-color:rgba(207,198,255,.8); box-shadow:0 0 20px -6px rgba(160,146,255,.9); }
.check input:checked + .check__box::after{ transform:scale(1); }
.check input:focus-visible + .check__box{ outline:1px solid rgba(207,198,255,.7); outline-offset:3px; }
.check__text{ font-size:13px; line-height:1.8; color:rgba(236,233,228,.72); }

.form__actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:18px 26px;
}
.panel--center .form__actions{ justify-content:center; }
.form__aside{
  margin:0;
  font-size:10px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:rgba(207,198,255,.6);
}

.form.is-sending .btn{ pointer-events:none; opacity:.55; }

.form__done{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  text-align:center;
  animation:doneIn 1s var(--ease-out) both;
}
@keyframes doneIn{ from{ opacity:0; transform:translateY(20px); filter:blur(10px);} }
.form__done h3{
  margin:0;
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(26px,4vw,38px);
  color:#f3f1ec;
}
.form__done p{
  margin:0;
  max-width:36ch;
  font-size:14px;
  line-height:1.9;
  color:rgba(236,233,228,.7);
}
.form__done-mark{
  width:52px; height:52px;
  border-radius:50%;
  border:1px solid rgba(207,198,255,.8);
  position:relative;
  box-shadow:0 0 44px -8px rgba(160,146,255,1);
  background:rgba(255,255,255,.04);
}
.form__done-mark::after{
  content:"";
  position:absolute;
  top:50%; left:50%;
  width:9px; height:16px;
  border-right:1.5px solid #efeaff;
  border-bottom:1.5px solid #efeaff;
  transform:translate(-50%,-62%) rotate(42deg);
}

/* ── footer ──────────────────────────────────────────────── */

.footer{
  position:relative;
  z-index:3;
  padding:9vh var(--gutter) calc(7vh + var(--sab));
  border-top:1px solid rgba(255,255,255,.05);
}
.footer__inner{
  max-width:70rem;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  text-align:center;
}
.footer__brand{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(20px,3vw,28px);
  font-weight:300;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-70);
}
.footer__when{
  margin:0;
  font-size:10px;
  letter-spacing:.38em;
  text-transform:uppercase;
  color:rgba(207,198,255,.66);
}
.footer__meta{
  margin:0;
  font-size:10px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:rgba(236,233,228,.18);
}

/* ── responsive ──────────────────────────────────────────── */

@media (max-width: 860px){
  .nav__links{ display:none; }
  .nav__toggle{ display:block; }
  .nav{ padding-top:calc(16px + var(--sat)); padding-bottom:16px; }
  .form__row--2{ grid-template-columns:1fr; }
  .hero__orbit{ width:120vw; opacity:.6; }
  .panel{ padding:32px 22px; }
  .chapter__body{ font-size:19px; line-height:1.9; }
  .reader__bar{ padding:calc(14px + var(--sat)) calc(var(--gutter) + var(--sar)) 14px calc(var(--gutter) + var(--sal)); }
  .reader__where{ font-size:8.5px; letter-spacing:.3em; }
  .reader__close{ padding:13px 20px; }        /* ≥44px tall for thumbs */
  .seal{ width:min(58vw, 240px); }
  .chip{ padding:12px 16px; }                 /* 34px → 44px touch target */
  .felt{ padding-top:10vh; }
}

@media (max-width: 520px){
  .btn{ padding:14px 24px; font-size:10px; letter-spacing:.24em; }
  .hero__actions{ flex-direction:column; width:100%; max-width:320px; }
  .hero__actions .btn{ width:100%; }
  .hero__sub br{ display:none; }              /* let the line break where the screen says so */
  .chips{ gap:8px; }
  .chip{ padding:13px 15px; font-size:9.5px; letter-spacing:.14em; }   /* ≥44px */
  .prelude__card{ width:min(94vw, calc(100vh - 36px - var(--sat) - var(--sab))); }
  .prelude__card{ width:min(94vw, calc(100svh - 36px - var(--sat) - var(--sab))); }
  /* every size inside the circle tracks the circle, so the card fits any phone */
  .prelude__inner{ width:74%; gap:clamp(7px, 2.4vw, 12px); }
  .prelude__eyebrow{ display:none; }
  .prelude__title{ font-size:clamp(20px, 6.2vw, 26px); }
  .prelude__text{ font-size:clamp(13px, 4.2vw, 17px); line-height:1.62; }
  .prelude__btn{ padding:clamp(9px, 3vw, 13px) clamp(16px, 5vw, 24px); font-size:clamp(9px, 2.7vw, 10.5px); letter-spacing:.16em; margin-top:2px; }
  .hero__when,.footer__when{ font-size:9px; letter-spacing:.16em; }
  .eyebrow{ letter-spacing:.4em; }
}

@media (max-height: 560px){
  .prelude__eyebrow{ display:none; }
  /* short viewports (landscape phones): every size inside the circle takes the
     smaller of the width- and height-driven values, so the card content stays
     inside both the circle and the screen — and the BEGIN button stays reachable */
  .prelude__card{ max-height:calc(100svh - 36px - var(--sat) - var(--sab)); }
  .prelude__inner{ gap:min(clamp(7px, 2.4vw, 12px), clamp(6px, 2vh, 10px)); }
  .prelude__title{ font-size:min(clamp(20px, 6.2vw, 26px), clamp(20px, 6.6vh, 26px)); }
  .prelude__text{ font-size:min(clamp(13px, 4.2vw, 17px), clamp(13px, 4.2vh, 17px)); line-height:1.58; }
  .prelude__btn{
    padding:min(clamp(9px, 3vw, 13px), clamp(8px, 2.8vh, 13px)) min(clamp(16px, 5vw, 24px), clamp(14px, 4.5vh, 24px));
    font-size:min(clamp(9px, 2.7vw, 10.5px), clamp(9px, 2.6vh, 10.5px));
    letter-spacing:.16em; margin-top:2px;
  }
  .hero{ padding-top:96px; padding-bottom:64px; gap:18px; }
  .overture{ padding-top:8vh; padding-bottom:8vh; gap:24px; }
  .threshold{ padding-top:8vh; padding-bottom:8vh; }
  .menu__when{ display:none; }
}

/* ── reduced motion / touch ──────────────────────────────── */

@media (hover: none), (pointer: coarse){
  .cursor-dot,.cursor-ring{ display:none; }

  /* phones repaint these every frame — keep the look, drop the cost */
  #cosmos{ filter:none; }
  .grain{ animation:none; }
  .nav.is-solid{ backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px); }

  /* touch never un-hovers: a tapped button must not stay lit */
  .btn:hover{ color:var(--ink-70); border-color:var(--ink-12); box-shadow:none; }
  .btn:hover::before{ opacity:0; }
  .chip:hover{ border-color:rgba(255,255,255,.16); color:rgba(236,233,228,.72); transform:none; }
  .chip:active{ transform:scale(.96); }
  .reader__close:hover{ color:rgba(236,233,228,.8); background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.16); box-shadow:none; }
  .scroll-cue:hover{ opacity:.55; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  [data-reveal],.word,.ln,.hero__title .ltr{ opacity:1 !important; transform:none !important; filter:none !important; }
}