body{margin:0}
img{max-width:100%}
:root{
  color-scheme:dark;
  --bg:#000000; --surface:#0D0D0D; --ink:#F5F5F5; --muted:#9A9A9A; --line:#262626;
  --accent:#FFFFFF; --accent-ink:#000000; --accent-soft:#1A1A1A; --hot:#FFFFFF;
  --term:#0A0A0A; --term-ink:#E5E5E5; --term-dim:#6B6B6B;
  --display:"Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body:"Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{background:var(--bg);color:var(--ink);font:16px/1.6 var(--body);-webkit-font-smoothing:antialiased}
.wrap{max-width:1680px;margin:0 auto;padding-inline:clamp(12px,1.8vw,24px)}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* nav */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(10px)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}
.logo{font:800 20px/1 var(--display);text-decoration:none;letter-spacing:-.02em}
.logo span{color:var(--muted)}
.tabs{display:flex;gap:6px}
.tabs a{position:relative;font:500 14px/1 var(--mono);text-decoration:none;padding:10px 14px;color:var(--muted);transition:color .2s}
.tabs a::before,.tabs a::after{position:absolute;top:50%;translate:0 -50%;color:var(--ink);opacity:0;transition:opacity .2s,transform .25s}
.tabs a::before{content:"[";left:0;transform:translateX(6px)}
.tabs a::after{content:"]";right:0;transform:translateX(-6px)}
.tabs a:hover{color:var(--ink)}
.tabs a:hover::before,.tabs a:hover::after{opacity:.35;transform:none}
.tabs a[aria-current="page"]{color:var(--ink);font-weight:600}
.tabs a[aria-current="page"]::before,.tabs a[aria-current="page"]::after{opacity:1;transform:none}
.tabs .n{color:var(--term-dim);margin-right:6px;font-weight:400}

