/* page header */
.syshero{background:var(--mustard);color:var(--ink);position:relative;overflow:hidden;border-bottom:6px solid var(--ink)}
.syshero .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px;align-items:center;padding-block:44px 52px}
.crumb{display:inline-flex;gap:10px;align-items:center;margin-bottom:18px}
.crumb a{text-decoration:none;background:var(--ink);color:var(--bone);padding:5px 10px}
.syshero h1{font-size:clamp(3.6rem,10vw,9rem);margin:0}
.syshero .say{font-size:clamp(1.3rem,2.1vw,1.75rem);font-weight:600;line-height:1.25;max-width:30ch;margin:20px 0 0}
.syshero .props{position:relative;aspect-ratio:1;max-width:100%}
.syshero .props img{position:absolute;filter:var(--cut-shadow)}
.syshero .props .reel{width:62%;left:4%;top:8%;rotate:-8deg;animation:spin 18s linear infinite}
.syshero .props .clap{width:52%;right:0;bottom:6%;rotate:7deg;animation:bob 5s ease-in-out infinite alternate}
.syshero .props .strip{width:58%;left:10%;bottom:-2%;rotate:-14deg;animation:bob 6.5s ease-in-out infinite alternate-reverse}
.syshero .props .hand{position:absolute;right:2%;top:4%;font-size:1.9rem;transform:rotate(6deg);color:var(--ink)}
@keyframes spin{to{rotate:352deg}}

/* plain explanation */
.explain{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:28px}
.explain .col h2{font-size:2.6rem;margin:0 0 12px}
.explain .col p{margin:0 0 12px;max-width:52ch}
.explain .col.problem{background:var(--bone);color:var(--ink);padding:24px;border:2px solid rgba(14,13,12,.82);position:relative;transform:rotate(-.4deg)}
.explain .col.problem .note{position:absolute;right:14px;top:-16px;background:var(--note);font-family:var(--f-hand);font-weight:700;font-size:1.4rem;padding:3px 12px;transform:rotate(4deg);box-shadow:2px 3px 0 rgba(0,0,0,.35)}

