/* One navigation layout for the main site, collection, categories and fabrics. */
.header .header__bar { padding:1.25rem 1.5rem; gap:2rem; }
.header .brand-logo { position:relative; flex:0 0 125px; width:125px; height:30px; }
.header .brand-logo .logo-white,
.header .brand-logo .logo-black { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain; transition:opacity .22s ease; }
.header .brand-logo .logo-white { opacity:1; }
.header .brand-logo .logo-black { opacity:0; }
.header.scrolled .brand-logo .logo-white,
body.menu-open .header .brand-logo .logo-white,
.collection-page .header .brand-logo .logo-white { opacity:0; }
.header.scrolled .brand-logo .logo-black,
body.menu-open .header .brand-logo .logo-black,
.collection-page .header .brand-logo .logo-black { opacity:1; }
.header .nav { display:none; align-items:center; gap:2.2rem; }
.header .nav-link { font-size:.7rem; letter-spacing:.22em; }
body.menu-open .header { background:var(--ink); border-bottom-color:var(--line); }
body.menu-open .header .header__bar { color:var(--bone); }
body.menu-open .header .header__scrim { opacity:0; }
.header .nav-toggle { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; margin-block:-7px; padding:0; flex-shrink:0; }
.header .nav-link:focus-visible,
.header .brand-logo:focus-visible,
.header .nav-toggle:focus-visible { outline:2px solid currentColor; outline-offset:6px; }
.mobile-menu a[aria-current] { color:var(--brass); }
.mobile-menu[inert] { visibility:hidden; }
@media (min-width:768px) {
  .header .header__bar { padding:1.5rem 2.5rem; }
  .header .brand-logo { flex-basis:142px; width:142px; height:34px; }
  .header .nav-toggle { margin-block:-5px; }
}
@media (min-width:1280px) {
  .header .nav { display:flex; }
  .header .nav-toggle { display:none; }
}

/* Native cross-document fades keep the header in place during page changes. */
@view-transition { navigation:auto; }
.header { view-transition-name:site-header; }
::view-transition-group(root),
::view-transition-group(site-header) { animation-duration:.22s; animation-timing-function:ease; }
::view-transition-old(root),
::view-transition-new(root),
::view-transition-old(site-header),
::view-transition-new(site-header) { animation-duration:.22s; }
::view-transition-group(site-header) { z-index:1; }
@media (prefers-reduced-motion:reduce) {
  @view-transition { navigation:none; }
  .header .brand-logo img { transition:none; }
}