/* ============================================================
   SYNCHRONEE CITY — Celestial token system
   Deliberately single-world: a dark cinematic ground with one
   luminous editorial passage inside it. Every colour is painted
   explicitly so the page never borrows the host theme.
   ============================================================ */
:root{
  /* violet grounds — indigo illuminated from within */
  --void:#1E1B5E;          /* deep indigo-violet, not black */
  --navy:#2B2680;          /* stardust violet */
  --sapphire:#3B2E9E;      /* cosmic indigo */
  --nebula:#7A4BA8;        /* amethyst */
  --orchid:#D58BE8;        /* light orchid */
  --cyan:#6EC9E8;          /* icy signal */
  --sand:#F6D48F;          /* warm alignment */
  /* signal */
  --indigo:#6D4BF0;        /* ONEE indigo child, shifted violet */
  --violet:#A855F7;
  --magenta:#D96BFF;
  --twilight:#8B78D7;
  --periwinkle:#B6A8F0;
  --moonstone:#C9D4FF;
  /* light */
  --pearl:#EDE6FA;
  --moonlit:#F8F5FC;
  --lavender:#D8CDEE;
  --ice:#CFEFFF;
  --gold:#F6D48F;          /* alignment only */
  --gold-hi:#FFEBC4;
  /* text */
  --tx:#EDE6FA;
  --tx-mute:#C4B6E4;
  --tx-faint:#A79BDA;
  --rule:rgba(182,168,240,.22);
  --rule-lt:rgba(182,168,240,.16);

  --ff-display:"Cinzel",Georgia,"Times New Roman",serif;
  --ff-edit:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --ff-ui:"Jost","Helvetica Neue",Helvetica,Arial,sans-serif;

  --gut:clamp(1.4rem,5vw,5rem);
  --measure:34rem;
  color-scheme:dark;
  --wm:url("/img/a-970e920aa3.webp");
}

*,*::before,*::after{box-sizing:border-box}
/* A mask is a shape, never a pattern. Without this, every softened
   edge on the page repeats itself into a grid of tiles. */
[style*="mask"],.stg img,.stg .fig,.foot-lockup,.bloom .gl,.meet .h,
.chapter .plx,.lit header.nav,.mark img,#celest .moon{
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-position:center;mask-position:center;
}
body{
  margin:0;
  background:var(--void);
  color:var(--tx);
  font-family:var(--ff-ui);
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%}
[hidden]{display:none!important}
::selection{background:rgba(90,79,224,.45);color:#fff}

a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-weight:400;text-wrap:balance}
p{margin:0}

/* focus — visible, quiet, never removed */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
  outline:1px solid var(--moonstone);
  outline-offset:6px;
  border-radius:1px;
}

.skip{
  position:fixed;top:-100px;left:1rem;z-index:900;
  background:var(--navy);color:var(--tx);
  padding:.7rem 1.1rem;border:1px solid var(--rule);
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  transition:top .2s;
}
.skip:focus{top:1rem}

/* ---------- WebGL stage ---------- */
#stage{
  position:fixed;inset:0;z-index:0;
  pointer-events:none;
}
#gl{display:block;width:100%;height:100%}
.no-webgl #gl{display:none}

/* static poster fallback — a composed still of the same world */
#poster{
  position:absolute;inset:0;display:none;
  background:
    radial-gradient(58% 42% at 50% 22%, rgba(168,85,247,.26), transparent 62%),
    radial-gradient(90% 55% at 50% 118%, rgba(58,26,122,.85), transparent 70%),
    radial-gradient(120% 80% at 50% 45%, rgba(21,10,51,.92), var(--void) 72%),
    var(--void);
}
.no-webgl #poster{display:block}
#poster::before{
  content:"";position:absolute;left:50%;top:8%;width:1px;height:74%;
  transform:translateX(-50%);
  background:linear-gradient(to bottom,transparent,rgba(255,196,107,.5) 18%,rgba(217,107,255,.85) 50%,rgba(201,212,255,.4) 76%,transparent);
  filter:blur(.4px);
  animation:beam 9s ease-in-out infinite;
}
#poster::after{
  content:"";position:absolute;left:50%;top:34%;
  width:min(52vw,420px);aspect-ratio:1;transform:translate(-50%,-30%);
  border-radius:50%;
  background:radial-gradient(circle,rgba(217,107,255,.18),rgba(109,75,240,.09) 45%,transparent 68%);
  animation:beam 13s ease-in-out infinite reverse;
}
@keyframes beam{0%,100%{opacity:.55}50%{opacity:1}}

/* ---------- preloader ---------- */
#pre{
  position:fixed;inset:0;z-index:500;background:var(--void);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2.4rem;
  /* the loader does not cut away: it dissolves outward while the figure
     is already gathering behind it, so the two moments are one move */
  transition:opacity 1.9s cubic-bezier(.32,0,.24,1) .30s,
             transform 2.4s cubic-bezier(.32,0,.24,1) .30s,
             filter 1.9s cubic-bezier(.32,0,.24,1) .30s;
}
#pre.done{opacity:0;pointer-events:none;transform:scale(1.06);filter:blur(7px)}
#pre.gone{display:none}
.pre-label{
  font-family:var(--ff-display);
  font-size:.64rem;letter-spacing:.52em;text-transform:uppercase;
  color:var(--periwinkle);padding-left:.52em;
  text-shadow:0 0 22px rgba(182,168,240,.45);
}
/* progress is a hairline that tells the truth, never a field of dots */
.pre-line{
  position:relative;width:min(46vw,22rem);height:1px;
  background:rgba(169,158,229,.16);overflow:visible;
}
.pre-line i{
  display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:0 50%;
  will-change:transform;
  background:linear-gradient(90deg,rgba(109,75,240,.5),var(--moonstone) 62%,var(--gold-hi));
  box-shadow:0 0 10px rgba(199,215,255,.55),0 0 26px rgba(109,75,240,.35);
  transition:transform .55s cubic-bezier(.3,.8,.2,1);
}
#pre.done .pre-line{transition:opacity .6s,transform 1s cubic-bezier(.7,0,.2,1)}
#pre.done .pre-line{opacity:0;transform:scaleY(3)}
.pre-pct{
  font-family:var(--ff-ui);font-weight:200;
  font-size:.62rem;letter-spacing:.34em;color:var(--tx-mute);
  font-variant-numeric:tabular-nums;
}
#pre.done .pre-label,#pre.done .pre-pct{opacity:0;transition:opacity .5s}
/* the threshold: one tap that is also the browser's permission for sound */
#pre.ask .pre-line,#pre.ask .pre-pct{opacity:0;transition:opacity .6s}
#pre.ask .pre-label{opacity:.0;transition:opacity .6s}
.gate{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:1.3rem;
  opacity:0;animation:gateIn 1.2s cubic-bezier(.3,.8,.2,1) .25s forwards;width:min(88vw,24rem);text-align:center}
.gate[hidden]{display:none}
#pre.done .gate{opacity:0;animation:none;transition:opacity .5s}
@keyframes gateIn{from{opacity:0;transform:translate(-50%,-44%)}to{opacity:1;transform:translate(-50%,-50%)}}
.gate-line{margin:0;font-family:var(--ff-edit);font-style:italic;font-weight:300;font-size:clamp(1.25rem,3.6vw,1.6rem);color:var(--pearl);letter-spacing:.01em}
.gate-go{display:inline-flex;align-items:center;gap:.8rem;cursor:pointer;
  font-family:var(--ff-display);font-size:.72rem;letter-spacing:.38em;text-transform:uppercase;padding:1.05rem 1.9rem 1.05rem 2.2rem;
  color:var(--void);background:linear-gradient(100deg,var(--moonstone),var(--gold-hi));border:0;border-radius:999px!important;
  box-shadow:0 0 0 1px rgba(255,235,196,.4),0 0 38px rgba(246,212,143,.35),0 0 80px rgba(109,75,240,.35);transition:transform .3s,box-shadow .3s}
.gate-go:hover,.gate-go:focus-visible{transform:translateY(-1px);box-shadow:0 0 0 1px rgba(255,235,196,.7),0 0 46px rgba(246,212,143,.55),0 0 96px rgba(109,75,240,.45);outline:none}
.gate-go .bars{display:flex;align-items:flex-end;gap:2px;height:12px}
.gate-go .bars i{width:1.5px;height:4px;background:currentColor;display:block;animation:eq 1.5s ease-in-out infinite}
.gate-go .bars i:nth-child(2){animation-delay:.28s}.gate-go .bars i:nth-child(3){animation-delay:.62s}.gate-go .bars i:nth-child(4){animation-delay:.41s}
.gate-quiet{background:none;border:0;cursor:pointer;font-family:var(--ff-ui);font-weight:300;font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--tx-faint);padding:.6rem 1rem}
.gate-quiet:hover,.gate-quiet:focus-visible{color:var(--periwinkle);outline:none}
.gate button:disabled{pointer-events:none}
/* ---------- glitter arrival ---------- */
#pre{background:radial-gradient(60rem 40rem at 50% 40%,#3B2E9E 0%,#2B2680 38%,#1E1B5E 75%)}
.pre-label{font-size:.78rem;letter-spacing:.46em;color:var(--pearl);transition:opacity .45s,filter .45s,transform .45s;
  text-shadow:0 0 18px rgba(201,212,255,.75),0 0 42px rgba(217,107,255,.45)}
.pre-label.swap{opacity:0;filter:blur(6px);transform:translateY(4px)}
.pre-label.sign{font-family:var(--ff-edit);font-style:italic;text-transform:none;letter-spacing:.06em;font-size:clamp(1.5rem,4.4vw,2.1rem);
  color:var(--gold-hi);text-shadow:0 0 22px rgba(255,235,196,.8),0 0 60px rgba(246,212,143,.5)}
.pre-line{height:3px;width:min(70vw,26rem);border-radius:3px;background:rgba(201,212,255,.14);box-shadow:0 0 18px rgba(109,75,240,.35) inset}
.pre-line i{border-radius:3px;background:linear-gradient(90deg,#6D4BF0,#D96BFF 30%,#C9D4FF 55%,#FFEBC4 75%,#D96BFF 90%,#6EC9E8);
  background-size:200% 100%;animation:shimmer 1.4s linear infinite;
  box-shadow:0 0 12px rgba(217,107,255,.9),0 0 30px rgba(201,212,255,.6),0 0 60px rgba(109,75,240,.6);transition:transform .25s linear}
@keyframes shimmer{to{background-position:-200% 0}}
.pre-spark{position:absolute;top:50%;left:0;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,#fff 0,#FFEBC4 25%,rgba(217,107,255,.6) 50%,transparent 70%);
  box-shadow:0 0 22px 6px rgba(255,235,196,.55);transition:left .25s linear;animation:twinkle .6s ease-in-out infinite alternate}
@keyframes twinkle{from{transform:scale(.7) rotate(0)}to{transform:scale(1.25) rotate(45deg)}}
#preglitter{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.pre-pct{color:var(--periwinkle)}
#pre.done #preglitter{opacity:0;transition:opacity .8s}
/* off-screen sections stop animating; they resume the moment they return */
.is-off,.is-off *{animation-play-state:paused!important}
/* lite tier: the same world, lighter on the GPU */
html.lite *{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html.lite .orb-glow,html.lite .pre-sheen{animation:none!important;opacity:0!important}
html.lite #pre .pre-stack,html.lite .comm-pane{background:rgba(30,27,94,.82)!important}

/* phones: keep the magic, drop the costly per-frame compositing */
@media (pointer:coarse){
  
  .hero-logo{will-change:opacity}
  #pre .pre-stack{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(30,27,94,.72)}
  .pre-bg{display:none}
  .hero-hands{will-change:opacity}
}
/* effects that are out of view stop drawing */
html.hero-off .hero-logo::after,html.hero-off 
html.hero-off .hero-logo{mix-blend-mode:normal}

/* hero background: the cosmic hands at 80%, softened behind the words so text leads */
#cine .chapter[data-ch="0"]{position:relative;isolation:isolate}
.hero-hands{position:absolute;inset:0;z-index:-1;pointer-events:none;background:center/cover no-repeat;opacity:0;transition:opacity 1.8s ease .2s}
html.warm .hero-hands{background-image:url("/img/portal-hands.webp")}
html.arrived .hero-hands{opacity:.8}
.hero-hands::after{content:"";position:absolute;inset:0;
  background:radial-gradient(60% 55% at 50% 52%,rgba(30,27,94,.62),rgba(30,27,94,.28) 60%,rgba(30,27,94,.1) 85%),
  linear-gradient(180deg,rgba(30,27,94,.35),transparent 22%,transparent 72%,rgba(30,27,94,.9))}
#cine .chapter[data-ch="0"] .tfs{filter:drop-shadow(0 2px 8px rgba(12,10,40,.9)) drop-shadow(0 0 24px rgba(12,10,40,.6))}#cine .chapter[data-ch="0"] .hero-sub{text-shadow:0 2px 6px rgba(12,10,40,.85),0 0 30px rgba(12,10,40,.7)}
@media(orientation:portrait){.hero-hands{background-position:58% 50%}}
@media(prefers-reduced-motion:reduce){.hero-hands{transition:none}}

/* hero logo art: melts into the sky (screen blend + feathered oval edge), with a glimmer sweep */
.hero-logo{position:relative;display:block;width:fit-content;mix-blend-mode:screen;margin:0 auto clamp(.4rem,1.6vh,1.2rem);
  opacity:0;transform:scale(.96);transition:opacity 1.6s ease .2s,transform 1.8s cubic-bezier(.2,.7,.15,1) .2s}
html.arrived .hero-logo{opacity:.69;transform:none}
.hero-logo img{display:block;height:auto;width:min(56vw,700px,calc(56vh * 1.515));width:min(56vw,700px,calc(56svh * 1.515));image-rendering:auto;filter:saturate(1.08)}




@media(orientation:portrait){.hero-logo img{width:min(96vw,460px,calc(54vh * .775));width:min(96vw,460px,calc(54svh * .775))}}
@media(prefers-reduced-motion:reduce){.hero-logo{transition:none;opacity:.69;transform:none}.hero-logo::after,}

/* ---------- community: choose a channel, catch the newsletter ---------- */
.comm{position:relative;padding:clamp(4.5rem,12vw,8rem) var(--gut);text-align:center;
  background:radial-gradient(48rem 30rem at 50% 30%,rgba(122,75,168,.32),transparent 70%)}
.comm-in{max-width:46rem;margin:0 auto}
.comm-h{font-family:var(--ff-display);font-weight:400;font-size:clamp(1.5rem,4.6vw,2.4rem);letter-spacing:.06em;line-height:1.25;color:var(--pearl);margin:1.2rem 0 .9rem}
.comm-sub{font-family:var(--ff-edit);font-size:clamp(1.08rem,2.6vw,1.3rem);line-height:1.55;color:var(--tx-mute);margin:0 auto 2.4rem;max-width:34rem}
.comm-pick{display:flex;align-items:center;justify-content:center;gap:clamp(.8rem,3vw,2rem);flex-wrap:wrap}
.comm-or{font-family:var(--ff-edit);font-style:italic;color:var(--tx-faint);font-size:1.2rem}
.comm-orb{position:relative;width:clamp(8.6rem,36vw,11rem);aspect-ratio:1;border-radius:50%;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;color:var(--pearl);
  background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.14),rgba(43,38,128,.55) 70%);
  border:1px solid rgba(201,212,255,.28);box-shadow:0 0 30px rgba(109,75,240,.25);transition:transform .35s,box-shadow .35s,border-color .35s}
.comm-orb svg{width:2.1rem;height:2.1rem;color:var(--c)}
.comm-orb b{font-family:var(--ff-display);font-weight:500;font-size:.82rem;letter-spacing:.24em;text-transform:uppercase}
.comm-orb small{font-family:var(--ff-ui);font-size:.66rem;letter-spacing:.08em;color:var(--tx-mute)}
.orb-glow{position:absolute;inset:-6px;border-radius:50%;border:1px solid var(--c);opacity:0;animation:orbRing 3s ease-out infinite}
.comm-orb:nth-of-type(2) .orb-glow{animation-delay:1.5s}
@keyframes orbRing{0%{transform:scale(.92);opacity:.6}100%{transform:scale(1.22);opacity:0}}
.comm-orb:hover,.comm-orb:focus-visible{transform:translateY(-3px);border-color:var(--c);box-shadow:0 0 44px color-mix(in srgb,var(--c) 45%,transparent);outline:none}
.comm-orb[aria-selected="true"]{border-color:var(--c);box-shadow:0 0 0 2px var(--c),0 0 54px color-mix(in srgb,var(--c) 55%,transparent);transform:scale(1.04)}
.comm-pick.chosen .comm-orb[aria-selected="false"]{opacity:.55;transform:scale(.94)}
.comm-pane{display:flex;align-items:center;justify-content:center;gap:1.6rem;flex-wrap:wrap;margin:2.2rem auto 0;padding:1.4rem;max-width:34rem;
  border-radius:20px;border:1px solid rgba(201,212,255,.22);background:rgba(43,38,128,.55);animation:paneIn .5s cubic-bezier(.3,.8,.2,1)}
.comm-pane[hidden]{display:none}
@keyframes paneIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.qr{width:9.5rem;padding:.5rem;background:#fff;border-radius:14px;flex:none}
.qr svg{display:block;width:100%;height:auto}
.pane-tx{flex:1 1 12rem;text-align:left}
.pane-tx p{margin:0 0 1rem;color:var(--tx-mute);font-size:.95rem;line-height:1.5}
.news{margin:3.6rem auto 0;max-width:34rem;text-align:left}
.news-l{display:block;font-family:var(--ff-edit);font-size:1.15rem;line-height:1.5;color:var(--pearl);margin-bottom:.9rem;text-align:center}
.news-row{display:flex;gap:.6rem;flex-wrap:wrap}
.news-row input{flex:1 1 14rem;min-width:0;padding:.95rem 1.2rem;border-radius:999px;border:1px solid rgba(201,212,255,.32);
  background:rgba(30,27,94,.6);color:var(--pearl);font:300 1rem var(--ff-ui)}
.news-row input::placeholder{color:var(--tx-faint)}
.news-row input:focus{outline:none;border-color:var(--gold-hi);box-shadow:0 0 0 3px rgba(255,235,196,.18)}
.news-row .comm-btn{flex:0 0 auto}
.news-note{margin:.8rem 0 0;text-align:center;font-size:.8rem;color:var(--tx-faint);min-height:1.2em}
.comm .comm-btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;cursor:pointer;text-decoration:none;
  font-family:var(--ff-display);font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;padding:1rem 1.6rem;border:0;border-radius:999px;
  color:#1E1B5E;background:linear-gradient(100deg,var(--moonstone),var(--gold-hi));box-shadow:0 0 30px rgba(246,212,143,.3);transition:transform .25s,box-shadow .25s}
.comm .comm-btn:hover,.comm .comm-btn:focus-visible{transform:translateY(-1px);box-shadow:0 0 44px rgba(246,212,143,.5);outline:2px solid transparent}
.comm .comm-btn:disabled{opacity:.6;cursor:wait}
.comm .comm-btn::after,.comm .comm-btn::before{content:none!important}
@media(max-width:520px){.pane-tx{text-align:center}.news-row .comm-btn{flex:1 1 100%}.qr{width:8.5rem}
  .comm-or{display:none}.comm-pick{flex-wrap:nowrap;gap:.9rem}.comm-orb{width:min(42vw,10rem)}.comm-orb small{font-size:.6rem}}
@media(prefers-reduced-motion:reduce){.orb-glow,.comm-pane{animation:none}}

/* portal: the wide Synchronee City sky at 88%, logo and wordmark always whole;
   the loading words glow in a slim glass bar centred beneath the wordmark */
#pre{background:#1E1B5E}
.pre-bg{position:absolute;inset:0;background:url("/img/portal-wide.webp") center/cover no-repeat;filter:blur(18px) saturate(1.25);opacity:0;transform:scale(1.08);
  animation:bgIn 1s ease forwards}
@keyframes bgIn{to{opacity:.55}}
.pre-hero{position:absolute;left:50%;top:0;height:100%;aspect-ratio:1672/941;min-width:100vw;transform:translateX(-50%);
  background:url("/img/portal-wide.webp") center/cover no-repeat;opacity:0;overflow:hidden;transform-origin:50% 48%;
  animation:heroIn 1.4s cubic-bezier(.3,.8,.2,1) .05s forwards,heroBreathe 16s ease-in-out 1.5s infinite alternate}
@keyframes heroIn{from{opacity:0;filter:brightness(1.6) blur(6px)}to{opacity:.88;filter:none}}
@keyframes heroBreathe{from{scale:1}to{scale:1.035}}
/* a slow light sweep across the emblem and wordmark */
.pre-sheen{position:absolute;inset:0;mix-blend-mode:screen;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,235,196,.0) 40%,rgba(255,235,196,.32) 48%,rgba(217,107,255,.22) 52%,transparent 60%);
  background-size:260% 100%;background-position:120% 0;animation:sheen 5.5s ease-in-out 1.2s infinite}
