/* Swedish modernist: flat shapes, a watching eye, a grotesk made in Stockholm. */
:root{
  --paper:#f3eee3; --paper2:#e9e1d0; --ink:#1b1a18;
  --coral:#e8553e; --mustard:#f2b431; --teal:#1f6e6c; --cobalt:#2d55a5; --pink:#f3b5bd;
  --bg:var(--paper);
  --display:"Familjen Grotesk","Helvetica Neue",Arial,sans-serif;
  --serif:"Newsreader",Georgia,serif;
  --mono:"Martian Mono",ui-monospace,Menlo,monospace;
  --t:1;
  --pad:clamp(1.2rem,6vw,7rem);
}
body[data-mode=slow]{--t:3}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:clamp(17px,1.1vw,20px);line-height:1.5;overflow-x:clip;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{color:var(--coral)}
button{font:inherit;color:inherit}
::selection{background:var(--mustard);color:var(--ink)}

/* fine print grain */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:999;opacity:.18;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .1  0 0 0 0 .1  0 0 0 0 .09  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* ---------- two systems ---------- */
.s{display:none!important}
body[data-mode=slow] .s{display:revert!important}
body[data-mode=slow] .f{display:none!important}

.lever{position:fixed;top:14px;right:14px;z-index:100;display:flex;align-items:center;gap:.7rem;background:var(--ink);color:var(--paper);border:0;border-radius:999px;
  padding:.4rem 1.1rem .4rem .5rem;cursor:pointer;transition:transform .15s}
.lever:hover{transform:scale(1.04)}
.lever .slot{position:relative;width:58px;height:30px;flex:none;border-radius:999px;background:var(--teal);transition:background .4s}
body[data-mode=slow] .lever .slot{background:var(--coral)}
.lever .arm{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:var(--paper);transition:transform .5s cubic-bezier(.5,1.7,.4,1)}
.lever .arm::after{content:"";position:absolute;inset:8px;border-radius:50%;background:var(--ink)}
body[data-mode=slow] .lever .arm{transform:translateX(28px)}
.lever .lbl{display:grid;font:400 .58rem/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;text-align:left}
.lever .lbl i{font-style:normal;grid-area:1/1;transition:opacity .3s,transform .3s}
.lever .lbl b{display:block;font:700 1.05rem/1.05 var(--display);letter-spacing:-.01em;text-transform:none}
.lever .l-slow{opacity:0;transform:translateY(8px)}
body[data-mode=slow] .lever .l-fast{opacity:0;transform:translateY(-8px)}
body[data-mode=slow] .lever .l-slow{opacity:1;transform:none}

.flash{position:fixed;inset:0;display:grid;place-items:center;pointer-events:none;z-index:200}
.flash span{width:min(56vmin,420px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;text-align:center;
  font:700 clamp(2rem,6vmin,3.6rem)/.95 var(--display);letter-spacing:-.03em;background:var(--coral);color:var(--paper);opacity:0}
body[data-mode=slow] .flash span{background:var(--teal)}
.flash.go span{animation:flash 1.2s cubic-bezier(.2,1.5,.3,1) forwards}
@keyframes flash{0%{opacity:0;transform:scale(.3) rotate(-30deg)}20%{opacity:1;transform:scale(1) rotate(-8deg)}70%{opacity:1;transform:scale(1) rotate(-8deg)}100%{opacity:0;transform:scale(1.15) rotate(-8deg)}}

/* ---------- shared type ---------- */
.giant{font:700 clamp(2.8rem,7.6vw,8.6rem)/.9 var(--display);letter-spacing:-.045em}
.eyebrow{font:700 .72rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;margin-bottom:1.4rem;display:flex;align-items:center;gap:.7rem}
.eyebrow::before{content:"";width:.9rem;height:.9rem;border-radius:50%;background:var(--coral)}
.red{color:var(--coral)} .ochre{color:var(--mustard)}
.outline{color:transparent;-webkit-text-stroke:2px currentColor}
.stamp{display:inline-grid;place-items:center;text-align:center;aspect-ratio:1;border-radius:50%;padding:1.2em;
  font:700 1.3rem/1 var(--display);letter-spacing:-.02em;background:var(--coral);color:var(--paper);transform:rotate(-10deg)}
.btn{font:700 1.05rem/1 var(--display);letter-spacing:-.01em;background:var(--ink);color:var(--paper);border:0;border-radius:999px;padding:.85em 1.4em;cursor:pointer;transition:transform .15s,background .2s}
.btn:hover{transform:translateY(-2px);background:var(--coral)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:wait}
.btn.ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 2px currentColor}
.btn.ghost:hover{background:transparent;color:var(--mustard)}
.receipt{max-width:62rem;margin:2rem 0;padding:1.2rem 1.4rem;border-left:6px solid var(--mustard);font-size:1.02rem}