main{padding-block:32px 48px}
section[data-page]{animation:rise .5s ease both}
@keyframes rise{from{transform:translateY(10px)}to{transform:none}}
@keyframes fadeup{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes txfade{to{opacity:0}}
.eyebrow{font:600 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
h1,h2,h3{font-family:var(--display);text-wrap:balance;margin:0}
p{margin:0}

/* home */
.hero{display:grid;grid-template-columns:1.15fr 1fr;gap:32px;align-items:center}
.hero h1{font-size:clamp(64px,10vw,150px);font-weight:800;line-height:.9;letter-spacing:-.045em;margin-block:18px 22px}
.hero h1 .cursor{display:inline-block;width:.09em;height:.78em;background:var(--hot);margin-left:.06em;vertical-align:-.02em;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.lede{font-size:clamp(18px,2.2vw,21px);color:var(--muted);max-width:46ch}
.lede strong{color:var(--ink);font-weight:600}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.btn{display:inline-flex;align-items:center;gap:8px;font:600 15px/1 var(--body);padding:14px 22px;border-radius:12px;text-decoration:none;border:1px solid var(--line);background:var(--surface);cursor:pointer;color:var(--ink);transition:transform .15s,border-color .15s}
.btn:hover{transform:translateY(-2px);border-color:var(--accent)}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}

.term{background:var(--term);color:var(--term-ink);border-radius:16px;font:13.5px/1.75 var(--mono);border:1px solid var(--line);overflow:hidden}
.term-bar{display:flex;gap:7px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.07)}
.term-bar i{width:11px;height:11px;border-radius:50%;background:#333}
.term-body{padding:18px 20px 22px;overflow-x:auto}
.term .p{color:#FFFFFF;font-weight:600}.term .d{color:var(--term-dim)}.term .k{color:#BDBDBD}.term .s{color:#E5E5E5}

/* about */
.about{display:grid;grid-template-columns:240px 1fr;gap:28px;align-items:center;margin-top:56px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:26px}
.about .shot{margin:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--term)}
#profile-photo{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.about h2{font-size:clamp(26px,3.4vw,38px);letter-spacing:-.03em;margin-block:12px 12px}
.about p{color:var(--muted);max-width:62ch}
.about p strong{color:var(--ink);font-weight:600}

.tracks{margin-top:56px}
.tracks-head{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:20px}
.tracks-head h2{font-size:clamp(30px,4vw,44px);letter-spacing:-.03em;line-height:1.05}
.tracks-head p{color:var(--muted);max-width:40ch}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.track{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:26px}
.track .verb{font:800 34px/1 var(--display);letter-spacing:-.03em}
.track .verb em{font-style:normal;color:var(--muted)}
.track p{color:var(--muted);margin-block:10px 18px;font-size:15px}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.chips li{font:500 13px/1 var(--mono);padding:8px 11px;border-radius:8px;background:var(--accent-soft);color:var(--ink)}

/* projects */
.page-head{max-width:720px;margin-bottom:26px}
.page-head h1{font-size:clamp(44px,8vw,84px);font-weight:800;letter-spacing:-.04em;line-height:.95;margin-block:14px 16px}
.page-head p{color:var(--muted);font-size:18px}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.filters button{font:500 14px/1 var(--body);padding:10px 16px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.projects{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px}
.proj{background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,border-color .2s}
.proj:hover{transform:translateY(-3px);border-color:var(--accent)}
.proj canvas,.proj-media{display:block;width:100%;height:150px;background:var(--term);object-fit:cover}
.proj-body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.proj-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.proj-top .meta{display:flex;align-items:center;gap:8px;min-width:0}
.tag{font:600 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.year{font:500 11px/1 var(--mono);color:var(--term-dim)}
.year::before{content:"·";margin-right:8px}
.sample{font:500 11px/1 var(--mono);color:var(--muted);border:1px dashed var(--line);padding:5px 8px;border-radius:6px}
.proj h3{font-size:24px;letter-spacing:-.02em}
.proj p{color:var(--muted);font-size:15px}
.stack{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:8px}
.stack span{font:500 12px/1 var(--mono);padding:6px 9px;border-radius:6px;border:1px solid var(--line);color:var(--muted)}
.note{margin-top:16px;font:13px/1.5 var(--mono);color:var(--muted)}

/* contact */
.contact{display:grid;grid-template-columns:1fr 1.1fr;gap:32px;align-items:center;min-height:56vh}
.links{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.row{display:flex;align-items:center;gap:16px;padding-block:18px;border-bottom:1px solid var(--line)}
.row .lbl{flex:none;width:70px;font:500 12px/1 var(--mono);color:var(--muted)}
.row a{flex:1;min-width:0;font:600 17px/1.3 var(--body);text-decoration:none;overflow-wrap:anywhere}
.row a:hover{text-decoration:underline}
.copy{flex:none;font:500 12px/1 var(--mono);padding:8px 10px;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer}
.copy:hover{color:var(--ink);border-color:var(--ink)}

/* 3D computer */
.pc-stage{position:relative;height:440px;perspective:1100px;display:grid;place-items:center;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.pc-float{transform-style:preserve-3d;animation:float 4s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-10px)}}
.pc{position:relative;width:0;height:0;transform-style:preserve-3d;transform:rotateX(-14deg) rotateY(-28deg)}
.pc.hop{animation:hop .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes hop{0%{translate:0 0}30%{translate:0 -34px;scale:1.03 .97}60%{translate:0 0;scale:1.06 .92}100%{translate:0 0;scale:1}}
.box{position:absolute;transform-style:preserve-3d}
.face{position:absolute;left:50%;top:50%;backface-visibility:hidden}
.f-front{background:#EFEFEF}.f-top{background:#FFFFFF}.f-right,.f-left{background:#CFCFCF}.f-back{background:#BDBDBD}.f-bottom{background:#8E8E8E}
.monitor .f-front{border-radius:10px;padding:18px 20px 0;display:flex;flex-direction:column;align-items:center;gap:10px;box-shadow:inset 0 -6px 0 rgba(0,0,0,.06)}
.monitor .f-right,.monitor .f-left,.monitor .f-top{background-image:repeating-linear-gradient(90deg,transparent 0 10px,rgba(0,0,0,.05) 10px 12px)}
.monitor .f-top{background-image:repeating-linear-gradient(0deg,transparent 0 10px,rgba(0,0,0,.05) 10px 12px)}
.kb .f-top{background:#F5F5F5;background-image:radial-gradient(circle at 50% 45%,#DADADA 0 5px,transparent 6px);background-size:18px 16px;background-position:6px 4px}
.kb .f-front,.base .f-front,.neck .f-front{background:#E2E2E2}

.screen{position:relative;width:100%;height:150px;border-radius:14px;background:#050505;overflow:hidden;box-shadow:inset 0 0 0 4px #D8D8D8,inset 0 0 30px rgba(255,255,255,.08);font:600 12px/1.55 var(--mono);color:#F2F2F2;padding:12px 14px;text-shadow:0 0 6px rgba(255,255,255,.55)}
.screen::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.045) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55))}
.scr-bar{display:flex;justify-content:space-between;font-size:9px;color:#8A8A8A;text-shadow:none;border-bottom:1px dashed #333;padding-bottom:5px;margin-bottom:6px;letter-spacing:.06em}
.scr-out div{white-space:pre-wrap;color:#BDBDBD}
.scr-out .ok{color:#fff}
.prompt .p{color:#8A8A8A}
.caret{display:inline-block;width:7px;height:13px;background:#F2F2F2;vertical-align:-2px;margin-left:1px;box-shadow:0 0 8px rgba(255,255,255,.8);animation:blink .9s steps(1) infinite}

.faceplate{display:flex;align-items:center;justify-content:space-between;width:100%;padding-inline:6px}
.mug{display:flex;align-items:center;gap:9px}
.eye{position:relative;width:12px;height:12px;border-radius:50%;background:#111;transition:height .12s,border-radius .12s}
.eye i{position:absolute;width:4px;height:4px;border-radius:50%;background:#fff;left:2px;top:2px;transition:transform .12s}
.pc.blink .eye{height:2px}
.pc.awake .eye{height:7px;border-radius:12px 12px 2px 2px}
.pc.awake .eye i{opacity:0}
.smile{width:12px;height:6px;border:2.5px solid #111;border-top:0;border-radius:0 0 12px 12px;transition:width .2s,height .2s}
.pc.awake .smile{width:16px;height:9px;background:#111}
.blush{width:9px;height:4px;border-radius:50%;background:#C8C8C8;opacity:0;transition:opacity .2s}
.pc.awake .blush{opacity:1}
.slot{width:48px;height:5px;border-radius:3px;background:#C6C6C6;box-shadow:inset 0 1px 1px rgba(0,0,0,.25)}
.led{width:6px;height:6px;border-radius:50%;background:#9A9A9A}
.pc.awake .led{background:#fff;box-shadow:0 0 8px #fff}
.pc-shadow{position:absolute;left:50%;bottom:40px;width:300px;height:40px;margin-left:-150px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.12),transparent);animation:shadow 4s ease-in-out infinite}
@keyframes shadow{50%{transform:scale(.88);opacity:.7}}
.screen,.kb{cursor:pointer}
.screen{transition:box-shadow .25s}
.screen:hover{box-shadow:inset 0 0 0 4px #D8D8D8,inset 0 0 40px rgba(255,255,255,.2),0 0 0 3px rgba(255,255,255,.35)}
.kb .f-top{transition:filter .2s}
.kb:hover .f-top{filter:brightness(1.08) contrast(1.15)}
.kb.press{translate:0 3px}
.zoom{position:fixed;z-index:60;background:#050505;overflow:hidden;display:grid;place-items:center;font:600 clamp(14px,2vw,20px)/1.4 var(--mono);color:#F2F2F2;text-shadow:0 0 8px rgba(255,255,255,.6);pointer-events:none}
.zoom::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 50%,rgba(0,0,0,.6))}
.zoom .p{color:#8A8A8A}
.zoom .line{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:#fff;box-shadow:0 0 24px 4px rgba(255,255,255,.7);opacity:0}
.pc-hint{position:absolute;bottom:4px;left:0;right:0;text-align:center;font:500 12px/1 var(--mono);color:var(--term-dim)}
.heart{position:absolute;font:700 16px/1 var(--mono);color:#fff;pointer-events:none;animation:heart 1s ease-out forwards}
@keyframes heart{from{transform:translate(-50%,0) scale(.6);opacity:1}to{transform:translate(-50%,-70px) scale(1.2);opacity:0}}

/* projects transition */
.tx{position:fixed;inset:0;z-index:50;background:var(--bg);display:grid;place-items:center;font:500 clamp(16px,2.4vw,22px)/1.4 var(--mono);color:var(--ink);padding-inline:16px}
.tx .cmd .d{color:var(--term-dim)}
.tx .cmd .c{display:inline-block;width:.6em;height:1.1em;background:var(--ink);vertical-align:-.2em;margin-left:2px;animation:blink .6s steps(1) infinite}
.tx .cmd{position:relative;z-index:1}
.tx .shred{position:absolute;inset:0;display:flex;overflow:hidden}
.tx .shred i{flex:1 0 auto;width:calc(100% / 12 + 1px);background:var(--bg)}
.tx.go{background:transparent}
.tx.go .cmd{animation:cmdoff .16s steps(2) forwards}
.tx.go .shred i{box-shadow:inset 1px 0 0 rgba(245,245,245,.08);will-change:transform;animation:shredup .42s cubic-bezier(.65,.02,.25,1) both;animation-delay:calc(130ms + var(--i) * 30ms)}
.tx.go .shred i:nth-child(even){animation-name:shreddown}
@keyframes cmdoff{to{opacity:0;transform:translateY(-8px)}}
@keyframes shredup{to{transform:translateY(-101%)}}
@keyframes shreddown{to{transform:translateY(101%)}}
.proj.in{animation:cardin .5s cubic-bezier(.2,.7,.2,1) both}
@keyframes cardin{from{transform:translateY(24px) scale(.98);opacity:.001}to{transform:none;opacity:1}}

footer{padding-block:32px 40px;overflow:hidden}
.sig-cmd{font:500 13px/1 var(--mono);color:var(--muted);margin-bottom:14px}
.sig{font:800 clamp(26px,4.8vw,58px)/.95 var(--display);letter-spacing:-.04em;margin:0;display:flex;flex-wrap:wrap;column-gap:.25em}
.sig .w{display:inline-flex}
.sig .ch{display:inline-block}
.sig.armed .ch{opacity:0}
.sig.play .ch{animation:blockpop .7s cubic-bezier(.3,1.5,.5,1) both;animation-delay:calc(var(--i) * 45ms)}
@keyframes blockpop{
  0%{opacity:0;transform:translateY(60%) scaleY(.2);background:var(--ink);color:transparent}
  35%{opacity:1;transform:translateY(-12%) scaleY(1.1);background:var(--ink);color:transparent}
  60%{transform:translateY(0) scaleY(1);background:var(--ink);color:transparent}
  61%{background:transparent;color:var(--ink)}
  100%{opacity:1;transform:none;background:transparent;color:var(--ink)}
}
.sig-ok{margin-top:14px;font:500 13px/1 var(--mono);color:var(--muted)}
.foot-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:34px;padding-top:20px;border-top:1px solid var(--line)}
.foot-copy{font:500 13px/1.4 var(--mono);color:var(--muted)}
.foot-social{display:flex;gap:6px}
.foot-social a{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;border:1px solid var(--line);color:var(--muted);transition:color .2s,border-color .2s}
.foot-social a:hover{color:var(--ink);border-color:var(--ink)}
.foot-social svg{width:16px;height:16px;fill:currentColor}
.foot-social .flap{fill:none;stroke:var(--bg);stroke-width:2}
.to-top{font:500 13px/1 var(--mono);color:var(--muted);background:transparent;border:1px solid var(--line);border-radius:9px;padding:10px 13px;cursor:pointer;transition:color .2s,border-color .2s}
.to-top:hover{color:var(--ink);border-color:var(--ink)}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);font:600 14px/1 var(--body);padding:12px 18px;border-radius:10px}

@media (max-width:820px){
  .hero,.contact{grid-template-columns:1fr;gap:36px}
  .grid3,.projects{grid-template-columns:1fr}
  .tracks{margin-top:44px}
  .about{grid-template-columns:1fr;gap:22px;margin-top:44px}
  .about .shot{max-width:220px}
}
@media (max-width:480px){
  .nav{flex-direction:column;align-items:stretch}
  .logo{text-align:center}
  .tabs{justify-content:center;gap:0}.tabs a{padding-inline:12px;font-size:13px}.tabs .n{display:none}
  main{padding-block:24px 40px}
}
/* small screens: simple, lightweight motion only */
@media (max-width:600px){
  /* keep: fades, the blinking cursors, the gentle float.
     drop: hover effects, pointer-tracked 3D, the shredding page wipe. */
  .term,.proj canvas,.tracks-head p{display:none}
  .hero>div,.track{animation:fadeup .5s ease both}
  .track:nth-child(2){animation-delay:.08s}
  .track:nth-child(3){animation-delay:.16s}
  .tx .shred{display:none}
  .tx.go{background:var(--bg);animation:txfade .3s ease forwards}
  .tx.go .cmd{animation-duration:.2s}
  .proj.in{animation-duration:.38s}
  .btn:hover,.proj:hover{transform:none}
  .screen:hover{box-shadow:inset 0 0 0 4px #D8D8D8,inset 0 0 30px rgba(255,255,255,.08)}
  .kb:hover .f-top{filter:none}
  .pc-stage{height:340px}
  .pc-float{scale:.8}          /* on .pc it would fight the hop keyframes, which animate scale */
  .pc-shadow{width:220px;margin-left:-110px}
  .contact{min-height:0}
  .hero h1{font-size:64px;margin-block:12px 16px}
  .lede{font-size:17px}
  .cta .btn{flex:1 1 140px;justify-content:center;text-align:center}
  .tracks{margin-top:36px}
  .tracks-head h2{font-size:28px}
  .track,.proj-body,.about{padding:20px}
  .track,.proj,.about{border-radius:12px}
  .about{margin-top:36px}
  .about .shot{max-width:170px}
  .about h2{font-size:26px}
  .track .verb{font-size:28px}
  .page-head{margin-bottom:18px}
  .page-head h1{font-size:48px}
  .page-head p{font-size:16px}
  .filters{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}
  .filters button{flex:none}
  .row a{font-size:15px}
  .row .lbl{width:56px}
}
@media (max-width:430px){
  .cta .btn{flex-basis:100%}      /* three buttons stop fitting two-up; stack them instead of wrapping mid-label */
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}