:root {
  --site-nav-top: 20px;
  --site-nav-left: 24px;
  --site-nav-font: "Zeitkreis Barlow Condensed", "Arial Narrow", sans-serif;
  --site-nav-size: 20px;
  --site-nav-weight: 400;
  --site-nav-line-height: 1;
  --site-nav-letter-spacing: 0.12em;
}

.topbar {
  padding-top: max(var(--site-nav-top), env(safe-area-inset-top));
  padding-left: max(var(--site-nav-left), env(safe-area-inset-left));
}

.wordmark,
.project-back,
.language-current,
.language-trigger,
.language-option {
  font-family: var(--site-nav-font);
  font-size: var(--site-nav-size);
  font-weight: var(--site-nav-weight);
  letter-spacing: var(--site-nav-letter-spacing);
  line-height: var(--site-nav-line-height);
}

.wordmark {
  display: block;
  width: max-content;
}

.project-back {
  position: fixed;
  top: max(var(--site-nav-top), env(safe-area-inset-top));
  left: max(var(--site-nav-left), env(safe-area-inset-left));
  z-index: 10001;
  display: block;
  color: #10131d;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.project-back--on-dark {
  color: rgba(255, 255, 255, 0.92);
}

.project-back:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 4px;
}

.language-switcher {
  position: fixed;
  top: max(var(--site-nav-top), env(safe-area-inset-top));
  left: max(64px, calc(env(safe-area-inset-left) + 64px));
  z-index: 9998;
  display: block;
  width: max-content;
  min-width: 2ch;
  height: var(--site-nav-size);
}

.language-trigger,
.language-option {
  display: block;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
  outline: none;
}

.language-trigger {
  width: max-content;
  min-width: 2ch;
  height: 20px;
  color: var(--language-color);
}

.language-current {
  display: block;
  color: var(--language-color);
  text-transform: uppercase;
  pointer-events: none;
  transition: color 160ms ease;
}

.language-trigger:hover .language-current,
.language-trigger:focus-visible .language-current,
.language-switcher.is-open .language-current,
.language-option:hover,
.language-option:focus-visible {
  color: var(--language-accent);
}

.language-menu {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transform: translateY(-5px);
  pointer-events: none;
  transition:
    grid-template-rows 330ms cubic-bezier(.4, 0, .2, 1),
    opacity 280ms ease-out,
    transform 330ms cubic-bezier(.4, 0, .2, 1);
}

.language-options {
  display: flex;
  min-height: 0;
  overflow: hidden;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.language-option {
  height: 20px;
  color: var(--language-muted);
  opacity: 0;
  transform: translateY(-4px);
  transition:
    color 160ms ease,
    opacity 290ms ease-out,
    transform 310ms cubic-bezier(.4, 0, .2, 1);
  transition-delay: 0ms, 0ms, 0ms;
}

.language-option:first-child {
  margin-top: 8px;
}

.language-option[aria-selected="true"] {
  color: var(--language-selected);
}

.language-switcher.is-open .language-menu {
  grid-template-rows: 1fr;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition:
    grid-template-rows 380ms cubic-bezier(.22, 1, .36, 1),
    opacity 180ms ease,
    transform 380ms cubic-bezier(.22, 1, .36, 1);
}

.language-switcher.is-open .language-option {
  opacity: 1;
  transform: translateY(0);
  transition:
    color 160ms ease,
    opacity 180ms ease,
    transform 360ms cubic-bezier(.22, 1, .36, 1);
  transition-delay: 0ms, var(--language-delay), var(--language-delay);
}

@media (prefers-reduced-motion: reduce) {
  .language-menu,
  .language-option,
  .language-current {
    transition-duration: 0.01ms;
    transition-delay: 0ms;
  }
}