/* reveal on scroll */
[data-r]{opacity:0;transform:translateY(40px);transition:transform calc(.9s*var(--t)) cubic-bezier(.16,1,.3,1),opacity calc(.7s*var(--t))}
[data-r].in{opacity:1;transform:none}

/* watching eyes */
.eye .pupil{transition:transform .25s cubic-bezier(.2,.8,.3,1)}
.eye{animation:blink calc(6s*var(--t)) infinite;transform-box:fill-box;transform-origin:center}
@keyframes blink{0%,96%,100%{transform:scaleY(1)}98%{transform:scaleY(.08)}}
.brow{transform-box:fill-box;transform-origin:left center;animation:brow calc(5s*var(--t)) ease-in-out infinite}
@keyframes brow{0%,60%,100%{transform:none}70%,88%{transform:translateY(-14px) rotate(-5deg)}}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;overflow:hidden;padding:calc(var(--pad)*.7) var(--pad) 7rem;display:flex;flex-direction:column;justify-content:center;--bg:var(--paper)}
.shapes{position:absolute;right:-4vw;top:50%;translate:0 -50%;height:min(108vh,980px);width:auto;pointer-events:none}
.sh{transform-box:fill-box;transform-origin:center;animation:drop calc(1.1s*var(--t)) cubic-bezier(.2,1.4,.3,1) both}
.sh-c{animation-delay:.3s} .sh-d{animation-delay:.45s}
@keyframes drop{from{transform:translateY(-60px) scale(.6);opacity:0}}
.sh-a{animation:drop calc(1.1s*var(--t)) .15s cubic-bezier(.2,1.4,.3,1) both,float calc(9s*var(--t)) 1.5s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-14px) rotate(6deg)}}
.hero .eye{animation:blink calc(6s*var(--t)) 2s infinite}
.kicker{position:relative;font:700 .72rem/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;margin-bottom:1.6rem;max-width:30rem;animation:fadein 1s .5s both}
@keyframes fadein{from{opacity:0}}
.name{position:relative;font:700 clamp(3.8rem,12.6vw,14rem)/.8 var(--display);text-transform:lowercase;letter-spacing:-.06em;z-index:1}
.name span{display:block;animation:slam calc(.9s*var(--t)) cubic-bezier(.2,1.3,.3,1) both}
.name .dr{font-size:.28em;letter-spacing:-.02em;--from:translateY(-20vh);margin-bottom:.2em}
.name .l1{--from:translateX(-40vw);animation-delay:.1s}
.name .l2{--from:translateX(40vw);animation-delay:.22s;color:var(--cobalt)}
.name .l3{--from:translateY(30vh);animation-delay:.34s;color:var(--coral)}
@keyframes slam{from{transform:var(--from);opacity:0}}
/* knockout halo in the background colour: overlapping lines and shapes cut a thin gap */
.name .l1,.name .l2,.name .l3{--h:.028em;text-shadow:
  var(--h) 0 var(--bg),calc(var(--h)*-1) 0 var(--bg),0 var(--h) var(--bg),0 calc(var(--h)*-1) var(--bg),
  calc(var(--h)*.7) calc(var(--h)*.7) var(--bg),calc(var(--h)*-.7) calc(var(--h)*.7) var(--bg),
  calc(var(--h)*.7) calc(var(--h)*-.7) var(--bg),calc(var(--h)*-.7) calc(var(--h)*-.7) var(--bg)}
