/* Shared masthead geometry. Main-site dimensions are the reference.
   Also bundled inside Perception's shadow tree; never style its experiments. */
:is(.site-header,[data-site-header][data-site-header]) {
 --site-header-brand-size:2.7em;
 --site-header-min-height:90px;
 --site-header-padding-block:18px;
 --site-header-gutter:max(clamp(1.25rem,5vw,5.25rem),calc((100vw - 1380px)/2));
 min-height:var(--site-header-min-height);height:auto;
 padding:var(--site-header-padding-block) var(--site-header-gutter);
 font:400 1rem/1.55 var(--sans);
 box-sizing:border-box;
}
:is(.site-header,[data-site-header][data-site-header]) :is(.brand,[data-site-brand]) {
 display:inline-flex;align-items:center;gap:10px;
 font:500 var(--site-header-brand-size)/1 var(--serif);
 letter-spacing:-.045em;padding:4px 0;min-height:0;
 border:0;background:transparent;color:var(--ink);text-decoration:none;
 flex:none;white-space:nowrap;
}
[data-site-header][data-site-header] [data-site-brand]>span {font:inherit;color:inherit;letter-spacing:inherit;}
/* Transparent margins in the real asset need this optical scale. */
.brand>.brand-mark,[data-site-header][data-site-header] [data-site-brand]>[data-site-mark] {
 width:1.1em;height:1.1em;flex:none;object-fit:contain;display:block;
}
.site-header nav>:is(a,button),.site-header .nav-explore-trigger {
 font:400 .875rem/1.4 var(--sans);min-height:44px;
}
.site-header nav>a {display:inline-flex;align-items:center;padding-block:12px;text-decoration:none;color:var(--ink);}
.site-header .brand {font-size:var(--site-header-brand-size);}
[data-site-header][data-site-header] {display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;max-width:none;margin:0;}
[data-site-header]>a:not([data-site-brand]),[data-site-header]>nav {font:400 .875rem/1.4 var(--sans);}
.site-header nav>.account-button {border:0;padding-inline:8px;}
.site-header nav>:is(a,button)[aria-current="page"],.nav-explore-trigger[aria-current="page"] {text-decoration-thickness:2px;}
.site-header:has(+ #page-content) {position:relative;z-index:20;}
/* Keep the complete navigation clear of the wider brand before phone layout. */
@media(min-width:950px) and (max-width:1050px){
 .site-header .menu-button{display:block;min-width:44px;min-height:44px}
 .site-header nav{display:none;position:absolute;inset:100% 0 auto;flex-direction:column;align-items:stretch;gap:14px;padding:24px var(--page-gutter);background:var(--paper);border-bottom:1px solid var(--control-border)}
 .site-header nav.nav-open{display:flex}
 .site-header nav>:is(a,button){text-align:left}
 .nav-explore{width:100%}.nav-explore.is-open::after{display:none}.nav-explore-trigger{width:100%;justify-content:space-between}
 .nav-submenu{position:static;width:100%;transform:none;margin:2px 0 8px;box-shadow:none;backdrop-filter:none}.nav-submenu::before{display:none}
}
@media(max-width:1050px){
 .site-header nav>:is(a,button):not(.theme-toggle),.site-header .nav-explore-trigger{font-size:1rem}
}
@media(max-width:700px){
 :is(.site-header,[data-site-header][data-site-header]){--site-header-brand-size:2.2em;--site-header-min-height:80px;--site-header-padding-block:16px;}
 [data-site-header][data-site-header]{flex-wrap:wrap;gap:12px;}
}

/* The 404 canvas owns outer gutters; let its masthead occupy the full top edge. */
.missing-page:has([data-site-header]){padding-top:0;}
.missing-page [data-site-header]{width:calc(100% + 2 * var(--page-gutter));margin-inline:calc(-1 * var(--page-gutter));}