.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 20;
  padding-inline: var(--gutter);
  border-block-end: 1px solid var(--color-line-soft);
  background: var(--color-page);
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
  max-inline-size: calc(var(--container) - var(--gutter) * 2);
  min-block-size: 72px;
  margin-inline: auto;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -0.02em;
  text-decoration: none;
  white-space: nowrap;
}

.brand__mark {
  inline-size: 32px;
  block-size: 32px;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-2xl);
  color: var(--color-text-soft);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.site-nav__item--section {
  display: none;
}

.site-nav__link {
  text-decoration: none;
}

.site-nav__link:hover {
  color: var(--color-text);
}

.site-nav__link--button {
  display: inline-flex;
  align-items: center;
  min-block-size: 36px;
  padding-inline: 14px;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: 500;
  transition: background 0.15s;
}

.site-nav__link--button:hover {
  background: var(--color-accent-hover);
  color: var(--color-on-accent);
}

@media (min-width: 640px) {
  .site-nav__item--section {
    display: block;
  }
}