/* the moving map */
.mapband{background:var(--blue);color:var(--bone);border-block:6px solid var(--ink);position:relative;overflow:clip}
.board{background:var(--bone);color:var(--ink);border:2px solid rgba(14,13,12,.82);padding:28px clamp(14px,3vw,32px) 28px;position:relative}
.board-head{display:flex;justify-content:space-between;align-items:center;gap:12px 20px;flex-wrap:wrap;margin-bottom:24px}
.board-head h3{font-size:clamp(2rem,4vw,3rem);margin:0}
.ctrl{display:flex;gap:8px;flex-wrap:wrap}
.ctrl button{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;background:var(--ink);color:var(--bone);border:2px solid var(--ink);padding:8px 12px;cursor:pointer}
.ctrl button:hover{background:var(--bone);color:var(--ink)}
.legend{display:flex;gap:8px 16px;flex-wrap:wrap;margin-bottom:22px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:14px;height:14px;border:1.5px solid var(--ink);display:inline-block}
.map{position:relative;display:grid;grid-template-columns:repeat(var(--cols,5),minmax(0,1fr));gap:104px 36px;padding-bottom:100px}
.map svg.wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.node{position:relative;z-index:2;text-align:left;font:inherit;color:inherit;background:var(--bone);border:2px solid var(--ink);padding:12px 12px 14px;cursor:pointer;min-width:0}
.node:nth-child(odd of .node){rotate:-.7deg} .node:nth-child(even of .node){rotate:.5deg}
.node .n{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.08em;opacity:.7}
.node b{display:block;font-family:var(--f-display);font-stretch:70%;font-weight:800;text-transform:uppercase;font-size:1.3rem;line-height:1;margin-top:4px}
.node .by{display:inline-block;margin-top:8px;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;padding:2px 6px;border:1.5px solid var(--ink)}
.node.gate{background:var(--orange)} .node.jev{background:var(--mustard)} .node.code{background:var(--ink);color:var(--bone)} .node.code .by{border-color:var(--bone)}
.node.on{outline:3px solid var(--red);outline-offset:4px}
.node:not(.gate):not(.jev):not(.code) .by{background:var(--blue);color:var(--bone);border-color:var(--blue)}
.map .agent{bottom:auto;top:0;transition:transform .6s cubic-bezier(.5,0,.3,1)}
.agent.codey svg .body{fill:#4a4640}

.detail{margin-top:8px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px 26px;border-top:2px dashed rgba(14,13,12,.5);padding-top:22px;align-items:start}
.detail .big{font-family:var(--f-display);font-stretch:62%;font-weight:900;font-size:5.4rem;line-height:.8;color:var(--orange);text-shadow:1.6px 1.1px 0 var(--misreg)}
.detail h4{font-family:var(--f-display);font-stretch:66%;font-weight:900;text-transform:uppercase;font-size:2.2rem;line-height:.95;margin:0 0 8px}
.detail p{margin:0 0 8px;max-width:62ch}
.detail .why{font-family:var(--f-hand);font-weight:700;font-size:1.45rem;line-height:1.15;color:var(--red)}
.detail{grid-template-columns:auto minmax(0,1fr) minmax(0,250px)}
.popwrap{position:relative;display:flex;flex-direction:column;gap:8px}
.poplabel{opacity:.7}
.popcard{filter:drop-shadow(3px 5px 0 rgba(14,13,12,.4));transform-origin:30% 0}
.popcard::before{content:"";position:absolute;left:50%;top:-10px;width:64px;height:18px;margin-left:-32px;background:rgba(232,220,196,.75);border:1px solid rgba(14,13,12,.15);rotate:-4deg}
.popcard.pop{animation:popin .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes popin{0%{transform:scale(.55) rotate(-14deg) translateY(-18px);opacity:0}70%{opacity:1}100%{transform:scale(1) rotate(0) translateY(0)}}
.popcard .runs{font-size:.62rem;letter-spacing:.06em;opacity:.75;border-top:1px dashed currentColor;padding-top:6px}
.popcard .who{font-size:1.7rem}
@media (max-width:900px){.detail{grid-template-columns:auto minmax(0,1fr)}.popwrap{grid-column:1 / -1;max-width:280px}}
@media (prefers-reduced-motion:reduce){.popcard.pop{animation:none}}

/* proof */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:20px;margin-bottom:40px}
.stat{background:var(--bone);color:var(--ink);border:2px solid rgba(14,13,12,.82);padding:18px 18px 20px;display:flex;flex-direction:column;gap:8px}
.stat:nth-child(odd){rotate:-.8deg} .stat:nth-child(even){rotate:.6deg}
.stat .num{font-size:clamp(3.6rem,6vw,5rem);line-height:.85;color:var(--orange)}
.stat .lbl{font-size:.98rem;line-height:1.35}
.stat.todo{background:transparent;color:var(--bone);border:2px dashed var(--bone-dim)}
.stat.todo .num{color:var(--bone-dim)}
.fill{display:inline-block;align-self:flex-start;background:var(--note);color:var(--ink);font-family:var(--f-hand);font-weight:700;font-size:1.2rem;line-height:1.1;padding:3px 10px;rotate:-2deg}
.frames{display:grid;grid-template-columns:minmax(0,1fr) 70px minmax(0,1fr) 70px minmax(0,1fr);align-items:center;gap:10px;position:relative;padding-bottom:30px}
.frame{margin:0;display:flex;flex-direction:column;gap:8px;align-items:center}
.frame .slot{width:100%;aspect-ratio:9/16;max-height:340px;background:repeating-linear-gradient(135deg,var(--ground-2) 0 10px,#2c2a27 10px 20px);border:2px dashed var(--bone-dim);display:grid;place-items:center;color:var(--bone-dim)}
.frame:nth-child(1) .slot{rotate:-1.5deg} .frame:nth-child(3) .slot{rotate:1deg} .frame:nth-child(5) .slot{rotate:-.6deg}
.frame figcaption{font-size:1.5rem;color:var(--bone);text-align:center}
.frame .slot{position:relative;overflow:hidden;background:var(--ground-2);border:6px solid var(--bone);box-shadow:3px 5px 0 rgba(0,0,0,.45)}
.frame .slot{width:min(100%,250px);max-height:none;aspect-ratio:9/16}
.frame .slot img{width:100%;height:100%;object-fit:cover;display:block}
.frame .dur{position:absolute;left:8px;top:8px;background:var(--ink);color:var(--bone);padding:2px 7px;font-size:.7rem}
.frarrow{width:70px;color:var(--orange);overflow:visible}
.framesnote{position:absolute;left:50%;bottom:0;translate:-50% 0}
.bn{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.bn .mono{display:block;margin-bottom:8px;opacity:.75}
.bn ul{margin:0;padding-left:18px;display:grid;gap:8px}
.bn ul.was li{text-decoration:line-through;text-decoration-color:var(--red);text-decoration-thickness:2px;opacity:.7}
.rules-card.wide{max-width:none}
.rules-card.wide ul{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));column-gap:32px}
@media (max-width:640px){.frames{grid-template-columns:1fr;justify-items:center}.frame{width:70%}.frarrow{rotate:90deg}.bn{grid-template-columns:1fr}}

/* self-improvement loop */
.loopwrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px;align-items:center}
.loopcopy h2{font-size:clamp(2.8rem,5.6vw,4.6rem);margin:0 0 16px}
.loopcopy p{margin:0 0 12px;max-width:46ch}
.draft-note{display:inline-block;margin-top:6px;background:var(--note);color:var(--ink);font-family:var(--f-hand);font-weight:700;font-size:1.4rem;padding:3px 12px;rotate:-3deg;box-shadow:2px 3px 0 rgba(0,0,0,.35)}
.loop{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:96px 70px;padding:20px 10px}
.loop svg.wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.station{position:relative;z-index:2;background:var(--bone);color:var(--ink);border:2px solid rgba(14,13,12,.82);padding:14px 14px 16px;min-width:0;transition:transform .3s ease}
.station:nth-child(2){rotate:-1.2deg} .station:nth-child(3){rotate:1deg} .station:nth-child(4){rotate:-.6deg} .station:nth-child(5){rotate:1.4deg}
.station b{display:block;font-family:var(--f-display);font-stretch:68%;font-weight:900;text-transform:uppercase;font-size:1.6rem;line-height:.95;margin:4px 0 6px}
.station p{margin:0;font-size:.92rem;line-height:1.35}
.station .n{opacity:.65;font-size:.68rem}
.station.s-code{background:var(--ink);color:var(--bone);border-color:var(--bone)}
.station.s-jev{background:var(--mustard)}
.station.s-test{background:var(--orange)}
.station.on{transform:scale(1.05)}
.station.on::after{content:"";position:absolute;inset:-8px;border:3px solid var(--red);pointer-events:none}
.token{position:absolute;left:0;top:0;width:78px;z-index:4;transition:transform .7s cubic-bezier(.5,0,.3,1);will-change:transform}
.token img{display:block;width:100%;filter:var(--cut-shadow);transition:rotate .5s ease}
.loopmid{position:absolute;left:50%;top:50%;translate:-50% -50%;text-align:center;font-size:1.7rem;line-height:.95;color:var(--orange);rotate:-6deg;z-index:1}

/* cast */
.cast{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,180px),1fr));gap:22px}
.member{background:var(--bone);color:var(--ink);border:2px solid rgba(14,13,12,.82);padding:16px 14px 18px;display:flex;flex-direction:column;gap:8px;position:relative}
.member:nth-child(3n+1){rotate:-1deg} .member:nth-child(3n+2){rotate:.8deg} .member:nth-child(3n){rotate:-.4deg}
.member .who{font-family:var(--f-display);font-stretch:66%;font-weight:900;text-transform:uppercase;font-size:2rem;line-height:.9}
.member p{margin:0;font-size:.95rem;line-height:1.4}
.member .does{font-family:var(--f-hand);font-weight:700;font-size:1.3rem;line-height:1.1}
.member.m-drew{background:var(--orange)} .member.m-jev{background:var(--mustard)} .member.m-code{background:var(--ink);color:var(--bone)}

