/* ==========================================================
   Void — portfolio styles
   1 tokens · 2 base · 3 nav + drawer · 4 profile · 5 sections
   6 music player · 7 links · 8 footer + 404 · 9 motion
   ========================================================== */

/* 1 — tokens */
:root{
  --paper:#fff;--paper-2:#f5f5f7;--ink:#1d1d1f;--ink-2:#3a3a3c;--muted:#86868b;
  --line:#d2d2d7;--signal:#0071e3;--ok:#1fa35b;
  --ease:cubic-bezier(.16,1,.3,1);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter Tight","Segoe UI",Roboto,sans-serif;
  --wrap:56rem;--pad:clamp(1.125rem,4vw,2rem);--r:22px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--paper:#000;--paper-2:#141416;--ink:#f5f5f7;--ink-2:#d2d2d7;--line:#2c2c2e;color-scheme:dark}
}
:root[data-theme="dark"]{--paper:#000;--paper-2:#141416;--ink:#f5f5f7;--ink-2:#d2d2d7;--line:#2c2c2e;color-scheme:dark}

/* 2 — base */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:4.5rem;-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--font);line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column;overflow-x:clip}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit}
::selection{background:var(--signal);color:#fff}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:8px}
[hidden]{display:none!important}
h1,h2,h3,h4{font-weight:600;letter-spacing:-.025em}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad)}
.stack{display:flex;flex-direction:column;gap:2.75rem;padding-block:1.5rem 4rem;flex:1}
.skip{position:absolute;left:-999px;top:.5rem;z-index:100;background:var(--ink);color:var(--paper);padding:.5rem 1rem;border-radius:999px}
.skip:focus{left:.5rem}
.card{background:var(--paper-2);border-radius:var(--r);box-shadow:0 0 0 1px var(--line);padding:1.5rem}
.btn{display:inline-flex;align-items:center;gap:.5rem;border:0;cursor:pointer;border-radius:12px;background:var(--signal);color:#fff;font-weight:500;font-size:.9375rem;padding:.65rem 1.1rem;transition:opacity .15s,transform .16s var(--ease),background .15s}
.btn:hover{opacity:.9}.btn:active{transform:scale(.97)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.btn.ghost:hover{background:var(--paper);opacity:1}
.btn.sm{font-size:.8125rem;padding:.45rem .8rem;border-radius:10px}
.btn svg{flex:none}
.icon-btn{display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-2);transition:background .15s,color .15s}
.icon-btn:hover{background:var(--paper);color:var(--ink)}
.icon-btn svg{width:20px;height:20px}
.badge{flex:none;font-size:.75rem;color:var(--muted);box-shadow:inset 0 0 0 1px var(--line);border-radius:8px;padding:.2rem .6rem}

/* 3 — nav + drawer */
.nav{position:sticky;top:0;z-index:50;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--paper) 80%,transparent);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);padding-top:env(safe-area-inset-top,0px)}
.nav-in{height:3.5rem;display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:600;font-size:1.0625rem;letter-spacing:-.025em}
.brand i{font-style:normal;color:var(--signal)}
.nav-right{display:flex;align-items:center;gap:1rem}
.switch{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.875rem;color:var(--ink-2);-webkit-user-select:none;user-select:none}
.switch input{position:absolute;opacity:0;pointer-events:none}
.track{width:2.25rem;height:1.375rem;border-radius:999px;background:var(--line);padding:2px;transition:background .25s}
.thumb{display:block;width:1.125rem;height:1.125rem;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .25s var(--ease)}
.switch input:checked+.track{background:var(--signal)}
.switch input:checked+.track .thumb{transform:translateX(.875rem)}
.switch input:focus-visible+.track{outline:2px solid var(--signal);outline-offset:2px}
.menu-btn{display:inline-flex;align-items:center;justify-content:center;gap:3px;width:2.25rem;height:2.25rem;border:0;cursor:pointer;border-radius:50%;background:var(--paper-2);transition:background .15s,transform .16s var(--ease)}
.menu-btn:hover{background:var(--line)}.menu-btn:active{transform:scale(.94)}
.menu-btn span{width:4px;height:4px;border-radius:50%;background:var(--ink)}
.scrim{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.4);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility 0s .3s}
.scrim.open{opacity:1;visibility:visible;transition:opacity .3s var(--ease)}
.drawer{position:fixed;top:0;bottom:0;left:0;z-index:81;width:min(21rem,86vw);display:flex;flex-direction:column;background:var(--paper);border-right:1px solid var(--line);padding:calc(1.5rem + env(safe-area-inset-top,0px)) 1.25rem calc(1.25rem + env(safe-area-inset-bottom,0px));transform:translateX(-100%);visibility:hidden;transition:transform .4s var(--ease),visibility 0s .4s}
.drawer.open{transform:none;visibility:visible;transition:transform .4s var(--ease)}
.dr-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:0 .5rem 1.25rem;border-bottom:1px solid var(--line)}
.dr-head b{display:block;font-size:1.25rem;font-weight:600;letter-spacing:-.025em}
.dr-head span{display:block;margin-top:.125rem;font-size:.9375rem;color:var(--muted)}
.dr-close{flex:none;display:grid;place-items:center;width:2.25rem;height:2.25rem;border:0;border-radius:50%;background:var(--paper-2);color:var(--ink-2);cursor:pointer}
.dr-close:hover{background:var(--line)}
.dr-list{display:flex;flex-direction:column;gap:.25rem;padding:1.25rem 0;overflow-y:auto}
.dr-list a{display:flex;align-items:center;gap:1rem;padding:.875rem;border-radius:14px;font-size:1.0625rem;color:var(--ink-2);transition:background .15s,color .15s}
.dr-list a svg{flex:none;color:var(--muted);width:22px;height:22px}
.dr-list a:hover{background:var(--paper-2);color:var(--ink)}
.dr-cta{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;border-radius:20px;background:var(--ink);color:var(--paper);padding:1.25rem 1.25rem 1.25rem 1.375rem;transition:transform .2s var(--ease)}
.dr-cta:hover{transform:translateY(-2px)}
.dr-cta b{display:block;font-size:1.125rem;font-weight:600;letter-spacing:-.02em}
.dr-cta span{display:block;margin-top:.125rem;font-size:.9375rem;opacity:.65}
.dr-cta i{flex:none;display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:50%;background:var(--paper);color:var(--ink)}