.band{position:relative;z-index:1;margin-top:2.4rem;max-width:min(64rem,70vw);animation:fadein calc(.9s*var(--t)) .6s both}
.band .f{font:700 clamp(1.6rem,3.4vw,3.4rem)/1 var(--display);letter-spacing:-.035em;display:inline;background:var(--ink);color:var(--paper);padding:.12em .3em;box-decoration-break:clone;-webkit-box-decoration-break:clone;line-height:1.3}
.band em{font-style:normal;color:var(--mustard)}
.band .s{font-size:clamp(1rem,1.45vw,1.25rem);max-width:46rem;background:var(--paper);padding:.6rem 0}
.hero-stamp{position:absolute;right:calc(var(--pad)*.8);bottom:9%;width:clamp(8rem,13vw,11rem);background:var(--cobalt);font-size:clamp(.95rem,1.4vw,1.25rem);z-index:2;animation:stampin calc(.6s*var(--t)) 1.2s cubic-bezier(.3,1.6,.4,1) both}
.hero-stamp small{font:400 .5em/1.4 var(--mono);letter-spacing:.08em;display:block;margin-top:.4em}
@keyframes stampin{from{transform:scale(0) rotate(-60deg)}}
.cue{position:absolute;left:var(--pad);bottom:2rem;font:700 .72rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;animation:bob 2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(6px)}}

.ticker{position:relative;z-index:3;background:var(--cobalt);color:var(--paper);overflow:hidden}
.ticker .track{display:flex;width:max-content;animation:marq calc(52s*var(--t)) linear infinite}
.ticker span{font:700 clamp(1.2rem,2.2vw,2rem)/1 var(--display);letter-spacing:-.02em;padding:.8rem 0;white-space:nowrap}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- systems ---------- */
.systems{padding:9rem var(--pad) 6rem;display:grid;grid-template-columns:1fr 1fr;gap:2.4rem}
.sys{position:relative;padding:2.4rem 2rem 2.2rem 7rem;min-height:15rem;background:var(--mustard)}
.sys.dark{background:var(--teal);color:var(--paper);transform:translateY(3rem)}
.sys .num{position:absolute;left:1.4rem;top:1.6rem;width:4.4rem;height:4.4rem;border-radius:50%;display:grid;place-items:center;font:700 2.6rem/1 var(--display);background:var(--ink);color:var(--paper)}
.sys h2{font:700 clamp(1.9rem,3.2vw,3.2rem)/.95 var(--display);letter-spacing:-.04em}
.sys p{font:400 .74rem/1.5 var(--mono);text-transform:uppercase;letter-spacing:.08em;margin-top:1rem}
.sys-note{grid-column:1/-1;max-width:48rem;margin-top:4rem;font-size:1.2rem}
.sys-note b{display:block;font:700 2rem/1 var(--display);letter-spacing:-.04em;margin-top:.6rem;color:var(--coral)}

/* ---------- legs / figure ---------- */
.legs{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:3rem;align-items:center;padding:6rem var(--pad) 8rem;overflow:hidden}
.legs .giant{font-size:clamp(2.6rem,5.8vw,6.6rem)}
.leglist{list-style:none;margin:2.4rem 0;display:grid;gap:1.2rem;max-width:40rem}
.leglist li{border-top:2px solid var(--ink);padding-top:.9rem;font-size:1.15rem}
.leglist b{display:block;font:700 2rem/1 var(--display);letter-spacing:-.035em;margin-bottom:.3rem}
.leglist li:first-child b{color:var(--teal)} .leglist li:last-child b{color:var(--coral)}
.lean{font:700 .78rem/1.6 var(--mono);text-transform:uppercase;letter-spacing:.04em;max-width:38rem;background:var(--ink);color:var(--paper);padding:1rem 1.3rem;border-radius:14px}
.lean span{color:var(--mustard)}
.monument{width:100%;max-height:84vh;overflow:visible}
#statue{transform-origin:200px 600px;transition:transform calc(2.2s*var(--t)) cubic-bezier(.3,1.8,.4,1)}
.legtxt{font:700 20px var(--display);letter-spacing:-.3px;fill:var(--paper)}
.qmark{font:700 70px var(--display);fill:var(--paper);text-anchor:middle}
.plinth{font:700 .8rem var(--mono);letter-spacing:6px;fill:var(--ink);text-anchor:middle}
.rule{transform-box:fill-box;transform-origin:85% 80%;animation:wave calc(3s*var(--t)) ease-in-out infinite}
@keyframes wave{50%{transform:rotate(-8deg)}}

