/* The one site header (SiteHeader.astro), on every page. Geometry is the homepage handoff's
   (58 px desktop, 48 px narrow, 3% side margins); colors come from theme.css tokens. */
.site-header{position:relative;z-index:20;height:58px;margin:0 3%;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);font-family:var(--font-body)}
.site-header a{color:inherit;text-decoration:none}
.site-header .identity{display:flex;align-items:center;gap:8px;flex:0 0 auto;font-size:17px;letter-spacing:2px;font-weight:700;color:var(--fg);white-space:nowrap}
.site-header .identity>span{font:12px var(--font-mono);color:var(--fg-quiet);letter-spacing:1px;font-weight:400}
.site-header nav{display:flex;align-items:center;gap:16px;font-size:15px;color:var(--fg-soft);min-width:0}
.site-menu{display:flex;align-items:center;gap:16px}
.site-header nav a{display:inline-flex;align-items:center;min-height:44px;white-space:nowrap}
.site-header nav a:hover,.site-header nav a[aria-current=page]{color:var(--fg)}
.site-header .site-page[aria-current=page]{box-shadow:inset 0 -2px 0 var(--accent)}
.site-header button{background:transparent;border:0;color:var(--fg-soft);font:14px var(--font-body);padding:10px;min-height:44px;cursor:pointer}
.site-header button:hover{color:var(--fg)}
.site-header .contact{font-size:14px;padding:10px 14px;border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);color:var(--accent)}
.site-header .contact:hover{color:var(--accent);background:var(--accent-soft)}
.site-header .menu-toggle{display:inline-grid;place-items:center;width:44px;border:1px solid var(--line-strong);padding:0;color:var(--fg)}
.site-header .menu-toggle[hidden]{display:none}
.site-header :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(min-width:1900px){.site-header{margin-left:auto;margin-right:auto;max-width:1800px}}

/* Color theme control. */
.theme-control{position:relative;display:inline-flex;align-items:center;font-size:14px;color:var(--fg-soft);border-radius:4px}
.theme-control[hidden]{display:none}
.theme-control:hover{color:var(--fg);background:var(--bg-soft)}
.theme-control select{appearance:none;font:inherit;color:inherit;background:transparent;border:0;border-radius:inherit;padding:.5rem 1.4rem .5rem 2rem;min-height:44px;cursor:pointer}
.theme-control option{color:var(--fg);background:var(--bg)}
.theme-icon,.theme-chevron{position:absolute;pointer-events:none}
.theme-icon{left:.5rem}.theme-chevron{right:.4rem}
@media(forced-colors:active){.theme-control select{appearance:auto;padding:.5rem}.theme-icon,.theme-chevron{display:none}}

/* Hamburger menu at every width (owner, 2026-10-09). Without scripting the items scroll in the header row. */
.site-header[data-enhanced] .site-menu{display:none;position:absolute;top:100%;right:0;z-index:30;flex-direction:column;align-items:stretch;gap:0;min-width:230px;padding:8px;background:var(--bg-soft);border:1px solid var(--line-strong);box-shadow:0 18px 50px #0006}
.site-header[data-enhanced][data-menu=open] .site-menu{display:flex}
.site-header[data-enhanced] .site-menu>a,.site-header[data-enhanced] .site-menu>button{padding:0 12px;text-align:left;font-size:15px}
.site-header[data-enhanced] .site-menu>.contact{margin-top:6px;justify-content:center}
.site-header[data-enhanced] .site-page[aria-current=page]{box-shadow:inset 3px 0 0 var(--accent)}
.site-header:not([data-enhanced]) .site-menu{overflow-x:auto}
@media(max-width:750px){
 .site-header{height:48px;gap:6px}
 .site-header .identity{font-size:16px}
 .site-header .identity>span{display:none}
 .site-header nav{gap:6px;font-size:14px;white-space:nowrap}
 .site-header button{font-size:12px;padding:7px 0}
 .site-header .contact{font-size:12px;padding:5px;min-height:44px;display:inline-flex;align-items:center;white-space:nowrap}
 .site-header .site-social>span{display:none}
}

/* "Let's build" contact dialog. */
.site-header .contact-dialog{width:min(420px,92vw);padding:28px 26px 22px;border:1px solid var(--line-strong);border-radius:8px;background:var(--bg-soft);color:var(--fg);font-family:var(--font-body);box-shadow:0 25px 100px #0008}
.site-header .contact-dialog::backdrop{background:#070b10b8;backdrop-filter:blur(6px)}
.site-header .contact-dialog h2{margin:0 0 12px;font-size:22px;font-weight:700}
.site-header .contact-dialog p{margin:0 0 8px;color:var(--fg-soft);font-size:16px}
.site-header .contact-dialog .contact-email{color:var(--accent);font-weight:600;user-select:all}
.site-header .contact-dialog .contact-status{min-height:1.4em;font-size:14px;color:var(--fg-quiet)}
.site-header .contact-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.site-header .contact-actions>*{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--line-strong);background:transparent;color:var(--fg);font:15px var(--font-body);text-decoration:none;cursor:pointer}
.site-header .contact-actions>[data-copy-email]{border-color:color-mix(in srgb,var(--accent) 55%,transparent);color:var(--accent)}
.site-header .contact-actions>*:hover{background:var(--accent-soft)}
.site-header .contact-close{position:absolute;top:8px;right:8px;width:44px;height:44px;border:0;background:transparent;color:var(--fg-soft);font-size:24px;cursor:pointer}
.site-header .contact-dialog :focus-visible{outline:2px solid var(--accent);outline-offset:2px}