/* rules + before/after */
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:32px;align-items:start}
.rules-card{background:var(--bone);color:var(--ink);border:2px solid rgba(14,13,12,.82);padding:24px;transform:rotate(.4deg);position:relative}
.rules-card h3,.ba h3{font-size:2.4rem;margin:0 0 14px}
.rules-card ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.rules-card li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:start}
.rules-card li::before{content:"✓";font-family:var(--f-hand);font-weight:700;font-size:1.5rem;line-height:.9;color:var(--red)}
.rules-card .stamp{position:absolute;right:-10px;bottom:-22px;width:110px;rotate:-12deg;filter:var(--cut-shadow)}
.ba{display:grid;gap:18px}
.ba .side{border:2px solid var(--bone);padding:18px 20px}
.ba .side.after{background:var(--bone);color:var(--ink);border-color:rgba(14,13,12,.82)}
.ba .side .mono{display:block;margin-bottom:8px}
.ba .side ul{margin:0;padding-left:18px;display:grid;gap:6px}
.ba .side.before li{text-decoration:line-through;text-decoration-color:var(--red);text-decoration-thickness:2px;color:var(--bone-dim)}

/* next to cut */
.next{background:var(--red);color:var(--bone);border-block:6px solid var(--ink);position:relative;overflow:hidden}
.next .wrap{padding-block:56px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center}
.next h2{font-size:clamp(2.6rem,6vw,4.6rem);margin:0 0 12px}
.next p{margin:0;max-width:56ch;font-size:1.1rem}
.next .draft{display:inline-block;margin-top:14px;background:var(--note);color:var(--ink);font-family:var(--f-hand);font-weight:700;font-size:1.3rem;padding:3px 10px;rotate:-2deg}
.next img{width:150px;rotate:12deg;filter:var(--cut-shadow);animation:snipjaw 2.4s ease-in-out infinite alternate}
@keyframes snipjaw{from{transform:rotate(-6deg)}to{transform:rotate(6deg)}}

