/* Sticky site header, wordmark, and the primary nav — a row on wide screens,
   a panel behind a menu button below 48rem. */
.site-header {
  min-height: 5.5rem;
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding-inline: max(calc((100vw - 74rem) / 2 + 2.5rem), 1.25rem);
  border-bottom: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 10;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--color-ink);
  font: 600 1.25rem/1 var(--font-body);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark img {
  width: 2.15rem;
  height: 2.15rem;
  /* The mark sits on a white tile with its padding baked into the file, so the
     icons around its edge never touch the rounded corners. The ring gives the
     tile an edge on the light theme, where the header is white too. */
  border-radius: 28%;
  background: #fff;
  box-shadow: 0 0 0 1px var(--color-border);
}
.site-header nav {
  display: flex;
  gap: 1.35rem;
  margin-left: auto;
}
.site-header nav a,
.theme-switcher button {
  color: var(--color-muted);
  background: transparent;
  border: 0;
  padding: 0;
  font: 500 0.76rem/1 var(--font-mono);
  text-decoration: none;
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
}
.site-header nav a:hover,
.site-header nav a:focus-visible,
.theme-switcher button:hover,
.theme-switcher button[aria-pressed='true'] {
  color: var(--color-accent);
}
.nav-toggle {
  display: none;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  margin-left: auto;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink);
  cursor: pointer;
}
.nav-toggle svg {
  width: 1.25rem;
  height: 1.25rem;
}
.nav-toggle-cross,
.nav-is-open .nav-toggle-lines {
  display: none;
}
.nav-is-open .nav-toggle-cross {
  display: block;
}

.theme-switcher {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.theme-switcher button {
  padding: 0.38rem 0.48rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
}
.theme-switcher button[aria-pressed='true'] {
  border-color: var(--color-chip-border);
  background: var(--color-chip);
}

@media (max-width: 48rem) {
  .site-header {
    gap: var(--space-3);
  }
  .nav-toggle {
    display: grid;
  }
  .site-header nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 11;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: var(--space-2) clamp(1.25rem, 4vw, 2.5rem) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-0.5rem);
    transition:
      opacity var(--dur-fast) var(--ease-out),
      transform var(--dur-fast) var(--ease-out),
      visibility var(--dur-fast) var(--ease-out);
  }
  .nav-is-open .site-header nav {
    visibility: visible;
    opacity: 1;
    transform: none;
  }
  .site-header nav a {
    padding: 0.95rem 0;
    border-bottom: 1px solid var(--color-divider);
    font-size: 0.95rem;
    font-family: var(--font-body);
    letter-spacing: 0;
    color: var(--color-ink);
  }
  .site-header nav a:last-child {
    border-bottom: 0;
  }
}
@media (max-width: 34rem) {
  .site-header {
    min-height: 4rem;
  }
  .wordmark span {
    font-size: 0.9rem;
  }
  .wordmark img {
    width: 1.85rem;
    height: 1.85rem;
  }
}