: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}

/* ratio bar */
.split{display:flex;height:46px;border-block:4px solid var(--ink);font:700 14px "Space Mono"}
.split div{display:flex;align-items:center;padding:0 5vw;white-space:nowrap}
.split .a{flex:7;background:#6a6f85;color:var(--ink)}.split .b{flex:3;background:var(--yel);color:var(--ink);border-left:4px solid var(--ink)}

/* 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{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}
.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}.split div{font-size:12px;padding:0 3vw}.post{grid-template-columns:1fr;gap:6px}.post .ar{display:none}.phead .art{max-width:420px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}.rv{opacity:1;transform: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 (no faces of Oshin outside "Hey, I'm Oshin") */
.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 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}
 .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}
}

/* phone fixes */
@media(max-width:900px){
 /* highlighted words wrap onto two lines; give each line its own box and room so it doesn't cover the line above */
 .final .big{line-height:1.12}
 .statement{line-height:1.18}
 .final .big span,.statement em{-webkit-box-decoration-break:clone;box-decoration-break:clone}
 /* ratio bar labels wrap instead of running off the edge */
 .split div{white-space:normal;line-height:1.2;min-width:0}}
/* touch screens can't hover, so the archive shelves show their artwork straight away */
@media(hover:none){.sc .reveal{transform:none}}