.pager .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:36px}
.pager a{text-decoration:none;display:flex;flex-direction:column;gap:4px}
.pager a b{font-family:var(--f-display);font-stretch:66%;font-weight:900;text-transform:uppercase;font-size:2rem;line-height:1}
.pager a:hover b{color:var(--orange)}

@media (max-width:900px){
  .syshero .wrap{grid-template-columns:1fr}
  .syshero .props{max-width:360px;justify-self:center;width:100%}
  .map{grid-template-columns:repeat(2,minmax(0,1fr));gap:70px 30px}
  .next .wrap{grid-template-columns:1fr}
  .loopwrap{grid-template-columns:1fr}
}
@media (max-width:520px){.loop{gap:90px 18px;padding:10px 0}.station b{font-size:1.25rem}.station p{font-size:.84rem}.token{width:60px}}
@media (max-width:520px){
  .map{gap:108px 16px}
  .node{padding:10px 10px 12px}
  .node b{font-size:1.1rem}
  .detail{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.syshero .props img,.next img{animation:none!important}}

.map .agent .carry{width:auto;max-width:64px;height:30px;object-fit:contain}

@media (max-width:640px){
  .node .by{font-size:.72rem}
  .node .n{font-size:.72rem}
  .frame .dur{font-size:.76rem}
  .rules-card .stamp{right:6px;width:88px}
  .ctrl button{padding:11px 14px}
  .legend{font-size:.74rem}
  .syshero .props{max-width:300px}
  .syshero h1{font-size:clamp(3rem,15vw,5rem)}
  .popwrap{max-width:none}
}

/* phone: the step explanation rides along at the bottom while the map scrolls */
@media (max-width:640px){
  .detail{position:sticky;bottom:0;z-index:6;background:var(--bone);margin-inline:calc(-1 * (max(16px,env(safe-area-inset-left,0px)) + 2px + clamp(14px,3vw,32px)));padding:10px calc(14px + 16px) calc(12px + env(safe-area-inset-bottom,0px));border-top:2px solid var(--ink);box-shadow:0 200px 0 0 var(--bone);grid-template-columns:auto minmax(0,1fr);gap:2px 14px}
  .detail .big{font-size:2.6rem}
  .detail h4{font-size:1.35rem;margin-bottom:2px}
  .detail p{font-size:.88rem;line-height:1.35;margin-bottom:2px}
  .detail .why{font-size:1.2rem}
  .popwrap{grid-column:1 / -1;flex-direction:row;align-items:center;gap:10px}
  .poplabel{display:none}
  .popcard{padding:8px 12px;flex-direction:row;align-items:baseline;gap:10px;flex-wrap:wrap}
  .popcard .who{font-size:1.25rem}
  .detail .popcard{rotate:-1deg!important}
  .popcard p,.popcard .runs,.popcard::before{display:none}
}