/* Magazine masthead. Scoped here so editorial layouts retain their own styles.
   The menu controller still measures the real header height after text reflow. */
.site-header{border-top:3px solid var(--red);box-shadow:0 1px 0 var(--line)}
.site-header .masthead{min-height:100px;padding-block:20px;gap:28px;border-bottom:1px solid var(--ink)}
.site-header .brand{gap:16px;font-size:2.8rem;line-height:1.1;letter-spacing:-.035em}
.site-header .brand img{width:46px;height:46px}
.site-header .nav-row{min-height:61px;gap:20px;padding-block:8px}
.site-header .primary-nav{gap:24px}
.site-header .primary-nav a{min-height:44px;font-size:.875rem;line-height:1.4;padding:10px 0;transition:color .18s}
.site-header .primary-nav a::after{bottom:1px;height:3px}
.site-header .primary-nav a[aria-current]{color:var(--red);font-weight:600}
.site-header .primary-nav a:hover{color:var(--red)}
.site-header .search-link{gap:10px;min-height:42px;padding:9px 14px;border:1px solid var(--line);border-radius:6px;font-size:.8125rem;line-height:1.4;transition:background .18s,border-color .18s,color .18s}
.site-header .search-link:hover{background:var(--white);border-color:var(--red);color:var(--red)}
.site-header .search-link svg{width:18px;height:18px;flex-shrink:0}
.site-header .menu-toggle{align-items:center;justify-content:center;gap:8px;border-color:var(--ink);color:var(--ink);background:transparent;font-size:.8125rem;padding:9px 12px}
.menu-icon{width:19px;height:19px;flex-shrink:0;transition:transform .18s}
.site-header .menu-toggle[aria-expanded="true"]{background:var(--ink);color:var(--paper)}
.menu-toggle[aria-expanded="true"] .menu-icon{transform:rotate(90deg)}

/* Equal outer grid tracks center the sections on the complete header, even
   when the brand and search have different widths. The navigation wrapper
   shares these tracks without changing link order or the mobile controller.
   A single desktop rail keeps branding, sections and search at one height.
   The compact search retains its accessible name when its visual label hides. */
@media(min-width:1101px){
 .site-header > .shell{display:grid;grid-template-columns:minmax(0,1fr) max-content minmax(0,1fr);align-items:center;column-gap:20px;min-height:78px}
 .site-header .masthead{min-height:0;padding-block:14px;border:0;flex-shrink:0}
 .site-header .brand{font-size:1.9rem;gap:10px;white-space:nowrap}
 .site-header .brand img{width:36px;height:36px}
 .site-header .nav-row{display:grid;grid-column:2 / 4;grid-template-columns:subgrid;min-width:0;min-height:0;gap:20px;padding-block:12px}
 .site-header .primary-nav{gap:16px;flex-wrap:nowrap}
 .site-header .primary-nav a{white-space:nowrap}
 .site-header .search-link{justify-self:end;flex-shrink:0}
}
@media(min-width:1101px) and (max-width:1250px){
 .site-header > .shell{column-gap:16px}
 .site-header .brand{font-size:1.3rem}
 .site-header .search-link{padding:10px}
 .site-header .search-label{display:none}
}

/* Use the same disclosure breakpoint as site.js, including enlarged text.
   Avoid fixed header heights: the wordmark may wrap before the menu button. */
@media(max-width:1100px){
 .site-header .masthead{min-height:86px;padding-block:16px;gap:12px 20px;border-bottom:0;flex-wrap:wrap}
 .site-header .brand{font-size:2.15rem;gap:12px;flex:1 1 0;min-width:min-content}
 .site-header .brand img{width:38px;height:38px}
 .site-header .brand-wordmark{min-width:min-content;overflow-wrap:normal}
 .site-header .masthead-note{display:none}
 .site-header .menu-toggle{display:inline-flex}
 .site-header .nav-row{padding:12px 24px 22px;border-top:1px solid var(--line)}
 .site-header .primary-nav{gap:0 24px}
 .site-header .primary-nav a{padding:14px 0;border-bottom:1px solid var(--line);min-height:49px;font-size:.9375rem}
 .site-header .primary-nav a::after{bottom:-1px;height:2px}
 .site-header .search-link{display:flex;width:fit-content;max-width:100%;margin-top:18px;min-height:44px;font-size:.875rem;background:var(--white)}
}
@media(max-width:560px){
 .site-header .masthead{min-height:80px;padding-block:14px;gap:10px}
 .site-header .brand{font-size:1.8rem;gap:10px}
 .site-header .brand img{width:33px;height:33px}
 .site-header .menu-toggle{padding-inline:10px}
 .site-header .nav-row{padding-inline:18px}
}
/* The printed article needs no masthead; JavaScript-free navigation inherits
   the visible, in-flow fallback from style.css. */
@media(prefers-reduced-motion:reduce){.site-header a,.site-header a::after,.menu-icon{transition:none}}
@media print{.site-header{display:none}}

/* The compact search belongs outside the disclosure: it stays reachable when
   navigation is closed/inert. Desktop retains its existing labelled control. */
.mobile-search{display:none}
@media(max-width:1100px){
 .site-header .mobile-search{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:44px;min-height:44px;border:1px solid var(--line);border-radius:6px;text-decoration:none}
 .mobile-search svg{width:18px;height:18px}
 .mobile-search:hover{background:var(--white);color:var(--red);border-color:var(--red)}
 .site-header .nav-row .search-link{display:none}
 .site-header .masthead{column-gap:10px}
 .site-header .brand{min-width:0}
 .site-header .brand-wordmark{min-width:0}
}
@media(max-width:360px){
 .site-header .brand{font-size:1.4rem;gap:7px}
 .site-header .brand img{width:28px;height:28px}
 .site-header .menu-toggle{padding-inline:8px}
}