/* v3 */
:root{--disp:"Space Grotesk",Inter,system-ui,sans-serif}
body{font-family:var(--disp);background:#06142a}
.term,#out,.term input{font-family:"JetBrains Mono",ui-monospace,monospace}
.bg{background:radial-gradient(ellipse at 70% 10%,#1E4FD8 0,#0d2a66 35%,#0B1F3A 70%,#06142a 100%)}
#gl{position:absolute;inset:0;width:100%!important;height:100%!important;opacity:0;transition:opacity 1.2s}#gl.on{opacity:1}
.bg.gl .grid-bg,.bg.gl .au,.bg.gl #px{display:none}
.grain{position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0)}20%{transform:translate(-5%,3%)}40%{transform:translate(4%,-6%)}60%{transform:translate(-3%,5%)}80%{transform:translate(6%,2%)}100%{transform:translate(0)}}
/* loader */
.loader{position:fixed;inset:0;z-index:200;background:#06142a;display:grid;place-items:center;transition:clip-path 1s cubic-bezier(.8,0,.2,1);clip-path:inset(0 0 0 0)}
.loader.out{clip-path:inset(0 0 100% 0)}
.ln{display:flex;gap:.3em;font:700 clamp(2.6rem,9vw,8rem)/1 var(--disp);letter-spacing:-.05em;color:var(--sand);overflow:hidden}
.ln span{display:inline-block;transform:translateY(110%);animation:up .8s cubic-bezier(.2,.8,.2,1) forwards}.ln span+span{color:#7fa2ff;animation-delay:.12s}
@keyframes up{to{transform:none}}
.lbar{position:absolute;bottom:12vh;left:50%;width:180px;height:2px;margin-left:-90px;background:rgba(243,233,220,.15);overflow:hidden}.lbar::after{content:"";position:absolute;inset:0;background:var(--sand);transform:scaleX(0);transform-origin:left;animation:lb 1s ease forwards}
@keyframes lb{to{transform:scaleX(1)}}
/* cursor */
.cur,.cur2{position:fixed;top:0;left:0;z-index:150;pointer-events:none;border-radius:50%;transform:translate(-50%,-50%)}
.cur{width:8px;height:8px;background:var(--sand)}
.cur2{width:40px;height:40px;border:1px solid rgba(243,233,220,.6);transition:width .3s,height .3s,background .3s}
.cur2.big{width:76px;height:76px;background:rgba(30,79,216,.25);border-color:#9db8ff}
@media (hover:none),(pointer:coarse){.cur,.cur2{display:none}}
/* hero */
.hero{height:500vh}
.bigword{font-family:var(--disp);font-weight:700;letter-spacing:-.05em;transform-style:preserve-3d;opacity:1;transform:none}
.bigword .ch{display:inline-block;will-change:transform,opacity;transform-style:preserve-3d;backface-visibility:hidden}
.portrait{-webkit-mask-image:linear-gradient(#000 70%,transparent 98%)!important;mask-image:linear-gradient(#000 70%,transparent 98%)!important;width:min(460px,72vw);align-self:end;margin-top:auto}
.hero .stick{place-items:end center}
.portrait img{filter:drop-shadow(0 0 2px rgba(157,184,255,.9)) drop-shadow(0 0 24px rgba(60,120,255,.55)) saturate(.9) contrast(1.05)}
.portrait::before,.portrait::after{display:none}
.halo{top:18%}
.hero-copy{bottom:auto;top:16vh}
.hero-copy h1{font-size:clamp(1.2rem,2.4vw,1.7rem);font-weight:600;letter-spacing:-.02em}
.bigword{top:42%}
.about-photo{-webkit-mask-image:linear-gradient(#000 75%,transparent 99%)!important;mask-image:linear-gradient(#000 75%,transparent 99%)!important;aspect-ratio:auto}
.about-photo::before,.about-photo::after{display:none}
.about-photo img{filter:drop-shadow(0 0 2px rgba(157,184,255,.9)) drop-shadow(0 0 30px rgba(60,120,255,.5))}
h2{font-family:var(--disp);letter-spacing:-.045em}
/* horizontal featured */
@media (min-width:821px){
 #work.hz{padding:0;height:100vh;overflow:hidden}
 #work.hz>.wrap{max-width:none;height:100vh;display:flex;flex-direction:column;justify-content:center;padding:70px 0 0 6vw}
 #work.hz .grid{display:flex;gap:28px;margin-top:28px;width:max-content;padding-right:8vw}
 #work.hz .card{width:400px;flex:none}
 #work.hz .card img{aspect-ratio:1200/630}
 #work.hz .card .b{padding:16px 20px 18px}
 #work.hz .card .d{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
 #work.hz>.wrap>p{position:absolute;bottom:22px;left:6vw}
}
.card{transition:transform .25s ease-out,box-shadow .35s}
.hbar{position:absolute;left:6vw;right:6vw;bottom:14px;height:2px;background:rgba(243,233,220,.12)}.hbar i{display:block;height:100%;background:var(--sand);transform-origin:left;transform:scaleX(0)}
.ch-up{display:inline-block}
@media (max-width:820px){.portrait{width:86vw}.hero-copy{top:12vh}.bigword{top:36%;font-size:2.8rem}}
@media (prefers-reduced-motion:reduce){.loader,.grain{display:none}}
.hero .stick{perspective:none}
.bigword{perspective:900px;transform-style:flat;top:31%}
.bigword .ch{transform-style:flat}
.bigword:not(.fill){text-shadow:0 8px 40px rgba(6,20,42,.9)}
.portrait{width:min(400px,72vw)}
@media (max-width:820px){.bigword{top:44%}}
.cur,.cur2{opacity:0;transition:opacity .3s,width .3s,height .3s,background .3s}body.mm .cur,body.mm .cur2{opacity:1}
@media (min-width:821px){#work.hz .card{width:360px}#work.hz .card p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}#work.hz .card .d{-webkit-line-clamp:2}#work.hz>.wrap>p{bottom:auto;left:auto;top:100px;right:6vw}#work.hz .grid{margin-top:22px}}
@media (max-width:820px){.bigword{white-space:nowrap;width:auto;font-size:9.5vw}}
/* v4 */
.bigword{top:24%;z-index:3;pointer-events:none}
.hero-copy{top:auto;bottom:7vh}
.about-photo{max-width:300px!important;justify-self:end}
@media (max-width:820px){.bigword{top:22%}.hero-copy{bottom:5vh}.about-photo{max-width:220px!important}}