/* 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}}

/* embed mode: ?embed=1 hides the site chrome so the demo can sit inside a hub page */
[data-embed] .site-header,[data-embed] .eyebrow,[data-embed] .title,[data-embed] .lede,[data-embed] .appfoot,[data-embed] #wtThemeFloat{display:none!important}
[data-embed] main.wrap,[data-embed] .wrap{padding-top:12px}

.site-header nav .theme-toggle{font:10.5px "IBM Plex Mono",monospace;letter-spacing:.06em;color:inherit;opacity:.7;background:none;border:1px solid currentColor;padding:3px 9px;margin-left:10px;cursor:pointer;border-radius:0}
.site-header nav .theme-toggle:hover{opacity:1}