/* The selected link moves, while its place in the top row stays open. */
header.site-header{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--line)}
header.site-header .wrap{position:relative;display:block;width:min(1440px,calc(100% - 48px));height:140px;margin-inline:auto;padding:0}
header.site-header nav{position:absolute;inset:14px 150px auto 0;display:flex;align-items:center;justify-content:flex-start;flex-wrap:nowrap;gap:clamp(20px,3.4vw,52px)}
header.site-header .nav-slot{display:block;flex:0 0 auto}
header.site-header nav a{position:relative;display:grid;align-items:center;justify-content:center;min-height:44px;color:#111;font-size:1.1rem;font-weight:400;line-height:1.4;white-space:nowrap;text-decoration:none;transform:translate(0,0);-webkit-tap-highlight-color:transparent}
header.site-header nav a:hover,header.site-header nav a[aria-current]{color:#111;text-decoration:none}
header.site-header nav a:focus-visible{outline:2px solid #111;outline-offset:6px;border-radius:1px}
header.site-header.nav-ready nav a{transition:transform 560ms cubic-bezier(.22,.68,.25,1)}
header.site-header nav a.is-active{color:#111;font-weight:400;transform:translate(var(--slide-x,0px),var(--slide-y,0px))}
header.site-header .site-logo{position:absolute;right:0;top:16px;display:block}
header.site-header .site-logo img{display:block;width:104px;height:auto}
header.site-header .nav-destination{position:absolute;left:50%;bottom:16px;width:0;height:44px;pointer-events:none}
/* Re-measure without movement after rotation, zoom, or a viewport resize. */
header.site-header.nav-resizing nav a{transition:none}
@media(max-width:700px){
  header.site-header .wrap{width:calc(100% - 32px);height:128px}
  header.site-header nav{inset:12px 100px auto 0;gap:20px}
  header.site-header nav a{font-size:.94rem}
  header.site-header .site-logo{top:14px}
  header.site-header .site-logo img{width:80px}
  header.site-header .nav-destination{bottom:12px}
}
@media(max-width:520px){
  header.site-header .wrap{width:calc(100% - 24px);height:120px}
  header.site-header nav{right:88px;gap:14px}
  header.site-header nav a{font-size:.875rem}
  header.site-header .site-logo{top:18px}
  header.site-header .site-logo img{width:72px}
  header.site-header .nav-destination{bottom:10px}
}
@media(max-width:420px){
  header.site-header nav{right:80px;gap:8px}
  header.site-header nav a{font-size:.875rem}
  header.site-header .site-logo img{width:64px}
}
@media(prefers-reduced-motion:reduce){
  header.site-header.nav-ready nav a{transition:none}
}

/* Enlarged text gets its own row rather than colliding with the logo. */
header.site-header.nav-stacked .wrap{height:calc(132px + var(--navigation-height,44px))}
header.site-header.nav-stacked nav{top:72px;right:0;flex-wrap:wrap;row-gap:4px}

@media(max-width:360px){header.site-header nav{gap:6px}header.site-header nav a{font-size:.78rem}}

/* Reserve normal label widths; enlarging only the moving label keeps every top-row slot steady. */
header.site-header nav a::before{content:attr(data-label);grid-area:1/1;font-weight:400;visibility:hidden;pointer-events:none}
header.site-header .nav-label{grid-area:1/1;transform:scale(1);transform-origin:center}
header.site-header.nav-ready .nav-label{transition:transform 560ms cubic-bezier(.22,.68,.25,1)}
header.site-header nav a.is-active .nav-label{transform:scale(1.75)}
header.site-header.nav-resizing .nav-label{transition:none}
@media(prefers-reduced-motion:reduce){header.site-header.nav-ready .nav-label{transition:none}}