:root{--bg:#0b0b0d;--fg:#ece8e1;--muted:#8d8a85;--line:#ece8e124;--lime:#c9f26b;--serif:"Instrument Serif", Georgia, serif;--sans:"Geist", system-ui, sans-serif;--pad:clamp(20px, 5vw, 72px)}*,:before,:after{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--bg)}body{background:var(--bg);color:var(--fg);font-family:var(--sans);-webkit-font-smoothing:antialiased;margin:0;font-weight:300;overflow-x:hidden}a{color:inherit}::selection{background:var(--lime);color:var(--bg)}.webgl{z-index:0;inset:0;position:fixed!important}.nav{z-index:10;padding:22px var(--pad);mix-blend-mode:difference;justify-content:space-between;align-items:center;display:flex;position:fixed;inset:0 0 auto}.nav a{letter-spacing:.02em;font-size:14px;text-decoration:none}.logo{font-weight:500}.nav nav{gap:clamp(14px,3vw,36px);display:flex}.nav nav a{opacity:.55;transition:opacity .3s}.nav nav a:hover,.nav nav a.on{opacity:1}.progress{background:var(--fg);transform-origin:0;height:1px;position:absolute;bottom:0;left:0;right:0;transform:scaleX(0)}main{z-index:1;pointer-events:none;position:relative}main a,main .project-text,main .tags{pointer-events:auto}.panel{height:100vh;padding:0 var(--pad);flex-direction:column;justify-content:center;display:flex}.eyebrow{text-transform:uppercase;letter-spacing:.16em;color:var(--muted);margin:0 0 20px;font-size:12px}h1,h2{font-family:var(--serif);letter-spacing:-.02em;margin:0;font-weight:400;line-height:.95}h1 em,h2 em{color:var(--lime);font-style:italic}h1{max-width:11ch;font-size:clamp(52px,9vw,150px)}.lead{max-width:38ch;color:var(--muted);margin:32px 0 0;font-size:clamp(16px,1.4vw,19px);line-height:1.55}.hero{position:relative}.scroll-hint{bottom:32px;left:var(--pad);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);align-items:center;gap:12px;font-size:12px;text-decoration:none;display:flex;position:absolute}.scroll-hint span{background:var(--line);width:1px;height:36px;position:relative;overflow:hidden}.scroll-hint span:after{content:"";background:var(--fg);animation:2s ease-in-out infinite drip;position:absolute;inset:0}@keyframes drip{0%{transform:translateY(-100%)}60%,to{transform:translateY(100%)}}.project.right{align-items:flex-end}.project-text{opacity:0;max-width:420px;transition:opacity .8s,transform .8s cubic-bezier(.2,.7,.2,1);transform:translateY(40px)}.is-active .project-text,.is-active .about-text,.contact.is-active>*{opacity:1;transform:none}.project h2{margin-bottom:20px;font-size:clamp(44px,5.5vw,88px)}.project p{color:#bdb9b2;line-height:1.6}.num{color:var(--accent);margin-right:8px}.tags{flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0;list-style:none;display:flex}.tags li{border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:6px 12px;font-size:12px}.link{border-bottom:1px solid var(--accent,var(--fg));gap:8px;margin-top:28px;padding-bottom:4px;font-size:14px;text-decoration:none;display:inline-flex}.link span{transition:transform .3s}.link:hover span{transform:translate(3px,-3px)}.about-text{opacity:0;max-width:560px;transition:opacity .8s,transform .8s cubic-bezier(.2,.7,.2,1);transform:translateY(40px)}.about-text p{color:#bdb9b2;line-height:1.65}.about-text p.big{font-family:var(--serif);color:var(--fg);margin-top:0;font-size:clamp(26px,2.6vw,38px);line-height:1.2}.contact{text-align:center;align-items:center;position:relative}.contact>*{opacity:0;transition:opacity .8s,transform .8s cubic-bezier(.2,.7,.2,1);transform:translateY(30px)}.contact h2{font-size:clamp(52px,8vw,128px)}.mail{border-bottom:1px solid var(--lime);margin-top:40px;padding-bottom:6px;font-size:clamp(18px,2vw,26px);text-decoration:none}.socials{gap:24px;margin:32px 0 0;padding:0;font-size:14px;list-style:none;display:flex}.socials a{color:var(--muted);text-decoration:none}.socials a:hover{color:var(--fg)}.contact footer{color:var(--muted);font-size:12px;position:absolute;bottom:28px}@media (width<=819px){.panel{height:100svh}.hero{justify-content:flex-end;padding-bottom:120px}.project,.project.right,.about{justify-content:flex-end;align-items:flex-start;padding-bottom:48px}.project-text,.about-text{background:linear-gradient(#0b0b0d00,#0b0b0dd9)}.project h2{font-size:44px}.nav nav a:not(:last-child){display:none}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.project-text,.about-text,.contact>*{transition:none}}
