/* MAV — clean editorial scaffold over a WebGL world.
   Near-black, one accent, type carries the composition. */
:root{
  --bg:#08090a;
  --ink:#f2f2f0;
  --ink-dim:rgba(242,242,240,.62);
  --ink-faint:rgba(242,242,240,.38);
  --accent:#ff5c1a;
  --line:rgba(242,242,240,.12);
  --display:"Space Grotesk",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--bg);scrollbar-width:thin;scrollbar-color:#333 var(--bg)}
body{background:var(--bg);color:var(--ink);font-family:var(--display);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.5}
.mono{font-family:var(--mono)}

/* fixed WebGL world behind everything */
#world{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}

/* loader — ritual */
.loader{position:fixed;inset:0;z-index:50;background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  transition:opacity .8s ease,visibility .8s}
.loader.done{opacity:0;visibility:hidden}
.loader-mark{font-size:15px;letter-spacing:.55em;font-weight:600;padding-left:.55em}
.loader-line{width:120px;height:1px;background:var(--line);overflow:hidden}
.loader-line span{display:block;height:100%;width:40%;background:var(--accent);
  animation:scan 1.1s ease-in-out infinite}
@keyframes scan{0%{transform:translateX(-100%)}100%{transform:translateX(300%)}}

/* custom cursor — micro-detail */
.cursor{position:fixed;z-index:60;width:10px;height:10px;border-radius:50%;
  background:var(--accent);pointer-events:none;transform:translate(-50%,-50%);
  mix-blend-mode:normal;opacity:0;transition:opacity .3s}
@media(hover:hover){.cursor{opacity:.9}}

/* top bar */
.top{position:fixed;top:0;left:0;right:0;z-index:10;
  display:flex;justify-content:space-between;align-items:center;
  padding:22px clamp(20px,4vw,56px);mix-blend-mode:difference}
.brand{font-weight:600;letter-spacing:.35em;font-size:14px}
.top-right{display:flex;align-items:center;gap:22px}
.top-meta{font-size:10px;letter-spacing:.22em;color:var(--ink-dim)}
.sound-btn{background:none;border:1px solid var(--line);color:var(--ink-dim);
  font-size:10px;letter-spacing:.22em;padding:8px 14px;border-radius:99px;
  cursor:pointer;transition:border-color .3s,color .3s}
.sound-btn:hover{border-color:var(--accent);color:var(--ink)}
.sound-btn.on{border-color:var(--accent);color:var(--accent)}

/* chapters — the scroll spine */
#scroll{position:relative;z-index:1}
.chapter{min-height:100vh;min-height:100svh;display:flex;align-items:center;
  padding:clamp(80px,12vh,140px) clamp(20px,6vw,90px)}
.chapter-inner{max-width:1200px;width:100%;margin:0 auto}
.end .chapter-inner{text-align:left}

.label{font-size:11px;letter-spacing:.28em;color:var(--accent);margin-bottom:28px}
.display{font-size:clamp(88px,22vw,320px);font-weight:600;line-height:.9;
  letter-spacing:-.045em;margin-bottom:26px}
.display-sm{font-size:clamp(44px,8vw,110px);font-weight:600;line-height:1.02;
  letter-spacing:-.035em;margin-bottom:34px}
.lede{font-size:clamp(20px,2.6vw,30px);line-height:1.35;color:var(--ink-dim);
  font-weight:400;max-width:20ch}
.lede-sm{font-size:clamp(17px,2vw,22px);color:var(--ink-dim);line-height:1.5;margin-top:26px}
.scroll-hint{margin-top:56px;font-size:10px;letter-spacing:.3em;color:var(--ink-faint);
  animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:.9}}

/* modules — TBP-clean: identical, numbered, one line each */
.modules{border-top:1px solid var(--line);margin-top:12px}
.module{display:grid;grid-template-columns:64px 1fr;gap:20px;align-items:baseline;
  padding:26px 0;border-bottom:1px solid var(--line)}
.mod-n{font-size:11px;letter-spacing:.18em;color:var(--ink-faint)}
.module h3{font-size:clamp(20px,2.4vw,28px);font-weight:500;letter-spacing:-.015em;
  margin-bottom:6px}
.module p{font-size:15px;color:var(--ink-dim);line-height:1.6;max-width:52ch}

.foot{margin-top:90px;font-size:10px;letter-spacing:.24em;color:var(--ink-faint)}

/* reveal — quiet, once */
.chapter-inner>*{opacity:0;transform:translateY(26px)}
.no-motion .chapter-inner>*{opacity:1;transform:none}

/* small screens */
@media(max-width:640px){
  .display{font-size:clamp(72px,24vw,120px)}
  .module{grid-template-columns:44px 1fr;gap:14px;padding:22px 0}
  .chapter{padding-left:20px;padding-right:20px}
}

/* reduced motion — static world, visible content */
@media(prefers-reduced-motion:reduce){
  .chapter-inner>*{opacity:1;transform:none}
  .scroll-hint,.loader-line span{animation:none}
}