/* 4 — profile */
.profile{padding:0;overflow:hidden}
.banner{aspect-ratio:3/1;background:var(--paper-2);overflow:hidden;border-bottom:1px solid var(--line)}
@media(max-width:560px){.banner{aspect-ratio:2.2/1}}
.banner img{width:100%;height:100%;object-fit:cover}
.p-row{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;padding:0 1.5rem}
.avatar{width:6.5rem;height:6.5rem;border-radius:50%;object-fit:cover;margin-top:-3.25rem;border:4px solid var(--paper-2);background:var(--paper-2);flex:none}
.actions{display:flex;gap:.5rem;padding-top:1rem}
.p-body{padding:1rem 1.5rem 1.75rem}
.p-body h1{font-size:clamp(1.75rem,4vw,2.25rem);line-height:1.1}
.verified{display:inline-block;width:.78em;height:.78em;margin-left:.3em;vertical-align:-.02em;color:var(--signal);font-size:inherit}
.verified svg{display:block;width:100%;height:100%}
.sub{margin-top:.375rem;color:var(--ink-2)}
.meta{margin-top:.75rem;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;font-size:.875rem;color:var(--muted)}
.loc{display:inline-flex;align-items:center;gap:.375rem}
.loc svg{width:16px;height:16px}
.note{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;border:0;border-radius:999px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);font-weight:500;font-size:.8125rem;padding:.35rem .85rem .35rem .7rem;transition:background .15s}
.note:hover{background:var(--ink);color:var(--paper)}
.eq{display:inline-flex;align-items:flex-end;gap:2px;height:12px;width:12px}
.eq i{flex:1;height:40%;border-radius:1px;background:currentColor}
.eq i:nth-child(2){height:90%}.eq i:nth-child(3){height:60%}
.playing .eq i{animation:eq 1s ease-in-out infinite}
.eq i:nth-child(2){animation-delay:.2s!important}.eq i:nth-child(3){animation-delay:.4s!important}
@keyframes eq{0%,100%{height:25%}50%{height:100%}}
.bio{margin-top:1.25rem;font-size:1.0625rem;line-height:1.65;color:var(--ink-2);max-width:40em}