/* ---------- bench ---------- */
.bench{background:var(--teal);color:var(--paper);padding:9rem var(--pad)}
.bench .giant{font-size:clamp(2.4rem,6.4vw,7.2rem)}
.clevr{display:grid;grid-template-columns:1.45fr 1fr;gap:2.4rem;margin:3.5rem 0 5rem;align-items:start}
#clevr{width:100%;background:linear-gradient(#d4cfc3,#aca79c);border-radius:20px}
#clevr .obj{transform-box:fill-box;transform-origin:center;transition:transform calc(1s*var(--t)) cubic-bezier(.5,-.4,.6,1),opacity calc(1s*var(--t))}
#clevr .obj.gone{transform:translateY(-480px) rotate(-30deg);opacity:0}
#clevr .obj.blink{animation:oblink .35s steps(2) 6}
@keyframes oblink{50%{opacity:.15}}
#clevr .obj.forgot{filter:drop-shadow(0 0 6px var(--mustard)) drop-shadow(0 0 2px var(--mustard))}
.clevr-panel .q{font:700 clamp(1.3rem,2vw,1.8rem)/1.1 var(--display);letter-spacing:-.025em;min-height:4.4em}
.clevr-panel .q i{font-style:normal;color:var(--mustard)}
.btns{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.2rem 0}
.bench .btn{background:var(--paper);color:var(--ink)}
.bench .btn:hover{background:var(--mustard)}
.bench .btn.ghost{background:transparent;color:var(--paper)}
.readout{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-top:1rem}
.readout div{background:rgba(0,0,0,.18);border-radius:16px;padding:.8rem 1rem}
.readout span{font:700 .68rem/1 var(--mono);letter-spacing:.15em;text-transform:uppercase}
.readout b{display:block;font:700 4.6rem/1 var(--display);letter-spacing:-.04em}
.verdict{margin-top:1rem;font:700 1.5rem/1.1 var(--display);letter-spacing:-.025em;min-height:2.2em}
.verdict.ok{color:#a8e3b4}.verdict.bad{color:var(--mustard)}
.bignums{display:grid;grid-template-columns:1fr 1fr;gap:3rem;border-top:2px solid var(--paper);padding-top:2rem}
.bn b{display:block;font:700 clamp(4.6rem,14vw,14rem)/.85 var(--display);letter-spacing:-.06em}
.bn.hot b{color:var(--mustard)}
.bn span{font:700 .8rem/1.5 var(--mono);text-transform:uppercase;letter-spacing:.04em;display:block;max-width:24rem;margin-top:.8rem}
.slogan{font:700 clamp(1.9rem,4.2vw,4rem)/1 var(--display);letter-spacing:-.04em;color:var(--mustard);margin:4rem 0 1rem;max-width:60rem}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem;margin-top:5rem}
.card{background:var(--paper);color:var(--ink);padding:1.8rem;border-radius:22px;position:relative}
.card:nth-child(2){background:var(--mustard)} .card:nth-child(3){background:var(--pink)}
.card .n{display:grid;place-items:center;width:6.4rem;height:6.4rem;border-radius:50%;background:var(--ink);color:var(--paper);font:700 2rem/1 var(--display);letter-spacing:-.04em}
.card:nth-child(2) .n{background:var(--cobalt)} .card:nth-child(3) .n{background:var(--coral);font-size:3rem}
.card h3{font:700 1.7rem/1 var(--display);letter-spacing:-.035em;margin-top:1rem}
.card p{margin-top:.6rem;font-size:1rem}

