/* The site header the pages share: the wordmark, the cases and controls links and the source link. Needs tokens.css. */
.site-header { height: 72px; display: flex; align-items: center; gap: 56px; padding: 0 var(--space-lg); color: var(--color-ink); font: 14px/1.5 var(--font-body); }
.site-header a { color: inherit; text-decoration: none; }
.wordmark { display: flex; align-items: center; gap: 8px; font-size: 19px; font-weight: 720; letter-spacing: -.65px; white-space: nowrap; }
.brand-dot { width: 5px; height: 5px; margin-top: 3px; background: var(--color-accent); border-radius: 50%; }
.site-links { margin-left: auto; display: flex; gap: 20px; font-size: 12px; }
.site-links a { color: var(--color-muted); }
.site-links a:hover { color: var(--color-ink); }
.repository { width: 38px; height: 38px; display: grid; place-items: center; flex: none; margin-right: -9px; border-radius: var(--radius-control); }
.repository:hover { background: var(--color-subtle); }
.repository svg { width: 22px; height: 22px; stroke: none; }

@media (max-width: 820px) {
  .site-header { height: 62px; gap: 26px; padding: 0 22px; }
}
@media (max-width: 520px) {
  .site-header { padding: 0 16px; gap: 12px; }
  .site-links { gap: 12px; }
  .wordmark { font-size: 17px; }
}