.nav {
  background: var(--color-iron);
  color: var(--color-vellum);
  height: 64px;
  padding: 0 var(--s-12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 50;
}

.nav-mark {
  font-family: var(--font-wordmark);
  font-weight: var(--weight-semibold);
  font-size: 18px;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--color-vellum);
}

.nav-links {
  display: flex;
  gap: var(--s-4);
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.nav-links a {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--fs-small);
  color: var(--color-vellum);
  letter-spacing: 0;
  transition: color var(--duration-fast) var(--ease-standard);
}

.nav-links a:hover {
  color: var(--color-teal-iron);
}

.nav-links a[aria-current="page"] {
  color: var(--color-teal-iron);
}

.nav-links a:focus-visible {
  outline: 2px solid var(--color-teal-iron);
  outline-offset: 4px;
}

@media (max-width: 720px) {
  .nav {
    padding: 0 var(--s-5);
    height: auto;
    padding-top: 16px;
    padding-bottom: 16px;
  }
  .nav-links {
    gap: var(--s-3);
  }
}