@font-face{font-family:"JetBrains Mono";src:url("fonts/JetBrainsMono-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("fonts/JetBrainsMono-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Public Sans";src:url("fonts/PublicSans-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  /* the avatar's seven slates */
  --c0:#0c0e13;--c1:#1c212b;--c2:#2f3644;--c3:#485162;--c4:#687284;--c5:#929bab;--c6:#c2c8d2;
  --bg:var(--c0);--fg:var(--c6);--muted:var(--c5);--line:var(--c1);
  --accent:oklch(.8 .05 150);
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --pad:clamp(20px,5vw,48px);
  --max:60rem;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;color:var(--fg);font:400 1.0625rem/1.65 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
main{flex:1}
::selection{background:var(--c2);color:var(--c6)}
a{color:inherit;text-decoration-line:underline;text-decoration-thickness:1px;text-decoration-color:var(--c3);text-underline-offset:.22em;transition:color .15s,text-decoration-color .15s}
a:hover{color:var(--accent);text-decoration-color:currentColor}
:focus-visible{outline:1px solid var(--accent);outline-offset:4px}
h1,h2,h3{font-family:var(--mono);font-weight:500;margin:0}
p{margin:0}
.wrap{width:100%;max-width:calc(var(--max) + 2 * var(--pad));margin-inline:auto;padding-inline:var(--pad)}
.skip{position:absolute;left:-9999px;top:12px;z-index:60;padding:8px 12px;background:var(--c6);color:var(--c0);font:500 .8125rem/1 var(--mono);text-decoration:none}
.skip:focus{left:var(--pad)}

/* header */
.top{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding-block:28px;font:400 .8125rem/1.4 var(--mono);color:var(--muted)}
.top a{text-decoration:none}
.top nav{display:flex;gap:24px}
@media (max-width:599px){.top nav{display:none}}

/* hero + avatar */
.hero{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:end;column-gap:clamp(32px,6vw,72px);row-gap:36px;padding-block:clamp(32px,8vh,88px) clamp(64px,12vh,120px)}
@media (max-width:719px){.hero{grid-template-columns:minmax(0,1fr)}}
.stage{position:relative;display:inline-block;justify-self:start}
.stage.shake{animation:shake .12s steps(2) infinite}
@keyframes shake{0%{transform:translate(2px,-1px)}50%{transform:translate(-2px,1px)}100%{transform:translate(1px,2px)}}
#avatar{display:block;width:192px;height:252px;image-rendering:pixelated;image-rendering:crisp-edges;cursor:pointer;touch-action:manipulation}
@media (min-width:360px){#avatar{width:256px;height:336px}}
@media (min-width:880px){#avatar{width:320px;height:420px}}
.toast{position:absolute;left:50%;top:-12px;transform:translate(-50%,-100%);padding:6px 10px;background:var(--c6);color:var(--c0);font:500 .75rem/1.2 var(--mono);letter-spacing:.06em;white-space:nowrap;opacity:0;transition:opacity .2s;pointer-events:none}
.toast.on{opacity:1}
.intro h1{font-size:clamp(2.125rem,1.35rem + 2.6vw,3.25rem);line-height:1.05;letter-spacing:-.035em}
.intro p{margin-top:20px;max-width:31ch;font-size:clamp(1.125rem,1rem + .4vw,1.3125rem);line-height:1.5;text-wrap:pretty}

/* sections */
.sec .in{display:grid;grid-template-columns:10rem minmax(0,1fr);column-gap:48px;row-gap:24px;padding-block:64px 80px;border-top:1px solid var(--line)}
.sec h2{font:400 .8125rem/1.9 var(--mono);color:var(--muted);letter-spacing:.01em}
@media (max-width:719px){.sec .in{grid-template-columns:minmax(0,1fr);padding-block:44px 60px}}

/* projects */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,16rem),1fr));gap:16px}
.card{display:flex;flex-direction:column;gap:10px;min-height:13rem;padding:24px 24px 22px;border:1px solid var(--line);transition:border-color .2s}
.card:hover{border-color:var(--c2)}
.card h3{font-size:1.0625rem;letter-spacing:-.01em}
.card p{color:var(--muted);text-wrap:pretty}
.card .slot{margin-top:auto;padding-top:20px;font:400 .8125rem/1.4 var(--mono);color:var(--muted)}
.card .slot a{color:var(--fg)}
.card .slot a:hover{color:var(--accent)}
.soon{display:inline-flex;align-items:center;gap:10px}
.soon::before{content:"";width:6px;height:6px;background:var(--c4)}

