/* The header bar — locked 2026-08-31 with the navbar design.
 *
 * Rules: docs/design-language.md, "The header bar". The assembled bar
 * the owner ratified is "A · The book": the name in Newsreader at 24px,
 * and one travelling rule for the whole row.
 *
 * post.css is frozen byte-identical to the prototype and still carries
 * the provisional bar, so this file loads after it and replaces the type
 * inside the bar. The bar's height comes from its padding, and the rule
 * below it is post.css's own border and is not touched here.
 *
 * Every colour is a token. No hex value appears in this file (AC-8).
 */

/* AC-9 — 21px, so the rule below keeps clear of the wordmark's
   descenders. The horizontal padding is post.css's and does not move. */
.topbar { padding: 21px 48px; }

/* AC-2 — the name is the home link, and there is no separate Home. */
.wordmark {
  font-family: var(--wc-serif);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--wc-ink);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--wc-dur-fast) var(--qe-ease);
}

.wordmark:hover { color: var(--wc-accent); }
.wordmark:focus-visible { outline: 2px solid var(--wc-accent); outline-offset: 4px; }

/* The row. `position: relative` is what the travelling rule measures
   against, so it must stay. */
.nav {
  position: relative;
  gap: 26px;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--qe-nav);
}

.nav a {
  position: relative;
  white-space: nowrap;
  transition: color var(--wc-dur-fast) var(--qe-ease);
}

/* AC-6 — only the colour changes, so no word ever changes width and no
   neighbour moves. */
.nav a:hover { color: var(--wc-accent); }
.nav a.here { color: var(--wc-ink); }
.nav a:focus-visible { outline: 2px solid var(--wc-accent); outline-offset: 4px; }

/* AC-4 — one hairline for the whole row. It rests under the current
   page, slides to the link under the pointer, and returns on leave.
   Absolutely positioned, so it can never take part in the layout. */
.runner {
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--wc-accent);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--wc-dur-base) var(--qe-ease),
              width var(--wc-dur-base) var(--qe-ease),
              opacity var(--wc-dur-fast) var(--qe-ease);
}

.runner.on { opacity: 1; }

/* AC-7 — it holds still under reduced motion. It still marks the right
   link; it simply arrives without travelling. */
@media (prefers-reduced-motion: reduce) {
  .runner { transition: none; }
}