.site-header {
  position: relative;
  z-index: 50;
  background: var(--color-green);
  color: var(--color-white);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding-block: 20px;
}
@media (min-width: 56.25em) {
  .site-header__inner { padding-block: 28px; }
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--color-white);
  text-decoration: none;
}
.brand:hover { color: var(--color-white); }
.brand__icon { flex: 0 0 auto; width: 32px; height: 32px; color: var(--color-gold); }
.brand__text { display: flex; flex-direction: column; line-height: 1.2; }
.brand__name {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: var(--weight-medium);
  letter-spacing: -0.01em;
}
.brand__tagline { font-size: var(--text-xs); color: var(--color-on-dark-muted); }

/* Mobile toggle */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 14px;
  background: transparent;
  border: 1px solid rgb(255 255 255 / 0.45);
  border-radius: var(--radius-sm);
  color: var(--color-white);
  font: inherit;
  font-weight: var(--weight-semibold);
  cursor: pointer;
}
.nav-toggle__bars { position: relative; display: block; width: 18px; height: 2px; background: currentColor; }
.nav-toggle__bars::before, .nav-toggle__bars::after {
  content: ''; position: absolute; left: 0; width: 100%; height: 2px; background: currentColor;
}
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }
@media (min-width: 56.25em) { .nav-toggle { display: none; } }