:root{--ink:#09090c;--panel:#111116;--line:rgba(255,255,255,.1);--accent:#7b8cff;--text:rgba(255,255,255,.72);--dim:rgba(255,255,255,.45)}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;background:var(--ink)}
body{font:400 1rem/1.6 Inter,system-ui,sans-serif;color:var(--text);background:var(--ink);-webkit-font-smoothing:antialiased}
section[id]{scroll-margin-top:4.5rem}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;padding:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
::selection{background:var(--accent);color:var(--ink)}
h1,h2,h3,.eyebrow,.btn,nav a{font-family:"Space Grotesk",Inter,sans-serif}
h1,h2,h3{color:#fff;text-transform:uppercase;line-height:.95;letter-spacing:-.01em}
h2{font-size:clamp(2.6rem,8vw,6rem);margin:.6rem 0 0}
h3{font-size:1.4rem}
.eyebrow{font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--accent)}
.wrap{max-width:1280px;margin:0 auto;padding:7rem 1.25rem}
.alt{background:rgba(17,17,22,.5);border-block:1px solid var(--line)}
.lead{max-width:40rem;margin-top:1.5rem;font-size:1.15rem;color:var(--dim)}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.06;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;z-index:200;background:var(--accent);color:var(--ink);padding:.5rem 1rem;border-radius:4px}
/* nav */
header{position:fixed;inset:0 0 auto;z-index:50;background:rgba(9,9,12,.8);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
nav{max-width:1280px;margin:0 auto;padding:1rem 1.25rem;display:flex;justify-content:space-between;align-items:center}
.logo{font:700 .85rem "Space Grotesk";letter-spacing:.25em;color:#fff}.logo b{color:var(--accent)}
nav ul{display:none;gap:2.2rem}
nav ul a{font-size:.72rem;letter-spacing:.25em;text-transform:uppercase;color:var(--dim);transition:color .2s}
nav ul a:hover{color:#fff}
#m{position:absolute;opacity:0}
.burger{display:flex;flex-direction:column;gap:6px;padding:.6rem;cursor:pointer}
.burger i{width:24px;height:1px;background:#fff;transition:transform .3s}
#m:checked~.burger i:first-child{transform:translateY(3.5px) rotate(45deg)}
#m:checked~.burger i:last-child{transform:translateY(-3.5px) rotate(-45deg)}
#m:focus-visible~.burger{outline:2px solid var(--accent)}
#m:checked~ul{display:flex;flex-direction:column;position:absolute;inset:100% 0 auto;height:calc(100dvh - 3.9rem);justify-content:center;padding:0 2rem;gap:1.2rem;background:var(--ink)}
#m:checked~ul a{font-size:2.8rem;color:#fff;letter-spacing:-.01em}
@media(min-width:800px){nav ul{display:flex}.burger{display:none}}
/* hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;padding:6rem 1.25rem 3rem}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse at center,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse at center,#000 20%,transparent 75%)}
.hero::after{content:"";position:absolute;width:70vmax;height:70vmax;right:-25%;top:15%;background:radial-gradient(circle,rgba(123,140,255,.33),transparent 65%);animation:drift 18s ease-in-out infinite alternate}
.hero .in{position:relative;z-index:1;max-width:1280px;width:100%;margin:0 auto}
.hero .in{display:grid;gap:3rem;align-items:center}
.portrait{position:relative;width:min(72%,300px);aspect-ratio:3/4;opacity:0;animation:fade 1s ease 1.6s forwards}
.portrait::before{content:"";position:absolute;inset:0;border:1px solid var(--accent);border-radius:1.5rem;transform:translate(.9rem,.9rem);opacity:.5}
.portrait>img,.portrait>.ph{position:relative;display:block;width:100%;height:100%;object-fit:cover;border:1px solid var(--line);border-radius:1.5rem;overflow:hidden}
.portrait>.ph{place-items:center;text-align:center;padding:1rem;background:radial-gradient(circle at 70% 25%,rgba(123,140,255,.3),transparent 55%),linear-gradient(135deg,#1a1a26,#0b0b10)}
@media(min-width:900px){.hero .in{grid-template-columns:1fr clamp(240px,28vw,380px);gap:4rem}.hero h1{font-size:clamp(4rem,12vw,10rem)}.portrait{width:100%;justify-self:end}}
h1{font-size:clamp(4.5rem,21vw,14rem);line-height:.88}
h1 span{display:block;overflow:hidden}h1 span b{display:block;font-weight:700;transform:translateY(105%);animation:rise 1s cubic-bezier(.2,.7,.2,1) 1s forwards}
h1 span:nth-child(2) b{animation-delay:1.15s}
.sub{opacity:0;animation:fade 1s ease 1.5s forwards;margin-top:2rem;max-width:42rem}
.sub .t{font:500 .85rem "Space Grotesk";letter-spacing:.25em;text-transform:uppercase;color:#fff}
.sub .s{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-top:.5rem}
.sub p.d{margin-top:1.4rem;font-size:1.15rem}
.btns{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2rem}
.btn{display:inline-block;border:1px solid var(--line);border-radius:99px;padding:.95rem 1.8rem;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:#fff;transition:.3s}
.btn:hover{border-color:var(--accent);transform:translateY(-2px)}
.btn.p{background:var(--accent);border-color:var(--accent);color:var(--ink)}.btn.p:hover{background:#fff;border-color:#fff}
.intro{position:fixed;inset:0;z-index:100;background:var(--ink);display:grid;place-items:center;pointer-events:none;animation:out .8s ease .9s forwards}
.intro span{font:500 .75rem "Space Grotesk";letter-spacing:.5em;color:var(--accent)}
/* work */
.cat{margin-top:5rem}.cat:first-of-type{margin-top:3.5rem}
.cat>h3{display:flex;gap:1rem;align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:1rem;margin-bottom:1.5rem;font-size:.85rem;letter-spacing:.25em}
.grid{display:grid;gap:1.25rem}
.card{border:1px solid var(--line);border-radius:1rem;background:var(--panel);overflow:hidden}
.media{position:relative;aspect-ratio:16/9;overflow:hidden}
.media>img,.media>.ph{width:100%;height:100%;object-fit:cover;transition:transform .9s ease-out}
.card:hover .media>*:first-child{transform:scale(1.05)}
.ph{display:grid;place-items:start end;padding:1.2rem;background:linear-gradient(135deg,#1a1a26,#0d0d12 60%);font:500 .6rem "Space Grotesk";letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.3)}
.media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--ink),rgba(9,9,12,.3) 55%,transparent)}
.cap{position:absolute;inset:auto 0 0;padding:1.2rem 1.4rem;z-index:1}
.cap h3{margin-top:.5rem;font-size:clamp(1.5rem,5vw,2rem)}
.body{padding:1.2rem 1.4rem 1.4rem}.body p{font-size:.9rem;color:var(--dim)}
.link{display:inline-block;margin-top:1rem;font:500 .72rem "Space Grotesk";letter-spacing:.2em;text-transform:uppercase;color:#fff}
a.link:hover{color:var(--accent)}.off{color:rgba(255,255,255,.3)}
.list a{display:flex;justify-content:space-between;padding:1rem 0;border-bottom:1px solid var(--line);font:500 1.15rem "Space Grotesk";color:#fff;transition:color .2s}
.list a:hover{color:var(--accent)}.list{border-top:1px solid var(--line)}
@media(min-width:800px){.grid{grid-template-columns:1fr 1fr}.grid .wide{grid-column:span 2}.grid .wide .media{aspect-ratio:21/9}.list a{font-size:1.5rem}}
/* carousel */
.car{margin-top:0}
.track{display:flex;gap:1.25rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:.25rem;overscroll-behavior-x:contain}
.track::-webkit-scrollbar{display:none}
.track:focus-visible{outline-offset:6px;border-radius:1rem}
.track>li{flex:0 0 86%;scroll-snap-align:start;min-width:0}
.track .card{height:100%}
.media.vid::after{display:none}
.card:hover .media.vid>*:first-child{transform:none}
.yt{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:#000;cursor:pointer;display:block}
.yt img{width:100%;height:100%;object-fit:cover;display:block;opacity:.85;transition:transform .9s ease-out,opacity .3s}
.yt:hover img{transform:scale(1.04);opacity:1}
.yt .play{position:absolute;left:50%;top:50%;width:4.2rem;height:4.2rem;margin:-2.1rem 0 0 -2.1rem;border-radius:50%;background:rgba(9,9,12,.55);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.35);transition:.3s}
.yt .play::after{content:"";position:absolute;left:1.65rem;top:1.25rem;border-left:1.1rem solid #fff;border-block:.85rem solid transparent}
.yt:hover .play{background:var(--accent);border-color:var(--accent);transform:scale(1.08)}
.yt:hover .play::after{border-left-color:var(--ink)}
.media.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.body h3{font-size:1.25rem;margin:.5rem 0 .6rem;line-height:1.05}
.body .link{margin-top:1rem}
.car-nav{display:flex;justify-content:space-between;align-items:center;margin-top:1.25rem}
.car-nav[hidden]{display:none}
.count{font:500 .72rem "Space Grotesk";letter-spacing:.3em;color:var(--dim)}
.car-nav>div{display:flex;gap:.6rem}
.cb{width:3rem;height:3rem;border-radius:50%;border:1px solid var(--line);background:none;color:#fff;font:500 1.1rem "Space Grotesk";cursor:pointer;transition:.3s}
.cb:hover:not(:disabled){border-color:var(--accent);background:var(--accent);color:var(--ink)}
.cb:disabled{opacity:.3;cursor:default}
@media(min-width:800px){.track>li{flex-basis:calc(50% - .625rem)}}
/* craft */
.rail{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:1rem;margin-top:3.5rem}
.rail li{flex:0 0 78%;scroll-snap-align:start}
.tile{display:flex;flex-direction:column;justify-content:space-between;aspect-ratio:4/5;padding:1.5rem;border:1px solid var(--line);border-radius:1rem;background:linear-gradient(135deg,#1a1a26,#0d0d12 60%);transition:border-color .4s}
.tile:hover,.tile:focus-visible{border-color:rgba(123,140,255,.6)}
.tile{position:relative;overflow:hidden}
.tile>.ph,.tile>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;place-items:center;text-align:center;transition:transform .9s ease-out}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(9,9,12,.92),rgba(9,9,12,.25) 60%,transparent)}
.tile>span,.tile>div:not(.ph){position:relative;z-index:1}
.tile:hover>.ph,.tile:hover>img,.tile:focus-visible>.ph,.tile:focus-visible>img{transform:scale(1.05)}
.tile h3{font-size:1.7rem}.tile p{font-size:.9rem;color:var(--dim);margin-top:.8rem}
@media(min-width:800px){.rail{display:grid;grid-template-columns:repeat(3,1fr);overflow:visible}.tile p{max-height:0;opacity:0;overflow:hidden;transition:.5s}.tile:hover p,.tile:focus-visible p{max-height:8rem;opacity:1}}
/* ai */
.flow{display:grid;gap:.75rem;margin-top:3.5rem}
.flow li{background:var(--panel);border:1px solid var(--line);border-radius:.8rem;padding:1.5rem;position:relative;font:500 1.1rem "Space Grotesk";text-transform:uppercase;color:#fff}
.flow li .eyebrow{display:block;margin-bottom:1.5rem}
.flow li:not(:last-child)::after{content:"↓";position:absolute;left:50%;bottom:-1.1rem;color:var(--accent);z-index:1;background:var(--ink);line-height:1.2rem;padding:0 .3rem}
@media(min-width:800px){.flow{grid-template-columns:repeat(4,1fr)}.flow li:not(:last-child)::after{content:"→";left:auto;right:-.95rem;bottom:auto;top:50%}}
.tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem}
.tags li{border:1px solid var(--line);border-radius:99px;padding:.4rem .9rem;font-size:.85rem;color:var(--text);transition:.2s}
.tags li:hover{border-color:var(--accent);background:rgba(123,140,255,.1);color:#fff}
.tags.big{margin-top:2.5rem}.tags.big li{font:500 .72rem "Space Grotesk";letter-spacing:.15em;text-transform:uppercase;padding:.55rem 1rem}
/* xr */
.xr{position:relative;margin-top:3.5rem;aspect-ratio:4/5;border:1px solid var(--line);border-radius:1.5rem;overflow:hidden;background:radial-gradient(circle at 70% 30%,rgba(123,140,255,.3),transparent 55%),linear-gradient(135deg,#1a1a26,#0b0b10)}
.xr .ph{position:absolute;inset:0;background:none}
.xr .tags{position:absolute;inset:auto 0 0;padding:1.4rem;margin:0}
.xr .tags li{background:rgba(9,9,12,.5);backdrop-filter:blur(10px);border-color:rgba(255,255,255,.2);color:#fff;font:500 .72rem "Space Grotesk";letter-spacing:.15em;text-transform:uppercase;padding:.55rem 1rem}
@media(min-width:800px){.xr{aspect-ratio:21/9}}
@supports(animation-timeline:view()){.xr::before{content:"";position:absolute;inset:-15%;background:radial-gradient(circle at 30% 70%,rgba(123,140,255,.25),transparent 50%);animation:par linear both;animation-timeline:view()}}
/* ux */
.mock{border:1px solid var(--line);border-radius:.8rem;background:var(--ink);overflow:hidden;box-shadow:0 30px 60px -30px #000}
.bar{display:flex;gap:6px;padding:.75rem 1rem;border-bottom:1px solid var(--line)}.bar i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.2)}
.mock .ph{aspect-ratio:16/10;place-items:center}.mock img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
figcaption{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;margin-top:1rem}
figcaption b{font:500 1.25rem "Space Grotesk";color:#fff}figcaption .link{margin:0;flex:none}
/* experience / about */
.job{display:grid;gap:2.5rem;margin-top:3.5rem}
.job h3{font-size:clamp(2rem,6vw,2.6rem);margin:.7rem 0}
.tl{border-left:1px solid var(--line);padding-left:2rem}
.tl li{position:relative;padding-bottom:2.2rem}.tl li:last-child{padding-bottom:0}
.tl li::before{content:"";position:absolute;left:calc(-2rem - 5px);top:.5rem;width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 14px var(--accent)}
.tl h4{font:500 1.1rem "Space Grotesk";color:#fff}.tl p{margin-top:.4rem;color:var(--dim)}
.two{display:grid;gap:3rem}.two p+p{margin-top:1.2rem}.two .txt{font-size:1.1rem}
.edu{margin-top:3rem}.edu h3{font-size:.85rem;letter-spacing:.25em;margin-bottom:1.5rem}
.edu li b{display:block;font:500 1.1rem "Space Grotesk";color:#fff;margin-top:.2rem}.edu li span{font-size:.9rem;color:var(--dim)}
@media(min-width:800px){.job{grid-template-columns:1fr 2fr}.two{grid-template-columns:1fr 1fr}}
/* skills */
.sk{display:grid;gap:1rem;margin-top:3.5rem}
.sk div{border:1px solid var(--line);border-radius:1rem;padding:1.5rem;transition:border-color .3s}.sk div:hover{border-color:rgba(123,140,255,.6)}
.sk h3{font-size:.85rem;letter-spacing:.25em}.sk .tags{margin-top:1.2rem}
@media(min-width:800px){.sk{grid-template-columns:1fr 1fr}}
/* contact + footer */
.contact{position:relative;overflow:hidden;text-align:center;border-top:1px solid var(--line)}
.contact::before{content:"";position:absolute;left:50%;top:50%;width:60vmax;height:60vmax;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(123,140,255,.25),transparent 65%);animation:pulse 8s ease-in-out infinite alternate}
.contact .wrap{position:relative;padding-block:8rem}.contact h2{font-size:clamp(3.2rem,11vw,9rem)}
.contact p{margin-top:.5rem}.contact a:not(.btn):hover,footer a:hover{color:var(--accent)}
footer{border-top:1px solid var(--line);padding:3rem 1.25rem}
footer div{max-width:1280px;margin:0 auto;display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;align-items:flex-end}
footer strong{display:block;font:700 1.25rem "Space Grotesk";letter-spacing:.2em;color:#fff}footer small{color:var(--dim)}
/* motion */
@keyframes rise{to{transform:none}}@keyframes fade{to{opacity:1}}@keyframes out{to{opacity:0;visibility:hidden}}
@keyframes drift{to{transform:translate(-8%,10%) scale(1.15)}}@keyframes pulse{to{transform:translate(-50%,-50%) scale(1.2)}}
@keyframes par{from{transform:translateY(8%)}to{transform:translateY(-8%)}}
@keyframes rv{from{opacity:0;transform:translateY(28px)}}
@supports(animation-timeline:view()){.rv{animation:rv linear both;animation-timeline:view();animation-range:entry 0% entry 35%}}
@media(prefers-reduced-motion:reduce){html,.track{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}h1 span b,.sub,.portrait{transform:none;opacity:1}.intro{display:none}}