header {
  background-color: var(--primary);
  position: fixed;
  z-index: 10;
  inset-block-start: 0;
  inset-inline: 0;

  nav {
    ul {
      display: flex;
      justify-content: flex-end;
      padding: 0;
      list-style: none;
      flex-wrap: wrap;
    }

    li {
      padding: 6px 20px;
      padding: 6px clamp(10px, 3vw, 20px);
      margin: 0;
      text-align: end;
    }

    a {
      text-decoration: none;
      text-underline-offset: 0.4rem;

      &:hover {
        text-decoration: underline .12rem;
      }

      &[aria-current="page"] {
        color: var(--text-2);
        text-decoration: underline .12rem;
        font-weight: var(--font-weight-semibold)
      }
    }
  }
}