@font-face{font-family:"Instrument Serif";src:url(fonts/InstrumentSerif-Regular.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(fonts/InstrumentSerif-Italic.woff) format("woff");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Geist;src:url(fonts/Geist.woff) format("woff");font-weight:100 900;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(fonts/GeistMono.woff) format("woff");font-weight:100 900;font-display:swap}

:root{
  --bg:#f4f5f7;
  --bg-2:#eceef2;
  --ink:#0b0b0f;
  --ink-2:rgba(11,11,15,.68);
  --ink-3:rgba(11,11,15,.56);
  --line:rgba(11,11,15,.09);
  --card:rgba(255,255,255,.62);
  --card-solid:#fff;
  --accent:#2563eb;
  --accent-soft:rgba(37,99,235,.12);
  --radius:24px;
  --gutter:clamp(16px,4vw,48px);
  --maxw:1240px;
  --serif:"Instrument Serif",ui-serif,Georgia,serif;
  --sans:Geist,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --shadow:0 1px 0 rgba(255,255,255,.9) inset,0 30px 60px -30px rgba(15,23,42,.22),0 8px 24px -12px rgba(15,23,42,.12);
}

*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{min-height:100vh;min-height:100dvh;color:var(--ink);background:var(--bg);font-family:var(--sans);font-size:16px;line-height:1.5;letter-spacing:-.01em;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}
em{font-style:italic}
::selection{background:var(--ink);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}
svg{display:block}

/* ---------- ambient background ---------- */
.bgfx{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.bgfx .grid{position:absolute;inset:-2px;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse 80% 60% at 50% 30%,#000 10%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 30%,#000 10%,transparent 75%);opacity:.55}
.bgfx .grain{position:absolute;inset:0;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- gate ---------- */
.gate{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:20px;background:var(--bg)}
.gate-card{width:min(380px,100%);padding:40px 28px 32px;border-radius:28px;display:flex;flex-direction:column;gap:14px;align-items:center;text-align:center;background:var(--card-solid);border:1px solid var(--line);box-shadow:var(--shadow)}
.gate-card h1{font:400 52px/1 var(--serif);letter-spacing:-.02em}
.gate-card p{color:var(--ink-2);font-size:15px;max-width:280px}
.gate-card label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.gate-card input{width:100%;min-height:48px;padding:12px 16px;border-radius:14px;border:1px solid rgba(11,11,15,.16);background:#f6f7f9;color:var(--ink);font:500 16px var(--sans);text-align:center;outline:none;transition:border-color .2s,background .2s}
.gate-card input:focus{border-color:var(--ink);background:#fff}
.gate-card button{width:100%;min-height:48px;border-radius:999px;border:0;background:var(--ink);color:#fff;font:500 15px var(--sans);cursor:pointer;transition:transform .2s var(--ease-out),opacity .2s}
.gate-card button:hover{transform:translateY(-1px)}
.gate-card button:active{transform:scale(.98)}
.gate-card button[disabled]{opacity:.6;cursor:progress}
.gate-msg{min-height:20px;font-size:13px;color:#b42318}
.gate-card.bad{animation:shake .5s cubic-bezier(.36,.07,.19,.97)}
@keyframes shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-8px)}40%,60%{transform:translateX(8px)}}
.gate-ring{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--ink);transform:scale(0);pointer-events:none}

/* ---------- shared ---------- */
.eyebrow,.block-num,.pnum,.tl-year,.c-lbl,.tb-chapter{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.card{position:relative;background:var(--card);backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);border:1px solid rgba(255,255,255,.8);outline:1px solid var(--line);outline-offset:-1px;border-radius:var(--radius);box-shadow:var(--shadow);padding:28px;overflow:hidden;isolation:isolate}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(420px circle at var(--mx,50%) var(--my,-20%),rgba(255,255,255,.85),transparent 45%);opacity:var(--glow,0);transition:opacity .4s;z-index:-1}
.card h3{font:400 30px/1.05 var(--serif);letter-spacing:-.015em}
.card h3 em,.block-title em,.hero-role em,.about-card em,.research em,.cta h2 em{color:var(--accent)}
.card p{color:var(--ink-2);font-size:15px}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tags span{font:500 12px/1 var(--mono);padding:7px 10px;border-radius:999px;background:rgba(11,11,15,.05);border:1px solid var(--line);color:var(--ink-2);white-space:nowrap}
.ico{width:28px;height:28px;fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-bottom:16px}

/* split text */
.w{display:inline-block;white-space:nowrap}
.c{display:inline-block;will-change:transform}
.mask{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .04em .12em;margin:0 -.04em -.12em}

/* ---------- progress + topbar ---------- */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:40;pointer-events:none}
.progress i{display:block;height:100%;background:var(--accent);transform-origin:0 50%;transform:scaleX(0)}
.topbar{position:fixed;top:12px;left:50%;translate:-50% 0;z-index:30;display:flex;align-items:center;gap:16px;padding:6px 6px 6px 18px;border-radius:999px;background:rgba(255,255,255,.7);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);border:1px solid rgba(255,255,255,.85);outline:1px solid var(--line);outline-offset:-1px;box-shadow:0 10px 30px -14px rgba(15,23,42,.25);width:max-content;max-width:calc(100% - 24px)}
.tb-name{font:400 20px/1 var(--serif);white-space:nowrap}
.tb-name em{color:var(--ink-3)}
.tb-chapter{display:flex;gap:8px;overflow:hidden;height:16px;line-height:16px;min-width:0}
.tb-num{color:var(--accent)}
.tb-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-cv{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border-radius:999px;background:var(--ink);color:#fff;font:500 14px var(--sans)}
.tb-cv svg,.btn-dark svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:120px var(--gutter) 96px;overflow:hidden}
.hero-inner{position:relative;width:100%;max-width:var(--maxw);margin:0 auto}
.hero-eyebrow{margin-bottom:28px}
.hero-name{font:400 clamp(84px,19vw,260px)/.86 var(--serif);letter-spacing:-.025em;display:flex;flex-direction:column}
.hn-line{display:block}
.hn-line.ghost{font-style:italic;color:transparent;-webkit-text-stroke:1.2px var(--ink);padding-left:.18em}
.hero-role{margin-top:36px;max-width:520px;font-size:clamp(17px,1.6vw,20px);color:var(--ink-2)}
.hero-actions{margin-top:32px;display:flex;flex-wrap:wrap;gap:12px}
.btn-dark,.btn-ghost{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 24px;border-radius:999px;font:500 15px var(--sans);transition:background .25s,box-shadow .25s}
.btn-dark{background:var(--ink);color:#fff;box-shadow:0 14px 30px -14px rgba(11,11,15,.6)}
.btn-ghost{background:rgba(255,255,255,.7);border:1px solid var(--line)}
.btn-ghost:hover{background:#fff}
.btn-ghost .arr{display:inline-block;transition:transform .3s var(--ease-out)}
.btn-ghost:hover .arr{transform:translateY(3px)}
.hero-orbs{position:absolute;inset:0;pointer-events:none}
.orb{position:absolute;border-radius:50%;filter:blur(2px)}
.orb-a{width:min(62vw,720px);aspect-ratio:1;right:-14vw;top:-10vh;background:radial-gradient(circle at 35% 35%,#fff 0%,#dfe6f3 38%,rgba(196,210,235,.0) 70%)}
.orb-b{width:min(34vw,380px);aspect-ratio:1;right:18vw;bottom:-6vh;background:radial-gradient(circle at 40% 30%,rgba(37,99,235,.22),rgba(37,99,235,0) 68%)}
.orb-c{width:min(22vw,240px);aspect-ratio:1;left:46vw;top:14vh;background:radial-gradient(circle at 35% 35%,#fff,rgba(220,226,236,.0) 70%);box-shadow:inset -12px -16px 30px rgba(15,23,42,.06)}
.scroll-cue{position:absolute;left:50%;bottom:28px;translate:-50% 0;display:flex;flex-direction:column;align-items:center;gap:10px;font:500 11px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.scroll-cue i{width:1px;height:44px;background:linear-gradient(var(--ink),transparent);transform-origin:top;animation:cue 2.2s var(--ease-out) infinite}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1);transform-origin:top}50.1%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- marquee ---------- */
.marquee{padding:22px 0;border-block:1px solid var(--line);background:rgba(255,255,255,.45);overflow:hidden}
.mq-row{display:flex;white-space:nowrap}
.mq-row+.mq-row{margin-top:6px}
.mq-track{display:flex;align-items:center;gap:28px;padding-right:28px;flex-shrink:0;font:400 clamp(30px,5vw,60px)/1.1 var(--serif);letter-spacing:-.02em}
.mq-track b{font:400 .5em var(--sans);color:var(--accent)}
.mq-row.rev .mq-track{color:var(--ink-3)}

/* ---------- blocks ---------- */
.block{max-width:var(--maxw);margin:0 auto;padding:clamp(88px,12vw,160px) var(--gutter) 0}
.block-head{display:grid;gap:14px;margin-bottom:40px}
.block-title{font:400 clamp(46px,7.4vw,104px)/.95 var(--serif);letter-spacing:-.015em}
.block-sub{color:var(--ink-2);max-width:420px}

/* bento */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.bento .card{display:flex;flex-direction:column;justify-content:space-between;gap:18px;min-height:220px}
.bento .wide{grid-column:span 2}
.about-card{grid-column:span 4;min-height:0!important;flex-direction:row!important;align-items:center;background:var(--ink)!important;border-color:transparent!important;outline-color:transparent!important}
.about-card p{color:rgba(255,255,255,.88)!important;font:400 clamp(26px,3.4vw,42px)/1.15 var(--serif);letter-spacing:-.015em;max-width:880px}
.about-card em{color:#8fb0ff!important}
.about-mark{width:64px;height:64px;flex-shrink:0;fill:none;stroke:#fff;stroke-width:1.4;stroke-linecap:round;opacity:.9}
.feat{grid-row:span 2;grid-column:span 2;background:linear-gradient(160deg,rgba(255,255,255,.85),rgba(232,238,250,.7))!important}
.feat h3{font-size:clamp(34px,3.6vw,48px)}
.stat .k{font:400 clamp(56px,6vw,80px)/1 var(--serif);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.stat .k em{font-size:.42em;color:var(--accent)}
.stat .l{font:500 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.stat .bar{height:4px;border-radius:4px;background:rgba(11,11,15,.08);overflow:hidden}
.stat .bar i{display:block;height:100%;width:100%;background:var(--ink);transform-origin:0 50%;transform:scaleX(var(--v))}
.cert-list,.lang-list{list-style:none;display:grid}
.cert-list li{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:12px 0;border-top:1px solid var(--line)}
.cert-list li:first-child{border-top:0;padding-top:4px}
.c-name{font:400 22px/1.15 var(--serif)}
.c-name em{color:var(--ink-3)}
.c-meta{grid-column:1;font-size:13px;color:var(--ink-3)}
.c-yr{grid-column:2;grid-row:1/3;align-self:center;font:500 13px var(--mono);color:var(--ink-2)}

/* work */
.work{max-width:none;padding-left:0;padding-right:0}
.work-pin{position:relative;padding-top:88px}
.work{padding-top:clamp(0px,calc(12vw - 88px),72px)}
.work .block-head{max-width:var(--maxw);margin:0 auto 40px;padding:0 var(--gutter)}
.work-count{display:flex;align-items:center;gap:10px;font:500 13px var(--mono);color:var(--ink-3)}
.wc-cur{color:var(--ink)}
.wc-bar{display:block;width:120px;height:2px;background:var(--line);overflow:hidden}
.wc-bar b{display:block;height:100%;background:var(--accent);transform-origin:0 50%;transform:scaleX(0)}
.work-viewport{overflow:hidden}
.work-track{display:flex;gap:16px;padding:0 var(--gutter);width:max-content}
.proj{position:relative;width:min(440px,78vw);min-height:440px;display:flex;flex-direction:column;gap:18px;padding:30px;border-radius:28px;background:var(--card-solid);border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden}
.proj:nth-child(even){background:linear-gradient(170deg,#fff,#eef2fa)}
.proj::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--bg);opacity:var(--shade,0);pointer-events:none}
.proj-top{display:flex;justify-content:space-between;align-items:flex-start}
.pbig{font:400 120px/.8 var(--serif);color:transparent;-webkit-text-stroke:1px rgba(11,11,15,.18);letter-spacing:-.04em}
.proj h3{font:400 clamp(32px,3vw,40px)/1.02 var(--serif);letter-spacing:-.02em;margin-top:auto}
.proj p{color:var(--ink-2);font-size:15px}

/* research */
.research{display:grid;grid-template-columns:auto 1fr;gap:28px;padding:clamp(28px,4vw,48px)}
.research-mark{font:400 clamp(120px,14vw,200px)/.7 var(--serif);color:var(--accent);transform-origin:50% 60%}
.research h3{font-size:clamp(30px,3.4vw,46px);margin:14px 0 16px}
.research p{max-width:640px;font-size:16px}

/* timeline */
.tl{position:relative;list-style:none;display:grid;gap:18px;padding-left:28px}
.tl-line{position:absolute;left:6px;top:8px;bottom:8px;width:2px;background:var(--line);border-radius:2px}
.tl-line i{position:absolute;inset:0;background:var(--accent);transform-origin:top;transform:scaleY(var(--p,0));border-radius:2px}
.tl-item{position:relative;display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:start}
.tl-node{position:absolute;left:-28px;top:24px;width:14px;height:14px;border-radius:50%;background:var(--bg);border:2px solid rgba(11,11,15,.25);transition:background .3s,border-color .3s,box-shadow .3s}
.tl-item.hit .tl-node{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 6px var(--accent-soft)}
.tl-year{padding-top:22px}
.tl-card{padding:22px 24px}
.tl-row{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-top:8px}
.tl-title{font:400 28px/1.05 var(--serif);letter-spacing:-.01em}
.tl-title small{display:block;margin-top:6px;font:400 14px/1.4 var(--sans);color:var(--ink-3);letter-spacing:0}
.tl-score{font:italic 400 34px/1 var(--serif);color:var(--accent);font-variant-numeric:tabular-nums;white-space:nowrap}

/* personal */
.personal{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.personal .card{display:flex;flex-direction:column;justify-content:space-between;gap:18px;min-height:200px}
.lang-list li{display:flex;justify-content:space-between;align-items:baseline;padding:10px 0;border-top:1px solid var(--line)}
.lang-list li:first-child{border-top:0}
.l-name{font:400 26px var(--serif)}
.l-prof{font:500 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}

/* cta */
.cta-wrap{padding:clamp(88px,12vw,160px) 0 0}
.cta{margin:0 auto;min-height:70vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:22px;padding:80px var(--gutter);background:var(--ink);color:#fff;clip-path:inset(0 var(--ci,16px) round var(--cr,32px));position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;width:70vmax;aspect-ratio:1;left:50%;top:50%;translate:-50% -50%;background:radial-gradient(circle,rgba(37,99,235,.35),transparent 60%);pointer-events:none}
.cta>*{position:relative}
.cta-eyebrow{color:rgba(255,255,255,.55)}
.cta h2{font:400 clamp(56px,10vw,150px)/.92 var(--serif);letter-spacing:-.02em}
.cta h2 em{color:#8fb0ff}
.cta p{max-width:460px;color:rgba(255,255,255,.72)}

/* contact */
.contact{padding-top:40px;padding-bottom:40px}
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pill{position:relative;display:grid;gap:8px;padding:22px 56px 22px 24px;min-height:44px;border-radius:20px;background:var(--card-solid);border:1px solid var(--line);box-shadow:var(--shadow);transition:transform .35s var(--ease-out),box-shadow .35s}
.pill:hover{transform:translateY(-3px);box-shadow:0 1px 0 #fff inset,0 30px 50px -24px rgba(15,23,42,.3)}
.c-val{font-size:15px;word-break:break-word}
.c-arr{position:absolute;right:22px;top:50%;translate:0 -50%;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:var(--bg-2);transition:background .3s,color .3s,transform .4s var(--ease-out)}
.pill:hover .c-arr{background:var(--ink);color:#fff;transform:rotate(45deg)}
.foot{margin-top:56px;text-align:center;font:500 12px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .bento{grid-template-columns:1fr 1fr}
  .about-card,.feat{grid-column:span 2}
  .feat{grid-row:auto}
  .contact-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .topbar{gap:10px;padding-left:14px}
  .tb-name{font-size:18px}
  .tb-label{display:none}
  .bento{grid-template-columns:1fr 1fr;gap:10px}
  .bento .wide,.about-card,.feat{grid-column:span 2}
  .bento .card{min-height:0;padding:22px}
  .stat .k{font-size:44px}
  .about-card{flex-direction:column!important;align-items:flex-start}
  .about-mark{width:44px;height:44px}
  .research{grid-template-columns:1fr;gap:0}
  .research-mark{font-size:110px;height:60px}
  .tl-item{grid-template-columns:1fr;gap:6px}
  .tl-year{padding-top:18px}
  .tl-node{top:20px}
  .tl-title{font-size:24px}
  .tl-score{font-size:28px}
  .personal{grid-template-columns:1fr;gap:10px}
  .hero{padding-bottom:110px}
  .hero-name{font-size:clamp(84px,27vw,140px)}
  .orb-a{width:110vw;right:-50vw;top:-6vh}
  .orb-c{left:auto;right:8vw;top:auto;bottom:22vh;width:28vw}
  .cta{min-height:60vh}
  /* mobile: stacked sticky project cards */
  .work-pin{padding-top:0}
  .work{padding-top:88px}
  .work-viewport{overflow:visible}
  .work-track{flex-direction:column;width:auto;gap:0}
  .proj{width:100%;min-height:380px;position:sticky;top:84px;margin-bottom:24px;transform-origin:50% 0}
}

/* ---------- reduced motion: everything final & readable ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .proj{position:relative!important;top:auto!important}
}