@keyframes sheen{0%{background-position:120% 0}55%,100%{background-position:-60% 0}}
.pre-wrap{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  width:100%;height:100%;box-sizing:border-box;padding:1rem 1rem max(2.4vh,env(safe-area-inset-bottom),.8rem)}
.pre-stack{flex:none;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:clamp(.8rem,2vw,1.6rem);flex-wrap:wrap;
  width:min(94vw,48rem);min-height:4.2rem;padding:.75rem 1.6rem;border-radius:999px;text-align:center;
  background:rgba(30,27,94,.68);border:1px solid rgba(255,235,196,.34);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 8px 40px rgba(12,10,40,.55),0 0 30px rgba(217,107,255,.35),inset 0 0 22px rgba(201,212,255,.08);animation:stackIn .9s ease .25s both}
@keyframes stackIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
#pre .pre-stack .pre-label{background:none;padding:0;font-size:clamp(.78rem,1.3vw,.95rem);letter-spacing:.36em;color:#fff;white-space:nowrap;
  text-shadow:0 0 10px rgba(255,255,255,.8),0 0 26px rgba(217,107,255,.9),0 0 50px rgba(109,75,240,.8)}
#pre .pre-stack .pre-label.sign{font-size:clamp(1.4rem,2.4vw,2rem);letter-spacing:.04em;color:var(--gold-hi);
  text-shadow:0 0 14px rgba(255,235,196,.95),0 0 40px rgba(246,212,143,.65),0 2px 4px rgba(12,10,40,.8)}
#pre .pre-stack .pre-line{flex:1 1 12rem;max-width:20rem;min-width:8rem;width:auto;height:4px}
#pre .pre-stack .pre-pct{color:var(--gold-hi);font-size:.72rem;letter-spacing:.3em;min-width:2.4em;text-shadow:0 0 10px rgba(255,235,196,.7)}
#pre .pre-stack .pre-touch{position:static;transform:none;margin:0;width:auto;background:none;padding:0;flex-direction:row;gap:.6rem;
  font-size:clamp(.74rem,1.2vw,.86rem);color:#fff;text-shadow:0 0 12px rgba(255,235,196,.9)}
#pre .pre-stack .pre-touch .ring{order:0;width:22px;height:22px}
#pre.touch .pre-stack .pre-pct,#pre.touch .pre-stack .pre-line{display:none}
#pre.touch .pre-stack{animation:stackCall 2.4s ease-in-out infinite}
@keyframes stackCall{50%{box-shadow:0 8px 40px rgba(12,10,40,.55),0 0 54px rgba(255,235,196,.55),inset 0 0 22px rgba(201,212,255,.1)}}
@media(orientation:portrait){
  .pre-hero{background-position:50% 50%}
  #pre .pre-stack .pre-label{font-size:clamp(.78rem,3.4vw,.95rem)}
  #pre .pre-stack .pre-label.sign{font-size:clamp(1.6rem,7vw,2.2rem)}
}
@media(orientation:portrait){#pre .pre-wrap{padding-bottom:max(1rem,env(safe-area-inset-bottom))}#pre .pre-stack{padding:1.3rem 1.3rem 1.2rem}}
@media(orientation:landscape) and (max-height:520px){#pre .pre-stack{padding:.9rem 1.2rem;gap:.55rem}.pre-hero{height:100%}}
/* loading words + enter: one glowing panel in the exact centre of every screen */
#pre .pre-wrap{justify-content:center;align-items:center;padding:max(1rem,env(safe-area-inset-top)) 1rem max(1rem,env(safe-area-inset-bottom))}
#pre .pre-stack{flex-direction:column;flex-wrap:nowrap;border-radius:26px;width:min(90vw,30rem);min-height:0;padding:1.6rem 1.8rem 1.5rem;gap:1rem;
  background:rgba(30,27,94,.55);-webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3)}
#pre .pre-stack .pre-label{font-size:clamp(.9rem,3.6vw,1.15rem);letter-spacing:.32em}
#pre .pre-stack .pre-label.sign{font-size:clamp(1.8rem,7vw,2.6rem)}
#pre .pre-stack .pre-line{flex:none;width:100%;max-width:none;min-width:0}
#pre .pre-stack .pre-touch{font-size:clamp(.8rem,3vw,.95rem);padding:.7rem 1.4rem;border-radius:999px;border:1px solid rgba(255,235,196,.55);background:rgba(255,235,196,.08);box-shadow:0 0 24px rgba(255,235,196,.25)}
@media(orientation:landscape) and (max-height:520px){#pre .pre-stack{padding:.9rem 1.2rem;gap:.55rem}}
/* portal art: wide logo sky on landscape, tall logo sky on upright phones, always full screen at 88% */
#pre .pre-hero{left:0;top:0;width:100%;height:100%;min-width:0;aspect-ratio:auto;transform:none;-webkit-mask-image:none;mask-image:none;background-position:50% 50%}
@media(orientation:portrait){#pre .pre-hero,#pre .pre-bg{background-image:url("/img/portal-tall-m.webp");background-image:image-set(url("/img/portal-tall-m.avif") type("image/avif"),url("/img/portal-tall-m.webp") type("image/webp"))}#pre .pre-hero{background-position:50% 40%}}
#pre.done .pre-stack,#pre.done .pre-bg,#pre.done .pre-hero{opacity:0;transition:opacity 1s}
@media(prefers-reduced-motion:reduce){.pre-bg{animation:none;opacity:.55}.pre-hero{animation:none;opacity:.88}.pre-sheen,.pre-stack{animation:none}}

/* touch to enter: the ritual tap that also opens the sound */
#pre.touch{cursor:pointer}
#pre.touch .pre-pct{opacity:0;transition:opacity .5s}
.pre-touch{position:absolute;left:0;right:0;margin:0 auto;width:max-content;top:calc(50% + 3.4rem);display:flex;flex-direction:column;align-items:center;gap:1rem;
  font-family:var(--ff-display);font-size:.7rem;letter-spacing:.5em;padding-left:.5em;text-transform:uppercase;color:var(--moonstone);
  opacity:0;animation:touchIn 1s ease .1s forwards, touchBreathe 2.4s ease-in-out 1.1s infinite;pointer-events:none;white-space:nowrap}
.pre-touch[hidden]{display:none}
.pre-touch .ring{order:-1;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,235,196,.7);
  box-shadow:0 0 18px rgba(255,235,196,.55),inset 0 0 14px rgba(217,107,255,.5);animation:ringPulse 2.4s ease-out infinite}
@keyframes touchIn{to{opacity:1}}
@keyframes touchBreathe{50%{color:var(--gold-hi);text-shadow:0 0 16px rgba(255,235,196,.8)}}
@keyframes ringPulse{0%{transform:scale(.8);opacity:1}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}
#pre.done .pre-touch{opacity:0;animation:none;transition:opacity .4s}
#pre:focus{outline:none}

/* the sound button glows while it waits for the first tap */
.sound.is-pending{color:var(--gold-hi);animation:soundCall 2.2s ease-in-out infinite}
@keyframes soundCall{50%{text-shadow:0 0 14px rgba(255,235,196,.9)}}
/* glitter that follows the visitor */
#fairy{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:600}
@media(prefers-reduced-motion:reduce){#fairy,#preglitter,.pre-spark{display:none}.pre-line i{animation:none}}


/* the second sentence supports the first rather than competing with it */
/* smaller than the statement, never a footnote: this is the promise
   the first line is making, so it carries the gold. */
/* a passage that carries only lines needs them larger and slower */
.scr-p--solo span{
  font-size:clamp(1.25rem,2.5vw,2.1rem)!important;
  line-height:1.5;margin-bottom:.85em;
}
.scr-h--quiet{font-size:clamp(1.7rem,4.4vw,3.4rem)!important;line-height:1.12}
.chapter[data-ch="2b"] .inner,.chapter[data-ch="2c"] .inner{max-width:min(92vw,44rem)}
.scr-h .quiet b{
  display:block;font-style:normal;font-weight:inherit;
  margin-top:.62em;
  opacity:0;transform:translate3d(0,.85em,0) scale(.93);filter:blur(11px);
  transition:opacity 1.7s cubic-bezier(.14,.7,.08,1),
             transform 1.7s cubic-bezier(.14,.7,.08,1),
             filter 1.7s cubic-bezier(.14,.7,.08,1);
}
.scr-h .quiet b:first-child{margin-top:0}
.scr-h .quiet b.on{opacity:1;transform:none;filter:none}
@media(prefers-reduced-motion:reduce){.scr-h .quiet b{opacity:1;transform:none;filter:none;transition:none}}
.scr-h .soft.quiet{
  display:block;margin-top:1.05em;
  font-family:var(--ff-display);font-style:normal;font-weight:500;
  font-size:.215em;line-height:1.45;letter-spacing:.30em;
  text-transform:uppercase;padding-left:.30em;
  color:var(--gold-hi);opacity:1;
  text-shadow:0 0 30px rgba(246,212,143,.45);
}

/* ── THE MEMORY ───────────────────────────────────────────────
   The first question does not arrive; it surfaces. A warm bloom
   swells behind it and every word drifts up out of soft focus, the
   way something remembered comes back — slowly, then all at once. */
.nostalgia{
  position:absolute;inset:-25%;pointer-events:none;opacity:0;
  background:
    radial-gradient(44% 34% at 44% 44%,rgba(255,224,178,.30),transparent 70%),
    radial-gradient(38% 30% at 66% 62%,rgba(213,139,232,.22),transparent 72%),
    radial-gradient(60% 46% at 50% 96%,rgba(122,75,168,.30),transparent 74%);
  filter:blur(18px);transform:scale(1.16);
  transition:opacity 3.4s cubic-bezier(.2,.62,.16,1),transform 4.6s cubic-bezier(.2,.62,.16,1);
}
.nostalgia.on{opacity:.9;transform:scale(1)}
[data-unfold].dream .w{
  /* the memory arrives out of deeper focus, but each word still comes
     from its own side and still resolves on its own */
  filter:blur(calc(var(--wb,13px) * 1.75));
}
[data-unfold].dream .w.on{filter:none;transform:none}
[data-unfold].dream .scr-p span{filter:blur(16px)}
@media(prefers-reduced-motion:reduce){
  .nostalgia{opacity:.9!important;transform:none!important;transition:none}
}

/* ── THE UNFOLDING ────────────────────────────────────────────
   Every line of the story assembles as it arrives. Words rise in
   sequence, lines follow, and the block itself is never a cut. */
/* Nothing arrives from the same direction twice. Reading the site is
   moving through a city: each turn shows you a street you were not
   looking down. */
[data-unfold]{--dx:0em;--dy:1.15em;--rz:1deg;--lx:0px;--ly:38px}
[data-unfold].dir-l{--dx:-2.9em;--dy:.2em;--rz:-.9deg;--lx:-78px;--ly:10px}
[data-unfold].dir-r{--dx:2.9em;--dy:.2em;--rz:.9deg;--lx:78px;--ly:10px}
[data-unfold].dir-u{--dx:0em;--dy:1.7em;--rz:.7deg;--lx:0px;--ly:56px}
[data-unfold].dir-c{--dx:0em;--dy:.6em;--rz:0deg;--lx:0px;--ly:24px}
[data-unfold] .w{
  display:inline-block;white-space:pre;
  opacity:0;
  transform:translate3d(var(--wx,var(--dx)),var(--wy,var(--dy)),0)
            rotate(var(--wr,var(--rz))) scale(.90);
  filter:blur(var(--wb,20px));
  /* the fade lives in its middle; the blur finishes last, so the word is
     legible for a moment before it is fully solid */
  transition:opacity 2.9s cubic-bezier(.45,.06,.36,1),
             transform 3.1s cubic-bezier(.25,.55,.2,1),
             filter 3.6s cubic-bezier(.34,.1,.28,1);
}
[data-unfold] .w.on{opacity:1;transform:none;filter:none;
  animation:wArrive 3.2s cubic-bezier(.3,.1,.25,1) both}
@keyframes wArrive{
  0%  {text-shadow:0 0 30px rgba(232,238,255,.95),0 0 74px rgba(109,75,240,.7)}
  46% {text-shadow:0 0 16px rgba(232,238,255,.5),0 0 44px rgba(109,75,240,.34)}
  100%{text-shadow:0 0 0 rgba(232,238,255,0),0 0 0 rgba(109,75,240,0)}
}
[data-unfold] .scr-p span{
  display:block;
  opacity:0;transform:translate3d(var(--lx),var(--ly),0) scale(.972);filter:blur(15px);
  transition:opacity 3.2s cubic-bezier(.45,.06,.36,1),
             transform 3.4s cubic-bezier(.25,.55,.2,1),
             filter 4s cubic-bezier(.34,.1,.28,1);
}
[data-unfold] .scr-p span.on{opacity:1;transform:none;filter:none}
[data-unfold] .mtm,[data-unfold] .fr-pre,[data-unfold] .wel-pre,
[data-unfold] .wel-post,[data-unfold] .actions,[data-unfold] .seeker,
[data-unfold] .support{
  opacity:0;transform:translate3d(var(--lx),var(--ly),0);filter:blur(4px);
  transition:opacity 1.1s cubic-bezier(.18,.72,.14,1),transform 1.1s cubic-bezier(.18,.72,.14,1),
             filter 1s cubic-bezier(.18,.72,.14,1);
}
[data-unfold] .mtm.on,[data-unfold] .fr-pre.on,[data-unfold] .wel-pre.on,
[data-unfold] .wel-post.on,[data-unfold] .actions.on,[data-unfold] .seeker.on,
[data-unfold] .support.on{opacity:1;transform:none;filter:none}
/* the mark on the welcome screen resolves rather than appears */
[data-unfold] .mark--welcome{opacity:0;transform:translate3d(0,30px,0) scale(.985);filter:blur(11px);
  transition:opacity 1.5s cubic-bezier(.18,.72,.14,1),transform 1.5s cubic-bezier(.18,.72,.14,1),
             filter 1.5s cubic-bezier(.18,.72,.14,1)}
[data-unfold] .mark--welcome.on{opacity:1;transform:none;filter:none}

/* ── THE PHILOSOPHY ARRIVES FROM THREE DIRECTIONS ─────────────
   Alternative enters from the left, Preventive from the right, and
   Integrative opens from the centre — the two halves meeting. */
.phil-ch .inner > *{
  transition:opacity 1.5s cubic-bezier(.16,.74,.12,1),transform 1.5s cubic-bezier(.16,.74,.12,1),
             filter 1.3s cubic-bezier(.16,.74,.12,1),clip-path 1.7s cubic-bezier(.16,.74,.12,1);
}
.phil-l .inner > *{opacity:0;transform:translate3d(-18vw,0,0);filter:blur(6px)}
.phil-r .inner > *{opacity:0;transform:translate3d(18vw,0,0);filter:blur(6px)}
.phil-c .inner > *{opacity:0;transform:scale(.90);filter:blur(6px);
  -webkit-clip-path:inset(0 46% 0 46%);clip-path:inset(0 46% 0 46%)}
.phil-l .inner > *:nth-child(2),.phil-r .inner > *:nth-child(2){transition-delay:.14s}
.phil-l .inner > *:nth-child(3),.phil-r .inner > *:nth-child(3){transition-delay:.30s}
.phil-c .inner > *:nth-child(2){transition-delay:.20s}
.phil-c .inner > *:nth-child(3){transition-delay:.40s}
.phil-ch.unfold .inner > *,.phil-ch .inner > *.on{
  opacity:1;transform:none;filter:none;
  -webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0);
}
@media(prefers-reduced-motion:reduce){
  /* everything that MOVES is removed ~ travel, rotation, scale, blur,
     the flare. What remains is the arrival itself, as a plain fade. */
  [data-unfold] .w,[data-unfold] .scr-p span,.phil-ch .inner > *,
  [data-unfold] .mark--welcome,[data-unfold] .mtm,[data-unfold] .fr-pre,
  [data-unfold] .wel-pre,[data-unfold] .wel-post,[data-unfold] .actions,
  [data-unfold] .seeker,[data-unfold] .support{
    transform:none!important;filter:none!important;animation:none!important;
    -webkit-clip-path:none!important;clip-path:none!important;
    transition:opacity 1.5s ease!important;
  }
  [data-unfold] .w,[data-unfold] .scr-p span,
  [data-unfold] .mark--welcome,[data-unfold] .mtm,[data-unfold] .fr-pre,
  [data-unfold] .wel-pre,[data-unfold] .wel-post,[data-unfold] .actions,
  [data-unfold] .seeker,[data-unfold] .support{opacity:0}
  .phil-ch .inner > *{opacity:0}
  [data-unfold] .w.on,[data-unfold] .scr-p span.on,
  [data-unfold] .mark--welcome.on,[data-unfold] .mtm.on,[data-unfold] .fr-pre.on,
  [data-unfold] .wel-pre.on,[data-unfold] .wel-post.on,[data-unfold] .actions.on,
  [data-unfold] .seeker.on,[data-unfold] .support.on,
  .phil-ch.unfold .inner > *,.phil-ch .inner > *.on{opacity:1}
}


/* ── SCROLL-WRITTEN TYPE ──────────────────────────────────────
   The scroll engine paints these inline every frame; the stylesheet
   only supplies the starting state and keeps transitions out of the
   way so the type follows the reader's hand exactly. */
.rw{display:inline-block;white-space:pre;opacity:0;will-change:transform,opacity,filter}
.__ln{opacity:0;will-change:transform,opacity}
[data-unfold] .w,[data-unfold] .scr-p span,[data-unfold] .quiet b{will-change:transform,opacity,filter}
/* ── THE REST OF THE CITY ─────────────────────────────────────
   Everything the story engine does not own. Same arrival, one
   step coarser: the line rather than the word. */
.rv{
  opacity:0;
  transform:translate3d(0,var(--rvy,30px),0) scale(.984);
  filter:blur(13px);
  transition:opacity 2.2s cubic-bezier(.45,.06,.36,1),
             transform 2.4s cubic-bezier(.25,.55,.2,1),
             filter 2.9s cubic-bezier(.34,.1,.28,1);
}
.rv.on{opacity:1;transform:none;filter:none}
@media(prefers-reduced-motion:reduce){
  /* the arrival stays; only the movement goes */
  .rv{transform:none!important;filter:none!important;
      transition:opacity 1.4s ease!important}
}

/* ── THE GUIDING LIGHT ────────────────────────────────────────
   A comet travels with the pointer through the five ways in: the
   city showing you where to look, not a cursor decoration. */
#comet{position:fixed;inset:0;z-index:180;pointer-events:none;opacity:0;
  transition:opacity .9s ease;mix-blend-mode:screen}
