@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Sora:wght@300;400;500;600;700&display=swap");

:root {
  --font-display: "Sora", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
}

body {
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

h1,
h2,
h3,
.brand__name {
  text-wrap: balance;
}

.nav-wrap {
  gap: clamp(0.75rem, 1vw, 1rem);
}

.nav-links {
  gap: clamp(0.55rem, 0.95vw, 1.15rem);
  font-size: clamp(10px, 0.68vw, 11px);
  letter-spacing: 0.035em;
}

.nav-links a {
  white-space: nowrap;
}

@media (max-width: 1240px) {
  .nav-wrap > .button {
    display: none;
  }
}

@media (max-width: 1100px) {
  .nav-links {
    gap: clamp(0.45rem, 0.7vw, 0.7rem);
    font-size: 10px;
    letter-spacing: 0.025em;
  }
}