/* The selected polished finishes form the public day/night pair. */
:root{--metal-image:url('/assets/polished-silver-narrow.webp');--metal-color:#aeb0b2;--ink:#101915;--muted:#29362f;--glass-edge:#effaf373;--edge-glint-strong:#f1fff599;--edge-glint-soft:#d9f2e63d;--pane-shadow:inset 0 1px 1px #ffffff29,inset 0 -1px 1px #25382d0d,0 14px 40px #00000024;--header-backdrop:blur(18px) brightness(1.08) saturate(.9);color-scheme:light}
html[data-metal="current"]{--metal-image:url('/assets/anodized-silver.webp')}
html[data-metal="shiny"]{--metal-image:url('/assets/polished-silver-narrow.webp')}
html[data-metal="scratched"]{--metal-image:url('/assets/smooth-scratched-silver.webp')}
html[data-metal="scuffed-polished"]{--metal-image:url('/assets/scuffed-polished-silver.webp')}
html[data-metal="dark-anodized"]{--metal-image:url('/assets/black-anodized.webp')}
html[data-metal="dark-shiny"]{--metal-image:url('/assets/black-chrome.webp')}
html[data-metal="dark-scratched"]{--metal-image:url('/assets/scuffed-gunmetal.webp')}
html[data-metal="dark-scuffed-polished"]{--metal-image:url('/assets/scuffed-black-chrome.webp')}
/* Dark finishes use their own black metal images, with light interface copy. */
html[data-metal^="dark-"]{--metal-color:#16191d;--ink:#f2f9f8;--muted:#e1ecea;--pane-fill:linear-gradient(135deg,#e2f3ed19,#c0dcd50c 45%,#d8eee51a);--glass-edge:#263b3199;--edge-glint-strong:#c2ddd34d;--edge-glint-soft:#9ebdaf21;--pane-shadow:inset 0 1px 1px #8eae9f0f,inset 0 -1px 1px #00000040,0 14px 40px #00000024;--header-backdrop:blur(18px) brightness(.55) saturate(.9);color-scheme:dark}
html[data-metal^="dark-"] main{color:#f2f9f8}
/* Glass containers had an old explicit ink color that defeated inheritance. */
html[data-metal^="dark-"] :is(.intro-grid,.experience-grid,.glass,.rail .project,.depth-mode .rail .project){color:#f2f9f8;border-color:var(--glass-edge);backdrop-filter:blur(14px) brightness(.55) saturate(.9);-webkit-backdrop-filter:blur(14px) brightness(.55) saturate(.9)}
html[data-metal^="dark-"] :is(.project,.glass,.intro-grid,.experience-grid):before{background:linear-gradient(150deg,#efffff12,transparent 35%,#b8dfd208 75%,#d8f2ed0f)}
html[data-metal^="dark-"] :is(.intro p,.project p,.job p,.job .role,.job-head>.micro,.capability p,.education){color:#e1ecea}
html[data-metal^="dark-"] .work-head{color:#f2f9f8;text-shadow:none}
html[data-metal^="dark-"] :is(.read,.expertise-link){border-color:#d9eeec99}
/* A quiet continuous bezel sits beneath the brighter, uneven edge reflections. */
:is(.intro-grid,.experience-grid,.glass,.rail .project,.depth-mode .rail .project,dialog){border-color:var(--glass-edge)}
:is(.project,.glass,.intro-grid,.experience-grid,dialog):after{content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;border:0;border-radius:inherit;box-shadow:none;background:linear-gradient(90deg,transparent,var(--edge-glint-strong) 34%,var(--edge-glint-soft) 62%,transparent) left top/61.8% 1px no-repeat,linear-gradient(180deg,transparent,var(--edge-glint-soft) 21%,transparent) left top/1px 38.2% no-repeat,linear-gradient(90deg,transparent,var(--edge-glint-soft) 62%,transparent) right bottom/38.2% 1px no-repeat,linear-gradient(180deg,transparent,var(--edge-glint-soft) 50%,transparent) right bottom/1px 21% no-repeat}
dialog{isolation:isolate}
.project.is-clickable,.capability.is-clickable{cursor:pointer}
/* Stronger day ink stays scoped away from the white hero role, contact copy and tracker dots. */
html:not([data-metal^="dark-"]) :is(.intro-grid,.experience-grid,.glass,.rail .project,.depth-mode .rail .project,dialog){color:var(--ink)}
html:not([data-metal^="dark-"]) :is(.intro p,.project p,.job p,.capability p,dialog p,dialog li,.education){color:#202c26}
html:not([data-metal^="dark-"]) :is(.job .role,.job-head>.micro){color:#33423a}
html:not([data-metal^="dark-"]) .work-head{color:#16251e;text-shadow:none}
html:not([data-metal^="dark-"]) .hero-bottom .specialty{color:var(--ink)}
header{background:var(--pane-fill);border-bottom:1px solid var(--glass-edge);box-shadow:none;backdrop-filter:var(--header-backdrop);-webkit-backdrop-filter:var(--header-backdrop);color:var(--ink)}
header:after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent 5%,var(--edge-glint-strong) 21%,transparent 61.8%,var(--edge-glint-soft) 89%,transparent)}
header .progress{z-index:1}
header .nav-links{--nav-link-gap:var(--space-md);align-items:center;gap:var(--nav-link-gap)}
header nav.container{gap:var(--space-md)}
.nav-label-compact{display:none}
/* Only the translucent symbol is visible; its 44px target stays steady on hover. */
.theme-toggle{position:fixed;z-index:9;right:calc(var(--space-sm) - var(--space-3xs) + env(safe-area-inset-right,0px));bottom:calc(var(--space-sm) - var(--space-3xs) + env(safe-area-inset-bottom,0px));display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;margin:0;border:0;border-radius:var(--space-3xs);background:none;box-shadow:none;color:#f2f9f8;font:inherit;cursor:pointer;opacity:.65;transition:opacity .18s ease}
.theme-toggle[hidden]{display:none}
.theme-symbol{display:block;width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transform:rotate(var(--theme-rotation,0deg)) scale(var(--theme-scale,1));transform-origin:center;transition:transform .18s ease}
.theme-moon{--theme-rotation:-12deg}
.theme-sun,.theme-toggle[aria-pressed="true"] .theme-moon{display:none}
.theme-toggle[aria-pressed="true"] .theme-sun{display:block}
.theme-toggle:focus-visible{--theme-scale:1.15;opacity:1}
@media(hover:hover){.theme-toggle:hover{--theme-scale:1.15;opacity:1}}
@media(prefers-reduced-motion:reduce){.theme-toggle:is(:hover,:focus-visible){--theme-scale:1}}
.theme-toggle:focus-visible{outline-offset:0}
body:has(dialog[open]) .theme-toggle{visibility:hidden;opacity:0}
/* Keep the corner utility below the pane-relative project controls. */
.depth-mode .work-stage{padding-bottom:calc(var(--space-xl) + env(safe-area-inset-bottom,0px))}
html[data-metal^="dark-"] .progress{background:#718d7f66}
html[data-metal^="dark-"] .project-tracker{color:#f2f9f8}
html[data-metal^="dark-"] .project-tracker button:not(:disabled):hover{color:#fff}
html[data-metal^="dark-"] dialog{background:var(--pane-fill);border-color:var(--glass-edge);color:#f2f9f8;backdrop-filter:blur(18px) brightness(.55) saturate(.9);-webkit-backdrop-filter:blur(18px) brightness(.55) saturate(.9)}
html[data-metal^="dark-"] :is(dialog p,dialog li){color:#e1ecea}
/* The closing material settles into green-black without a hard section boundary. */
html[data-metal^="dark-"] .contact:before{background:linear-gradient(to bottom,transparent 0px,#020604e8 89px,#020604fc 233px,#020604 377px,#020604 100%)}
html[data-metal^="dark-"] .contact-footer{border-color:#45594e3d}
.finish-picker{position:fixed;z-index:9;left:50%;bottom:calc(13px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:flex;align-items:center;gap:5px;max-width:calc(100vw - 26px);padding:8px;background:#112025ed;border:1px solid #d5e9e76b;color:#f2fafa;box-shadow:0 5px 21px #07121833}
.finish-picker[hidden]{display:none}
.finish-picker button,.finish-picker a{display:inline-flex;align-items:center;justify-content:center;min-height:29px;padding:5px 13px;background:none;border:1px solid transparent;font:400 12px/1.4 var(--site-type);white-space:nowrap;cursor:pointer}
.finish-picker button[aria-pressed="true"]{border-color:#e6f4f1;background:#e3f4ef1a}
.finish-picker button:hover,.finish-picker a:hover{background:#e3f4ef26}
.finish-picker a{font-size:21px;min-width:29px;padding:0 5px}
.finish-select{display:none;font:400 12px/1.4 var(--site-type);background:#162c31;color:#f2fafa;border:1px solid #d5e9e76b;border-radius:0;min-height:34px;padding:5px 13px;color-scheme:dark}
.finish-select:focus-visible{outline:2px solid #f2fafa;outline-offset:3px}
.metal-comparison .hero-bottom{margin-bottom:calc(var(--space-xl) + env(safe-area-inset-bottom,0px))}
.metal-comparison .depth-mode .work-stage{padding-bottom:calc(var(--space-xl) + env(safe-area-inset-bottom,0px))}
@media(max-width:1100px){.finish-picker{gap:5px;padding:5px}.finish-picker .finish-option{display:none}.finish-select{display:block;width:min(260px,calc(100vw - 89px));min-width:0}.finish-picker a{min-width:24px}.metal-comparison .theme-toggle{bottom:calc(var(--space-xl) + env(safe-area-inset-bottom,0px))}.metal-comparison .depth-mode .work-stage{padding-bottom:calc(var(--space-xxl) + var(--space-sm) + env(safe-area-inset-bottom,0px))}}
@media(max-width:760px){header .nav-links{--nav-link-gap:var(--space-xs)}header .nav-links,header nav.container{gap:var(--space-xs)}header .nav-links a:nth-child(2){display:none}.nav-label-wide{display:none}.nav-label-compact{display:inline}}
@media(max-width:380px){header .nav-links{--nav-link-gap:var(--space-2xs)}header .nav-links,header nav.container{gap:var(--space-2xs)}}
/* Retain the vertical highlight in the tighter crop of a portrait screen. */
@media(max-aspect-ratio:3/4){html[data-metal="shiny"] body,html[data-metal="scuffed-polished"] body,html[data-metal="dark-scuffed-polished"] body{background-position:center,35% center}html[data-metal="dark-shiny"] body{background-position:center,75% center}}