/* Keep the brand and primary destinations together on wide screens. */
.site-header{--header-height:72px;height:var(--header-height)}
.site-header-inner{width:min(1000px,100%);height:100%;margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:64px}
.site-header .brand{flex-shrink:0;white-space:nowrap}
.site-header #site-nav{gap:8px}
.site-header #site-nav a{min-height:48px;padding-inline:12px;font-size:14px;color:var(--paper);white-space:nowrap;text-decoration-thickness:1px;text-underline-offset:7px}
.site-header #site-nav a:hover,.site-header #site-nav a[aria-current]{color:var(--white)}
@media(max-width:1040px){
  .site-header .brand span{display:none}
  .site-header-inner{gap:24px}
}
@media(max-width:900px){
  .site-header-inner{justify-content:space-between}
  .site-header .menu-toggle{display:flex;align-items:center;gap:12px;min-height:48px;padding:12px;font-size:14px;margin-right:-12px}
  .site-header #site-nav{display:none;position:absolute;top:100%;left:0;right:0;padding:16px 24px;max-height:calc(100vh - var(--header-height));max-height:calc(100dvh - var(--header-height));overflow-y:auto;overscroll-behavior:contain;background:var(--ink);border-bottom:1px solid var(--line);box-shadow:0 14px 24px #0004}
  .site-header #site-nav.is-open{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .site-header #site-nav a{min-height:54px;padding-inline:0;font-size:18px;white-space:normal}
}
@media(max-width:600px){
  .site-header{--header-height:64px}
  .site-header #site-nav{padding-inline:20px}
}