/* 5 — sections */
.card-title{display:flex;align-items:center;gap:.625rem;font-size:1.125rem;margin-bottom:1rem}
.card-title svg{color:var(--muted)}
.prose{font-size:1.0625rem;line-height:1.7;color:var(--ink-2);max-width:42em}
.prose+.prose{margin-top:1rem}
.facts{margin-top:1.5rem;border-top:1px solid var(--line)}
.facts div{display:flex;justify-content:space-between;gap:1.5rem;padding:.875rem 0;border-bottom:1px solid var(--line)}
.facts dt{color:var(--muted);font-size:.9375rem}.facts dd{text-align:right;font-weight:500}
.mini{font-size:1.125rem;margin:1.75rem 0 1rem}
.tech{display:grid;grid-template-columns:minmax(0,1fr);gap:1.25rem}
@media(min-width:640px){.tech{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem 2rem}}
.tech h4{font-size:.8125rem;font-weight:600;color:var(--muted);margin-bottom:.625rem;letter-spacing:0}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{font-size:.875rem;color:var(--ink-2);background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);border-radius:999px;padding:.3rem .8rem;transition:background .2s,color .2s}
.chip:hover{background:var(--signal);color:#fff;box-shadow:none}
.sh{display:flex;align-items:center;gap:.875rem;margin-bottom:1rem}
.sh-ico{flex:none;display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:12px;background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink)}
.sh-t{flex:1;min-width:0}
.sh-t h2{font-size:1.1875rem}
.sh-t p{font-size:.8125rem;color:var(--muted)}
.grid{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem}
@media(min-width:640px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.proj{display:flex;flex-direction:column;gap:.5rem}
.proj-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:.5rem}
.tile{width:3.5rem;height:3.5rem;border-radius:14px;object-fit:cover;box-shadow:0 0 0 1px var(--line)}
.tag{font-size:.6875rem;font-weight:500;letter-spacing:.04em;color:var(--muted);box-shadow:inset 0 0 0 1px var(--line);border-radius:8px;padding:.2rem .55rem}
.proj h3{font-size:1.0625rem}
.proj p{font-size:.9375rem;color:var(--muted);line-height:1.55}
.proj-links{margin-top:auto;padding-top:.75rem;display:flex;flex-wrap:wrap;gap:.5rem}
.soon{display:flex;flex-direction:column;justify-content:center;gap:.25rem;background:transparent;box-shadow:none;border:1px dashed var(--line);min-height:9rem}
.soon h3{font-size:1.0625rem}.soon p{font-size:.9375rem;color:var(--muted)}
@media(min-width:640px){.soon:nth-child(odd){grid-column:1/-1;min-height:0;padding-block:1.5rem}}