#comet.on{opacity:1}
#comet i{
  position:absolute;left:0;top:0;border-radius:50%;
  transform:translate3d(-50%,-50%,0);will-change:transform;
}
#comet i.head{
  width:12px;height:12px;
  background:radial-gradient(circle,#FFFFFF 0 22%,var(--gold-hi) 42%,rgba(246,212,143,.35) 62%,transparent 74%);
  box-shadow:0 0 22px rgba(255,235,196,.85),0 0 56px rgba(217,107,255,.5),0 0 110px rgba(109,75,240,.35);
}
@media(prefers-reduced-motion:reduce){#comet{display:none}}

/* ── THE CELESTIAL SPINE ──────────────────────────────────────
   The sky the whole journey happens under. It is scroll~driven
   from a single number, --j, the progress of the story: the
   yin~yang turns with it, the moon waxes across it, the elements
   surface one at a time along it. Drawn, never loaded. */
#celest{
  position:fixed;inset:0;z-index:4;pointer-events:none;overflow:hidden;
}
#celest .stars,#celest .tao{mix-blend-mode:screen}
@media(prefers-reduced-motion:reduce){#celest{display:none}}

/* ── THE CENTRE ───────────────────────────────────────────────
   One body, four faces, one place. The wheel turns into a crescent,
   the crescent into a clock, the clock into the world ~ each at the
   same size and on the same slow turn, so the change reads as one
   thing becoming another rather than four objects taking turns. */
#celest .tao{
  position:absolute;left:50%;top:50%;
  width:min(64vh,42rem);aspect-ratio:1;margin:0;
  transform:translate(-50%,-50%) scale(calc(.72 + var(--j,0) * .5)) rotate(calc(var(--j,0) * 300deg));
  opacity:calc(.12 + var(--taoV,0) * .62);
  filter:drop-shadow(0 0 40px rgba(178,190,255,.45)) drop-shadow(0 0 110px rgba(109,75,240,.3));
  will-change:transform,opacity;
}
#celest .tao svg{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  transition:opacity 1.9s cubic-bezier(.25,.7,.2,1);
}
#celest .tao .f-tao  {opacity:var(--k1,0)}
#celest .tao .f-moon {opacity:calc(var(--k2,0) * .62)}
#celest .tao .f-clock{opacity:var(--k3,0)}
#celest .tao .f-globe{opacity:var(--k4,0)}
/* the drawn faces share one hand */
#celest .tao .f-clock *,#celest .tao .f-globe *{
  fill:none;stroke:var(--gold-hi);stroke-width:.9;
  vector-effect:non-scaling-stroke;stroke-linecap:round;
}
#celest .tao .hh{transform-origin:50px 50px;animation:handTurn 108s linear infinite}
#celest .tao .mh{transform-origin:50px 50px;animation:handTurn 27s linear infinite}
@keyframes handTurn{to{rotate:360deg}}
#celest .tao .mer{transform-origin:50px 50px;animation:meridian 21s ease-in-out infinite}
@keyframes meridian{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.14)}}
/* the name of what the sky currently is */
#celest .coreName{
  position:absolute;left:50%;top:calc(50% + min(36vh,24rem));
  transform:translate(-50%,0);white-space:nowrap;
  font-family:var(--ff-display);font-weight:500;
  font-size:.5rem;letter-spacing:.4em;text-transform:uppercase;
  color:var(--gold-hi);padding-left:.4em;opacity:calc(var(--taoV,0) * .7);
  text-shadow:0 0 18px rgba(246,212,143,.5);
  transition:opacity 1.6s ease;
}
@media(prefers-reduced-motion:reduce){
  #celest .tao .hh,#celest .tao .mh,#celest .tao .mer{animation:none}
}

/* ── THE ORBIT ────────────────────────────────────────────────
   Everything the sky carries travels on one circle, turning with
   the wheel at its centre: the five elements on the inner ring,
   the moon further out on the same turn. A body is placed by its
   angle and its radius, then counter~rotated so the glyph itself
   stays upright the whole way round. */
#celest .skyring{
  position:absolute;left:50%;top:50%;width:0;height:0;
  transform:translate(-50%,-50%);
  opacity:var(--skyV,0);
  transition:opacity 2.2s cubic-bezier(.25,.7,.2,1);
}
#celest .skybody{
  position:absolute;left:0;top:0;
  transform:
    rotate(calc(var(--a) + var(--spin,0deg)))
    translate(var(--r))
    rotate(calc(-1 * (var(--a) + var(--spin,0deg))));
  will-change:transform;
}
#celest .skybody > *{
  transform:translate(-50%,-50%);
  /* one presence for every body on the circle */
  opacity:calc(.38 + var(--lit,0) * .52);
}

/* the moon ~ new at the first question, full at the promise */
#celest .moon{
  position:relative;
  width:clamp(58px,9vh,120px);aspect-ratio:1;border-radius:50%;
  /* the moon is drawn, not lit: a pale body inside a gold edge,
     at the same weight as the marks it travels with */
  background:radial-gradient(circle at 36% 34%,rgba(248,245,252,.82),rgba(198,190,232,.52) 54%,rgba(112,102,168,.34));
  box-shadow:
    0 0 0 1px rgba(255,235,196,.5),
    0 0 16px rgba(214,206,242,.32),
    0 0 46px rgba(109,75,240,.22);
  /* the terminator sweeps as the story advances: new → crescent → full */
  /* a shadow the exact size of the moon, sliding one full diameter:
     covering it at new, clear of it at full. closest-side would shrink
     the shadow as it travels, which is how a crescent becomes a ring. */
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at calc(50% - var(--phase,0) * 100%) 50%,transparent 0 99%,#000 100%);
  mask-image:radial-gradient(ellipse 50% 50% at calc(50% - var(--phase,0) * 100%) 50%,transparent 0 99%,#000 100%);
  transition:opacity 1.8s cubic-bezier(.25,.7,.2,1);
}
#celest .moon.full{-webkit-mask-image:none;mask-image:none}

/* the elements ~ water, earth, aether, air, fire, all on the ring,
   each one brightening as its stretch of the journey arrives */
#celest .skyelem{
  position:relative;width:clamp(50px,7.2vh,98px);aspect-ratio:1;
  opacity:calc(.38 + var(--lit,0) * .56);
  filter:
    blur(calc((1 - var(--lit,0)) * 1.1px))
    drop-shadow(0 0 3px rgba(30,27,94,.95))
    drop-shadow(0 0 calc(10px + var(--lit,0) * 14px) rgba(246,212,143,calc(.35 + var(--lit,0) * .5)))
    drop-shadow(0 0 calc(24px + var(--lit,0) * 30px) rgba(217,107,255,calc(.2 + var(--lit,0) * .32)));
}
#celest .skyelem em{opacity:calc(.4 + var(--lit,0) * .6)}
/* ── THE THIRD BODY ───────────────────────────────────────────
   Nothing new is loaded for this: three drawings stacked in one
   place, each fading up as its stretch of the journey arrives. */
#celest .relic{
  position:relative;width:clamp(56px,8.4vh,116px);aspect-ratio:1;
}
#celest .relic > svg{
  position:absolute;inset:0;width:100%;height:100%;overflow:visible;
  transition:opacity 1.6s cubic-bezier(.25,.7,.2,1);
}
#celest .relic svg *{
  fill:none;stroke:var(--gold-hi);stroke-width:2.2;
  vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round;
}
#celest .relic .f-clock{opacity:var(--c1,0)}
#celest .relic .f-globe{opacity:var(--c2,0)}
#celest .relic .f-ball {opacity:var(--c3,0)}
/* the hands do not tick: they sweep, the way a clock does when
   you are remembering it rather than reading it */
#celest .relic .hh{transform-origin:50px 50px;animation:handSlow 96s linear infinite}
#celest .relic .mh{transform-origin:50px 50px;animation:handFast 24s linear infinite}
@keyframes handSlow{to{rotate:360deg}}
@keyframes handFast{to{rotate:360deg}}
/* the globe turns on its own axis; the meridians breathe across it */
#celest .relic .mer{transform-origin:50px 50px;animation:meridian 18s ease-in-out infinite}
@keyframes meridian{
  0%,100%{transform:scaleX(1)}
  50%    {transform:scaleX(.16)}
}
/* the ball is not a disco light: it is a sphere of small mirrors,
   turning slowly, catching the room */
#celest .relic .facets{transform-origin:50px 50px;animation:handSlow 42s linear infinite}
#celest .relic .spark{
  stroke:none;fill:var(--gold-hi);
  animation:relicSpark 5.5s ease-in-out infinite;
}
#celest .relic .spark:nth-of-type(2){animation-delay:-1.9s}
#celest .relic .spark:nth-of-type(3){animation-delay:-3.7s}
@keyframes relicSpark{0%,100%{opacity:.15}50%{opacity:.9}}
#celest .relic em{
  position:absolute;left:50%;top:100%;transform:translateX(-50%);
  margin-top:.5rem;white-space:nowrap;
  font-family:var(--ff-display);font-style:normal;font-weight:500;
  font-size:.5rem;letter-spacing:.36em;text-transform:uppercase;
  color:var(--gold-hi);padding-left:.36em;
  text-shadow:0 0 18px rgba(246,212,143,.5);
}
@media(prefers-reduced-motion:reduce){
  #celest .relic .hh,#celest .relic .mh,#celest .relic .mer,
  #celest .relic .facets,#celest .relic .spark{animation:none}
}
#celest .skyelem svg{width:100%;height:100%;display:block;overflow:visible}
#celest .skyelem svg path,#celest .skyelem svg polygon,#celest .skyelem svg line{
  fill:none;stroke:var(--gold-hi);stroke-width:2.6;vector-effect:non-scaling-stroke;stroke-linejoin:round;
  paint-order:stroke;
}
#celest .skyelem em{
  position:absolute;left:50%;top:100%;transform:translateX(-50%);
  margin-top:.5rem;white-space:nowrap;text-align:center;
  font-family:var(--ff-display);font-style:normal;font-weight:500;
  font-size:.5rem;letter-spacing:.36em;text-transform:uppercase;
  color:var(--gold-hi);padding-left:.36em;
  text-shadow:0 0 18px rgba(246,212,143,.5);
}

/* the stars ~ a slow drift, deeper than the field */
#celest .stars{
  position:absolute;inset:-10%;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 22%,rgba(232,238,255,.9),transparent),
    radial-gradient(1.1px 1.1px at 74% 12%,rgba(214,206,242,.8),transparent),
    radial-gradient(1.6px 1.6px at 38% 68%,rgba(255,246,224,.75),transparent),
    radial-gradient(1.1px 1.1px at 88% 54%,rgba(201,212,255,.8),transparent),
    radial-gradient(1.3px 1.3px at 22% 86%,rgba(232,238,255,.7),transparent),
    radial-gradient(1px 1px at 58% 34%,rgba(182,168,240,.75),transparent),
    radial-gradient(1.5px 1.5px at 66% 78%,rgba(255,235,196,.65),transparent),
    radial-gradient(1px 1px at 8% 56%,rgba(201,212,255,.7),transparent);
  /* the layer's own opacity is the animation; the journey scales it */
  opacity:calc(.18 + var(--starV,0) * .5);
  transform:translate3d(0,calc(var(--j,0) * -9vh),0);
  isolation:isolate;
  animation:starBreath 13s ease-in-out infinite;will-change:opacity;
}
@keyframes starBreath{0%,100%{opacity:.72}50%{opacity:1}}

/* ── THE STAGE LAYERS ─────────────────────────────────────────
   Three moments in the story stop being screens with copy on them
   and become full-screen events. Each layer is fixed to the
   viewport — not to its passage — so it fills the frame, and each
   is driven by one number: --np, how near its passage is to the
   centre of the screen. Nothing here reacts to time alone; the
   reader's scroll is the transport. */
