/* Shared demo header — Willy Tai Design System v2 (Ink & Oxblood).
   Charcoal rules, accent hover, Archivo wordmark, WT monogram. Loaded LAST.
   Colours read from the page tokens (app-base.css) so the header flips in dark;
   fallbacks keep it correct if a page loads this without app-base. */
.site-header{position:sticky;top:0;z-index:60;background:color-mix(in srgb, var(--bg,#FAF8F5) 92%, transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--ink,#1A1A1A);box-shadow:inset 0 -4px 0 -1px var(--bg,#FAF8F5), inset 0 -5px 0 -1px var(--ink,#1A1A1A)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:14px}
.site-header .brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.site-header .brand:hover{text-decoration:none}
.site-header .mk{width:34px;height:34px;background:url(/assets/brand/wt-solid.png) center/contain no-repeat;color:transparent;font-size:0}
[data-theme="dark"] .site-header .mk{background-image:url(/assets/brand/wt-solid-knockout.png)}
.site-header .nm{font-weight:700;font-size:19px;letter-spacing:-.01em;font-family:'Archivo',system-ui,sans-serif;color:var(--ink,#1A1A1A);white-space:nowrap}
.site-header nav{display:flex;gap:2px}
.site-header nav a{font-size:11.5px;font-weight:600;color:var(--ink,#1A1A1A);padding:8px 13px;letter-spacing:.1em;text-transform:uppercase;font-family:'Archivo',system-ui,sans-serif;text-decoration:none;white-space:nowrap}
.site-header nav a:hover{color:var(--accent,#6E2532)}
@media(max-width:640px){.site-header .wrap{gap:6px 10px;flex-wrap:wrap;height:auto;min-height:60px;padding-top:8px;padding-bottom:8px}.site-header nav{flex-wrap:wrap}.site-header nav a{padding:6px 6px;font-size:10px;letter-spacing:.05em}.site-header .nm{font-size:16px}}