:root {
  --editorial-paper: #f4f0e7;
  --editorial-ink: #211d18;
  --editorial-wine: #7d2928;
  --editorial-gold: #b88937;
}

body {
  background: var(--editorial-paper);
}

body::before {
  display: none;
}

.site-header {
  min-height: 88px;
  border-bottom-color: rgba(33, 29, 24, .12);
  background: rgba(250, 248, 243, .96);
  backdrop-filter: blur(16px);
}

.brand {
  display: inline-flex;
  align-items: center;
  width: 148px;
  height: 62px;
}

.brand img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: invert(1);
}

.main-nav a {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .15em;
}

.button {
  border-radius: 0;
  font-size: .75rem;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.is-menu .site-header {
  position: relative;
  border-bottom: 0;
}

.is-menu .menu-intro {
  position: relative;
  min-height: 355px;
  align-items: end;
  overflow: hidden;
  padding-top: 5rem;
  padding-bottom: 3.5rem;
  background:
    linear-gradient(90deg, rgba(24, 18, 14, .88) 0%, rgba(24, 18, 14, .62) 48%, rgba(24, 18, 14, .2) 100%),
    url('/assets/menu-hero.avif') center 54% / cover;
}

.is-menu .menu-intro::after {
  content: "";
  position: absolute;
  inset: 1.25rem;
  border: 1px solid rgba(255, 255, 255, .34);
  pointer-events: none;
}

.is-menu .menu-intro > div {
  position: relative;
  z-index: 1;
}

.is-menu .menu-intro h1 {
  font-weight: 400;
  letter-spacing: -.04em;
}

.is-menu .menu-intro .eyebrow {
  color: #e6c88f;
  font-weight: 700;
  letter-spacing: .2em;
}

.is-menu .menu-intro > div > p:last-child {
  max-width: 42ch;
  color: rgba(255, 255, 255, .88);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.15rem;
}

.is-menu .language-switch {
  margin-bottom: .15rem;
  border-radius: 0;
  background: rgba(20, 15, 12, .48);
}

.is-menu .language-switch a {
  border-radius: 0;
  font-size: .76rem;
  letter-spacing: .12em;
}

.is-menu .language-switch a[aria-current="true"] {
  background: #f7f3eb;
}

.is-menu .menu-content {
  max-width: 1160px;
  padding-bottom: 7rem;
}

.is-menu .menu-toolbar {
  top: 0;
  margin-bottom: 4rem;
  padding-top: 0;
  padding-bottom: 0;
  border-top: 1px solid rgba(33, 29, 24, .13);
  border-bottom: 1px solid rgba(33, 29, 24, .13);
  background: rgba(250, 248, 243, .97);
}

.is-menu .menu-nav {
  justify-content: center;
  gap: 1.45rem;
  padding: 1rem 0;
}

.is-menu .menu-nav a {
  min-height: auto;
  padding: .3rem 0;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  color: #5f564e;
  background: transparent;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.is-menu .menu-nav a:hover,
.is-menu .menu-nav a[aria-current="true"] {
  border-bottom-color: var(--editorial-wine);
  color: var(--editorial-wine);
  background: transparent;
}

.is-menu .menu-results {
  max-width: 940px;
}

.is-menu .allergen {
  margin: 0 0 4rem;
  padding: .85rem 0;
  border: 0;
  border-top: 1px solid rgba(33, 29, 24, .18);
  border-bottom: 1px solid rgba(33, 29, 24, .18);
  border-radius: 0;
  background: transparent;
  color: #61584f;
  font-size: .84rem;
}

.is-menu .allergen summary {
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.is-menu .menu-section {
  scroll-margin-top: 86px;
  padding-bottom: 5.5rem;
}

.is-menu .menu-section-heading {
  justify-content: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1.15rem;
  border-bottom: 1px solid rgba(33, 29, 24, .25);
  text-align: center;
}

.is-menu .menu-section-heading h2 {
  font-size: clamp(2.7rem, 5vw, 4.4rem);
  font-weight: 400;
  letter-spacing: -.04em;
}

.is-menu .menu-items {
  gap: 0 3rem;
}

.is-menu .menu-item {
  padding: 1.25rem 0;
  border-bottom: 1px solid rgba(33, 29, 24, .13);
}

.is-menu .menu-item h3 {
  font: 400 1.27rem/1.2 Georgia, "Times New Roman", serif;
  letter-spacing: -.015em;
}

.is-menu .menu-item .price {
  color: var(--editorial-wine);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  font-weight: 400;
}

.is-menu .menu-item p {
  max-width: 46ch;
  margin-top: .45rem;
  color: #746a61;
  font-size: .88rem;
}

.is-menu .menu-item.featured {
  position: relative;
  margin: 0;
  padding: 1.25rem 1rem;
  border: 0;
  border-bottom: 1px solid rgba(33, 29, 24, .13);
  border-radius: 0;
  background: rgba(255, 255, 255, .52);
}

.is-menu .menu-item.featured::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--editorial-gold);
}

.is-menu .popular {
  margin-top: .55rem;
  padding: 0;
  border-radius: 0;
  color: #8a682e;
  background: transparent;
  font-size: .61rem;
  letter-spacing: .13em;
}

.site-footer .brand img {
  filter: none;
}

.footer-brand {
  width: 190px;
  height: 82px;
}

@media (max-width: 720px) {
  .site-header {
    min-height: 76px;
  }

  .brand {
    width: 126px;
    height: 54px;
  }

  .is-menu .site-header {
    min-height: 76px;
  }

  .is-menu .brand {
    justify-self: center;
    width: 142px;
    height: 60px;
  }

  .is-menu .menu-intro {
    min-height: 285px;
    padding: 4rem 1.25rem 2.3rem;
    background-position: center 54%;
  }

  .is-menu .menu-intro::after {
    inset: .7rem;
  }

  .is-menu .menu-intro h1 {
    font-size: clamp(3.2rem, 15vw, 4.5rem);
  }

  .is-menu .menu-intro > div > p:last-child {
    max-width: 28ch;
    font-size: .98rem;
  }

  .is-menu .language-switch {
    align-self: end;
  }

  .is-menu .menu-content {
    padding-bottom: 4rem;
  }

  .is-menu .menu-toolbar {
    top: 0;
    margin-bottom: 2.6rem;
  }

  .is-menu .menu-nav {
    justify-content: flex-start;
    gap: 1.25rem;
    padding: .9rem 0;
  }

  .is-menu .menu-nav a {
    font-size: .67rem;
  }

  .is-menu .allergen {
    margin-bottom: 3rem;
  }

  .is-menu .menu-section {
    scroll-margin-top: 64px;
    padding-bottom: 4rem;
  }

  .is-menu .menu-section-heading h2 {
    font-size: 2.65rem;
  }

  .is-menu .menu-item {
    padding: 1.1rem 0;
  }

  .is-menu .menu-item h3 {
    font-size: 1.18rem;
  }

  .is-menu .menu-item.featured {
    padding: 1.1rem .8rem;
  }

  .site-footer .brand {
    width: 170px;
    height: 74px;
  }
}