@font-face{font-family:Pixelify;src:url('/fonts/pixelify-sans.woff') format('woff');font-style:normal;font-weight:400;font-display:swap}
:root{color-scheme:light;--paper:#edf0f2;--ink:#293b4a;--muted:#647684;--line:#b5c1c9;--pixel:Pixelify,ui-monospace,monospace}
*{box-sizing:border-box}
html{min-height:100%;background:var(--paper)}
body{min-height:100vh;min-height:100svh;margin:0;display:grid;place-items:center;color:var(--ink);background-color:var(--paper);background-image:radial-gradient(#b6c3cd 0.65px,transparent 0.65px);background-size:20px 20px;font:400 16px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
main{width:100%;padding:96px 24px 80px;text-align:center}
.site-name{position:absolute;left:32px;top:26px;display:flex;align-items:center;gap:10px;color:var(--muted);font:16px/1 var(--pixel)}
.site-name svg{width:18px;height:18px;color:var(--ink)}
.portfolio{max-width:800px}
h1{margin:0;font:400 clamp(38px,5vw,56px)/1.1 var(--pixel);letter-spacing:-1.5px;text-wrap:balance}
.intro{margin:16px 0 0;color:var(--muted);font:400 22px/1.4 var(--pixel)}
.projects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 24px;list-style:none;padding:0;margin:42px auto 0;max-width:660px}
.projects li{min-width:0;margin:0}
a{color:inherit;text-decoration:none}
.project{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:12px 4px 10px;outline-offset:2px;-webkit-tap-highlight-color:transparent}
.folder{display:block;width:160px;height:auto;overflow:visible;shape-rendering:crispEdges;transition:transform .22s ease;--folder:#e7c995;--folder-back:#c4a77b;--folder-edge:#8d795f;--folder-light:#f5dfb8;--glyph:#856640}
.coral .folder{--folder:#ee9b8d;--folder-back:#ce7e70;--folder-edge:#ab6157;--folder-light:#f5c2b7;--glyph:#98564e}
.blue .folder{--folder:#adcbe0;--folder-back:#89abc4;--folder-edge:#69869e;--folder-light:#d3e4ee;--glyph:#56758e}
.purple .folder{--folder:#bcb2d8;--folder-back:#9488b7;--folder-edge:#73698f;--folder-light:#ddd6ef;--glyph:#62587f}
.yellow .folder{--folder:#e9c66e;--folder-back:#cb9e49;--folder-edge:#a77d33;--folder-light:#f3dc98;--glyph:#806022}
.deep-blue .folder{--folder:#6e95bb;--folder-back:#456e95;--folder-edge:#315675;--folder-light:#9eb9d2;--glyph:#24425c}
.orange .folder{--folder:#e79557;--folder-back:#c3743e;--folder-edge:#a85b30;--folder-light:#f2be83;--glyph:#784323}
.folder-shadow{fill:#314b5d;opacity:.12}
.folder-outline{fill:var(--folder-edge)}
.folder-back{fill:var(--folder-back)}
.folder-front{fill:var(--folder)}
.folder-highlight{fill:var(--folder-light)}
.folder-paper{fill:#faf9f3;transition:transform .22s ease}
.folder-paper-lines{fill:#c5ccd0}
.folder-glyph{fill:var(--glyph)}
.project-label{display:block;max-width:100%;min-height:30px;padding:3px 0;font:400 18px/1.25 var(--pixel);text-wrap:pretty;transition:background .15s,color .15s}
.locked-label{white-space:nowrap}
.label-lock{display:inline-block;width:10px;height:12px;margin-left:6px;vertical-align:-1px;fill:currentColor;color:var(--muted)}
.project:focus-visible{outline:2px dashed var(--ink);border-radius:4px}
.project:focus-visible .project-label{background:#dae3e9}
@media(hover:hover){.project:hover .folder{transform:translateY(-5px)}.project:hover .folder-paper{transform:translateY(-3px)}.project:hover .project-label{background:#dae3e9}.project:active .folder{transform:translateY(-1px)}}
::selection{background:#b9cedc;color:var(--ink)}
/* Unpublished projects share the desktop's typography and colors. */
.locked{max-width:440px;padding-top:64px;padding-bottom:64px}
.page-lock{width:25px;height:25px;margin:0 auto 22px;color:var(--muted)}
.locked h1{font-size:38px;letter-spacing:-.5px}
.locked .intro{font:16px/1.5 var(--pixel);margin-top:12px}
.password-form{max-width:280px;margin:28px auto 0}
.password-form label{display:block;margin-bottom:8px;color:var(--muted);font:16px/1.4 var(--pixel);text-align:left}
input,button{font:inherit}
.password-form input{display:block;width:100%;height:46px;padding:10px 13px;border:1px solid var(--line);border-radius:3px;background:#fafbf9;color:var(--ink);font-size:16px}
.password-form input::placeholder{color:#8b99a1}
.password-form button{display:block;width:100%;min-height:44px;margin-top:10px;padding:10px 16px;border:1px solid var(--ink);border-radius:3px;background:var(--ink);color:white;font:18px/1.4 var(--pixel);cursor:pointer}
.password-form button:hover{background:#42586a}
.password-status{min-height:40px;margin:12px 0 18px;color:var(--muted);font-size:13px;line-height:1.5}
.back-link{display:inline-block;padding:10px;color:var(--muted);font:17px/1.5 var(--pixel)}
.back-link:hover{text-decoration:underline;text-underline-offset:4px}
.password-form input:focus-visible,.password-form button:focus-visible,.back-link:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
@media(max-width:600px){main{padding:94px 18px 46px}.site-name{left:24px;top:24px;font-size:15px}.portfolio{max-width:430px}h1{font-size:39px;letter-spacing:-1px}.intro{font-size:19px;margin-top:12px}.projects{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px;margin-top:28px;max-width:360px}.folder{width:136px}.project{padding:6px 0;gap:0}.project-label{font-size:17px;padding:3px 5px;min-height:32px}.locked h1{font-size:34px}}
@media(max-width:360px){.folder{width:120px}.projects{column-gap:4px}.project-label{font-size:16px}h1{font-size:34px}.intro{font-size:17px}}
@media(prefers-reduced-motion:reduce){.folder,.folder-paper,.project-label{transition:none}}