/* Interface colors. Artwork keeps its original palette in both themes. */
:root{
 color-scheme:light;
 --paper:#f4f2eb;--ink:#222b28;--muted:#656962;--line:#d4d5cb;--orange:#e6502b;
 --surface-bg:#e7e9df;--motion-bg:#e9e9e0;--panel-bg:#f4f2eb;--surface-hover:#e5e8df;
 --text-secondary:#555f50;--header-bg:#f4f2ebf5;--control-line:#808a77;
 --button-hover:#b54220;--on-button-hover:#ffffff;--accent-text:#b54220;
 --viewer-bg:#e2e6dc;--status-text:#4f634c;--selection-bg:#ed9c7a;--selection-ink:#222b28;
}
:root[data-theme=dark]{
 color-scheme:dark;
 --paper:#151c19;--ink:#f1efe5;--muted:#aeb8aa;--line:#3e4c41;--orange:#ff9b70;
 --surface-bg:#1e2822;--motion-bg:#1b251f;--panel-bg:#202b24;--surface-hover:#2e3d33;
 --text-secondary:#c0c9b9;--header-bg:#151c19f5;--control-line:#71816d;
 --button-hover:#ffad84;--on-button-hover:#17221c;--accent-text:#ffad84;
 --viewer-bg:#101713;--status-text:#b4cb9d;--selection-bg:#e8a276;--selection-ink:#142017;
}
/* Visitors without JavaScript still receive their device's preferred palette. */
@media(prefers-color-scheme:dark){
 :root:not([data-theme]){
  color-scheme:dark;
  --paper:#151c19;--ink:#f1efe5;--muted:#aeb8aa;--line:#3e4c41;--orange:#ff9b70;
  --surface-bg:#1e2822;--motion-bg:#1b251f;--panel-bg:#202b24;--surface-hover:#2e3d33;
  --text-secondary:#c0c9b9;--header-bg:#151c19f5;--control-line:#71816d;
  --button-hover:#ffad84;--on-button-hover:#17221c;--accent-text:#ffad84;
  --viewer-bg:#101713;--status-text:#b4cb9d;--selection-bg:#e8a276;--selection-ink:#142017;
 }
}
body,.header,.about,.motion-lab,.motion-study,.case-dialog,.image-dialog,.dialog-toolbar{transition:background-color .18s,color .18s,border-color .18s}
::selection{background:var(--selection-bg);color:var(--selection-ink)}
.header{background:var(--header-bg)}
.header nav{margin-left:0}
.theme-picker{display:flex;align-items:center;justify-content:center;gap:6px;margin-left:auto;min-height:44px;padding:0 9px;border:1px solid var(--control-line);border-radius:24px;color:var(--ink);background:var(--panel-bg);flex-shrink:0}
.theme-picker[hidden]{display:none}
.theme-picker svg{flex-shrink:0}
.theme-picker select{font:inherit;font-size:11px;line-height:1.4;color:var(--ink);background:transparent;border:0;border-radius:16px;min-height:42px;max-width:70px;padding:0 2px;cursor:pointer}
.theme-picker select:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.theme-picker option,.motion-control-row option{color:var(--ink);background:var(--panel-bg)}
.hero-bottom p,.about-intro>div>p:not(.eyebrow):not(.location),.experience-row .date,.experience-row .company,.experience-row>p:last-child,.skill-grid p,.case-intro,.case-section p,.case-section ul,.motion-study-description{color:var(--text-secondary)}
.about,.case-evidence,.noscript{background:var(--surface-bg)}
.about-intro>div>p.about-lead:not(.eyebrow):not(.location),.ai-experience strong{color:var(--ink)}
.about-tags span,.about-tabs,.experience-row,.skill-grid .tools,.file-label{border-color:var(--line)}
.about-tabs button,.skill-grid article>span{color:var(--muted)}
.about-tabs button[aria-selected=true]{color:var(--ink)}
.filter:not(.active):hover,.gallery-filter:hover:not(.active){background:var(--surface-hover)}
.gallery-filter{border-color:var(--control-line)}
.gallery-filter.active span{color:inherit}
.case-dialog,.image-dialog,.dialog-toolbar{background:var(--panel-bg)}
.case-evidence{color:var(--text-secondary)}
.image-stage{background:var(--viewer-bg)}
.artwork-enlarge{color:#222b28}
.button.primary:hover,.image-controls button:not(.zoom-artwork):hover,.motion-play:hover{background:var(--button-hover);color:var(--on-button-hover)}
.image-controls .zoom-artwork:hover{background:var(--surface-hover);color:var(--ink)}
.skip-link{color:var(--paper)}
.case-kicker,.copy-status,.header nav a:hover,.text-link:hover,.email-link:hover,.copy-email:hover,.contact-social a:hover,.replay-welcome:hover,.motion-discover:hover,.motion-reset:hover,.next-project:hover{color:var(--accent-text)}
.motion-lab{background:var(--motion-bg);border-color:var(--line)}
.motion-study{background:var(--panel-bg);border-color:var(--line)}
.motion-provenance,.motion-help,.motion-study-heading>span{color:var(--muted)}
.motion-controls,.motion-closing{border-color:var(--line)}
.motion-control-row select{border-color:var(--control-line)}
.motion-status{color:var(--status-text)}
/* Localize color tokens so art direction and supplied images are not inverted. */
.project-visual,.hero-art,.motion-demo,.welcome-dialog,.motion-stage{--paper:#f4f2eb;--ink:#222b28;--muted:#656962;--orange:#e6502b;color-scheme:light}
.motion-demo{color:#222b28}
.welcome-dialog{color-scheme:dark}
@media(max-width:1099px){.header{gap:24px}}
@media(max-width:760px){
 .header{gap:12px}.menu-toggle{margin-left:0;gap:10px;padding-left:0}
 .theme-picker{padding-inline:7px;gap:4px}.theme-picker select{font-size:11px;max-width:64px}
 .header nav{background:var(--paper);box-shadow:0 18px 25px #0002;gap:14px}
}
@media(max-width:380px){.header{gap:10px}.header>.wordmark{font-size:24px}.theme-picker svg{display:none}.theme-picker select{font-size:10px;max-width:58px}.menu-toggle{gap:8px}.header nav{gap:10px}}
@media(prefers-reduced-motion:reduce){body,.header,.about,.motion-lab,.motion-study,.case-dialog,.image-dialog,.dialog-toolbar{transition:none}}