/* ---------- socio ---------- */
.socio{padding:9rem var(--pad);overflow:hidden}
.hhh{display:flex;flex-wrap:wrap;align-items:center;gap:0 2rem;position:relative;margin-bottom:5rem}
.hhh .w{font:700 clamp(3.2rem,9.6vw,10.6rem)/.9 var(--display);letter-spacing:-.055em;transition:opacity .5s calc(var(--i)*.35s*var(--t)),transform .6s calc(var(--i)*.35s*var(--t)) cubic-bezier(.2,1.5,.3,1);opacity:0;transform:translateY(.3em)}
.hhh.in .w{opacity:1;transform:none}
.hhh .w:nth-child(1){color:var(--teal)} .hhh .w:nth-child(2){color:var(--cobalt)} .hhh .w:nth-child(3){color:var(--coral)}
.hhh .pick{position:absolute;right:3%;top:18%;width:clamp(9rem,15vw,13rem);font-size:clamp(1.6rem,3vw,2.6rem);background:var(--mustard);color:var(--ink);opacity:0;transform:scale(0) rotate(-40deg)}
.hhh.in .pick{animation:stampin2 calc(.5s*var(--t)) calc(1.4s*var(--t)) cubic-bezier(.3,1.6,.4,1) forwards}
@keyframes stampin2{to{opacity:1;transform:scale(1) rotate(-12deg)}}
.pull{max-width:66rem;border-left:10px solid var(--coral);padding:.4rem 0 .4rem 2rem;margin-bottom:7rem}
.pull p{font:italic 600 clamp(1.8rem,3.5vw,3.4rem)/1.1 var(--serif)}
.pull cite{display:block;margin-top:1.2rem;font:400 .78rem/1.5 var(--mono);font-style:normal}
.you{display:grid;grid-template-columns:auto 1fr;gap:4rem;align-items:center;margin-bottom:8rem}
.target{position:relative;width:min(62vw,440px)}
.target svg{display:block;width:100%}
.target span{position:absolute;left:50%;bottom:-.35em;translate:-50% 0;font:700 clamp(3.6rem,9vw,7.4rem)/1 var(--display);letter-spacing:-.05em;background:var(--ink);color:var(--paper);padding:.02em .25em .08em;border-radius:.2em;transform:rotate(-5deg)}
.you-copy h3{font:700 clamp(2.8rem,6.4vw,6.8rem)/.9 var(--display);letter-spacing:-.05em}
.you-copy p{font-size:1.2rem;max-width:36rem;margin-top:1.2rem}
.acro{margin-bottom:8rem}
.acro h3{font:700 clamp(2.2rem,5vw,5.2rem)/.92 var(--display);letter-spacing:-.045em;margin-bottom:2.4rem}
.letters{display:grid;grid-template-columns:repeat(7,1fr);gap:.6rem}
.letters span{color:var(--paper);padding:1rem .6rem 1.1rem;font:700 .68rem/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;text-align:center;border-radius:18px;
  transform:scale(0) rotate(-20deg);transition:transform calc(.6s*var(--t)) calc(var(--i)*.1s*var(--t)) cubic-bezier(.2,1.5,.3,1)}
