:root {
  --announcement-height: 31px;
  --header-expanded-height: 88px;
  --header-compact-height: 64px;
}

main {
  padding-top: calc(var(--announcement-height) + var(--header-expanded-height));
}

.announcement {
  position: fixed;
  z-index: 69;
  top: 0;
  right: 0;
  left: 0;
  transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.site-header {
  position: fixed;
  z-index: 70;
  top: var(--announcement-height);
  right: 0;
  left: 0;
  height: var(--header-expanded-height);
  transition:
    top 360ms cubic-bezier(0.22, 1, 0.36, 1),
    height 360ms cubic-bezier(0.22, 1, 0.36, 1),
    color 260ms ease,
    background-color 260ms ease,
    border-color 260ms ease,
    box-shadow 260ms ease;
}

body.nav-scrolled .announcement {
  transform: translateY(-100%);
}

body.product-detail-open .announcement {
  transform: translateY(-100%);
}

.site-header.is-scrolled,
body.product-detail-open .site-header {
  top: 0;
  height: var(--header-compact-height);
  color: #fff;
  background: rgba(21, 18, 15, 0.96);
  border-bottom-color: rgba(197, 165, 112, 0.42);
  box-shadow: 0 14px 36px rgba(21, 18, 15, 0.2);
}

.site-header > .nav-logo {
  display: grid;
  place-items: center;
  line-height: 0;
  width: 280px;
  height: 56px;
  justify-self: center;
  transition: width 360ms cubic-bezier(0.22, 1, 0.36, 1), height 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-logo .nav-lockup {
  grid-area: 1 / 1;
  display: block;
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  transition: opacity 220ms ease;
}

.nav-logo .nav-lockup-full {
  opacity: 1;
}

.nav-logo .nav-lockup-scrolled {
  opacity: 0;
}

.site-header.is-scrolled > .nav-logo,
body.product-detail-open .site-header > .nav-logo {
  width: 240px;
  height: 48px;
}

.site-header.is-scrolled .nav-lockup-full,
body.product-detail-open .site-header .nav-lockup-full {
  opacity: 0;
}

.site-header.is-scrolled .nav-lockup-scrolled,
body.product-detail-open .site-header .nav-lockup-scrolled {
  opacity: 1;
}

.site-header > .nav-logo:focus-visible {
  outline: 1px solid #9b7b4d;
  outline-offset: 7px;
}

.site-header.is-scrolled > .nav-logo:focus-visible {
  outline-color: #d0ae76;
  outline-offset: 2px;
}

#combos,
#fragrances,
#site-footer {
  scroll-margin-top: calc(var(--header-compact-height) + 16px);
}

.footer-main > img.footer-logo {
  width: min(46vw, 620px);
  filter: none;
}

.menu-panel > img.menu-monogram {
  width: 54%;
  max-width: 430px;
  opacity: 0.9;
  filter: none;
}

@media (max-width: 700px) {
  :root {
    --header-expanded-height: 72px;
    --header-compact-height: 58px;
  }

  .site-header > .nav-logo {
    width: min(210px, 56vw);
    height: 44px;
  }

  .site-header.is-scrolled > .nav-logo,
  body.product-detail-open .site-header > .nav-logo {
    width: min(190px, 54vw);
    height: 40px;
  }

  .footer-main > img.footer-logo {
    width: 100%;
  }

  .menu-panel > img.menu-monogram {
    display: block;
    position: absolute;
    top: 24px;
    left: 24px;
    width: 94px;
    height: 94px;
    object-fit: contain;
    opacity: 1;
  }
}