:root{
  --bg:#0b0a09; --ink:#ede6da; --muted:#8a8277; --line:#2a2622; --red:#e3241b;
  --serif:"Instrument Serif",Georgia,serif; --sans:"Geist",system-ui,sans-serif; --mono:"Geist Mono",ui-monospace,Consolas,monospace;
  --pad:clamp(20px,3.6vw,52px); --r:6px; --ease:cubic-bezier(.16,1,.3,1);
}
@view-transition{navigation:auto}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg)}
body{background:var(--bg);color:var(--ink);font:400 16px/1.5 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:lowercase}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
::selection{background:var(--red);color:var(--bg)}
.grain{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:50;opacity:.07;mix-blend-mode:overlay}

/* masked line reveal */
.r{display:block;overflow:hidden}
.r>span{display:block;transform:translateY(105%);transition:transform 1.1s var(--ease)}
.ready .r>span,.page .r>span{transform:none}

/* ---------- home ---------- */
.home{height:100svh;overflow:hidden;
  background:radial-gradient(60% 55% at 50% 42%,#1d1210 0%,var(--bg) 70%)}
#gl{position:fixed;inset:0;width:100%;height:100%;display:block}

.loader{position:fixed;inset:0;z-index:20;pointer-events:none;padding:var(--pad);display:flex;flex-direction:column;justify-content:space-between}
.l-top{display:flex;justify-content:space-between;color:var(--muted)}
.l-top span:last-child::after{content:"";display:inline-block;width:6px;height:6px;margin-left:8px;border-radius:50%;background:var(--red);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.l-count{font:400 clamp(96px,22vw,320px)/.8 var(--serif);letter-spacing:-.04em;overflow:hidden;font-variant-numeric:tabular-nums}
.l-count span{display:block;transition:transform 1s var(--ease)}
.l-bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--line)}
.l-bar i{display:block;height:100%;background:var(--red);transform:scaleX(0);transform-origin:left}
.ready .loader .l-count span{transform:translateY(-100%)}
.ready .loader .l-top,.ready .loader .l-bar{opacity:0;transition:opacity .5s}

.top{position:fixed;top:0;left:0;right:0;z-index:10;display:flex;justify-content:space-between;padding:var(--pad);color:var(--muted)}
.top b{color:var(--ink);font-weight:400}

.stage{position:fixed;left:0;right:0;bottom:0;z-index:10;padding:var(--pad);
  display:grid;grid-template-columns:1fr minmax(320px,440px);gap:32px;align-items:end}
.name{font:400 clamp(88px,13vw,210px)/.82 var(--serif);letter-spacing:-.045em;margin-left:-.04em}
.sub{margin-top:18px;color:var(--muted);font-size:clamp(15px,1.25vw,18px);max-width:34ch}
.sub em{font-family:var(--serif);font-size:1.25em;color:var(--ink)}
.ready .sub .r:nth-child(1)>span{transition-delay:.12s}
.ready .sub .r:nth-child(2)>span{transition-delay:.18s}

.links{display:flex;flex-direction:column;position:relative}
.links::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line);transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--ease) .2s}
.ready .links::before{transform:none}
.btn{position:relative;display:grid;grid-template-columns:34px 1fr auto 24px;align-items:center;gap:10px;
  padding:20px 14px 20px 4px;border-bottom:1px solid var(--line);overflow:hidden;isolation:isolate;
  opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease),color .35s}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--red);transform:scaleY(0);transform-origin:bottom;transition:transform .45s var(--ease)}
.btn .k{color:var(--muted);transition:color .35s}
.btn .l{font:400 clamp(26px,2.3vw,34px)/1 var(--serif);letter-spacing:-.01em}
.btn .h{color:var(--muted);transition:color .35s}
.btn .ar{font-size:18px;text-align:right;transition:transform .45s var(--ease)}
.btn:hover::before,.btn:focus-visible::before{transform:scaleY(1)}
.btn:hover .k,.btn:hover .h{color:rgba(11,10,9,.7)}
.btn:hover{color:var(--bg)}
.btn:hover .ar{transform:translate(3px,-3px)}
.btn:last-child:hover .ar{transform:translateX(5px)}
.ready .btn{opacity:1;transform:none}
.ready .btn:nth-child(1){transition-delay:.25s,.25s,0s}
.ready .btn:nth-child(2){transition-delay:.33s,.33s,0s}
.ready .btn:nth-child(3){transition-delay:.41s,.41s,0s}
.ready .btn:hover{transition-delay:0s}

.no-gl.home{background:radial-gradient(60% 55% at 50% 40%,#2a1210 0%,var(--bg) 70%)}

@media (max-width:760px){
  .stage{grid-template-columns:1fr;gap:26px;padding-bottom:max(var(--pad),env(safe-area-inset-bottom))}
  .name{font-size:clamp(84px,27vw,140px)}
  .btn{padding:17px 10px 17px 2px}
}

/* ---------- projects ---------- */
.page{min-height:100svh}
.p-head{display:flex;justify-content:space-between;align-items:center;padding:var(--pad);color:var(--muted)}
.p-head a{color:var(--ink);transition:color .25s}
.p-head a:hover{color:var(--red)}
.p-title{padding:clamp(40px,8vw,120px) var(--pad) clamp(40px,6vw,80px);display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap}
.p-title h1{font:400 clamp(64px,10vw,168px)/.85 var(--serif);letter-spacing:-.045em}
.p-title h1 em{color:var(--red)}
.p-title p{color:var(--muted);max-width:36ch}
.grid{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(40px,5vw,72px) clamp(20px,3vw,40px);padding:0 var(--pad) clamp(80px,10vw,140px)}
.card{opacity:0;transform:translateY(40px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.card.in{opacity:1;transform:none}
.card a{display:block}
.shot{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:var(--r);background:#141210;outline:1px solid var(--line);outline-offset:-1px}
.shot img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform 1.2s var(--ease),filter .6s}
.card a:hover .shot img{transform:scale(1.035)}
.meta{display:grid;grid-template-columns:1fr auto;gap:4px 16px;padding-top:16px;align-items:baseline}
.meta h2{font:400 clamp(28px,2.6vw,38px)/1 var(--serif);letter-spacing:-.01em}
.meta .tag{color:var(--muted);display:flex;align-items:center;gap:8px}
.meta .tag::before{content:"";width:6px;height:6px;border-radius:50%;background:#3ccf6e}
.meta .tag.dev::before{background:#e3a81b}
.meta .tag.soon::before{background:var(--red)}
.meta p{grid-column:1/-1;color:var(--muted);max-width:52ch}
.meta .host{grid-column:1/-1;color:var(--ink);margin-top:6px;display:inline-flex;gap:6px}
.card a:hover .host{color:var(--red)}
.p-foot{display:flex;justify-content:space-between;padding:var(--pad);border-top:1px solid var(--line);color:var(--muted)}
.p-foot a:hover{color:var(--ink)}
@media (max-width:760px){.grid{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){
  *,*::before{transition-duration:.01ms!important;animation:none!important}
}