/* Шапка и меню (разметка собирается в js/layout.js) */
.header { position: relative; z-index: 20; display: flex; align-items: center; gap: 1.5rem; padding-block: 1.1rem; }
.header__brand, .header__side { position: relative; z-index: 2; flex: none; }
.header__logo { height: clamp(22px, 2.6vw, 28px); width: auto; }

.nav { display: flex; gap: clamp(1rem, 2.2vw, 2rem); margin-inline: auto; }
.nav__link {
  position: relative;
  padding: .35rem 0;
  color: var(--muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .07em;
  transition: color .15s;
}
.nav__link::after { content: ""; position: absolute; inset: auto 0 -2px; height: 3px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.nav__link:hover, .nav__link.is-active { color: var(--text); }
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); }

.header__side { display: flex; align-items: center; gap: .6rem; }

.burger { display: none; width: 44px; height: 44px; place-content: center; gap: 7px; }
.burger i { display: block; width: 26px; height: 3px; background: var(--text); transition: transform .25s var(--ease); }
.is-open .burger i:first-child { transform: translateY(5px) rotate(45deg); }
.is-open .burger i:last-child { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 960px) {
  .header { justify-content: space-between; }
  .burger { display: grid; }
  .nav {
    position: fixed;
    inset: 0;
    z-index: 1;
    flex-direction: column;
    justify-content: center;
    gap: 1.1rem;
    margin: 0;
    padding: 5rem var(--gutter) 2rem;
    background: #0b0b0b;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s, visibility .25s;
  }
  .is-open .nav { opacity: 1; visibility: visible; }
  .nav__link { font: 700 2.4rem/1 var(--font-main); }
  .header__side .btn { display: none; }
  .header__side .burger { display: grid; }
}