:root{--site-header-expanded-height:86px;--site-header-height:var(--site-header-expanded-height);--site-header-compact-height:64px;--sticky-header-height:var(--admin-bar-height,0px);scroll-padding-top:calc(var(--admin-bar-height,0px) + var(--site-header-compact-height) + 16px)}
:root.is-header-fixed{--sticky-header-height:calc(var(--admin-bar-height,0px) + var(--site-header-compact-height))}
.site-header-slot{height:var(--site-header-expanded-height);flex-shrink:0;width:100%}
.site-header{position:relative;top:auto;z-index:45;height:var(--site-header-expanded-height);background:var(--bg)}
.site-header .site-header-inner{padding-inline:16px}
.brand-logo{display:block;width:38px;height:34px;flex-shrink:0}
/* This header is always fixed and starts offscreen; the regular header never moves between layouts. */
.site-scroll-header{position:fixed;top:var(--admin-bar-height,0px);left:0;right:0;z-index:45;transform:translateY(calc(-100% - var(--admin-bar-height,0px)));visibility:hidden;transition:transform .28s ease,visibility 0s .28s}
.site-scroll-header .site-header{height:var(--site-header-compact-height);box-shadow:0 5px 18px #0003}
.is-scrolled .site-scroll-header{transform:translateY(0);visibility:visible;transition-delay:0s}
.page-editor .site-scroll-header .header-cta{display:none}
.editor-workspace{top:var(--sticky-header-height);transition:top .18s ease}
.skip-link{position:fixed;z-index:80}
@media(min-width:801px){
    .site-header .main-nav{align-self:stretch;align-items:center;margin:0 auto 0 0}
    .site-header .main-nav>a{display:flex;align-items:center;align-self:stretch}
    .site-header .main-nav [aria-current]:after{bottom:0}
}
@media(max-width:800px){
    :root{--site-header-expanded-height:60px;--site-header-compact-height:56px}
    .site-header .main-nav{top:100%;max-height:calc(100dvh - var(--sticky-header-height));overflow-y:auto}
}
@media(max-width:560px){.brand-logo{width:30px}}
@media(prefers-reduced-motion:reduce){.site-scroll-header,.editor-workspace{transition:none!important}}
/* Native modal keeps the drawer above both header variants and traps focus. */
.mobile-navigation{position:fixed;inset:0 0 0 auto;margin:0;width:min(360px,88vw);max-width:none;height:100dvh;max-height:100dvh;padding:calc(24px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom));border:0;border-left:1px solid var(--line);border-radius:0;background:var(--bg);color:var(--text);overflow-y:auto;overscroll-behavior:contain;transform:translateX(100%);transition:transform .24s cubic-bezier(.2,.75,.2,1);box-shadow:-18px 0 60px #0004}
.mobile-navigation.is-visible{transform:translateX(0)}
.mobile-navigation::backdrop{background:#0000;transition:background .24s ease}
.mobile-navigation.is-visible::backdrop{background:#0008}
.mobile-navigation-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.mobile-navigation-heading strong{font-size:26px;letter-spacing:-1px}.mobile-navigation-heading .icon-button{width:44px;height:44px}
.mobile-navigation nav{display:grid;gap:6px;margin:24px 0 32px}.mobile-navigation nav a{padding:15px 16px;border-radius:8px;font-size:15px;min-height:48px;color:var(--muted)}.mobile-navigation nav a:hover{background:color-mix(in srgb,var(--text) 5%,transparent);color:var(--text)}.mobile-navigation nav a[aria-current]{background:color-mix(in srgb,var(--gold) 12%,transparent);color:var(--gold)}.mobile-navigation-create{width:100%;justify-content:center}
html.mobile-navigation-open,html.mobile-navigation-open body,html.mobile-navigation-open .page-editor>#main{overflow:hidden!important}
@media(prefers-reduced-motion:reduce){.mobile-navigation,.mobile-navigation::backdrop{transition:none}}