#stagefx{position:fixed;inset:0;z-index:5;pointer-events:none;overflow:hidden}
.stg{
  position:absolute;inset:0;pointer-events:none;
  overflow:hidden;opacity:0;
}
/* whatever a passage stages, the words are in front of it */
.chapter .inner{z-index:2}
.stg img{
  position:absolute;left:50%;top:50%;max-width:none;width:auto;
  mix-blend-mode:screen;will-change:transform,opacity;
  /* the picture has no edges: it dissolves into the field it sits in */
  mask-image:radial-gradient(closest-side,#000 0 22%,rgba(0,0,0,.7) 52%,transparent 86%);
  -webkit-mask-image:radial-gradient(closest-side,#000 0 22%,rgba(0,0,0,.7) 52%,transparent 86%);
}
/* the reading side stays dark, so the copy is never asked to compete */
.stg .scrim{
  position:absolute;inset:0;
  /* the reading side stays dark; the centre, where the transfer
     happens, is left alone */
  background:
    linear-gradient(96deg,rgba(9,8,32,.66) 0%,rgba(9,8,32,.3) 26%,rgba(9,8,32,0) 50%),
    radial-gradient(136% 104% at 50% 50%,transparent 52%,rgba(9,8,32,.42) 100%);
}
/* the meeting is the picture: it keeps more of itself */
.meet .scrim{
  background:
    linear-gradient(96deg,rgba(9,8,32,.80) 0%,rgba(9,8,32,.48) 26%,rgba(9,8,32,0) 54%),
    radial-gradient(126% 96% at 50% 50%,transparent 30%,rgba(9,8,32,.58) 100%);
}
@media(prefers-reduced-motion:reduce){.stg{display:none}}

/* THE RECALIBRATION ~ the figure is measured, not scanned. Two rings
   turn against each other at the pace of breath and a single soft
   band travels the body from crown to floor. Nothing flashes. */
.recal{opacity:calc(var(--np,0) * .9)}
.recal .fig,.bloom .fig{
  /* full screen, and cooled the whole way into the city's palette so
     it belongs to the navy rather than arriving from somewhere hotter */
  height:118vh;
  transform:translate(-50%,-50%) scale(calc(.94 + var(--np,0) * .12));
  opacity:calc(.08 + var(--np,0) * .64);
  filter:saturate(.54) hue-rotate(-24deg) brightness(1.06) contrast(1.1);
  will-change:transform,opacity;
}
/* the frontier keeps the field's own figure: the artwork only warms
   the space around it, never doubles it */
.bloom .fig{display:none}
.bloom .sq{display:none}
/* the field's figure holds its centre a little left of, and below,
   the centre of the screen: the mark is aimed at it, not at the box */
.recal .ret,.recal .ret2{
  position:absolute;left:50%;top:50%;border-radius:50%;mix-blend-mode:screen;
  border:1px solid rgba(178,190,255,.20);
  box-shadow:0 0 60px rgba(109,75,240,.20) inset;
}
.recal .sq,.bloom .sq{
  position:absolute;left:50%;top:50%;width:81vh;height:81vh;margin:-40.5vh 0 0 -40.5vh;
  border:1px solid rgba(246,212,143,.16);mix-blend-mode:screen;
  transform:scale(calc(.88 + var(--np,0) * .16));
  opacity:calc(var(--np,0) * .8);
}
.recal .sq::before,.bloom .sq::before,
.recal .sq::after,.bloom .sq::after{
  content:"";position:absolute;background:rgba(178,190,255,.14);
}
.recal .sq::before,.bloom .sq::before{left:0;right:0;top:50%;height:1px}
.recal .sq::after,.bloom .sq::after{top:0;bottom:0;left:50%;width:1px}
.recal .ret{
  width:93vh;height:93vh;margin:-46.5vh 0 0 -46.5vh;
  border-style:dashed;
  transform:rotate(0deg) scale(calc(.86 + var(--np,0) * .18));
  animation:retTurn 96s linear infinite;
  opacity:calc(var(--np,0) * .55);
}
.recal .ret2{
  width:58vh;height:58vh;margin:-29vh 0 0 -29vh;
  border-color:rgba(246,212,143,.22);
  transform:rotate(0deg) scale(calc(.9 + var(--np,0) * .14));
  animation:retTurn 64s linear infinite reverse;
  opacity:calc(var(--np,0) * .5);
}
.recal .band{
  position:absolute;left:0;right:0;height:26vh;mix-blend-mode:screen;
  background:linear-gradient(180deg,transparent,rgba(178,190,255,.16) 38%,rgba(246,212,143,.20) 52%,rgba(178,190,255,.14) 66%,transparent);
  top:0;filter:blur(9px);opacity:calc(var(--np,0) * .8);
  animation:bandPass 15s cubic-bezier(.45,0,.35,1) infinite;
  will-change:transform,opacity;
}
@keyframes retTurn{to{rotate:360deg}}
@keyframes bandPass{
  0%  {transform:translate3d(0,-30vh,0);opacity:0}
  12% {opacity:.85}
  88% {opacity:.85}
  100%{transform:translate3d(0,104vh,0);opacity:0}
}

/* THE MEETING ~ two halves of one image travelling toward each
   other. They only close when the passage is centred, so the
   contact happens under the sentence, not before it. */
.meet{opacity:calc(var(--np,0) * .95)}
.meet .h{
  /* tall enough that the frame of the photograph leaves the frame of
     the screen: what remains is light, not a picture on a wall */
  height:126vh;
  /* the approach is a curve: they rise as they come, and the last
     of the travel is the slowest part of it */
  transform:translate(-50%,-50%)
            translate3d(calc(var(--sx) * (1 - var(--np,0)) * 18vw),
                        calc((1 - var(--np,0)) * var(--sx) * -2.2vh),0)
            scale(calc(.94 + var(--np,0) * .1))
            rotate(calc(var(--sx) * (1 - var(--np,0)) * .9deg));
  filter:saturate(calc(.55 + var(--np,0) * .45))
         brightness(calc(.62 + var(--np,0) * .3)) hue-rotate(-10deg);
  will-change:transform,opacity;
  opacity:calc(.16 + var(--np,0) * .58);
}
.meet .h.l{
  --sx:-1;
  -webkit-mask-image:linear-gradient(96deg,#000 0 30%,rgba(0,0,0,.6) 48%,transparent 66%);
  mask-image:linear-gradient(96deg,#000 0 30%,rgba(0,0,0,.6) 48%,transparent 66%);
}
.meet .h.r{
  --sx:1;
  -webkit-mask-image:linear-gradient(96deg,transparent 34%,rgba(0,0,0,.6) 52%,#000 70%);
  mask-image:linear-gradient(96deg,transparent 34%,rgba(0,0,0,.6) 52%,#000 70%);
}
.meet .touch{mix-blend-mode:screen}
.meet .touch{
  position:absolute;left:50%;top:50%;width:46vh;height:46vh;margin:-23vh 0 0 -23vh;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,246,224,.55) 0 6%,rgba(246,212,143,.30) 18%,rgba(217,107,255,.16) 40%,transparent 68%);
  --tS:calc(.2 + var(--np,0) * .9);
  transform:scale(var(--tS));
  opacity:calc(var(--np,0) * var(--np,0));
  filter:blur(7px);
  animation:touchBreathe 7.5s ease-in-out infinite;
  will-change:transform,opacity;
}
@keyframes touchBreathe{
  0%,100%{transform:scale(var(--tS))}
  50%    {transform:scale(calc(var(--tS) * 1.14))}
}

/* THE MARK ~ the logo arrives in the middle of the figure at the
   line that names the promise. It turns once, slowly, and holds. */
.bloom{opacity:calc(var(--np,0) * .95)}
/* No disc, no radius, no plate. The mark belongs to the circle and
   the figure it stands in; anything drawn behind it competes with
   both. What remains is a wide, edgeless warming of the air ~ blurred
   far past the point where its own boundary could be found. */
.bloom .halo{
  position:absolute;left:50%;top:50%;width:96vh;height:64vh;margin:-32vh 0 0 -48vh;
  mix-blend-mode:screen;
  background:radial-gradient(ellipse 46% 46% at 50% 50%,
    rgba(178,190,255,.2) 0%,rgba(109,75,240,.09) 46%,transparent 74%);
  --tS:calc(.7 + var(--gp,0) * .4);
  transform:translate(0,1.5vh) scale(var(--tS));
  opacity:calc(var(--gp,0) * .8);
  filter:blur(72px);
  will-change:transform,opacity;
}
.bloom .gl{
  /* a quarter of the wheel's own diameter, so the two are one thing */
  height:min(23vh,20rem);
  transform:translate(-50%,-50%) translate(0,1vh)
            scale(calc(.86 + var(--gp,0) * .16))
            rotate(calc((1 - var(--gp,0)) * -8deg));
  opacity:calc(var(--gp,0) * .96);
  /* cooled the same way the figure is cooled, so the light is shared */
  filter:brightness(1.62) contrast(1.06) saturate(.9) hue-rotate(-10deg)
         drop-shadow(0 0 10px rgba(232,238,255,.6))
         drop-shadow(0 0 30px rgba(178,190,255,.5))
         drop-shadow(0 0 88px rgba(109,75,240,.38));
  /* screen: the dark of the artwork becomes the dark of the field,
     so there is no plate to find and no edge to see */
  mix-blend-mode:screen;z-index:2;
  /* nothing masks it: the artwork's alpha is clean, and every mask
     this mark has worn is an edge the eye can find */
  mask-image:none!important;-webkit-mask-image:none!important;
  -webkit-clip-path:none!important;clip-path:none!important;
}

/* ── THE DISTORTION ───────────────────────────────────────────
   The screen that names overstimulation is the only one permitted
   to come apart. Each line carries two ghosts of itself, one cold
   and one warm, that slip a few pixels out of register in short,
   irregular bursts. The bursts are brief and the ghosts are faint:
   the effect is pressure, not strobe. */
/* ── THE PRESSURE ─────────────────────────────────────────────
   Overstimulation, read as weather rather than as damage. A wide
   bloom swells behind the passage and recedes, twice as slow as
   breathing, and a second one answers it out of phase. Only two
   properties move ~ opacity and transform ~ so the compositor
   carries the whole effect and the text is never re-drawn. */
.glitchy .carrier,
.glitchy .carrier::after{
  position:absolute;pointer-events:none;z-index:0;
  border-radius:50%;
}
.glitchy .carrier{
  inset:-28% -18%;
  opacity:calc(var(--np,0) * .5);
  background:radial-gradient(48% 40% at 42% 44%,rgba(217,107,255,.24),transparent 70%);
  filter:blur(46px);
  animation:pressA 17s ease-in-out infinite;
  will-change:transform,opacity;
}
.glitchy .carrier::after{
  content:"";inset:12% 8% 6% 22%;
  background:radial-gradient(46% 40% at 62% 58%,rgba(110,201,232,.18),transparent 72%);
  animation:pressB 23s ease-in-out infinite;
  will-change:transform,opacity;
}
@keyframes pressA{
  0%,100%{transform:scale(.94) translate3d(0,0,0);opacity:.72}
  50%    {transform:scale(1.08) translate3d(2%,-1.5%,0);opacity:1}
}
@keyframes pressB{
  0%,100%{transform:scale(1.06) translate3d(-1.5%,1%,0);opacity:.9}
  50%    {transform:scale(.92) translate3d(1%,-1%,0);opacity:.55}
}
@media(prefers-reduced-motion:reduce){
  .glitchy .carrier,.glitchy .carrier::after{animation:none}
}

/* the guide: the mark itself leads the way through the ecosystem */
#comet i.head{
  width:54px;height:54px;background:none;box-shadow:none;
}
#comet i.head b{
  position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;
  background:center/contain no-repeat;
  filter:drop-shadow(0 0 16px rgba(255,246,224,.85)) drop-shadow(0 0 44px rgba(178,190,255,.7))
         drop-shadow(0 0 90px rgba(109,75,240,.6));
  animation:guideTurn 26s linear infinite;
}
@keyframes guideTurn{to{rotate:360deg}}

.foot-lockup{
  display:block;width:min(78vw,19rem);height:auto;margin-bottom:1.6rem;
  position:relative;z-index:1;
  /* No mask. No blend mode. No clip. The artwork's alpha is clean,
     so there is nothing to cut ~ and every mask this lockup has
     worn has eaten either its ends or its middle. */
  -webkit-mask-image:none!important;mask-image:none!important;
  -webkit-clip-path:none!important;clip-path:none!important;
  mix-blend-mode:screen;overflow:visible;
  /* it gathers rather than appearing, the way the figure does */
  opacity:0;transform:scale(.965);
  filter:blur(10px) brightness(1.04) saturate(1.02);
  transition:opacity 2.4s cubic-bezier(.2,.7,.15,1),
             transform 2.4s cubic-bezier(.2,.7,.15,1),
             filter 2.4s cubic-bezier(.2,.7,.15,1);
}
.foot-mark.gathered .foot-lockup{
  /* clean artwork, its own colour, met to the ground by screen rather
     than by a filter ~ nothing to correct, nothing to hide */
  opacity:.55;transform:none;
  filter:blur(0) brightness(1.04) saturate(1.02);
}
.foot-mark:hover .foot-lockup{opacity:.62;transition-duration:1.1s}
@media(prefers-reduced-motion:reduce){
  .foot-lockup{opacity:.55;transform:none;filter:none;transition:none}
}
/* the light around it belongs to the ground, not to the picture */
.foot-mark{position:relative;display:block;isolation:isolate}
/* Nothing sits behind the mark. Any wash, however soft, is still a
   shape once the eye finds its edge ~ and at twenty percent the
   lockup is already part of the ground it rests on. */

.foot-bot span{font-size:.56rem;letter-spacing:.16em;line-height:1.7;opacity:.62}

/* ---------- chrome ---------- */
header.nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:1.5rem var(--gut);
  mix-blend-mode:normal;
  transition:color .8s;
}
.wordmark{
  font-family:var(--ff-display);font-weight:500;
  font-size:.74rem;letter-spacing:.38em;text-transform:uppercase;
  padding-left:.38em;white-space:nowrap;
}
.wordmark span{display:block;font-family:var(--ff-ui);font-weight:300;
  font-size:.5rem;letter-spacing:.28em;color:var(--tx-faint);margin-top:.4rem}
nav.links{display:flex;gap:2rem;align-items:center}
nav.links a{
  font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--tx-mute);transition:color .35s;
}
nav.links a:hover{color:var(--moonstone)}
/* one world throughout: the chrome only gains a veil over dense passages */
.lit header.nav{
  background:linear-gradient(to bottom,rgba(30,27,94,.86),rgba(30,27,94,.44) 60%,rgba(30,27,94,0));
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  /* the veil under the chrome fades out rather than ending on a line */
  -webkit-mask-image:linear-gradient(to bottom,#000 52%,rgba(0,0,0,.55) 78%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 52%,rgba(0,0,0,.55) 78%,transparent 100%);
}
.lit nav.links a{color:var(--tx)}
.orbit svg circle{stroke:rgba(217,107,255,.22)}
header.nav .wordmark,header.nav .wordmark span,nav.links a{transition:color .5s,border-color .5s,background .5s}
.nav-cta{
  border:1px solid var(--rule);padding:.6rem 1.1rem;
  transition:border-color .4s,background .4s!important;
}
.nav-cta:hover{border-color:rgba(199,215,255,.55);background:rgba(90,79,224,.12)}
@media(max-width:860px){nav.links a:not(.nav-cta){display:none}}
/* narrow screens read as one column: alternating alignment stops helping */
@media(max-width:700px){
  .chapter{padding-top:9.5rem}
  .chapter[data-align="right"]{justify-content:flex-start}
  .chapter[data-align="right"] .eyebrow{justify-content:flex-start}
  .chapter[data-align="right"] .support{margin-left:0}
}

/* ── THE MARK ──────────────────────────────────────────────────
   The wordmark is drawn by two masked layers over the letterforms:
   a slow iridescent shift, and a specular sweep. Mirror-ball, not neon. */
.mark{position:relative;display:inline-block;line-height:0;isolation:isolate}
.mark img{display:block;width:100%;height:auto;opacity:.90;
  filter:drop-shadow(0 0 22px rgba(168,85,247,.30))}
.mark .iri,.mark .glint,.mark .glint2,.mark .dust{
  position:absolute;inset:0;pointer-events:none;
  -webkit-mask-image:var(--wm);mask-image:var(--wm);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.mark .iri{
  background:linear-gradient(96deg,#C9D4FF,#F4ECFF 22%,#D96BFF 48%,#A99EE5 66%,#FFE3AE 84%,#C9D4FF);
  background-size:230% 100%;mix-blend-mode:screen;opacity:.72;
  animation:iri 11s ease-in-out infinite alternate;
}
.mark .glint{
  background:linear-gradient(104deg,rgba(255,255,255,0) 34%,rgba(255,255,255,.98) 46%,
    rgba(255,236,255,.85) 50%,rgba(255,255,255,.98) 54%,rgba(255,255,255,0) 66%);
  background-size:280% 100%;mix-blend-mode:screen;
  animation:glint 6.4s cubic-bezier(.55,0,.3,1) infinite;
}
/* a second, narrower pass at the opposite rake */
.mark .glint2{
  background:linear-gradient(-72deg,rgba(255,255,255,0) 40%,rgba(214,240,255,.9) 49%,
    rgba(255,255,255,0) 58%);
  background-size:320% 100%;mix-blend-mode:screen;opacity:.85;
  animation:glint2 9.1s cubic-bezier(.4,0,.25,1) infinite;
}
/* glitter: a fine field of specks that twinkle inside the letterforms */
.mark .dust{
  background-image:
    radial-gradient(circle at 18% 30%,rgba(255,255,255,.95) 0 1.1px,transparent 1.6px),
    radial-gradient(circle at 63% 68%,rgba(246,212,143,.95) 0 1.0px,transparent 1.5px),
    radial-gradient(circle at 84% 22%,rgba(110,201,232,.95) 0 1.0px,transparent 1.5px),
    radial-gradient(circle at 39% 84%,rgba(213,139,232,.95) 0 1.1px,transparent 1.6px);
  background-size:37px 29px,53px 41px,61px 47px,43px 33px;
  mix-blend-mode:screen;
  animation:dustA 3.1s steps(1,end) infinite, dustB 17s linear infinite;
}
@keyframes glint2{0%{background-position:-40% 0}62%,100%{background-position:220% 0}}
@keyframes dustA{0%{opacity:.15}25%{opacity:.85}50%{opacity:.35}75%{opacity:1}100%{opacity:.15}}
@keyframes dustB{to{background-position:37px 29px,-53px 41px,61px -47px,-43px -33px}}
@keyframes iri{0%{background-position:0% 0}100%{background-position:100% 0}}
@keyframes glint{0%{background-position:200% 0}46%,100%{background-position:-90% 0}}
.mark--hero .glint{animation-duration:4.6s}
/* the mark blinks like a signal finding its footing, then holds */
.mark--hero img{animation:blink 6.4s steps(1,end) infinite}
.mark--hero .iri{animation:iri 8s ease-in-out infinite alternate, flare 6.4s steps(1,end) infinite}
@keyframes blink{
  0%,72%{opacity:.92}
  73%{opacity:.24}74%{opacity:1}
  76%{opacity:.30}77.5%{opacity:1}
  84%{opacity:.62}85%{opacity:1}
  100%{opacity:.92}
}
@keyframes flare{
  0%,72%{opacity:.86}
  73%{opacity:.10}74%{opacity:1}
  76%{opacity:.16}77.5%{opacity:.95}
  100%{opacity:.86}
}
@media(prefers-reduced-motion:reduce){.mark--hero img,.mark--hero .iri{animation:none;opacity:.92}}
.mark--hero .glint2{animation-duration:6.8s}
.mark--hero .dust{background-size:54px 42px,76px 59px,88px 68px,62px 48px}
.mark--hero .iri{opacity:.86;animation-duration:8s}
/* ── the wordmark, letter by letter ───────────────────────────
   The artwork is sliced by clip-path into its own letterforms, each
   one carrying the full mask. Every letter can then breathe, glimmer
   and answer the cursor on its own beat. */
.mark--hero{pointer-events:auto;cursor:default}
/* nothing in the hero is simply there when the loader lifts */
html:not(.arrived) .mark--hero .ltr{opacity:0;transform:translate3d(0,1.15em,0) scale(.965);animation:none}
html:not(.arrived) .mark--hero img,html:not(.arrived) .mark--hero .iri{opacity:0}
html.arrived .mark--hero .ltr{transition-delay:calc(var(--i) * 0.085s + .30s)}
html.arrived .mark--hero img,html.arrived .mark--hero .iri{transition:opacity 2.2s ease .2s}
html:not(.arrived) .portal,html:not(.arrived) .hud{opacity:0;transform:translate3d(0,26px,0)}
.portal,.hud{transition:opacity 2s cubic-bezier(.2,.7,.15,1) 1.15s,transform 2s cubic-bezier(.2,.7,.15,1) 1.15s}
@media(prefers-reduced-motion:reduce){
  html:not(.arrived) .mark--hero .ltr,html:not(.arrived) .portal,html:not(.arrived) .hud,
  html:not(.arrived) .mark--hero img,html:not(.arrived) .mark--hero .iri{opacity:1;transform:none}
}
.mark--hero img{opacity:.26;animation:none;filter:drop-shadow(0 0 18px rgba(168,85,247,.22))}
.mark--hero .iri{opacity:.30;animation:iri 9s ease-in-out infinite alternate}
.mark--hero .ltr{
  position:absolute;inset:0;pointer-events:none;
  /* two masks intersected: the letterform, and a feathered window over
     just this letter. Soft edges mean the light travels letter to letter
     without a seam ever cutting a glyph. */
  -webkit-mask-image:var(--wm),linear-gradient(90deg,
    transparent var(--l),#000 calc(var(--l) + 1.1%),
    #000 calc(var(--r) - 1.1%),transparent var(--r));
  mask-image:var(--wm),linear-gradient(90deg,
    transparent var(--l),#000 calc(var(--l) + 1.1%),
    #000 calc(var(--r) - 1.1%),transparent var(--r));
  -webkit-mask-size:100% 100%,100% 100%;mask-size:100% 100%,100% 100%;
  -webkit-mask-repeat:no-repeat,no-repeat;mask-repeat:no-repeat,no-repeat;
  -webkit-mask-composite:source-in;mask-composite:intersect;
  background:linear-gradient(176deg,#FFFFFF,#F2F6FF 22%,#C9D4FF 46%,#F4ECFF 68%,#FFE8BE);
  mix-blend-mode:screen;opacity:.44;
  transform:translate3d(0,0,0);
  transition:opacity .5s ease,transform .8s cubic-bezier(.2,.8,.2,1),filter .55s ease;
  animation:ltrBreathe 7.2s ease-in-out infinite;
  animation-delay:calc(var(--i) * 0.155s);
  will-change:opacity,transform,filter;
}
/* glitter living inside each letterform */
.mark--hero .ltr::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    radial-gradient(circle at 22% 28%,rgba(255,255,255,.9) 0 .9px,transparent 1.5px),
    radial-gradient(circle at 68% 64%,rgba(255,235,196,.85) 0 .8px,transparent 1.4px),
    radial-gradient(circle at 44% 82%,rgba(213,139,232,.85) 0 .8px,transparent 1.4px);
  background-size:58px 44px,79px 61px,67px 52px;
  mix-blend-mode:screen;
  animation:ltrGlitter 2.6s steps(1,end) infinite,dustB 21s linear infinite;
  animation-delay:calc(var(--i) * 0.09s),0s;
}
@keyframes ltrBreathe{
  0%,100%{opacity:.40;filter:none}
  30%{opacity:1;filter:drop-shadow(0 0 10px rgba(226,240,255,.85)) drop-shadow(0 0 26px rgba(168,85,247,.5))}
  36%{opacity:.52}
  41%{opacity:.97;filter:drop-shadow(0 0 12px rgba(255,255,255,.9))}
  58%{opacity:.44;filter:none}
}
@keyframes ltrGlitter{0%{opacity:.1}30%{opacity:.9}55%{opacity:.25}80%{opacity:1}100%{opacity:.1}}
/* the cursor lands and the word answers, letter after letter */
.mark--hero:hover .ltr{
  opacity:1;
  transform:translateY(-.085em) scale(1.014);
  filter:drop-shadow(0 0 16px rgba(255,255,255,.92)) drop-shadow(0 0 38px rgba(213,139,232,.72));
  transition-delay:calc(var(--i) * 0.038s);
  animation-play-state:paused;
}
.mark--hero:hover .ltr::after{animation-duration:1.1s,21s}
@media(hover:none){.mark--hero:hover .ltr{transform:none}}
@media(prefers-reduced-motion:reduce){
  .mark--hero .ltr,.mark--hero .ltr::after{animation:none}
  .mark--hero .ltr{opacity:.9}
  .mark--hero:hover .ltr{transform:none;filter:none}
}
/* ── TECHNOLOGY FOR THE SOUL ──────────────────────────────────
   The statement carries the hero now. It is silver-lit, dusted with
   glitter, and every so often the signal slips for a few frames —
   a glitch that reads as transmission, never as breakage. */
.tfs{
  margin:0 0 clamp(.8rem,2.4vh,1.6rem);text-align:center;line-height:.90;
  font-family:var(--ff-display);font-weight:500;
  letter-spacing:.02em;text-transform:none;
  filter:drop-shadow(0 0 40px rgba(168,85,247,.30));
}
.tfs-l{display:block;position:relative}
.tfs-l i{
  position:relative;display:inline-block;font-style:normal;
  font-size:clamp(1.05rem,5.2vw,4.6rem);
  background-image:
    radial-gradient(circle at 18% 24%,rgba(255,255,255,.95) 0 1px,transparent 2px),
    radial-gradient(circle at 63% 71%,rgba(255,235,196,.9) 0 1px,transparent 2px),
    radial-gradient(circle at 86% 38%,rgba(213,139,232,.9) 0 1px,transparent 2px),
    linear-gradient(174deg,#FFFFFF,#EFF3FF 20%,#C9D4FF 44%,#F4ECFF 66%,#FFE8BE 88%,#FFFFFF);
  background-size:44px 34px,61px 47px,53px 41px,100% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  animation:tfsDust 3.4s steps(1,end) infinite,tfsDrift 26s linear infinite;
}
.tfs-em i{
  font-size:clamp(1.05rem,5.2vw,4.6rem);letter-spacing:.035em;white-space:nowrap;
  background-image:
    radial-gradient(circle at 30% 30%,rgba(255,255,255,.98) 0 1.2px,transparent 2.2px),
    radial-gradient(circle at 72% 66%,rgba(255,235,196,.95) 0 1.1px,transparent 2px),
    radial-gradient(circle at 50% 88%,rgba(213,139,232,.95) 0 1.1px,transparent 2px),
    linear-gradient(172deg,#FFFFFF,#FFF6E2 26%,#FFE8BE 52%,#F4ECFF 74%,#FFFFFF);
  background-size:52px 40px,71px 55px,63px 49px,100% 100%;
}
@keyframes tfsDust{0%{opacity:.94}22%{opacity:1}48%{opacity:.9}74%{opacity:1}100%{opacity:.94}}
@keyframes tfsDrift{to{background-position:44px 34px,-61px 47px,53px -41px,0 0}}
/* the two ghosts of a signal that has not quite settled */
.tfs-l i::before,.tfs-l i::after{
  content:attr(data-t);position:absolute;left:0;top:0;width:100%;
  -webkit-background-clip:border-box;background-clip:border-box;background-image:none;
  pointer-events:none;opacity:0;
}
.tfs-l i::before{color:#6EC9E8;animation:glA 8.5s steps(1,end) infinite}
.tfs-l i::after{color:#D96BFF;animation:glB 8.5s steps(1,end) infinite}
.tfs-l:nth-child(2) i::before,.tfs-l:nth-child(2) i::after{animation-delay:.28s}
.tfs-em i::before,.tfs-em i::after{animation-delay:.52s}
@keyframes glA{
  0%,90.5%{opacity:0;transform:none;clip-path:none}
  91%{opacity:.85;transform:translate3d(-.045em,-.012em,0);clip-path:inset(14% 0 62% 0)}
  92%{opacity:.7;transform:translate3d(.05em,.014em,0);clip-path:inset(58% 0 18% 0)}
  93%{opacity:.9;transform:translate3d(-.03em,0,0);clip-path:inset(36% 0 42% 0)}
  94%,100%{opacity:0;transform:none;clip-path:none}
}
@keyframes glB{
  0%,90.8%{opacity:0;transform:none;clip-path:none}
  91.3%{opacity:.8;transform:translate3d(.05em,.012em,0);clip-path:inset(22% 0 54% 0)}
  92.4%{opacity:.65;transform:translate3d(-.04em,-.016em,0);clip-path:inset(66% 0 10% 0)}
  93.4%{opacity:.85;transform:translate3d(.03em,0,0);clip-path:inset(46% 0 34% 0)}
  94.4%,100%{opacity:0;transform:none;clip-path:none}
}
html:not(.arrived) .tfs-l i{opacity:0;transform:translate3d(0,.5em,0);filter:blur(12px)}
html.arrived .tfs-l i{transition:opacity 1.8s cubic-bezier(.18,.72,.14,1),transform 1.8s cubic-bezier(.18,.72,.14,1),filter 1.8s cubic-bezier(.18,.72,.14,1)}
html.arrived .tfs-l:nth-child(2) i{transition-delay:.22s}
html.arrived .tfs-em i{transition-delay:.46s}
@media(prefers-reduced-motion:reduce){
  .tfs-l i,.tfs-l i::before,.tfs-l i::after{animation:none}
  html:not(.arrived) .tfs-l i{opacity:1;transform:none;filter:none}
}

/* ── THE HERO ─────────────────────────────────────────────────
   Rule · mark · statement · line. The oldest structure in poster
   design, because it is the one the eye finishes. */
.hero-eye{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(.9rem,2.4vw,1.8rem);margin:0 0 clamp(1.1rem,3vh,2rem);
  font-family:var(--ff-display);font-weight:500;
  font-size:clamp(.52rem,.72vw,.64rem);letter-spacing:.62em;
  text-transform:uppercase;color:var(--moonstone);padding-left:.62em;
  text-shadow:0 0 10px rgba(30,27,94,1),0 0 26px rgba(30,27,94,.95),0 0 52px rgba(30,27,94,.8);
}
.hero-eye em{
  display:block;height:1px;width:clamp(2.2rem,7vw,6rem);
  background:linear-gradient(90deg,transparent,rgba(199,212,255,.75),transparent);
  box-shadow:0 0 8px rgba(30,27,94,.9);
}
.hero-sub{
  margin:clamp(1.1rem,3vh,1.9rem) 0 0;
  font-family:var(--ff-edit);font-style:italic;font-weight:300;
  font-size:clamp(1.05rem,1.8vw,1.6rem);letter-spacing:.01em;
  color:var(--pearl);
  text-shadow:0 0 10px rgba(30,27,94,1),0 0 28px rgba(30,27,94,.95),0 0 60px rgba(30,27,94,.85);
}
html:not(.arrived) .hero-eye,html:not(.arrived) .hero-sub{opacity:0;transform:translate3d(0,16px,0);filter:blur(8px)}
.hero-eye{transition:opacity 1.6s cubic-bezier(.2,.7,.15,1) .15s,transform 1.6s cubic-bezier(.2,.7,.15,1) .15s,filter 1.6s cubic-bezier(.2,.7,.15,1) .15s}
.hero-sub{transition:opacity 1.6s cubic-bezier(.2,.7,.15,1) 1.05s,transform 1.6s cubic-bezier(.2,.7,.15,1) 1.05s,filter 1.6s cubic-bezier(.2,.7,.15,1) 1.05s}
/* the ground the figure stands on, so the hero has a floor */
.chapter[data-ch="0"]::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:34vh;
  pointer-events:none;z-index:0;
  background:linear-gradient(to top,rgba(30,27,94,.72),rgba(30,27,94,.22) 46%,transparent);
}
/* the statement drifts against the pointer — depth without motion sickness */
.tfs,.hero-eye,.hero-sub{will-change:transform}
@media(prefers-reduced-motion:reduce){
  html:not(.arrived) .hero-eye,html:not(.arrived) .hero-sub{opacity:1;transform:none;filter:none}
}

/* ── THE AURA ─────────────────────────────────────────────────
   Pure design, no controls: four rings leaving the figure on a long
   offset cadence, the way a frequency leaves a body. */
.aura{
  position:absolute;left:50%;top:52%;width:0;height:0;
  pointer-events:none;z-index:0;
}
.aura i{
  position:absolute;left:50%;top:50%;
  width:26rem;height:26rem;margin:-13rem 0 0 -13rem;border-radius:50%;
  border:1px solid rgba(182,168,240,.34);
  box-shadow:0 0 26px rgba(109,75,240,.18),inset 0 0 26px rgba(109,75,240,.10);
  opacity:0;animation:ripple 13s cubic-bezier(.16,.6,.2,1) infinite;
}
.aura i:nth-child(2){animation-delay:3.25s;border-color:rgba(246,212,143,.30)}
.aura i:nth-child(3){animation-delay:6.5s;border-color:rgba(110,201,232,.28)}
.aura i:nth-child(4){animation-delay:9.75s;border-color:rgba(213,139,232,.28)}
html:not(.arrived) .aura{opacity:0}
.aura{transition:opacity 2.4s ease 1.2s}
@keyframes ripple{
  0%{transform:scale(.10);opacity:0}
  14%{opacity:.62}
  100%{transform:scale(2.9);opacity:0}
}


/* ── THE DOORWAY ──────────────────────────────────────────────
   Two leaves that part as you travel, and an arrow that draws
   itself down into the city. --d is scroll, 0 → 1. */
.door{
  --d:0;
  position:absolute;left:50%;bottom:clamp(4.6rem,10.5vh,7.4rem);
  transform:translateX(-50%);display:block;margin:0;
  width:clamp(3.6rem,5.2vw,4.6rem);height:clamp(5.4rem,8vw,7rem);z-index:4;
  color:inherit;isolation:isolate;
}
.door-jamb,.door-leaf,.door-light{display:none!important}
.door-jamb--retired{
  position:absolute;inset:0;border-radius:50% 50% 4px 4px/34% 34% 4px 4px;
  border:1.5px solid rgba(199,212,255,.72);
  background:radial-gradient(130% 105% at 50% 100%,rgba(30,27,94,.42),rgba(30,27,94,.86));
  box-shadow:0 0 52px rgba(109,75,240,.34),inset 0 0 66px rgba(109,75,240,.22);
  transition:border-color .8s,box-shadow .8s;
}
.door-light{
  position:absolute;left:50%;top:56%;width:120%;height:120%;
  transform:translate(-50%,-50%) scale(calc(.35 + var(--d) * .95));
  background:radial-gradient(circle,rgba(255,235,196,.55),rgba(213,139,232,.22) 38%,transparent 68%);
  opacity:calc(.20 + var(--d) * .8);filter:blur(6px);pointer-events:none;
}
.door-leaf{
  position:absolute;top:0;bottom:0;width:50%;
  background:linear-gradient(180deg,rgba(23,16,67,.70),rgba(30,27,94,.86));
  border:1px solid rgba(182,168,240,.34);
  box-shadow:inset 0 0 30px rgba(109,75,240,.22);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  backface-visibility:hidden;
  transition:transform 1.1s cubic-bezier(.2,.7,.15,1),opacity 1.1s;
}
.door-leaf.dl{left:0;transform-origin:left center;border-radius:50% 0 0 0/34% 0 0 0;
  transform:perspective(900px) rotateY(calc(var(--d) * -82deg));
  opacity:calc(1 - var(--d) * .38)}
.door-leaf.dr{right:0;transform-origin:right center;border-radius:0 50% 0 0/0 34% 0 0;
  transform:perspective(900px) rotateY(calc(var(--d) * 82deg));
  opacity:calc(1 - var(--d) * .38)}
.door-arrow{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:78%;height:auto;overflow:visible;pointer-events:none;
  opacity:calc(.45 + var(--d) * .55);
}
.door-arrow .da-ghost{fill:none;stroke:rgba(199,212,255,.62);stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-dashoffset:0}
/* the same signal slip that runs through the statement above */
.da-gh path{fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:none;stroke-dashoffset:0}
.da-gh{opacity:0;transform-origin:50% 50%}
.da-gh.a path{stroke:#6EC9E8}
.da-gh.b path{stroke:#D96BFF}
.da-gh.a{animation:agA 8.5s steps(1,end) infinite}
.da-gh.b{animation:agB 8.5s steps(1,end) infinite .18s}
@keyframes agA{
  0%,90.5%{opacity:0;transform:none}
  91%{opacity:.85;transform:translate(-1.6px,-.6px)}
  92%{opacity:.6;transform:translate(1.8px,.7px)}
  93%{opacity:.9;transform:translate(-1.1px,0)}
  94%,100%{opacity:0;transform:none}
}
@keyframes agB{
  0%,90.8%{opacity:0;transform:none}
  91.4%{opacity:.8;transform:translate(1.7px,.5px)}
  92.5%{opacity:.55;transform:translate(-1.5px,-.8px)}
  93.5%{opacity:.85;transform:translate(1px,0)}
  94.5%,100%{opacity:0;transform:none}
}
/* glitter running down the sign */
.da-spark circle{fill:#FFFFFF;opacity:0;
  filter:drop-shadow(0 0 5px rgba(255,235,196,.95));
  animation:spk 3.6s ease-in-out infinite}
.da-spark circle:nth-child(2){animation-delay:.42s}
.da-spark circle:nth-child(3){animation-delay:.84s}
.da-spark circle:nth-child(4){animation-delay:1.2s}
.da-spark circle:nth-child(5){animation-delay:1.34s}
.da-spark circle:nth-child(6){animation-delay:1.7s}
@keyframes spk{0%,72%{opacity:0}80%{opacity:.95}88%{opacity:.2}94%{opacity:.75}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.da-gh,.da-spark circle{animation:none}}
.door-arrow .da-stem,.door-arrow .da-head{fill:none;stroke:var(--gold-hi);stroke-width:3.4;
  stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 14px rgba(246,212,143,.85)) drop-shadow(0 0 34px rgba(217,107,255,.4));
  stroke-dasharray:var(--L,120);
  stroke-dashoffset:calc(var(--L,120) * (1 - var(--d)))}
.door-label{
  position:absolute;left:50%;bottom:-1.9rem;transform:translateX(-50%);
  font-family:var(--ff-display);font-size:.58rem;letter-spacing:.42em;
  text-transform:uppercase;color:var(--moonstone);white-space:nowrap;padding-left:.42em;
  text-shadow:0 0 20px rgba(30,27,94,.95),0 0 40px rgba(30,27,94,.8);
  transition:color .5s;
}
.door:hover .door-jamb{border-color:rgba(246,212,143,.5);box-shadow:0 0 66px rgba(246,212,143,.3),inset 0 0 70px rgba(109,75,240,.24)}
.door:hover .door-label{color:var(--gold-hi)}
.door:focus-visible{outline:1px solid var(--moonstone);outline-offset:16px;border-radius:8px}
@media(prefers-reduced-motion:reduce){
  .door{--d:1}
  .door-leaf{display:none}
}

/* the dot fields are gone: the light in this city comes from the field,
   not from a lattice of specks laid over it */
.motes{display:none!important}

/* the nav glyph is now the complete lockup, so the separate wordmark
   beside it would be the name twice */
.mark--nav{display:none}
@media(max-width:540px){.mark--nav{display:none}}
.mark--hero{width:min(94vw,78rem);margin:0 auto .6rem}
.mark--foot{width:clamp(11rem,20vw,16rem)}
@media(prefers-reduced-motion:reduce){.mark .glint,.mark .glint2,.mark .dust{animation:none;opacity:.18}.mark .iri{animation:none}}

/* ── THE LOGO ─────────────────────────────────────────────────── */
.logo{display:inline-block;line-height:0}
.logo img{display:block;width:100%;height:auto;
  filter:drop-shadow(0 0 22px rgba(168,85,247,.45)) drop-shadow(0 0 56px rgba(109,75,240,.20))}
.lockup{display:inline-flex;align-items:center;gap:.95rem}
.lockup-glyph{display:block;height:clamp(2.5rem,3.4vw,3.2rem);width:auto;
  mix-blend-mode:screen;
  filter:brightness(1.12) saturate(1.04)
         drop-shadow(0 0 12px rgba(168,85,247,.42));}
@media(max-width:700px){.lockup{gap:.6rem}.lockup-glyph{width:2rem}}

/* ── THE THRESHOLD ────────────────────────────────────────────── */
.portal{
  position:relative;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  width:clamp(12.5rem,19vw,16.5rem);aspect-ratio:1;margin-top:clamp(1.5rem,4vh,3rem);
  border-radius:50%;isolation:isolate;
}
.portal-ring,.portal-ring2{position:absolute;inset:0;border-radius:50%;pointer-events:none;
  border:1px solid rgba(199,212,255,.45);transition:border-color .6s,transform .8s cubic-bezier(.2,.7,.2,1)}
.portal-ring2{inset:-14%;border-color:rgba(217,107,255,.26);animation:emit 4.6s cubic-bezier(.3,0,.2,1) infinite}
@keyframes emit{0%{transform:scale(.86);opacity:0}40%{opacity:.7}100%{transform:scale(1.24);opacity:0}}
.portal-core{position:absolute;inset:12%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 42% 34%,rgba(255,255,255,.32),rgba(168,85,247,.30) 42%,rgba(30,27,94,0) 72%);
  transition:transform .8s cubic-bezier(.2,.7,.2,1),opacity .8s}
.portal-mesh{position:absolute;inset:-3%;pointer-events:none;opacity:.5;animation:spin 34s linear infinite}
.portal-mesh circle{fill:none;stroke:rgba(255,196,107,.36);stroke-width:.6}
.portal-label{position:relative;z-index:2;font-family:var(--ff-display);font-weight:500;
  font-size:clamp(.66rem,1.05vw,.8rem);letter-spacing:.34em;text-transform:uppercase;
  color:var(--moonlit);padding-left:.34em;text-align:center;line-height:1.6}
.portal:hover .portal-core,.portal:focus-visible .portal-core{transform:scale(1.16);opacity:.92}
.portal:hover .portal-ring,.portal:focus-visible .portal-ring{border-color:rgba(255,227,174,.8);transform:scale(1.05)}
.portal::after{content:"";position:absolute;inset:-32%;border-radius:50%;pointer-events:none;z-index:-1;
  background:radial-gradient(circle,rgba(168,85,247,.32),transparent 62%);opacity:0;transition:opacity .8s}
.portal:hover::after,.portal:focus-visible::after{opacity:1}
.portal-sub{margin-top:1.4rem;font-family:var(--ff-edit);font-style:italic;
  font-size:clamp(1rem,1.4vw,1.2rem);color:var(--tx-mute)}

/* ── THE READOUT ──────────────────────────────────────────────── */
.hud{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.hud b{position:absolute;display:block;
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-weight:400;
  font-size:clamp(.54rem,.7vw,.66rem);letter-spacing:.16em;
  color:rgba(199,212,255,.46);white-space:nowrap;font-variant-numeric:tabular-nums}
.hud b i{font-style:normal;color:rgba(255,196,107,.62);margin-right:.7em;letter-spacing:.3em}
.hud b.lock{color:rgba(255,227,174,.95);text-shadow:0 0 16px rgba(255,196,107,.55)}
.hud .geo{position:absolute;left:50%;top:50%;width:0;height:0}
.hud .geo svg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);overflow:visible}
.hud .geo svg circle,.hud .geo svg polygon{fill:none;stroke:rgba(182,168,240,.15);stroke-width:.5}
.geo-a{animation:spin 120s linear infinite}
.geo-b{animation:spin 78s linear infinite reverse}
.geo-c{animation:spin 190s linear infinite}
@media(max-width:760px){.hud b{font-size:.5rem;letter-spacing:.1em}.hud b.h-hide{display:none}}
@media(prefers-reduced-motion:reduce){.geo-a,.geo-b,.geo-c,.portal-ring2,.portal-mesh{animation:none}}

/* ── DRIFTING VEILS ~ the unfolding, without any blink ────────── */
.veil{position:absolute;inset:-18%;pointer-events:none;
  background:
    radial-gradient(38% 30% at 22% 28%,rgba(213,139,232,.30),transparent 70%),
    radial-gradient(34% 28% at 78% 62%,rgba(110,201,232,.24),transparent 70%),
    radial-gradient(46% 34% at 52% 88%,rgba(122,75,168,.34),transparent 72%);
  animation:veilA 34s ease-in-out infinite alternate}
.veil.b{background:
    radial-gradient(30% 24% at 68% 22%,rgba(246,212,143,.16),transparent 70%),
    radial-gradient(42% 32% at 30% 74%,rgba(109,75,240,.30),transparent 72%);
  animation:veilB 46s ease-in-out infinite alternate}
@keyframes veilA{to{transform:translate3d(-3%,4%,0) scale(1.10)}}
@keyframes veilB{to{transform:translate3d(4%,-5%,0) scale(1.14)}}
.motes{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    radial-gradient(circle at 20% 30%,rgba(255,255,255,.55) 0 1px,transparent 2px),
    radial-gradient(circle at 66% 72%,rgba(199,212,255,.45) 0 1px,transparent 2px);
  background-size:16vmin 13vmin,25vmin 19vmin;
  animation:veilB 60s linear infinite alternate}
@media(prefers-reduced-motion:reduce){.veil,.veil.b,.motes{animation:none}}

/* ── THE WELCOME ──────────────────────────────────────────────── */
.chapter--welcome{overflow:clip;justify-content:center;text-align:center;
  padding:clamp(7rem,14vh,10rem) var(--gut)}
.chapter--welcome .inner{max-width:min(94vw,64rem);margin-inline:auto;position:relative;z-index:2}
.chapter--welcome .inner::before{inset:-40% -18%;
  background:radial-gradient(58% 54% at 50% 50%,rgba(30,27,94,.72),rgba(30,27,94,.34) 52%,transparent 80%)}
.wel-pre{font-family:var(--ff-ui);font-weight:300;
  font-size:clamp(.62rem,1.1vw,.8rem);letter-spacing:.5em;text-transform:uppercase;
  color:var(--gold);padding-left:.5em;margin-bottom:1.6rem}
.mark--welcome{display:block;width:100%;max-width:min(86vw,58rem);margin:0 auto}
.mark--welcome .glint{animation-duration:3.9s}
.mark--welcome img{filter:drop-shadow(0 0 40px rgba(213,139,232,.55)) drop-shadow(0 0 110px rgba(110,201,232,.3))}
.wel-post{margin-top:1.9rem;font-family:var(--ff-edit);font-style:italic;
  font-size:clamp(1.1rem,2vw,1.6rem);color:var(--tx-mute)}
.wel-rings{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(120vw,90rem);pointer-events:none;z-index:1;opacity:.5}
.wel-rings svg{width:100%;height:auto;overflow:visible;animation:spin 150s linear infinite}
.wel-rings circle{fill:none;stroke:rgba(246,212,143,.22);stroke-width:.5}
.wel-rings circle:nth-child(2){stroke:rgba(213,139,232,.20)}
.wel-rings circle:nth-child(3){stroke:rgba(110,201,232,.18)}
@media(prefers-reduced-motion:reduce){.wel-rings svg{animation:none}}

/* ── THE DECK ─────────────────────────────────────────────────
   Three cards, face down. Each one turns as you travel past it —
   the geometry on its back rotating away, the meaning arriving.
   --f is scroll through that card, 0 → 1. */
.phil-ch.tarot{
  --f:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  perspective:1800px;padding:clamp(6rem,13vh,9rem) var(--gut);
}
.tcard{
  position:relative;
  width:min(88vw,25rem);height:min(66vh,36rem);height:min(66svh,36rem);
  transform-style:preserve-3d;
  transform:rotateY(calc(var(--f) * 180deg)) translateZ(0)
            scale(calc(.94 + var(--f) * .06));
  transition:transform .18s linear;
  will-change:transform;
}
.tface{
  position:absolute;inset:0;border-radius:14px;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  display:flex;flex-direction:column;
  padding:clamp(1.6rem,3.4vw,2.6rem);
  overflow:hidden;
  box-shadow:0 30px 90px rgba(6,4,24,.72),0 0 0 1px rgba(182,168,240,.30) inset;
}
.tedge{
  position:absolute;inset:10px;border-radius:8px;pointer-events:none;
  border:1px solid rgba(246,212,143,.34);
}
.tback{
  background:
    radial-gradient(120% 90% at 50% 0%,rgba(122,75,168,.42),transparent 62%),
    linear-gradient(170deg,#2E2486,#1E1B5E 62%,#241F70);
  align-items:center;justify-content:center;
}
.card-geo{width:88%;height:auto;overflow:visible;opacity:.85;
  animation:spin 150s linear infinite}
.card-geo.face{
  position:absolute;left:50%;top:30%;width:112%;
  transform:translate(-50%,-50%);opacity:.30;
  animation:spin 210s linear infinite reverse;
}
.card-geo.face circle{stroke:rgba(199,212,255,.34)}
.tfront > *:not(.card-geo){position:relative;z-index:1}
.card-geo circle,.card-geo polygon{
  fill:none;stroke:rgba(246,212,143,.42);stroke-width:.5;
  filter:drop-shadow(0 0 5px rgba(246,212,143,.35))}
.tback .tnum{
  position:absolute;bottom:clamp(1.4rem,3vw,2.2rem);left:50%;transform:translateX(-50%);
  font-family:var(--ff-display);font-size:.72rem;letter-spacing:.44em;
  color:var(--gold-hi);padding-left:.44em;
}
.tfront{
  transform:rotateY(180deg);
  background:
    radial-gradient(110% 80% at 50% 0%,rgba(109,75,240,.30),transparent 58%),
    linear-gradient(168deg,#2B2680,#1E1B5E 70%);
  justify-content:flex-start;
}
.tfront .tnum{
  font-family:var(--ff-display);font-size:.62rem;letter-spacing:.44em;
  color:var(--gold);padding-left:.44em;margin-bottom:auto;
}
.tname{
  margin:0 0 1.2rem;font-family:var(--ff-edit);font-weight:300;
  font-size:clamp(2.1rem,5.6vw,3.2rem);line-height:1;letter-spacing:-.01em;
  color:var(--gold-hi);text-shadow:0 0 44px rgba(246,212,143,.4);
}
.tcopy p{
  margin:0 0 1rem;font-family:var(--ff-edit);
  font-size:clamp(.98rem,1.35vw,1.14rem);line-height:1.62;color:var(--tx-mute);
}
.tcopy p:last-child{margin-bottom:0}
.tcaption{
  margin-top:clamp(1.6rem,3.4vh,2.4rem);
  font-family:var(--ff-display);font-size:.56rem;letter-spacing:.42em;
  text-transform:uppercase;color:var(--tx-faint);padding-left:.42em;
  opacity:calc(.25 + var(--f) * .75);transition:opacity .5s;
}
@media(prefers-reduced-motion:reduce){
  .phil-ch.tarot{--f:1}
  .card-geo{animation:none}
  .tcard{transition:none}
}



/* ── THE CARD EMBLEMS ─────────────────────────────────────────
   Each face carries the drawing of its own idea, in the same gold
   line the deck is built from. The lines draw themselves as the card
   turns (--f), then keep a slow breath of their own.
   I   Alternative ~ a path that leaves the grid for the moon
   II  Preventive  ~ a seedling's first signal, read early
   III Integrative ~ seven pathways held as one whole */
.tfront .tnum{margin-bottom:0}
.tglyph{flex:1 1 auto;min-height:5.5rem;display:flex;align-items:center;justify-content:center;
  margin:.6rem 0 1rem}
.tglyph svg{width:100%;height:100%;max-height:12.5rem;overflow:visible}
.tglyph .g-line,.tglyph .g-faint{
  fill:none;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1 1;
  stroke-dashoffset:calc(1 - clamp(0, (var(--f) - .42 - var(--d,0) * .6) * 4.5, 1));
}
.tglyph .g-line{stroke:rgba(246,212,143,.9);stroke-width:1.1}
.tglyph .g-faint{stroke:rgba(199,212,255,.30);stroke-width:.7}
.tglyph .g-dash{stroke-dasharray:1 1;opacity:.8}
.tglyph .g-glow{filter:drop-shadow(0 0 4px rgba(246,212,143,.65))}
.tglyph .g-dot,.tglyph .g-star{
  fill:var(--gold-hi);
  opacity:clamp(0, (var(--f) - .42 - var(--d,0) * .6) * 4.5, 1);
}
.tglyph .g-star{filter:drop-shadow(0 0 3px rgba(255,235,196,.9))}
.tglyph .g-core{filter:drop-shadow(0 0 6px rgba(255,235,196,.95))}
.tglyph .g-moon{fill:rgba(246,212,143,.10)}
.tglyph .g-leaf{fill:rgba(110,201,232,.10);stroke:rgba(207,239,255,.85)}
.tglyph .g-step{fill:var(--orchid)}
.tglyph .g-ripc{stroke:var(--orchid);stroke-width:.9}
.tglyph .g-spoke{stroke:rgba(246,212,143,.55);stroke-width:.7}
.tglyph .g-hept{stroke:rgba(213,139,232,.34)}
.tglyph .g-orch .g-line{stroke:var(--orchid)}.tglyph .g-orch .g-dot{fill:var(--orchid)}
.tglyph .g-cyan .g-line{stroke:var(--cyan)}.tglyph .g-cyan .g-dot{fill:var(--ice)}
/* the slow breath, once drawn */
.tglyph .g-tw{animation:gTw 3.8s ease-in-out infinite}
.tglyph .g-tw.b{animation-delay:-1.9s}
@keyframes gTw{50%{fill-opacity:.25}}
.tglyph .g-ripple{transform-box:view-box;transform-origin:100px 70px;
  animation:gRip 4.2s cubic-bezier(.3,.6,.3,1) infinite;animation-delay:calc(var(--i) * .5s)}
@keyframes gRip{0%,100%{transform:scale(.94);opacity:.55}50%{transform:scale(1.07);opacity:1}}
.tglyph--int svg{transform-origin:50% 50%}
.tglyph--int .g-hept{transform-box:view-box;transform-origin:100px 70px;animation:spin 120s linear infinite}
.tglyph .g-core{animation:gBreath 3.6s ease-in-out infinite}
@keyframes gBreath{50%{fill-opacity:.55}}
@media (max-height:700px) and (min-width:760px){.tglyph{min-height:4rem;margin:.3rem 0 .7rem}}
@media(prefers-reduced-motion:reduce){
  .tglyph *{animation:none!important}
}
/* ── THE HOLD ─────────────────────────────────────────────────
   The chapter is tall; the card is pinned inside it. Turn first,
   then a long, still read. */
.phil-ch.tarot{display:block;height:260vh;height:260svh;min-height:0;padding:0}
.tstick{position:sticky;top:0;height:100vh;height:100svh;box-sizing:border-box;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  perspective:1800px;
  padding:clamp(4.6rem,10vh,6.5rem) var(--gut) clamp(1.2rem,3.5vh,2.6rem)}
.tcard{height:min(calc(100vh - 12rem),36rem);height:min(calc(100svh - 12rem),36rem);min-height:24rem}
.tcaption{margin-top:clamp(1rem,2.6vh,2rem)}
@media (max-width:759px){
  .phil-ch.tarot{height:240vh;height:240svh}
  .tstick{padding:4.4rem 1rem 1rem}
  .tcard{width:min(92vw,25rem);height:calc(100vh - 8.6rem);height:calc(100svh - 8.6rem);max-height:40rem;min-height:0}
  .tface{padding:1.5rem 1.35rem}
  .tname{font-size:clamp(1.9rem,8.4vw,2.4rem);margin-bottom:.8rem}
  .tcopy p{font-size:clamp(.92rem,3.9vw,1.02rem);line-height:1.55;margin-bottom:.7rem}
  .tglyph{min-height:3.2rem;margin:.4rem 0 .6rem}
}
@media (max-width:759px) and (max-height:700px){
  .tcopy p{font-size:.9rem;line-height:1.5}
  .tglyph{min-height:2.4rem}
}
/* ── THE PHILOSOPHY, UNFOLDING ────────────────────────────────── */
.phil{position:relative}
.phil-stage{position:sticky;top:0;height:100vh;height:100svh;z-index:0;pointer-events:none;
  display:flex;align-items:center;justify-content:center;margin-bottom:-100vh;margin-bottom:-100svh}
#flower{width:min(92vw,64rem);aspect-ratio:1;max-height:88vh;max-height:88svh}
.phil-ch{position:relative;z-index:1}
.phil-ch .inner{max-width:min(92vw,42rem)}
.phil-n{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.56rem;
  letter-spacing:.38em;text-transform:uppercase;color:var(--gold);margin-bottom:1.8rem}
.phil-w{font-family:var(--ff-edit);font-weight:300;
  font-size:clamp(2.6rem,9vw,7rem);line-height:.98;letter-spacing:-.02em;
  color:var(--moonlit);text-shadow:0 0 50px rgba(213,139,232,.34)}
.phil-p{margin-top:2rem;font-family:var(--ff-edit);
  font-size:clamp(1.08rem,1.6vw,1.4rem);line-height:1.68;color:var(--tx-mute)}

/* ── THE TRIAD ────────────────────────────────────────────────── */
.triad{display:grid;gap:1px;grid-template-columns:1fr;background:var(--rule);
  border:1px solid var(--rule);margin-top:2.4rem}
@media(min-width:820px){.triad{grid-template-columns:repeat(3,1fr)}}
.tri{background:linear-gradient(180deg,rgba(42,21,96,.5),rgba(23,16,67,.42));
  padding:clamp(2rem,3.4vw,3rem);transition:background .6s}
.tri:hover{background:linear-gradient(180deg,rgba(122,75,168,.34),rgba(42,21,96,.5))}
.tri b{display:block;font-family:var(--ff-edit);font-weight:300;
  font-size:clamp(1.6rem,3vw,2.4rem);color:var(--gold-hi);margin-bottom:1.1rem}
.tri p{font-family:var(--ff-edit);font-size:1.05rem;line-height:1.62;color:var(--tx-mute)}

/* ── THE FOUR CAUSES ──────────────────────────────────────────── */
.causes{display:grid;gap:1px;grid-template-columns:1fr;background:var(--rule);
  border:1px solid var(--rule);margin-top:2.6rem}
@media(min-width:700px){.causes{grid-template-columns:1fr 1fr}}
.cause{
  appearance:none;border:0;text-align:left;cursor:pointer;font:inherit;color:inherit;
  background:linear-gradient(180deg,rgba(42,21,96,.46),rgba(23,16,67,.4));
  padding:clamp(1.6rem,2.6vw,2.2rem);display:grid;gap:.7rem;
  transition:background .55s;
}
.cause:hover,.cause:focus-visible{background:linear-gradient(180deg,rgba(122,75,168,.34),rgba(42,21,96,.5))}
.c-n{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.58rem;letter-spacing:.34em;color:var(--gold)}
.c-t{font-family:var(--ff-display);font-size:.82rem;letter-spacing:.28em;text-transform:uppercase;color:var(--moonlit);padding-left:.28em}
.c-d{font-family:var(--ff-edit);font-size:1.02rem;line-height:1.6;color:var(--tx-mute);
  max-height:0;opacity:0;overflow:hidden;transition:max-height .6s cubic-bezier(.2,.7,.2,1),opacity .5s}
.cause[aria-expanded="true"] .c-d,.cause:hover .c-d,.cause:focus-visible .c-d{max-height:9rem;opacity:1}
@media(hover:none){.c-d{max-height:9rem;opacity:1}}
.one-pct{margin-top:2.4rem;font-family:var(--ff-edit);font-style:italic;
  font-size:clamp(1.1rem,1.8vw,1.5rem);color:var(--gold-hi)}

/* ── THE CONVERSATIONAL FORM ──────────────────────────────────── */
.talk{margin-top:2.6rem;max-width:52rem}
.talk-line{font-family:var(--ff-edit);font-weight:300;
  font-size:clamp(1.12rem,1.9vw,1.6rem);line-height:2.5;color:var(--moonlit);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.1em .45em}
.talk-line+.talk-line{margin-top:1.1rem}
.talk-line.dim{color:var(--tx-mute)}
.fill{display:inline-flex;align-items:baseline;position:relative}
.fill::after{content:"";position:absolute;right:.45em;top:50%;width:.34em;height:.34em;
  border-right:1px solid var(--gold);border-bottom:1px solid var(--gold);
  transform:translateY(-70%) rotate(45deg);pointer-events:none;opacity:.7}
.fill:has(input)::after{display:none}
.fill select,.fill input{
  appearance:none;-webkit-appearance:none;background:transparent;
  border:0;border-bottom:1px solid var(--rule);
  color:var(--gold-hi);font:inherit;font-size:1em;line-height:1.35;
  padding:.05em .35em .2em;border-radius:0;
  transition:border-color .4s,background .4s;
}
.fill select{padding-right:1.5em;cursor:pointer}
.fill input{min-width:11ch}
.fill.wide input{min-width:14ch}
.fill.full{display:block;width:100%;margin-top:1.4rem}
.fill.full input{width:100%;min-width:0;color:var(--tx-mute)}
.fill select:hover,.fill input:hover{border-color:var(--gold)}
.fill select:focus,.fill input:focus{outline:0;border-color:var(--gold-hi);background:rgba(122,75,168,.16)}
.fill select option{background:#2B2680;color:#EDE6FA}
.fill input::placeholder{color:var(--tx-faint)}
.talk button.act{appearance:none;border:0;background:transparent;cursor:pointer;font-family:var(--ff-ui)}
.talk-note{margin-top:1.4rem;font-size:.8rem;letter-spacing:.06em;color:var(--gold-hi);min-height:1.2em}

/* ── THE SIGN ─────────────────────────────────────────────────── */
.sign{font-family:var(--ff-display);font-weight:600;
  font-size:clamp(2rem,6.4vw,4.6rem);letter-spacing:.04em;line-height:1.06;
  text-shadow:0 0 44px rgba(246,212,143,.42),0 0 90px rgba(213,139,232,.24)}
.seeker{margin-top:2.6rem;font-size:.74rem;letter-spacing:.18em;color:var(--tx-faint)}
.seeker a{color:var(--gold-hi);border-bottom:1px solid rgba(246,212,143,.4);padding-bottom:.2em}
.seeker a:hover{border-color:var(--gold-hi)}

/* ── THE LEGAL LINE ───────────────────────────────────────────── */
.foot-legal{margin-top:2.6rem;padding-top:2.2rem;border-top:1px solid var(--rule);
  font-family:var(--ff-edit);font-size:.98rem;line-height:1.7;color:var(--tx-faint);max-width:56rem}

/* ── SCREEN CHAPTERS ──────────────────────────────────────────── */
.chapter--screen{overflow:clip;padding-top:clamp(7rem,14vh,10rem)}
.chapter--screen .inner{max-width:min(94vw,58rem)}
.chapter--screen .plx{position:absolute;inset:-10% -6%;pointer-events:none;will-change:transform;z-index:0}
.chapter .plx{
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 13%,#000 87%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 13%,#000 87%,transparent 100%);
}
.chapter--screen .inner{position:relative;z-index:2}
/* No envelope over the copy. A mask across the whole block hides the
   words that are still arriving underneath it, which is exactly the
   motion this page is built on. The unfolding leads; the dolly and the
   thread carry the continuity instead. */
.chapter--screen .inner,.chapter--welcome .inner{
  will-change:transform,opacity;
}
/* Every atmospheric layer is feathered top and bottom so no screen ever
   shows its own rectangle. The journey has no page breaks; the light
   simply changes as you travel through it. */
.plx > *:not(.grid-far){
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 15%,#000 85%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 15%,#000 85%,transparent 100%);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.plx > .grid-far{
  mask-image:radial-gradient(58% 50% at 50% 50%,#000,transparent 76%);
  -webkit-mask-image:radial-gradient(58% 50% at 50% 50%,#000,transparent 76%);
}
.chapter--screen .inner::before{inset:-26% -20%}
@media(prefers-reduced-motion:reduce){.chapter--screen .plx{transform:none!important}}

/* ── THE FOUR SCREENS ─────────────────────────────────────────── */
.screen{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;
  padding:clamp(5rem,12vh,9rem) 0;overflow:clip}
.screen .plx{position:absolute;inset:-10% -6%;pointer-events:none;will-change:transform;z-index:0}
.screen .copy{position:relative;z-index:2;max-width:min(94vw,58rem)}
.scr-n{display:flex;align-items:center;gap:1rem;margin-bottom:2rem;
  font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.58rem;letter-spacing:.4em;color:var(--gold)}
.scr-n em{font-style:normal;width:2.6rem;height:1px;background:linear-gradient(90deg,var(--gold),transparent)}
.scr-h{font-family:var(--ff-display);font-weight:500;
  font-size:clamp(1.5rem,4vw,3.1rem);line-height:1.14;letter-spacing:.05em;
  text-transform:uppercase;color:var(--moonlit)}
.scr-h .soft{display:block;font-family:var(--ff-edit);font-weight:300;text-transform:none;
  letter-spacing:0;font-size:.62em;color:var(--tx-mute);margin-top:1rem}
.scr-p{margin-top:2.4rem;font-family:var(--ff-edit);font-weight:300;
  font-size:clamp(1.25rem,2.5vw,2rem);line-height:1.42;color:var(--pearl)}
.scr-p span{display:block}
.scr-p .dim{color:var(--tx-mute);font-size:.82em}
.portal-word{position:relative;display:inline-block;color:var(--gold-hi)}
.portal-word::after{content:"";position:absolute;left:50%;top:50%;width:7em;height:7em;
  transform:translate(-50%,-50%) scale(.2);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(246,212,143,.55),rgba(213,139,232,.22) 42%,transparent 68%);
  opacity:0}
.beat.on .portal-word::after{animation:openPortal 2.8s cubic-bezier(.2,.7,.2,1) .5s forwards}
@keyframes openPortal{0%{transform:translate(-50%,-50%) scale(.2);opacity:0}
  40%{opacity:1}100%{transform:translate(-50%,-50%) scale(1.9);opacity:0}}
/* screen 02 ~ the stream */
.stream{position:absolute;inset:0;overflow:hidden;opacity:.5}
.stream i{position:absolute;left:var(--x);bottom:-14%;font-style:normal;
  font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.6rem;letter-spacing:.1em;
  color:rgba(199,212,255,.5);white-space:nowrap;
  animation:rise var(--d,9s) linear var(--t,0s) infinite}
@keyframes rise{0%{transform:translateY(0);opacity:0}
  8%{opacity:.9}70%{opacity:.5}100%{transform:translateY(-130vh);opacity:0}}
.blur-faces{position:absolute;inset:0;filter:blur(26px);opacity:.42;
  background:
    radial-gradient(9rem 12rem at 18% 34%,rgba(213,139,232,.55),transparent 70%),
    radial-gradient(8rem 11rem at 74% 26%,rgba(110,201,232,.42),transparent 70%),
    radial-gradient(10rem 13rem at 52% 76%,rgba(122,75,168,.55),transparent 70%),
    radial-gradient(7rem 10rem at 88% 68%,rgba(246,212,143,.28),transparent 70%);
  animation:drift 26s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate3d(3%,-4%,0) scale(1.08)}}
.grid-far{position:absolute;inset:-20%;opacity:.30;
  background-image:linear-gradient(rgba(182,168,240,.16) 1px,transparent 1px),
    linear-gradient(90deg,rgba(182,168,240,.16) 1px,transparent 1px);
  background-size:8vmin 8vmin;
  mask-image:radial-gradient(60% 55% at 50% 50%,#000,transparent 78%);
  -webkit-mask-image:radial-gradient(60% 55% at 50% 50%,#000,transparent 78%)}
.sparks{position:absolute;inset:0;
  background-image:
    radial-gradient(circle at 12% 22%,rgba(255,255,255,.9) 0 1.2px,transparent 2px),
    radial-gradient(circle at 71% 61%,rgba(246,212,143,.85) 0 1.2px,transparent 2px),
    radial-gradient(circle at 44% 88%,rgba(110,201,232,.85) 0 1px,transparent 2px);
  background-size:19vmin 15vmin,27vmin 21vmin,23vmin 18vmin;
  animation:dustA 2.7s steps(1,end) infinite}
.trails{position:absolute;inset:-25%;opacity:.5;
  background:conic-gradient(from 0deg at 50% 50%,transparent 0 12%,rgba(213,139,232,.24) 16%,transparent 20% 46%,
    rgba(110,201,232,.22) 50%,transparent 54% 80%,rgba(246,212,143,.2) 84%,transparent 88%);
  mask-image:radial-gradient(52% 52% at 50% 50%,transparent 32%,#000 52%,transparent 82%);
  -webkit-mask-image:radial-gradient(52% 52% at 50% 50%,transparent 32%,#000 52%,transparent 82%);
  animation:spin 62s linear infinite}
/* Cinzel renders lowercase as small capitals, so the editorial serif carries this */
.fr-pre{
  /* the place is half the claim: it is set at the frontier's own scale,
     one step quieter in colour so the eye still climbs to the gold */
  font-family:var(--ff-edit);font-weight:300;font-style:italic;
  font-size:clamp(1.9rem,6.1vw,4.4rem);line-height:1;
  letter-spacing:-.005em;text-transform:none;
  color:var(--moonlit);padding-left:0;margin-bottom:.1em;
  text-shadow:0 0 46px rgba(178,190,255,.42),0 0 110px rgba(109,75,240,.22);
}
.fr-h{margin:0}
.frontier span{
  display:block;font-style:normal;font-family:var(--ff-edit);font-weight:400;
  font-size:clamp(2.6rem,8.6vw,6.4rem);line-height:1;letter-spacing:-.005em;
  color:var(--gold-hi);margin-top:.18em;
  text-shadow:0 0 54px rgba(246,212,143,.55),0 0 120px rgba(217,107,255,.22);
}
.chapter--frontier .inner{max-width:min(92vw,52rem)}
.frontier{display:block;font-family:var(--ff-edit);font-weight:300;font-style:italic;
  font-size:clamp(2.6rem,9vw,7rem);line-height:.94;letter-spacing:-.01em;
  color:var(--gold-hi);margin:1rem 0 .6rem;
  text-shadow:0 0 44px rgba(246,212,143,.45)}
.mtm{font-family:var(--ff-display);font-weight:500;font-size:clamp(1rem,2.2vw,1.6rem);
  letter-spacing:.34em;text-transform:uppercase;color:var(--moonlit);margin-top:2.6rem;line-height:1.9}
@media(prefers-reduced-motion:reduce){
  .stream i,.blur-faces,.sparks,.trails,.mark .dust{animation:none}
  .screen{min-height:auto;padding:clamp(3rem,8vh,6rem) 0}
  .screen .plx{transform:none!important}
}

/* ── THE MANIFESTO ────────────────────────────────────────────── */
.ask{min-height:86vh;min-height:86svh;display:flex;align-items:center;padding:clamp(3rem,8vh,7rem) 0}
.ask .q{font-family:var(--ff-edit);font-weight:300;
  font-size:clamp(1.9rem,5.2vw,4.2rem);line-height:1.08;letter-spacing:-.014em;
  color:var(--moonlit);max-width:19ch}
.ask .qn{display:block;font-family:ui-monospace,"SF Mono",Menlo,monospace;
  font-size:.58rem;letter-spacing:.4em;color:var(--gold);margin-bottom:1.8rem}
.ask .qa{margin-top:2.2rem;font-family:var(--ff-edit);font-size:clamp(1.05rem,1.5vw,1.28rem);
  line-height:1.66;color:var(--tx-mute);max-width:34rem}
.manifest p{font-family:var(--ff-edit);font-weight:300;
  font-size:clamp(1.25rem,2.4vw,2.05rem);line-height:1.34;color:var(--moonlit)}
.manifest p+p{margin-top:1.4rem}
.manifest .lede{color:var(--gold-hi)}
.manifest .fine{font-size:clamp(1.02rem,1.4vw,1.2rem);line-height:1.72;color:var(--tx-mute)}

/* ── TWO PATHWAYS ─────────────────────────────────────────────── */
.paths{
  display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);
  grid-template-columns:1fr;max-width:46rem;margin-inline:auto;text-align:left;
}
@media(min-width:760px){.paths{grid-template-columns:1fr 1fr}}
.path{
  position:relative;display:flex;flex-direction:column;gap:.85rem;
  padding:clamp(1.6rem,2.6vw,2.2rem);overflow:hidden;
  background:linear-gradient(180deg,rgba(36,17,85,.42),rgba(30,27,94,.34));
  transition:background .55s cubic-bezier(.2,.7,.2,1);
}
.path::before{
  content:"";position:absolute;inset:auto -30% -60% -30%;height:120%;
  background:radial-gradient(50% 50% at 50% 100%,rgba(168,85,247,.55),transparent 70%);
  opacity:0;transition:opacity .6s;pointer-events:none;
}
.path:hover,.path:focus-visible{background:linear-gradient(180deg,rgba(109,75,240,.34),rgba(36,17,85,.42))}
.path:hover::before,.path:focus-visible::before{opacity:1}
.path-idx{font-size:.6rem;letter-spacing:.34em;color:var(--gold);font-variant-numeric:tabular-nums;position:relative}
.path-name{
  font-family:var(--ff-edit);font-size:clamp(1.5rem,3vw,2.1rem);font-weight:300;
  line-height:1.05;color:var(--moonlit);position:relative;
}
.path-note{font-family:var(--ff-edit);font-size:1rem;line-height:1.5;color:var(--tx-mute);position:relative}
.path-go{
  margin-top:.4rem;font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold-hi);display:inline-flex;align-items:center;gap:.6rem;position:relative;
}
.path-go em{font-style:normal;width:1.6rem;height:1px;background:currentColor;
  transform-origin:left;transform:scaleX(.5);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.path:hover .path-go em,.path:focus-visible .path-go em{transform:scaleX(1)}

/* ── THE UNFOLDING ────────────────────────────────────────────── */
.unfold{display:flex;flex-direction:column;gap:clamp(3.5rem,9vh,7rem);max-width:52rem}
.beat{opacity:.18;transform:translateY(14px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.beat.on{opacity:1;transform:none}
.beat b{
  display:block;font-family:var(--ff-display);font-weight:400;
  font-size:.56rem;letter-spacing:.44em;text-transform:uppercase;color:var(--gold);
  margin-bottom:1.3rem;
}
.beat p{
  font-family:var(--ff-edit);font-weight:300;
  font-size:clamp(1.4rem,3vw,2.35rem);line-height:1.22;color:var(--moonlit);
}
.beat p+p{margin-top:1rem}
.beat.fine p{font-size:clamp(1rem,1.35vw,1.18rem);line-height:1.75;color:var(--tx-mute);max-width:42rem}

/* ── THE WEAVE ────────────────────────────────────────────────── */
#weave{position:relative;height:760vh}
.weave-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
/* the field the five ways in travel through: geometry, the spiral,
   a city on the horizon, and the thread that ties them together */
#cosmos{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.weave-rail{position:relative;z-index:1}
@media(prefers-reduced-motion:reduce){#cosmos{display:none}}
.weave-head{position:absolute;top:clamp(4.6rem,11vh,7rem);left:max(var(--gut),4vw);right:var(--gut);z-index:3;pointer-events:none;transition:opacity .5s}
.weave-head .ed{font-size:clamp(1.3rem,2.4vw,1.9rem)!important;max-width:14ch}
.weave-rail{
  display:flex;align-items:stretch;gap:0;padding:0;
  will-change:transform;position:relative;counter-reset:pan;
}
/* one horizon running the whole length of the journey */
.weave-rail::after{
  content:"";position:absolute;left:0;right:0;top:50%;height:1px;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(182,168,240,.26) 6%,
    rgba(246,212,143,.34) 50%,rgba(182,168,240,.26) 94%,transparent);
}
.weave-svg{display:none!important}
.weave-svg path{fill:none;stroke:url(#wg);stroke-width:1.4;filter:drop-shadow(0 0 8px rgba(168,85,247,.55))}
/* Each way in gets a whole screen. The journey is long on purpose:
   five arrivals, not five cards passing by. */
.node{
  position:relative;z-index:2;flex:0 0 100vw;width:100vw;height:100vh;height:100svh;color:inherit;cursor:pointer;
  display:grid;align-items:center;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  grid-template-rows:auto auto auto auto;
  column-gap:clamp(2rem,6vw,7rem);row-gap:.2rem;
  padding:clamp(9rem,20vh,13rem) max(var(--gut),4vw) clamp(4.5rem,11vh,7rem);
  opacity:0;transform:translateY(20px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.8,.2,1);
}
.node.on{opacity:1;transform:none}
.node::before{
  counter-increment:pan;content:"0" counter(pan) " / 06";
  position:absolute;right:max(var(--gut),4vw);top:clamp(4.6rem,11vh,7rem);
  font-family:var(--ff-display);font-size:.6rem;letter-spacing:.42em;
  color:var(--tx-faint);opacity:.7;
}
.node .orb{grid-column:1;grid-row:1/5;width:100%;height:min(64vh,37rem);aspect-ratio:auto;align-self:center}
.node .pan-role{
  grid-column:2;grid-row:1;align-self:end;font-style:normal;
  font-family:var(--ff-display);font-size:.62rem;letter-spacing:.44em;
  text-transform:uppercase;color:var(--ac,var(--periwinkle));padding-left:.44em;
  opacity:0;transform:translateY(14px);transition:opacity .8s .12s,transform .8s .12s;
}
.node h3{
  grid-column:2;grid-row:2;margin-top:.5rem;padding-left:.04em;
  font-family:var(--ff-display);font-weight:500;
  font-size:clamp(2.6rem,8vw,6.6rem);line-height:.94;letter-spacing:.055em;
  text-transform:none;color:var(--gold-hi);
  text-shadow:0 0 60px rgba(246,212,143,.34),0 0 130px rgba(217,107,255,.18);
  opacity:0;transform:translateY(22px);transition:opacity .9s .18s,transform .9s .18s cubic-bezier(.2,.8,.2,1);
}
.node p{
  grid-column:2;grid-row:3;margin-top:1.5rem;max-width:32ch;
  font-family:var(--ff-edit);font-size:clamp(1.05rem,1.55vw,1.42rem);line-height:1.62;color:var(--tx-mute);
  opacity:0;transform:translateY(18px);transition:opacity .9s .28s,transform .9s .28s;
}
.node .act{
  grid-column:2;grid-row:4;justify-self:start;align-self:start;margin-top:2.1rem;
  font-size:.64rem;letter-spacing:.26em;
  opacity:0;transform:translateY(16px);transition:opacity .9s .38s,transform .9s .38s;
}
.node.on .pan-role,.node.on h3,.node.on p,.node.on .act{opacity:1;transform:none}
/* alternate which side the experience stands on */
.node:nth-of-type(even) .orb{grid-column:2}
.node:nth-of-type(even) .pan-role,
.node:nth-of-type(even) h3,
.node:nth-of-type(even) p,
.node:nth-of-type(even) .act{grid-column:1}
.node .orb::before{
  background:radial-gradient(circle,var(--ac2,rgba(168,85,247,.30)),rgba(109,75,240,.10) 48%,transparent 72%);
  opacity:calc(.18 + var(--nr,0) * .82);
  transform:scale(calc(.82 + var(--nr,0) * .3));
}
#onee{--ac:var(--moonstone);--ac2:rgba(109,75,240,.34)}
.node:nth-of-type(2){--ac:var(--ice);--ac2:rgba(110,201,232,.30)}
.node:nth-of-type(3){--ac:var(--gold);--ac2:rgba(246,212,143,.26)}
.node:nth-of-type(4){--ac:var(--orchid);--ac2:rgba(213,139,232,.30)}
.node:nth-of-type(5){--ac:var(--periwinkle);--ac2:rgba(182,168,240,.28)}
.orb{position:relative;width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center}
.orb::before{content:"";position:absolute;inset:-8%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(168,85,247,.30),rgba(109,75,240,.10) 46%,transparent 70%);
  opacity:.8;transition:opacity .7s,transform .9s cubic-bezier(.2,.7,.2,1)}
/* THE PLATE PERFORMS — --nr is nearness to the centre, 0 → 1.
   Off to the side the photograph is small, soft, low and turned away.
   At the centre it is sharp, upright, lifted and lit. Nothing here is
   a hover state: it happens because you are travelling. */
.orb img{
  position:relative;width:100%;height:100%;object-fit:contain;object-position:center;
  /* the picture has no corners: it gives way before it reaches them */
  -webkit-mask-image:radial-gradient(farthest-side at 50% 50%,#000 0 68%,rgba(0,0,0,.62) 86%,transparent 100%);
  mask-image:radial-gradient(farthest-side at 50% 50%,#000 0 68%,rgba(0,0,0,.62) 86%,transparent 100%);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  transform:
    translate3d(calc(var(--sd,1) * (1 - var(--nr,0)) * 5%), calc((1 - var(--nr,0)) * 5%), 0)
    scale(calc(.88 + var(--nr,0) * .17))
    rotate(calc(var(--sd,1) * (1 - var(--nr,0)) * -1.6deg));
  filter:
    blur(calc((1 - var(--nr,0)) * 2.6px))
    saturate(calc(.62 + var(--nr,0) * .48))
    brightness(calc(.74 + var(--nr,0) * .3))
    drop-shadow(0 calc(14px + var(--nr,0) * 22px) calc(30px + var(--nr,0) * 30px) rgba(30,27,94,.8));
  opacity:calc(.42 + var(--nr,0) * .58);
  transform-origin:51% 51%;
  will-change:transform,filter,opacity;
}
/* a slow breath so the photograph is never simply still */
@keyframes kb{
  0%{transform-origin:48% 46%}
  100%{transform-origin:54% 56%}
}
/* the light that crosses the plate as it takes the centre */
.orb::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(104deg,
    transparent 34%,rgba(255,255,255,.16) 46%,rgba(255,235,196,.22) 50%,
    rgba(255,255,255,.16) 54%,transparent 66%);
  background-size:260% 100%;
  background-position:calc(210% - var(--nr,0) * 260%) 0;
  mix-blend-mode:screen;opacity:calc(var(--nr,0) * .9);
  transition:opacity .6s;
}
.node:hover .orb img,.node:focus-visible .orb img{
  filter:blur(0) saturate(1.12) brightness(1.08)
    drop-shadow(0 30px 58px rgba(30,27,94,.85)) drop-shadow(0 0 40px rgba(168,85,247,.5));
}
@media(prefers-reduced-motion:reduce){
  .orb img{transform:none;filter:none;opacity:1;animation:none}
  .orb::after{display:none}
}
.node:hover .orb::before,.node:focus-visible .orb::before{opacity:1;transform:scale(1.09)}
.orb .sheen{position:absolute;left:8%;top:8%;width:84%;height:84%;border-radius:50%;
  background:conic-gradient(rgba(255,255,255,.14),rgba(217,107,255,.03) 24%,rgba(255,255,255,.10) 50%,
    rgba(109,75,240,.04) 72%,rgba(255,255,255,.14));
  mix-blend-mode:screen;opacity:.3;animation:spin 24s linear infinite;pointer-events:none}
.node:focus-visible{outline:1px solid var(--moonstone);outline-offset:14px;border-radius:6px}
.orb .fol{position:absolute;inset:8%;width:84%;height:84%;opacity:.9;animation:spin 46s linear infinite}
.orb .glass{display:none}
@keyframes spin{to{transform:rotate(360deg)}}
/* panel typography lives with the panel grid above */
.weave-progress{position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(2.5rem,6vh,4rem);height:1px;background:var(--rule);z-index:3}
.weave-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--indigo),var(--gold));box-shadow:0 0 12px rgba(255,196,107,.6)}
@media(max-width:860px),(prefers-reduced-motion:reduce){
  #weave{height:auto}
  .weave-sticky{position:static;height:auto;padding:0 0 3rem}
  .weave-head{position:static;padding:0 var(--gut);margin-bottom:2.5rem}
  .weave-rail{overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--gut);gap:2.5rem;transform:none!important;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .weave-rail::-webkit-scrollbar{display:none}
  .node{scroll-snap-align:center;opacity:1;transform:none;width:min(78vw,21rem);flex:0 0 auto;height:auto;
    display:block;padding:0;margin:0!important}
  .node::before{position:static;display:block;margin-bottom:.9rem}
  .node .orb{height:auto;aspect-ratio:1}
  .node .pan-role,.node h3,.node p,.node .act{opacity:1;transform:none;grid-column:auto!important}
  .node h3{font-size:1.5rem;letter-spacing:.22em;margin-top:1.2rem}
  .node p{font-size:1rem;margin-top:.8rem;max-width:none}
  .node .act{margin-top:1.1rem}
  .weave-svg,.weave-progress{display:none}
}

/* ── LIQUID CRYSTAL, UNBOXED ──────────────────────────────────── */
.crystal-wrap{position:relative;min-height:clamp(24rem,52vh,40rem);display:flex;align-items:center;justify-content:center}
#crystal{
  position:absolute;left:50%;top:50%;width:min(120%,42rem);aspect-ratio:1;
  transform:translate(-50%,-50%) translateY(var(--cy,0px));
  will-change:transform;pointer-events:none;
}
.crystal-cap{
  position:relative;z-index:2;font-size:.58rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--tx-faint);text-align:center;max-width:22rem;
}

/* sound toggle — the field has a tone, the visitor decides */
.sound{
  display:inline-flex;align-items:center;gap:.7rem;
  background:none;border:0;padding:.5rem .2rem;cursor:pointer;color:var(--tx-mute);
  font-family:var(--ff-ui);font-weight:300;
  font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;
  transition:color .35s;
}
.sound:hover{color:var(--gold-hi)}
.sound .bars{display:flex;align-items:flex-end;gap:2px;height:13px}
.sound .bars i{width:1px;height:4px;background:currentColor;display:block;opacity:.55;transition:opacity .3s}
.sound[aria-pressed="true"]{color:var(--gold-hi)}
.sound[aria-pressed="true"] .bars i{opacity:1;animation:eq 1.5s ease-in-out infinite}
.sound[aria-pressed="true"] .bars i:nth-child(2){animation-delay:.28s}
.sound[aria-pressed="true"] .bars i:nth-child(3){animation-delay:.62s}
.sound[aria-pressed="true"] .bars i:nth-child(4){animation-delay:.41s}
@keyframes eq{0%,100%{height:3px}50%{height:13px}}
@media(max-width:860px){.sound .sound-label{display:none}}

#hint{
  position:fixed;left:50%;bottom:2.2rem;transform:translateX(-50%);z-index:200;
  font-size:.58rem;letter-spacing:.32em;text-transform:uppercase;color:var(--tx-faint);
  pointer-events:none;opacity:0;transition:opacity 1.2s;white-space:nowrap;
}
#hint.on{opacity:.85}
@media(hover:none){#hint{display:none}}

/* scroll progress — a quiet spine */
/* THE THREAD — one object that is present in every frame of the
   sequence. Nothing ties a set of screens into a story faster than
   something that was already there when you arrived. */
#spine{
  position:fixed;right:calc(var(--gut) * .55);top:22vh;bottom:22vh;width:1px;
  z-index:200;opacity:0;transition:opacity 1s ease;pointer-events:none;
}
#spine.on{opacity:1}
#spine b{display:block;position:absolute;left:0;width:100%}
#spine .rail{top:0;bottom:0;background:rgba(169,158,229,.16)}
#spine .fill{
  top:0;height:0;
  background:linear-gradient(180deg,rgba(109,75,240,.35),rgba(199,212,255,.85) 60%,var(--gold-hi));
  box-shadow:0 0 8px rgba(199,212,255,.45);
}
#spine .node{
  top:0;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;
  background:var(--gold-hi);
  box-shadow:0 0 10px rgba(246,212,143,.95),0 0 26px rgba(213,139,232,.6);
}
#spine .node::after{
  content:"";position:absolute;left:50%;top:50%;width:22px;height:22px;
  margin:-11px 0 0 -11px;border-radius:50%;
  border:1px solid rgba(246,212,143,.4);
  animation:ripple 3.4s cubic-bezier(.2,.6,.2,1) infinite;
}
@media(prefers-reduced-motion:reduce){#spine .node::after{animation:none;opacity:.3}}
@media(max-width:860px){#spine{display:none}}

/* cursor */
#ring{
  position:fixed;top:0;left:0;z-index:400;pointer-events:none;
  width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;
  border:1px solid rgba(199,215,255,.5);
  transition:width .35s,height .35s,margin .35s,border-color .35s,opacity .35s,background .35s;
  opacity:0;
}
#ring.on{opacity:1}
#ring.grow{width:52px;height:52px;margin:-26px 0 0 -26px;border-color:rgba(232,201,107,.6);background:rgba(169,158,229,.07)}
@media(hover:none),(max-width:860px){#ring{display:none}}

/* ---------- cinematic chapters ---------- */
main{position:relative;z-index:10}
#cine{position:relative}
.chapter{
  min-height:100vh;
  min-height:100svh;display:flex;align-items:center;
  padding:7rem var(--gut) 6rem;
  position:relative;
}
.chapter .inner{
  max-width:var(--measure);
  will-change:opacity,transform;
  position:relative;
}
/* a soft depth scrim so copy always sits on darkness, never on the figure */
.chapter .inner::before{
  content:"";position:absolute;inset:-34% -38%;z-index:-1;pointer-events:none;
  background:radial-gradient(58% 54% at 50% 50%,rgba(30,27,94,.44),rgba(30,27,94,.18) 54%,rgba(30,27,94,0) 76%);
  filter:blur(10px);
}
.chapter[data-align="center"]{justify-content:center;text-align:center}
.chapter[data-align="center"] .inner{margin-inline:auto}
.chapter[data-ch="0"]{position:relative}
.chapter[data-ch="0"] .inner{max-width:none;width:100%}
.chapter[data-ch="0"] .inner::before{inset:-16% -6%}
.chapter[data-align="right"]{justify-content:flex-end}

.eyebrow{
  display:flex;align-items:baseline;gap:.9rem;margin-bottom:2.1rem;
  font-family:var(--ff-display);font-size:.6rem;letter-spacing:.46em;
  text-transform:uppercase;color:var(--periwinkle);
}
.chapter[data-align="center"] .eyebrow{justify-content:center}
.chapter[data-align="right"] .eyebrow{justify-content:flex-end}
.eyebrow b{font-weight:400;color:var(--tx-faint);font-variant-numeric:tabular-nums}
.eyebrow em{
  font-style:normal;display:inline-block;width:2.4rem;height:1px;
  background:var(--rule);transform:translateY(-.28em);
}

.statement,.support,.eyebrow,.hero-mark,.micro,.chapter .act{
  text-shadow:0 1px 2px rgba(30,27,94,.95),0 2px 20px rgba(30,27,94,.9),0 0 44px rgba(30,27,94,.75);
}
.statement{
  font-family:var(--ff-edit);font-weight:300;
  font-size:clamp(2.05rem,5.4vw,4.2rem);
  line-height:1.04;letter-spacing:-.012em;
  color:var(--moonlit);
}
.statement .sm{display:block;font-size:.56em;color:var(--pearl);opacity:.9}
.support{
  margin-top:1.9rem;max-width:26rem;
  font-family:var(--ff-edit);font-size:clamp(1.02rem,1.5vw,1.28rem);
  line-height:1.62;color:var(--tx-mute);font-weight:300;
}
.chapter[data-align="center"] .support{margin-inline:auto}
.chapter[data-align="right"] .support{margin-left:auto}
.micro{
  margin-top:1.5rem;font-size:.66rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--tx-faint);
}

/* hero lockup */
.hero-mark{
  font-family:var(--ff-display);font-weight:500;
  font-size:clamp(1.05rem,2.6vw,1.6rem);letter-spacing:.36em;
  text-transform:uppercase;padding-left:.36em;color:var(--moonlit);
  margin-bottom:1.5rem;
}
.hero-tag{
  font-family:var(--ff-edit);font-weight:300;font-style:italic;
  font-size:clamp(1.5rem,3.4vw,2.4rem);color:var(--pearl);line-height:1.2;
}

/* actions */
.actions{display:flex;flex-wrap:wrap;gap:1.4rem 2.4rem;margin-top:2.6rem;align-items:center}
.chapter[data-align="center"] .actions{justify-content:center}
.act{
  position:relative;display:inline-block;padding-bottom:.55rem;
  font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--moonlit);
}
.act::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:linear-gradient(90deg,var(--moonstone),rgba(199,215,255,0));
  transform-origin:left;transform:scaleX(.42);transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.act:hover::after,.act:focus-visible::after{transform:scaleX(1)}
.act.ghost{color:var(--tx-mute)}
.act.ghost::after{background:linear-gradient(90deg,var(--rule),rgba(169,158,229,0))}

/* ---------- editorial sheet ---------- */
/* The editorial passage stays inside the same violet world — it lifts,
   it does not switch to paper. The field keeps moving behind it. */
#editorial{
  position:relative;z-index:20;
  color:var(--tx);
  background:
    linear-gradient(to bottom,rgba(36,17,85,.86),rgba(21,10,51,.92) 30%,rgba(21,10,51,.92) 70%,rgba(36,17,85,.86));
  padding-bottom:1px;
}
#editorial::before{
  content:"";position:absolute;left:0;right:0;top:-46vh;height:46vh;
  background:
    radial-gradient(70% 74% at 50% 108%,rgba(168,85,247,.34),transparent 72%),
    linear-gradient(to bottom,rgba(21,10,51,0),rgba(21,10,51,.42) 52%,rgba(21,10,51,.86) 84%,rgba(36,17,85,.90));
  pointer-events:none;
}
/* a hairline of light where the passage begins */
#editorial::after{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,196,107,.55) 22%,rgba(217,107,255,.8) 50%,rgba(255,196,107,.55) 78%,transparent);
}
.ed{padding:clamp(6rem,13vh,11rem) var(--gut);position:relative}
.ed-label{
  font-family:var(--ff-display);font-size:.58rem;letter-spacing:.46em;
  text-transform:uppercase;color:var(--gold);margin-bottom:2.4rem;
  display:flex;align-items:center;gap:.9rem;
}
.ed-label em{font-style:normal;width:2.4rem;height:1px;background:linear-gradient(90deg,transparent,var(--gold));display:inline-block}
.ed h2{
  font-family:var(--ff-edit);font-weight:300;
  font-size:clamp(1.95rem,4.6vw,3.5rem);line-height:1.06;
  letter-spacing:-.012em;color:var(--moonlit);max-width:20ch;
}
.ed .body{
  margin-top:2.2rem;max-width:38rem;
  font-family:var(--ff-edit);font-size:clamp(1.05rem,1.45vw,1.26rem);
  line-height:1.72;color:var(--tx-mute);
  display:flex;flex-direction:column;gap:1.1rem;
}
.ed .act{color:var(--gold-hi)}
.ed .act::after{background:linear-gradient(90deg,var(--gold),rgba(255,196,107,0))}

.split{display:grid;grid-template-columns:1fr;gap:clamp(2.4rem,5vw,5rem);align-items:start}
@media(min-width:900px){.split{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}}

/* ecosystem */
.center-card{
  border:1px solid var(--rule);padding:clamp(1.8rem,3.4vw,2.8rem);
  background:linear-gradient(135deg,rgba(109,75,240,.16),rgba(168,85,247,.07));
  backdrop-filter:blur(6px);
  display:grid;gap:1.2rem 3rem;align-items:baseline;grid-template-columns:1fr;
}
@media(min-width:820px){.center-card{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)}}
.center-card h3{
  font-family:var(--ff-display);font-size:.78rem;letter-spacing:.34em;
  text-transform:uppercase;color:var(--gold-hi);padding-left:.34em;
}
.center-card p{font-family:var(--ff-edit);font-size:1.1rem;color:var(--tx-mute);max-width:30rem}
.orbits{
  margin-top:1.4rem;display:grid;gap:1px;
  grid-template-columns:1fr;background:var(--rule);
  border:1px solid var(--rule);
}
@media(min-width:700px){.orbits{grid-template-columns:1fr 1fr}}
@media(min-width:1120px){.orbits{grid-template-columns:repeat(5,1fr)}}
.orbit{
  background:linear-gradient(180deg,rgba(36,17,85,.62),rgba(21,10,51,.55));
  padding:clamp(1.6rem,2.4vw,2rem);
  display:flex;flex-direction:column;gap:1rem;min-height:15rem;
  position:relative;overflow:hidden;transition:background .6s,box-shadow .6s;
}
.orbit:hover,.orbit:focus-within{
  background:linear-gradient(180deg,rgba(109,75,240,.30),rgba(58,26,122,.42));
  box-shadow:inset 0 0 60px rgba(217,107,255,.16);
}
.orbit svg{position:absolute;right:-38%;top:-30%;width:110%;opacity:.85;pointer-events:none}
.orbit h3{
  font-family:var(--ff-display);font-size:.72rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--gold-hi);padding-left:.3em;position:relative;
}
.orbit p{
  font-family:var(--ff-edit);font-size:1.02rem;line-height:1.6;color:var(--tx-mute);
  flex:1;position:relative;
}
.orbit .act{
  font-size:.6rem;letter-spacing:.24em;padding-bottom:.4rem;position:relative;
  opacity:0;transform:translateY(4px);transition:opacity .45s,transform .45s;
}
.orbit:hover .act,.orbit:focus-within .act{opacity:1;transform:none}
@media(hover:none){.orbit .act{opacity:1;transform:none}}

/* principles */
.principles{list-style:none;margin:2.4rem 0 0;padding:0;display:flex;flex-direction:column}
.principles li{
  padding:1.15rem 0;border-top:1px solid var(--rule);
  font-family:var(--ff-ui);font-size:.86rem;letter-spacing:.03em;color:var(--tx-mute);
  display:flex;gap:1.1rem;align-items:baseline;
}
.principles li:last-child{border-bottom:1px solid var(--rule)}
.principles li span{color:var(--gold);font-size:.7rem;letter-spacing:.2em}

/* liquid-crystal plate (Technology for the Soul visual) */
.plate{
  position:relative;aspect-ratio:4/5;min-height:20rem;overflow:hidden;
  border:1px solid var(--rule);
  background:
    radial-gradient(70% 55% at 30% 25%,rgba(109,75,240,.55),transparent 62%),
    radial-gradient(60% 60% at 75% 68%,rgba(217,107,255,.42),transparent 64%),
    radial-gradient(90% 70% at 50% 100%,rgba(255,196,107,.18),transparent 70%),
    linear-gradient(150deg,#1B0D40,#2A1160 48%,#150A33);
}
.plate canvas{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:screen}
.plate figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:1.1rem 1.3rem;
  font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--tx-mute);background:linear-gradient(to top,rgba(30,27,94,.9),transparent);
}

/* ---------- final invitation (back to the void) ---------- */
#final{
  position:relative;z-index:20;
  background:linear-gradient(to bottom,rgba(36,17,85,.90) 0,rgba(21,10,51,.55) 26vh,rgba(30,27,94,0) 54vh),transparent;
  background-repeat:no-repeat;background-size:100% 54vh,100% 100%;
  min-height:118vh;
  min-height:118svh;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:16rem var(--gut) 8rem;
}
#final .inner{max-width:36rem;margin-inline:auto;position:relative}
#final .inner::before{
  content:"";position:absolute;inset:-26% -34%;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 56% at 50% 50%,rgba(30,27,94,.50),rgba(30,27,94,.24) 52%,rgba(30,27,94,0) 78%);
}

