.site-header{position:sticky;top:0;z-index:50;background:rgb(250 249 246 / .94);backdrop-filter:blur(10px);border-bottom:1px solid var(--color-border)}
/* Flex + space-between, not grid 1fr/auto/1fr: with a grid, the two outer
   1fr columns are forced equal width, but the logo and the icon/CTA cluster
   don't have equal content width, so the nav ends up with unequal gaps on
   either side. space-between distributes the two gaps around nav equally
   regardless of how wide brand/tools' content actually is. */
.site-header__inner{display:flex;justify-content:space-between;align-items:center;height:var(--header-h)}
.brand{display:inline-flex;align-items:center;gap:.85rem}
.brand__icon{height:48px;width:auto}
.brand__word{height:15px;width:auto}

.nav__list{display:flex;gap:clamp(1.25rem,2.4vw,2.6rem)}
.nav__link{position:relative;display:inline-block;padding:.5rem 0;font-size:var(--fs-ui);font-weight:600;letter-spacing:var(--track-ui);text-transform:uppercase}
.nav__link::after{content:"";position:absolute;left:0;right:0;bottom:.15rem;height:1px;background:var(--color-gold);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-fast) var(--ease)}
.nav__link:hover::after,.nav__link:focus-visible::after,.nav__link[aria-current="page"]::after{transform:scaleX(1)}

.tools{display:flex;align-items:center;justify-content:flex-end;gap:.25rem}
.tools__btn{display:grid;place-items:center;width:2.5rem;height:2.5rem;transition:color var(--dur-fast)}
.tools__btn:hover{color:var(--color-gold-text)}
.tools .btn{margin-left:.9rem}
.menu-toggle{display:none;width:2.5rem;height:2.5rem;place-items:center}
.menu-toggle__bars{position:relative;width:22px;height:9px;border-block:1px solid currentColor}
.menu-toggle[aria-expanded="true"] .menu-toggle__bars{border-color:transparent}
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before,.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after{content:"";position:absolute;left:0;right:0;top:4px;height:1px;background:currentColor}
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before{transform:rotate(45deg)}
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after{transform:rotate(-45deg)}

/* ---------- Collections menu ---------- */
.nav__item{position:relative}
.menu-arrow{display:none}
.menu-arrow--sub{display:inline-flex;align-items:center;justify-content:center;width:1rem;height:1rem;vertical-align:middle;margin-left:.3rem;cursor:pointer;color:var(--color-muted)}
.menu-arrow--sub::before{content:"";width:.35rem;height:.35rem;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg);transition:transform var(--dur-fast) var(--ease)}
.menu-arrow--sub[aria-expanded="true"]::before{transform:rotate(-135deg)}
.menu{position:absolute;left:-1.5rem;top:100%;z-index:60;min-width:23.5rem;padding:1.5rem 1.5rem 1.65rem;background:var(--color-bg);border:1px solid var(--color-border);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease),visibility 0s linear var(--dur-fast)}
.has-menu:hover>.menu,.has-menu:focus-within>.menu,.has-menu.is-open>.menu{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.menu__list{display:flex;flex-direction:column;gap:1.05rem}
.menu__link{display:inline-block;font-family:var(--font-serif);font-weight:300;font-size:1.3rem;line-height:1.2;transition:color var(--dur-fast)}
.menu__link:hover,.menu__link:focus-visible{color:var(--color-gold-text)}
.menu__sub{display:none;flex-wrap:wrap;gap:.15rem .85rem;margin-top:.4rem}
.has-sub.is-open>.menu__sub{display:flex}
.menu__sub a{font-size:.6875rem;letter-spacing:.12em;white-space:nowrap;text-transform:uppercase;color:var(--color-muted);transition:color var(--dur-fast)}
.menu__sub a:hover,.menu__sub a:focus-visible{color:var(--color-gold-text)}

/* Desktop: nav items span the header height so the panel meets the header edge directly under COLLECTIONS */
@media (min-width:1181px){
  .nav,.nav__list{height:var(--header-h)}
  .nav__list{align-items:stretch}
  .nav__list>li{display:flex;align-items:center}
  .nav__list:has(.has-menu:hover,.has-menu:focus-within,.has-menu.is-open) .nav__link[aria-current="page"]::after{transform:scaleX(0)}
  .has-menu:hover>.nav__link::after,.has-menu:focus-within>.nav__link::after,.has-menu.is-open>.nav__link::after{transform:scaleX(1)}
}