:root{
  --ink:#11110f;
  --paper:#f0eee6;
  --blue:#1738ff;
  --red:#ff3a19;
  --muted:#817e74;
  --mono:"DM Mono", monospace;
  --display:"Archivo Black", sans-serif;
  --serif:"Instrument Serif", serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--ink)}
body{margin:0;background:var(--ink);color:var(--paper);font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
.serif{font-family:var(--serif)}
.mono,.section-label{font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase}
.grain{position:fixed;inset:-20%;z-index:9999;pointer-events:none;opacity:.18;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");animation:grain .35s steps(2) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(1%,-1%)}50%{transform:translate(-1%,1%)}75%{transform:translate(1%,1%)}100%{transform:translate(0,0)}}
.cursor-stamp{position:fixed;z-index:9998;left:0;top:0;width:34px;height:34px;border:1px solid rgba(23,56,255,.7);color:var(--blue);display:grid;place-items:center;pointer-events:none;transform:translate(-50%,-50%);mix-blend-mode:difference;transition:width .2s,height .2s,border-radius .2s}
.cursor-stamp span{font:18px var(--mono)}

.topbar{position:fixed;z-index:1000;top:0;left:0;right:0;height:66px;padding:0 24px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;color:var(--paper);mix-blend-mode:difference}
.logo{display:flex;align-items:center;gap:10px;font:14px var(--mono);width:max-content}
.logo-disc{width:27px;height:27px;border:1px solid currentColor;border-radius:50%;display:grid;place-items:center;font-size:11px}
.topbar-meta{font:10px var(--mono);opacity:.7}
.topbar nav{justify-self:end;display:flex;gap:22px;font:10px var(--mono)}
.topbar nav a:hover{text-decoration:line-through}

.scene{position:relative;height:220vh}
.scene-sticky,.project-sticky{position:sticky;top:0;height:100vh;overflow:hidden}
.hero-paper{height:100%;background:var(--paper);color:var(--ink);position:relative;overflow:hidden}
.poster-grid:before,.poster-grid:after{content:"";position:absolute;inset:0;pointer-events:none}
.poster-grid:before{background-image:linear-gradient(rgba(17,17,15,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(17,17,15,.09) 1px,transparent 1px);background-size:9vw 9vw}
.poster-grid:after{background:radial-gradient(circle at 76% 40%,rgba(23,56,255,.11),transparent 26%)}
.hero-kicker{position:absolute;left:24px;top:92px;font-size:10px;z-index:3}
.hero-title-wrap{position:absolute;left:3vw;top:17vh;z-index:2}
.hero-title{margin:0;font-family:var(--display);font-size:clamp(108px,18vw,280px);letter-spacing:-.085em;line-height:.7;display:flex;flex-direction:column}
.hero-title span:last-child{color:var(--blue);margin-left:13vw}
.hero-serif{font-size:clamp(28px,3vw,52px);max-width:620px;margin:32px 0 0 10vw;line-height:.92}
.machine{position:absolute;width:min(61vw,900px);right:-6vw;bottom:-8vh;color:var(--ink);z-index:2;transform:translate3d(calc(var(--p,0)*-9vw),calc(var(--p,0)*-4vh),0) rotate(calc(var(--p,0)*-4deg));transition:transform .05s linear}
.machine svg{width:100%;height:auto;overflow:visible}
.svg-mono{font-family:var(--mono);font-size:15px;letter-spacing:.07em}.svg-mono--big{font-size:18px}
.m-part{transform-box:fill-box;transform-origin:center;transition:opacity .15s}
.m-part--top{transform:translateY(calc(var(--p,0)*-125px))}
.m-part--bottom{transform:translateY(calc(var(--p,0)*135px))}
.m-part--left{transform:translateX(calc(var(--p,0)*-165px))}
.m-part--right{transform:translateX(calc(var(--p,0)*165px))}
.m-part--core{transform:scale(calc(1 + var(--p,0)*.28))}
.m-wire{opacity:calc(1 - var(--p,0)*1.35)}
.hero-side{position:absolute;right:22px;top:23vh;display:flex;flex-direction:column;gap:12px;writing-mode:vertical-rl;font-size:9px;z-index:4}
.hero-bottom{position:absolute;left:24px;right:24px;bottom:20px;display:flex;justify-content:space-between;font-size:9px;z-index:4}
.hero-cross{position:absolute;font:30px var(--mono);z-index:4}.hero-cross--1{left:18px;top:18vh}.hero-cross--2{right:18px;top:14vh}.hero-cross--3{left:18px;bottom:12vh}.hero-cross--4{right:18px;bottom:12vh}

.scene-anatomy{height:260vh;background:var(--ink)}
.anatomy-stage{background:var(--ink);color:var(--paper)}
.anatomy-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(240,238,230,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(240,238,230,.06) 1px,transparent 1px);background-size:80px 80px;transform:scale(calc(1 + var(--p,0)*.14))}
.anatomy-index{position:absolute;top:90px;left:24px;font-size:9px;color:#8e8b83}
.anatomy-title{position:absolute;left:4vw;top:20vh;width:33vw;z-index:3}
.anatomy-title>span{font-size:9px;color:#8d8a82}
.anatomy-title h2{font:clamp(64px,7.6vw,132px)/.8 var(--display);letter-spacing:-.075em;margin:18px 0 0}
.anatomy-title em{font-family:var(--serif);font-weight:400;color:var(--blue)}
.diagram{position:absolute;right:1vw;top:8vh;width:68vw;height:84vh}
.diagram svg{width:100%;height:100%;overflow:visible}
.d-lines path{fill:none;stroke:var(--paper);stroke-width:1.3;stroke-dasharray:6 8;opacity:.45;stroke-dashoffset:calc(var(--p,0)*-150)}
.d-node rect,.d-node circle{fill:var(--ink);stroke:var(--paper);stroke-width:2}
.d-node text{fill:var(--paper);font:18px var(--mono);text-anchor:middle;dominant-baseline:middle}
.d-node--core circle{fill:var(--blue);stroke:var(--blue)}
.d-node{transform-box:fill-box;transform-origin:center;opacity:calc(.2 + var(--p,0)*.8)}
.d-node--1{transform:translate(calc((1 - var(--p,0))*260px),calc((1 - var(--p,0))*180px))}
.d-node--2{transform:translate(calc((1 - var(--p,0))*-260px),calc((1 - var(--p,0))*180px))}
.d-node--3{transform:translate(calc((1 - var(--p,0))*260px),calc((1 - var(--p,0))*-190px))}
.d-node--4{transform:translate(calc((1 - var(--p,0))*-260px),calc((1 - var(--p,0))*-190px))}
.d-node--5{transform:translateY(calc((1 - var(--p,0))*260px))}
.d-node--6{transform:translateY(calc((1 - var(--p,0))*-260px))}
.d-pac{fill:var(--red);transform:translateX(calc(var(--p,0)*220px));transform-box:fill-box}
.diagram-caption{position:absolute;right:24px;bottom:24px;display:flex;gap:26px;font-size:8px;color:#737168}

.work-intro{min-height:110vh;background:var(--paper);color:var(--ink);padding:110px 4vw 90px;position:relative}
.section-label{font-size:9px}
.poster-heading{font:clamp(74px,10.8vw,184px)/.78 var(--display);letter-spacing:-.075em;margin:50px 0 0}
.poster-heading span{color:var(--blue)}.poster-heading em{font-family:var(--serif);font-weight:400}
.work-intro-copy{font-size:36px;line-height:1;max-width:540px;margin:50px 0 0 50vw}

.project{height:250vh;position:relative}
.project-link{position:absolute;bottom:25px;right:25px;font-size:9px;border-bottom:1px solid currentColor;padding-bottom:5px}

.project-ticket{background:var(--blue);color:var(--paper)}
.project-ticket .project-sticky{background:var(--blue);display:grid;grid-template-columns:.78fr 1.22fr}
.ticket-left{padding:100px 4vw 40px;position:relative;z-index:3}
.project-meta{font-size:9px;opacity:.7}
.ticket-left h3,.bp-title h3,.vitoria-copy h3{font:clamp(72px,8vw,132px)/.78 var(--display);letter-spacing:-.07em;margin:55px 0 30px}
.ticket-left>p{font-size:30px;line-height:1;max-width:460px}
.ticket-stage{position:relative;overflow:hidden}
.thermal-paper{position:absolute;width:min(42vw,560px);height:720px;background:#f8f6ef;color:#0d0d0b;left:50%;top:54%;transform:translate(-50%,-50%) rotate(calc((1 - var(--p,0))*-7deg)) translateY(calc((1 - var(--p,0))*110px));box-shadow:0 30px 80px rgba(0,0,0,.22);padding:28px;filter:contrast(1.03)}
.thermal-paper:before{content:"";position:absolute;inset:0;opacity:.1;background-image:repeating-linear-gradient(0deg,transparent 0 3px,#111 4px)}
.thermal-head,.thermal-id,.thermal-foot{font-size:10px;position:relative;z-index:2}.thermal-logo{font:210px/.85 var(--display);letter-spacing:-.1em;margin:22px 0 0;position:relative;z-index:2}.thermal-main{position:relative;z-index:2;border-top:4px solid #111;border-bottom:4px solid #111;padding:16px 0;display:flex;justify-content:space-between;align-items:end}.thermal-main strong{font:28px var(--display)}.thermal-main span{font:9px var(--mono)}.thermal-qr{width:220px;height:220px;margin:35px auto;background:conic-gradient(#111 0 25%,transparent 0 50%,#111 0 75%,transparent 0) 0 0/28px 28px;position:relative;z-index:2}.thermal-id{text-align:center;font-size:18px}.thermal-dots{margin-top:30px;white-space:nowrap;overflow:hidden}.thermal-foot{text-align:center;margin-top:15px}
.scanner{position:absolute;width:300px;height:220px;right:4vw;bottom:8vh;border:2px solid rgba(240,238,230,.7);padding:14px}.scanner>span{font-size:8px}.scan-line{position:absolute;left:12px;right:12px;top:50%;height:2px;background:var(--red);box-shadow:0 0 14px var(--red)}.scan-status{position:absolute;bottom:12px;left:14px;font-size:8px}
.ticket-word{position:absolute;font:clamp(110px,14vw,220px)/.8 var(--display);letter-spacing:-.08em;color:var(--paper);mix-blend-mode:screen;opacity:calc(var(--p,0)*1.2)}.ticket-word--1{right:-2vw;top:8vh;transform:translateX(calc((1 - var(--p,0))*300px))}.ticket-word--2{left:-3vw;top:40vh;transform:translateX(calc((1 - var(--p,0))*-300px))}.ticket-word--3{right:0;bottom:5vh;transform:translateX(calc((1 - var(--p,0))*300px))}

.project-blueprint{background:var(--paper);color:var(--blue)}
.blueprint-grid{background-color:var(--paper);background-image:linear-gradient(rgba(23,56,255,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(23,56,255,.18) 1px,transparent 1px);background-size:38px 38px}
.bp-top{position:absolute;top:88px;left:25px;right:25px;display:flex;justify-content:space-between;font-size:8px}
.bp-title{position:absolute;left:4vw;top:17vh;width:40vw;z-index:3}.bp-title h3{margin-top:35px}.bp-title>p{font-size:28px;line-height:1;max-width:420px;color:#1623a6}
.exploded{position:absolute;right:2vw;top:10vh;width:60vw;height:80vh}
.exploded svg{position:absolute;inset:0;width:100%;height:100%}.exploded svg path{fill:none;stroke:var(--blue);stroke-width:2;stroke-dasharray:8 7}.exploded svg circle{fill:var(--red)}
.piece{position:absolute;border:3px solid var(--blue);background:var(--paper);padding:15px 18px;min-width:130px;text-align:center;box-shadow:8px 8px 0 rgba(23,56,255,.12);transform:translate(calc((1 - var(--p,0))*var(--tx)),calc((1 - var(--p,0))*var(--ty))) rotate(calc((1 - var(--p,0))*var(--r)));transition:transform .05s linear}
.piece span{font-size:9px}.p1{left:8%;top:18%;--tx:180px;--ty:160px;--r:-18deg}.p2{left:32%;top:34%;--tx:-120px;--ty:90px;--r:9deg}.p3{left:54%;top:15%;--tx:-210px;--ty:160px;--r:-12deg}.p4{right:2%;top:48%;--tx:-220px;--ty:-60px;--r:16deg}.p5{left:43%;bottom:4%;--tx:-90px;--ty:-170px;--r:-8deg}

.project-vitoria{background:#0b0b0a;color:var(--paper)}
.project-vitoria .project-sticky{background:#0b0b0a}
.vitoria-copy{position:absolute;left:4vw;top:11vh;width:43vw;z-index:4}.vitoria-copy h3 em{font-family:var(--serif);font-weight:400;color:var(--red)}.vitoria-copy>p{font-size:29px;line-height:1;max-width:460px;color:#c7c4bb}
.crt{position:absolute;right:4vw;top:16vh;width:46vw;height:62vh;border:4px solid var(--paper);padding:14px;background:#121210;transform:rotate(calc((1 - var(--p,0))*4deg))}
.crt-screen{position:relative;height:calc(100% - 48px);overflow:hidden;background:#070706}
#noiseCanvas{width:100%;height:100%;display:block;image-rendering:pixelated;opacity:.82}
.scanlines{position:absolute;inset:0;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.06) 0 1px,transparent 1px 4px);mix-blend-mode:screen;pointer-events:none}
.v-face{position:absolute;inset:0;opacity:calc(var(--signal, .18)*1.2);transition:opacity .1s}
.v-eye{position:absolute;top:34%;width:18%;height:10%;border:3px solid var(--paper)}.v-eye--l{left:23%}.v-eye--r{right:23%}.v-mouth{position:absolute;left:37%;bottom:26%;width:26%;height:8%;border-bottom:4px solid var(--paper)}
.crt-controls{height:48px;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;font-size:8px}.crt-controls input{accent-color:var(--red)}
.wave-big{position:absolute;left:0;right:0;bottom:-2vh;height:27vh;display:flex;align-items:center;justify-content:space-between;gap:1vw;opacity:.3;padding:0 2vw}
.wave-big span{width:1.2vw;background:var(--paper);height:calc(15% + var(--h, .5)*70%);transform:scaleY(calc(.2 + var(--p,0)*.8))}.wave-big span:nth-child(3n){--h:.9}.wave-big span:nth-child(4n){--h:.3}.wave-big span:nth-child(5n){--h:.7}

.lab{background:var(--paper);color:var(--ink);padding:0}
.city-frame{min-height:125vh;position:relative;padding:100px 4vw 80px;overflow:hidden}
.city-head{position:relative;z-index:3}.city-head h2{font:clamp(78px,9vw,150px)/.8 var(--display);letter-spacing:-.075em;margin:42px 0 0}.city-head h2 em{font-family:var(--serif);font-weight:400;color:var(--blue)}
.city-map{position:absolute;right:-4vw;bottom:5vh;width:65vw;height:80vh}
.city-map svg{width:100%;height:100%}.coast{fill:none;stroke:var(--blue);stroke-width:6}.streets path{fill:none;stroke:rgba(17,17,15,.28);stroke-width:2}.nodes circle{fill:var(--red);stroke:var(--paper);stroke-width:3;cursor:pointer;transition:r .2s}.nodes circle:hover{r:15}
.map-label{position:absolute;font-size:8px}.map-label--a{top:8%;right:10%}.map-label--b{left:4%;bottom:5%}.city-tooltip{position:absolute;display:none;background:var(--ink);color:var(--paper);padding:8px 10px;font-size:8px;pointer-events:none}
.lab-copy{position:absolute;left:4vw;bottom:7vh;z-index:3;width:35vw}.lab-copy p{font-size:34px;line-height:1;margin:0 0 30px}.lab-link{font-size:9px;border-bottom:1px solid var(--ink);padding-bottom:6px}

.statement{min-height:115vh;background:var(--red);color:var(--ink);display:grid;place-items:center;padding:90px 4vw}
.statement-inner{width:100%;position:relative}
.statement-mark{position:absolute;right:2vw;top:-8vh;font:38vw/.8 var(--display);color:rgba(17,17,15,.08);pointer-events:none}
.statement p{font-size:9px}.statement h2{font:clamp(76px,10vw,164px)/.78 var(--display);letter-spacing:-.075em;margin:40px 0 0;position:relative;z-index:2}.statement h2 em{font-family:var(--serif);font-weight:400}.statement h2 span{color:var(--paper)}

.contact{background:var(--ink);color:var(--paper);padding:110px 4vw 35px;min-height:150vh}
.contact-head h2{font:clamp(92px,13vw,210px)/.72 var(--display);letter-spacing:-.085em;margin:55px 0 0}.contact-head h2 em{font-family:var(--serif);font-weight:400;color:var(--blue)}.contact-head>p{font-size:42px;margin:20px 0 80px;color:#b9b6ad}
.pac-wrap{display:grid;grid-template-columns:.65fr 1.35fr;gap:30px;align-items:stretch}
.pac-copy{border-top:1px solid #414039;padding-top:20px;display:flex;flex-direction:column;justify-content:flex-start}.pac-copy>p:first-child{font-size:8px;color:#77746a}.pac-copy h3{font:42px/.9 var(--display);letter-spacing:-.045em;margin:28px 0}.pac-copy .serif{font-size:26px;color:#a8a59b}.contact-cta{margin-top:auto;width:max-content;font-size:10px;border-bottom:1px solid var(--paper);padding-bottom:6px}
.pac-board{height:620px;border:1px solid #4d4a40;position:relative;cursor:none;outline:none;background:#050504}
#pacCanvas{width:100%;height:100%;display:block}
.pac-status{position:absolute;left:14px;right:14px;bottom:12px;display:flex;justify-content:space-between;font-size:8px;color:#77746c;pointer-events:none}
.footer{margin-top:100px;border-top:1px solid #36352f;padding-top:20px;display:flex;justify-content:space-between;gap:20px;font-size:8px;color:#67645c}

@media(max-width:900px){
  .cursor-stamp{display:none}.topbar{grid-template-columns:1fr auto;height:58px;padding:0 14px}.topbar-meta{display:none}.topbar nav{gap:12px;font-size:8px}
  .scene{height:190vh}.hero-title{font-size:26vw}.hero-title span:last-child{margin-left:8vw}.hero-serif{font-size:8vw;max-width:82vw;margin-left:0}.machine{width:110vw;right:-40vw;bottom:4vh}.hero-side{display:none}
  .anatomy-title{left:5vw;top:12vh;width:90vw}.anatomy-title h2{font-size:16vw}.diagram{width:105vw;right:-30vw;top:35vh;height:58vh}.diagram-caption{left:16px;right:16px;display:block}.diagram-caption span{display:block;margin-top:7px}
  .work-intro{min-height:100vh}.poster-heading{font-size:18vw}.work-intro-copy{font-size:8vw;margin-left:20vw;max-width:72vw}
  .project{height:210vh}.project-ticket .project-sticky{grid-template-columns:1fr}.ticket-left{padding:90px 18px 0}.ticket-left h3,.bp-title h3,.vitoria-copy h3{font-size:18vw}.ticket-left>p,.bp-title>p,.vitoria-copy>p{font-size:7vw}.ticket-stage{position:absolute;inset:37vh 0 0}.thermal-paper{width:78vw;height:60vh;padding:18px}.thermal-logo{font-size:28vw}.thermal-qr{width:32vw;height:32vw}.scanner{width:45vw;height:18vh;right:3vw}.ticket-word{font-size:25vw}
  .bp-title{left:18px;top:12vh;width:86vw}.exploded{width:100vw;height:55vh;right:0;top:42vh}.bp-top{top:68px;left:14px;right:14px}.bp-top span:last-child{display:none}
  .vitoria-copy{left:18px;top:10vh;width:86vw}.crt{width:88vw;height:48vh;right:6vw;top:45vh}.wave-big{height:15vh}
  .city-frame{min-height:115vh;padding:80px 18px}.city-head h2{font-size:18vw}.city-map{width:110vw;height:58vh;right:-35vw;bottom:8vh}.lab-copy{left:18px;bottom:6vh;width:70vw}.lab-copy p{font-size:7vw}
  .statement{min-height:100vh;padding:80px 18px}.statement h2{font-size:16vw}
  .contact{padding:90px 18px 28px}.contact-head h2{font-size:23vw}.pac-wrap{grid-template-columns:1fr}.pac-copy{min-height:280px}.pac-board{height:68vh}.footer{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;animation:none!important;transition:none!important}
  .scene,.project{height:auto}.scene-sticky,.project-sticky{position:relative;height:100svh}
}