/* SPLIT Labs: the living architectural story. Layout, typography and interface.
   The scene itself is positioned by assets/js/story-engine.js. */
:root{
  --cream:#f7efe4; --cream2:#f1e4d3; --ink:#1d1b19; --ink2:#4a443d; --accent:#a3573a; --line:rgba(40,34,28,.28);
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif; --sans:'Jost','Helvetica Neue',Arial,sans-serif; --hand:'Caveat Brush','Segoe Print','Bradley Hand',cursive;
  --pad:clamp(20px,4.7vw,76px); --selh:112px;
}
*{box-sizing:border-box}
html{scroll-behavior:auto;background:var(--cream)}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
.sr,.skip:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip:focus{position:fixed;left:12px;top:12px;z-index:100;background:var(--ink);color:#fff;padding:10px 14px;border-radius:8px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* ---------- stage ---------- */
#track{position:relative}
#stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--cream)}
#scenes{position:absolute;inset:0;z-index:0;isolation:isolate}
.scene{position:absolute;inset:0;overflow:hidden;display:none;background:var(--cream)}
.scene.on{display:block}
.cam{position:absolute;left:0;top:0;width:1600px;height:900px;transform-origin:0 0;will-change:transform}
.cam img.plate{position:absolute;left:0;top:0;width:1600px;height:900px;display:block;user-select:none;-webkit-user-drag:none}
.fg{position:absolute;left:0;top:0;width:1600px;height:900px;pointer-events:none;will-change:transform}
.fg img{width:1600px;height:900px;display:block}
.fg.l{-webkit-mask-image:linear-gradient(to right,#000 0,#000 3%,transparent 9%);mask-image:linear-gradient(to right,#000 0,#000 3%,transparent 9%);transform-origin:0 100%}
.fg.r{-webkit-mask-image:linear-gradient(to left,#000 0,#000 3%,transparent 9%);mask-image:linear-gradient(to left,#000 0,#000 3%,transparent 9%);transform-origin:100% 100%}
svg.ink{position:absolute;left:0;top:0;width:1600px;height:900px;pointer-events:none;overflow:visible}
svg.ink.pulse{animation:inkpulse 1.6s ease-in-out 1}
@keyframes inkpulse{40%{filter:drop-shadow(0 0 5px rgba(196,112,60,.75))}}
.skyfx{position:absolute;overflow:hidden;pointer-events:none;-webkit-mask-image:radial-gradient(ellipse at center,#000 35%,transparent 72%);mask-image:radial-gradient(ellipse at center,#000 35%,transparent 72%)}
.cloud{position:absolute;border-radius:50%;background:radial-gradient(ellipse at center,rgba(255,244,230,.9),rgba(255,236,214,0) 68%);mix-blend-mode:screen;filter:blur(6px)}
.sunglow{position:absolute;width:760px;height:760px;margin:-380px 0 0 -380px;border-radius:50%;background:radial-gradient(circle,rgba(255,214,150,.55),rgba(255,200,130,.18) 38%,rgba(255,200,130,0) 68%);mix-blend-mode:screen;pointer-events:none}
.sweep{position:absolute;left:-400px;top:0;width:900px;height:900px;background:linear-gradient(100deg,transparent 30%,rgba(255,214,160,.30) 50%,transparent 70%);mix-blend-mode:soft-light;pointer-events:none}
.bird{position:absolute;width:22px;height:10px;margin:-5px 0 0 -11px;pointer-events:none}
.drone-wrap,.drone-wrap>*{position:absolute;pointer-events:none}
.drone-wrap img{display:block}
.rotor{fill:rgba(36,30,26,.26)}

/* hotspots (positioned in image coordinates, kept a constant on-screen size) */
.hs{position:absolute;width:44px;height:44px;margin:0;padding:0;border:0;background:none;cursor:pointer;transform:translate(-50%,-50%) scale(var(--inv,1));color:var(--ink);opacity:0;pointer-events:none;transition:opacity .25s}
.hs.live{pointer-events:auto}
.hs i{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px;border-radius:50%;border:1.5px solid var(--ink);background:rgba(247,239,228,.8)}
.hs i::after{content:'';position:absolute;inset:-9px;border-radius:50%;border:1px solid rgba(29,27,25,.5);animation:ring 2.8s ease-out infinite}
.hs:hover i,.hs:focus-visible i,.hs[aria-expanded=true] i{background:var(--ink)}
@keyframes ring{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.6);opacity:0}}
.rm .hs i::after,.rec .hs i::after{animation:none}

/* ---------- header ---------- */
.top{position:fixed;z-index:30;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;padding:26px var(--pad) 0;pointer-events:none}
.top>*{pointer-events:auto}
.brand{display:flex;flex-direction:column;align-items:center;text-decoration:none;font-family:var(--serif);line-height:1}
.brand span{font-size:27px;letter-spacing:.34em;margin-right:-.34em;font-weight:500}
.brand small{font-size:10.5px;letter-spacing:.5em;margin:7px -.5em 0 0;font-family:var(--sans)}
.mainnav{position:absolute;left:50%;transform:translateX(-50%)}
.mainnav ul{display:flex;gap:clamp(14px,2.2vw,38px);list-style:none;margin:0;padding:0}
.mainnav a{position:relative;display:block;padding:6px 2px 12px;font-size:13.5px;text-decoration:none;color:var(--ink);white-space:nowrap}
.mainnav a::after{content:'';position:absolute;left:0;right:0;bottom:3px;height:1px;background:var(--ink);transform:scaleX(0);transition:transform .35s}
.mainnav a[aria-current=true]{font-weight:500}
.mainnav a[aria-current=true]::after{transform:scaleX(1)}
.mainnav a[aria-current=true]::before{content:'';position:absolute;left:50%;bottom:-2px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--ink)}
.mainnav a:hover::after,.mainnav a:focus-visible::after{transform:scaleX(1)}
.topright{display:flex;align-items:center;gap:16px}
.iconbtn{background:none;border:0;padding:6px;cursor:pointer;color:var(--ink);display:grid;place-items:center}
.vr{width:1px;height:24px;background:var(--line)}
.pill{display:inline-flex;align-items:center;gap:10px;padding:12px 22px;border-radius:999px;background:rgba(247,239,228,.78);border:1px solid rgba(29,27,25,.55);text-decoration:none;font-size:13.5px;backdrop-filter:blur(6px);transition:background .25s,transform .25s}
.pill svg{transition:transform .3s}
.pill:hover{background:var(--cream)}
.pill:hover svg{transform:translateX(4px)}
.menubtn{display:none}

/* ---------- chapter copy ---------- */
#copy{position:absolute;inset:0;z-index:5;pointer-events:none;outline:0}
.copy{position:absolute;left:var(--pad);top:14.5vh;width:min(36vw,560px);visibility:hidden}
.copy.on{visibility:visible}
.copy::before{content:'';position:absolute;z-index:-1;left:calc(-1 * var(--pad));top:-9vh;bottom:-12vh;width:calc(100% + var(--pad) * 2.4);background:radial-gradient(ellipse 62% 56% at 36% 46%,rgba(247,239,228,.82),rgba(247,239,228,.5) 52%,rgba(247,239,228,0) 100%);opacity:var(--sa,0);pointer-events:none}
.copy>*{will-change:transform,opacity}
.eyebrow{margin:0 0 clamp(18px,3.2vh,34px);font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink2);line-height:2}
.eyebrow b{font-weight:400;letter-spacing:.22em;margin-right:12px}
.copy h1,.copy h2{margin:0;font-family:var(--serif);font-weight:500;font-size:clamp(38px,4.7vw,80px);line-height:.98;letter-spacing:-.018em;color:var(--ink)}
.copy h1 span,.copy h2 span{display:block}
.copy h1 em,.copy h2 em{font-style:italic;font-weight:500;color:var(--accent)}
.copy .body{margin:clamp(18px,3vh,30px) 0 0;max-width:23em;font-size:clamp(14.5px,1.12vw,18px);line-height:1.5;color:#2c2823}
.copy .status{margin:12px 0 0;font-size:12.5px;letter-spacing:.04em;color:var(--accent);max-width:24em}
.cta{pointer-events:auto;display:inline-flex;align-items:center;gap:22px;margin-top:clamp(22px,4vh,40px);text-decoration:none;font-size:15.5px;color:var(--ink);background:none;border:0;padding:0;cursor:pointer;font-family:inherit}
.cta .dot{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:#1d1b19;color:#fff;transition:transform .35s cubic-bezier(.2,.7,.2,1),background .3s}
.cta .dot svg{transition:transform .35s}
.cta:hover .dot,.cta:focus-visible .dot{transform:scale(1.07);background:#000}
.cta:hover .dot svg,.cta:focus-visible .dot svg{transform:translateX(4px)}

/* ---------- selector, rail, hint ---------- */
.selector{position:absolute;z-index:20;left:0;right:0;bottom:0;height:var(--selh);display:flex;align-items:center;padding:14px var(--pad) 8px;background:linear-gradient(to top,rgba(247,239,228,.94) 0,rgba(247,239,228,.82) 62%,rgba(247,239,228,0) 100%)}
.selector::before{content:'';position:absolute;left:var(--pad);right:var(--pad);top:26px;height:1px;background:var(--line)}
.selector .prompt{flex:0 0 clamp(150px,15vw,230px);font-family:var(--serif);font-size:clamp(18px,1.55vw,25px);line-height:1.18;margin-top:18px}
.selector ul{flex:1;display:flex;list-style:none;margin:18px 0 0;padding:0;min-width:0}
.selector li{flex:1;display:flex;justify-content:center;position:relative}
.selector li+li::before{content:'';position:absolute;left:0;top:6px;bottom:6px;width:1px;background:var(--line)}
.opt{display:flex;flex-direction:column;align-items:center;gap:8px;padding:6px 8px;text-align:center;font-size:12.5px;line-height:1.25;color:var(--ink);text-decoration:none;background:none;border:0;cursor:pointer;font-family:inherit}
.opt svg{width:36px;height:36px;overflow:visible}
.opt svg *{vector-effect:non-scaling-stroke}
.opt .dr{stroke-dasharray:1;stroke-dashoffset:1;pathLength:1}
.opt:hover svg,.opt:focus-visible svg{transform:translateY(-3px) scale(1.06)}
.opt svg{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.hint{position:absolute;z-index:21;left:50%;bottom:calc(var(--selh) + 6px);transform:translate(-50%,8px);max-width:min(420px,88vw);padding:10px 16px;border-radius:12px;background:rgba(29,27,25,.92);color:#f7efe4;font-size:13px;line-height:1.4;text-align:center;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.hint.on{opacity:1;transform:translate(-50%,0)}
.rail{position:absolute;z-index:19;right:clamp(10px,1.6vw,26px);top:50%;transform:translateY(-58%);display:flex;flex-direction:column;gap:2px}
.rail button{width:26px;height:26px;padding:0;background:none;border:0;cursor:pointer;display:grid;place-items:center}
.rail button i{width:7px;height:7px;border-radius:50%;border:1.2px solid var(--ink);background:transparent;transition:all .3s}
.rail button[aria-current=true] i{background:var(--ink);transform:scale(1.5)}
.rail button:hover i{background:rgba(29,27,25,.5)}

/* ---------- panel & search ---------- */
.panel{position:absolute;z-index:25;width:min(360px,calc(100vw - 32px));padding:22px 24px 20px;border-radius:16px;background:rgba(250,244,235,.96);border:1px solid rgba(29,27,25,.18);box-shadow:0 18px 50px rgba(80,50,20,.22);backdrop-filter:blur(8px)}
.panel[hidden]{display:none}
.panel .tag{font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--accent);margin:0 0 8px}
.panel h3{margin:0 0 8px;font-family:var(--serif);font-weight:500;font-size:28px;line-height:1.05}
.panel p{margin:0;font-size:14.5px;line-height:1.5;color:#2c2823}
.panel .acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.panel .acts a,.panel .acts button{font:inherit;font-size:13.5px;padding:9px 16px;border-radius:999px;border:1px solid rgba(29,27,25,.6);background:none;text-decoration:none;cursor:pointer;color:var(--ink)}
.panel .acts a.primary{background:var(--ink);color:#fff}
.panel .x{position:absolute;right:10px;top:8px;border:0;background:none;font-size:22px;cursor:pointer;color:var(--ink2);line-height:1;padding:6px}
.search{position:fixed;inset:0;z-index:60;background:rgba(247,239,228,.94);backdrop-filter:blur(10px);display:grid;place-items:start center;padding-top:14vh}
.search[hidden]{display:none}
.searchbox{width:min(640px,calc(100vw - 40px))}
.searchbox input{width:100%;font:inherit;font-family:var(--serif);font-size:30px;padding:10px 2px;border:0;border-bottom:1px solid var(--ink);background:none;color:var(--ink);outline:0}
.searchbox ul{list-style:none;margin:16px 0;padding:0;max-height:48vh;overflow:auto}
.searchbox li a{display:block;padding:12px 2px;text-decoration:none;border-bottom:1px solid var(--line)}
.searchbox li b{display:block;font-weight:500}
.searchbox li span{font-size:13px;color:var(--ink2)}
.textbtn{background:none;border:0;font:inherit;font-size:14px;text-decoration:underline;cursor:pointer;color:var(--ink)}
.loader{position:absolute;inset:0;z-index:50;background:var(--cream);display:grid;place-items:center;opacity:1;transition:opacity .7s .1s;pointer-events:none}
.loader.done{opacity:0}
.loader::after{content:'SPLIT LABS';font-family:var(--serif);letter-spacing:.5em;font-size:15px;color:var(--ink2)}

.foot{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;padding:22px var(--pad);font-size:13px;background:var(--cream2);color:var(--ink2)}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.foot a{text-decoration:none}.foot a:hover{text-decoration:underline}
.noscript{padding:100px var(--pad)}

/* ---------- The Exchange (generated scene) ---------- */
.ex svg{position:absolute;left:0;top:0;width:1600px;height:900px;overflow:visible}
.room{cursor:pointer;outline:0}
.room .glow{opacity:0;transition:opacity .35s}
.room:hover .glow,.room:focus-visible .glow,.room.act .glow{opacity:1}
.room .lab{font-family:var(--hand);font-size:25px;letter-spacing:.07em;fill:#2a2622;transition:opacity .3s}
.room:focus-visible .frame{stroke:var(--accent);stroke-width:3}
.exlab{font-family:var(--hand);fill:#2a2622}

/* ---------- reduced motion ---------- */
.rm .sunglow,.rm .sweep{display:none}

/* ---------- tablet / mobile ---------- */
@media (max-width:1020px){
  .mainnav ul{gap:12px}.mainnav a{font-size:12.5px}
  .copy{width:min(46vw,520px)}
}
@media (max-width:860px){
  .mainnav{position:fixed;left:0;right:0;top:0;transform:none;padding:92px var(--pad) 26px;background:rgba(247,239,228,.97);display:none;z-index:-1}
  .mainnav.open{display:block}
  .mainnav ul{flex-direction:column;gap:0}.mainnav a{font-size:20px;font-family:var(--serif);padding:12px 0}
  .menubtn{display:grid}.vr,#searchbtn+.vr{display:none}
}
@media (max-width:700px){
  :root{--selh:92px}
  .top{padding-top:16px}
  .brand span{font-size:22px}.pill{padding:9px 14px;font-size:12.5px}
  #copy::before{content:'';position:absolute;left:0;right:0;top:0;height:66%;background:linear-gradient(to bottom,rgba(247,239,228,.96),rgba(247,239,228,.88) 45%,rgba(247,239,228,0));pointer-events:none}
  .copy{left:20px;right:20px;width:auto;top:86px}
  .copy::before{display:none}
  .copy h1,.copy h2{font-size:clamp(34px,10.4vw,48px)}
  .copy .body{font-size:15px;max-width:none}
  .eyebrow{margin-bottom:12px;font-size:10.5px}
  .cta .dot{width:52px;height:52px}
  .selector{padding:8px 0 6px;overflow-x:auto;scrollbar-width:none;display:block}
  .selector::-webkit-scrollbar{display:none}.selector::before{display:none}
  .selector .prompt{display:none}
  .selector ul{margin:6px 0 0;width:max-content;padding:0 12px}
  .selector li{flex:0 0 78px}
  .opt{font-size:11px;padding:4px 2px}.opt svg{width:28px;height:28px}
  .rail{display:none}
  .hint{bottom:calc(var(--selh) + 4px)}
  .foot{padding-bottom:30px}
}
@media (max-width:700px) and (max-height:640px){.copy .body{display:none}}

/* selector entrance: icons draw in one after another */
.opt svg path,.opt svg circle,.opt svg ellipse{stroke-dasharray:1;stroke-dashoffset:1;animation:seldraw 1.1s ease forwards;animation-delay:calc(var(--i,0)*.09s + 1.2s)}
.selector li{animation:selin .8s both;animation-delay:calc(var(--i,0)*.09s + 1s)}
@keyframes seldraw{to{stroke-dashoffset:0}}
@keyframes selin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.rm .opt svg *,.rec .opt svg *{animation:none;stroke-dashoffset:0}
.rm .selector li,.rec .selector li{animation:none}

/* =====================================================================
   Looser, hand-placed layer: less ruled, less boxy. Overrides the tidy
   rules above; delete this block to get the strict layout back.
   ===================================================================== */
:root{
  --wavy:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M1 5 Q12 1 24 5 T48 4 T72 5 T99 3' fill='none' stroke='%231d1b19' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  --wave-long:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='14' viewBox='0 0 520 14'%3E%3Cpath d='M0 8 C40 2 70 12 120 7 S190 3 240 8 S330 13 380 6 S470 3 520 8' fill='none' stroke='%231d1b19' stroke-opacity='.45' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
  --blob1:56% 44% 52% 48% / 46% 58% 42% 54%;
  --blob2:30px 14px 34px 12px / 14px 32px 12px 28px;
}
/* header: wobbly pill, loose nav baselines, scribble underline instead of line + dot */
.pill{border-radius:var(--blob1);border-width:1.3px;rotate:-1.2deg;padding:13px 26px 12px}
.pill:hover{rotate:.8deg}
.mainnav li:nth-child(odd) a{translate:0 2px;rotate:-.8deg}
.mainnav li:nth-child(even) a{translate:0 -2px;rotate:.7deg}
.mainnav li:nth-child(3n) a{translate:0 3px}
.mainnav a::after{height:8px;bottom:-1px;background:var(--wavy) center/100% 100% no-repeat;transform-origin:left}
.mainnav a[aria-current=true]::before{display:none}
.brand{rotate:-1.5deg}
.vr{display:none}

/* chapter copy: staggered, slightly off-kilter */
.eyebrow{rotate:-1.4deg;transform-origin:left center}
.copy h1 span:nth-child(2),.copy h2 span:nth-child(2){margin-left:.55em}
.copy h1 span:nth-child(3),.copy h2 span:nth-child(3){margin-left:.15em}
.copy h1 span:nth-child(4),.copy h2 span:nth-child(4){margin-left:.8em}
.copy h1 em,.copy h2 em{display:inline-block;rotate:-1.2deg}
.copy .body{margin-left:1.4em;rotate:.5deg;transform-origin:left top}
.copy .status{margin-left:1.4em;rotate:-.6deg}
.cta{margin-left:.6em;rotate:-1.5deg}
.cta .dot{border-radius:var(--blob1)}
.cta:hover .dot,.cta:focus-visible .dot{rotate:12deg}
.cta>span:last-child{position:relative}
.cta>span:last-child::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:8px;background:var(--wavy) center/100% 100% no-repeat;transform:scaleX(0);transform-origin:left;transition:transform .4s}
.cta:hover>span:last-child::after,.cta:focus-visible>span:last-child::after{transform:scaleX(1)}

/* selector: no rules and boxes, items scattered along a hand-drawn line */
.selector{background:linear-gradient(to top,rgba(247,239,228,.9) 0,rgba(247,239,228,.62) 60%,rgba(247,239,228,0) 100%)}
.selector::before{height:14px;top:18px;background:var(--wave-long) repeat-x left center;opacity:.9}
.selector ul{justify-content:space-around;align-items:center;margin-top:12px}
.selector{padding-bottom:20px}
.selector li{flex:0 1 auto;padding:0 clamp(2px,.8vw,14px)}
.selector li+li::before{display:none}
.selector li:nth-child(1){translate:0 2px;rotate:-2.5deg}
.selector li:nth-child(2){translate:6px -7px;rotate:1.5deg}
.selector li:nth-child(3){translate:-4px 4px;rotate:-1deg}
.selector li:nth-child(4){translate:0 -4px;rotate:2.2deg}
.selector li:nth-child(5){translate:8px 3px;rotate:-1.8deg}
.selector li:nth-child(6){translate:-6px -6px;rotate:1.2deg}
.selector li:nth-child(7){translate:0 3px;rotate:-2.2deg}
.selector .prompt{rotate:-2deg;transform-origin:left center;font-style:italic}
.opt{border-radius:var(--blob1);padding:8px 12px 10px;position:relative;transition:background .3s}
.opt:hover,.opt:focus-visible{background:rgba(255,236,205,.55)}
.opt::after{content:'';position:absolute;left:14%;right:14%;bottom:1px;height:7px;background:var(--wavy) center/100% 100% no-repeat;transform:scaleX(0);transform-origin:left;transition:transform .35s}
.opt:hover::after,.opt:focus-visible::after{transform:scaleX(1)}

/* rail: loose pen ticks instead of a ruler of dots */
.rail{gap:0}
.rail button{width:30px;height:24px}
.rail button i{width:12px;height:2.5px;border:0;border-radius:3px;background:rgba(29,27,25,.4);transform:rotate(-14deg)}
.rail button:nth-child(even) i{width:17px;transform:rotate(9deg)}
.rail button:nth-child(3n) i{width:9px;transform:rotate(-26deg)}
.rail button[aria-current=true] i{width:26px;height:3.5px;background:var(--ink);transform:rotate(-5deg)}

/* panels & hints: torn-paper shapes */
.panel{border-radius:var(--blob2);rotate:-.9deg;border:1px solid rgba(29,27,25,.14);padding:26px 28px 24px;background:rgba(251,245,236,.97)}
.panel .acts a,.panel .acts button{border-radius:var(--blob1);border-width:1.2px}
.hint{border-radius:22px 10px 24px 12px / 12px 22px 10px 20px;rotate:-.8deg}
.hs i{border-radius:var(--blob1);rotate:20deg}
.searchbox input{border-bottom:0;background:var(--wavy) bottom/100% 8px no-repeat;padding-bottom:14px}
.foot{border-radius:60% 40% 0 0 / 22px 14px 0 0}
.rm .opt::after,.rm .cta>span:last-child::after{transition:none}
@media (max-width:700px){
  .selector::before{display:none}
  .selector li:nth-child(n){translate:0 0;rotate:0deg}
  .selector li:nth-child(odd){translate:0 3px}.selector li:nth-child(even){translate:0 -3px}
  .copy h1 span:nth-child(n),.copy h2 span:nth-child(n){margin-left:0}
  .copy h1 span:nth-child(2),.copy h2 span:nth-child(2){margin-left:.4em}
  .copy .body,.copy .status{margin-left:0}
}

/* ======================================================================
   Looser, hand-made layout: irregular shapes, gentle tilts, scattered text
   ====================================================================== */
.pill{border-radius:30px 38px 26px 36px / 36px 26px 38px 28px;transform:rotate(-1.2deg);border-width:1.4px;box-shadow:2px 3px 0 rgba(163,87,58,.14)}
.pill:hover{transform:rotate(.6deg) translateY(-1px)}
.brand{transform:rotate(-1.5deg)}
.mainnav li:nth-child(odd) a{transform:translateY(1px) rotate(-.6deg)}
.mainnav li:nth-child(even) a{transform:translateY(-1px) rotate(.5deg)}

/* headlines: staggered, slightly tilted, with a hand-drawn underline on the italic */
.copy h1 span,.copy h2 span{transform-origin:0 100%}
.copy h1 span:nth-child(1),.copy h2 span:nth-child(1){margin-left:0;rotate:-.7deg}
.copy h1 span:nth-child(2),.copy h2 span:nth-child(2){margin-left:clamp(10px,2.4vw,44px);rotate:.5deg}
.copy h1 span:nth-child(3),.copy h2 span:nth-child(3){margin-left:clamp(4px,.9vw,16px);rotate:-.4deg}
.copy h1 span:nth-child(4),.copy h2 span:nth-child(4){margin-left:clamp(16px,3vw,56px);rotate:.7deg}
.copy h1 em,.copy h2 em{padding-bottom:.06em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6c20-4 36 3 58-1s40 3 62-1 44 2 76-2' fill='none' stroke='%23a3573a' stroke-opacity='.55' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 100%/100% .16em}
.eyebrow{rotate:-1.4deg;transform-origin:0 50%}
.copy .body{rotate:.4deg;margin-left:clamp(0px,.8vw,14px)}
.cta{margin-left:clamp(4px,1.6vw,28px)}
.cta .dot{border-radius:54% 46% 52% 48% / 48% 54% 46% 52%;rotate:-6deg;box-shadow:3px 4px 0 rgba(163,87,58,.28)}
.cta:hover .dot,.cta:focus-visible .dot{border-radius:46% 54% 48% 52% / 54% 46% 54% 46%;rotate:5deg}
.note{display:flex;align-items:flex-start;gap:6px;margin:10px 0 0 clamp(54px,5vw,86px);font-family:var(--hand);font-size:21px;color:var(--accent);rotate:-4deg;transform-origin:0 0}
.note svg{margin-top:-6px;flex:none}

/* selector: no bar, no dividers; loose handwritten cluster along the ground */
.selector{background:linear-gradient(to top,rgba(247,239,228,.88) 0,rgba(247,239,228,.5) 55%,rgba(247,239,228,0) 100%)}
.selector::before{display:none}
.selector li+li::before{display:none}
.selector .prompt{position:relative;rotate:-2deg;font-style:italic;margin-top:10px}
.selector .prompt::after{content:'';position:absolute;left:0;right:8%;bottom:-8px;height:8px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6c24-5 44 3 70-1s46 3 70-1 40 1 56-2' fill='none' stroke='%231d1b19' stroke-opacity='.6' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 0/100% 100%}
.selector ul{margin-top:8px}
.selector li:nth-child(1){translate:0 -2px;rotate:-2.2deg}.selector li:nth-child(2){translate:6px 9px;rotate:1.6deg}.selector li:nth-child(3){translate:-4px -7px;rotate:-1.2deg}
.selector li:nth-child(4){translate:8px 8px;rotate:2.2deg}.selector li:nth-child(5){translate:-6px -4px;rotate:-1.8deg}.selector li:nth-child(6){translate:4px 10px;rotate:1.4deg}.selector li:nth-child(7){translate:-2px -6px;rotate:-2.6deg}
.opt{position:relative;font-family:var(--hand);font-size:17px;letter-spacing:.02em;line-height:1.05;gap:6px}
.opt::before{content:'';position:absolute;inset:-6px -2px;z-index:-1;border-radius:58% 42% 55% 45% / 46% 56% 44% 54%;background:rgba(255,246,232,.75);transform:scale(.4) rotate(-8deg);opacity:0;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .3s}
.opt:hover::before,.opt:focus-visible::before{transform:scale(1) rotate(-3deg);opacity:1}
.opt svg{width:40px;height:40px}

/* panels and hotspots: paper scraps, not cards */
.panel{border-radius:26px 40px 22px 36px / 36px 24px 42px 26px;rotate:-.9deg;border:1.4px solid rgba(29,27,25,.45);box-shadow:7px 11px 0 rgba(163,87,58,.14),0 20px 50px rgba(80,50,20,.18);background:rgba(252,246,236,.97)}
.panel h3{rotate:-.5deg}
.panel .acts a,.panel .acts button{border-radius:22px 28px 20px 26px / 26px 20px 28px 22px}
.hs i{border-radius:52% 48% 55% 45% / 47% 56% 44% 53%;border-width:1.6px;rotate:-12deg}
.hs i::after{border-radius:46% 54% 50% 50% / 55% 45% 55% 45%}
.rail button i{border-radius:55% 45% 50% 50%}
.search .searchbox{rotate:-.4deg}
.room .lab{font-size:27px}
.room:hover .frame,.room:focus-visible .frame{stroke:#a3573a}
@media (max-width:700px){
  .selector li{translate:none!important}
  .selector li:nth-child(odd){rotate:-1.4deg}.selector li:nth-child(even){rotate:1.4deg}
  .opt{font-size:15px}.note{display:none}
  .copy h1 span:nth-child(n),.copy h2 span:nth-child(n){margin-left:0}
  .copy h1 span:nth-child(2),.copy h2 span:nth-child(2),.copy h1 span:nth-child(4),.copy h2 span:nth-child(4){margin-left:14px}
}
.rm .copy h1 span,.rm .copy h2 span{rotate:0deg}
@media (max-width:700px){
  :root{--selh:104px}
  .selector{padding-bottom:max(8px,env(safe-area-inset-bottom))}
  .selector ul{margin-top:2px}
  .opt{font-size:13.5px;line-height:1.02}.opt svg{width:30px;height:30px}
  .selector li{flex-basis:84px}
}

/* ---- living people layer + sun rays (ported from the updated site) ---- */
.living-root{position:absolute;left:0;top:0;width:1280px;height:720px;transform:scale(1.25);transform-origin:0 0;pointer-events:none;z-index:1}
.living-crowd{position:absolute;pointer-events:none;filter:blur(.3px) saturate(.92)}
.living-voices{position:absolute;left:0;top:0;width:1280px;height:720px;pointer-events:none}
.living-voice{position:absolute;left:0;top:0;transform:translate(-50%,-100%) translateY(6px);opacity:0;white-space:nowrap;font:italic 300 12px/1.25 Georgia,serif;letter-spacing:.01em;color:#2b2118;background:rgba(255,250,240,.84);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.65);padding:4px 10px 5px;border-radius:999px;box-shadow:0 8px 22px -10px rgba(70,45,20,.5);transition:opacity .45s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.living-voice::after{content:'';position:absolute;left:50%;top:100%;width:1px;height:13px;background:linear-gradient(rgba(255,250,240,.95),rgba(255,250,240,0))}
.living-voice.show{opacity:1;transform:translate(-50%,-100%)}
.living-conversation{display:none}
.sunrays{position:absolute;width:1100px;height:1100px;margin:-550px 0 0 -550px;border-radius:50%;pointer-events:none;mix-blend-mode:screen;opacity:.22;background:repeating-conic-gradient(from 0deg,#fff2c066 0deg 2.5deg,transparent 2.5deg 11deg);-webkit-mask:radial-gradient(circle,#000 6%,transparent 62%);mask:radial-gradient(circle,#000 6%,transparent 62%)}
.rm .sunrays{transform:none!important}
@media(prefers-reduced-motion:reduce){.living-voice{transition:none}}

/* ---- Split Labs mark + wordmark (from the updated site) ---- */
.brand{flex-direction:row;align-items:center;gap:10px;rotate:none;transform:none}
.brand .brand-mark{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:6.5;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.brand .brand-tab{transition:transform .6s cubic-bezier(.34,1.8,.5,1)}
.brand:hover .brand-tab,.brand:focus-visible .brand-tab{transform:translate(8px,-8px)}
.brand .brand-word{font-family:var(--sans);font-size:15px;font-weight:600;letter-spacing:.16em;margin:0;text-transform:uppercase;transition:letter-spacing .5s cubic-bezier(.22,1,.36,1)}
.brand:hover .brand-word{letter-spacing:.3em}
@media(max-width:700px){.brand .brand-mark{width:26px;height:26px}.brand .brand-word{font-size:13px}}

/* closing landing: footer is a real resting place after the finale */
.foot{min-height:34vh;align-content:center;padding-top:44px;padding-bottom:44px}
html{scroll-behavior:auto}

#loopveil{position:fixed;inset:0;z-index:60;background:var(--cream,#f3eddf);opacity:0;pointer-events:none;transition:opacity .6s ease}
#loopveil.on{opacity:1}