.site-header {
  /* Horizontal inset + max width: --layout-pad-x / --layout-inner-max (base.css), same as footer & main columns */
  --header-pad-y: clamp(0.45rem, 1vw + 0.25rem, 1.05rem);
  --header-gap: clamp(0.75rem, 2vw + 0.35rem, 2rem);
  --header-logo-h: clamp(1.65rem, 3.2vw + 0.85rem, 3.1rem);
  --header-nav-size: clamp(0.8125rem, 0.45vw + 0.72rem, 1.0625rem);
  --header-nav-gap: clamp(0.35rem, 1.2vw + 0.2rem, 1.75rem);
  --header-link-pad-y: clamp(0.35rem, 0.6vw + 0.2rem, 0.55rem);
  --header-link-border: clamp(1px, 0.12em, 2px);

  /* Relative scaling */
  --header-bar-scale: 1.5;
  --header-menu-scale: 1;
  --header-logo-scale: 1.1;

  /* One-line nav block height (font + link padding). Not affected by --header-logo-scale. */
  --header-nav-block: calc(
    (var(--header-nav-size) * var(--header-menu-scale)) * 1.35
    + (var(--header-link-pad-y) * var(--header-menu-scale)) * 2
  );
  --header-logo-slot-scale: 1;
  --header-logo-slot: calc(var(--header-nav-block) * var(--header-logo-slot-scale));

  background: #000;
  border-bottom: 0.5px solid #505050;
  position: relative;
  z-index: 300;
}

.site-header__inner {
  display: flex;
  position: relative;
  align-items: center;
  gap: calc(var(--header-gap) * var(--header-bar-scale));
  padding: calc(var(--header-pad-y) * var(--header-bar-scale)) var(--layout-pad-x);
  max-width: var(--layout-inner-max);
  margin: 0 auto;
}

.site-header__brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 0;
}

.site-header__brand img {
  height: min(var(--header-logo-h), var(--header-logo-slot));
  width: auto;
  object-fit: contain;
  display: block;
  transform: scale(var(--header-logo-scale));
  transform-origin: left center;
}

.site-header__nav {
  display: flex;
  margin-left: auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: calc(var(--header-nav-gap) * var(--header-menu-scale));
}

.site-header__link {
  color: var(--muted);
  font-size: calc(var(--header-nav-size) * var(--header-menu-scale));
  font-weight: 300;
  text-decoration: none;
  letter-spacing: 0.02em;
  padding: calc(var(--header-link-pad-y) * var(--header-menu-scale)) 0.125em;
  border-bottom: var(--header-link-border) solid transparent;
  transition:
    color 140ms ease,
    border-color 140ms ease,
    opacity 140ms ease;
}

.site-header__link:hover {
  color: #fff;
}

/* Override global `button` rules from base.css (width:100%, margins, etc.) */
.site-header button.site-header__menu-btn {
  appearance: none;
  -webkit-appearance: none;
  display: none;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  min-width: 2.75rem;
  max-width: none;
  margin: 0 0 0 auto;
  margin-top: 0;
  padding: 0;
  box-shadow: none;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 6px;
  background: transparent;
  color: #f3f5f7;
  font-size: inherit;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition:
    border-color 160ms ease,
    background-color 160ms ease,
    color 160ms ease;
}

.site-header button.site-header__menu-btn:hover {
  border-color: rgba(255, 255, 255, 0.75);
  color: #fff;
  transform: none;
}

.site-header button.site-header__menu-btn:active {
  transform: none;
}

.site-header__menu-icon {
  display: block;
  width: 1.2rem;
  height: 1.5px;
  background: currentColor;
  box-shadow:
    0 -5px 0 currentColor,
    0 5px 0 currentColor;
}

.site-header.is-nav-open button.site-header__menu-btn {
  background: rgba(255, 255, 255, 0.08);
}

@media (max-width: 500px) {
  .site-header {
    --header-logo-scale: 1.5;
  }

  .site-header__inner {
    justify-content: flex-start;
    gap: 0.75rem;
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
    min-height: 3.35rem;
  }

  .site-header button.site-header__menu-btn {
    display: inline-flex;
  }

  /* Hide horizontal nav on small screens until opened (display:none, not max-height) */
  .site-header .site-header__nav {
    display: none;
  }

  .site-header.is-nav-open .site-header__nav {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    transform: none;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 0.5rem 0 0.75rem;
    background: #000;
    border-bottom: 1px solid #505050;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.45);
    z-index: 301;
  }

  .site-header__link {
    padding: 0.85rem var(--layout-pad-x);
    font-size: calc(var(--header-nav-size) * var(--header-menu-scale) * 1.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .site-header__link:last-child {
    border-bottom: 0;
  }

  .site-header__link--active {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 3px solid #fff;
    padding-left: calc(var(--layout-pad-x) - 3px);
  }
}