/* Nav · <site-nav></site-nav> plus <script type="module" src="/components/nav.js"> */

site-nav {
  display: block;
  min-height: 61px; /* holds the space before the script runs, so the page doesn't jump */
}

.nav {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.nav__brand .logo-mark {
  color: var(--color-accent);
}