/* 6 — music player */
.player{padding:1.25rem}
.np{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.cover{flex:none;width:3.5rem;height:3.5rem;border-radius:14px;background:linear-gradient(135deg,#0a84ff,#5e5ce6);display:grid;place-items:center;color:#fff;overflow:hidden;box-shadow:0 0 0 1px var(--line)}
.cover img{width:100%;height:100%;object-fit:cover}
.disc svg{width:24px;height:24px}
.playing .disc{animation:spin 6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.np-t{flex:1;min-width:8rem;display:flex;flex-direction:column}
.np-t b{font-size:1.0625rem;font-weight:600;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.np-t span{font-size:.875rem;color:var(--muted)}
.ctrl{display:flex;align-items:center;gap:.5rem}
.ctrl button{display:grid;place-items:center;width:2.5rem;height:2.5rem;border:0;border-radius:50%;background:transparent;color:var(--ink-2);cursor:pointer;transition:background .15s,transform .16s var(--ease)}
.ctrl button:hover{background:var(--paper)}.ctrl button:active{transform:scale(.92)}
.ctrl .main{width:3rem;height:3rem;background:var(--ink);color:var(--paper)}
.ctrl .main:hover{background:var(--ink);opacity:.88}
.i-pause{display:none}.playing .i-pause{display:block}.playing .i-play{display:none}
.seek{display:flex;align-items:center;gap:.75rem;margin-top:1.125rem;font-size:.75rem;color:var(--muted);font-variant-numeric:tabular-nums}
.seek span{flex:none;min-width:2.25rem}.seek span:last-child{text-align:right}
.seek input{flex:1;-webkit-appearance:none;appearance:none;height:4px;border-radius:4px;background:linear-gradient(to right,var(--ink) var(--p,0%),var(--line) var(--p,0%));cursor:pointer;touch-action:none}
.seek input::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--ink);border:0}
.seek input::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--ink);border:0}
.perr{margin-top:.75rem;font-size:.8125rem;color:#ff453a}
.tracks{list-style:none;margin-top:1rem;border-top:1px solid var(--line)}
.tracks button{display:flex;align-items:center;gap:1rem;width:100%;text-align:left;border:0;background:transparent;cursor:pointer;padding:.75rem .5rem;border-radius:12px;transition:background .15s}
.tracks button:hover{background:var(--paper)}
.tracks .num{flex:none;width:1.25rem;text-align:center;font-size:.8125rem;color:var(--muted);font-variant-numeric:tabular-nums}
.tracks .tt{flex:1;min-width:0;display:flex;flex-direction:column}
.tracks .tt b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tracks .tt small{font-size:.8125rem;color:var(--muted)}
.tracks .active .tt b,.tracks .active .num{color:var(--signal)}
.bars{display:none;align-items:flex-end;gap:2px;height:14px;color:var(--signal)}
.bars i{width:3px;height:40%;border-radius:1px;background:currentColor}
.bars i:nth-child(2){height:100%}.bars i:nth-child(3){height:65%}
.tracks .active .bars{display:inline-flex}
.playing .tracks .active .bars i{animation:eq 1s ease-in-out infinite}
.bars i:nth-child(2){animation-delay:.2s!important}.bars i:nth-child(3){animation-delay:.4s!important}

/* 7 — connects */
.links{display:flex;flex-direction:column;gap:.75rem}
.link{display:flex;align-items:center;gap:1rem;background:var(--paper-2);border-radius:18px;box-shadow:0 0 0 1px var(--line);padding:.875rem 1rem;transition:background .2s,transform .3s var(--ease)}
.link:hover{background:var(--paper);transform:translateY(-1px)}
.l-ico{flex:none;display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:12px;background:var(--ink);color:var(--paper)}
.l-ico svg{width:22px;height:22px}
.l-t{flex:1;min-width:0;display:flex;flex-direction:column}
.l-t b{font-weight:600}
.l-t small{font-size:.8125rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.l-go{flex:none;display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line);color:var(--muted);transition:transform .3s var(--ease),color .2s}
.link:hover .l-go{transform:translateX(3px);color:var(--ink)}

/* 8 — footer + 404 */
.foot{border-top:1px solid var(--line)}
.foot-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1.5rem;padding-block:1.5rem;font-size:.8125rem;color:var(--muted)}
.foot-in a:hover{color:var(--ink)}
.err{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:4rem var(--pad);gap:.75rem;min-height:100vh}
.err b{font-size:clamp(4rem,14vw,9rem);font-weight:600;letter-spacing:-.05em;line-height:1}
.err p{color:var(--muted);max-width:26em}
.err .btn{margin-top:1rem}

/* 9 — motion */
.js .reveal{opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .reveal.on{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.js .reveal{opacity:1;transform:none}*{transition:none!important;animation:none!important}}