:root {
  --enamel: #f3f1e9;
  --cement: #d8d5cb;
  --ash: #595953;
  --clay: #393935;
  --soot: #141412;
  --carbon: #151515;
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

* { box-sizing: border-box; }

html,
body { margin: 0; }

body {
  color: var(--soot);
  background: #fff;
  font-family: var(--font-sans);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

::selection {
  color: var(--enamel);
  background: var(--soot);
}

.site-navigation {
  position: fixed;
  top: 28px;
  left: 28px;
  z-index: 20;
  display: flex;
  gap: 22px;
  zoom: 1.25;
}

.site-navigation a {
  display: flex;
  color: var(--ash);
  font: 11px/1 var(--font-sans);
  letter-spacing: .08em;
  text-decoration: none;
  align-items: center;
  gap: 7px;
}

.site-navigation a span {
  color: var(--cement);
  font-size: 8px;
}

.site-navigation a:hover,
.site-navigation a:focus-visible,
.site-navigation a[aria-current="page"] {
  color: var(--soot);
  outline: none;
}

.site-navigation a[aria-current="page"] span {
  color: var(--ash);
}

@media (max-width: 420px) {
  .site-navigation {
    top: 20px;
    left: 20px;
  }
}