.nav {
  gap: clamp(28px, 5vw, 68px);
  padding: 15px 0 13px;
}

.nav a {
  padding: 2px 0 4px;
  font-size: .94rem;
  font-weight: 900;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-color: rgba(23, 19, 14, .58);
}

.nav a:hover {
  color: var(--accent);
  text-decoration-color: currentColor;
}

.nav a[aria-current="page"] {
  color: var(--accent);
  text-decoration-thickness: 2px;
  text-decoration-color: currentColor;
}

@media (max-width: 980px) {
  .nav {
    column-gap: 16px;
    row-gap: 8px;
    padding: 11px 0 10px;
    justify-content: center;
    flex-wrap: wrap;
    overflow-x: visible;
  }

  .nav a {
    flex: 0 0 auto;
    padding-bottom: 3px;
    font-size: .74rem;
    text-underline-offset: 3px;
  }
}

@media (max-width: 760px) {
  .nav a {
    font-size: .64rem;
  }
}