:root{ --ease-spring:cubic-bezier(.22,1.4,.36,1); --ease-out:cubic-bezier(.16,1,.3,1); }
[data-theme="day"]{
  --bg:#F3F2ED; --bg-raised:#FFFFFF; --ink:#101410; --ink-2:#5B615B;
  --accent:#00B87B; --accent-2:#0090FF; --line:#DCDAD0;
  --shadow:0 1px 2px rgba(16,20,16,.06),0 12px 32px rgba(16,20,16,.09);
  --grain-opacity:.05; --glow:none;
}
[data-theme="night"]{
  --bg:#060907; --bg-raised:#0B100D; --ink:#E9EDE9; --ink-2:#8FA096;
  --accent:#00FF9C; --accent-2:#00C8FF; --line:#17211C;
  --shadow:0 0 0 1px var(--line);
  --grain-opacity:.07; --glow:0 0 28px rgba(0,255,156,.13);
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  background:var(--bg); color:var(--ink); font-family:'Inter',sans-serif;
  transition:background .6s var(--ease-out),color .6s var(--ease-out);
  overflow-x:hidden; cursor:none;
}
@media (hover:none){ body{cursor:auto} #cursor{display:none} }
::selection{background:var(--accent); color:var(--bg)}
.serif{font-family:'Fraunces',serif; font-optical-sizing:auto}
.label{font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-2); font-weight:500}

/* ---- fixed layers ---- */
#world{position:fixed; inset:0; z-index:0}
#grain{position:fixed; inset:-100px; z-index:70; pointer-events:none; opacity:var(--grain-opacity);
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  transition:opacity .6s}
[data-theme="night"] #vignette{position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse at 50% 42%,transparent 52%,rgba(0,0,0,.5) 100%)}
#theme-wash{position:fixed; inset:0; z-index:90; pointer-events:none; clip-path:circle(0px at 50% 50%)}
#cursor{position:fixed; z-index:100; width:8px; height:8px; border-radius:50%; background:var(--accent);
  pointer-events:none; top:0; left:0; will-change:transform;
  transition:width .2s var(--ease-spring),height .2s var(--ease-spring),opacity .3s; box-shadow:var(--glow)}
#cursor.big{width:40px; height:40px; opacity:.3}

/* ---- nav ---- */
nav.bar{position:fixed; top:0; left:0; right:0; z-index:80; display:flex; align-items:center;
  justify-content:space-between; padding:22px clamp(20px,4vw,56px)}
.bar-brand{font-weight:600; font-size:15px; text-decoration:none; color:var(--ink)}
.bar-brand em{font-style:normal; color:var(--accent)}
.bar-right{display:flex; align-items:center; gap:clamp(14px,2.5vw,32px)}
.nav-link{font-size:13.5px; color:var(--ink-2); text-decoration:none; position:relative; padding:4px 0}
.nav-link::after{content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--accent); transition:width .35s var(--ease-out)}
.nav-link:hover{color:var(--ink)} .nav-link:hover::after{width:100%}
.pill{display:inline-block; font-size:13.5px; font-weight:500; color:var(--bg); background:var(--ink);
  padding:10px 22px; border-radius:99px; text-decoration:none; transition:background .3s,color .3s; box-shadow:var(--glow); will-change:transform}
.pill:hover{background:var(--accent); color:#04140C}
#theme-toggle{width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background:var(--bg-raised);
  color:var(--ink); display:grid; place-items:center; font-size:14px; transition:transform .4s var(--ease-spring)}
#theme-toggle:hover{transform:rotate(40deg) scale(1.1)}
#theme-toggle,button{cursor:none} @media(hover:none){#theme-toggle,button{cursor:pointer}}
@media(max-width:640px){
  nav.bar{padding:18px 16px}
  .bar-right{gap:10px}
  .bar-right .nav-link:nth-of-type(n+2){display:none}
  .pill{padding:9px 16px}
}

/* ---- waypoints ---- */
.waypoints{position:fixed; right:clamp(14px,2.4vw,34px); top:50%; transform:translateY(-50%); z-index:80;
  display:flex; flex-direction:column; gap:18px}
.waypoints button{background:none; border:none; display:flex; align-items:center; gap:10px; flex-direction:row-reverse; padding:4px}
.waypoints i{width:7px; height:7px; border-radius:50%; background:var(--ink-2); opacity:.5; display:block;
  transition:transform .35s var(--ease-spring),background .3s,opacity .3s,box-shadow .3s}
.waypoints span{font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-2);
  opacity:0; transform:translateX(6px); transition:opacity .3s,transform .3s}
.waypoints button:hover span{opacity:1; transform:none}
.waypoints button.is-active i{background:var(--accent); opacity:1; transform:scale(1.5); box-shadow:var(--glow)}
.waypoints button.is-active span{opacity:1; transform:none; color:var(--ink)}
@media(max-width:820px){.waypoints span{display:none}}

/* ---- scroll track & chapters ---- */
.scroll-track{height:960vh}
@media(max-width:820px){.scroll-track{height:1020vh}}
.chapter{position:fixed; inset:0; z-index:2; display:flex; flex-direction:column; justify-content:center;
  padding:0 clamp(20px,6vw,96px); opacity:0; pointer-events:none; will-change:opacity,transform}