.letters span:nth-child(1){background:var(--teal)} .letters span:nth-child(2){background:var(--cobalt)} .letters span:nth-child(3){background:var(--coral)}
.letters span:nth-child(4){background:var(--mustard);color:var(--ink)} .letters span:nth-child(5){background:var(--ink)} .letters span:nth-child(6){background:var(--pink);color:var(--ink)} .letters span:nth-child(7){background:var(--teal)}
.letters.in span{transform:none}
.letters b{display:block;font:700 clamp(2.4rem,5.4vw,5.4rem)/1 var(--display);letter-spacing:-.05em;margin-bottom:.4rem;text-transform:none}
.acro p{margin-top:1.6rem;max-width:52rem}
.qzero{background:var(--cobalt);color:var(--paper);padding:3.4rem;border-radius:28px;margin-bottom:8rem}
.qzero .eyebrow::before{background:var(--mustard)}
.qzero h2{font:700 clamp(2.4rem,6vw,6.4rem)/.92 var(--display);letter-spacing:-.05em}
.qzero .red{color:var(--mustard)}
.qzero .btn{font-size:1.6rem;min-width:7rem;background:var(--paper);color:var(--ink)}
.qzero .btn:hover{background:var(--mustard)}
.qz-out{font:700 clamp(1.3rem,2.4vw,2.2rem)/1.1 var(--display);letter-spacing:-.03em;color:var(--mustard);min-height:2.4em}
.medal{display:grid;grid-template-columns:auto 1fr;gap:4rem;align-items:center}
.medal-disc{position:relative;width:min(60vw,300px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;text-align:center;background:var(--mustard);
  box-shadow:0 0 0 12px var(--paper),0 0 0 22px var(--coral);animation:swing calc(5s*var(--t)) ease-in-out infinite}
.medal-disc span{font:italic 700 clamp(1.6rem,3.2vw,2.5rem)/.95 var(--display);letter-spacing:-.04em;color:var(--ink);transform:rotate(-8deg)}
@keyframes swing{50%{rotate:6deg}}
.medal-copy h3{font:700 clamp(1.7rem,3vw,2.9rem)/1.02 var(--display);letter-spacing:-.035em;max-width:46rem}
.medal-copy .s p{margin-bottom:.8rem;max-width:46rem}

/* ---------- city ---------- */
.city{background:var(--paper2);padding:8rem 0 5rem;position:relative;overflow:hidden}
.city-head{display:grid;grid-template-columns:1.3fr 1fr;gap:3rem;padding:0 var(--pad);align-items:end}
.city .giant{font-size:clamp(2.4rem,6vw,6.8rem)}
.legend{font:400 .78rem/1.7 var(--mono);margin-bottom:1rem}
.sw{display:inline-block;width:.9rem;height:.9rem;border-radius:50%;vertical-align:-.1rem;margin:0 .3rem 0 .6rem}
.sw:first-child{margin-left:0}
.sw.ink{background:var(--teal)} .sw.red{background:var(--coral)} .sw.grey{background:#8f897d}
.city-stage{position:relative;height:min(82vh,860px);margin-top:2rem}
.city-stage::before{content:"";position:absolute;width:min(66vh,660px);aspect-ratio:1;border-radius:50%;background:var(--mustard);left:50%;top:40%;translate:-50% -50%}
#cityCanvas{position:absolute;inset:0;width:100%;height:100%;cursor:grab;touch-action:pan-y;z-index:1}
#cityCanvas:active{cursor:grabbing}
.city-labels{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:2}
.city-labels span{position:absolute;left:0;top:0;translate:-50% -50%;font:700 .64rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;background:var(--ink);color:var(--paper);padding:.4rem .6rem;border-radius:999px;white-space:nowrap}
.city-labels span.yr{background:none;color:var(--paper);font-size:.6rem;padding:0}
.city-labels span.big{font:700 1.15rem/1 var(--display);letter-spacing:-.02em;text-transform:none;padding:.45rem .9rem}
.city-labels span.big:not(.red){background:var(--teal)}
.city-labels span.red{background:var(--coral)}
.tip{position:absolute;pointer-events:none;max-width:340px;background:var(--paper);border-radius:18px;box-shadow:0 10px 30px rgba(0,0,0,.18);padding:.9rem 1.1rem;display:none;z-index:5}
.tip b{display:block;font:700 1.15rem/1.05 var(--display);letter-spacing:-.025em;margin-bottom:.4rem}
.tip span{font:400 .68rem/1.5 var(--mono);display:block}
.tip .c{font:700 2.2rem/1 var(--display);color:var(--coral);margin-top:.3rem;letter-spacing:-.04em}
.tally{display:flex;align-items:center;gap:1.4rem;padding:0 var(--pad);position:relative;z-index:2}
.tally b{font:700 clamp(4.6rem,12vw,11rem)/.8 var(--display);letter-spacing:-.06em;color:var(--coral)}
.tally span{font:700 .82rem/1.5 var(--mono);text-transform:uppercase;letter-spacing:.06em}

/* ---------- plan ---------- */
.plan{background:var(--paper);padding:9rem var(--pad)}
.plan .outline{-webkit-text-stroke:2px var(--cobalt)}
.years{list-style:none;margin-top:5rem}
.years li{display:grid;grid-template-columns:clamp(7rem,17vw,15rem) 1fr;gap:2rem;border-top:2px solid var(--ink);padding:1.4rem 0 2rem;align-items:start}
.years h3{padding-top:.35rem}
.yr{font:700 clamp(3rem,6.4vw,6.6rem)/.8 var(--display);letter-spacing:-.06em;color:var(--teal);transition:color .3s}
.years li:nth-child(3n+2) .yr{color:var(--cobalt)} .years li:nth-child(3n) .yr{color:var(--coral)}
.years li:hover .yr{color:var(--mustard)}
.years h3{font:700 clamp(1.7rem,3vw,3.1rem)/.98 var(--display);letter-spacing:-.04em;max-width:50rem}
.years p{font-size:1.1rem;max-width:52rem}
.years li.peak{background:var(--mustard);border-radius:24px;border-top:0;margin:1rem calc(var(--pad)*-.3);padding-inline:calc(var(--pad)*.3)}
.years li.peak .yr{color:var(--ink)}

/* ---------- outside ---------- */
.outside{padding:9rem var(--pad);background:var(--paper2)}
.ventures{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin:4rem 0}
.ventures article{padding:1.8rem;border-radius:24px;background:var(--paper)}
.ventures article:first-child{background:var(--cobalt);color:var(--paper)}
.ventures article:first-child .role{color:var(--mustard)}
.ventures .role{font:700 .68rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--coral)}
.ventures h3{font:700 3rem/.95 var(--display);letter-spacing:-.05em;margin:.6rem 0}
.teach{max-width:56rem;font-size:1.15rem}
.teach h3{font:700 clamp(1.9rem,3.6vw,3.4rem)/.95 var(--display);letter-spacing:-.045em;margin-bottom:.8rem}

/* ---------- comrades ---------- */
.comrades{background:var(--ink);color:var(--paper);padding:8rem var(--pad)}
.comrades .eyebrow::before{background:var(--mustard)}
.comrades h2{font:700 clamp(2.2rem,5vw,5.6rem)/.92 var(--display);letter-spacing:-.05em;margin-bottom:3rem}
.names{display:flex;flex-wrap:wrap;gap:.3rem 1.3rem;align-items:baseline}
.names b{font:400 1.4rem/1.15 var(--display);letter-spacing:-.02em;opacity:.75}
.names b.l{font-size:2.2rem;font-weight:600;opacity:.95;color:var(--pink)}
.names b.xl{font-size:clamp(2.6rem,4.6vw,4.2rem);font-weight:700;letter-spacing:-.045em;color:var(--mustard);opacity:1}
.names b:hover{color:var(--coral);opacity:1}

/* ---------- garage ---------- */
.garage{background:var(--paper);background-image:linear-gradient(rgba(45,85,165,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(45,85,165,.12) 1px,transparent 1px);background-size:28px 28px}
.garage-stage{height:240vh;position:relative}
.garage-sticky{position:sticky;top:0;height:100vh;display:grid;grid-template-columns:minmax(18rem,.8fr) 1.5fr;gap:2rem;align-items:center;padding:3rem var(--pad);overflow:hidden}
.garage .giant{font-size:clamp(2.4rem,5.2vw,6rem)}
.garage .sub{font:italic 600 clamp(1.3rem,2vw,1.8rem)/1.2 var(--serif);margin:.8rem 0 1.6rem}
.parts{font:400 .68rem/1.25 var(--mono);text-transform:uppercase;letter-spacing:.04em;padding-left:2.2rem}
.parts li{padding:.18rem 0;opacity:.35;transition:opacity .3s}
.parts li.lit{opacity:1}
.parts li.lit::marker{color:var(--coral);font-weight:700}
#engine{width:100%;max-height:92vh;overflow:visible}
.eng polygon,.eng rect,.eng circle,.eng path{fill:var(--paper);stroke:var(--ink);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.eng .thin{fill:none;stroke-width:1.3}
.eng line{stroke:var(--ink);stroke-width:2.4}
.eng .tube{fill:none;stroke-width:11}
.eng .tube-in{fill:none;stroke:var(--paper);stroke-width:6}
.eng .wire{fill:none;stroke-width:4;stroke:var(--cobalt)}
.eng .hose{fill:none;stroke:var(--ink);stroke-width:16}
.eng .hose-in{fill:none;stroke:var(--coral);stroke-width:10}
.eng .belt{fill:none;stroke-width:6;stroke:var(--ink)}
.eng .tag line{stroke:var(--coral);stroke-width:1.6}
.eng .tag circle{fill:var(--coral);stroke:var(--coral)}
.eng .tag text{fill:var(--paper);font:700 15px var(--mono);text-anchor:middle;stroke:none}
.eng .lbl{fill:var(--ink);stroke:none;font:700 22px var(--display);text-anchor:middle;letter-spacing:1px}
.eng .lbl.small{font:700 10px var(--mono);letter-spacing:1px;fill:var(--coral)}
#axes line{stroke:var(--cobalt);stroke-width:1.2;stroke-dasharray:6 6;opacity:.7}
.titleblock rect,.titleblock path{fill:var(--paper);stroke:var(--ink);stroke-width:2}
.titleblock path{fill:none}
.titleblock text{font:400 10px var(--mono);fill:var(--ink);stroke:none;letter-spacing:.5px}
.titleblock .tb-big{font:700 15px var(--display);letter-spacing:.2px}
.garage-coda{padding:2rem var(--pad) 9rem;display:grid;grid-template-columns:1.5fr auto;gap:3rem;align-items:center}
.garage-coda p{font:700 clamp(1.7rem,3vw,3rem)/1.02 var(--display);letter-spacing:-.04em;max-width:52rem}
.garage-coda p.s{font:400 1.15rem/1.5 var(--serif);letter-spacing:0}
.garage-stamp{width:clamp(9rem,15vw,13rem);background:var(--mustard);color:var(--ink);font-size:clamp(1.1rem,1.8vw,1.6rem)}

/* ---------- enlist ---------- */
.enlist{position:relative;overflow:hidden;background:var(--coral);color:var(--paper);padding:9rem var(--pad) 5rem}
.foot-shapes{position:absolute;right:-4vw;top:3rem;translate:none;height:min(80vh,640px);width:auto}
.enlist .giant{position:relative;font-size:clamp(5.6rem,20vw,22rem);line-height:.8;letter-spacing:-.07em}
.write{position:relative;font:700 clamp(1.7rem,3.6vw,3.6rem)/1 var(--display);letter-spacing:-.04em;margin:2rem 0}
.write a{color:var(--ink)}
.links{position:relative;display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:3rem;max-width:60rem}
.links a{font:700 1.05rem/1 var(--display);letter-spacing:-.01em;text-decoration:none;background:var(--ink);color:var(--paper);padding:.85em 1.3em;border-radius:999px}
.links a:hover{background:var(--paper);color:var(--ink)}
.receipts{position:relative;max-width:60rem;background:var(--ink);padding:1.2rem 1.5rem;border-radius:22px}
.receipts summary{cursor:pointer;font:700 1.3rem/1 var(--display);letter-spacing:-.02em}
.receipts ul{margin:1rem 0 0 1.2rem;font-size:.95rem}
.receipts li{margin:.35rem 0}
.fine{position:relative;font:400 .7rem/1.6 var(--mono);max-width:46rem;margin-top:2.4rem}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .systems,.legs,.clevr,.bignums,.cards,.you,.medal,.city-head,.ventures,.garage-sticky,.garage-coda{grid-template-columns:1fr}
  .sys.dark{transform:none}
  .letters{grid-template-columns:repeat(4,1fr)}
  .monument-wrap{max-width:420px;margin:0 auto}
  .garage-stage{height:auto}
  .garage-sticky{position:relative;height:auto}
  .parts{columns:2}
  .lever .lbl{display:none}
  .lever{padding:.4rem}
  .hero{justify-content:flex-start;min-height:auto;padding-top:7rem;padding-bottom:8rem}
  .shapes{right:-30vw;top:6rem;translate:none;height:60vh}
  .hero-stamp{display:none}
  .band{max-width:none}
  .hhh .pick{position:relative;right:auto;top:auto;margin-top:1rem}
  .city-stage{height:70vh}
  .foot-shapes{opacity:.5}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  [data-r]{opacity:1;transform:none}
  .hhh .w,.hhh .pick,.letters span{opacity:1;transform:none}
}