/* Chandan Anuth portfolio, visual system */
@font-face{font-family:"Brico";src:url(../fonts/brico.woff2) format("woff2");font-weight:200 800;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:"Serif";src:url(../fonts/serif.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Serif";src:url(../fonts/serif-i.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Mono";src:url(../fonts/mono.woff2) format("woff2");font-weight:100 800;font-display:swap}

:root{
  --bg:#07080b;--bg2:#0d0f14;--ink:#ecebe4;--dim:#868a92;--line:rgba(236,235,228,.14);
  --acc:#6fa8ff;--hot:#ff5b3a;--paper:#ebe8de;--cool:#6ec9b8;
  --pad:max(clamp(18px,4.2vw,68px),calc((100vw - 1640px)/2));
  --ease:cubic-bezier(.2,.8,.2,1);--io:cubic-bezier(.7,0,.2,1);
  --display:"Brico","Helvetica Neue",Arial,sans-serif;--serif:"Serif",Georgia,"Times New Roman",serif;--mono:"Mono",ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{background:var(--bg);-webkit-text-size-adjust:100%;scrollbar-width:thin;scrollbar-color:#2a2d34 var(--bg)}
html.lock,body.loading{overflow:hidden}
body{font-family:var(--display);color:var(--ink);background:var(--bg);line-height:1.5;overflow-x:hidden;-webkit-font-smoothing:antialiased;font-optical-sizing:auto}
html.fine,html.fine a,html.fine button,html.fine .ip{cursor:none}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0}
::selection{background:var(--acc);color:#000}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}

#library{display:none}
#net{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
#stage{position:relative;z-index:1}
.sc{position:relative}

/* progress line */
#prog{position:fixed;left:0;top:0;height:3px;width:100%;background:var(--acc);transform-origin:0 50%;transform:scaleX(0);z-index:1500;pointer-events:none}

/* cursor */
#cursor{position:fixed;left:0;top:0;z-index:3000;pointer-events:none;mix-blend-mode:difference;display:none}
html.fine #cursor{display:block}
#cursor i{position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:#fff;transition:opacity .2s}
#cursor b{position:absolute;left:-22px;top:-22px;width:44px;height:44px;border-radius:50%;border:1px solid #fff;display:grid;place-items:center;transition:width .35s var(--ease),height .35s var(--ease),left .35s var(--ease),top .35s var(--ease),background .3s}
#cursor b span{font:600 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#000;opacity:0;transition:opacity .2s}
#cursor.hov b{left:-34px;top:-34px;width:68px;height:68px}
#cursor.lab b{left:-44px;top:-44px;width:88px;height:88px;background:#fff}
#cursor.lab b span{opacity:1}
#cursor.lab i{opacity:0}

/* top bar */
#bar{position:fixed;left:0;right:0;top:0;z-index:1200;display:flex;justify-content:space-between;align-items:center;padding:18px var(--pad);mix-blend-mode:difference;color:#fff;pointer-events:none}
#bar>*{pointer-events:auto}
.mark{font:700 18px/1 var(--display);letter-spacing:-.02em}
.bar-r{display:flex;align-items:center;gap:22px}
.live{display:flex;align-items:center;gap:9px;font:500 11px/1 var(--mono);letter-spacing:.14em}
.live i{width:7px;height:7px;border-radius:50%;background:#fff;animation:blink 1.6s infinite}
@keyframes blink{50%{opacity:.2}}
#menubtn{display:flex;align-items:center;gap:12px;padding:11px 18px;border:1px solid #fff;border-radius:99px;font:600 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;transition:background .3s,color .3s}
#menubtn i{position:relative;width:16px;height:8px}
#menubtn i::before,#menubtn i::after{content:"";position:absolute;left:0;width:100%;height:1.5px;background:currentColor;transition:transform .45s var(--io),top .45s var(--io)}
#menubtn i::before{top:0}#menubtn i::after{top:6px}
body.menuopen #menubtn i::before{top:3px;transform:rotate(45deg)}
body.menuopen #menubtn i::after{top:3px;transform:rotate(-45deg)}

/* menu overlay */
#menu{position:fixed;inset:0;z-index:1100;background:var(--acc);color:#07080b;clip-path:circle(0 at calc(100% - 70px) 40px);transition:clip-path .9s var(--io);visibility:hidden;display:flex;align-items:center}
#menu.open{clip-path:circle(160% at calc(100% - 70px) 40px);visibility:visible}
.menu-in{width:100%;padding:90px var(--pad) 40px;display:flex;flex-direction:column}
.menu-in a{display:flex;align-items:baseline;gap:22px;padding:.12em 0;border-bottom:1px solid rgba(0,0,0,.16);font:700 clamp(30px,6.2vh,72px)/1.05 var(--display);letter-spacing:-.03em;transform:translateY(60px);opacity:0;transition:transform .8s var(--ease),opacity .6s,padding .4s var(--ease)}
#menu.open .menu-in a{transform:none;opacity:1;transition-delay:calc(var(--i)*55ms + 260ms),calc(var(--i)*55ms + 260ms),0s}
.menu-in a:hover,.menu-in a.on{padding-left:26px}
.menu-in a .mn{font:500 13px/1 var(--mono);letter-spacing:.1em;opacity:.55}
.menu-in a.on .ml::after{content:" ●";font-size:.35em;vertical-align:middle}

/* rail */
#rail{position:fixed;right:20px;top:50%;transform:translateY(-50%);z-index:1000;display:flex;flex-direction:column;gap:14px;align-items:flex-end;mix-blend-mode:difference}
#rail a{display:flex;align-items:center;gap:10px;color:#fff;font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
#rail a span{opacity:0;transform:translateX(8px);transition:.35s var(--ease)}
#rail a i{display:block;width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.5);transition:.4s var(--ease)}
#rail a:hover span{opacity:1;transform:none}
#rail a.on i{width:6px;height:22px;border-radius:4px;background:#fff}
body.loading #rail,body.loading #bar{opacity:0}
#rail,#bar{transition:opacity .8s .4s}

/* loader curtain */
#curtain{position:fixed;inset:0;z-index:2500;pointer-events:auto}
.cp{position:absolute;left:0;right:0;height:50.2%;background:var(--bg);transition:transform 1.1s var(--io)}
.cp.top{top:0}.cp.bot{bottom:0;border-top:1px solid var(--line)}
#curtain.done .cp.top{transform:translateY(-101%)}
#curtain.done .cp.bot{transform:translateY(101%)}
.cmid{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:26px;padding:0 var(--pad);transition:opacity .5s,transform .8s var(--io)}
#curtain.done .cmid{opacity:0;transform:scale(1.06)}
.cname{display:flex;overflow:hidden;font:700 clamp(30px,8vw,120px)/1.05 var(--display);letter-spacing:-.04em;text-transform:uppercase;padding-bottom:.06em}
.cname span{display:inline-block;transform:translateY(110%);transition:transform .9s var(--ease) calc(var(--i)*40ms)}
#curtain.run .cname span{transform:none}
.cnum{font:500 13px/1 var(--mono);letter-spacing:.2em;color:var(--dim);width:100%;max-width:560px;text-align:right}
.cnum span{color:var(--acc)}
.cline{width:100%;max-width:560px;height:2px;background:var(--line);overflow:hidden}
.cline i{display:block;height:100%;background:var(--acc);transform-origin:0 50%;transform:scaleX(0)}

/* split text */
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding:.04em .08em .16em .02em;margin:-.04em -.08em -.16em -.02em}
.split .c{display:inline-block;transform:translateY(115%) rotate(4deg);transform-origin:0 100%;transition:transform 1s var(--ease) calc(var(--i)*26ms)}
.split.in .c,.go .split .c,.in .split .c{transform:none}
.sh h2.split .c{transition-delay:calc(var(--i)*38ms)}

/* section header */
.sh{padding:clamp(80px,13vh,150px) var(--pad) clamp(28px,5vh,56px);display:flex;align-items:flex-end;gap:clamp(14px,2vw,30px)}
.sh .sn{font:500 clamp(12px,1vw,14px)/1 var(--mono);letter-spacing:.14em;color:var(--acc);padding-bottom:1.2em;opacity:0;transform:translateY(12px);transition:.8s var(--ease)}
.sh .sn.in{opacity:1;transform:none}
.sh h2{font:700 clamp(48px,10.4vw,150px)/.86 var(--display);letter-spacing:-.055em;text-transform:uppercase}
.sh.dark{color:#0b0c0f}.sh.dark .sn{color:#0b0c0f}
.sh.ink{color:var(--ink)}
.sh h2.split .w{padding-bottom:.12em}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 26px;border:1px solid var(--ink);border-radius:99px;font:600 14px/1 var(--display);letter-spacing:.01em;position:relative;overflow:hidden;transition:color .4s,border-color .4s;will-change:transform}
.btn::before{content:"";position:absolute;inset:0;background:var(--acc);transform:translateY(101%);transition:transform .5s var(--io);z-index:-1;border-radius:inherit}
.btn:hover{color:#000;border-color:var(--acc)}.btn:hover::before{transform:none}
.btn{z-index:0;isolation:isolate}
.btn.solid{background:var(--ink);color:#000;border-color:var(--ink)}
.btn.solid::before{background:var(--acc)}

/* ---------------- hero ---------------- */
.hero{position:relative;min-height:100svh;padding:112px var(--pad) clamp(22px,4vh,40px);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.hero-meta{display:flex;justify-content:space-between;gap:20px;font:500 12px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.hero-meta .role{color:var(--ink);text-align:right}
.kicker{display:flex;align-items:center;gap:10px}
.kicker i{width:8px;height:8px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 0 rgba(111,168,255,.6);animation:ping 2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 12px rgba(111,168,255,0)}100%{box-shadow:0 0 0 0 rgba(111,168,255,0)}}
.statement{font:400 clamp(36px,5.7vw,92px)/.98 var(--serif);letter-spacing:-.025em;max-width:min(13em,calc(100% - clamp(160px,21vw,320px)));margin:auto 0;padding:5vh 0;will-change:transform}
.statement .c.it{font-style:italic;color:var(--acc)}
.portrait{position:absolute;right:var(--pad);top:clamp(130px,22vh,220px);width:clamp(120px,16vw,236px);aspect-ratio:1;z-index:2}
.portrait img{width:100%;height:100%;object-fit:cover;border-radius:50%;filter:grayscale(.15) contrast(1.05);clip-path:circle(0);transition:clip-path 1.4s var(--io) .5s}
.go .portrait img{clip-path:circle(50%)}
.portrait .ring{position:absolute;inset:-12px;border-radius:50%;background:conic-gradient(from 0deg,var(--acc),transparent 30%,transparent 60%,var(--acc));-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1px));mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1px));animation:spin 9s linear infinite;opacity:0;transition:opacity 1s 1.2s}
.portrait .ring.r2{inset:-26px;animation-duration:15s;animation-direction:reverse;opacity:0}
.go .portrait .ring{opacity:.9}.go .portrait .ring.r2{opacity:.4}
@keyframes spin{to{transform:rotate(360deg)}}
.hero-foot{display:flex;justify-content:flex-start;margin-bottom:clamp(8px,2vh,22px)}
.cue{display:flex;align-items:center;gap:12px;font:500 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.cue i{display:block;width:1px;height:38px;background:linear-gradient(var(--acc),transparent);transform-origin:0 0;animation:drop 2s var(--io) infinite}
@keyframes drop{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
.name{font-family:var(--display);font-weight:700;font-size:min(11vw,180px);line-height:.84;letter-spacing:-.045em;white-space:nowrap;text-transform:uppercase;margin:0 -.05em;user-select:none;display:block}
.name .nl{display:inline-block;overflow:hidden;padding-bottom:.02em}
.name .nc{display:inline-block;transform:translateY(105%);transition:transform 1.1s var(--ease) calc(var(--ni,0)*45ms + .1s);font-variation-settings:"wght" 560,"wdth" 100}
.go .name .nc{transform:none}

/* manifesto */
.mani{height:230vh;position:relative}
.mani-in{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;padding:90px var(--pad) 40px}
.mani-p{font:500 clamp(22px,2.9vw,44px)/1.18 var(--display);letter-spacing:-.025em;max-width:22em;font-variation-settings:"wdth" 92}
.mw{display:inline-block;margin-right:.01em;opacity:.14;will-change:opacity}
.mani .btns{margin-top:clamp(22px,4vh,44px);display:flex;gap:14px;flex-wrap:wrap;opacity:0;transform:translateY(22px);transition:.8s var(--ease);pointer-events:none}
.mani .btns.show{opacity:1;transform:none;pointer-events:auto}

/* ---------------- experience ---------------- */
.exp .pin{position:relative}
.exp .track{display:flex;gap:clamp(16px,2vw,32px);align-items:stretch;padding:0 var(--pad)}
.xhead{flex:none;display:flex;align-items:flex-end;min-width:min(78vw,820px)}
.xhead .sh{padding-left:0;padding-top:0}
.xhead .sh h2{font-size:clamp(48px,9.4vw,140px)}
.xc{flex:none;width:min(84vw,540px);padding:clamp(22px,2.6vw,38px);display:flex;flex-direction:column;position:relative;min-height:min(70vh,590px);will-change:transform;opacity:0;transform:translateY(40px);transition:opacity .9s,transform .9s var(--ease)}
.card{background:linear-gradient(160deg,#12151b,#0b0d11);border:1px solid var(--line);border-radius:26px;overflow:hidden}
.card::before{content:"";position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0),rgba(111,168,255,.14),transparent 60%);opacity:0;transition:opacity .4s;pointer-events:none}
.card:hover::before{opacity:1}
.xc.in{opacity:1}
.exp.pinned .xc{opacity:1;transform:none}
.xn{position:absolute;right:20px;top:2px;font:800 clamp(90px,11vw,170px)/1 var(--display);letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1px rgba(236,235,228,.16);pointer-events:none;transform:translateX(var(--sh,0))}
.xd{font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--acc);margin-bottom:auto;padding-bottom:40px}
.xc h3{font:700 clamp(26px,2.5vw,36px)/1.02 var(--display);letter-spacing:-.035em;margin-bottom:12px;position:relative}
.xo{font:400 clamp(17px,1.5vw,22px)/1.3 var(--serif);color:var(--dim);font-style:italic;margin-bottom:26px}
.xc .lab{font:500 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-bottom:12px}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chips span{padding:7px 12px;border:1px solid var(--line);border-radius:99px;font:500 13px/1.1 var(--display);color:#cfcec7;transition:.3s}
.chips span:hover{background:var(--acc);color:#000;border-color:var(--acc)}
.chips span.long{border-radius:14px;line-height:1.35}
.xc ul{list-style:none;font-size:clamp(16px,1.3vw,19px);line-height:1.45;color:#cfcec7}
.xc li{padding-left:18px;position:relative}.xc li::before{content:"";position:absolute;left:0;top:.7em;width:8px;height:2px;background:var(--acc)}
.xend{flex:none;width:2vw}
.xbar{position:absolute;left:var(--pad);right:var(--pad);bottom:28px;height:2px;background:var(--line);display:none}
.xbar i{display:block;height:100%;background:var(--acc);transform-origin:0 50%;transform:scaleX(0)}
.exp.pinned .pin{position:sticky;top:0;height:100svh;overflow:hidden;perspective:1500px;display:flex;align-items:center}
.exp.pinned .track{will-change:transform;transform-style:preserve-3d;align-items:center;padding-top:80px;padding-bottom:70px}
.exp.pinned .xbar{display:block}
.exp.pinned .xhead{align-self:center}

/* ---------------- skills ---------------- */
.srows{padding:0 var(--pad);border-top:1px solid var(--line);margin:0 var(--pad);padding:0}
.srow{display:grid;grid-template-columns:48px minmax(200px,.8fr) 2fr;gap:clamp(12px,2vw,34px);align-items:baseline;padding:clamp(20px,3.2vh,34px) 0;border-bottom:1px solid var(--line);opacity:0;transform:translateY(34px);transition:opacity .8s,transform .9s var(--ease),background .4s,padding .4s var(--ease)}
.srow.in{opacity:1;transform:none}
.srows:hover .srow{opacity:.45}
.srows .srow:hover{opacity:1;padding-left:16px}
.si{font:500 12px/1 var(--mono);letter-spacing:.1em;color:var(--acc)}
.srow h3{font:700 clamp(21px,2.1vw,32px)/1.05 var(--display);letter-spacing:-.035em}
.ribbons{margin:clamp(70px,12vh,140px) 0;transform:rotate(-2.2deg) scale(1.05);overflow:hidden;opacity:0;transition:opacity 1s}
.ribbons.in{opacity:1}
.rib{overflow:hidden;white-space:nowrap;border-block:1px solid var(--line);background:rgba(7,8,11,.5);backdrop-filter:blur(4px)}
.rib.out{background:var(--acc);color:#07080b;border-color:var(--acc);margin-top:-1px;transform:rotate(1.2deg) translateY(-6px)}
.rt{display:inline-flex;align-items:center;will-change:transform;padding:14px 0}
.rt span{font:700 clamp(30px,5vw,74px)/1 var(--display);letter-spacing:-.04em;text-transform:uppercase;padding:0 .35em}
.rib:not(.out) .rt span{color:transparent;-webkit-text-stroke:1.2px var(--ink)}
.rt b{width:.28em;height:.28em;min-width:14px;min-height:14px;border-radius:50%;background:currentColor;display:inline-block;margin:0 .1em}
.rib:not(.out) .rt b{background:var(--acc)}
.sub{padding:clamp(60px,10vh,110px) var(--pad) clamp(24px,4vh,40px)}
.sub h2{font:700 clamp(30px,5.2vw,78px)/.9 var(--display);letter-spacing:-.05em;text-transform:uppercase}
.certs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:clamp(18px,2.4vw,36px);padding:0 var(--pad);perspective:1100px}
.cert{opacity:0;transform:translateY(46px);transition:opacity .8s,transform 1s var(--ease)}
.cert.in{opacity:1;transform:none}
.cert:nth-child(2){transition-delay:.08s}.cert:nth-child(3){transition-delay:.16s}.cert:nth-child(4){transition-delay:.24s}.cert:nth-child(5){transition-delay:.32s}
.cface{position:relative;aspect-ratio:1;border-radius:24px;background:#f4f2ea;display:grid;place-items:center;padding:16%;transition:transform .25s ease-out,box-shadow .4s;transform-style:preserve-3d;box-shadow:0 20px 50px -20px rgba(0,0,0,.8);overflow:hidden}
.cface img{max-height:100%;object-fit:contain;transform:translateZ(30px)}
.glare{position:absolute;inset:0;background:radial-gradient(260px circle at var(--gx,50%) var(--gy,0),rgba(255,255,255,.75),transparent 60%);mix-blend-mode:soft-light;opacity:0;transition:opacity .3s;pointer-events:none}
.cert:hover .glare{opacity:1}
.cert:hover .cface{box-shadow:0 30px 70px -20px rgba(111,168,255,.35)}
.cert figcaption{padding:16px 4px 0;font:600 clamp(15px,1.2vw,18px)/1.25 var(--display);letter-spacing:-.01em}
.langs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:0;margin:0 var(--pad);border-top:1px solid var(--line);padding-bottom:clamp(80px,14vh,160px)}
.lg{padding:30px 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:6px;opacity:0;transform:translateY(24px);transition:.8s var(--ease)}
.lg.in{opacity:1;transform:none}
.lv{font:500 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--acc)}
.ln{font:700 clamp(28px,3.3vw,50px)/1 var(--display);letter-spacing:-.04em}

/* ---------------- portfolio (paper) ---------------- */
.port{background:var(--paper);color:#0b0c0f;padding-bottom:clamp(70px,12vh,140px)}
.port::before{content:"";position:absolute;left:0;right:0;top:-1px;height:60px;transform:translateY(-100%);background:linear-gradient(transparent,rgba(235,232,222,.0))}
.pintro{padding:0 var(--pad);font:400 clamp(20px,2vw,30px)/1.2 var(--serif);max-width:26em;margin-bottom:clamp(30px,6vh,70px);opacity:0;transform:translateY(20px);transition:.9s var(--ease)}
.pintro.in{opacity:1;transform:none}
.plist{list-style:none;margin:0 var(--pad);border-top:1px solid rgba(0,0,0,.85)}
.plist li{opacity:0;transform:translateY(40px);transition:opacity .8s,transform 1s var(--ease)}
.plist li.in{opacity:1;transform:none}
.prow{display:grid;grid-template-columns:clamp(46px,5vw,76px) 1fr auto 56px;gap:clamp(10px,2vw,32px);align-items:center;width:100%;text-align:left;padding:clamp(20px,3.4vh,36px) 0;border-bottom:1px solid rgba(0,0,0,.85);position:relative;isolation:isolate;transition:color .5s,padding .5s var(--ease)}
.prow::before{content:"";position:absolute;inset:0 calc(-1*var(--pad)) 0;background:#0b0c0f;transform:scaleY(0);transform-origin:50% 100%;transition:transform .55s var(--io);z-index:-1}
.prow:hover{color:var(--paper);padding-left:clamp(10px,2vw,28px)}
.prow:hover::before{transform:scaleY(1);transform-origin:50% 0}
.pn{font:500 clamp(12px,1vw,14px)/1 var(--mono);letter-spacing:.1em}
.pt{display:flex;flex-direction:column;gap:10px}
.ptag{font:500 11px/1 var(--mono);letter-spacing:.18em;color:#555a60;transition:color .4s}
.prow:hover .ptag{color:var(--acc)}
.ptitle{font:700 clamp(21px,2.6vw,42px)/1.02 var(--display);letter-spacing:-.04em;max-width:22em}
.po{font:400 clamp(15px,1.3vw,20px)/1.2 var(--serif);font-style:italic;text-align:right;max-width:16em}
.parr{position:relative;width:46px;height:46px;border-radius:50%;border:1px solid currentColor;transition:transform .5s var(--ease),background .4s}
.parr::before{content:"";position:absolute;left:50%;top:50%;width:14px;height:14px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:translate(-65%,-50%) rotate(45deg) scale(.9)}
.prow:hover .parr{transform:rotate(-45deg);background:var(--acc);color:#000;border-color:var(--acc)}

/* ---------------- courses ---------------- */
.stack{padding:0 var(--pad) clamp(60px,10vh,120px)}
.ccard{position:sticky;top:calc(88px + var(--k)*22px);margin-bottom:clamp(30px,8vh,90px);opacity:0;transform:translateY(60px);transition:opacity .8s,transform 1s var(--ease)}
.ccard:nth-child(1){--k:0}.ccard:nth-child(2){--k:1}.ccard:nth-child(3){--k:2}.ccard:nth-child(4){--k:3}
.ccard.in{opacity:1;transform:none}
.cin{position:relative;display:grid;grid-template-columns:minmax(120px,.4fr) 1.6fr;gap:clamp(16px,3vw,50px);min-height:min(52vh,420px);padding:clamp(24px,3.4vw,52px);border-radius:30px;border:1px solid var(--line);overflow:hidden;transform-origin:50% 0;will-change:transform,filter;background:linear-gradient(150deg,#151820,#0c0e12)}
.ccard:nth-child(2) .cin{background:linear-gradient(150deg,#1a1d12,#0c0e0a)}
.ccard:nth-child(3) .cin{background:linear-gradient(150deg,#12171f,#0a0d12)}
.ccard:nth-child(4) .cin{background:linear-gradient(150deg,#1d1512,#0e0b0a)}
.cin::before{content:"";position:absolute;inset:0;background:radial-gradient(520px circle at var(--mx,70%) var(--my,0),rgba(111,168,255,.12),transparent 60%);pointer-events:none}
.cdate{font:500 12px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}
.cin h3{font:700 clamp(25px,3vw,46px)/1.02 var(--display);letter-spacing:-.04em;max-width:16em;margin-bottom:18px}
.ctext{font:400 clamp(18px,1.5vw,23px)/1.25 var(--serif);color:var(--dim);max-width:26em;margin-bottom:30px}
.cbig{position:absolute;right:22px;bottom:-.22em;font:800 clamp(120px,22vw,340px)/1 var(--display);letter-spacing:-.07em;color:transparent;-webkit-text-stroke:1px rgba(236,235,228,.1);pointer-events:none}

/* ---------------- education ---------------- */
.edu{background:linear-gradient(160deg,#12305b,#0b1d3a);color:var(--ink);overflow:hidden;min-height:100svh;display:flex;flex-direction:column;padding-bottom:clamp(60px,10vh,120px)}
.edu-bg{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:0;pointer-events:none;overflow:hidden}
.edu-bg span{display:block;white-space:nowrap;font:800 clamp(120px,20vw,320px)/.9 var(--display);letter-spacing:-.06em;text-transform:uppercase;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.13);will-change:transform}
.edu .sh,.edu-h,.edu-p{position:relative}
.edu-h{padding:0 var(--pad);font:700 clamp(30px,5vw,80px)/.96 var(--display);letter-spacing:-.05em;max-width:12em;margin-top:clamp(20px,6vh,70px);opacity:0;transform:translateY(40px);transition:.9s var(--ease)}
.edu-p{padding:0 var(--pad);font:400 italic clamp(28px,4.2vw,66px)/1 var(--serif);margin-top:22px;opacity:0;transform:translateY(40px);transition:.9s var(--ease) .15s}
.edu-h.in,.edu-p.in{opacity:1;transform:none}

/* ---------------- interests ---------------- */
.acc{display:flex;gap:12px;padding:0 var(--pad) clamp(70px,12vh,140px);height:min(78vh,640px);min-height:440px}
.ip{position:relative;flex:1;min-width:0;border-radius:28px;overflow:hidden;padding:clamp(20px,2.4vw,34px);display:flex;flex-direction:column;justify-content:flex-end;border:1px solid var(--line);transition:flex .9s var(--io),background .6s;background:#0e1015;opacity:0;transform:translateY(50px)}
.ip.in{opacity:1;transform:none;transition:flex .9s var(--io),opacity .8s,transform 1s var(--ease)}
.ip:nth-child(1){background:linear-gradient(170deg,#1b2410,#0b0d09)}
.ip:nth-child(2){background:linear-gradient(170deg,#0e1b26,#090c10)}
.ip:nth-child(3){background:linear-gradient(170deg,#241a0f,#0e0b09)}
.ip:nth-child(4){background:linear-gradient(170deg,#1c1226,#0c0a10)}
.ip.on{flex:4.2}
.ipn{position:absolute;left:clamp(20px,2.4vw,34px);top:clamp(20px,2.4vw,34px);font:500 12px/1 var(--mono);letter-spacing:.14em;color:var(--acc)}
.ip h3{font:700 clamp(23px,2.8vw,44px)/1 var(--display);letter-spacing:-.04em;white-space:nowrap;transition:transform .8s var(--io)}
.ip:not(.on) h3{writing-mode:vertical-rl;transform:rotate(180deg);align-self:flex-start;font-size:clamp(22px,2.6vw,40px)}
.ip p{font:400 clamp(17px,1.6vw,24px)/1.3 var(--serif);color:#c7c6bf;max-width:24em;max-height:0;opacity:0;overflow:hidden;transition:max-height .9s var(--io),opacity .5s,margin .6s;margin-top:0}
.ip.on p{max-height:260px;opacity:1;margin-top:16px;transition:max-height .9s var(--io),opacity .8s .35s,margin .6s}

/* ---------------- contact ---------------- */
.contact{padding-bottom:30px;min-height:100svh;display:flex;flex-direction:column}
.cintro{padding:0 var(--pad);font:400 clamp(22px,2.5vw,38px)/1.15 var(--serif);max-width:20em;opacity:0;transform:translateY(24px);transition:.9s var(--ease)}
.cintro.in{opacity:1;transform:none}
.bigmail{display:block;margin:clamp(30px,8vh,90px) var(--pad);font:700 clamp(17px,3.9vw,62px)/1.1 var(--display);letter-spacing:-.045em;width:fit-content;max-width:calc(100% - 2*var(--pad));overflow-wrap:anywhere;transition:transform .3s ease-out}
.rc{display:inline-block;overflow:hidden;height:1.08em;line-height:1.08;vertical-align:top}
.rc i{display:block;font-style:normal;transition:transform .55s var(--io) calc(var(--i)*16ms)}
.rc i::after{content:attr(data-c);display:block;color:var(--acc)}
.bigmail:hover .rc i{transform:translateY(-100%)}
.clinks{display:flex;flex-wrap:wrap;gap:12px;padding:0 var(--pad);opacity:0;transform:translateY(24px);transition:.9s var(--ease)}
.clinks.in{opacity:1;transform:none}
.clinks a{padding:14px 22px;border:1px solid var(--line);border-radius:99px;font:600 15px/1 var(--display);transition:.35s}
.clinks a:hover{background:var(--acc);color:#000;border-color:var(--acc);transform:translateY(-4px)}
.foot{margin-top:auto;padding:clamp(60px,12vh,130px) var(--pad) 20px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;font:500 12px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.totop{padding:12px 20px;border:1px solid var(--line);border-radius:99px;font:600 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);transition:.3s;will-change:transform}
.totop:hover{background:var(--acc);color:#000;border-color:var(--acc)}

/* ---------------- project story ---------------- */
#story{position:fixed;inset:0;z-index:2000;background:#08090c;clip-path:circle(0 at var(--cx,50%) var(--cy,50%));transition:clip-path 1s var(--io),opacity .4s;overflow:hidden;--tint:111,168,255}
#story.open{clip-path:circle(150% at var(--cx,50%) var(--cy,50%))}
#story.s1{--tint:255,91,58}#story.s2{--tint:110,201,184}#story.s3{--tint:111,168,255}
#story::before{content:"";position:absolute;inset:-20%;background:radial-gradient(60vmax circle at 78% 22%,rgba(var(--tint),.2),transparent 60%),radial-gradient(50vmax circle at 8% 100%,rgba(var(--tint),.12),transparent 60%);transition:background 1s;pointer-events:none}
#story.swap{opacity:0}
.st-top{position:absolute;left:0;right:0;top:0;z-index:3;display:flex;align-items:center;gap:20px;padding:18px var(--pad)}
.st-count{font:700 clamp(22px,2vw,30px)/1 var(--display);letter-spacing:-.03em}
.st-count i{font:500 12px/1 var(--mono);color:var(--dim);font-style:normal;letter-spacing:.1em;margin-left:6px}
.st-tag{font:500 11px/1 var(--mono);letter-spacing:.18em;color:rgb(var(--tint));margin-right:auto}
.st-x{position:relative;width:48px;height:48px;border-radius:50%;border:1px solid var(--line);transition:.4s var(--ease);flex:none}
.st-x span{position:absolute;left:14px;top:23px;width:18px;height:1.5px;background:var(--ink);transform:rotate(45deg)}
.st-x span+span{transform:rotate(-45deg)}
.st-x:hover{background:var(--acc);transform:rotate(90deg)}.st-x:hover span{background:#000}
.st-track{position:absolute;inset:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;outline:0;overscroll-behavior:contain}
.st-track::-webkit-scrollbar{display:none}
.sl{flex:none;width:100vw;height:100%;scroll-snap-align:start;overflow-y:auto;scrollbar-width:none;padding:110px var(--pad) 120px;display:flex;flex-direction:column;justify-content:center;position:relative}
.sl::-webkit-scrollbar{display:none}
.sl.tx{justify-content:flex-end}
.st-org{font:400 italic clamp(18px,1.7vw,26px)/1.2 var(--serif);color:var(--dim);margin-bottom:22px}
.st-title{font:700 clamp(32px,6.2vw,100px)/.94 var(--display);letter-spacing:-.055em;max-width:12em;text-transform:none}
.st-title .c{transition-duration:1.1s}
.st-hint{display:flex;align-items:center;gap:14px;margin-top:clamp(26px,6vh,60px);font:500 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.st-hint i{display:block;width:60px;height:1px;background:var(--acc);transform-origin:0 0;animation:hint 2s var(--io) infinite}
@keyframes hint{0%{transform:scaleX(0)}60%{transform:scaleX(1)}100%{transform:scaleX(1);opacity:0}}
.sl-in{max-width:1100px;width:100%;margin:0 auto 0 0;position:relative}
.sl-n{position:absolute;right:0;top:-.6em;font:800 clamp(140px,26vw,420px)/1 var(--display);letter-spacing:-.07em;color:transparent;-webkit-text-stroke:1px rgba(var(--tint),.25);pointer-events:none;transform:translateX(60px);opacity:0;transition:1.2s var(--ease)}
.sl.in .sl-n{transform:none;opacity:1}
.sl h3{font:700 clamp(44px,8.2vw,128px)/.9 var(--display);letter-spacing:-.06em;text-transform:uppercase;margin-bottom:clamp(24px,5vh,56px);position:relative;clip-path:inset(0 100% 0 0);transition:clip-path 1s var(--io)}
.sl.in h3{clip-path:inset(0 0 -20% 0)}
.sl ul{list-style:none;position:relative;display:grid;gap:clamp(10px,1.8vh,18px);max-width:46em}
.sl li{font:400 clamp(18px,1.6vw,26px)/1.28 var(--serif);padding-left:30px;position:relative;opacity:0;transform:translateX(50px);transition:opacity .8s,transform 1s var(--ease);transition-delay:calc(var(--i)*110ms + .35s)}
.sl li::before{content:"";position:absolute;left:0;top:.62em;width:16px;height:2px;background:rgb(var(--tint))}
.sl.in li{opacity:1;transform:none}
.st-bot{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px var(--pad) 24px;background:linear-gradient(transparent,rgba(8,9,12,.85) 60%)}
.st-nav{font:600 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;padding:14px 18px;border:1px solid var(--line);border-radius:99px;transition:.35s}
.st-nav:hover{background:var(--acc);color:#000;border-color:var(--acc)}
.st-dots{display:flex;gap:10px}
.st-dots i{width:8px;height:8px;border-radius:99px;background:rgba(255,255,255,.25);transition:.5s var(--ease);cursor:pointer}
.st-dots i.on{width:34px;background:rgb(var(--tint))}
.st-prog{position:absolute;left:0;right:0;bottom:0;height:3px;z-index:4;background:rgba(255,255,255,.06)}
.st-prog i{display:block;height:100%;background:rgb(var(--tint));transform-origin:0 50%;transform:scaleX(0)}
#story.swapin .st-top,#story.swapin .st-track{animation:swin .5s var(--ease)}
@keyframes swin{from{opacity:0;transform:translateX(calc(var(--sd,1)*60px))}}

/* certificate viewer */
#viewer{position:fixed;inset:0;z-index:2100;display:grid;place-items:center;padding:clamp(10px,3vw,40px);opacity:0;transition:opacity .4s}
#viewer.open{opacity:1}
.vw-back{position:absolute;inset:0;background:rgba(4,5,7,.78);backdrop-filter:blur(12px)}
.vw-box{position:relative;width:min(1000px,100%);height:min(88vh,100%);background:#0e1015;border:1px solid var(--line);border-radius:26px;display:flex;flex-direction:column;overflow:hidden;transform:translateY(40px) scale(.96);transition:transform .7s var(--ease)}
#viewer.open .vw-box{transform:none}
.vw-top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 22px;border-bottom:1px solid var(--line)}
.vw-top h3{font:700 clamp(16px,1.8vw,24px)/1.15 var(--display);letter-spacing:-.02em}
.vw-d{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--acc);margin-bottom:8px}
.vw-act{display:flex;align-items:center;gap:10px;flex:none}
.vw-act .btn{padding:12px 18px;font-size:13px}
.vw-box iframe{flex:1;width:100%;border:0;background:#fff}

/* ---------------- responsive ---------------- */
@media (min-width:1900px){.hero-meta,.live,#menubtn,.xd,.xc .lab,.ptag,.cdate,.lv,.si,.sn,.foot,.totop,.st-tag,.cue{font-size:14px}.chips span{font-size:15px}.xc ul{font-size:20px}.clinks a{font-size:17px}.btn{font-size:16px}.cert figcaption{font-size:19px}}
@media (max-width:1100px){#rail{display:none}.live{display:none}}
@media (max-width:820px){
  .bar-r{gap:10px}
  #bar{padding:14px var(--pad)}
  .hero{padding-top:92px;min-height:100svh}
  .portrait{position:relative;right:auto;top:auto;width:clamp(96px,28vw,150px);margin:26px 0 0 auto;order:2}
  .hero-meta{flex-direction:column;gap:8px;font-size:11px}
  .hero-meta .role{text-align:left}
  .statement{max-width:100%;margin:0;padding:4vh 0;font-size:clamp(38px,11.5vw,70px)}
  .hero .portrait{margin-top:-10px}
  .name{font-size:22.5vw;line-height:.82}
  .name .nl{display:block}
  .mani{height:260vh}
  .mani-p{font-size:clamp(22px,6.1vw,34px)}
  .xhead .sh{padding-top:clamp(70px,10vh,110px)}
  .exp .track{flex-direction:column;padding:0 var(--pad) 50px;gap:18px}
  .xhead{min-width:0}
  .xc{width:100%;min-height:0;padding:24px 22px 26px}
  .xd{padding-bottom:70px}
  .xn{font-size:92px}
  .srow{grid-template-columns:34px 1fr}
  .srow .chips{grid-column:1/-1}
  .ribbons{transform:rotate(-3deg) scale(1.1)}
  .prow{grid-template-columns:34px 1fr 40px}
  .po{display:none}
  .parr{width:38px;height:38px}
  .prow .pt::after{content:"";display:none}
  .cin{grid-template-columns:1fr;min-height:0;padding:24px 22px 30px}
  .ccard{top:calc(76px + var(--k)*14px)}
  .acc{flex-direction:column;height:auto;min-height:0}
  .ip{flex:none;min-height:86px;transition:min-height .8s var(--io)}
  .ip.on{min-height:300px;flex:none}
  .ip:not(.on) h3{writing-mode:horizontal-tb;transform:none;align-self:flex-start;font-size:26px;margin-top:20px}
  .ip:not(.on){justify-content:flex-start}
  .st-nav{padding:12px 12px;font-size:10px;letter-spacing:.08em}
  .st-bot{padding-bottom:20px}
  .sl{padding-top:96px;padding-bottom:110px}
  .sl-n{opacity:.7}
  .sh h2{font-size:clamp(44px,15.5vw,130px)}
  .edu-bg span{font-size:44vw}
  .vw-top{flex-direction:column;align-items:flex-start}
}
@media (max-width:420px){
  .st-nav{font-size:9.5px;padding:11px 10px}
  .st-dots{gap:6px}.st-dots i.on{width:22px}
  .hero-meta{font-size:10.5px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;transition-delay:0s!important}
}