/* about + rows */
.lead{max-width:36rem;text-wrap:pretty}
.rows{margin:40px 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}
.rows>li,.rows>div{display:grid;grid-template-columns:7.5rem minmax(0,1fr);column-gap:24px;padding-block:14px;border-bottom:1px solid var(--line)}
.rows .k,.rows dt{font:400 .8125rem/1.9 var(--mono);color:var(--muted)}
.rows dd{margin:0}
.rows .meta{display:block;color:var(--muted);font-size:.9375rem}
@media (max-width:479px){.rows>li,.rows>div{grid-template-columns:minmax(0,1fr)}}
.dl{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:32px}
.btn{display:inline-flex;align-items:center;gap:14px;padding:13px 18px;border:1px solid var(--c3);color:var(--fg);font:500 .875rem/1 var(--mono);text-decoration:none;transition:border-color .15s,color .15s}
.btn:hover{border-color:var(--accent)}
.made{font:400 .75rem/1.4 var(--mono);color:var(--muted)}

/* contact */
.mail{display:inline-block;font:500 clamp(1.125rem,.85rem + 1.3vw,1.625rem)/1.3 var(--mono);letter-spacing:-.02em;overflow-wrap:anywhere}
.contact .rows{margin-top:32px}
.tnum{font-variant-numeric:tabular-nums}

/* footer */
.site-foot .in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;padding-block:28px 36px;border-top:1px solid var(--line);font:400 .8125rem/1.5 var(--mono);color:var(--muted)}
.site-foot nav{display:flex;gap:20px}
.site-foot a{text-decoration:none}
.psst{flex-basis:100%;margin-top:28px;font:400 .6875rem/1.6 var(--mono);color:#0f1218;transition:color .5s}
.psst:hover,.psst:focus-within{color:var(--c4)}
.psst button{padding:0 3px;border:0;background:none;color:inherit;font:inherit;cursor:pointer}
.psst button:hover{color:var(--accent)}

/* legal pages */
.doc{padding-block:clamp(32px,8vh,80px) 96px}
.doc>*{max-width:40rem}
.doc h1{font-size:clamp(1.75rem,1.3rem + 1.6vw,2.375rem);letter-spacing:-.03em;line-height:1.1}
.doc .sub{margin-top:12px;color:var(--muted)}
.doc h2{margin:44px 0 10px;font-size:.9375rem;letter-spacing:-.005em}
.doc p+p{margin-top:12px}
.doc .stamp{margin-top:56px;font:400 .8125rem/1.5 var(--mono);color:var(--muted)}
.ph{padding:0 2px;color:var(--accent);font:400 .875em var(--mono);border-bottom:1px dashed currentColor}

/* 404 */
.nf{align-items:end}
.nf .code{font:400 .8125rem/1.5 var(--mono);color:var(--muted);margin-bottom:16px}
.nf .msg{max-width:24ch;font:500 clamp(1.375rem,1.1rem + 1vw,1.875rem)/1.3 var(--mono);letter-spacing:-.02em;text-wrap:pretty}
.nf .back{display:inline-block;margin-top:28px;font:400 .875rem/1.5 var(--mono)}

/* terminal */
.term{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:24px;background:rgb(12 14 19 / .8);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.term[hidden]{display:none}
.term-win{display:flex;flex-direction:column;width:min(100%,46rem);height:min(32rem,calc(100dvh - 48px));background:var(--c0);border:1px solid var(--c2);box-shadow:0 24px 80px rgb(0 0 0 / .55);color:var(--c6);font:400 .8125rem/1.6 var(--mono)}
.term-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:8px 10px 8px 16px;border-bottom:1px solid var(--c1);color:var(--c5);font-size:.75rem}
.term-bar button{padding:3px 8px;border:1px solid var(--c2);background:none;color:var(--c5);font:inherit;cursor:pointer}
.term-bar button:hover{border-color:var(--c4);color:var(--c6)}
.term-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:16px 18px 24px;cursor:text}
.term-out>div,.term-line{white-space:pre-wrap;overflow-wrap:anywhere}
.term-out>div{min-height:1.6em}
.term .dim{color:var(--c5)}
.term .acc,.term-prompt{color:var(--accent)}
.term a{color:var(--c6)}
.term a:hover{color:var(--accent)}
.term-line{position:relative}
.term-cursor{display:inline-block;width:.6em;height:1.2em;margin-left:1px;vertical-align:-.25em;background:var(--c6);animation:blink 1.06s steps(1) infinite}
.term-win:not(:focus-within) .term-cursor{background:none;box-shadow:inset 0 0 0 1px var(--c4);animation:none}
.term-input{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:none;color:transparent;caret-color:transparent;font-size:16px;opacity:0}
@keyframes blink{50%{opacity:0}}
@keyframes term-in{from{opacity:0}}
.term:not([hidden]){animation:term-in .14s ease-out}
.term-open,.term-open body{overflow:hidden}
@media (max-width:599px){.term{padding:0}.term-win{width:100%;height:100%;border:0}}

@media (prefers-reduced-motion:reduce){
  .stage.shake,.term-cursor,.term:not([hidden]){animation:none}
  *{transition:none!important}
}