/* ---------- footer ---------- */
footer{
  position:relative;z-index:20;background:var(--void);
  border-top:1px solid var(--rule);
  padding:clamp(4rem,8vh,6.5rem) var(--gut) 3rem;
}
.foot-top{
  display:grid;gap:3rem;grid-template-columns:1fr;
  padding-bottom:3.4rem;border-bottom:1px solid var(--rule);
}
@media(min-width:820px){.foot-top{grid-template-columns:1.4fr repeat(3,minmax(0,1fr))}}
.foot-mark .wordmark{font-size:.82rem}
.foot-mark p{
  margin-top:1.2rem;font-family:var(--ff-edit);font-style:italic;
  font-size:1.1rem;color:var(--tx-mute);
}
.foot-col h4{
  margin:0 0 1.2rem;font-family:var(--ff-display);font-weight:400;
  font-size:.56rem;letter-spacing:.4em;text-transform:uppercase;color:var(--tx-faint);
}
.foot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.85rem}
.foot-col a{font-size:.76rem;letter-spacing:.08em;color:var(--tx-mute);transition:color .35s}
.foot-col a:hover{color:var(--moonstone)}
.foot-bot{
  margin-top:2.4rem;display:flex;flex-wrap:wrap;gap:1rem 2.4rem;
  align-items:baseline;justify-content:space-between;
  font-size:.66rem;letter-spacing:.14em;color:var(--tx-faint);
}
.foot-bot a{color:var(--tx-faint)}
.foot-bot a:hover{color:var(--tx-mute)}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  #poster::before,#poster::after{animation:none}
  .chapter{min-height:auto;padding:5rem var(--gut)}
  .chapter .inner{opacity:1!important;transform:none!important}
}
.rm .chapter{min-height:auto;padding:clamp(4rem,10vh,7rem) var(--gut)}
.rm #cine{background:linear-gradient(to bottom,rgba(30,27,94,0) 0,rgba(30,27,94,.58) 22%,rgba(30,27,94,.74) 78%,rgba(30,27,94,0))}
.rm #hint{display:none}
.rm #final{min-height:auto;padding:8rem var(--gut) 6rem}

