/* Shared approved global header (.sb-gh) for every renderer family
   except the approved landing, which styles the same markup via its own
   approved cascade (preview.css + option1.css + buttons.css +
   approved.css). Scoped to body:not(.am-opening) so the landing's
   approved header can never be repainted. v=20261101nav4.
   Visual contract (CODEX-VISUAL-CONTRACT.json):
     - slanted desktop keys: border-radius 4px, transform skewX(-18deg),
       label counter-skewed skewX(18deg); Jost 12px, mixed case, normal
       letter-spacing. No pill shapes.
     - header 86px; monogram 112px wide proportional; brand 38px
       Cormorant Garamond.
     - portal action 4px radius, mixed-case Jost + approved ship glyph.
     - non-essential utility controls live in the footer group, NOT in
       this header. */

/* Header-only font alias: the SAME approved woff2 the landing ships,
   under an insulated family name so page-level font-face collisions
   (book/post Jost variants producing different glyph widths) cannot
   bleed into the shared header. */
@font-face{font-family:'SBNavJost';src:url('../opening/assets/jost-400n-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}

/* box-sizing: keys, portal, toggle and drawer children MUST be
   border-box — landing preview.css set it globally so keys computed
   44px there, but content-box pages rendered ~70px oversized keys.
   Pins the approved 44px/86px geometry on every renderer. */
body:not(.am-opening) .sb-gh *,body:not(.am-opening) .sb-gh *::before,body:not(.am-opening) .sb-gh *::after,
body:not(.am-opening) .sb-gh-drawer *,body:not(.am-opening) .sb-gh-drawer *::before,body:not(.am-opening) .sb-gh-drawer *::after{box-sizing:border-box}

body:not(.am-opening) .sb-gh.site-header{
	position:relative;z-index:60;display:flex;align-items:center;gap:20px;height:86px;box-sizing:border-box;
	padding:10px 2.5%;
	background:linear-gradient(180deg,rgba(6,21,34,.96),rgba(4,12,23,.9));
	border-bottom:1px solid rgba(169,232,255,.16);
	font-family:Jost,'Segoe UI',sans-serif;color:#f4f0e8;
}
body:not(.am-opening) .sb-gh .brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:inherit;flex:0 0 auto}
body:not(.am-opening) .sb-gh .brand img{display:block;width:112px;height:auto;max-height:62px;object-fit:contain}
body:not(.am-opening) .sb-gh .brand span{font:400 38px 'Cormorant Garamond',Georgia,serif;letter-spacing:.02em;color:#f4f0e8}
body:not(.am-opening) .sb-gh .desktop-nav{display:flex;align-items:center;gap:9px;margin-inline:auto;min-width:0;overflow-x:auto;padding:5px 8px;scrollbar-width:none}
body:not(.am-opening) .sb-gh .desktop-nav::-webkit-scrollbar{display:none}
body:not(.am-opening) .sb-gh .nav-key,body:not(.am-opening) .sb-gh-drawer .nav-key{display:inline-flex;align-items:center;min-height:38px;padding:0 12px;border:1px solid #bca06e80;border-radius:4px;background:#0a1d2d;color:#f4f0e8;font:400 12px/20.4px 'SBNavJost',Jost,'Segoe UI',sans-serif!important;letter-spacing:normal!important;text-transform:none!important;text-decoration:none;white-space:nowrap;transform:skewX(-18deg);transition:border-color .25s,box-shadow .25s,color .25s}
/* production style.css forces FrauncesPreview serif !important on every
   element incl. span — the label span needs its own explicit !important
   family (font:inherit would lose). Covers header keys AND drawer keys
   (the drawer is a sibling of .sb-gh, not a child). */
body:not(.am-opening) .sb-gh .nav-key>span,body:not(.am-opening) .sb-gh-drawer .nav-key>span{display:inline-block;transform:skewX(18deg);font:400 12px/20.4px 'SBNavJost',Jost,'Segoe UI',sans-serif!important;text-transform:none!important;letter-spacing:normal!important}
body:not(.am-opening) .sb-gh .nav-key:hover{border-color:#e4bf77;color:#f5d18a}
body:not(.am-opening) .sb-gh .nav-key[aria-current="page"],body:not(.am-opening) .sb-gh .nav-key[aria-current="true"]{border-color:#e4bf77;color:#f5d18a;box-shadow:0 0 16px rgba(233,211,160,.18)}
body:not(.am-opening) .sb-gh .portal,body:not(.am-opening) .sb-gh-drawer .portal{display:inline-flex;align-items:center;gap:9px;min-height:38px;padding:8px 15px;border:1px solid #bca06e;border-radius:4px;background:#0a1d2d;color:#f4f0e8;font:400 12px/20.4px 'SBNavJost',Jost,'Segoe UI',sans-serif!important;letter-spacing:normal!important;text-transform:none!important;text-decoration:none;white-space:nowrap;flex:0 0 auto;transition:border-color .25s,box-shadow .25s,color .25s}
body:not(.am-opening) .sb-gh .portal:before{content:'';width:16px;height:19px;background:currentColor;clip-path:polygon(30% 0,70% 0,80% 12%,80% 30%,65% 45%,88% 60%,100% 100%,0 100%,12% 60%,35% 45%,20% 30%,20% 12%)}
body:not(.am-opening) .sb-gh .portal:hover{border-color:#e4bf77;color:#f5d18a;box-shadow:0 0 18px rgba(233,211,160,.16)}
body:not(.am-opening) .sb-gh .portal[aria-current="page"],body:not(.am-opening) .sb-gh .portal[aria-current="true"]{border-color:#e4bf77;color:#f5d18a;box-shadow:inset 0 0 0 1px rgba(233,211,160,.65)}
body:not(.am-opening) .sb-gh .menu-toggle{display:none;margin-left:auto;background:#0a1e2d;border:1px solid #bfab7970;color:#f4f0e8;font:600 13px/20.4px 'SBNavJost',Jost,sans-serif!important;letter-spacing:.08em!important;text-transform:none!important;padding:10px 18px;min-height:44px;border-radius:4px;cursor:pointer}

/* Compact drawer emitted by am_sb_global_header(): the same slanted
   keys, keyboard reachable; the [hidden] attribute controls display and
   sb-global-nav.js wires the toggle + Escape. */
body:not(.am-opening) .sb-gh-drawer{position:relative;z-index:59;display:flex;flex-direction:column;gap:10px;padding:16px 5% 20px;background:rgba(4,12,23,.97);border-bottom:1px solid rgba(169,232,255,.16)}
/* Drawer is the touch menu: >=44px targets preserved there, while the
   desktop keys use the measured approved 38px geometry. */
body:not(.am-opening) .sb-gh-drawer .nav-key{align-self:flex-start;min-height:44px;padding:10px 12px;line-height:normal}
body:not(.am-opening) .sb-gh-drawer .portal{align-self:flex-start;min-height:44px;padding:10px 15px;line-height:normal}

/* Any inline SVG icon inside the shared header/drawer keeps explicit
   nonshrinking 16px sizing + header-consistent stroke — prevents the
   0x0 empty-button failure seen in relocated utility controls. */
body:not(.am-opening) .sb-gh svg,body:not(.am-opening) .sb-gh-drawer svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}

/* The takeover keeps .bar/.helm in the DOM for starbase.js bindings;
   the shared header replaces their visible role, so the legacy chrome
   stays hidden (aria-hidden) with no duplicate visible nav. */
body.sb-takeover .bar,body.sb-takeover .helm{display:none!important}

/* Footer utility row on the takeover (starbase-nav.js moves the live
   search/language/sound/calm/replay controls here, handlers intact). */
.sitefoot .ff-utils{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}

/* Approved breakpoints: burger + drawer on narrow/coarse screens;
   slanted keys stay visible and scrollable above 1100px fine pointer. */
@media(max-width:1250px){
	body:not(.am-opening) .sb-gh.site-header{gap:15px}
	body:not(.am-opening) .sb-gh .brand img{width:90px}
	body:not(.am-opening) .sb-gh .brand span{font-size:32px}
	body:not(.am-opening) .sb-gh .desktop-nav{gap:7px}
	body:not(.am-opening) .sb-gh .nav-key{padding-inline:9px;font-size:11px!important}
	body:not(.am-opening) .sb-gh .portal{font-size:11px!important;padding-inline:10px}
}
@media(max-width:1100px){
	body:not(.am-opening) .sb-gh .desktop-nav,body:not(.am-opening) .sb-gh .portal{display:none}
	body:not(.am-opening) .sb-gh .menu-toggle{display:block}
	body:not(.am-opening) .sb-gh.site-header{height:76px;padding-inline:5%}
}
@media(max-width:400px){
	body:not(.am-opening) .sb-gh.site-header{gap:8px}
	body:not(.am-opening) .sb-gh .brand{gap:8px}
	body:not(.am-opening) .sb-gh .brand img{width:64px}
	body:not(.am-opening) .sb-gh .brand span{font-size:26px}
	body:not(.am-opening) .sb-gh .menu-toggle{font-size:12px;padding:10px 12px}
}