/* Error404 resume: Digital mode (screen). Tokens from branding.error404.net tokens.css. */
@import url(fonts.css);

:root{
  --surface:#231451; --surface-deep:#170C38; --surface-raised:#1C1044; --surface-glow:#241A5C;
  --text-strong:#F4F1FF; --text-body:#E8E4FF; --text-muted:#C9C3EF; --text-subtle:#8A83B8;
  --accent-primary:#4DE1FF; --accent-secondary:#FF5FA2;
  --border:#4DE1FF33; --border-strong:#4DE1FF44; --border-subtle:#4DE1FF22;
  --font-display:'Press Start 2P',monospace;
  --font-terminal:'VT323',monospace;
  --font-body:'JetBrains Mono',monospace;
  --page-bg:var(--surface-deep) radial-gradient(ellipse at 50% 0%,var(--surface-glow) 0%,var(--surface-deep) 60%) no-repeat;
  --scan:.04; --glow:#4DE1FF55;
}
/* NFO: black, gray, flat terminal. */
:root[data-theme="nfo"]{
  --surface:#000; --surface-deep:#000; --surface-raised:#0A0A0A; --page-bg:#000; --scan:0; --glow:transparent;
  --text-strong:#FFF; --text-body:#CCC; --text-muted:#AAA; --text-subtle:#888;
  --accent-primary:#BBB; --accent-secondary:#DDD;
  --border:#333; --border-strong:#444; --border-subtle:#222;
}
/* Light: monochrome NFO on paper. */
:root[data-theme="light"]{
  --surface:#FFF; --surface-deep:#FFF; --surface-raised:#F5F5F5; --page-bg:#FFF; --scan:0; --glow:transparent;
  --text-strong:#000; --text-body:#111; --text-muted:#444; --text-subtle:#666;
  --accent-primary:#000; --accent-secondary:#222;
  --border:#CCC; --border-strong:#999; --border-subtle:#DDD;
}
:root[data-theme="nfo"] .mark-color,:root[data-theme="light"] .mark-color{display:none}
:root[data-theme="nfo"] .mark-white{display:block}
:root[data-theme="light"] .mark-black{display:block}
.mark-white{display:none}
:root[data-theme="light"] ::selection{background:#000;color:#FFF}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font:15px/1.65 var(--font-body);color:var(--text-body);
  background:var(--page-bg);
  min-height:100vh;
}
/* CRT scanlines: texture only, never over text interaction */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9;
  background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,0,0,var(--scan)) 2px 4px)}
::selection{background:var(--accent-primary);color:var(--surface)}
.wrap{max-width:52rem;margin:0 auto;padding-inline:1.5rem}
a{color:var(--accent-primary)}
a:hover{text-decoration-style:dashed}
a:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px}
.skip{position:absolute;left:-999px}
.skip:focus{left:1rem;top:1rem;background:var(--surface);padding:.5rem;z-index:20}

.topbar{border-bottom:1px solid var(--border);background:var(--surface-raised)}
.bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;padding-block:.6rem;font-size:.8rem}
.wordmark{font-family:var(--font-terminal);font-size:1.4rem;letter-spacing:1px;color:var(--text-strong)}
.bar nav{display:flex;gap:1.25rem;align-items:center}
.bar nav a{text-transform:uppercase;letter-spacing:1px;text-decoration:none;color:var(--text-muted)}
.bar nav a:hover{color:var(--accent-primary)}

.hero{display:flex;gap:1.5rem;align-items:center;padding-block:3rem 2rem;border-bottom:1px solid var(--border)}
.mark-black{display:none;flex:none;width:4rem;height:4rem}
.mark-white,.mark-color{flex:none;width:4rem;height:4rem;filter:drop-shadow(0 0 12px var(--glow))}
.hero h1{font:400 clamp(1.5rem,4.5vw,2.1rem)/1.3 var(--font-display);color:var(--text-strong);margin:0 0 .9rem;letter-spacing:1px}
.hero h1::after{content:"█";color:var(--accent-primary);margin-left:.4rem;animation:blink 1s step-end infinite}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.hero h1::after{animation:none}}
.tagline{margin:0 0 .5rem;color:var(--accent-primary);font-weight:700}
.desc{margin:0 0 1rem;color:var(--text-muted)}
.contact{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.25rem 1.5rem;font-size:.85rem;color:var(--text-muted)}
.contact .loc::before{content:"~/ ";color:var(--accent-secondary)}

.content{padding-bottom:2rem}
.content h2{font:400 1.9rem/1.2 var(--font-terminal);letter-spacing:1px;color:var(--accent-secondary);margin:2.75rem 0 1rem;padding-bottom:.4rem;border-bottom:1px solid var(--border)}
.content h2::before{content:":: ";color:var(--text-subtle)}
.content h3{font:400 1.4rem/1.3 var(--font-terminal);letter-spacing:1px;color:var(--text-strong);margin:1.75rem 0 .25rem}
.content p{margin:.4rem 0 .9rem}
.content strong{color:var(--text-strong)}
.content h3 + p{color:var(--text-muted);font-size:.85rem;margin-top:0}
.content ul{margin:.5rem 0 1rem;padding:0;list-style:none}
.content li{position:relative;padding-left:1.4rem;margin-bottom:.4rem}
.content li::before{content:">";position:absolute;left:0;color:var(--accent-primary)}
/* backtick skills render as chips */
.content code{display:inline-block;font:inherit;font-size:.78rem;line-height:1.4;padding:.15rem .55rem;margin:.15rem .15rem .15rem 0;
  border:1px solid var(--border-strong);border-radius:2px;background:var(--surface-raised);color:var(--text-body)}
/* project titles: last h3 group has description only; keep them tight */
.content h3 + p:not(:has(strong)){margin-top:.1rem}

.foot{padding-block:2rem 3rem;border-top:1px solid var(--border-subtle);font-size:.75rem;color:var(--text-subtle);text-align:center}
.nfo{margin:0 0 .75rem;font:inherit;color:var(--text-subtle);white-space:pre-wrap}
.foot p{margin:0}

@media (max-width:640px){
  body{font-size:14px}
  .wrap{padding-inline:1rem}
  .hero{flex-direction:column;align-items:flex-start;padding-top:2rem}
  .content h2{font-size:1.6rem}
}
@media print{.topbar,.skip,body::after{display:none}}

.theme-toggle{background:none;border:1px solid var(--border-strong);color:var(--text-muted);font:inherit;font-size:.8rem;padding:.25rem .6rem;border-radius:2px;cursor:pointer}
.theme-toggle:hover{border-color:var(--accent-primary);color:var(--accent-primary)}
.theme-toggle:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px}
:root[data-theme="nfo"] .hero h1::after{color:var(--text-muted)}

/* skill chips */
.skill{margin:0 0 1rem}
.skill > strong{display:block;margin-bottom:.35rem}
.chips{display:flex;flex-wrap:wrap;gap:.35rem;margin:0;padding:0;list-style:none}
.content .chips li{padding:.15rem .55rem;margin:0;font-size:.78rem;line-height:1.4;color:var(--text-body);
  border:1px solid var(--border-strong);border-radius:2px;background:var(--surface-raised)}
.content .chips li::before{content:none}
.hero .tagline{margin-bottom:1rem}