.chapter.is-active{pointer-events:auto}
.chapter .inner{max-width:1080px}
.chapter--center{align-items:center; text-align:center}

#wordmark{font-family:'Fraunces',serif; font-size:clamp(110px,24vw,340px); line-height:.88;
  letter-spacing:-.02em; font-weight:400; user-select:none; display:flex}
#wordmark span{display:inline-block; font-variation-settings:'wght' 400,'opsz' 144}
#wordmark .accent{color:var(--accent)}
.lede{max-width:520px; margin-top:36px; font-size:clamp(16px,1.6vw,19px); line-height:1.65; color:var(--ink-2); font-weight:300}
.lede strong{color:var(--ink); font-weight:500}
.scroll-hint{position:absolute; bottom:34px; left:clamp(20px,6vw,96px); display:flex; align-items:center; gap:12px;
  font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-2)}
.scroll-hint::before{content:""; width:44px; height:1px; background:var(--ink-2); animation:pl 2.2s infinite var(--ease-out)}
@keyframes pl{0%,100%{transform:scaleX(1);opacity:.5}50%{transform:scaleX(.4);opacity:1}}

.beat{font-family:'Fraunces',serif; font-size:clamp(38px,6.8vw,96px); line-height:1.12; letter-spacing:-.01em; max-width:18ch}
.beat em{font-style:italic; color:var(--accent)}
.beat .ch{display:inline-block; opacity:0; transform:translateY(.55em); filter:blur(6px); will-change:transform,opacity}

.chapter h2{font-family:'Fraunces',serif; font-size:clamp(34px,5.5vw,76px); font-weight:400; line-height:1.06; letter-spacing:-.01em}
.chapter h2 em{font-style:italic; color:var(--accent)}
.body-copy{max-width:560px; margin-top:28px; font-size:clamp(15px,1.5vw,18px); line-height:1.7; color:var(--ink-2); font-weight:300}
.body-copy strong{color:var(--ink); font-weight:500}
.kicker{margin-bottom:22px}
.cta-row{display:flex; align-items:center; gap:22px; margin-top:40px; flex-wrap:wrap}
.chapter--center .cta-row{justify-content:center}
.mono-note{font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2)}
.mono-note b{color:var(--accent); font-weight:500}
.arrow-link{display:inline-flex; align-items:center; gap:14px; text-decoration:none; color:var(--ink);
  font-size:14.5px; font-weight:500; letter-spacing:.04em; will-change:transform}
.arrow-link .arr{display:inline-grid; place-items:center; width:40px; height:40px; border:1px solid var(--line);
  border-radius:50%; transition:background .3s,color .3s,transform .35s var(--ease-spring)}
.arrow-link:hover .arr{background:var(--accent); color:#04140C; transform:translateX(6px)}

.duo{display:flex; gap:clamp(28px,6vw,90px); margin-top:36px; flex-wrap:wrap}
.duo ul{list-style:none}
.duo .duo-h{font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; font-weight:500; margin-bottom:14px}
.duo .duo-h.t{color:var(--accent-2)} .duo .duo-h.d{color:var(--accent)}
.duo li{font-family:'Fraunces',serif; font-size:clamp(17px,1.9vw,24px); padding:6px 0; color:var(--ink-2); transition:color .3s,padding-left .3s var(--ease-out)}
.duo li:hover{color:var(--ink); padding-left:8px}
.duo .d li{font-style:italic}

.coda{position:absolute; bottom:26px; left:0; right:0; display:flex; justify-content:space-between;
  padding:0 clamp(20px,6vw,96px); font-size:12.5px; color:var(--ink-2)}
.coda a{color:var(--ink-2); text-decoration:none} .coda a:hover{color:var(--accent)}

.big-cta{margin-top:12px; font-size:15px; padding:18px 44px}

/* shared with subpages (teasers, reveals) */
.reveal{opacity:0; transform:translateY(28px)}
.reveal.in{opacity:1; transform:none; transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.teaser-card{position:relative; border:1px solid var(--line); border-radius:4px; overflow:hidden;
  background:var(--bg-raised); box-shadow:var(--shadow); transition:box-shadow .5s,transform .5s var(--ease-out)}
.teaser-card:hover{transform:translateY(-4px)}
.cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:24px}
footer.sitefoot{display:flex; flex-wrap:wrap; gap:20px; justify-content:space-between; align-items:center;
  padding:32px clamp(20px,6vw,96px); border-top:1px solid var(--line); font-size:12.5px; color:var(--ink-2); position:relative; z-index:2}
footer.sitefoot a{color:var(--ink-2); text-decoration:none} footer.sitefoot a:hover{color:var(--accent)}
#atmosphere{position:fixed; inset:0; z-index:0; pointer-events:none}
#strip{position:fixed; top:0; right:0; width:150px; height:100vh; z-index:0; pointer-events:none}
@media(max-width:820px){#strip{width:64px}}
main.page{position:relative; z-index:2}
main.page section{padding:112px clamp(20px,6vw,96px) 72px}
@media(max-width:640px){main.page section{padding-top:96px; padding-bottom:56px}}

@media (prefers-reduced-motion: reduce){
  #cursor{display:none} body{cursor:auto}
  .beat .ch{opacity:1!important; transform:none!important; filter:none!important}
}