.site-header {
  --nav-red: #971b2b;
  --nav-gold: #c6a15b;
  --nav-ink: #241b1c;
  position: fixed;
  z-index: 100;
  top: 0;
  right: 0;
  left: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  color: #fff;
  transition: background .3s, box-shadow .3s, color .3s;
}

.site-header::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: transparent;
  content: "";
  transition: background .3s;
}

.site-header.is-scrolled {
  color: var(--nav-ink);
  background: transparent;
  box-shadow: 0 10px 35px rgba(36, 27, 28, .08);
}

.site-header.is-scrolled::before {
  background: rgba(255, 253, 248, .95);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.nav {
  display: flex;
  min-height: 86px;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.brand {
  display: flex;
  align-items: center;
}

.brand-logo {
  width: 102px;
  height: 64px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  transition: filter .3s;
}

.is-scrolled .brand-logo { filter: none; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 31px;
  font-family: "Manrope", Arial, sans-serif;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.nav-links > a { position: relative; }

.nav-links > a:not(.nav-cta)::after {
  position: absolute;
  right: 0;
  bottom: -8px;
  left: 0;
  height: 1px;
  background: var(--nav-gold);
  content: "";
  transform: scaleX(0);
  transition: transform .25s;
}

.nav-links > a:hover::after,
.nav-links > a[aria-current="page"]::after {
  transform: scaleX(1);
}

.nav-cta {
  padding: 13px 19px;
  border: 1px solid var(--nav-gold);
  color: #fff;
}

.is-scrolled .nav-cta { color: var(--nav-red); }

.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 50%;
  color: #fff;
  background: rgba(36, 27, 28, .5);
  box-shadow: 0 4px 18px rgba(36, 27, 28, .18);
  cursor: pointer;
  transition: color .25s, background .25s, border-color .25s, box-shadow .25s;
}

.menu-toggle span {
  display: block;
  width: 25px;
  height: 1px;
  margin: 6px auto;
  background: currentColor;
  transition: transform .25s, opacity .25s;
}

.site-header.is-scrolled .menu-toggle {
  border-color: rgba(36, 27, 28, .14);
  color: var(--nav-ink);
  background: rgba(255, 253, 248, .94);
}

@media (max-width: 960px) {
  .menu-toggle {
    z-index: 2;
    display: block;
  }

  .nav-links {
    position: fixed;
    inset: 0;
    box-sizing: border-box;
    display: flex;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    padding: max(96px, calc(72px + env(safe-area-inset-top))) max(24px, env(safe-area-inset-right)) max(36px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    overflow-y: auto;
    color: #fff;
    background: rgba(54, 9, 15, .98);
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 1.8rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    opacity: 0;
    overscroll-behavior: contain;
    pointer-events: none;
    transition: opacity .25s;
    -webkit-overflow-scrolling: touch;
  }

  .nav-links.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  .menu-open .menu-toggle span:first-child { transform: translateY(7px) rotate(45deg); }
  .menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
  .menu-open .menu-toggle span:last-child { transform: translateY(-7px) rotate(-45deg); }
  .menu-open .site-header { color: #fff; }
  .menu-open .site-header .menu-toggle {
    border-color: rgba(255, 255, 255, .24);
    color: #fff;
    background: rgba(255, 255, 255, .08);
    box-shadow: none;
  }
}

@media (max-width: 720px) {
  .nav { min-height: 72px; }
  .brand-logo { width: 79px; height: 50px; }
}