/* ==========================================================================
   Previously — Unified Site Header (2026-10-02)
   --------------------------------------------------------------------------
   James, 2026-10-02: "Exactly how the navigation bar is set up on the home
   page, I want it set up on every page like that."

   Every page on the site uses the identical header structure:
     topbar (date) → brand (Previously. wordmark) → nav (pvn-mount) → white
     divider line (rendered by nav.css), with content starting underneath.

   Design tokens match the homepage exactly.
   ========================================================================== */

/* Design tokens — ALIASED to the global theme tokens (James, 2026-10-03:
   "This all needs to be solid in the same color. Only colors changing is
   when the system changes the color."). The header background, ink, and
   rules now resolve to the exact same tokens as the page background and
   text, so the header can NEVER diverge from the theme. No separate
   light-mode block needed — these follow the system automatically. */
:root {
  --pv-hdr-bg: var(--pv-noir, #0a0a0b);
  --pv-hdr-ink: var(--pv-ivory, #f4efe6);
  --pv-hdr-dim: var(--pv-ivory-dim, rgba(244,239,230,.64));
  --pv-hdr-faint: var(--pv-ivory-faint, rgba(244,239,230,.42));
  --pv-hdr-rule: var(--pv-rule, rgba(244,239,230,.14));
  --pv-hdr-red: var(--pv-red, #ec4634);
  --pv-hdr-serif: Georgia, 'Times New Roman', serif;
}

/* ---------- header wrap ---------- */
.pv-site-head {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 32px);
  background: var(--pv-hdr-bg);
}

/* ---------- topbar (date line) ---------- */
.pv-site-head .topbar {
  border-bottom: 1px solid var(--pv-hdr-rule);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pv-hdr-faint);
  padding: 10px 0;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

/* ---------- brand (wordmark) ---------- */
.pv-site-head .brand {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 22px 0 6px;
  flex-wrap: wrap;
}
.pv-site-head .brand .word {
  font-family: 'Previously Wordmark', var(--pv-hdr-serif);
  font-size: clamp(38px, 5.6vw, 58px);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--pv-hdr-ink);
}
.pv-site-head .brand .word em {
  font-style: normal;
  color: var(--pv-hdr-red);
}
.pv-site-head .brand .desk {
  font-size: 11px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--pv-hdr-dim);
  border-left: 1px solid var(--pv-hdr-rule);
  padding-left: 14px;
}

/* ---------- mobile: hide secondary topbar text ---------- */
@media (max-width: 760px) {
  .pv-site-head .topbar .hide-m {
    display: none;
  }
}

/* (No separate light-mode block — the --pv-hdr-* tokens above alias the
   global theme tokens, so they follow the device automatically.) */