/* One dark world. A fixed WebGL particle field sits behind every chapter;
   DOM chapters float over it as glass panels. Single deliberate theme. */
:root{
  --ink:#070b16; --ink-2:#0d1326; --line:rgb(236 232 220 / .1); --line-2:rgb(236 232 220 / .18);
  --bone:#ece8dc; --mute:#99a0b3; --dim:#5f6882;
  --mari:#f2b134; --mari-soft:rgb(242 177 52 / .14);
  --glass:rgb(9 14 30 / .58);
  --display:"Clash Display","Satoshi",ui-sans-serif,system-ui,sans-serif;
  --body:"Satoshi",ui-sans-serif,system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-in-out:cubic-bezier(0.77,0,0.175,1);
  --gutter:clamp(16px,4vw,64px);
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0}
html{background:var(--ink)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{background:var(--ink);color:var(--bone);font:17px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.is-booting{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--mari);color:var(--ink)}
:focus-visible{outline:2px solid var(--mari);outline-offset:3px;border-radius:6px}

#gl{position:fixed;left:0;top:0;width:100vw;height:100vh;height:100lvh;z-index:0;display:block;transition:opacity .4s ease}
.vignette{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(120% 90% at 50% 45%,transparent 45%,rgb(3 5 12 / .75) 100%)}
.grain{position:fixed;inset:0;z-index:50;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
main{position:relative;z-index:2}

/* BOOT */
.boot{position:fixed;inset:0;z-index:100;display:grid;place-items:center}
.boot-half{position:absolute;left:0;right:0;height:50.5%;background:var(--ink)}
.boot-top{top:0}.boot-bottom{bottom:0}
.boot-inner{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(28px,6vw,90px);align-items:end;width:min(900px,86vw)}
.boot-left{display:grid;gap:10px}
.boot-label{font:500 12px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mari)}
.boot-count{font:600 clamp(72px,13vw,150px)/.9 var(--display);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.boot-bar{width:100%;height:2px;background:var(--line)}
.boot-bar i{display:block;height:100%;background:var(--mari);transform:scaleX(0);transform-origin:0 50%}
.boot-log{list-style:none;padding:0;display:grid;gap:6px;font:13px/1.5 var(--mono);color:var(--dim);min-width:0}
.boot-log li{opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .4s var(--ease-out),color .3s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.boot-log li::before{content:"> ";color:var(--dim)}
.boot-log li.in{opacity:1;transform:none;color:var(--mute)}
.boot-log li.ok::after{content:"  ok";color:var(--mari)}
@media (max-width:640px){.boot-inner{grid-template-columns:1fr;align-items:start}.boot-log{font-size:12px}}
.shock{position:fixed;left:50%;top:50%;z-index:3;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;border:2px solid var(--mari);opacity:0;pointer-events:none}
.progress{position:fixed;left:0;right:0;top:0;height:2px;z-index:60;pointer-events:none}
.progress i{display:block;height:100%;background:var(--mari);transform:scaleX(0);transform-origin:0 50%}

/* NAV */
.nav{position:fixed;z-index:30;top:calc(14px + env(safe-area-inset-top,0px));left:50%;translate:-50% 0;
  width:min(1100px,calc(100% - 32px));display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:9px 9px 9px 20px;border:1px solid var(--line);border-radius:999px;
  background:rgb(7 11 22 / .55);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
}
.brand{font:600 20px var(--display);text-decoration:none}
.brand span{color:var(--mari)}
.nav nav{display:flex;align-items:center;gap:4px}
.nav nav a{text-decoration:none;font:500 14.5px var(--body);color:var(--mute);padding:8px 14px;border-radius:999px;transition:color .2s ease}
.nav nav a:hover{color:var(--bone)}
.nav .nav-cta{background:var(--bone);color:var(--ink)!important}

/* RAIL */
.rail{position:fixed;z-index:20;right:22px;top:50%;translate:0 -50%;display:grid;gap:10px}
.rail a{display:flex;align-items:center;justify-content:flex-end;gap:10px;text-decoration:none;height:14px}
.rail a::after{content:"";width:18px;height:2px;border-radius:2px;background:var(--dim);transition:width .3s var(--ease-out),background-color .3s ease}
.rail span{font:500 11.5px var(--mono);color:var(--mute);opacity:0;transform:translateX(6px);transition:opacity .25s ease,transform .3s var(--ease-out)}
.rail a.on::after{width:34px;background:var(--mari)}
.rail a.on span{opacity:1;transform:none;color:var(--bone)}
@media (hover:hover) and (pointer:fine){.rail a:hover span{opacity:1;transform:none}}
@media (max-width:1100px){.rail{display:none}}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 26px;border-radius:999px;font:600 15.5px var(--body);text-decoration:none;white-space:nowrap;transition:transform .16s var(--ease-out),background-color .2s ease}
.btn:active{transform:scale(.97)}
.btn-solid{background:var(--mari);color:var(--ink)}
.btn-ghost{border:1px solid var(--line-2);color:var(--bone);background:rgb(7 11 22 / .4)}
@media (hover:hover) and (pointer:fine){.btn-ghost:hover{background:rgb(236 232 220 / .08)}}

/* type */
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.split .w>span{display:inline-block;will-change:transform}
.nb{white-space:nowrap}
.eyebrow,.kicker{font:500 12.5px var(--mono);letter-spacing:.08em;color:var(--mari)}
.eyebrow{text-transform:uppercase;letter-spacing:.14em}
.lede{color:var(--mute);font-size:clamp(17px,1.4vw,19px);max-width:48ch}

/* CHAPTERS */
.chapter{position:relative;min-height:100dvh;padding-inline:var(--gutter)}

.hero{display:grid;align-content:end;padding-top:120px;padding-bottom:clamp(40px,7vh,80px);min-height:100dvh}
.hero-copy{max-width:760px;display:grid;gap:20px}
h1{font:600 clamp(34px,min(4.8vw,7.6vh),66px)/1.04 var(--display);letter-spacing:-.025em;text-wrap:balance}
h1 em{font-style:normal;color:var(--mari)}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.hint{position:absolute;right:calc(var(--gutter) + 60px);bottom:clamp(40px,7vh,80px);font:12px var(--mono);color:var(--dim)}
@media (max-width:760px){.hint{display:none}}

.manifesto{min-height:220vh}
.man-pin{position:sticky;top:0;min-height:100dvh;display:grid;align-content:center;gap:clamp(40px,7vh,72px);padding-block:100px 40px}
.man-text{font:600 clamp(28px,3.4vw,50px)/1.14 var(--display);letter-spacing:-.02em;max-width:20ch;text-wrap:pretty}
.man-text .mw{color:rgb(236 232 220 / .14);transition:none}
.proof{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line-2);max-width:min(1100px,58vw)}
@media (max-width:900px){.proof{max-width:none}}
.stat{padding:22px 20px 0 0;display:grid;gap:6px;align-content:start}
.stat+.stat{padding-left:20px;border-left:1px solid var(--line)}
.stat b{font:600 clamp(30px,3.2vw,48px)/1 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat span{font-size:13.5px;color:var(--mute);line-height:1.45;max-width:24ch}
@media (max-width:820px){.proof{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:22px}.stat:nth-child(3){padding-left:0;border-left:0}}

/* work chapters: long track, sticky glass panel on one side, particles on the other */
.work{min-height:230vh;overflow-x:clip}
.panel{position:sticky;top:max(90px,calc(50dvh - 330px));width:min(500px,100%);display:grid;gap:16px;padding:clamp(22px,2.6vw,34px);
  border:1px solid var(--line);border-radius:18px;background:var(--glass);
  backdrop-filter:blur(16px) saturate(130%);-webkit-backdrop-filter:blur(16px) saturate(130%);
  box-shadow:inset 0 1px 0 rgb(236 232 220 / .06),0 40px 80px -30px rgb(0 0 0 / .7)}
.work[data-side="right"] .panel{margin-left:auto;margin-right:clamp(0px,4vw,60px)}
.work[data-side="left"] .panel{margin-left:clamp(0px,2vw,30px)}
.panel h2{font:600 clamp(30px,3vw,44px)/1.04 var(--display);letter-spacing:-.02em;text-wrap:balance}
.panel>p{color:var(--mute);font-size:16px}
.facts{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.facts li{font-size:13.5px;border:1px solid var(--line-2);border-radius:999px;padding:5px 11px;color:var(--mute)}
.facts b{color:var(--bone)}
.links{display:flex;gap:18px}
.links a{font:500 15px var(--body);text-decoration:none;border-bottom:1px solid var(--mari);padding-bottom:2px;transition:color .2s ease}
.links a:hover{color:var(--mari)}

.matches{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.matches img{border-radius:8px;aspect-ratio:186/300;object-fit:cover;width:100%;height:auto;background:#1a2340}
.matches .q{position:relative}
.matches .q img{outline:2px solid var(--mari);outline-offset:2px}
.matches figcaption{position:absolute;left:4px;top:4px;font:500 10px var(--mono);background:var(--mari);color:var(--ink);padding:2px 5px;border-radius:4px}

.stages{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;counter-reset:s}
.stages li{counter-increment:s;font:500 12.5px var(--mono);padding:9px 10px;border:1px solid var(--line);border-radius:8px;color:var(--mute);transition:background-color .25s ease,color .25s ease,border-color .25s ease}
.stages li::before{content:counter(s) " ";color:var(--dim)}
.stages li.gate{border-color:var(--mari);color:var(--mari)}
.stages li.on{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.stages li.gate.on{background:var(--mari);color:var(--ink)}
.stages li.on::before{color:var(--ink)}

.grid6{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.grid6 div{background:rgb(9 14 30 / .9);padding:10px 12px}
.grid6 dt{font:11px var(--mono);color:var(--mute)}
.grid6 dd{font:600 24px/1.1 var(--display);margin-top:2px;font-variant-numeric:tabular-nums}

.thumb{border-radius:10px;overflow:hidden;border:1px solid var(--line-2);transform-style:preserve-3d}
.thumb img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}

@media (max-width:900px){
  .work{min-height:auto;padding-top:62vh;padding-bottom:12vh}
  .panel,.work[data-side] .panel{position:relative;top:0;margin:0 auto;width:100%}
  .manifesto{min-height:auto}
  .man-pin{position:relative;padding-top:52vh}
}

/* JOURNEY */
.journey{padding-block:clamp(100px,16vh,180px) 40px;display:grid;gap:44px;align-content:start}
.big{font:600 clamp(42px,6.4vw,96px)/1 var(--display);letter-spacing:-.03em}
.timeline{position:relative;display:grid;gap:40px;padding-left:40px;max-width:760px}
.tl-line{position:absolute;left:6px;top:8px;width:2px;height:calc(100% - 16px);overflow:visible}
.tl-line line{stroke:var(--mari);stroke-width:2;vector-effect:non-scaling-stroke;stroke-dasharray:100;stroke-dashoffset:var(--dash,0)}
.role{position:relative;display:grid;gap:3px}
.role::before{content:"";position:absolute;left:-40px;top:8px;width:14px;height:14px;border-radius:50%;background:var(--ink);border:2px solid var(--dim)}
.role.now::before{border-color:var(--mari);background:var(--mari);box-shadow:0 0 0 6px var(--mari-soft)}
.role time{font:500 13px var(--mono);color:var(--mute)}
.role.now time{color:var(--mari)}
.role h3{font:600 clamp(22px,2.3vw,30px)/1.15 var(--display)}
.role .org{font-weight:500}
.role p:not(.org){color:var(--mute)}
.also{color:var(--mute);font-size:15px;max-width:70ch}
.also a{color:var(--bone);text-decoration-color:var(--mari);text-underline-offset:3px}
.marquee{display:flex;overflow:hidden;margin-inline:calc(var(--gutter) * -1);border-block:1px solid var(--line);padding-block:22px;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq-track{display:flex;gap:44px;flex:none;padding-right:44px;animation:mq 40s linear infinite}
.mq-track span{font:600 clamp(24px,3vw,40px) var(--display);color:var(--dim);white-space:nowrap}
.mq-track span:nth-child(4n+1){color:var(--bone)}
@keyframes mq{to{transform:translateX(-50%)}}

/* CONTACT: particles spell SAY HI above this */
.contact{min-height:100dvh;display:grid;align-content:end;padding-top:52vh}
.contact-inner{display:grid;gap:20px;justify-items:start;padding-bottom:60px}
.contact h2{font:600 clamp(36px,5vw,76px)/1.02 var(--display);letter-spacing:-.03em;max-width:16ch;text-wrap:balance}
.email{background:none;border:0;color:var(--bone);cursor:pointer;padding:6px 0;text-align:left;max-width:100%}
.email-text{font:600 clamp(22px,3.6vw,50px)/1.1 var(--display);letter-spacing:-.02em;border-bottom:3px solid var(--mari);overflow-wrap:anywhere}
.email-tip{display:block;font:13px var(--mono);color:var(--mute);margin-top:12px}
.socials{display:flex;flex-wrap:wrap;gap:22px}
.socials a{font:500 16px var(--body);color:var(--mute);text-decoration:none;transition:color .2s ease}
.socials a:hover{color:var(--bone)}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding:24px 0 calc(24px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);font:12.5px var(--mono);color:var(--dim)}

@media (max-width:640px){.nav nav a:not(.nav-cta){display:none}body{font-size:16px}}
@media (prefers-reduced-motion:reduce){.mq-track{animation:none}.nav{transition:none}}

/* SOUND TOGGLE */
.sound{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:none;color:var(--mute);font:500 13.5px var(--body);cursor:pointer;transition:color .2s ease,border-color .2s ease}
.sound:hover{color:var(--bone);border-color:var(--line-2)}
.sound:active{transform:scale(.97)}
.eq{display:inline-flex;align-items:flex-end;gap:2px;height:12px}
.eq i{width:2px;height:3px;background:currentColor;border-radius:1px;transition:height .2s ease}
.sound[aria-pressed="true"]{color:var(--mari);border-color:rgb(242 177 52 / .4)}
.sound[aria-pressed="true"] .eq i{animation:eq 1s ease-in-out infinite}
.sound[aria-pressed="true"] .eq i:nth-child(2){animation-delay:-.3s}
.sound[aria-pressed="true"] .eq i:nth-child(3){animation-delay:-.6s}
.sound[aria-pressed="true"] .eq i:nth-child(4){animation-delay:-.15s}
@keyframes eq{0%,100%{height:3px}50%{height:12px}}
@media (max-width:640px){.sound-label{display:none}.sound{padding:0 10px}}

/* GHOST WORDS behind each chapter: sized by JS so the whole word always fits the screen */
.ghost{position:sticky;top:30vh;height:0;overflow:visible;pointer-events:none;z-index:-1;text-align:center;white-space:nowrap}
.ghost-word{display:inline-block;font:700 22vw/1 var(--display);letter-spacing:-.03em;will-change:transform}
/* stroke and fill live on each letter, since letters animate on their own */
.ghost-word span{display:inline-block;color:transparent;-webkit-text-stroke:1.5px rgb(236 232 220 / .3);
  background:linear-gradient(180deg,rgb(236 232 220 / .11),rgb(236 232 220 / .015) 75%);-webkit-background-clip:text;background-clip:text}
@media (max-width:900px){.ghost-word span{-webkit-text-stroke-width:1px}}

/* FEDERATED DIAGRAM */
.fed svg{width:100%;height:auto;display:block}
.fed-lines path{fill:none;stroke:rgb(236 232 220 / .16);stroke-width:1.5}
.fed-clients circle{fill:#141d38;stroke:var(--mute);stroke-width:1.5}
.fed-core{fill:var(--mari-soft);stroke:var(--mari);stroke-width:1.5}
.fed text{font:600 10px var(--mono);fill:var(--mari)}
.fed-pulses circle{fill:var(--bone)}
.fed-cap{font:12px var(--mono);color:var(--dim);margin-top:4px}
.emotions{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.emotions li{font:500 12.5px var(--mono);text-align:center;padding:7px 4px;border:1px solid var(--line);border-radius:8px;color:var(--mute);transition:background-color .3s ease,color .3s ease,border-color .3s ease}
.emotions li.on{background:var(--mari);border-color:var(--mari);color:var(--ink)}

/* touch: sideways swipes play with the particles, vertical swipes scroll, pinch-zoom still works */
main{touch-action:pan-y pinch-zoom}
/* phones and weak devices: frosted blur is the most expensive thing on the page, so use solid glass */
.tier-0 .panel,.tier-0 .nav{backdrop-filter:none;-webkit-backdrop-filter:none}
.tier-0 .panel{background:rgb(9 14 30 / .88)}
.tier-0 .nav{background:rgb(7 11 22 / .9)}
.tier-0 .grain{display:none}
.hint-touch{display:none}
@media (pointer:coarse){
  .hint{display:block;right:auto;left:var(--gutter);bottom:auto;top:calc(env(safe-area-inset-top,0px) + 82px)}
  .hint-mouse{display:none}.hint-touch{display:inline}
}

/* entrance */
.enter{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:22px}
.enter[hidden]{display:none!important}
.enter .btn{height:50px}
.enter-quiet{background:none;border:0;color:var(--mute);font:500 14.5px var(--body);cursor:pointer;padding:10px 4px;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--dim)}
.enter-quiet:hover{color:var(--bone)}

/* journey: the particle portrait sits right on laptops, above the text on phones */
.journey .timeline,.journey .big,.journey .portrait-cap{max-width:min(760px,54vw)}
.portrait-cap{margin-top:-24px}
@media (max-width:900px){
  .journey{padding-top:66vh}
  .journey .timeline,.journey .big,.journey .portrait-cap{max-width:none}
}

/* journey title fits one line beside the portrait */
@media (min-width:901px){.journey .big{font-size:clamp(40px,4.6vw,78px);white-space:nowrap}}