/* First-paint header. Loaded as a blocking sheet so the nav matches its
   settled look before styles.css arrives. styles.css is applied later
   (media=print, then all). Without these rules the links paint as default
   underlined anchors, then the color transition and the header blur
   transition smear them into colored streaks. Keep these values aligned
   with the header rules in styles.css. */
:root {
  --header-h: 84px;
  --brand-logo-h: 64px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: calc(var(--header-h) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) clamp(1.25rem, 4vw, 3rem) 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  border-bottom: 1px solid transparent;
}

.brand {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: calc(var(--brand-logo-h) * 1686 / 1158);
  height: var(--brand-logo-h);
  line-height: 0;
}

.brand-logo,
.brand-logo-spin {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}

.brand-logo {
  opacity: 0.92;
}

.brand-logo-spin {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.header-actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 0.85rem;
}

.bag-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.15rem;
  background: transparent;
  border: none;
  color: rgba(244, 239, 230, 0.52);
  font-family: Outfit, system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.nav {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: clamp(1rem, 1.7vw, 2.15rem);
}

.nav a {
  position: relative;
  color: rgba(244, 239, 230, 0.52);
  font-family: Outfit, system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 0.4rem 0;
  transition: none;
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgb(236, 184, 62);
  transform: scaleX(0);
  transform-origin: center;
  opacity: 0.75;
  transition: none;
}

.nav a[aria-current="page"] {
  color: #f0c85a;
}

.nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.nav-optional {
  display: none;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(236, 184, 62, 0.16);
  border-radius: 1px;
  background: transparent;
}

.nav-toggle span {
  display: block;
  width: 16px;
  height: 1px;
  margin: 0 auto;
  background: rgb(236, 184, 62);
}

@media (max-width: 1440px) {
  .nav {
    gap: 0.85rem;
  }

  .nav a,
  .bag-toggle {
    letter-spacing: 0.2em;
    font-size: 0.74rem;
  }
}

@media (max-width: 980px) {
  .nav-toggle {
    display: flex;
  }

  .nav {
    display: none;
  }

  .nav.is-open {
    display: flex;
  }
}

@media (max-width: 720px) {
  :root {
    --header-h: 64px;
    --brand-logo-h: 48px;
  }

  .site-header {
    padding: env(safe-area-inset-top, 0px) 1.1rem 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom-color: transparent;
  }
}