:root{--blue:#1237c9;--paper:#f2efe6;--yel:#ffd21f;--ink:#0b0b12;--red:#ff4a3d}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}
body{background:var(--blue);color:var(--paper);font:600 20px/1.6 Archivo,system-ui,sans-serif;overflow-x:hidden}
a{color:inherit}
.mono{font-family:"Space Mono",monospace}

/* nav */
.top{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 5vw;background:var(--ink);color:var(--yel)}
.top .logo{font:400 26px Anton;letter-spacing:.04em;text-decoration:none}
.top nav{display:flex;gap:6px;flex-wrap:wrap}
.top nav a{text-decoration:none;font:700 14px "Space Mono";padding:6px 12px;border:2px solid var(--yel);border-radius:99px}
.top nav a:hover,.top nav a.on{background:var(--yel);color:var(--ink)}
.top .join{text-decoration:none;font:700 14px "Space Mono";padding:6px 14px;border:2px solid var(--yel);border-radius:99px;background:var(--yel);color:var(--ink);margin-left:-6px}
.top .join:hover{background:var(--paper);border-color:var(--paper)}
.top nav{margin-left:auto}
.menu-btn{display:none}

/* dot field (canvas drawn by dots.js) */
.dotfield{position:relative;overflow:hidden}
.dotcv{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.dotfield>*:not(.dotcv){position:relative;z-index:1}

/* shared type */
.tag{display:inline-block;background:var(--yel);color:var(--ink);padding:4px 12px;font:800 14px Archivo;letter-spacing:.14em;margin-bottom:14px}
.h2{font:400 clamp(44px,8vw,120px)/.9 Anton;text-transform:uppercase;margin-bottom:30px}
section,.sec{padding:7vw 5vw}
.paper{background:var(--paper);color:var(--ink)}.paper .tag{background:var(--blue);color:var(--paper)}
.paper .h2.b{color:var(--blue)}
.lead{font-size:clamp(22px,2.6vw,30px);max-width:34ch;margin-bottom:30px}
.q{background:var(--yel);color:var(--ink);padding:2px 8px;font-weight:900}
.btn{display:inline-block;background:var(--ink);color:var(--yel);padding:16px 30px;font:400 26px Anton;text-transform:uppercase;text-decoration:none;box-shadow:7px 7px 0 var(--blue);transition:.15s}
.btn:hover{transform:translate(4px,4px);box-shadow:3px 3px 0 var(--blue)}
.btn.onblue{box-shadow:7px 7px 0 var(--yel)}.btn.onblue:hover{box-shadow:3px 3px 0 var(--yel)}

/* hero (landing) */
.hero{min-height:68vh;display:flex;flex-direction:column;justify-content:center;align-items:flex-end;text-align:right;padding:5vw}
.hero h1{font:400 clamp(64px,9.5vw,190px)/.84 Anton;text-transform:uppercase;margin:0 0 3vw;max-width:52%}
.hero h1 .y{color:var(--yel)}.hero h1 .o{-webkit-text-stroke:3px var(--paper);color:transparent}
.hero .sub{display:block;background:var(--ink);color:var(--paper);padding:.5em .8em;font:700 clamp(18px,2.45vw,44px)/1.15 Archivo;white-space:nowrap;width:max-content;max-width:100%;box-shadow:8px 8px 0 var(--yel)}
.reel{padding:0;height:100vh;background:var(--ink);border-block:4px solid var(--ink)}
.reel video{width:100%;height:100%;object-fit:cover;display:block}


/* artwork frames: label shows until the real image loads */
.art{position:relative;aspect-ratio:1;background:var(--blue);border:5px solid var(--ink);box-shadow:10px 10px 0 var(--yel);overflow:hidden}
.art.tall{aspect-ratio:4/5}.art.tilt{transform:rotate(-2deg)}
.art::after{content:attr(data-label);position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px;color:var(--paper);font:700 14px/1.5 "Space Mono";white-space:pre-line}
.art.ok::after{display:none}
.art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.art.red{background:var(--red)}.art.yellow{background:var(--yel)}.art.yellow::after{color:var(--ink)}

/* page header used by About / SAKHI / Brain Orgasm / Archives */
.phead{padding:5vw;display:grid;grid-template-columns:1.35fr .8fr;gap:5vw;align-items:center}
.phead h1{font:400 clamp(64px,12vw,190px)/.84 Anton;text-transform:uppercase;margin:16px 0 28px}
.phead h1 span:not(.w),.phead h1 .hl{color:var(--yel)}
.phead .intro{max-width:46ch;font-size:23px}
.quote{background:var(--ink);color:var(--yel);display:inline-block;padding:18px 24px;font:700 clamp(20px,2.6vw,32px)/1.25 Archivo;max-width:30ch;transform:rotate(-1deg);box-shadow:8px 8px 0 var(--yel);margin-bottom:28px}
.phead.red{background:var(--red);color:var(--ink)}
.phead.red h1{color:var(--paper)}
.phead.red .art{box-shadow:10px 10px 0 var(--ink)}
.badge{display:inline-block;background:var(--ink);color:var(--yel);padding:6px 14px;font:700 14px "Space Mono";transform:rotate(-1.5deg)}

/* about */
.twocol{display:grid;grid-template-columns:.8fr 1.2fr;gap:5vw;align-items:start}
.copy p{font-size:24px;margin-bottom:20px}
.hey{max-width:900px}
.ids{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.ids span{border:3px solid var(--ink);padding:6px 16px;border-radius:99px;font-weight:800;background:#fff;color:var(--ink);box-shadow:4px 4px 0 var(--ink);font-size:17px}
.ids span:nth-child(2n){background:var(--yel)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px}
.card{display:block;border:4px solid var(--ink);box-shadow:8px 8px 0 var(--ink);padding:26px;color:var(--ink);background:#fff;transition:.2s;min-height:200px;text-decoration:none}
a.card:hover,.card:hover{transform:translate(-3px,-3px) rotate(-1deg);box-shadow:12px 12px 0 var(--ink)}
.card h3{font:400 36px/1 Anton;text-transform:uppercase;margin-bottom:10px}
.card p{font-size:18px;line-height:1.45}
.card.y{background:var(--yel)}.card.r{background:var(--red);color:var(--paper)}.card.b{background:var(--blue);color:var(--paper)}
.topics{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px;color:var(--ink)}
.topics span{font:400 clamp(26px,4vw,48px)/1 Anton;text-transform:uppercase;border:4px solid var(--ink);padding:8px 18px;transition:.15s}
.topics span:hover{background:var(--yel);transform:rotate(-2deg)}

/* SAKHI */
.statement{font:400 clamp(34px,6vw,84px)/1 Anton;text-transform:uppercase;max-width:20ch}
.statement em{font-style:normal;background:var(--red);color:var(--paper);padding:0 12px}

/* archives: hover reveals artwork */
.shelves{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:26px}
.sc{position:relative;display:block;aspect-ratio:4/5;border:5px solid var(--ink);box-shadow:10px 10px 0 var(--ink);overflow:hidden;color:var(--ink);text-decoration:none;background:var(--yel)}
.sc:nth-child(2){background:#fff}.sc:nth-child(3){background:var(--red);color:var(--paper)}
.sc .t{position:absolute;left:24px;top:22px;right:24px;z-index:2;font:400 clamp(44px,5vw,72px)/.9 Anton;text-transform:uppercase}
.sc .d{position:absolute;left:24px;right:24px;bottom:22px;z-index:2;font:700 15px/1.4 "Space Mono"}
.sc .reveal{position:absolute;inset:0;z-index:3;transform:translateY(102%);transition:transform .5s cubic-bezier(.2,.8,.2,1);background:var(--blue)}
.sc .reveal::after{content:attr(data-label);position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px;color:var(--paper);font:700 14px/1.5 "Space Mono";white-space:pre-line}
.sc .reveal.ok::after{display:none}
.sc .reveal img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sc .reveal .rt{position:absolute;z-index:2;left:24px;bottom:22px;background:var(--ink);color:var(--yel);padding:6px 14px;font:400 30px Anton;text-transform:uppercase}
.sc:hover .reveal,.sc:focus-visible .reveal{transform:none}

/* blog list + article */
.list{background:var(--paper);color:var(--ink);padding:6vw 5vw}
.list .tag{background:var(--blue);color:var(--paper)}
.post{display:grid;grid-template-columns:110px 1fr 50px;gap:24px;align-items:center;padding:30px 0;border-top:4px solid var(--ink);text-decoration:none;transition:.2s}
.post:last-of-type{border-bottom:4px solid var(--ink)}
.post:hover{background:var(--yel);padding-inline:18px}
.post time{font:700 14px "Space Mono"}
.post h3{font:400 clamp(28px,4.4vw,56px)/1 Anton;text-transform:uppercase}
.post p{font-size:18px;margin-top:8px}
.post .ar{font:400 40px Anton}
.soon{margin-top:26px;font:700 14px "Space Mono";opacity:.7}
.artc{background:var(--paper);color:var(--ink);padding:6vw 5vw 3vw}
.artc-in{max-width:760px;margin:0 auto}
.artc .tag{background:var(--blue);color:var(--paper)}
.artc h1{font:400 clamp(44px,8vw,100px)/.92 Anton;text-transform:uppercase;margin:14px 0 22px}
.meta{font:700 14px "Space Mono";padding-bottom:26px;border-bottom:4px solid var(--ink);margin-bottom:36px}
.artc p{font:400 22px/1.75 Georgia,serif;margin-bottom:26px}
.artc h2{font:400 clamp(28px,4vw,44px)/1 Anton;text-transform:uppercase;margin:44px 0 18px}
.artc blockquote{font:400 26px/1.5 Georgia,serif;font-style:italic;border-left:8px solid var(--yel);padding-left:22px;margin:0 0 26px}
.artc ul,.artc ol{font:400 22px/1.75 Georgia,serif;margin:0 0 26px 1.2em}
.artc h3{font:800 24px/1.2 Archivo;margin:34px 0 14px}
.artc blockquote p{font:inherit;margin:0}
.artc img{display:block;max-width:100%;height:auto;border:4px solid var(--ink);margin:10px 0 30px}
.artc a:not(.back){color:inherit;text-decoration-thickness:3px;text-decoration-color:var(--yel)}
.artc .ph{font:700 15px "Space Mono";border:3px dashed var(--ink);padding:18px}
.back{display:inline-block;margin:20px 0 60px;font:700 15px "Space Mono";text-decoration:none;border:3px solid var(--ink);padding:8px 18px;border-radius:99px}
.back:hover{background:var(--yel)}

/* closing + footer */
.final{background:var(--yel);color:var(--ink);text-align:center;border-top:4px solid var(--ink)}
.final .big{font:400 clamp(48px,10vw,150px)/.88 Anton;text-transform:uppercase}
.final .big span{background:var(--ink);color:var(--yel);padding:0 14px}
.final p{font-size:24px;max-width:36ch;margin:26px auto 34px}
footer{background:var(--ink);color:var(--yel);padding:5vw 5vw 3vw}
footer .big{font:400 clamp(44px,9vw,130px)/.9 Anton;text-transform:uppercase}
.links,.socials{display:flex;gap:12px;flex-wrap:wrap;margin:24px 0 0}
.links a,.socials a{border:3px solid var(--yel);padding:8px 18px;border-radius:99px;text-decoration:none;font:700 15px "Space Mono"}
.socials a{background:var(--yel);color:var(--ink)}
.links a:hover{background:var(--yel);color:var(--ink)}.socials a:hover{background:var(--paper);border-color:var(--paper)}
.legal{font:700 13px "Space Mono";opacity:.7;margin-top:28px}

.rv{opacity:0;transform:translateY(30px);transition:.6s}.rv.in{opacity:1;transform:none}
@media(max-width:900px){.phead,.twocol{grid-template-columns:1fr}.hero{justify-content:flex-end;min-height:64vh}.hero h1{max-width:none}.hero .sub{white-space:normal;width:auto}.reel{height:56.25vw}.post{grid-template-columns:1fr;gap:6px}.post .ar{display:none}.phead .art{max-width:420px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.rv,.rv>*{opacity:1;transform:none}.progress{display:none}}

/* closing section */
.final.crowd{background:var(--blue);color:var(--paper);border-top:4px solid var(--ink)}
.final.crowd .big span{background:var(--yel);color:var(--ink)}

/* landing hero: headline top-left, the 70/30 crowd edge to edge along the bottom (Oshin's face is covered everywhere) */
.hero.crowdhero{display:block;min-height:auto;text-align:left;padding:4vw 5vw 0}
.crowdhero .hero-txt{position:relative;z-index:2;max-width:62%}
.crowdhero h1{font-size:clamp(56px,8vw,150px);max-width:none;margin-bottom:2vw}
.crowdhero .sub{font-size:clamp(16px,1.55vw,30px)}
.hero-crowd{position:relative;z-index:1;display:block;width:calc(100% + 10vw);max-width:none;height:auto;margin:-9vw -5vw 0;animation:rise .9s 1.1s cubic-bezier(.2,.8,.2,1) both}
@keyframes rise{from{transform:translateY(60px);opacity:0}to{transform:none;opacity:1}}
@media(max-width:900px){.hero.crowdhero{padding-top:8vw}.crowdhero .hero-txt{max-width:none}.hero-crowd{margin-top:3vw}}
@media(prefers-reduced-motion:reduce){.hero-crowd{animation:none}}

/* phone menu: logo, Join and a hamburger; links drop down below the bar */
@media(max-width:900px){
 .top{flex-wrap:wrap;padding:12px 16px}
 .top .logo{font-size:22px;margin-right:auto}
 .top .join{margin-left:0;font-size:12px;padding:6px 10px;white-space:nowrap}
 .top{gap:8px}
 .menu-btn{display:grid;gap:5px;place-content:center;width:42px;height:38px;background:none;border:2px solid var(--yel);border-radius:10px;cursor:pointer}
 .menu-btn i{display:block;width:20px;height:2px;background:var(--yel);transition:.25s}
 .top.open .menu-btn i:nth-child(1){transform:translateY(7px) rotate(45deg)}
 .top.open .menu-btn i:nth-child(2){opacity:0}
 .top.open .menu-btn i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
 .top nav{display:none;order:3;width:100%;margin:12px 0 4px;flex-direction:column;gap:8px}
 .top.open nav{display:flex}
 .top nav a{font-size:16px;padding:12px 16px;border-radius:12px}
}

@media(max-width:360px){.top{padding:12px}.top .logo{font-size:16px}.top .join{font-size:11px;padding:5px 8px}}
/* phone fixes */
/* highlighted words: give each line its own box and enough room so it never covers the line above */
.final .big{line-height:1.22}
.statement{line-height:1.25}
.final .big span,.statement em{-webkit-box-decoration-break:clone;box-decoration-break:clone}
@media(max-width:900px){}
/* touch screens can't hover, so the archive shelves show their artwork straight away */
@media(hover:none){.sc .reveal{transform:none}}

/* motion */
/* hero: headline slams up, the strapline slides in after it */
/* "Welcome to the" drops in word by word, "30%" stamps down hard and shakes the line, "Gang." glitches into its outline */
.crowdhero h1 .w{display:inline-block;animation:wordin .55s cubic-bezier(.2,.9,.3,1.3) both}
.crowdhero h1 .w:nth-child(2){animation-delay:.12s}.crowdhero h1 .w:nth-child(3){animation-delay:.24s}
.crowdhero h1 .y{animation:stamp .5s .5s cubic-bezier(.3,1.6,.5,1) both}
.crowdhero h1 .o{animation:glitch .9s .85s steps(1) both}
.crowdhero h1{animation:shake .35s .8s both}
.crowdhero .sub{animation:slidein .7s 1.4s cubic-bezier(.2,.8,.2,1) both}
@keyframes wordin{from{transform:translateY(-120%) rotate(-8deg);opacity:0}to{transform:none;opacity:1}}
@keyframes stamp{from{transform:scale(3.2) rotate(-18deg);opacity:0}to{transform:rotate(-3deg);opacity:1}}
@keyframes shake{0%,100%{transform:none}20%{transform:translate(-6px,4px)}40%{transform:translate(5px,-3px)}60%{transform:translate(-3px,2px)}80%{transform:translate(2px,-1px)}}
@keyframes glitch{0%{opacity:0}10%{opacity:1;color:var(--yel);transform:translateX(-10px) skewX(-12deg);text-shadow:6px 0 var(--red)}25%{color:var(--red);transform:translateX(8px);text-shadow:-6px 0 var(--yel)}40%{color:var(--paper);transform:none;text-shadow:4px 0 var(--red)}55%{color:transparent;text-shadow:none}70%{color:var(--yel)}85%,100%{color:transparent;transform:none;text-shadow:none;opacity:1}}
@keyframes slam{from{transform:translateY(80px) skewY(4deg);opacity:0}to{transform:none;opacity:1}}
@keyframes slidein{from{transform:translateX(-60px);opacity:0}to{transform:none;opacity:1}}
/* page headers: big heading rises, artwork drops in and then floats */
.phead .art{animation:dropin .9s .2s cubic-bezier(.2,.9,.3,1.3) both,float 6s 1.1s ease-in-out infinite}
@keyframes dropin{from{transform:translateY(-80px) rotate(-10deg);opacity:0}to{transform:rotate(-2deg);opacity:1}}
@keyframes float{0%,100%{transform:rotate(-2deg) translateY(0)}50%{transform:rotate(1deg) translateY(-12px)}}
/* tags stamp in when they scroll into view */
.tag.rv{transform:scale(1.8) rotate(-10deg);transition:transform .45s cubic-bezier(.2,.9,.3,1.4),opacity .3s}
.tag.rv.in{transform:rotate(-2deg)}
/* lists reveal one item after another (dots.js numbers the children in --i) */
.grid.rv,.topics.rv,.shelves.rv,.ids.rv{opacity:1;transform:none}
.grid.rv>*,.topics.rv>*,.shelves.rv>*,.ids.rv>*{opacity:0;transform:translateY(40px) rotate(-3deg);transition:opacity .5s,transform .6s cubic-bezier(.2,.9,.3,1.3),box-shadow .2s;transition-delay:calc(var(--i,0) * 110ms)}
.grid.rv.in>*,.topics.rv.in>*,.shelves.rv.in>*,.ids.rv.in>*{opacity:1;transform:none}
.grid.rv.in>a.card:hover,.grid.rv.in>.card:hover{transform:translate(-3px,-3px) rotate(-1deg);transition-delay:0s}
.topics.rv.in>span:hover{transform:rotate(-2deg);transition-delay:0s}
/* highlighted words sweep in like a marker */
.q{background:linear-gradient(var(--yel),var(--yel)) no-repeat 0 0/0% 100%;transition:background-size .7s .3s ease-out}
.in .q,.q.in{background-size:100% 100%}
.final .big span{background:linear-gradient(var(--yel),var(--yel)) no-repeat 0 0/0% 100%;transition:background-size .8s .4s ease-out}
.final .big.in span{background-size:100% 100%}
/* buttons wobble on hover */
.btn:hover{animation:wob .4s}
@keyframes wob{30%{rotate:-3deg}60%{rotate:2deg}}
/* scrolling word strip */
.marquee{overflow:hidden;background:var(--yel);color:var(--ink);border-block:4px solid var(--ink);padding:14px 0}
.marquee .track{display:flex;width:max-content;animation:scroll 28s linear infinite}
.marquee span{font:400 clamp(26px,3.4vw,48px)/1 Anton;text-transform:uppercase;padding:0 22px;white-space:nowrap}
.marquee i{font-style:normal;font-size:clamp(20px,2.4vw,34px);color:var(--red);align-self:center}
@keyframes scroll{to{transform:translateX(-50%)}}
/* floating stickers in section corners */
section{position:relative}
.flt,.dotfield>.flt{position:absolute;z-index:2;width:clamp(90px,10vw,160px);pointer-events:none;animation:bob 5s ease-in-out infinite}
.flt.s-tr{top:4vw;right:5vw}.flt.s-tl{top:3vw;left:4vw}.flt.s-br{bottom:3vw;right:4vw;animation-delay:-2.5s}
.flt.s-b{animation-delay:-1.2s}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-14px) rotate(6deg)}}
@media(max-width:900px){.flt{display:none}}

/* --- extra punch --- */
/* scroll progress along the bottom of the nav */
.progress{position:absolute;left:0;bottom:0;height:4px;width:100%;background:linear-gradient(90deg,var(--yel),var(--red));transform-origin:0 50%;transform:scaleX(0)}
/* "Let's connect" pill pulses three times, then rests */
.top .join{position:relative}
.top .join::after{content:"";position:absolute;inset:-2px;border-radius:99px;border:2px solid var(--yel);animation:ping 2.4s 2s ease-out 3;pointer-events:none}
@keyframes ping{0%{transform:scale(1);opacity:.9}70%,100%{transform:scale(1.25,1.6);opacity:0}}
/* page headings drop in word by word (dots.js wraps the words) */
.phead h1 .w{display:inline-block;animation:wordin .6s cubic-bezier(.2,.9,.3,1.3) both;animation-delay:calc(var(--i,0) * 110ms)}
/* spinning round badge in the landing hero */
.spin{position:absolute;z-index:3;top:2.4vw;right:4vw;width:clamp(110px,11vw,190px);animation:spin 14s linear infinite,popin .7s 1.6s cubic-bezier(.3,1.6,.5,1) both}
.spin circle{fill:var(--red);stroke:var(--ink);stroke-width:4}
.spin text{font:400 19px Anton;letter-spacing:2.6px;fill:var(--paper);text-transform:uppercase}
.spin .mid{font-size:56px;fill:var(--yel);letter-spacing:0}
@keyframes spin{to{rotate:360deg}}
@keyframes popin{from{transform:scale(0)}to{transform:scale(1)}}
@media(max-width:900px){.spin{display:none}}
/* two strips crossing like hazard tape */
.tapes{position:relative;overflow:hidden;background:var(--ink);padding:34px 0;border-block:4px solid var(--ink)}
.tapes .marquee{transform:rotate(-2deg);margin:0 -20px;box-shadow:0 6px 0 rgba(0,0,0,.35)}
.tapes .marquee.rev{transform:rotate(1.6deg);margin-top:-6px;background:var(--red);color:var(--paper)}
.tapes .marquee.rev i{color:var(--yel)}
.marquee.rev .track{animation-direction:reverse;animation-duration:34s}
.marquee:hover .track{animation-play-state:paused}
/* 3D tilt toward the pointer on cards, frames and shelves (dots.js sets --ax/--ay/--ang, desktop mice only) */
.grid,.shelves,.phead{perspective:1000px}
.tilt3d{rotate:var(--ax,0) var(--ay,1) 0 var(--ang,0deg);transition:rotate .15s ease-out}
/* a shine sweeps across cards on hover */
.card,.sc{position:relative;overflow:hidden}
.card::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);transform:translateX(-120%);pointer-events:none}
.card:hover::before{transform:translateX(120%);transition:transform .7s ease}
/* artwork zooms a touch inside its frame on hover */
.art img{transition:transform .5s cubic-bezier(.2,.8,.2,1)}.art:hover img{transform:scale(1.06)}
/* buttons squash when pressed */
.btn:active{transform:translate(7px,7px)!important;box-shadow:0 0 0 var(--blue)!important}
/* footer links bounce */
.links a,.socials a{display:inline-block;transition:transform .2s cubic-bezier(.3,1.6,.5,1),background .15s}
.links a:hover,.socials a:hover{transform:translateY(-4px) rotate(-3deg)}