@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

/* Reading pages share the landing page's identity, not its rendering effects. */
:root {
  color-scheme:dark;
  --bg:#000;
  --text:#fff;
  --muted:#b0b0b0;
  --line:#ffffff29;
  --accent:#9aff69;
  --display:'VT323','Courier New',monospace;
}
* { box-sizing:border-box; }
html { scroll-padding-top:175px; }
body { margin:0; background:var(--bg); color:var(--text); font:400 16px/1.75 Arial,sans-serif; }
a { color:inherit; text-decoration:none; text-underline-offset:5px; }
button { font:inherit; }
img { display:block; max-width:100%; }
h1,h2,h3,p { margin:0; }
h1,h2,h3 { font:400 2rem/1.1 var(--display); letter-spacing:.025em; text-transform:uppercase; overflow-wrap:break-word; }
p { color:var(--muted); }
::selection { background:var(--accent); color:#000; }
a:focus-visible,button:focus-visible,summary:focus-visible { outline:2px solid var(--accent); outline-offset:6px; }
.wrap { width:min(1200px,calc(100% - 96px)); margin-inline:auto; }
main { min-height:calc(100svh - 250px); }
.skip { position:fixed; top:-80px; left:20px; padding:12px; background:#fff; color:#000; z-index:100; }
.skip:focus { top:12px; }

/* A persistent, normally sized header keeps long pages easy to navigate. */
.site-header { position:sticky; top:0; z-index:10; background:#000; border-bottom:1px solid var(--line); }
.site-header .site-navigation nav {
  min-width:180px;
  padding:10px 20px;
  background:#080808;
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:0 16px 40px #0009;
}
.nav-shell { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding-top:24px; gap:20px; }
.brand { display:inline-flex; align-items:baseline; justify-self:start; white-space:nowrap; font:900 25px/1 Arial,sans-serif; letter-spacing:-.12em; transition:letter-spacing .35s ease; }
.brand-reveal { display:inline-block; max-width:0; opacity:0; overflow:hidden; white-space:pre; transition:max-width .4s cubic-bezier(.22,1,.36,1),opacity .25s ease; }
.brand-dot { display:inline-block; max-width:.4em; overflow:hidden; opacity:1; transition:max-width .35s ease,opacity .2s ease; }
.brand:is(:hover,:focus-visible) { letter-spacing:-.04em; }
.brand:is(:hover,:focus-visible) .brand-reveal { max-width:3em; opacity:1; }
.brand:is(:hover,:focus-visible) .brand-ending { max-width:1em; }
.brand:is(:hover,:focus-visible) .brand-dot { max-width:0; opacity:0; }
.site-wordmark { grid-column:2; text-align:center; font:400 clamp(20px,1.7vw,24px)/1.2 var(--display); letter-spacing:.08em; }
.nav-links { grid-column:1/-1; display:flex; flex-wrap:wrap; justify-content:center; gap:0 32px; }
.nav-links a { display:inline-flex; align-items:center; min-height:48px; color:var(--muted); font-size:14px; text-transform:uppercase; border-bottom:1px solid transparent; }
.nav-links a:is(:hover,:focus-visible),.nav-links a[aria-current=page] { color:var(--accent); }
.nav-links a[aria-current=page] { border-bottom-color:var(--accent); }

.eyebrow,.case-number { color:var(--accent); font:400 20px/1.3 var(--display); letter-spacing:.08em; text-transform:uppercase; }
.eyebrow::before { content:'// '; }
.page-header { padding:68px 0 48px; }
.page-header h1 { max-width:1000px; font-size:clamp(52px,7.4vw,96px); line-height:.98; margin:20px 0 24px; }
.page-header p { max-width:620px; font-size:18px; line-height:1.65; }
.page-header.split { display:flex; justify-content:space-between; align-items:end; gap:40px; }
.actions { display:flex; flex-wrap:wrap; align-items:center; gap:20px; margin-top:28px; }
.button { display:inline-flex; align-items:center; justify-content:space-between; gap:28px; min-height:48px; padding:12px 20px; border:1px solid #ffffff66; border-radius:4px; color:#fff; background:transparent; font:400 22px/1.2 var(--display); text-transform:uppercase; letter-spacing:.04em; }
.button:is(:hover,:focus-visible) { color:var(--accent); border-color:var(--accent); }
.text-link { display:inline-flex; align-items:center; gap:20px; padding:8px 0; border-bottom:1px solid var(--line); font-size:14px; }
.text-link:hover { color:var(--accent); border-color:var(--accent); }
.arrow { font-size:1.2em; }
.tag-line { color:var(--accent); font-size:14px!important; line-height:1.6; }

/* Projects: native anchor navigation and readable, unwarped case studies. */
.project-index { display:flex; flex-wrap:wrap; gap:4px 28px; padding:16px 0; border-block:1px solid var(--line); }
.project-index a { display:inline-flex; align-items:center; min-height:40px; font:400 21px/1.2 var(--display); letter-spacing:.03em; text-transform:uppercase; color:var(--muted); }
.project-index a:hover { color:var(--accent); }
.case-study { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:64px; align-items:start; padding:70px 0; border-bottom:1px solid var(--line); }
.case-study h2 { font-size:clamp(36px,4.2vw,58px); margin:16px 0; }
.case-study p+p { margin-top:18px; }
.case-study .intro { font-size:19px; line-height:1.55; color:#fff; margin:24px 0 16px; }
.chips { display:flex; flex-wrap:wrap; gap:12px 20px; }
.chip { font:400 19px/1.3 var(--display); color:var(--muted); text-transform:uppercase; }
.chip+.chip::before { content:'/'; color:#666; margin-right:20px; }
.case-art { width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; border:1px solid var(--line); border-radius:24px; }
.case-screenshot { object-fit:contain; background:#080808; }
.case-splash { object-fit:contain; background:#000; }
.case-cover-panel { display:grid; place-items:center; padding:24px; background:#092a0e; }
.case-cover-panel img { width:204px; height:auto; border-radius:12px; }
.case-title-panel { display:flex; flex-direction:column; justify-content:space-between; padding:clamp(24px,4vw,48px); background:#0d1510; color:var(--accent); }
.case-title-panel strong { font:400 clamp(40px,5vw,76px)/.95 var(--display); text-transform:uppercase; }
.case-title-panel span { font:400 18px/1.3 var(--display); letter-spacing:.06em; text-transform:uppercase; }
.case-title-panel--dogeball { background:#15120d; color:#f3c67c; }
.projects-back-top { padding:24px 0 48px; }
.design-note { margin-top:28px; padding:0 0 0 20px; border-left:1px solid #ffffff66; }
.design-note h3 { font-size:24px; margin-bottom:12px; }
.design-note p { font-size:16px; }
.case-study details { margin-top:24px; border-top:1px solid var(--line); }
.case-study summary { cursor:pointer; padding:16px 0; font:400 22px/1.3 var(--display); text-transform:uppercase; }
.case-study summary:hover,.case-study details[open] summary { color:var(--accent); }
.case-study iframe { width:100%; aspect-ratio:16/9; height:auto; border:0; border-radius:12px; margin-top:8px; }
.additional-projects { padding:64px 0; }
.additional-projects>h2 { font-size:clamp(34px,4vw,52px); margin-bottom:32px; }
.compact-project { display:grid; grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr); gap:64px; padding:40px 0; border-top:1px solid var(--line); }
.compact-project h3 { font-size:34px; margin-bottom:12px; }
.compact-project p { max-width:65ch; }
.compact-project .text-link { margin-top:16px; }
.compact-project p[style] { font-size:14px!important; }

/* Keep the project index alongside the full feature entries. */
.projects-wrap { width:min(1440px,calc(100% - 96px)); }
.projects-layout { display:grid; grid-template-columns:180px minmax(0,1fr); gap:48px; align-items:start; }
.projects-sidebar { position:sticky; top:120px; padding-top:24px; max-height:calc(100dvh - 144px); overflow-y:auto; }
.projects-sidebar h2 { color:var(--accent); font-size:22px; margin-bottom:16px; }
.projects-sidebar .project-index { display:flex; flex-direction:column; align-items:stretch; gap:0; border:0; padding:0; }
.projects-sidebar .project-index a { min-height:44px; padding:8px 0; font-size:20px; }
.projects-feed { min-width:0; }
.projects-feed>.case-study:first-child { padding-top:24px; }
.projects-feed .case-study { gap:36px; }
@media(max-width:1100px) {
  .projects-wrap { width:calc(100% - 56px); }
  .projects-layout { grid-template-columns:150px minmax(0,1fr); gap:28px; }
  .projects-feed .case-study { grid-template-columns:minmax(0,1fr); gap:28px; }
}
@media(max-width:760px) {
  .projects-wrap { width:calc(100% - 40px); }
  .projects-layout { grid-template-columns:minmax(0,1fr); gap:20px; }
  .projects-sidebar { position:static; max-height:none; padding:0; }
  .projects-sidebar .project-index { flex-direction:row; flex-wrap:wrap; gap:0 24px; padding-bottom:16px; border-bottom:1px solid var(--line); }
}
@media print { .projects-sidebar { display:none; } .projects-layout { display:block; } }

/* Resume: a skills rail and straightforward experience entries. */
.art-gallery { columns:3; column-gap:24px; padding-bottom:72px; }
.art-layout { display:grid; grid-template-columns:160px minmax(0,1fr); gap:36px; align-items:start; }
.art-layout:has(.art-filter-sidebar[hidden]) { grid-template-columns:minmax(0,1fr); }
.art-filter-sidebar { position:sticky; top:120px; }
.art-filter-sidebar h2 { font-size:22px; color:var(--accent); margin-bottom:16px; }
.art-filters { display:flex; flex-direction:column; align-items:stretch; }
.art-filters button { min-height:44px; padding:10px 0; border:0; background:transparent; color:var(--muted); cursor:pointer; text-align:left; font:400 22px/1.2 var(--display); text-transform:uppercase; }
.art-filters button[aria-pressed="true"],.art-filters button:hover { color:var(--accent); }
#art-filter-count { margin-top:20px; font-size:13px; }
.art-piece[hidden] { display:none; }
@media(max-width:1100px) { .art-layout .art-gallery { columns:2; } }
@media(max-width:760px) {
  .art-layout { grid-template-columns:minmax(0,1fr); gap:24px; }
  .art-filter-sidebar { position:static; }
  .art-filters { flex-direction:row; flex-wrap:wrap; gap:8px 24px; }
  #art-filter-count { margin-top:12px; }
}
@media(max-width:520px) { .art-layout .art-gallery { columns:1; } }
.art-piece { display:block; break-inside:avoid; margin-bottom:24px; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#111; }
.art-piece img { width:100%; height:auto; }
.art-piece[data-paper="true"] img,.art-viewer>img.art-paper { background:#fff; }
.art-piece:hover { border-color:var(--accent); }
.art-viewer { width:min(1100px,calc(100% - 32px)); max-height:calc(100dvh - 32px); padding:20px; background:#080808; color:#fff; border:1px solid #ffffff40; border-radius:14px; }
.art-viewer::backdrop { background:#000e; }
body:has(.art-viewer[open]) { overflow:hidden; }
.art-viewer-toolbar,.art-viewer-caption,.art-viewer-controls { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.art-viewer-toolbar { margin-bottom:12px; font:400 22px/1.2 var(--display); }
.art-viewer button { min-height:44px; padding:8px 12px; border:1px solid var(--line); border-radius:4px; color:#fff; background:#111; font:400 22px/1.2 var(--display); cursor:pointer; }
.art-viewer button:hover,.art-viewer a:hover { color:var(--accent); }
.art-viewer>img { width:100%; height:min(65dvh,750px); object-fit:contain; }
.art-viewer-caption { align-items:start; margin-top:16px; font-size:14px; }
.art-viewer-caption a { flex-shrink:0; padding-block:8px; }
.art-viewer-controls { margin-top:16px; }
@media(max-width:900px) { .art-gallery { columns:2; column-gap:18px; } .art-piece { margin-bottom:18px; } }
@media(max-width:520px) {
  .art-gallery { columns:1; }
  .art-viewer { padding:12px; }
  .art-viewer-caption { flex-direction:column; gap:4px; }
  .art-viewer>img { height:52dvh; }
}

.project-blog { max-width:900px; padding-top:32px; }
.project-blog .page-header { max-width:700px; margin-inline:auto; padding-top:36px; }
.project-blog .page-header h1 { font-size:clamp(48px,7vw,80px); }
.project-blog .page-header .blog-byline { margin-top:24px; font-size:14px; }
.blog-byline span { margin:0 12px; }
.project-blog .page-header .blog-context { margin-top:8px; font:400 20px/1.4 var(--display); }
.blog-art { margin-bottom:40px; }
.blog-art .case-art { object-fit:contain; background:#080808; }
.blog-copy { max-width:700px; margin-inline:auto; }
.blog-copy>h2 { font-size:32px; margin-bottom:18px; }
.blog-copy>p { font-size:18px; line-height:1.8; }
.blog-copy>.tag-line { margin-bottom:18px; }
.blog-copy .design-note { margin-top:36px; }
.blog-copy details { margin-top:28px; border-top:1px solid var(--line); }
.blog-copy summary { padding:16px 0; cursor:pointer; font:400 22px/1.3 var(--display); }
.blog-copy iframe { width:100%; height:auto; aspect-ratio:16/9; border:0; border-radius:12px; }
.blog-pagination { display:flex; flex-wrap:wrap; justify-content:space-between; gap:24px; margin:56px 0 40px; padding-top:24px; border-top:1px solid var(--line); }
.blog-pagination a { font:400 24px/1.3 var(--display); padding:10px 0; }
.blog-pagination a:hover { color:var(--accent); }

.resume-header { display:grid; grid-template-columns:minmax(0,1fr) clamp(220px,26vw,320px); align-items:center; gap:48px; }
.resume-header>div { min-width:0; }
.resume-portrait { width:100%; height:auto; aspect-ratio:1; object-fit:cover; border-radius:50%; border:1px solid #ffffff66; padding:6px; background:#000; }
.resume-layout { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:64px; padding:24px 0 80px; border-top:1px solid var(--line); }
.resume-side { border-left:1px solid var(--line); padding-left:28px; }
.resume-side section+section { margin-top:36px; }
.resume-side h2 { font-size:24px; color:var(--accent); margin-bottom:16px; }
.resume-side h3 { font-size:22px; margin:22px 0 8px; }
.resume-side p { font-size:16px; }
.resume-side p+p { margin-top:10px; }
.resume-main>h2 { font-size:38px; margin-bottom:24px; }
.resume-row { padding:28px 0; border-top:1px solid var(--line); }
.resume-row header { display:flex; justify-content:space-between; align-items:baseline; gap:20px; margin-bottom:12px; }
.resume-row h3 { font-size:32px; }
.resume-row h3 a:hover { color:var(--accent); }
.resume-row time { color:var(--muted); font:400 20px/1.3 var(--display); white-space:nowrap; text-transform:uppercase; }
.resume-row .tag-line { margin-bottom:16px; }
.resume-contact-links { display:flex; flex-wrap:wrap; gap:8px 12px; margin-bottom:24px; }
.resume-contact-links a { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; color:var(--text); }
.resume-contact-links svg { display:block; width:22px; height:22px; }
.resume-contact-links a:is(:hover,:focus-visible) { color:var(--accent); }
.page-header .resume-role { color:var(--text); font:400 24px/1.2 var(--display); text-transform:uppercase; letter-spacing:.04em; margin-bottom:12px; }
.resume-contact-details { margin-bottom:24px; }
.page-header .resume-contact-details p { max-width:none; font-size:14px; overflow-wrap:anywhere; }
.resume-contact-details p+p { margin-top:6px; }
.resume-contact-details span { margin:0 8px; }
.resume-contact-details a:hover { color:var(--accent); }
.resume-quote { margin:0; }
.resume-quote p { color:var(--text); }
.resume-quote footer { margin-top:8px; color:var(--muted); font:400 20px/1.3 var(--display); }
.philosophy { max-width:760px; padding:0 0 36px; }
.philosophy h2 { font-size:32px; margin-bottom:18px; }

/* Contact: the email is the main action, with no form or extra widgets. */
.contact-page { padding:72px 0 80px; }
.contact-page h1 { max-width:1050px; font-size:clamp(52px,8.5vw,110px); line-height:.98; margin:24px 0 28px; }
.contact-page>.contact-intro { max-width:610px; font-size:18px; }
.email-link { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:28px 0; margin-top:44px; border-block:1px solid var(--line); font:400 clamp(24px,3.6vw,46px)/1.25 var(--display); }
.email-link>span:first-child { min-width:0; overflow-wrap:anywhere; }
.email-link:hover { color:var(--accent); }
.contact-bottom { display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-top:40px; }
.contact-bottom h2 { color:var(--accent); font-size:24px; margin-bottom:14px; }
.site-footer { padding:28px 0; border-top:1px solid var(--line); }
.footer-inner { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:20px; color:var(--muted); font-size:14px; }
.footer-links { display:flex; flex-wrap:wrap; gap:8px 24px; }
.footer-links a { display:inline-flex; align-items:center; min-height:36px; font-size:14px; }
.footer-links a:hover { color:var(--accent); }
.muted { color:var(--muted); }

@media(max-width:1000px) {
  .wrap { width:calc(100% - 56px); }
  .case-study,.compact-project { gap:36px; }
  .resume-layout { grid-template-columns:minmax(0,1fr) 240px; gap:36px; }
  .resume-side { padding-left:20px; }
}
@media(max-width:760px) {
  .wrap { width:calc(100% - 40px); }
  .nav-shell { grid-template-columns:auto minmax(0,1fr); gap:16px; padding-top:20px; }
  .site-wordmark { justify-self:end; font-size:18px; }
  .nav-links { justify-content:space-between; column-gap:14px; }
  .nav-links a { font-size:14px; }
  .page-header { padding:44px 0 36px; }
  .resume-header { grid-template-columns:minmax(0,1fr); gap:28px; }
  .resume-portrait { width:180px; justify-self:center; }
  .page-header.split { display:block; }
  .page-header.split .actions { margin-top:26px; }
  .case-study { grid-template-columns:minmax(0,1fr); padding:44px 0; gap:32px; }
  .compact-project { grid-template-columns:minmax(0,1fr); gap:24px; padding:32px 0; }
  .resume-layout { grid-template-columns:minmax(0,1fr); gap:44px; }
  .resume-side { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; padding-left:0; border-left:0; }
  .resume-side section+section { margin-top:0; }
  .resume-row header { flex-wrap:wrap; gap:10px; }
  .contact-page { padding:48px 0; }
  .contact-bottom { grid-template-columns:minmax(0,1fr); gap:32px; }
  .footer-inner { align-items:start; flex-direction:column; }
}
@media(max-width:420px) {
  .resume-side { grid-template-columns:minmax(0,1fr); }
  .nav-links { column-gap:10px; }
  .nav-links a { font-size:13px; }
}
@media(prefers-reduced-motion:reduce) {
  .brand,.brand-reveal,.brand-dot { transition:none; }
}
@media print {
  :root { color-scheme:light; --text:#000; --muted:#333; --accent:#000; --line:#bbb; }
  body { background:#fff; color:#000; font-size:11pt; }
  .site-header,.site-footer,.actions,.skip { display:none; }
  .wrap { width:100%; }
  main { min-height:0; }
  .page-header { padding:0 0 24px; }
  .page-header h1 { font-size:32pt; }
  .resume-layout { grid-template-columns:minmax(0,1fr) 200px; gap:24px; }
  .resume-side { display:block; padding-left:20px; border-left:1px solid var(--line); }
  .resume-side section+section { margin-top:24px; }
  .resume-row { break-inside:avoid; }
  .resume-row h3 { font-size:20pt; }
  .resume-side h2,.resume-side h3 { font-size:15pt; }
}
.nav-shell { padding-bottom:24px; }