.nav {
  width: 100%;
  height: 92px;
  padding: 0 5vw;
  color: rgba(245, 240, 228, .9);
  background: linear-gradient(to bottom, rgba(5, 12, 9, .38), rgba(5, 12, 9, 0));
  transition: height .4s ease, background-color .4s ease, box-shadow .4s ease, backdrop-filter .4s ease;
}

.nav .brand {
  gap: 13px;
  color: #eee8da;
}

.nav .brand-mark {
  width: 28px;
  height: 28px;
  border-color: rgba(238, 232, 218, .78);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 14px;
}

.nav .brand > span:nth-child(2) {
  font-family: 'Noto Serif SC', 'Source Han Serif SC', serif;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .08em;
}

.nav .brand small {
  margin: 5px 0 0 -6px;
  color: rgba(245, 240, 228, .68);
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 8px;
  font-weight: 400;
  letter-spacing: .25em;
}

.nav nav {
  gap: 44px;
}

.nav nav a {
  position: relative;
  padding: 9px 0 13px;
  color: rgba(245, 242, 232, .72);
  font-family: 'Noto Sans SC', 'Source Han Sans SC', sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .055em;
  opacity: 1;
  transition: color .35s ease;
}

.nav nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 0;
  height: 1px;
  background: #b98a3e;
  transform: translateX(-50%);
  transition: width .35s cubic-bezier(.2, .7, .2, 1);
}

.nav nav a:hover::after,
.nav nav a:focus-visible::after {
  width: 28px;
}

.nav nav a:hover,
.nav nav a:focus-visible {
  color: rgba(255, 251, 240, .96);
}

.nav .nav-cta {
  position: relative;
  padding: 11px 17px;
  border: 1px solid rgba(239, 218, 173, .38);
  border-radius: 30px;
  color: rgba(248, 240, 222, .94);
  font-family: 'Noto Sans SC', 'Source Han Sans SC', sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .035em;
  background: rgba(7, 17, 13, .08);
  transition: color .35s ease, border-color .35s ease, background-color .35s ease;
}

.nav .nav-cta::after {
  display: none;
}

.nav .nav-cta span {
  display: inline-block;
  margin-left: 7px;
  transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}

.nav .nav-cta:hover span,
.nav .nav-cta:focus-visible span {
  transform: translate(3px, -3px);
}

.nav .nav-cta:hover,
.nav .nav-cta:focus-visible {
  color: #fffaf0;
  border-color: rgba(239, 218, 173, .68);
  background: rgba(239, 218, 173, .08);
}

.nav.scrolled {
  height: 80px;
  color: rgba(245, 240, 228, .9);
  background: rgba(7, 17, 13, .78);
  backdrop-filter: blur(16px);
  box-shadow: inset 0 -1px rgba(201, 155, 74, .12);
}

.nav.scrolled .nav-cta {
  border-color: rgba(239, 218, 173, .3);
}

@media (max-width: 900px) {
  .nav { height: 76px; padding: 0 24px; }
  .nav.scrolled { height: 70px; }
  .nav .nav-cta { font-size: 13px; }
}