.c-site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  transition: transform .28s ease, opacity .28s ease;
  will-change: transform, opacity;
  background:
    linear-gradient(rgba(255, 250, 240, .12), rgba(255, 250, 240, .12)),
    url('../img/header-bg.webp') center top / 450px 64px repeat;
  color: #2f241d;
  box-shadow: 0 1px 4px rgba(47, 36, 29, .18);
}


.c-site-header.is-footer-visible {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

.c-site-header__inner {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.c-site-header__brand {
  display: inline-flex;
  align-items: center;
  color: #2f241d;
  text-decoration: none;
}

.c-site-header__logo-image {
  display: block;
  width: auto;
  height: 42px;
}

.c-site-header__logo-text {
  display: inline-block;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .16em;
}

.c-site-header__menu {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-site-header__menu a {
  color: #4a372b;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-decoration: none;
}

.c-site-header__menu a:hover,
.c-site-header__menu a:focus-visible {
  color: #9a6a2f;
}

@media (max-width: 767px) {
  .c-site-header {
    background-size: 450px 56px;
  }

  .c-site-header__inner {
    min-height: 56px;
  }

  .c-site-header__nav {
    display: none;
  }

  .c-site-header__logo-image {
    height: 36px;
  }
}