@font-face {
  font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/portfolio/dm-sans-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans'; font-style: normal; font-weight: 500 800; font-display: swap;
  src: url('/assets/portfolio/dm-sans-medium.woff2') format('woff2');
}
:root {
  color-scheme: dark;
  --bg: #111310;
  --surface: #191c16;
  --surface-raised: #20251b;
  --ink: #f0f1e9;
  --muted: #a6ae9e;
  --accent: #d6f68a;
  --line: #343a2e;
  --mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  --gutter: clamp(24px, 5.2vw, 88px);
}
* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: 'DM Sans', Arial, sans-serif; font-size: 16px;
  line-height: 1.65; -webkit-font-smoothing: antialiased;
}
::selection { color: var(--bg); background: var(--accent); }
a { color: inherit; text-underline-offset: 5px; text-decoration-thickness: 1px; }
button { font: inherit; cursor: pointer; }
button[hidden] { display: none !important; }
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-weight: 500; }
h2 { margin-bottom: 24px; font-size: clamp(2.1rem, 4.6vw, 4rem); line-height: 1.09; letter-spacing: -.055em; }
h3 { line-height: 1.35; letter-spacing: -.02em; }
p { margin-bottom: 20px; }
ul { padding-left: 22px; }
li + li { margin-top: 8px; }
.container, .header-inner { width: min(1320px, calc(100% - var(--gutter) * 2)); margin-inline: auto; }
.site-header { position: sticky; top: 0; background: var(--bg); z-index: 20; border-bottom: 1px solid var(--line); }
.header-inner { min-height: 100px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.wordmark { display: inline-flex; align-items: center; gap: 18px; text-decoration: none; flex-shrink: 0; }
.monogram { font-family: var(--mono); font-size: 26px; line-height: 1; letter-spacing: -.1em; }
.monogram span { color: var(--accent); }
.wordmark-name { font-size: .85rem; letter-spacing: -.01em; }
.site-header nav { display: flex; gap: 30px; }
.site-header nav a { position: relative; font-size: .8rem; color: var(--muted); text-decoration: none; padding-block: 14px; }
.site-header nav a:hover, .site-header nav a[aria-current] { color: var(--accent); }
.site-header nav a[aria-current]::after { content: ''; position: absolute; bottom: 5px; left: 0; width: 16px; height: 2px; background: var(--accent); }
.header-actions { display: flex; align-items: center; gap: 22px; }
.language-switch { display: inline-flex; align-items: center; flex-shrink: 0; font-family: var(--mono); font-size: .65rem; }
.language-switch a { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 44px; color: var(--muted); text-decoration: none; border-bottom: 1px solid transparent; }
.language-switch a:hover, .language-switch a[aria-current] { color: var(--accent); border-color: var(--accent); }
.language-switch > span { color: var(--muted); }
.documentation-language { color: var(--muted); font-family: var(--mono); font-size: .65rem !important; }
.cv-link { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; font-family: var(--mono); font-size: .72rem; padding-block: 14px; }
.cv-link:hover { color: var(--accent); }
.motion-toggle { background: transparent; border: 1px solid var(--line); color: var(--muted); border-radius: 0; font-family: var(--mono); font-size: .65rem; padding: 7px 10px; min-height: 36px; }
.motion-toggle:hover { color: var(--ink); border-color: var(--muted); }
.hero { position: relative; padding-top: 54px; padding-bottom: 28px; }
.hero-top { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; }
.eyebrow, .section-label, .micro-label { font-family: var(--mono); font-size: .66rem; font-weight: 400; line-height: 1.7; letter-spacing: .075em; text-transform: uppercase; }
.eyebrow { color: var(--muted); }
.hero-top .eyebrow { color: var(--ink); }.hero-top .eyebrow span { color: var(--line); padding-inline: 15px; }
.hero-location { font-family: var(--mono); font-size: .66rem; white-space: nowrap; color: var(--muted); }
.status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 9px; background: var(--accent); vertical-align: 1px; }
.status-dot.neutral { background: var(--muted); }
.hero h1 { position: relative; z-index: 1; margin-top: 28px; margin-bottom: 36px; font-size: clamp(3.4rem, 7.9vw, 8rem); line-height: .99; letter-spacing: -.075em; }
.hero-line { display: block; }.accent { color: var(--accent); }
.hero-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 50px; }
.hero-bottom > p { max-width: 460px; margin: 0; color: var(--muted); font-size: .96rem; line-height: 1.7; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 24px; }
.hero-actions .button { margin-right: 8px; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 25px; border: 1px solid var(--line); text-decoration: none; font-size: .78rem; font-weight: 500; line-height: 1.2; min-height: 48px; padding: 14px 20px; transition: background .18s, border-color .18s, color .18s; }
.button.primary { color: var(--bg); background: var(--accent); border-color: var(--accent); }
.button.primary:hover { background: #e6ffb2; border-color: #e6ffb2; }
.button.secondary { background: transparent; color: var(--ink); }
.button.secondary:hover { border-color: var(--muted); background: var(--surface); }
.text-link { display: inline-flex; align-items: center; gap: 12px; font-size: .78rem; text-decoration: none; min-height: 40px; }
.text-link:hover { color: var(--accent); }.text-link > span[aria-hidden] { color: var(--accent); }
.hero-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 58px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted); font-family: var(--mono); font-size: .59rem; text-transform: uppercase; letter-spacing: .06em; }
.hero-foot span[aria-hidden] { margin-left: 20px; color: var(--accent); font-size: .9rem; }
.work-intro { display: flex; justify-content: space-between; align-items: center; padding-top: 86px; padding-bottom: 28px; gap: 30px; }
.work-intro p { margin: 0; }.work-intro > p:last-child { font-size: .78rem; color: var(--muted); }
.project-section, .selected-section, .approach-section, .skills-section, .background-section, .contact-section { position: relative; border-top: 1px solid var(--line); padding-block: 66px; }
.travel-panel { position: relative; transform-origin: center center; }
.travel-panel:focus-within { transform: none !important; opacity: 1 !important; }
@media (min-width: 1100px) {
  html[data-motion='on'] .project-section,
  html[data-motion='on'] .selected-section,
  html[data-motion='on'] .approach-section,
  html[data-motion='on'] .skills-section,
  html[data-motion='on'] .background-section,
  html[data-motion='on'] .contact-section { perspective: 1600px; perspective-origin: center center; }
}
.section-label { margin-bottom: 40px; color: var(--muted); }.section-label > span { margin-right: 28px; color: var(--accent); }
.featured-grid { display: grid; grid-template-columns: 1fr 1.05fr; align-items: center; gap: clamp(40px, 7vw, 100px); }
.project-copy > .eyebrow { font-size: .62rem; margin-bottom: 13px; }
.project-copy h2 { font-size: clamp(3rem, 5.5vw, 5rem); margin-bottom: 24px; letter-spacing: -.065em; }
.project-statement { font-size: 1.25rem; line-height: 1.45; max-width: 400px; letter-spacing: -.025em; }
.project-summary { color: var(--muted); font-size: .86rem; line-height: 1.8; max-width: 480px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin-block: 25px 28px; }
.tags li { margin: 0; color: var(--muted); font-family: var(--mono); font-size: .57rem; padding: 5px 9px; border: 1px solid var(--line); line-height: 1.4; }
.project-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }.project-actions .text-link { margin-left: 4px; }
.system-visual { border: 1px solid #3d4930; background: var(--surface); position: relative; padding: 22px; }
.visual-topline { display: flex; align-items: center; gap: 4px; color: var(--ink); font-family: var(--mono); font-size: .57rem; border-bottom: 1px solid var(--line); padding-bottom: 15px; }
.visual-topline > span:last-child { margin-left: auto; color: var(--muted); }.visual-topline > .status-dot { margin-left: 0; }
.system-diagram { padding-block: 28px 12px; text-align: center; position: relative; }
.system-diagram strong, .system-diagram span { display: block; }.system-diagram strong { font-size: .82rem; font-weight: 500; }.system-diagram span { color: var(--muted); font-family: var(--mono); font-size: .53rem; margin-top: 4px; }
.system-diagram .diagram-icon { color: var(--accent); font-size: 1.1rem; margin-bottom: 8px; }
.diagram-source { width: 80%; margin-inline: auto; }.diagram-connector { width: 1px; height: 27px; background: var(--line); margin-inline: auto; }
.diagram-core { position: relative; width: 80%; margin-inline: auto; padding: 20px; background: var(--surface-raised); border: 1px solid #617b42; }
.diagram-core strong { font-size: 1.55rem; line-height: 1.15; letter-spacing: -.03em; margin-block: 8px 12px; }.diagram-core .micro-label { color: var(--accent); font-size: .5rem; }
.diagram-branches { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding-top: 30px; }
.diagram-branches > div { position: relative; padding: 16px 10px; border: 1px solid var(--line); }.diagram-branches > div::before { content: ''; width: 1px; height: 30px; background: var(--line); position: absolute; top: -31px; left: 50%; }
.diagram-branches .micro-label { color: var(--accent); margin-bottom: 8px; }.diagram-result { padding-top: 25px; font-family: var(--mono); font-size: .58rem; color: var(--muted); }.diagram-result span { display: inline; }.diagram-result > span:first-child { color: var(--accent); margin-right: 7px; }.diagram-result .result-divider { margin-inline: 12px; }
figcaption { color: var(--muted); font-family: var(--mono); font-size: .55rem; line-height: 1.7; margin-top: 18px; }
.system-visual figcaption { border-top: 1px solid var(--line); padding-top: 15px; }
.project-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; border-top: 1px solid var(--line); margin-top: 40px; padding-top: 21px; }
.project-status { margin: 0; color: var(--muted); font-family: var(--mono); font-size: .59rem; }
.highlights { display: flex; flex-wrap: wrap; gap: 20px; list-style: none; margin: 0; padding: 0; color: var(--muted); font-size: .66rem; }.highlights li { margin: 0; }.highlights li::before { content: '+'; color: var(--accent); margin-right: 8px; }
.evidence-path { padding-top: 26px; }.evidence-path > p { margin-bottom: 14px; font-size: .53rem; color: var(--muted); }
.evidence-path ol { display: flex; flex-wrap: wrap; gap: 0; list-style: none; padding: 0; margin: 0; }.evidence-path li { display: flex; align-items: center; margin: 0; padding-block: 7px; font-family: var(--mono); font-size: .53rem; color: var(--ink); }.evidence-path li + li::before { content: '→'; padding-inline: clamp(10px, 2.2vw, 30px); color: var(--muted); }
.game-visual { position: relative; border: 1px solid #403e37; background: #1c1d19; padding: 22px; }.game-visual .visual-topline { border-color: #403e37; color: #c6bdae; }
.game-wireframe { position: relative; min-height: 335px; color: #c6bdae; display: flex; align-items: center; justify-content: center; overflow: hidden; }.game-wireframe svg { position: absolute; width: 100%; height: 100%; opacity: .26; }.game-visual-title { position: relative; text-align: center; font-size: clamp(2.6rem, 4vw, 3.7rem); line-height: 1; letter-spacing: -.045em; }.game-visual-title i { display: block; margin-top: 7px; font-family: Georgia, serif; font-weight: 400; color: #c6bdae; }
.game-visual figcaption { border-top: 1px solid #403e37; padding-top: 15px; }
.featured .project-copy h2 { font-size: clamp(2.6rem, 4.7vw, 4.25rem); }.featured .section-label > span { color: #c6bdae; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 36px; }.section-heading h2 { margin: 0; }.section-heading > p { color: var(--muted); font-size: .78rem; margin: 0 0 5px; }
.selected-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.selected-card { display: flex; flex-direction: column; padding: 30px; border: 1px solid var(--line); background: #151812; }
.selected-top { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 30px; }.selected-top .micro-label { font-size: .55rem; color: var(--muted); }.selected-symbol { font-size: 1.4rem; color: var(--accent); font-family: var(--mono); line-height: 1; }
.selected-card h3 { font-size: 1.7rem; letter-spacing: -.05em; margin-bottom: 12px; }.selected-card > p { font-size: .82rem; line-height: 1.8; color: var(--muted); }.selected-card .selected-statement { color: var(--ink); font-size: .93rem; line-height: 1.5; }.selected-card .tags { margin-block: auto 24px; padding-top: 10px; }.selected-card .project-actions { gap: 14px; }.selected-card .button { min-height: 44px; padding: 12px 16px; font-size: .7rem; }.selected-card .project-actions .text-link { font-size: .7rem; }
.approach-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(50px, 8vw, 120px); align-items: start; }
.section-summary { color: var(--muted); font-size: .86rem; max-width: 480px; line-height: 1.8; margin-top: 30px; margin-bottom: 25px; }
.workflow { list-style: none; padding: 0; margin: 0; }.workflow li { display: flex; gap: 25px; margin: 0; padding-block: 21px; border-top: 1px solid var(--line); }.workflow li:first-child { padding-top: 4px; border-top: 0; }.workflow li:last-child { padding-bottom: 0; }
.step-number { color: var(--accent); font-family: var(--mono); font-size: .6rem; padding-top: 5px; }.workflow h3 { font-size: .98rem; margin-bottom: 9px; }.workflow p { margin: 0; font-size: .79rem; line-height: 1.8; color: var(--muted); }
.skills-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 35px; padding-top: 14px; }.skills-grid h3 { font-family: var(--mono); color: var(--muted); text-transform: uppercase; font-size: .58rem; font-weight: 400; letter-spacing: .05em; margin-bottom: 23px; }.skills-grid ul { padding: 0; margin: 0; list-style: none; }.skills-grid li { font-size: .83rem; margin-block: 0 12px; }
.earlier-work { display: grid; grid-template-columns: 1fr 3fr; gap: 35px; margin-top: 36px; padding-top: 25px; border-top: 1px solid var(--line); }.earlier-work h3 { font-family: var(--mono); font-size: .56rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 400; line-height: 1.8; }.earlier-work p { margin: 0; font-size: .75rem; color: var(--muted); line-height: 1.8; }
.background-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(50px, 8vw, 120px); }.education { padding-top: 8px; }.education .micro-label { color: var(--muted); font-size: .58rem; margin-bottom: 25px; }.education h3 { font-size: 1.25rem; margin-bottom: 12px; }.education > p:not(.micro-label) { font-size: .83rem; }.education .muted { color: var(--muted); margin-bottom: 28px; }
.contact-section { padding-bottom: 80px; }.contact-section > .travel-panel > .eyebrow { font-size: .59rem; margin-bottom: 20px; }.contact-section h2 { font-size: clamp(3rem, 7vw, 6.6rem); line-height: 1.03; letter-spacing: -.065em; margin-bottom: 40px; }
.contact-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }.contact-bottom p { color: var(--muted); font-size: .82rem; margin-bottom: 16px; }.email-link { display: inline-flex; align-items: center; gap: 30px; font-size: clamp(1.2rem, 2.5vw, 2rem); line-height: 1.5; letter-spacing: -.03em; text-decoration: none; border-bottom: 1px solid #5b6847; }.email-link:hover { color: var(--accent); }.email-link > span[aria-hidden] { color: var(--accent); }.contact-links { display: flex; gap: 30px; align-items: center; }
.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 30px; border-top: 1px solid var(--line); padding-block: 28px; color: var(--muted); font-size: .6rem; font-family: var(--mono); }.site-footer p { margin: 0; }.site-footer a { padding-block: 12px; text-decoration: none; }.site-footer a:hover { color: var(--accent); }.site-footer a span { margin-left: 20px; }
.spatial-background { display: none; position: fixed; pointer-events: none; z-index: 0; inset: 0 0 0 40%; color: #9fbd79; opacity: .07; overflow: hidden; }.spatial-background svg { width: 100%; height: 100%; stroke-width: .6; }
html[data-motion='on'] .spatial-background { display: block; }
main.container, .site-footer { position: relative; z-index: 1; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -100px; left: 16px; padding: 12px 20px; z-index: 100; color: var(--bg); background: var(--accent); text-decoration: none; }.skip-link:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 1px; }
[id] { scroll-margin-top: 140px; }#main:focus { outline: none; }
/* Case studies stay in a calm document flow. */
.study-main { padding-top: 40px; }.back-link { color: var(--muted); }.study-hero { padding-top: 60px; padding-bottom: 55px; }.study-hero .section-label { margin-bottom: 18px; }.study-hero h1 { font-size: clamp(3.2rem, 7.5vw, 7rem); letter-spacing: -.07em; line-height: 1.02; margin-bottom: 30px; }.study-lead { max-width: 850px; color: var(--muted); font-size: clamp(1.1rem, 2.1vw, 1.6rem); line-height: 1.65; }
.study-facts { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 36px; border-top: 1px solid var(--line); margin-top: 40px; padding-top: 25px; }.study-facts dt { font-family: var(--mono); font-size: .57rem; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }.study-facts dd { margin: 0; font-size: .78rem; line-height: 1.8; }
.study-layout { display: grid; grid-template-columns: 240px minmax(0, 800px); gap: 80px; border-top: 1px solid var(--line); align-items: start; }.study-toc { position: sticky; top: 140px; margin-block: 48px; }.study-toc .micro-label { font-size: .56rem; color: var(--muted); }.study-toc a { display: block; text-decoration: none; color: var(--muted); font-size: .72rem; line-height: 1.6; padding-block: 9px; }.study-toc a:hover { color: var(--accent); }.study-body > section { padding-block: 45px; border-bottom: 1px solid var(--line); }.study-body > section:last-child { border-bottom: 0; }.study-body h2 { font-size: 1.7rem; letter-spacing: -.035em; margin-bottom: 22px; }.study-body p, .study-body li { color: var(--muted); font-size: .93rem; line-height: 1.9; }.study-body p:last-child { margin-bottom: 0; }.study-body .sources li { font-family: var(--mono); font-size: .65rem; }.study-next { display: flex; justify-content: space-between; align-items: center; padding-block: 50px; border-top: 1px solid var(--line); }.study-next .micro-label { color: var(--muted); }
.project-media { padding: 18px; background: var(--surface); border: 1px solid var(--line); }.project-media img { width: 100%; }.study-hero > .project-media { margin-top: 45px; max-width: 1000px; }.project-media a { display: block; }.evidence-placeholder .micro-label { color: var(--accent); }
.study-visual { margin-block: 28px; padding: 24px; border: 1px solid var(--line); background: var(--surface); }
.study-visual > .micro-label { color: var(--accent); font-size: .63rem; }
.study-visual ol, .study-visual ul { margin: 0; padding: 0; list-style: none; }
.study-visual li { min-width: 0; margin: 0; padding: 16px; border: 1px solid var(--line); }
.study-visual li strong { display: block; font-size: .86rem; color: var(--ink); }
.study-visual li span, .study-visual li small { display: block; margin-top: 6px; font-size: .78rem; line-height: 1.65; }
.study-visual li small { color: var(--accent); }
.study-visual figcaption { margin-top: 18px; color: var(--muted); font-size: .72rem; line-height: 1.7; }
.study-visual-layers li { display: grid; grid-template-columns: minmax(110px, .6fr) minmax(0, 1fr); gap: 16px; }
.study-visual-layers li span { margin: 0; }
.study-visual-priority ol, .study-visual-integration ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.study-visual-priority li .state-priority { margin: 0 0 8px; color: var(--accent); font-family: var(--mono); font-size: .6rem; }
.study-visual-layers li + li { position: relative; margin-top: 28px; }
.study-visual-layers li + li::before { content: '↓'; position: absolute; top: -26px; left: 15px; color: var(--accent); font-family: var(--mono); }
.media-pending { margin-block: 24px; padding: 22px; border-left: 2px solid var(--line); background: var(--surface); }
.media-pending .micro-label { color: var(--muted); font-size: .58rem; }
.media-pending h3 { margin-bottom: 8px; font-size: .94rem; }
.media-pending p:last-child { margin: 0; color: var(--muted); font-size: .82rem; }
.study-hero > .media-pending { max-width: 1000px; }
.study-slot { margin-block: 24px; }
.study-slot video { display: block; width: 100%; height: auto; }
.study-note { padding: 14px 18px; border-left: 2px solid var(--line); background: var(--surface); }
.doc-navigation { display: flex; flex-wrap: wrap; gap: 16px 28px; margin-block: 20px; }
.documentation-page h1 { font-size: clamp(2rem, 5vw, 4.25rem); overflow-wrap: anywhere; }
.doc-index { list-style: none; padding: 0; max-width: 950px; }
.doc-index > li { padding: 26px 0; border-top: 1px solid var(--line); }
.doc-index h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
.doc-index p { color: var(--muted); }
.doc-prose { min-width: 0; overflow-wrap: anywhere; }
.doc-prose h2 { margin-top: 42px; font-size: clamp(1.4rem, 3vw, 2rem); }
.doc-prose h3 { margin-top: 30px; font-size: 1.2rem; }
.doc-prose p, .doc-prose li { font-size: .84rem; line-height: 1.85; color: var(--muted); }
.doc-prose pre { padding: 18px; background: var(--surface); border: 1px solid var(--line); white-space: pre-wrap; overflow-wrap: anywhere; font-size: .72rem; line-height: 1.7; }
.doc-prose code { font-family: var(--mono); color: var(--ink); }
.doc-table { max-width: 100%; overflow-x: auto; margin-block: 24px; }
.doc-table table { border-collapse: collapse; width: 100%; font-size: .72rem; line-height: 1.65; }
.doc-table th, .doc-table td { text-align: left; vertical-align: top; padding: 12px; border: 1px solid var(--line); }
.doc-table th { color: var(--ink); background: var(--surface); }
.doc-table td { color: var(--muted); }
@media (max-width: 480px) {
  .study-visual { padding: 16px; }
  .study-visual-layers li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .study-visual-priority ol, .study-visual-integration ul { grid-template-columns: minmax(0, 1fr); }
  .media-pending { padding: 18px; }
}
.not-found { padding-block: 100px 140px; min-height: 70vh; }.not-found h1 { font-size: clamp(2.7rem, 6vw, 5rem); line-height: 1.1; letter-spacing: -.05em; }.not-found > p:not(.section-label) { color: var(--muted); }.not-found .button { margin-right: 25px; }
/* Keep supporting technical information comfortably readable. */
.project-summary, .section-summary { font-size: .94rem; }
.selected-card > p, .workflow p, .skills-grid li { font-size: .88rem; }
.tags li, figcaption, .evidence-path li { font-size: .63rem; }
.project-status { font-size: .65rem; }
@media (min-width: 1600px) { .hero h1 { font-size: 8.5rem; } }
@media (max-width: 1100px) {
  .header-inner { gap: 20px; }.wordmark-name { display: none; }.site-header nav { gap: 24px; }
  .hero h1 { font-size: 8.7vw; }.hero-bottom { align-items: flex-start; gap: 30px; }.hero-bottom > p { max-width: 400px; }.hero-actions { gap: 18px; }.hero-actions .button { flex-basis: 100%; max-width: 200px; }
  .skills-grid { grid-template-columns: 1fr 1fr; gap: 30px 55px; }.earlier-work { grid-template-columns: 1fr 2fr; }
  .featured-grid { gap: 35px; }.project-actions { gap: 10px; }.project-actions .button { padding: 13px 15px; }
  .study-layout { grid-template-columns: 190px minmax(0, 1fr); gap: 45px; }
}
@media (max-width: 800px) {
  :root { --gutter: 28px; }.header-inner { min-height: 85px; gap: 20px; }.site-header nav { gap: 22px; }.header-actions { gap: 15px; }
  .hero { padding-top: 40px; }.hero-top { display: block; }.hero-top .eyebrow { font-size: .63rem; }.hero-location { margin-bottom: 28px; }.hero h1 { font-size: clamp(3rem, 9.3vw, 5.5rem); margin-top: 16px; }
  .hero-bottom { display: block; }.hero-bottom > p { max-width: 520px; font-size: .88rem; }.hero-actions { margin-top: 25px; justify-content: flex-start; gap: 22px; }.hero-actions .button { flex-basis: auto; max-width: none; }.hero-foot { margin-top: 45px; }
  .work-intro { padding-top: 55px; display: block; }.work-intro p:first-child { margin-bottom: 12px; }
  .project-section, .selected-section, .approach-section, .skills-section, .background-section, .contact-section { padding-block: 45px; }
  .section-label { margin-bottom: 28px; }.featured-grid, .approach-grid, .background-grid { grid-template-columns: 1fr; gap: 36px; }.project-copy { max-width: 620px; }.project-copy h2 { font-size: 3.7rem; }.project-statement { max-width: 500px; }.project-summary { max-width: 560px; }.project-copy .tags { margin-block: 22px; }
  .system-visual, .game-visual { max-width: 620px; }.system-visual { padding: 24px; }.system-diagram { max-width: 430px; margin-inline: auto; }.diagram-core { width: 85%; }
  .project-bottom { margin-top: 25px; }.highlights { gap: 15px; }.evidence-path li { font-size: .52rem; }.evidence-path li + li::before { padding-inline: 12px; }
  .section-heading { display: block; margin-bottom: 30px; }.section-heading > p { margin-top: 18px; }.selected-grid { grid-template-columns: 1fr; }.selected-card { padding: 28px; }.selected-top { margin-bottom: 25px; }.selected-card h3 { font-size: 1.8rem; }
  .section-summary { max-width: 600px; }.approach-grid h2, .background-grid h2 { font-size: 2.7rem; }.workflow { max-width: 600px; }.education { border-top: 1px solid var(--line); padding-top: 28px; }
  .contact-bottom { display: block; }.contact-links { margin-top: 28px; }.site-footer { flex-wrap: wrap; gap: 14px 30px; }.site-footer p:nth-child(2) { display: none; }
  .spatial-background { display: none; }.motion-toggle { display: none !important; }
  .study-hero { padding-top: 40px; }.study-hero h1 { font-size: clamp(3rem, 8vw, 5.5rem); }.study-facts { grid-template-columns: 1fr 1fr; gap: 26px; }.study-facts > div:last-child { grid-column: 1 / -1; }.study-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }.study-toc { position: static; margin-block: 28px; border-bottom: 1px solid var(--line); padding-bottom: 20px; }.study-toc a { display: inline-block; margin-right: 20px; }.study-body > section { padding-block: 35px; }.study-next { gap: 30px; }
}
@media (max-width: 480px) {
  :root { --gutter: 20px; }.header-inner { display: grid; grid-template-columns: auto 1fr; gap: 0 20px; padding-block: 20px 10px; }.wordmark { grid-row: 1; }.header-actions { grid-column: 2; grid-row: 1; justify-content: flex-end; }.cv-link { padding: 8px 0; }.site-header nav { grid-column: 1 / -1; grid-row: 2; justify-content: space-between; padding-top: 10px; gap: 15px; }.site-header nav a { min-height: 44px; font-size: .74rem; }
  .hero-top .eyebrow { max-width: 300px; font-size: .57rem; }.hero-top .eyebrow span { padding-inline: 8px; }.hero-location { font-size: .58rem; }.hero h1 { font-size: clamp(2.55rem, 10.3vw, 3.95rem); margin-bottom: 28px; }.hero-bottom > p { font-size: .83rem; }.hero-actions { gap: 13px 22px; }.hero-actions .button { flex-basis: 100%; max-width: 190px; margin-right: 20%; }.hero-foot { gap: 20px; font-size: .48rem; }.hero-foot span[aria-hidden] { margin-left: 5px; }.hero-foot > span:last-child { white-space: nowrap; }
  .work-intro { padding-top: 36px; }.work-intro > p:last-child { font-size: .7rem; }
  .project-copy h2 { font-size: 3.3rem; }.featured .project-copy h2 { font-size: 2.8rem; }.project-statement { font-size: 1.08rem; }.project-summary { font-size: .8rem; }.project-actions { gap: 12px; }.project-actions .button { font-size: .7rem; }
  .system-visual, .game-visual { padding: 17px; }.visual-topline { font-size: .49rem; }.diagram-core strong { font-size: 1.4rem; }.diagram-branches { gap: 10px; }.diagram-branches strong { font-size: .74rem; }.diagram-branches span { font-size: .48rem; }.game-wireframe { min-height: 270px; }.game-visual-title { font-size: 2.8rem; }
  .highlights { display: block; font-size: .64rem; }.highlights li + li { margin-top: 10px; }.evidence-path { padding-top: 24px; }.evidence-path ol { flex-direction: column; }.evidence-path li { font-size: .65rem; padding-block: 6px; }.evidence-path li + li::before { content: '↓'; padding-inline: 0 12px; }.evidence-path li:first-child { padding-left: 19px; }
  .section-heading h2 { font-size: 2.35rem; }.selected-card { padding: 24px; }.selected-card .project-actions { gap: 14px; }.selected-card .button { font-size: .64rem; }
  .approach-grid h2, .background-grid h2 { font-size: 2.3rem; }.section-summary { font-size: .81rem; }.workflow li { gap: 18px; }.workflow h3 { font-size: .91rem; }.workflow p { font-size: .77rem; }
  .skills-grid { grid-template-columns: 1fr; gap: 24px; }.skills-grid > div { border-top: 1px solid var(--line); padding-top: 20px; }.skills-grid > div:first-child { border: 0; padding-top: 0; }.skills-grid h3 { margin-bottom: 17px; }.skills-grid li { display: inline-block; font-size: .77rem; margin: 0 18px 12px 0; }.earlier-work { grid-template-columns: 1fr; gap: 8px; }.earlier-work h3 { margin-bottom: 10px; }
  .contact-section h2 { font-size: 3rem; }.contact-bottom p { max-width: 290px; }.email-link { font-size: 1.22rem; gap: 24px; }.contact-links { gap: 25px; }.site-footer { font-size: .5rem; gap: 15px; }.site-footer a span { margin-left: 5px; }
  .study-facts { grid-template-columns: 1fr; }.study-facts > div:last-child { grid-column: auto; }.study-toc a { font-size: .7rem; }.study-lead { font-size: 1.05rem; }.study-body p, .study-body li { font-size: .86rem; }.study-next { display: block; }.study-next .text-link { display: flex; margin-top: 15px; }.study-hero > .project-media { padding: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .travel-panel { transform: none !important; opacity: 1 !important; }.spatial-background { display: none; }
}
html[data-motion='off'] { scroll-behavior: auto; }
@media print {
  :root { --ink: #111; --bg: #fff; --muted: #444; --accent: #222; --line: #ccc; }
  .site-header, .hero-foot, .spatial-background, .motion-toggle, .study-toc, .site-footer { display: none; }
  .container { width: 100%; }.travel-panel { transform: none !important; opacity: 1 !important; }
  .featured-grid, .approach-grid, .background-grid, .selected-grid, .study-layout { display: block; }
  h1, h2, h3 { break-after: avoid; }.selected-card, figure { break-inside: avoid; }
  .system-visual, .game-visual, .selected-card, .diagram-core, .project-media { background: white; }
  a { text-decoration: underline; }.button.primary { background: white; color: #111; }
}