.nav {
  --bg: var(--brand-brown);
  --heading: var(--brand-beige);
  --text: var(--brand-beige);
  --accent-text: 217, 175, 102;
  --line: 95, 76, 55;
  color-scheme: dark;
  position: sticky;
  top: 0;
  z-index: 10;
  height: var(--nav-height);
}

.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgb(var(--bg));
}

.nav-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas: "contact brand menu";
  align-items: center;
  gap: var(--space-l);
  height: 100%;
}

.nav-brand {
  grid-area: brand;
  color: rgb(var(--on-primary));
  text-decoration: none;
}

.nav-logo {
  display: block;
  width: 10rem;
  height: auto;
}

.nav-contact {
  grid-area: contact;
  display: none;
  align-items: center;
  gap: var(--space-l);
}

.nav-instagram {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: rgb(var(--text));
  font-size: var(--text-label);
  letter-spacing: 0.16em;
  text-decoration: none;
  text-transform: uppercase;
}

.nav-instagram:hover {
  color: rgb(var(--accent-text));
}

.nav-menu {
  position: relative;
  grid-area: menu;
  justify-self: end;
}

.nav-menu-toggle {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: rgb(var(--text));
  font-size: var(--text-button);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  list-style: none;
}

.nav-menu-toggle::-webkit-details-marker {
  display: none;
}

.nav-menu-toggle:hover {
  color: rgb(var(--accent-text));
}

.nav-menu[open] .nav-menu-toggle {
  font-size: 0;
}

.nav-menu[open] .nav-menu-toggle::after {
  content: "Fechar";
  font-size: var(--text-button);
  letter-spacing: 0.16em;
}

.nav-menu-panel {
  position: fixed;
  top: var(--nav-height);
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-xl) var(--wrap-pad);
  overflow-y: auto;
  background: rgb(var(--bg));
}

.nav-menu-list {
  width: 100%;
  max-width: var(--width-max);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.nav-menu-list li + li {
  border-top: 1px solid rgb(var(--line));
}

.nav-menu-list a {
  display: block;
  padding: 1.125rem 0;
  color: rgb(var(--heading));
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(1.625rem, 1.3rem + 1.8vw, 2.75rem);
  line-height: 1.1;
  text-decoration: none;
}

.nav-menu-list a:hover {
  color: rgb(var(--accent-text));
}

body:has(.nav-menu[open]) {
  overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
  .nav-instagram,
  .nav-menu-toggle,
  .nav-menu-list a {
    transition: color 300ms;
  }
}

@media (min-width: 40em) {
  .nav-contact {
    display: flex;
  }

  .nav-logo {
    width: 13rem;
  }

  .nav-menu-social {
    display: none;
  }
}