@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:900;font-display:swap;src:url(fonts/robotoslab-900-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:900;font-display:swap;src:url(fonts/robotoslab-900-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/ibmplexsans-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/ibmplexsans-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{--bg:#151514;--bg2:#1b1b19;--ink:#efece6;--mute:#a7a299;--line:rgba(239,236,230,.13);--red:#d4252b;--redh:#e8383e;--lite:#dcd8cf;--dark:#161513;--lt:0;
  --slab:'Roboto Slab',Georgia,serif;--sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;--g:clamp(20px,6vw,96px)}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:80px}
body{background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--sans);overflow-x:clip;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(120% 80% at 50% 0%,#1d1d1b 0%,transparent 60%),repeating-linear-gradient(90deg,transparent 0 119px,rgba(239,236,230,.025) 119px 120px)}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
button,input,select{font:inherit;color:inherit}
.skip{position:absolute;left:-999px;top:8px;background:var(--red);color:#fff;padding:8px 14px;z-index:99}.skip:focus{left:8px}
.ic{width:1.15em;height:1.15em;fill:currentColor;flex:none}
.lab{display:inline-flex;align-items:center;gap:10px;font:600 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.lab i{font-style:normal;color:var(--red)}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 22px;border-radius:999px;font:600 16px/1 var(--sans);text-decoration:none;transition:background .2s,color .2s,border-color .2s}
.btn.red{background:var(--red);color:#fff}.btn.red:hover{background:var(--redh)}
.btn.ghost{border:1.5px solid currentColor}.btn.ghost:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.acts{display:flex;flex-wrap:wrap;gap:12px}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* header */
.top{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;gap:28px;padding:18px var(--g);transition:color .4s}
html.lit .top{color:var(--dark)}
.brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;font:900 19px/1 var(--slab);letter-spacing:.01em}
.brand b{color:var(--red);font-weight:900}.mk{width:34px;height:34px}
.top nav{display:flex;gap:26px;margin-left:auto;font-size:15px}
.top nav a{text-decoration:none;opacity:.78}.top nav a:hover{opacity:1;color:var(--red)}
.tcall{display:inline-flex;align-items:center;gap:9px;padding:10px 16px;border:1.5px solid currentColor;border-radius:999px;font-weight:600;text-decoration:none;font-size:15px}
.tcall:hover{background:var(--red);border-color:var(--red);color:#fff}

/* story */
#story{position:relative;height:660vh}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;transition:color .45s}
html.lit .stage{color:var(--dark)}
.tone{position:absolute;inset:0;background:var(--lite);opacity:var(--lt)}
.tone::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 119px,rgba(0,0,0,.035) 119px 120px)}
#giant{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);white-space:nowrap;font:900 100px/.82 var(--slab);letter-spacing:-.02em;text-transform:uppercase;
  color:color-mix(in srgb,#252421 calc((1 - var(--lt)) * 100%),#c8c2b7);opacity:0;transition:opacity .3s;pointer-events:none;user-select:none}
#giant.on{opacity:1;transition:opacity .7s .1s}
.poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;transition:opacity .6s}
html.has-gl .poster{opacity:0;visibility:hidden;transition:opacity .6s,visibility 0s .6s}
#hero3d{position:absolute;inset:0;width:100%;height:100%;display:block}
.rail{position:absolute;left:calc(var(--g) * .45);top:22vh;bottom:22vh;width:2px;background:var(--line)}
html.lit .rail{background:rgba(0,0,0,.12)}
.rail i{position:absolute;inset:0;background:var(--red);transform-origin:top;transform:scaleY(0)}
.beat{position:absolute;top:50%;width:min(31vw,430px);opacity:0;transform:translateY(calc(-50% + 18px));transition:opacity .25s,transform .25s;pointer-events:none}
.beat.on{opacity:1;transform:translateY(-50%);transition:opacity .55s .28s,transform .7s .28s cubic-bezier(.2,.7,.2,1);pointer-events:auto}
.beat.l{left:var(--g)}.beat.r{right:var(--g)}
.beat h2{font:900 clamp(34px,3.6vw,58px)/1.02 var(--slab);letter-spacing:-.01em;margin:18px 0 16px}
.beat p{font-size:18px;max-width:34ch;opacity:.85}
html.lit .beat .lab{color:#6b665d}
.b0{top:auto;bottom:11vh;left:var(--g);width:min(50vw,700px);transform:translateY(18px)}
.b0.on{transform:none}
.b0 h1{font:900 clamp(46px,5.8vw,96px)/.98 var(--slab);letter-spacing:-.02em;margin:20px 0 20px}
.b0 .lead{font-size:19px;max-width:40ch;margin-bottom:26px;opacity:.85}
.cue{display:inline-block;margin-top:34px;font:600 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;opacity:.6}
.cue::after{content:"";display:block;width:1.5px;height:34px;background:currentColor;margin-top:12px}
.final{position:absolute;left:50%;top:11vh;width:min(94vw,1120px);text-align:center;transform:translate(-50%,16px);opacity:0;transition:opacity .3s,transform .3s;pointer-events:none}
.final.on{opacity:1;transform:translate(-50%,0);transition:opacity .6s .2s,transform .8s .2s cubic-bezier(.2,.7,.2,1);pointer-events:auto}
.final h2{font:900 clamp(44px,5vw,80px)/.98 var(--slab);letter-spacing:-.02em;margin:16px 0 18px}
.final h2 em{font-style:normal;color:var(--red)}
.final>p:not(.lab){max-width:46ch;margin:0 auto 24px;opacity:.85}
.final .acts{justify-content:center}
.nw{white-space:nowrap}

/* scroll band */
.band{overflow:hidden;padding:clamp(40px,7vw,90px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.bandin{white-space:nowrap;font:900 clamp(56px,10vw,150px)/1 var(--slab);color:transparent;-webkit-text-stroke:1.2px rgba(239,236,230,.3);will-change:transform}

/* sections */
.sec{padding:clamp(84px,12vw,170px) var(--g)}
.shead{display:grid;gap:18px;max-width:880px;margin-bottom:clamp(44px,6vw,80px)}
.shead h2,.ctext h2{font:900 clamp(38px,5.2vw,80px)/1.02 var(--slab);letter-spacing:-.015em}
.shead h2 em,.ctext h2 em{font-style:normal;color:var(--red)}
.sub{max-width:56ch;color:var(--mute);font-size:18px}
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.split .w>span{display:inline-block;transform:translateY(105%);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.split.in .w>span{transform:none}
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s,transform .8s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}

.svc{list-style:none;display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(30px,6vw,110px)}
.svc li{display:grid;grid-template-columns:52px 1fr;column-gap:14px;padding:26px 0 30px;border-top:1px solid var(--line)}
.svc li:nth-child(even){transform:translateY(70px)}.svc li.rv:nth-child(even):not(.in){transform:translateY(96px)}
.svc .no{grid-row:span 2;font:600 14px/1.9 var(--sans);color:var(--red)}
.svc h3{font:900 clamp(22px,2vw,30px)/1.15 var(--slab);margin-bottom:8px}
.svc p{color:var(--mute)}

.cons{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(36px,6vw,100px);align-items:center;padding-top:clamp(140px,14vw,200px)}
.cimg{overflow:hidden;border-radius:6px}.cimg img{width:100%;aspect-ratio:4/3;object-fit:cover}
.ctext{display:grid;gap:22px;justify-items:start}
.clist{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:4px 28px;width:100%;margin:6px 0 10px}
.clist li{padding:12px 0 12px 26px;border-bottom:1px solid var(--line);position:relative;font-weight:600}
.clist li::before{content:"";position:absolute;left:0;top:23px;width:14px;height:3px;background:var(--red);transform:skewX(-30deg)}

.tool .tgrid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(30px,5vw,80px);align-items:start}
.tform{display:grid;gap:30px}
fieldset{border:0;display:grid;gap:14px}
legend,.tform label{font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:14px}
.tform label{display:grid;gap:12px;margin:0}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip span{display:inline-block;padding:11px 17px;border:1.5px solid var(--line);border-radius:999px;font-size:15px;cursor:pointer;transition:background .2s,border-color .2s,color .2s;letter-spacing:0;text-transform:none;color:var(--ink);font-weight:400}
.chip input:checked+span{background:var(--red);border-color:var(--red);color:#fff}
.chip input:focus-visible+span{outline:2px solid var(--red);outline-offset:3px}
input[type=range]{width:100%;accent-color:var(--red);height:28px}
output{font:900 22px/1.2 var(--slab);color:var(--ink)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.tform input[type=text],.tform select{width:100%;background:var(--bg2);border:1.5px solid var(--line);border-radius:10px;padding:14px;font-size:16px;letter-spacing:0;text-transform:none;color:var(--ink)}
.tout{position:sticky;top:100px;background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:clamp(22px,3vw,36px);display:grid;gap:16px}
.bed{width:100%;max-width:380px;color:var(--ink)}
#fillr,#heap{transition:all .5s cubic-bezier(.2,.7,.2,1)}
.msgl{font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.msg{font-size:17px;line-height:1.55;min-height:6.2em;white-space:pre-line}

.ggrid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:clamp(180px,22vw,330px);gap:12px}
.gi{border:0;padding:0;background:var(--bg2);overflow:hidden;border-radius:6px;cursor:zoom-in;position:relative}
.gi img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.gi:hover img{transform:scale(1.04)}
.gi.w{grid-column:span 2}.gi.t{grid-row:span 2}
.gi.rv{opacity:1;transform:none}
.gi.rv::after{content:"";position:absolute;inset:0;background:var(--bg);transform-origin:top;transition:transform 1s cubic-bezier(.7,0,.2,1)}
.gi.rv.in::after{transform:scaleY(0)}
#lb{border:0;padding:0;background:transparent;max-width:94vw;max-height:92vh;margin:auto}
#lb::backdrop{background:rgba(8,8,8,.9)}
#lb img{max-width:94vw;max-height:90vh;object-fit:contain}
.lbx{position:fixed;top:14px;right:18px;width:46px;height:46px;border-radius:50%;border:0;background:var(--ink);color:var(--bg);font-size:28px;line-height:1;cursor:pointer}

.slist{list-style:none;border-top:1px solid var(--line)}
.slist a{display:grid;grid-template-columns:minmax(150px,1.1fr) 1fr 1.3fr 40px;align-items:baseline;gap:20px;padding:30px 0;border-bottom:1px solid var(--line);text-decoration:none;transition:color .25s,padding .35s}
.slist a:hover{color:var(--red);padding-left:14px}
.sn{font:900 clamp(32px,4vw,58px)/1 var(--slab)}.sh{font-weight:600}.sd{color:var(--mute)}.slist b{font-size:28px;justify-self:end}

.rev{display:grid;grid-template-columns:auto 1fr;gap:clamp(36px,7vw,120px);align-items:start}
.score{display:grid;gap:12px;justify-items:start}
.score .big{font:900 clamp(110px,15vw,220px)/.8 var(--slab);letter-spacing:-.03em}
.stars{display:flex;gap:4px;margin-top:22px}.stars svg{width:26px;height:26px;fill:var(--red)}
.cnt{color:var(--mute)}.cnt b{color:var(--ink)}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
blockquote{border-top:3px solid var(--red);padding-top:22px}
blockquote p{font:900 clamp(21px,2vw,28px)/1.22 var(--slab);margin-bottom:16px}
cite{font-style:normal;color:var(--mute);font-size:15px}
.more{grid-column:2;color:var(--mute);text-decoration:none;font-weight:600}.more:hover{color:var(--red)}

.cgrid{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(30px,6vw,100px);align-items:end}
.cbig{display:grid;gap:12px;text-decoration:none}
.cbig span{font:600 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.cbig b{font:900 clamp(46px,7.4vw,120px)/.95 var(--slab);color:var(--red);letter-spacing:-.02em;transition:color .2s}
.cbig:hover b{color:var(--redh)}
.cinfo{display:grid;gap:0;border-top:1px solid var(--line)}
.cinfo div{display:grid;grid-template-columns:130px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.cinfo dt{color:var(--mute);font-size:15px}.cinfo dd{font-weight:600;overflow-wrap:anywhere}
.cinfo a{text-decoration:none}.cinfo a:hover{color:var(--red)}

.foot{padding:60px var(--g) 120px;border-top:1px solid var(--line);color:var(--mute);font-size:14px;display:grid;gap:30px}
.fl{display:grid;gap:12px;max-width:820px}.fl .brand{color:var(--ink);margin-bottom:8px}
.foot a{text-decoration-color:rgba(167,162,153,.4)}
.cred{font-size:13px;opacity:.85}
.made a{color:var(--red);text-decoration:none;font-weight:600}.made a:hover{text-decoration:underline}

.dock{position:fixed;right:22px;bottom:22px;z-index:40;display:flex;gap:10px}
.dock a{display:inline-flex;align-items:center;gap:9px;padding:14px 20px;border-radius:999px;font-weight:600;text-decoration:none;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.dcall{background:var(--red);color:#fff}.dwa{background:var(--ink);color:var(--dark)}

/* fallbacks: no WebGL, or reduced motion → the chapters as stills with their text */
html.no3d #story,html.rm #story{height:auto}
html.no3d .stage,html.rm .stage{position:relative;height:auto;display:grid;gap:56px;padding:120px var(--g) 80px;overflow:visible}
html.no3d #hero3d,html.rm #hero3d,html.no3d #giant,html.rm #giant,html.no3d .rail,html.rm .rail,html.no3d .tone,html.rm .tone{display:none}
html.no3d .poster{position:relative;opacity:1;height:auto;aspect-ratio:16/9;border-radius:6px}
html.rm .poster{display:none}
html.no3d .beat,html.rm .beat,html.no3d .final,html.rm .final{position:relative;inset:auto;transform:none;opacity:1;width:auto;max-width:760px;pointer-events:auto;text-align:left;left:auto;top:auto;bottom:auto}
html.rm .final .acts,html.no3d .final .acts{justify-content:flex-start}
html.rm .final>p:not(.lab),html.no3d .final>p:not(.lab){margin-left:0}
.still{width:100%;max-width:760px;height:auto;border-radius:6px;margin-bottom:22px;background:var(--bg2)}
html.no3d .cue,html.rm .cue{display:none}

@media (prefers-reduced-motion:reduce){.split .w>span,.rv,.gi.rv::after{transition:none!important;transform:none!important;opacity:1!important}.bandin{transform:none!important}}

/* phones: designed for 390px */
@media (max-width:860px){
  body{font-size:16px}
  .top{padding:14px 18px;gap:12px}.top nav{display:none}
  .tcall{margin-left:auto;padding:9px 13px}.tcall span{display:none}
  .brand{font-size:17px}.mk{width:30px;height:30px}
  #story{height:600vh}
  .rail{left:12px;top:16vh;bottom:auto;height:22vh}
  #giant{top:31%}
  .stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:52%;pointer-events:none;
    background:linear-gradient(to top,color-mix(in srgb,var(--bg) calc((1 - var(--lt)) * 100%),var(--lite)) 38%,transparent)}
  .beat,.beat.l,.beat.r{left:20px;right:20px;width:auto;top:auto;bottom:calc(92px + env(safe-area-inset-bottom));transform:translateY(16px);z-index:2}
  .beat.on{transform:none}
  .beat h2{font-size:clamp(30px,8.6vw,40px);margin:12px 0 10px}
  .beat p{font-size:16px}
  .b0{bottom:calc(96px + env(safe-area-inset-bottom))}
  .b0 .lab,.b0 .lead,.b0 .acts{display:none}
  .b0 h1{font-size:clamp(40px,11.4vw,54px);margin:0}
  .cue{margin-top:22px}
  .final{top:auto;bottom:calc(88px + env(safe-area-inset-bottom));z-index:2}
  .final h2{font-size:clamp(40px,11vw,56px)}
  .final>p:not(.lab){font-size:16px;margin-bottom:18px}
  .final .lab{display:none}
  .sec{padding:84px 20px}
  .svc{grid-template-columns:1fr}.svc li:nth-child(even),.svc li.rv:nth-child(even).in{transform:none}.svc li.rv:nth-child(even):not(.in){transform:translateY(26px)}
  .cons{grid-template-columns:1fr;padding-top:84px}.clist{grid-template-columns:1fr}
  .tool .tgrid{grid-template-columns:1fr}.tout{position:relative;top:0}.row2{grid-template-columns:1fr}
  .ggrid{grid-template-columns:1fr 1fr;grid-auto-rows:150px;gap:8px}.gi.w{grid-column:span 2}
  .slist a{grid-template-columns:1fr 30px;gap:6px 14px;padding:24px 0}.slist .sh,.slist .sd{grid-column:1}.slist b{grid-row:1;grid-column:2}
  .rev{grid-template-columns:1fr}.quotes{grid-template-columns:1fr}.more{grid-column:1}
  .cgrid{grid-template-columns:1fr}.cbig b{font-size:clamp(40px,12.4vw,60px)}.cinfo div{grid-template-columns:1fr;gap:4px}
  .foot{padding-bottom:calc(110px + env(safe-area-inset-bottom))}
  .dock{left:0;right:0;bottom:0;gap:0;display:grid;grid-template-columns:1fr 1fr;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:#0e0e0d;border-top:1px solid var(--line)}
  .dock a{justify-content:center;border-radius:10px;box-shadow:none;margin:0 4px;padding:14px}
}