:root{
  --paper:#e8e8e8; --ink:#141311; --ink-soft:rgba(20,19,17,.62);
  --line:rgba(20,19,17,.5);
  --serif:"Cormorant Garamond", Georgia, serif; --sans:"Inter", Helvetica, Arial, sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);overflow-x:hidden}
::selection{background:#141311;color:#e8e8e8}

#gl{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.idle-wave{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity 1.6s ease;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.20) 48%, rgba(190,170,130,.14) 52%, transparent 70%);
  background-size:280% 100%;background-position:120% 0}
.idle-wave.on{opacity:1;animation:wave 9s linear infinite}
@keyframes wave{from{background-position:120% 0}to{background-position:-160% 0}}

/* pointer */
.cursor-aura,.cursor-ring{position:fixed;top:0;left:0;z-index:40;pointer-events:none;border-radius:50%}
.cursor-aura{width:120px;height:120px;margin:-60px 0 0 -60px;opacity:0;
  background:radial-gradient(circle, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 65%);mix-blend-mode:soft-light}
body.night{--ink:#ece5d8;--ink-soft:rgba(236,229,216,.68);--line:rgba(236,229,216,.5)}
body{transition:background .8s ease,color .8s ease}
.cursor-ring{width:38px;height:38px;margin:-19px 0 0 -19px;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;transition:width .35s,height .35s,margin .35s,background .35s}
.cursor-ring span{font:600 9px var(--sans);letter-spacing:.14em;text-transform:uppercase;opacity:0;transition:opacity .25s}
.cursor-ring.is-hover{width:74px;height:74px;margin:-37px 0 0 -37px;background:rgba(232,232,232,.25)}
.cursor-ring.is-hover span{opacity:1}
@media (pointer:coarse){.cursor-aura,.cursor-ring{display:none}}

/* loader */
.loader{position:fixed;inset:0;z-index:60;background:#111110;color:#e8e8e8;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:18px;transition:opacity .9s ease, visibility .9s}
.loader.done{opacity:0;visibility:hidden}
.loader-word{font:600 12px var(--sans);letter-spacing:.42em}
.loader-count{font:500 clamp(90px,16vw,190px)/1 var(--serif)}
.loader-line{width:min(320px,60vw);height:1px;background:rgba(232,232,232,.25)}
.loader-line span{display:block;height:100%;width:0;background:#e8e8e8;transition:width .18s linear}

/* chrome */
.chrome{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;justify-content:space-between;align-items:center;
  padding:20px clamp(18px,4vw,44px);font:600 11px var(--sans);letter-spacing:.18em;text-transform:uppercase}
.chrome a{color:var(--ink);text-decoration:none}
.chrome nav{display:flex;gap:26px}
.chrome nav a{opacity:.65}.chrome nav a:hover{opacity:1}
.sound-btn{background:none;border:1px solid var(--line);border-radius:999px;color:var(--ink);
  font:600 10px var(--sans);letter-spacing:.16em;text-transform:uppercase;padding:8px 14px;cursor:pointer}
.sound-btn[aria-pressed="true"]{background:var(--ink);color:var(--paper)}

main{position:relative;z-index:2}
.panel{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:120px clamp(20px,6vw,80px);position:relative}
.kicker{font:600 11px var(--sans);letter-spacing:.34em;text-transform:uppercase;color:var(--ink-soft)}
.hero h1{font:500 clamp(52px,9.5vw,124px)/1.04 var(--serif);margin:26px 0 22px}
.hero h1 span{display:block;opacity:0;transform:translateY(26px);animation:rise 1.1s cubic-bezier(.19,1,.22,1) forwards}
.hero h1 span:nth-child(2){animation-delay:.14s}.hero h1 span:nth-child(3){animation-delay:.28s}
@keyframes rise{to{opacity:1;transform:none}}
.hero-sub{max-width:520px;font-size:16px;line-height:1.65;color:var(--ink-soft)}
.seal{margin-top:44px;width:64px;height:64px;border-radius:50%;border:1px solid var(--line);background:none;
  font:600 24px var(--serif);color:var(--ink);cursor:pointer;transition:transform .3s, background .3s}
.seal:active{transform:scale(.93)}
.seal-note{margin-top:20px;max-width:430px;font:italic 500 17px/1.55 var(--serif);color:var(--ink)}
.scroll-cue{position:absolute;bottom:34px;font:600 10px var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--ink-soft)}

.big-statement{font:500 clamp(38px,6.4vw,84px)/1.14 var(--serif)}
.interlude-sub{margin-top:20px;max-width:460px;font-size:15px;line-height:1.65;color:var(--ink-soft)}

.chapter-no{font:600 11px var(--sans);letter-spacing:.34em;text-transform:uppercase;color:var(--ink-soft)}
.chapter h2{font:500 clamp(56px,10vw,138px)/1.02 var(--serif);margin:18px 0 14px}
.chapter-sub{font:italic 500 clamp(19px,2.4vw,26px) var(--serif);color:var(--ink-soft)}
.hotspot{margin-top:40px;width:52px;height:52px;border-radius:50%;border:1px solid var(--line);background:rgba(232,232,232,.2);
  font:400 24px var(--serif);color:var(--ink);cursor:pointer;transition:transform .35s, background .35s}
.hotspot:hover{transform:rotate(45deg) scale(1.08)}
.hotspot.open{transform:rotate(45deg);background:var(--ink);color:var(--paper)}
.notes{margin-top:22px;max-width:470px;font-size:15px;line-height:1.7;color:var(--ink)}

.footer{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;text-align:center;
  padding:100px 20px 0;position:relative;overflow:hidden}
.footer-cta{font:500 clamp(34px,5vw,64px) var(--serif)}
.footer-mail{margin-top:12px;font:600 11px var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft)}
.wordmark{font:600 clamp(90px,19.5vw,290px)/0.95 var(--serif);letter-spacing:.02em;transform:translateY(18%);user-select:none}
.colophon{max-width:560px;padding:0 20px 26px;font-size:12px;line-height:1.7;color:var(--ink-soft)}
@media (prefers-reduced-motion: reduce){
  .idle-wave.on{animation:none}
  .hero h1 span{animation-duration:.01s}
}