/* Site head primitive — simple page-top brand + nav.
 *
 * For pages that don't need the full masthead (display headline +
 * lede + TOC pills + hero figure). One line of text: brand on the
 * left, nav links on the right.
 *
 * Composition:
 *   <header class="site-head">
 *     <a class="site-head__brand" href="/">Brand</a>
 *     <nav class="site-head__nav" aria-label="Primary">
 *       <a href="…">Section</a>
 *       <a href="…" aria-current="page">Current</a>
 *     </nav>
 *   </header>
 */
.site-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  padding-block: var(--space-7) var(--space-5);
  margin-block-end: var(--space-6);
  border-block-end: 1px solid var(--rule-soft);
  font-size: var(--size-small);
  flex-wrap: wrap;
}
.site-head__brand {
  font-weight: var(--weight-medium);
  color: var(--fg);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.site-head__nav {
  display: flex;
  gap: var(--space-4);
  font-variant-numeric: tabular-nums;
}
.site-head__nav a {
  color: var(--fg-muted);
  text-decoration: none;
  transition: color var(--duration-base) var(--ease-standard);
}
.site-head__nav a:hover,
.site-head__nav a:focus-visible { color: var(--clay); }
.site-head__nav a[aria-current="page"] { color: var(--fg); }