.site-navigation {
  position: fixed;
  top: clamp(20px, 2.5vw, 40px);
  left: clamp(20px, 2.5vw, 40px);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  color: #fff;
  font-family: "EScape Arial", Arial, Helvetica, sans-serif;
  font-size: clamp(16px, 1.6vw, 25px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.02em;
  mix-blend-mode: difference;
  text-align: left;
  text-transform: uppercase;
}

.site-navigation a { color: inherit; text-decoration: none; transition: opacity 180ms ease; }
.site-navigation a:hover { opacity: .56; }
.site-navigation a:focus-visible { outline: 1px solid currentColor; outline-offset: .3rem; }
.site-navigation__wordmark { font-size: inherit; font-weight: inherit; letter-spacing: inherit; line-height: inherit; }
.site-navigation__links { display: flex; flex-direction: column; gap: .18rem; }
.site-navigation__links a { font-size: inherit; font-weight: inherit; letter-spacing: inherit; line-height: inherit; }
.site-navigation a[aria-current="page"] { text-decoration: underline; text-underline-offset: .18em; }

@media (max-width: 640px) {
  .site-navigation { top: 16px; left: 16px; gap: .55rem; font-size: 16px; }
}