@layer components {
  .site-nav {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--space-4);
    row-gap: var(--space-3);
  }

  .site-nav a {
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  .site-nav a[aria-current="page"] {
    color: var(--color-brand-magenta);
    text-decoration: underline wavy;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.4em;
  }

  .site-nav--light a,
  .site-nav--light a[aria-current="page"] {
    color: var(--color-white);
  }
}