/* mishakoroteev.com
   Odd pairs on purpose: olive + candy pink, plaster + ultramarine, lilac + brick, mustard + violet,
   bubblegum + bottle green, sky + rust, pistachio + raspberry, chili + blush, night + acid lime, oxblood + peach.
   Type: Archivo (condensed display), Bricolage Grotesque (body), Fraunces italic (notes and asides).
   v3 adds Space Mono (label tape), DynaPuff (puffy type) and Shrikhand, for pieces borrowed from Misha's reference folder. */

@font-face{font-family:"Archivo";src:url("../fonts/archivo.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Bricolage";src:url("../fonts/bricolage.woff2") format("woff2");font-weight:200 800;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:"DynaPuff";src:url("../fonts/dynapuff.woff2") format("woff2");font-weight:400 700;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:"Space Mono";src:url("../fonts/spacemono-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Shrikhand";src:url("../fonts/shrikhand.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Fraunces";src:url("../fonts/fraunces-italic.woff2") format("woff2");font-weight:100 900;font-style:italic;font-display:swap}

@property --bg{syntax:"<color>";inherits:true;initial-value:#ECE6DA}
@property --fg{syntax:"<color>";inherits:true;initial-value:#140F12}
@property --hd{syntax:"<color>";inherits:true;initial-value:#2B2FE0}
@property --acc{syntax:"<color>";inherits:true;initial-value:#E8471F}
@property --sh{syntax:"<color>";inherits:true;initial-value:#140F12}

:root{
  --ink:#140F12;--paper:#FBF8F1;--acid:#D9FF45;--pink:#FFB9DF;--sky:#AED8F0;--lilac:#B9B0E3;--chili:#E8471F;--mustard:#D8A21B;
  --display:"Archivo","Arial Narrow",Impact,sans-serif;
  --body:"Bricolage",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --gut:clamp(18px,4vw,56px);--max:1380px;--k:1;
}
/* --bg page, --fg body text, --hd big type, --acc pills and buttons, --sh hard shadows */
.t-olive,body[data-theme=olive]{--bg:#6F6D27;--fg:#FFE9F4;--hd:#FFB9DF;--acc:#D9FF45;--sh:#140F12}
.t-plaster,body[data-theme=plaster]{--bg:#ECE6DA;--fg:#140F12;--hd:#2B2FE0;--acc:#E8471F;--sh:#140F12}
.t-lilac,body[data-theme=lilac]{--bg:#B9B0E3;--fg:#2A0D18;--hd:#B3141C;--acc:#D9FF45;--sh:#2A0D18}
.t-mustard,body[data-theme=mustard]{--bg:#D8A21B;--fg:#1C1236;--hd:#2D1BB8;--acc:#F4A6C8;--sh:#1C1236}
.t-bubblegum,body[data-theme=bubblegum]{--bg:#F4A6C8;--fg:#0F2A1C;--hd:#0F5132;--acc:#D9FF45;--sh:#0F2A1C}
.t-sky,body[data-theme=sky]{--bg:#AED8F0;--fg:#2A0E06;--hd:#9C2A10;--acc:#FFD23F;--sh:#2A0E06}
.t-pistachio,body[data-theme=pistachio]{--bg:#C8DDA0;--fg:#10301F;--hd:#D9246B;--acc:#B9B0E3;--sh:#10301F}
.t-chili,body[data-theme=chili]{--bg:#E8471F;--fg:#140707;--hd:#FFE0F0;--acc:#D9FF45;--sh:#140707}
.t-night,body[data-theme=night]{--bg:#161A3D;--fg:#EDE7FF;--hd:#D9FF45;--acc:#FFB9DF;--sh:#EDE7FF}
.t-oxblood,body[data-theme=oxblood]{--bg:#5C1424;--fg:#FBE3D2;--hd:#F7C6A3;--acc:#C8DDA0;--sh:#FBE3D2}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:90px}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--bg);color:var(--fg);font:400 18px/1.5 var(--body);overflow-x:clip;-webkit-font-smoothing:antialiased;
  transition:--bg .6s ease,--fg .6s ease,--hd .6s ease,--acc .6s ease,--sh .6s ease}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration-thickness:2px;text-underline-offset:.18em}
:focus-visible{outline:3px solid var(--fg);outline-offset:3px;border-radius:6px}
p{margin:0 0 1em}
h1,h2,h3{margin:0;font-weight:inherit}
button{font:inherit;color:inherit;cursor:pointer}
figure{margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:999px;text-decoration:none}
.skip:focus{top:12px}
html:not(.js) .js-only{display:none}

/* ---------- bands and colour flow ---------- */
.band{position:relative;background:var(--bg);color:var(--fg);padding:clamp(80px,10vw,160px) 0;overflow-x:clip}
html.flow .band{--bg:inherit;--fg:inherit;--hd:inherit;--acc:inherit;--sh:inherit;background:transparent;color:inherit}
.wrap{position:relative;z-index:3;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}

/* ---------- type ---------- */
.h1,.h2,.statement,.pull,.mega,.ask-big,.chat-big,.h-name,.tile-title,.poster-t,.show-logo,.nf-num,.qa-q,.story-h,.credits-h,.next-t,.menu-nav a,.ftr-word,.flyer-h{font-family:var(--display);font-weight:900;font-stretch:62%;text-transform:uppercase;letter-spacing:-.012em}
.h1{font-size:clamp(46px,8.2vw,132px);line-height:.88;max-width:15ch;margin-bottom:.35em;color:var(--hd);text-wrap:balance}
.h1--case{font-size:clamp(42px,6.8vw,110px);max-width:17ch}
.h2{font-size:clamp(40px,6.2vw,98px);line-height:.88;max-width:15ch;margin-bottom:.55em;color:var(--hd);text-wrap:balance}
.h2--sm{font-size:clamp(34px,4.6vw,70px);max-width:22ch}
.lead{font-size:clamp(19px,1.55vw,25px);line-height:1.38;font-weight:500;max-width:36ch;text-wrap:pretty}
.lead--xl{font-size:clamp(21px,2vw,31px);max-width:40ch}
.prose p{font-size:clamp(17px,1.2vw,20px);line-height:1.55;max-width:60ch}
.serif{font-family:var(--serif);font-style:italic;font-weight:560;font-variation-settings:"SOFT" 100,"WONK" 1}
.kick{display:inline-flex;align-items:center;gap:.6em;font:800 13px/1 var(--display);font-stretch:100%;letter-spacing:.14em;text-transform:uppercase;border:2px solid currentColor;border-radius:999px;padding:.65em 1.05em .6em;margin:0 0 26px}
.kick::before{content:"";width:.75em;height:.75em;border-radius:50%;background:var(--acc);box-shadow:0 0 0 2px currentColor}
.more{margin-top:clamp(36px,4vw,60px)}
.cols2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(20px,4vw,72px);align-items:start}
.tk{display:inline-block;font:700 .62em/1.25 var(--body);font-style:normal;letter-spacing:.02em;text-transform:none;vertical-align:.12em;color:#140F12;background:#FFF1A8;border:2px dashed #140F12;border-radius:8px;padding:.18em .5em;margin:0 .15em}
.tk::before{content:"TK: ";font-weight:800}
.tkline{margin-top:28px}
.split-line{overflow:clip;padding-bottom:.06em;margin-bottom:-.06em}

/* inline pills inside giant sentences */
.ip{display:inline-block;white-space:nowrap;border:.06em solid currentColor;border-radius:999px;padding:0 .24em .02em;line-height:.88;margin:.03em 0}
.ip--fill{background:var(--hd);color:var(--bg);border-color:var(--hd)}
.inl{display:inline-block;height:1.05em;width:auto;vertical-align:-.16em;margin:0 .04em;rotate:-8deg}

/* ---------- buttons, pills, mail ---------- */
.btns{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.btn{display:inline-flex;align-items:center;gap:.55em;font:800 clamp(14px,1.1vw,17px)/1 var(--display);font-stretch:100%;letter-spacing:.05em;text-transform:uppercase;padding:1.05em 1.5em 1em;border:2.5px solid var(--ink);border-radius:999px;background:var(--acc);color:var(--ink);text-decoration:none;box-shadow:5px 5px 0 var(--sh);transition:transform .15s ease,box-shadow .15s ease}
.btn:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--sh)}
.btn:active{transform:translate(4px,4px);box-shadow:1px 1px 0 var(--sh)}
.btn--dark{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.t-night .btn--dark,body[data-theme=night] .btn--dark,.t-oxblood .btn--dark{background:var(--paper);color:var(--ink)}
.btn--big{font-size:clamp(16px,1.4vw,21px)}
.lbl{display:inline-flex;align-items:center;font:800 13px/1 var(--display);font-stretch:100%;letter-spacing:.08em;text-transform:uppercase;border:2px solid currentColor;border-radius:999px;padding:.7em 1em .65em}
.lbl .tk{font-size:12px;vertical-align:0}
.lbl--role{background:var(--acc);color:var(--ink);border-color:var(--ink)}
.pill-link{display:inline-flex;font:800 13px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;border:2px solid currentColor;border-radius:999px;padding:.7em 1em;text-decoration:none;margin:0 8px 8px 0}
.pill-link:hover{background:var(--ink);color:var(--paper)}
.mail{display:inline-flex;align-items:stretch;max-width:100%;border:2.5px solid var(--ink);border-radius:999px;background:var(--paper);color:var(--ink);box-shadow:5px 5px 0 var(--sh);overflow:hidden}
.mail-a{display:inline-flex;align-items:center;padding:.75em 1.1em;font:800 15px/1 var(--display);font-stretch:95%;letter-spacing:.02em;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.mail-copy{border:0;border-left:2.5px solid var(--ink);background:var(--acc);color:var(--ink);font:800 12px/1 var(--display);letter-spacing:.1em;text-transform:uppercase;padding:0 1.1em}
.mail--big .mail-a{font-size:clamp(16px,1.9vw,28px);padding:.7em 1em}
.mail--big{margin:8px 0 26px}

/* ---------- header and menu ---------- */
.hdr{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:8px;padding:14px var(--gut);pointer-events:none}
.hdr>*{pointer-events:auto}
.hdr-logo,.hdr-link,.hdr-cta,.menu-btn{display:inline-flex;align-items:center;gap:8px;font:800 13px/1 var(--display);font-stretch:100%;letter-spacing:.07em;text-transform:uppercase;text-decoration:none;border:2px solid var(--ink);border-radius:999px;padding:11px 15px 10px;background:var(--paper);color:var(--ink);transition:transform .15s,background .15s}
.hdr-logo{font-size:14px;letter-spacing:.05em;padding:7px 15px 7px 7px}
.hdr-m{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--acc);border:2px solid var(--ink);font:900 14px/1 var(--display);font-stretch:62%;rotate:-10deg}
.hdr-nav{display:flex;gap:6px;margin-left:auto}
.hdr-link:hover,.hdr-logo:hover{transform:rotate(-2deg)}
.hdr-link.is-on{background:var(--ink);color:var(--paper)}
.hdr-cta{background:var(--ink);color:var(--paper)}
.hdr-cta:hover{background:var(--acc);color:var(--ink)}
.menu-btn{display:none}
@media (max-width:1100px){.hdr-nav{display:none}.hdr-cta{margin-left:auto}.menu-btn{display:inline-flex}}
@media (max-width:420px){.hdr-cta{display:none}.menu-btn{margin-left:auto}}
.menu{position:fixed;inset:0;z-index:80;background:#161A3D;color:#EDE7FF;padding:84px var(--gut) 40px;overflow:auto;display:flex;flex-direction:column;gap:28px}
.menu[hidden]{display:none}
.menu-close{position:absolute;top:14px;right:var(--gut);font:800 13px/1 var(--display);letter-spacing:.07em;text-transform:uppercase;border:2px solid #EDE7FF;border-radius:999px;padding:11px 15px;background:#D9FF45;color:var(--ink)}
.menu-nav{display:flex;flex-direction:column;gap:4px}
.menu-nav a{font-size:clamp(44px,12vw,96px);line-height:.92;text-decoration:none}
.menu-nav a:nth-child(3n+1):hover{color:#D9FF45}.menu-nav a:nth-child(3n+2):hover{color:#FFB9DF}.menu-nav a:nth-child(3n):hover{color:#AED8F0}
body.menu-open{overflow:hidden}

/* ---------- loose elements ---------- */
.stk{position:absolute;left:var(--x);top:var(--y);width:calc(var(--w) * var(--k));z-index:5;margin:0;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.stk-in{display:block;position:relative;rotate:var(--r)}
.stk img{width:100%;filter:drop-shadow(0 14px 14px rgb(20 15 18 / .28));-webkit-user-drag:none;animation:bob 7s ease-in-out infinite;animation-delay:calc(var(--r) * -.1s)}
.stk-cap{position:absolute;left:var(--cx);top:var(--cy);rotate:var(--cr);width:max-content;max-width:220px;font:italic 600 17px/1.15 var(--serif);font-variation-settings:"SOFT" 100,"WONK" 1;color:var(--fg);pointer-events:none}
.stk-cap::before{content:"";position:absolute;left:-2px;right:-2px;bottom:-5px;height:3px;border-radius:3px;background:var(--acc);opacity:.9}
.is-dragging{cursor:grabbing;z-index:40!important}
.is-dragging img{animation-play-state:paused}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(3deg)}}
.tag{position:absolute;left:var(--x);top:var(--y);rotate:var(--r);z-index:5;font:800 clamp(13px,1.15vw,17px)/1 var(--display);font-stretch:95%;letter-spacing:.06em;text-transform:uppercase;padding:.8em 1.15em .75em;border-radius:999px;background:var(--c);color:var(--ink);border:2.5px solid var(--ink);box-shadow:4px 4px 0 var(--ink);white-space:nowrap;touch-action:none;cursor:grab;user-select:none}
.doodle{position:absolute;left:var(--x);top:var(--y);width:calc(var(--w) * var(--k));rotate:var(--r);z-index:4;overflow:visible;pointer-events:none}
.doodle{height:var(--h,auto)}
.doodle path{fill:none;stroke:var(--hd);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.loose{position:absolute;left:var(--x);top:var(--y);width:calc(var(--w) * var(--k));rotate:var(--r);z-index:4;background:var(--paper);padding:8px 8px 10px;border:2.5px solid var(--ink);box-shadow:7px 7px 0 var(--sh);touch-action:none;cursor:grab;user-select:none}
.loose img{width:100%;aspect-ratio:2.35/1;object-fit:cover;-webkit-user-drag:none}
.loose figcaption{font:800 10px/1.2 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-top:7px}
.ticket{position:absolute;left:var(--x);top:var(--y);rotate:var(--r);z-index:5;display:grid;justify-items:center;gap:6px;width:clamp(170px,16vw,230px);padding:20px 26px 18px;background:#D9FF45;color:var(--ink);border-radius:10px;font-family:var(--display);text-transform:uppercase;text-align:center;touch-action:none;cursor:grab;user-select:none;
  -webkit-mask:radial-gradient(circle 13px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 13px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat;
          mask:radial-gradient(circle 13px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 13px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat;
  filter:drop-shadow(5px 6px 0 rgb(20 15 18 / .9))}
.ticket::before{content:"";position:absolute;inset:9px 18px;border:2px dashed rgb(20 15 18 / .55);border-radius:6px;pointer-events:none}
.ticket span{font-weight:800;font-size:12px;letter-spacing:.2em}
.ticket b{font-weight:900;font-stretch:62%;font-size:clamp(28px,2.6vw,38px);line-height:.9}
.ticket small{font-weight:700;font-size:10px;letter-spacing:.16em}
.ticket--b{background:#FFB9DF}
@media (max-width:760px){:root{--k:.55}.stk--d,.tag--d,.doodle--d{display:none}}

/* ---------- hero ---------- */
.hero{min-height:calc(100svh - 72px);display:grid;align-content:center;padding-top:clamp(16px,3vw,40px)}
.hero-wrap{width:100%}
.h-name{display:block;font-size:clamp(76px,14.6vw,250px);line-height:.79;color:var(--hd)}
.h-name>span{display:block}
.h-name>span:last-child{color:var(--fg)}
.h-role{display:block;margin-top:.45em;font-family:var(--display);font-weight:800;font-stretch:74%;font-size:clamp(25px,3.3vw,52px);line-height:1.12;text-transform:uppercase;max-width:24ch}
.h-role .ip{background:var(--acc);color:var(--ink);border-color:var(--ink);padding:.02em .28em 0}
.hero-row{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(22px,3vw,48px);margin-top:clamp(22px,3vw,44px)}
.balloon{position:relative;display:inline-block;margin:0;background:var(--paper);color:var(--ink);border:3px solid var(--ink);border-radius:48% 52% 46% 54% / 56% 48% 52% 44%;padding:1.05em 1.5em 1.15em;font-family:var(--serif);font-style:italic;font-weight:600;font-variation-settings:"SOFT" 100,"WONK" 1;font-size:clamp(21px,2.1vw,32px);line-height:1.12;max-width:17ch;text-align:center;box-shadow:6px 6px 0 var(--ink)}
.balloon::after{content:"";position:absolute;right:16%;bottom:-24px;width:30px;height:30px;background:var(--paper);border-right:3px solid var(--ink);border-bottom:3px solid var(--ink);transform:skewX(32deg) rotate(28deg);border-bottom-right-radius:4px}
.balloon--big{font-size:clamp(23px,2.6vw,40px);max-width:19ch}
.balloon--left{max-width:25ch;margin-top:10px}
.balloon--left::after{left:18%;right:auto;transform:skewX(-32deg) rotate(-28deg);border-right:0;border-left:3px solid var(--ink)}
.badge{position:absolute;right:max(var(--gut),4%);top:clamp(40px,9vw,140px);z-index:6;width:clamp(210px,22vw,320px);margin:0;background:var(--paper);color:var(--ink);border:3px solid var(--ink);border-radius:20px;padding:30px 16px 16px;box-shadow:10px 10px 0 var(--ink);rotate:var(--r);touch-action:none;cursor:grab;user-select:none}
.badge-clip{position:absolute;left:50%;top:-22px;translate:-50% 0;width:62px;height:36px;border:3px solid var(--ink);border-radius:12px 12px 6px 6px;background:#B9B0E3}
.badge-clip::after{content:"";position:absolute;left:50%;top:9px;translate:-50% 0;width:26px;height:8px;border-radius:6px;background:var(--paper);border:2.5px solid var(--ink)}
.badge-top{display:flex;justify-content:space-between;font:900 12px/1 var(--display);letter-spacing:.2em;text-transform:uppercase;background:#E8471F;border:2.5px solid var(--ink);border-radius:8px;padding:8px 10px;margin-bottom:12px}
.badge-img{width:100%;aspect-ratio:1;object-fit:cover;border:2.5px solid var(--ink);border-radius:10px;background:#E6E5DF;-webkit-user-drag:none}
.badge-cap{display:grid;gap:3px;margin-top:12px;font:700 12px/1.3 var(--display);letter-spacing:.06em;text-transform:uppercase}
.badge-cap strong{font-weight:900;font-stretch:62%;font-size:clamp(24px,2.4vw,34px);line-height:.95;letter-spacing:0}
.badge-code{display:block;height:28px;margin-top:12px;background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 4px,var(--ink) 4px 7px,transparent 7px 9px,var(--ink) 9px 10px,transparent 10px 13px)}
@media (max-width:980px){.badge{position:relative;right:auto;top:auto;margin:48px 0 0 auto;width:min(290px,72vw)}.loose{display:none}}

/* intro statement */
.statement{font-size:clamp(46px,8vw,132px);line-height:.92;max-width:19ch;margin-bottom:.5em;color:var(--hd)}
.intro-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));gap:clamp(24px,5vw,90px);align-items:start}
.warn{font-size:clamp(21px,1.9vw,29px)}
.warn-pill{display:inline-flex;font:800 12px/1 var(--display);font-style:normal;letter-spacing:.1em;text-transform:uppercase;background:var(--acc);color:var(--ink);border:2px solid var(--ink);border-radius:999px;padding:.6em .9em;text-decoration:none;vertical-align:.25em;rotate:-4deg}

/* retro windows */
.wins{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:clamp(22px,3vw,44px);margin-top:20px}
.win{position:relative;display:flex;flex-direction:column;background:var(--paper);color:var(--ink);border:3px solid var(--ink);border-radius:12px;box-shadow:10px 10px 0 var(--ink);rotate:var(--r)}
.win:nth-child(even){margin-top:26px}
.win-bar{display:flex;align-items:center;gap:10px;padding:8px 10px;border-bottom:3px solid var(--ink);background:repeating-linear-gradient(180deg,var(--ink) 0 2px,transparent 2px 5px) 0 50%/100% 17px no-repeat;cursor:grab;touch-action:none;user-select:none}
.win-btn{flex:none;width:17px;height:17px;border:2.5px solid var(--ink);background:var(--paper)}
.win-btn--z{background:linear-gradient(var(--ink),var(--ink)) 50% 50%/8px 8px no-repeat var(--paper)}
.win-title{margin:0 auto;background:var(--paper);padding:2px 12px;font:800 13px/1.3 var(--display);font-stretch:90%;letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.win-body{flex:1;display:grid;grid-template-columns:auto 1fr;grid-template-rows:1fr auto;column-gap:18px;row-gap:22px;padding:22px 22px 24px;border-radius:0 0 9px 9px}
.win-icon{width:64px;image-rendering:pixelated;grid-row:1}
.win-body p{margin:0;font-weight:600;font-size:clamp(19px,1.45vw,23px);line-height:1.3}
.win-link{grid-column:1/-1;justify-self:start;display:inline-flex;gap:.5em;font:800 13px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;border:2.5px solid var(--ink);border-radius:999px;padding:.85em 1.15em .8em;background:var(--ink);color:var(--paper);transition:transform .15s}
.win-link:hover{transform:translateX(4px)}
.win--a .win-body{background:#D9FF45}.win--b .win-body{background:#FFB9DF}.win--c .win-body{background:#AED8F0}
.zoomrect{position:absolute;border:2px solid var(--ink);pointer-events:none;z-index:8}

/* tiles: real stills, duotone in the card colours until hover */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:clamp(26px,3vw,44px);--tile-sh:var(--sh)}
.tiles--2{grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),440px));margin-top:40px}
.tile{position:relative;display:flex;flex-direction:column;background:var(--bg);color:var(--fg);border:3px solid var(--ink);border-radius:18px;padding:10px 10px 18px;text-decoration:none;box-shadow:8px 8px 0 var(--tile-sh,var(--ink));transition:transform .25s ease,box-shadow .25s ease;cursor:pointer}
.tile[hidden]{display:none}
.tile:hover{transform:translate(-3px,-4px) rotate(-.8deg);box-shadow:12px 13px 0 var(--tile-sh,var(--ink))}
.tile-media{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:10px;border:2.5px solid var(--ink);background:#000;isolation:isolate}
.tile--wide .tile-media{aspect-ratio:2.35/1}
.tile-media img,.tile-media video{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.12);transform:scale(1.02);transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .4s}
.tile-media::before,.tile-media::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;transition:opacity .45s}
.tile-media::before{background:var(--bg);mix-blend-mode:multiply}
.tile-media::after{background:var(--hd);mix-blend-mode:lighten;opacity:.92}
.tile:hover .tile-media::before,.tile:hover .tile-media::after,.tile:focus-visible .tile-media::before,.tile:focus-visible .tile-media::after{opacity:0}
.tile:hover .tile-media img,.tile:focus-visible .tile-media img,.tile:hover .tile-media video,.tile:focus-visible .tile-media video{filter:none;transform:scale(1.08)}
.tile-play{position:absolute;z-index:2;right:12px;bottom:12px;display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:var(--acc);color:var(--ink);border:2.5px solid var(--ink);font-size:18px;transform:scale(.85) rotate(-10deg);transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.tile:hover .tile-play{transform:scale(1.12) rotate(0)}
.tile-take{position:absolute;left:-30px;top:14px;writing-mode:vertical-rl;rotate:180deg;font:800 11px/1 var(--display);letter-spacing:.22em;text-transform:uppercase;color:var(--fg)}
.tiles .tile-take,.reel .tile-take{color:inherit}
.tile-info{display:grid;gap:7px;padding:14px 8px 0}
.tile-teaser{font:italic 600 18px/1.18 var(--serif);font-variation-settings:"SOFT" 100,"WONK" 1}
.tile-title{font-size:clamp(34px,3vw,52px);line-height:.86;color:var(--hd)}
.tile-meta{font:800 12px/1.35 var(--display);letter-spacing:.07em;text-transform:uppercase}
.tile-role{font-size:15px;line-height:1.3;font-weight:600}
.tile-role b{display:inline-block;font:800 10px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;border:1.5px solid currentColor;border-radius:999px;padding:.35em .6em;margin-right:4px;vertical-align:.12em}
.tile .tk{font-size:11px;margin:0}

/* home reel: pinned, moves sideways */
.reel{padding-bottom:clamp(60px,6vw,100px)}
.reel-head{margin-bottom:clamp(20px,3vw,40px)}
.reel-hint{font:italic 600 19px/1.2 var(--serif);opacity:.85;margin:0}
.reel-pin{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
.reel.is-pinned .reel-pin{overflow:visible}
.reel-track{display:flex;align-items:flex-start;gap:clamp(30px,3.4vw,56px);padding:20px var(--gut) 30px calc(var(--gut) + 34px);width:max-content}
.reel .tile{width:clamp(320px,44vw,640px);flex:none}
.reel .tile:nth-child(odd){rotate:-1.2deg}.reel .tile:nth-child(even){rotate:1deg;margin-top:46px}
.reel-end{flex:none;align-self:center;display:grid;place-items:center;gap:10px;width:clamp(240px,24vw,330px);aspect-ratio:1;border-radius:50%;background:var(--hd);color:var(--bg);font:900 clamp(26px,2.4vw,38px)/.95 var(--display);font-stretch:62%;text-transform:uppercase;text-align:center;padding:30px;text-decoration:none;border:3px solid var(--ink);transition:transform .3s}
.reel-end:hover{transform:rotate(-8deg) scale(1.04)}
.reel-end-arrow{font-size:1.6em}
@media (max-width:899px){.reel-pin{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}.reel .tile{scroll-snap-align:center;width:84vw}}

/* why */
.why-text{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:clamp(20px,4vw,60px)}
.why-text p,.long p{font-family:var(--body);font-weight:700;font-stretch:88%;font-size:clamp(22px,2.15vw,34px);line-height:1.2;color:var(--hd);max-width:30ch}
.indent{text-indent:3.2em}
.pull{margin-top:clamp(40px,5vw,80px);font-size:clamp(40px,5.8vw,92px);line-height:.92;max-width:18ch;text-align:right;margin-left:auto;color:var(--fg)}

/* proof */
.proof-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:clamp(30px,5vw,80px);align-items:center;margin-bottom:clamp(40px,5vw,70px)}
.stats{display:grid;gap:14px}
.stat{display:flex;align-items:baseline;gap:18px;margin:0;border-bottom:3px solid currentColor;padding-bottom:12px}
.stat b{font:900 clamp(64px,9vw,140px)/.8 var(--display);font-stretch:62%;min-width:2.2ch;color:var(--hd)}
.stat>span{font:800 clamp(15px,1.4vw,21px)/1.15 var(--display);letter-spacing:.06em;text-transform:uppercase}
.proof-lead{max-width:48ch}
.marquee{position:relative;z-index:3;margin-top:clamp(60px,8vw,110px);background:var(--hd);color:var(--bg);border-block:3px solid var(--ink);overflow:hidden;rotate:-1.6deg;width:104%;margin-left:-2%}
.marquee-track{display:flex;width:max-content;will-change:transform}
.marquee-set{display:flex;align-items:center;gap:28px;padding:18px 14px;font:900 clamp(26px,3vw,46px)/1 var(--display);font-stretch:66%;text-transform:uppercase;white-space:nowrap}
.star{width:.7em;height:.7em;fill:var(--acc);flex:none}

/* AI */
.mega{font-size:clamp(96px,19vw,330px);line-height:.78;letter-spacing:-.02em;margin:.1em 0 .25em;color:var(--hd)}
.ai-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:clamp(20px,4vw,70px)}
.toolrow{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}
.toolrow .lbl:nth-child(3n+1){background:var(--acc);color:var(--ink);border-color:var(--ink)}

/* shows */
.posters{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,60px);margin:10px 0 clamp(40px,5vw,70px)}
.poster{position:relative;flex:1 1 300px;max-width:470px;min-height:clamp(340px,34vw,480px);display:flex;flex-direction:column;justify-content:space-between;gap:16px;padding:28px;background:var(--bg);color:var(--fg);border:3px solid var(--ink);border-radius:18px;box-shadow:10px 10px 0 var(--ink);rotate:var(--r);text-decoration:none}
.poster-k{align-self:flex-start;font:800 12px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;border:2px solid currentColor;border-radius:999px;padding:.7em 1em}
.poster-t{font-size:clamp(48px,5.6vw,84px);line-height:.82;text-transform:none;color:var(--hd)}
.poster-d{font:italic 600 clamp(19px,1.6vw,24px)/1.2 var(--serif);font-variation-settings:"SOFT" 100,"WONK" 1;max-width:22ch}

/* chat + bottom */
.chat{padding-top:clamp(140px,16vw,240px)}
.chat-big{font-size:clamp(96px,21vw,360px);line-height:.78;letter-spacing:-.02em;rotate:-6deg;margin:0 0 .2em -.04em;color:var(--hd);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:8px 8px 0 var(--ink)}
.chat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:clamp(24px,4vw,70px);align-items:center;margin-top:clamp(20px,3vw,40px)}
.chat-cta{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.chat-cta .mail--big{margin:0}
.bottom{padding-top:clamp(60px,7vw,100px)}
.dont-wrap{position:relative;max-width:440px;margin:10px 0 50px 34px;rotate:-2deg}
.dont{position:absolute;right:-64px;top:12%;z-index:6;display:grid;place-items:center;width:130px;height:130px;border-radius:50%;background:#E8471F;color:var(--ink);border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);font:900 26px/.9 var(--display);font-stretch:62%;text-transform:uppercase;text-align:center;rotate:14deg;pointer-events:none;animation:wobble 2.6s ease-in-out infinite}
@keyframes wobble{0%,100%{transform:rotate(0)}10%{transform:rotate(-10deg)}20%{transform:rotate(8deg)}30%{transform:rotate(-4deg)}40%{transform:rotate(0)}}
.studio{font-size:15px;max-width:60ch;opacity:.9}

/* page heroes */
.phero{padding-top:clamp(40px,6vw,90px);min-height:min(88svh,860px);display:grid;align-content:center}
.phero>.wrap{width:100%}
.chero{min-height:auto;padding-bottom:clamp(60px,7vw,110px)}
.crumbs{font:800 13px/1 var(--display);letter-spacing:.1em;text-transform:uppercase;margin-bottom:28px;opacity:.9}
.crumbs a{text-decoration:none;border-bottom:2px solid currentColor}
.labels{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 0}

/* case screens */
.screen-band{padding-block:clamp(50px,6vw,90px)}
.screens{display:grid;gap:clamp(24px,3vw,40px)}
.screens--two{grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));align-items:start}
.screen iframe{display:block;width:100%;aspect-ratio:var(--ar);border:3px solid var(--fg);border-radius:16px;background:#000}
.screen--v{max-width:min(420px,100%);margin-inline:auto}
.screen figcaption{margin-top:12px;font:800 13px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;opacity:.85}
.screen-link{position:relative;display:block;aspect-ratio:var(--ar);background:#000;border:3px solid var(--fg);border-radius:16px;overflow:hidden;text-decoration:none;box-shadow:12px 12px 0 var(--sh);color:var(--ink)}
.screen--v .screen-link{max-height:82svh;margin-inline:auto}
.screen-img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.screen-link:hover .screen-img{transform:scale(1.04)}
.screen-blank{display:grid;place-items:center;width:100%;height:100%;background:var(--bg);color:var(--hd);font:900 clamp(40px,6vw,90px)/.86 var(--display);font-stretch:62%;text-transform:uppercase}
.screen-play{position:absolute;left:50%;top:50%;translate:-50% -50%;display:inline-flex;align-items:center;gap:.6em;font:800 clamp(14px,1.3vw,18px)/1 var(--display);letter-spacing:.1em;text-transform:uppercase;background:var(--acc);color:var(--ink);border:2.5px solid var(--ink);border-radius:999px;padding:1.1em 1.6em;box-shadow:5px 5px 0 var(--ink);transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.screen-link:hover .screen-play{transform:scale(1.08) rotate(-3deg)}
.screen-dur{position:absolute;right:14px;bottom:12px;font:800 13px/1 var(--display);letter-spacing:.12em;background:var(--ink);color:var(--paper);border-radius:999px;padding:.5em .8em}

/* case story */
.story-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(30px,6vw,110px);align-items:start}
@media (max-width:900px){.story-grid{grid-template-columns:1fr}}
.story-h{font-size:clamp(28px,3vw,44px);line-height:.9;margin:0 0 .35em;color:var(--hd)}
.story-h:not(:first-child){margin-top:1.1em}
.credits{background:var(--paper);color:var(--ink);border:3px solid var(--ink);border-radius:16px;padding:24px;box-shadow:8px 8px 0 var(--ink);rotate:1deg}
.credits-h{font-size:30px;line-height:.9;margin-bottom:16px}
.credits dl{margin:0 0 18px;display:grid}
.credits dl>div{padding:10px 0;border-bottom:2px solid var(--ink)}
.credits dt{font:800 11px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;opacity:.7;margin-bottom:5px}
.credits dd{margin:0;font-weight:600;font-size:17px;line-height:1.3}
.proof-links{margin:0}
.next-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:clamp(30px,5vw,80px);align-items:center}
.next-q{font-size:clamp(28px,3.4vw,52px);line-height:1.05;margin-bottom:.6em}
.next-nav{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.next-card{display:flex;flex-direction:column;gap:10px;background:var(--paper);color:var(--ink);border:3px solid var(--ink);border-radius:14px;padding:10px 10px 16px;text-decoration:none;box-shadow:6px 6px 0 var(--ink);transition:transform .2s}
.next-card img{aspect-ratio:16/9;object-fit:cover;border-radius:8px;border:2px solid var(--ink)}
.next-card:hover{transform:translate(-2px,-3px) rotate(-1deg)}
.next-k{font:800 12px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;padding:0 4px}
.next-t{font-size:clamp(24px,2.4vw,36px);line-height:.88;padding:0 4px}

/* hire pages */
.qas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:clamp(24px,3vw,44px);margin-top:clamp(30px,4vw,56px)}
.qa{background:var(--paper);color:var(--ink);border:3px solid var(--ink);border-radius:18px;padding:24px 26px;box-shadow:8px 8px 0 var(--ink);rotate:var(--r)}
.qa-q{font-size:clamp(26px,2.4vw,38px);line-height:.92;margin-bottom:.5em}
.qa-a{font-size:clamp(18px,1.35vw,21px);line-height:1.4;margin:0}
.ask{display:grid;gap:10px;justify-items:start}
.ask-big{font-size:clamp(64px,12vw,200px);line-height:.8;letter-spacing:-.02em;margin:0;max-width:11ch;color:var(--hd)}
.ask-small{font-size:clamp(26px,3vw,46px);line-height:1.1;margin:.2em 0 .6em}

/* about */
.about-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:center}
.about-grid .badge{position:relative;right:auto;top:auto;justify-self:center;width:min(330px,80vw)}
@media (max-width:900px){.about-grid{grid-template-columns:1fr}}
.long{columns:2 380px;column-gap:clamp(30px,5vw,80px)}
.long p{break-inside:avoid}
.caught{font-family:var(--display)!important;font-weight:900!important;font-stretch:64%!important;text-transform:uppercase;color:var(--acc)!important;font-size:clamp(40px,4.4vw,70px)!important;line-height:.9!important}
.awards{list-style:none;margin:0;padding:0;display:grid;border-top:3px solid currentColor}
.awards li{display:grid;grid-template-columns:minmax(110px,180px) 1fr;gap:clamp(16px,3vw,40px);align-items:baseline;padding:18px 0;border-bottom:3px solid currentColor}
.awards b{font:900 clamp(48px,6vw,96px)/.8 var(--display);font-stretch:62%;color:var(--hd)}
.awards span{font-size:clamp(18px,1.6vw,24px);font-weight:600;line-height:1.3}

/* shows page */
.show-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(30px,5vw,80px);align-items:center}
@media (max-width:900px){.show-grid{grid-template-columns:1fr}}
.show-logo{font-size:clamp(90px,15vw,260px);line-height:.78;letter-spacing:-.03em;margin:0;color:var(--hd);rotate:-4deg;text-transform:none}
.show-logo--sm{font-size:clamp(110px,18vw,300px);text-transform:uppercase}

/* credits list */
.credits-list{list-style:none;margin:0 0 40px;padding:0;border-top:3px solid currentColor}
.credits-list li{display:grid;grid-template-columns:minmax(0,1fr) 110px minmax(0,220px);gap:18px;align-items:baseline;padding:16px 0;border-bottom:3px solid currentColor;font-size:clamp(17px,1.35vw,21px);font-weight:600;line-height:1.3}
.cl-year{font:800 14px/1 var(--display);letter-spacing:.1em}
.cl-role{font-size:15px;font-weight:700}
@media (max-width:700px){.credits-list li{grid-template-columns:1fr auto}.cl-role{grid-column:1/-1}}

/* filters */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.filters button{font:800 13px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;border:2.5px solid var(--ink);border-radius:999px;padding:.85em 1.15em;background:var(--paper);color:var(--ink);box-shadow:3px 3px 0 var(--ink)}
.filters button[aria-pressed=true]{background:var(--acc)}

/* contact */
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 26px;max-width:980px}
.form label{display:grid;gap:8px;font:800 13px/1 var(--display);letter-spacing:.1em;text-transform:uppercase}
.form .wide,.form fieldset,.form .btn,.form-out{grid-column:1/-1}
.form input,.form select,.form textarea{font:500 18px/1.3 var(--body);text-transform:none;letter-spacing:0;padding:14px 16px;border:2.5px solid var(--ink);border-radius:14px;background:var(--paper);color:var(--ink);width:100%}
.form .btn{justify-self:start}
.chips{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:10px}
.chips legend{font:800 13px/1 var(--display);letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px;padding:0}
.chip{display:inline-flex!important;align-items:center;cursor:pointer}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip span{font:800 13px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;border:2.5px solid var(--ink);border-radius:999px;padding:.8em 1.1em;background:var(--paper);color:var(--ink)}
.chip input:checked+span{background:var(--acc);box-shadow:3px 3px 0 var(--ink)}
.chip input:focus-visible+span{outline:3px solid var(--ink);outline-offset:2px}
.form-out{display:grid;gap:14px;padding:22px;border:3px dashed var(--ink);border-radius:16px;background:#FFF1A8;color:var(--ink)}
.form-out[hidden]{display:none}
.ps-row{display:flex;flex-wrap:wrap;align-items:center;gap:40px;margin-top:60px}
.ps{font-size:clamp(22px,2vw,30px);margin:0}
.flyer{position:relative;width:240px;background:#FBF8F1;color:var(--ink);padding:26px 18px 0;border:1px solid rgb(20 15 18 / .2);box-shadow:4px 10px 18px rgb(20 15 18 / .25);rotate:var(--r);touch-action:none;cursor:grab;user-select:none;text-align:center}
.flyer-pin{position:absolute;left:50%;top:8px;translate:-50% 0;width:16px;height:16px;border-radius:50%;background:#E8471F;box-shadow:0 2px 0 rgb(20 15 18 / .4)}
.flyer-h{font-size:46px;line-height:.85;margin:6px 0 8px}
.flyer img{width:150px;margin:0 auto;-webkit-user-drag:none}
.flyer-t{font:italic 600 17px/1.2 var(--serif);margin:8px 0 14px}
.flyer-tabs{display:flex;margin:0 -18px;border-top:2px dashed rgb(20 15 18 / .5)}
.flyer-tabs span{flex:1;writing-mode:vertical-rl;font:700 8.5px/1 var(--body);padding:8px 0;height:120px;border-right:1px dashed rgb(20 15 18 / .4);overflow:hidden}
.flyer-tabs span:nth-child(3){transform:translateY(6px) rotate(3deg);opacity:.0}
.faq{display:grid;gap:14px;max-width:980px}
.faq details{background:var(--paper);color:var(--ink);border:3px solid var(--ink);border-radius:16px;box-shadow:6px 6px 0 var(--ink)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:20px 22px;font:900 clamp(22px,2.2vw,34px)/.95 var(--display);font-stretch:66%;text-transform:uppercase}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:2.5px solid var(--ink);font:800 24px/1 var(--body);transition:rotate .2s}
.faq details[open] summary::after{rotate:45deg;background:#D9FF45}
.faq details p{padding:0 22px 22px;margin:0;font-size:clamp(18px,1.35vw,21px);line-height:1.45;max-width:62ch}
@media (max-width:640px){.form{grid-template-columns:1fr}}

/* 404 */
.nf-num{font-size:clamp(140px,30vw,460px);line-height:.75;color:var(--hd);margin:0 0 .1em;letter-spacing:-.03em}

/* ---------- footer + physics pile ---------- */
.ftr{padding:clamp(70px,8vw,120px) 0 30px;min-height:clamp(560px,70vh,760px)}
.ftr-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px}
@media (max-width:900px){.ftr-cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.ftr-cols{grid-template-columns:1fr}}
.ftr-col{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.ftr-col a{text-decoration:none;font-weight:600;font-size:18px}
.ftr-col a:hover{text-decoration:underline}
.ftr-h{font:800 12px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;opacity:.85;margin:0 0 6px}
.ftr-mail .mail-a{font-size:14px}
.ftr-word{position:relative;z-index:2;margin:clamp(50px,7vw,100px) 0 0;padding-inline:var(--gut);font-size:clamp(80px,17.4vw,300px);line-height:.8;letter-spacing:-.02em;color:transparent;-webkit-text-stroke:2px var(--fg);display:flex;flex-wrap:wrap;column-gap:.18em;user-select:none}
.ftr-word span:last-child{-webkit-text-stroke-color:var(--hd)}
.ftr-small{margin-top:30px;font-size:14px;opacity:.85}
.pile{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.pile img{position:absolute;left:0;top:0;pointer-events:auto;cursor:grab;touch-action:none;filter:drop-shadow(0 8px 8px rgb(20 15 18 / .35));-webkit-user-drag:none;user-select:none;will-change:transform}

/* ---------- page transition, cursor, preview note ---------- */
.tr{position:fixed;inset:0;z-index:200;pointer-events:none;visibility:hidden}
.tr-panel{position:absolute;inset:0;display:grid;place-items:center;background:var(--trbg,#161A3D);background-size:cover;background-position:center}
.tr-icon{width:clamp(120px,14vw,190px);filter:drop-shadow(0 18px 18px rgb(0 0 0 / .3))}
html.is-entering .tr{visibility:visible}
html.is-entering .tr-panel{background-color:var(--trbg,#161A3D);background-image:var(--trimg,none)}
html.js-pre .hero .h-name,html.js-pre .hero .badge,html.js-pre .hero .balloon{visibility:hidden}
.cursor{position:fixed;left:0;top:0;z-index:150;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--acc,#D9FF45);border:2px solid #140F12;pointer-events:none;display:grid;place-items:center;transition:width .25s,height .25s,margin .25s;opacity:0}
.cursor.is-on{opacity:1}
.cursor.is-big{width:96px;height:96px;margin:-48px 0 0 -48px}
.cursor-label{font:800 12px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:#140F12;opacity:0;transition:opacity .2s}
.cursor.is-big .cursor-label{opacity:1}
@media (hover:none),(pointer:coarse){.cursor{display:none}}
.pv{position:fixed;right:14px;bottom:14px;z-index:120;max-width:330px;background:#FBF8F1;color:#140F12;border:2.5px solid #140F12;border-radius:14px;box-shadow:5px 5px 0 #140F12;padding:14px 40px 14px 16px;font-size:13.5px;line-height:1.4}
.pv b{font-weight:800}
.pv-x{position:absolute;right:8px;top:8px;width:26px;height:26px;border-radius:50%;border:2px solid #140F12;background:#D9FF45;line-height:1;font-size:16px;padding:0}
.pv[hidden]{display:none}
@media (max-width:760px){.pv{left:10px;right:10px;max-width:none;font-size:12.5px}.dont{right:-6px;top:-34px;width:104px;height:104px;font-size:21px}}

@media (prefers-reduced-motion:reduce){
  body{transition:none}
  .stk img,.dont{animation:none!important}
  .tile,.btn{transition:none}
}

/* =====================================================================
   v3: pieces borrowed from the reference folder
   label-maker tape, redaction bars, stacked type, puffy type, tiny people,
   magazine cutouts, a pixel render, sliced frames, a puppet, a torn 404
   ===================================================================== */

/* label-maker tape */
.dymo{--dc:#1B1B1F;display:inline-block;rotate:var(--r,0deg);vertical-align:middle;filter:drop-shadow(1px 2px 0 rgb(0 0 0 / .4)) drop-shadow(0 6px 7px rgb(0 0 0 / .16))}
.dymo-t,.filters--dymo button>span,.lbl--role{display:inline-flex;align-items:center;font:700 var(--dfs,15px)/1 "Space Mono",ui-monospace,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase;color:#F6F2EA;
  background:linear-gradient(180deg,rgb(255 255 255 / .22),rgb(255 255 255 / 0) 36%,rgb(0 0 0 / 0) 68%,rgb(0 0 0 / .24)),var(--dc,#1B1B1F);
  padding:.66em 1.15em .6em 1.25em;border:0;border-radius:1px;white-space:nowrap;
  clip-path:polygon(0 0,100% 0,calc(100% - .34em) 50%,100% 100%,0 100%,.34em 50%);
  text-shadow:0 -1px 0 rgb(0 0 0 / .7),0 1px 0 rgb(255 255 255 / .3)}
.dymo-t i{font-style:normal;display:inline-block;translate:0 calc(var(--j,0) * .55px)}
.dymo-t i.sp{width:.5em}
.dymo--red{--dc:#C8202A}.dymo--blue{--dc:#1F48B5}.dymo--green{--dc:#17784A}.dymo--black{--dc:#1B1B1F}
.dymo--loose{position:absolute;left:var(--x);top:var(--y);z-index:6}
.lbl--role{--dc:#C8202A;font-size:13px;box-shadow:none}
.filters--dymo{gap:14px 12px}
.filters--dymo button{background:none;border:0;padding:0;box-shadow:none;rotate:var(--r,0deg);filter:drop-shadow(1px 2px 0 rgb(0 0 0 / .45));transition:translate .2s,rotate .2s}
.filters--dymo button:nth-child(odd){--r:-1.2deg}.filters--dymo button:nth-child(even){--r:1deg}
.filters--dymo button>span{--dc:#1B1B1F;font-size:14px}
.filters--dymo button:hover{translate:0 -3px}
.filters--dymo button[aria-pressed=true]>span{--dc:#C8202A}
.filters--dymo button[aria-pressed=true]{rotate:0deg;translate:0 -2px}

/* redaction bars and the case file nobody gets to read */
.dossier{position:absolute;left:var(--x);top:var(--y);rotate:var(--r);z-index:6;width:clamp(260px,23vw,330px);padding:16px 18px 22px;background:#E8D3A2;color:var(--ink);border:2.5px solid var(--ink);border-radius:4px 14px 4px 4px;box-shadow:8px 8px 0 var(--sh);font:700 13px/1.25 "Space Mono",ui-monospace,monospace;touch-action:none;cursor:grab;user-select:none}
.dossier::before{content:"";position:absolute;left:14px;top:-16px;width:110px;height:16px;background:#E8D3A2;border:2.5px solid var(--ink);border-bottom:0;border-radius:8px 8px 0 0}
.dossier-top{display:flex;justify-content:space-between;margin:0 0 12px;padding-bottom:8px;border-bottom:2px dashed rgb(20 15 18 / .5);letter-spacing:.12em;text-transform:uppercase;font-size:11px}
.dossier-dl{display:grid;grid-template-columns:auto 1fr;gap:10px 12px;margin:0}
.dossier-dl dt{font-size:10px;letter-spacing:.12em;text-transform:uppercase;opacity:.75;padding-top:3px}
.dossier-dl dd{margin:0;font-size:15px}
.dossier-dl b{font:900 22px/1 var(--display);font-stretch:70%;text-transform:uppercase;letter-spacing:.02em}
.rd{position:relative;display:inline-block;width:100%;max-width:11em;height:1.15em;vertical-align:-.2em}
.rd--s{max-width:7em}.rd--xs{max-width:3.2em}
.rd::before{content:attr(data-peek);position:absolute;inset:0;display:flex;align-items:center;padding-left:.2em;font:italic 600 1em/1 var(--serif);font-variation-settings:"SOFT" 100,"WONK" 1;color:#B3141C;white-space:nowrap}
.rd>span{position:absolute;inset:-.06em -.1em;display:block;overflow:hidden;color:transparent;background:#0F0C0D;border-radius:2px 5px 3px 6px;transform-origin:0 50%;transition:translate .35s cubic-bezier(.3,1.7,.5,1),rotate .35s cubic-bezier(.3,1.7,.5,1);
  background-image:repeating-linear-gradient(90deg,rgb(255 255 255 / .05) 0 2px,transparent 2px 7px)}
.rd:hover>span,.rd:focus-within>span{translate:0 -.85em;rotate:-5deg}
.dossier-stamp{position:absolute;right:-26px;bottom:-22px;rotate:-14deg;padding:.35em .6em .3em;font:900 26px/1 var(--display);font-stretch:68%;letter-spacing:.08em;text-transform:uppercase;color:#C8202A;border:3.5px solid #C8202A;border-radius:6px;background:rgb(232 211 162 / .35);mix-blend-mode:multiply;
  -webkit-mask:repeating-radial-gradient(circle at 30% 40%,#000 0 2px,rgb(0 0 0 / .78) 2.5px 3px);mask:repeating-radial-gradient(circle at 30% 40%,#000 0 2px,rgb(0 0 0 / .78) 2.5px 3px)}

/* the same word in a pile of typefaces */
.stack{margin:0;display:grid;justify-items:start;font-size:clamp(64px,11vw,190px);line-height:.86;color:var(--hd);text-transform:uppercase}
.stack-l{display:block;white-space:nowrap}
.stack-l>span{display:inline-block}
.stack--cond{font-family:var(--display);font-weight:900;font-stretch:62%;letter-spacing:-.01em}
.stack--wide{font-family:var(--display);font-weight:900;font-stretch:125%;font-size:.6em;line-height:1.02;letter-spacing:-.02em}
.stack--serif{font-family:var(--serif);font-style:italic;font-weight:600;font-variation-settings:"SOFT" 100,"WONK" 1;text-transform:none;font-size:1.05em;line-height:.84}
.stack--mono{font-family:"Space Mono",ui-monospace,monospace;font-weight:700;font-size:.66em;line-height:1.05;letter-spacing:-.05em}
.stack--outline{font-family:var(--display);font-weight:900;font-stretch:62%;color:transparent;-webkit-text-stroke:2px var(--hd)}
.stack--shrik{font-family:"Shrikhand",var(--serif);text-transform:none;font-size:.8em;line-height:1.05}
.stack--puffy{text-transform:none;font-size:1.02em;line-height:1}
.stack--right{justify-items:end}
.stack--center{justify-items:center}

/* puffy type: glossy, inflated, like the bubble letters in the folder */
.puffy,.stack--puffy>span{position:relative;display:inline-block;font-family:"DynaPuff",var(--display);font-weight:700;font-stretch:100%;font-style:normal;letter-spacing:-.005em;text-transform:none;
  color:var(--pk,#140F12);-webkit-text-stroke:.13em var(--pk,#140F12);paint-order:stroke fill;text-shadow:.02em .06em 0 var(--pk,#140F12),.04em .11em 0 var(--pk,#140F12)}
.puffy::after,.stack--puffy>span::after{content:attr(data-t);position:absolute;left:0;top:0;white-space:nowrap;-webkit-text-stroke:0;text-shadow:none;color:transparent;
  background:linear-gradient(180deg,rgb(255 255 255 / 0) 14%,rgb(255 255 255 / .75) 23%,rgb(255 255 255 / 0) 33%),linear-gradient(180deg,var(--p1,#F4FFB8),var(--p2,#D9FF45) 55%,var(--p3,#9CC51A));
  -webkit-background-clip:text;background-clip:text}
.puffy--pink{--p1:#FFE6F3;--p2:#FFB9DF;--p3:#E86FAE}
.puffy--blush{--p1:#FFF4FA;--p2:#FFE0F0;--p3:#F2A8C9}
.puffy--sky{--p1:#E8F6FF;--p2:#AED8F0;--p3:#6FA9D0}
.puffy--lilac{--p1:#F0EDFF;--p2:#B9B0E3;--p3:#8C80C9}
.faq-head{position:relative}
.faq-q{position:absolute;right:max(var(--gut),2%);top:-.15em;z-index:4;font-size:clamp(150px,17vw,280px);line-height:1;rotate:12deg;transform-origin:50% 80%}

/* tiny people */
.tiny{position:absolute;display:block;left:var(--x);top:var(--y);z-index:7;margin:0;height:calc(var(--th) * var(--k));rotate:var(--r);pointer-events:none}
.tiny-in{display:block;height:100%}
.tiny img{height:100%;width:auto;max-width:none;filter:drop-shadow(0 3px 2px rgb(20 15 18 / .35))}
.tiny--flip .tiny-in{transform:scaleX(-1)}
.tiny-cap{position:absolute;left:var(--cx);top:var(--cy);rotate:var(--cr);width:max-content;max-width:190px;letter-spacing:0;text-transform:none;font:italic 600 16px/1.15 var(--serif);font-variation-settings:"SOFT" 100,"WONK" 1;color:var(--fg);pointer-events:none}
.tiny-cap::before{content:"";position:absolute;left:-2px;right:-2px;bottom:-5px;height:3px;border-radius:3px;background:var(--acc)}
.tile .tiny{left:auto;right:var(--x);top:calc(var(--th) * var(--k) * -.555)}
.tile .tiny-cap{color:inherit}
.reel .tile .tiny-cap{color:#EDE7FF}
.reel-end{position:relative}
.reel-end .tiny{left:auto;right:auto;top:auto;bottom:-14px;left:-58px;rotate:0deg}
.stat{position:relative}
.stat .tiny{left:var(--x);top:calc(var(--th) * var(--k) * -.97)}

/* magazine cutouts */
.cut .stk-in img{filter:drop-shadow(1px 2px 0 rgb(20 15 18 / .3)) drop-shadow(0 12px 12px rgb(20 15 18 / .22))}
.cut--flip .stk-in img{scale:-1 1}

/* render: a still that comes out of big pixels as you scroll */
.render{position:relative;display:block;width:min(560px,100%);margin:clamp(30px,4vw,60px) 0 0 auto;rotate:var(--r);background:var(--paper);color:var(--ink);border:3px solid var(--ink);border-radius:12px;padding:8px 8px 12px;box-shadow:10px 10px 0 var(--sh)}
.render--left{margin-left:0;margin-right:auto}
.render-bar{display:flex;justify-content:space-between;gap:12px;font:700 12px/1 "Space Mono",ui-monospace,monospace;letter-spacing:.02em;padding:4px 4px 10px}
.render-pct{color:#C8202A}
.render-box{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border:2.5px solid var(--ink);border-radius:6px;background:#111}
.render-box img,.render-box canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.render-box canvas{display:none;image-rendering:pixelated}
.render.is-live canvas{display:block}
.render-prog{position:absolute;left:0;right:0;bottom:0;height:7px;background:rgb(0 0 0 / .45)}
.render-prog i{display:block;height:100%;width:var(--p,100%);background:#D9FF45}
.render figcaption{font:italic 600 17px/1.2 var(--serif);font-variation-settings:"SOFT" 100,"WONK" 1;margin:10px 4px 0}
.tape{position:absolute;z-index:3;width:92px;height:26px;background:rgb(244 233 200 / .78);box-shadow:0 1px 2px rgb(0 0 0 / .18);clip-path:polygon(3% 0,97% 5%,100% 50%,96% 100%,2% 95%,0 48%);pointer-events:none}
.tape--l{left:-26px;top:-8px;rotate:-30deg}.tape--r{right:-26px;top:-6px;rotate:26deg}

/* slices: rough cut to picture lock */
.slices{position:relative;display:block;width:min(780px,100%);margin:clamp(34px,4vw,64px) 0 0;rotate:var(--r)}
.slices-box{--gap:12px;display:flex;aspect-ratio:2.35/1;gap:var(--gap)}
.slices-box i{flex:1;display:block;background-size:calc(var(--n) * 100% + (var(--n) - 1) * var(--gap)) 100%;background-position:calc(var(--i) / (var(--n) - 1) * 100%) 50%;background-repeat:no-repeat;border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);box-shadow:4px 5px 0 var(--sh)}
.slices-box i:first-child{border-left:3px solid var(--ink);border-radius:10px 0 0 10px}
.slices-box i:last-child{border-right:3px solid var(--ink);border-radius:0 10px 10px 0}
.slices figcaption{position:relative;height:1.3em;margin-top:16px;font:900 clamp(26px,2.6vw,38px)/1 var(--display);font-stretch:66%;text-transform:uppercase}
.slices figcaption span{position:absolute;left:0;top:0;transition:opacity .3s,translate .3s}
.slices-b{opacity:0;translate:0 .4em;color:var(--hd)}
.slices.is-locked .slices-a{opacity:0;translate:0 -.4em}
.slices.is-locked .slices-b{opacity:1;translate:0 0}
.slices .tape--l{left:-30px;top:-10px}

/* puppet on strings */
.puppet{position:absolute;left:var(--x);top:var(--y);z-index:6;width:calc(66px * var(--k));margin:0;pointer-events:none}
.puppet-swing{display:block;position:relative;transform-origin:50% 0}
.puppet-bar{position:absolute;left:-32%;top:0;width:164%;height:9px;border-radius:5px;background:linear-gradient(#CF9A5C,#8B5A2B);box-shadow:0 2px 0 rgb(20 15 18 / .35)}
.puppet-bar::after{content:"";position:absolute;left:50%;top:-16px;margin-left:-7px;width:14px;height:18px;border-radius:7px 7px 3px 3px;background:linear-gradient(90deg,#CF9A5C,#8B5A2B);box-shadow:2px 0 0 rgb(20 15 18 / .25)}
.puppet-s{position:absolute;top:5px;width:1.5px;background:var(--fg);opacity:.75;height:calc(var(--len) + 2px)}
.puppet .s1{left:9%}
.puppet .s2{left:92%;height:calc(var(--len) + 66px * var(--k) * .23)}
.puppet .s3{left:46%;height:calc(var(--len) + 66px * var(--k) * .66)}
.puppet img{display:block;width:100%;max-width:none;margin-top:calc(var(--len) + 5px);filter:drop-shadow(0 3px 2px rgb(20 15 18 / .3))}
.puppet-cap{position:absolute;left:115%;top:calc(var(--len) + 30px);rotate:-4deg;width:max-content;font:italic 600 17px/1.15 var(--serif);font-variation-settings:"SOFT" 100,"WONK" 1;color:var(--fg)}
.puppet-cap::before{content:"";position:absolute;left:-2px;right:-2px;bottom:-5px;height:3px;border-radius:3px;background:var(--acc)}

/* annotations on a photo */
.badge-photo{position:relative;display:block}
.annot{position:absolute;left:var(--x);top:var(--y);z-index:3;width:max-content;font:italic 600 15px/1 var(--serif);font-variation-settings:"SOFT" 100,"WONK" 1;color:#C8202A;background:#fff;border:2px solid #C8202A;border-radius:999px;padding:.32em .7em .38em;rotate:var(--r,0deg);box-shadow:2px 2px 0 #C8202A}
.annot-svg{position:absolute;inset:0;z-index:2;width:100%;height:100%;overflow:visible;pointer-events:none}
.annot-svg path{fill:none;stroke:#C8202A;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.annot-svg .hat{stroke:var(--ink);stroke-width:.9;stroke-dasharray:2.6 1.9;fill:rgb(255 255 255 / .18)}

/* torn 404 */
.torn{position:relative;display:inline-block}
.torn>.torn-a,.torn>.torn-b{display:block}
.torn-b{position:absolute;left:0;top:0}
.torn-a{clip-path:polygon(0 0,52% 0,49% 8%,53% 15%,48% 24%,52% 31%,47% 40%,51% 48%,46% 57%,50% 64%,45% 73%,49% 81%,44% 90%,48% 100%,0 100%)}
.torn-b{clip-path:polygon(52% 0,100% 0,100% 100%,48% 100%,44% 90%,49% 81%,45% 73%,50% 64%,46% 57%,51% 48%,47% 40%,52% 31%,48% 24%,53% 15%,49% 8%);translate:.1em .05em;rotate:6deg;color:var(--acc)}
.torn .tiny{left:auto;right:-.05em;top:auto;bottom:4%;translate:100% 0}
.nf-head{position:relative;display:inline-block}

@media (max-width:760px){.tiny--d,.dossier,.puppet,.faq-q{display:none}.render,.slices{rotate:0deg}}
@media (prefers-reduced-motion:reduce){.rd>span{transition:none}}
.dymo--on{position:absolute;left:31%;top:34%;z-index:2;--dfs:calc(var(--w) * var(--k) * .044)}
.wait-band .stack{font-size:clamp(60px,8.6vw,150px)}
.wait-band .stack--puffy{font-size:1.25em;margin-top:.06em}
.stack--shows{font-size:clamp(54px,7.4vw,124px)}
.stack--shows .stack--puffy{font-size:.86em}
.stack--pop{font-size:clamp(52px,8.6vw,150px)}
.stack--pop .stack--puffy{font-size:1.5em}
.pop-band{padding-block:clamp(70px,8vw,130px)}

.ip--paint{position:relative;isolation:isolate;background:transparent;color:var(--bg);transition:color .25s}
.ip--paint::before{content:"";position:absolute;inset:-.06em;z-index:-1;border-radius:inherit;background:var(--hd);transform-origin:100% 50%;scale:var(--paint,1) 1}
.is-dry .ip--paint{color:var(--hd)}

.show-logo.puffy{font-size:clamp(56px,7.8vw,132px);rotate:-5deg}

/* v4: flourishes go strange. Stickers are repainted as dot-grid paintings (distort.py);
   on hover or drag they wobble like a melting blob */
.stk img,.tiny img,.pile img{image-rendering:auto}
@media (hover:hover){.stk:hover .stk-in img,.is-dragging .stk-in img,.pile img:hover{filter:url(#warp) drop-shadow(0 14px 14px rgb(20 15 18 / .28))}}

.tile-media video{position:absolute;inset:0;display:block}
@media (prefers-reduced-motion:reduce){.tile-media video{display:none}}
.inl{filter:url(#warp-sm)}
@media (prefers-reduced-motion:reduce){.inl{filter:none}}