.nav__group {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nav__group::after {
  content: "";
  position: absolute;
  top: 100%;
  right: -16px;
  left: -16px;
  height: 22px;
  pointer-events: none;
}

.nav__group:hover::after,
.nav__group:focus-within::after {
  pointer-events: auto;
}

.nav__group .nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.nav__group .nav__link::after {
  width: 5px;
  height: 5px;
  margin-left: 2px;
  border-right: 1px solid currentcolor;
  border-bottom: 1px solid currentcolor;
  content: "";
  opacity: .55;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform .25s;
}

.nav__group:hover .nav__link::after,
.nav__group:focus-within .nav__link::after {
  transform: rotate(225deg) translate(-1px, -1px);
}

.nav__menu {
  position: absolute;
  top: calc(100% + 14px);
  left: -12px;
  z-index: 100;
  min-width: 360px;
  padding: 18px;
  visibility: hidden;
  border: 1px solid #c8bea8;
  background: rgba(248, 243, 231, .985);
  box-shadow: 0 18px 48px rgba(60, 40, 20, .18), 0 2px 8px rgba(60, 40, 20, .08);
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity .22s .18s, transform .22s .18s, visibility .22s .18s;
  white-space: nowrap;
  backdrop-filter: blur(8px);
}

.nav__menu::before {
  position: absolute;
  top: -7px;
  left: 28px;
  width: 13px;
  height: 13px;
  border-top: 1px solid #c8bea8;
  border-left: 1px solid #c8bea8;
  background: rgba(248, 243, 231, .985);
  content: "";
  transform: rotate(45deg);
}

.nav__group:hover .nav__menu,
.nav__group:focus-within .nav__menu {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0s;
}

.nav__menu-h {
  margin-bottom: 6px;
  padding: 0 10px 12px;
  border-bottom: 1px solid #d9d0bb;
  color: #6f6758;
  font-family: "Noto Sans SC", sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .4em;
  text-align: left;
  text-transform: uppercase;
}

.nav__menu-h em {
  display: block;
  margin-top: 4px;
  color: #5a5347;
  font-family: "Cormorant Garamond", serif;
  font-size: 11px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: none;
}

.nav__menu a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 11px 10px;
  border-bottom: 1px dashed transparent;
  color: #3d0f13;
  font-family: "ZCOOL XiaoWei", "Noto Serif SC", serif;
  font-size: 15px;
  letter-spacing: .16em;
  line-height: 1.3;
  transition: background .2s, color .2s;
}

.nav__menu a:last-child { border-bottom: 0; }
.nav__menu a:hover,
.nav__menu a:focus-visible { color: #c1292e; background: #efe8d4; }
.nav__menu a > i { min-width: 18px; color: #a6823a; font: 400 13px "Cormorant Garamond", serif; font-style: normal; letter-spacing: .04em; }
.nav__menu a > b { flex: 1; font-weight: 400; }
.nav__menu a > em { color: #6f6758; font: italic 400 11px "Cormorant Garamond", serif; letter-spacing: .05em; text-align: right; }

body.nav-is-open { overflow: hidden; }

@media (max-width: 1100px) {
  .nav__menu { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nav__group .nav__link::after,
  .nav__menu { transition: none; }
}