/* ── PRODUCTION / MOBILE ──────────────────────────────────────
   Nothing may widen the page sideways on a phone (the hero aura
   used to, which made mobile browsers zoom out and push the nav
   button off screen). clip, unlike hidden, keeps sticky working. */
html,body{overflow-x:clip}
.chapter[data-ch="0"]{overflow-x:clip}
@media(max-width:700px){
  .lockup-glyph{width:auto!important;height:2.3rem!important;max-width:44vw;object-fit:contain}
  header.nav{padding:1rem 1.1rem;gap:.6rem}
  nav.links{gap:.9rem}
  .nav-cta{padding:.55rem .85rem;letter-spacing:.18em!important;white-space:nowrap}
}
@media(max-width:759px){
  .tcard{width:min(calc(100vw - 2rem),25rem)}
}
/* comfortable tap targets for links in running copy and the footer */
@media(pointer:coarse){
  footer li a{display:inline-block;padding:.35rem 0}
}


@media (max-width:760px){html.warm .hero-hands{background-image:url("/img/portal-hands-m.webp");background-image:image-set(url("/img/portal-hands-m.avif") type("image/avif"),url("/img/portal-hands-m.webp") type("image/webp"))}}
@media (min-width:761px){html.warm .hero-hands{background-image:image-set(url("/img/portal-hands.avif") type("image/avif"),url("/img/portal-hands.webp") type("image/webp"))}}
@media (pointer:coarse){.comm-pane,#pre .pre-stack{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}.comm-pane{background:rgba(43,38,128,.82)}}

/* ===== phone memory budget: keeps Safari/Chrome from crashing and reloading the tab =====
   every will-change / filter / blend layer costs GPU memory at 3x screen density; phones get flat layers */
@media (pointer:coarse){
  *,*::before,*::after{will-change:auto!important;mix-blend-mode:normal!important}
  *:not(.pre-bg):not(#pre *):not(#pre),*::before,*::after{filter:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  /* sections below the screen are not painted at all until the seeker scrolls near them */
  #philosophy, #final, #community, footer{content-visibility:auto;contain-intrinsic-size:auto 900px}
  #pre.gone{content-visibility:hidden}
}

/* ===== phones: light motion — every effect stays and moves, sized to the phone so iOS never runs out
   of graphics memory (each moving layer costs width x height x 9 at 3x density) ===== */
@media (pointer:coarse){
  .geo-a{width:100vw!important;height:100vw!important}
  .geo-b{width:80vw!important;height:80vw!important}
  .geo-c{width:130vw!important;height:130vw!important}
  .aura i{width:15rem!important;height:15rem!important;margin:-7.5rem 0 0 -7.5rem!important}
  .veil{inset:0!important}
  .trails{inset:-4%!important}
  .stg img.h{width:104vw!important;height:auto!important}
  .stg img.fig{width:88vw!important;height:auto!important}
  .ret,.ret2{width:86vw!important;height:86vw!important;margin-left:-43vw!important;margin-top:-43vw!important}
  .plx,.stream{-webkit-mask-image:none!important;mask-image:none!important}
  /* scroll-parallax planes hold still (their own drifting animations keep playing) */
  .plx{transform:none!important}
  .trails{opacity:.42}
  .plx .trails ~ .trails{display:none!important}
}
/* ===== safe mode (after a crash, or ?safe=1): the city at rest — every word, no heavy motion ===== */
html.safe *,html.safe *::before,html.safe *::after{animation:none!important;will-change:auto!important;filter:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;mix-blend-mode:normal!important}
html.safe #stage,html.safe #celest,html.safe #stagefx,html.safe #cosmos,html.safe .veil,html.safe .trails,html.safe .geo,
html.safe .aura,html.safe .grid-far,html.safe .blur-faces,html.safe .ret,html.safe .ret2,html.safe .stars,html.safe .stg,
html.safe .carrier,html.safe .nostalgia,html.safe .stream,html.safe #preglitter{display:none!important}
html.safe .plx{transform:none!important;-webkit-mask-image:none!important;mask-image:none!important}

.seq-on #poster{display:none}