/* ==========================================================================
   Kira Howe — a dense, programmer-flavored web log.
   Warm charcoal + a single teal accent, IBM Plex Sans / Mono, Caveat wordmark.
   Dual theme: dark by default, light via prefers-color-scheme. No JS.

   The system, in five rules:
   1. Two voices. Sans carries content (titles, prose, excerpts); mono
      carries the metadata layer (dates, counts, types, tags, nav, labels),
      always at --fs-sm.
   2. One link behaviour. Links are accent and underline on hover, at one
      shared offset — declared once on `a`. Muted chrome links (tags, day
      headings, "more") additionally warm to accent. Composite rows underline
      only their title. The two filled controls (brand, search button)
      invert to accent instead.
   3. One ledger row. Every dense entry list — year archive, related list,
      sidebar recents — is the same row: mono date, type dot, accent title.
   4. One gutter. Every full-width container shares --gutter, so the page
      edge never moves between pages.
   5. Everything is a token: spacing, type, radii, tracking, line height.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Design tokens
   -------------------------------------------------------------------------- */

:root {
  /* Dark theme (default) */
  --bg: #17171a;            /* page background — near-black, faintly warm */
  --panel: #212125;         /* code blocks, subtle raised areas */
  --fg: #d6d4cc;            /* body text */
  --head: #f1efe8;          /* headings, strong text */
  --muted: #908d83;         /* metadata, dates, labels */
  --hair: rgba(255, 255, 255, .08);        /* standard hairline rule */
  --hair2: rgba(255, 255, 255, .14);       /* nav separator, input borders */
  --hair-faint: rgba(255, 255, 255, .022); /* intra-day whisper rule */
  --code-bg: rgba(255, 255, 255, .06);     /* inline code background */
  --accent: #64d1dd;        /* teal — every title, link, wordmark */
  --on-accent: #0b1416;     /* text/glyph on a filled accent */
  --hit: rgba(100, 209, 221, .18);  /* matched-term wash on search results */

  /* One colour per entry type (nav words, dots, syntax) */
  --post: #cd9ce9;
  --link: #e79f4e;
  --quote: #8fdf9a;
  --release: #ff7cb8;
  --tool: #a5a8f5;

  /* Spacing scale — every gap/pad/margin references one of these */
  --sp1: 4px;
  --sp2: 8px;
  --sp3: 12px;
  --sp4: 16px;
  --sp5: 24px;
  --sp6: 32px;
  --gutter: var(--sp6);     /* the one horizontal page edge, sitewide */

  /* Radii — boxes get --r; inline code gets the smaller step */
  --r: 7px;
  --r-sm: 4px;

  /* Type families */
  --sans: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --script: "Caveat", cursive;

  /* Type scale — one base reading size + a few steps. Every font-size
     references one of these; no bespoke px sizes live in the rules below. */
  --fs-sm: 13px;    /* the mono metadata layer: nav, feet, meta, tags, code */
  --fs: 16px;       /* base reading text: body, articles, excerpts, quotes */
  --fs-md: 18px;    /* entry titles, article h3, lead paragraph */
  --fs-lg: 22px;    /* article h2, month name */
  --fs-xl: 32px;    /* display: page-header h1, article h1 */

  /* Line heights — two predictable steps. Reading prose gets the roomy one;
     headings, titles and dense rows get the tight one. Single-line chrome
     keeps the font shorthand's default (normal) line-height. */
  --lh: 1.6;         /* body & prose */
  --lh-tight: 1.3;   /* headings, titles, dense rows */

  /* Tracking — sans display type tightens; uppercase mono labels open up.
     Mono otherwise stays untracked (it's a typewriter). */
  --ls-tight: -.01em;
  --ls-caps: .12em;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f9f9f9;          /* near-white paper */
    --panel: #ffffff;
    --fg: #33312b;
    --head: #17150f;
    --muted: #6d6a60;       /* darkened to clear 4.5:1 on the paper */
    --hair: rgba(0, 0, 0, .1);
    --hair2: rgba(0, 0, 0, .16);
    --hair-faint: rgba(0, 0, 0, .045);
    --code-bg: rgba(0, 0, 0, .05);
    --accent: #00778c;      /* deep teal — clears AA on the paper */
    --on-accent: #ffffff;
    --hit: rgba(0, 119, 140, .14);

    --post: #aa20e8;
    --link: #c1750a;
    --quote: #378911;
    --release: #d91671;
    --tool: #6d6dea;
  }
}

/* One source of truth for type → colour: an element tagged with its type
   class exposes --type-color, which its dot and nav word both read. */
.post    { --type-color: var(--post); }
.link    { --type-color: var(--link); }
.quote   { --type-color: var(--quote); }
.release { --type-color: var(--release); }
.tool    { --type-color: var(--tool); }

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

body {
  max-width: 860px;
  margin: 0 auto;
  font-family: var(--sans);
  font-size: var(--fs);
  line-height: var(--lh);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* The one link behaviour: accent, hover underlines at one shared offset */
a { color: var(--accent); text-decoration: none; text-underline-offset: 2px; }
a:hover { text-decoration: underline; }

/* Composite row links underline only their title, never the whole row */
.brand:hover, .index-row:hover, .side-link:hover, .facet:hover { text-decoration: none; }
.index-row:hover .title, .side-link:hover .title, .facet:hover .title { text-decoration: underline; }

/* Muted chrome links warm to accent on hover */
.tag, .day-heading a, .excerpt-more { color: var(--muted); }
.tag:hover, .day-heading a:hover, .excerpt-more:hover { color: var(--accent); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

::selection { background: var(--accent); color: var(--on-accent); }

.dot {
  display: inline-block;
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--type-color, var(--muted));
}

.sep { opacity: .45; }

/* --------------------------------------------------------------------------
   Shared patterns — the tag atom, the section label, the ledger row
   -------------------------------------------------------------------------- */

/* A #tag, wherever it appears: feed foot, post footer, cloud, tag index */
.tag { font: 400 var(--fs-sm) var(--mono); }
.tag b { font-weight: 600; color: var(--fg); }

/* Section label: small mono caps — day headings, sidebar and footer h2s */
.day-heading, .side h2, .post-footer h2 {
  margin: 0;
  font: 600 var(--fs-sm) var(--mono);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--muted);
}

/* Ledger row: every dense entry list is `mono date | dot | title` */
.index-row {
  display: grid;
  grid-template-columns: 52px auto 1fr;
  gap: var(--sp3);
  align-items: baseline;
  padding: var(--sp1) 0;
}
.index-row .meta {
  font: 400 var(--fs-sm) var(--mono);
  text-align: right;
  color: var(--muted);
}
.index-row .dot { align-self: center; }
.index-row .title {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: 400 var(--fs) var(--sans);
  line-height: var(--lh-tight);
}

/* The related list and the sidebar recents are both entry-lists: the ledger
   row, but the date now carries its year, so the date column widens to fit
   "Dec 30, 2026". */
.entry-list .index-row { grid-template-columns: 6.5em auto 1fr; }

/* In the sidebar the row flows as one line of inline content — date, dot,
   title — so a long title wraps the full width, its later lines running back
   under the date rather than indenting under a title column. */
.side .entry-list .index-row {
  display: block;
  padding: var(--sp2) 0;
  line-height: var(--lh-tight);
}
.side .entry-list .index-row .meta { margin-right: var(--sp2); }
.side .entry-list .index-row .dot { margin-right: var(--sp2); vertical-align: middle; }
.side .entry-list .index-row .title {
  display: inline;
  overflow: visible;
  white-space: normal;
}

/* --------------------------------------------------------------------------
   Header — wordmark + colour-coded nav (the nav doubles as the type legend)
   -------------------------------------------------------------------------- */

.site-header {
  padding: var(--sp5) var(--gutter) var(--sp3);
  border-bottom: 1px solid var(--hair);
}

.brand {
  display: inline-block;
  padding: var(--sp1) var(--sp2);
  margin-left: calc(var(--sp2) * -1);
  border-radius: var(--r);
  transition: background .12s ease, color .12s ease;
}
.brand:hover { background: var(--accent); }
.brand:hover .brandmark { color: var(--on-accent); }

.brandmark { display: block; width: auto; height: 46px; color: var(--accent); }
.brand-sm .brandmark { height: 32px; }   /* inner pages */

.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp2) var(--sp4);
  margin-top: var(--sp4);
  font: 500 var(--fs) var(--mono);
}
.site-nav .type { color: var(--type-color); }

.nav-sep {
  align-self: stretch;
  width: 1px;
  margin: calc(var(--sp1) * -1) 0 calc(var(--sp3) * -1);
  background: var(--hair2);
}

/* --------------------------------------------------------------------------
   Two-column shell — main feed + right sidebar, with a vertical divider
   -------------------------------------------------------------------------- */

.cols {
  display: grid;
  grid-template-columns: 1fr 300px;
}
.main { border-right: 1px solid var(--hair); }
.sidebar { min-width: 0; }

.side { padding: var(--sp5); }
.side + .side { border-top: 1px solid var(--hair); }
.side h2 { margin-bottom: var(--sp3); }

/* Sidebar link list (recent entries, feeds) — the ledger row's narrow
   cousin: no date column, and titles wrap instead of truncating. */
.side-link {
  display: flex;
  gap: var(--sp2);
  align-items: baseline;
}
.side-link + .side-link { margin-top: var(--sp3); }
/* Dot rides the first line (align-items: baseline above), not the centre
   of a wrapped multi-line title. */
.side-link .title { font: 400 var(--fs) var(--sans); line-height: var(--lh-tight); }

/* --------------------------------------------------------------------------
   Page header — slim #tag / year / month banner
   -------------------------------------------------------------------------- */

.page-header {
  padding: var(--sp6) var(--gutter) var(--sp5);
  border-bottom: 1px solid var(--hair);
}
.page-header h1 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp3);
  margin: 0;
  font: 700 var(--fs-xl) var(--mono);
  line-height: var(--lh-tight);
  color: var(--accent);
}
.page-header .hash { color: var(--muted); }
.page-header .count { font: 400 var(--fs-sm) var(--mono); color: var(--muted); }

/* Per-type count summary under a month header */
.type-summary {
  padding: var(--sp3) var(--gutter) 0;
  font: 400 var(--fs-sm) var(--mono);
  color: var(--muted);
}
.type-summary .sep, .month-count .sep { margin: 0 var(--sp1); }

/* --------------------------------------------------------------------------
   Feed — entries grouped by day. One hairline per day; entries within a day
   are split by spacing plus a whisper rule.
   -------------------------------------------------------------------------- */

.day-group {
  border-top: 1px solid var(--hair);
  padding-bottom: var(--sp5);
}
.day-group:first-child { border-top: 0; }

.day-heading {
  margin-bottom: var(--sp4);
  padding: var(--sp5) var(--gutter) 0;
}
.day-heading a { color: inherit; }

.entry { padding: 0 var(--gutter); }
.entry + .entry {
  margin-top: var(--sp5);
  padding-top: var(--sp5);
  border-top: 1px solid var(--hair-faint);
}

.entry-title {
  margin: 0 0 var(--sp2);
  font: 600 var(--fs-md) var(--sans);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

/* Simon-style "(via)" credit after an outbound entry's title */
.via { font-weight: 400; color: var(--muted); }
.entry-title .via { font-size: .75em; }
.article h1 .via { font-size: .5em; letter-spacing: 0; }

.entry-excerpt {
  margin: 0;
  font: 400 var(--fs) var(--sans);
  line-height: var(--lh);
  color: var(--fg);
  opacity: .82;
}
.excerpt-more { font: 400 var(--fs-sm) var(--mono); white-space: nowrap; }

/* link / release / tool feed cards carry their full body — the comment
   prose (muted, like an excerpt) plus any pull-quote, which reads as a
   conventional left-rule blockquote (styled below) */
.entry-body {
  font: 400 var(--fs) var(--sans);
  line-height: var(--lh);
  color: var(--fg);
}
.entry-body > * { margin: 0 0 var(--sp3); }
.entry-body > :last-child { margin-bottom: 0; }
.entry-body p { opacity: .82; }

.entry-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp1) var(--sp3);
  margin-top: var(--sp3);
  font: 400 var(--fs-sm) var(--mono);
  color: var(--muted);
}
.entry-kind {
  display: inline-flex;
  align-items: center;
  gap: var(--sp2);
}

/* Quote entries — hanging Caveat marks in the quote colour, linked source */
.entry blockquote,
.article blockquote {
  position: relative;
  margin: 0;
  padding-left: var(--sp6);
  font: 400 italic var(--fs) var(--sans);
  line-height: var(--lh);
  color: var(--head);
}
.entry blockquote::before,
.article blockquote::before {
  content: "\201C";
  position: absolute;
  left: calc(var(--sp1) * -1);
  top: .5em;
  font: 700 50px/0 var(--script);
  font-style: normal;
  color: var(--quote);
}
.quote-close {
  margin-left: var(--sp1);
  font: 700 50px/0 var(--script);
  font-style: normal;
  vertical-align: -.5em;
  color: var(--quote);
}
.quote-cite {
  margin-top: var(--sp2);
  font: 400 var(--fs-sm) var(--mono);
  color: var(--muted);
}
/* Feed quotes carry their full body; space its blocks without disturbing
   the row rhythm (the last block stays flush against the cite) */
.entry blockquote p,
.entry blockquote ul,
.entry blockquote ol { margin: 0 0 var(--sp3); }
.entry blockquote ul,
.entry blockquote ol { padding-left: var(--sp5); }
.entry blockquote li::marker { color: var(--muted); }
.entry blockquote > :last-child { margin-bottom: 0; }

/* A link/release/tool pull-quote is a conventional blockquote — a left
   rule and a modest indent, not the hanging Caveat mark that signs a quote
   entry. It also restores symmetric vertical space: the shared rule above
   zeroes the margin for quote rows, which otherwise left the quote flush
   against the comment that follows it. */
.entry-body blockquote {
  margin: var(--sp4) 0;
  padding-left: var(--sp4);
  border-left: 2px solid var(--quote);
}
.entry-body blockquote::before { content: none; }
.feed-more {
  display: inline-block;
  margin: var(--sp5) var(--gutter) 0;
  font: 500 var(--fs-sm) var(--mono);
}

/* --------------------------------------------------------------------------
   Article — single post, static pages. Full reading measure, no sidebar.
   -------------------------------------------------------------------------- */

.article { padding: var(--sp6) var(--gutter) var(--sp5); }
.article h1 {
  margin: 0 0 var(--sp3);
  font: 700 var(--fs-xl) var(--sans);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--head);
}
.article-meta {
  display: flex;
  align-items: center;
  gap: var(--sp2);
  margin: 0 0 var(--sp5);
  font: 400 var(--fs-sm) var(--mono);
  color: var(--muted);
}

.article p,
.article li {
  margin: 0 0 var(--sp4);
  font: 400 var(--fs) var(--sans);
  line-height: var(--lh);
  color: var(--fg);
}
.article .lead { font-size: var(--fs-md); color: var(--head); }
.article h2 {
  margin: var(--sp6) 0 var(--sp3);
  font: 600 var(--fs-lg) var(--sans);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--head);
}
.article h3 {
  margin: var(--sp5) 0 var(--sp3);
  font: 600 var(--fs-md) var(--sans);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--head);
}
.article ul, .article ol { margin: 0 0 var(--sp4); padding-left: var(--sp5); }
.article li { margin-bottom: var(--sp2); }
.article li::marker { color: var(--muted); }

.article code {
  padding: 2px 6px;
  border-radius: var(--r-sm);
  font: 400 .86em var(--mono);
  background: var(--code-bg);
  color: var(--head);
}
.article pre {
  margin: 0 0 var(--sp4);
  padding: var(--sp4);
  border: 1px solid var(--hair);
  border-radius: var(--r);
  background: var(--panel);
  overflow-x: auto;
}
.article pre code {
  padding: 0;
  border-radius: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh);
  background: none;
  color: var(--fg);
}
.article img { max-width: 100%; height: auto; }
.article blockquote { margin: 0 0 var(--sp2); }
.article .quote-cite { margin: 0 0 var(--sp4); }

.unresolved-link { color: var(--muted); }

/* --------------------------------------------------------------------------
   Post footer — tag chips, related ledger, bio
   -------------------------------------------------------------------------- */

.post-footer .section {
  padding: var(--sp5) var(--gutter);
  border-top: 1px solid var(--hair);
}
.post-footer h2 { margin-bottom: var(--sp4); }

.tag-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp1) var(--sp3);
}

.bio { font: 400 var(--fs) var(--sans); line-height: var(--lh); color: var(--muted); }
.bio .more { display: inline-block; margin-top: var(--sp3); }

/* --------------------------------------------------------------------------
   Year archive — month index with per-type counts, days as ledger rows
   -------------------------------------------------------------------------- */

.month-index { padding: var(--sp5) var(--gutter) var(--sp6); }
.month-block {
  padding: var(--sp5) 0;
  border-top: 1px solid var(--hair);
}
.month-block:first-child { padding-top: var(--sp4); border-top: 0; }
.month-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp3);
  margin: 0 0 var(--sp3);
}
.month-name { font: 700 var(--fs-lg) var(--mono); }
.month-count { font: 400 var(--fs-sm) var(--mono); color: var(--muted); }

/* --------------------------------------------------------------------------
   Sidebar widgets — tag cloud, year nav, calendar
   -------------------------------------------------------------------------- */

.tag-cloud { display: flex; flex-wrap: wrap; gap: var(--sp2) var(--sp3); }

.year-nav { display: flex; flex-wrap: wrap; gap: var(--sp2) var(--sp3); font: 400 var(--fs-sm) var(--mono); }
.year-nav .current { font-weight: 600; color: var(--head); }

.calendar-head { display: flex; align-items: baseline; gap: var(--sp2); font: 400 var(--fs-sm) var(--mono); color: var(--muted); }
.calendar {
  width: 100%;
  margin-top: var(--sp3);
  border-collapse: collapse;
  font: 400 var(--fs-sm) var(--mono);
}
.calendar th { padding: var(--sp1) 0; font-weight: 500; text-align: center; color: var(--muted); }
.calendar td { padding: 2px 0; text-align: center; color: var(--muted); opacity: .4; }
.calendar td.on { opacity: 1; }
.calendar td.on a { font-weight: 600; }

/* --------------------------------------------------------------------------
   Tags index, search
   -------------------------------------------------------------------------- */

.tag-index { padding: var(--sp5) var(--gutter) var(--sp6); }
.tag-index .tag-cloud { gap: var(--sp3) var(--sp4); }

/* Search — a command prompt over the whole site: a borderless query bar on
   an accent baseline, relevance-ranked results with highlighted hits, and
   facet rails (type, tag) that narrow without re-typing. */

/* Everything in the bar sits on the query text's baseline — the > mark,
   the clear ×, and the ENTER hint all read as one line of type. */
.search-prompt {
  display: flex;
  align-items: baseline;
  gap: var(--sp3);
  margin: var(--sp6) var(--gutter) 0;
  padding-bottom: var(--sp3);
  border-bottom: 2px solid var(--accent);
}
.prompt-mark { font: 600 var(--fs-lg) var(--mono); color: var(--accent); }
.search-prompt input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  font: 400 var(--fs-xl) var(--sans);
  letter-spacing: var(--ls-tight);
  color: var(--head);
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
}
/* No native clear button — the prompt styling is the whole affordance */
.search-prompt input::-webkit-search-cancel-button,
.search-prompt input::-webkit-search-decoration { -webkit-appearance: none; }
.search-prompt input:focus { outline: none; }  /* the accent baseline is the focus cue */
.search-prompt input::placeholder { color: var(--muted); }
/* Clearing is a plain link back to the blank prompt — no JS. At 20px on
   the shared baseline its ink rides above the ENTER caps; a 2px settle
   centers the two. */
.prompt-clear {
  font: 400 var(--fs-lg) var(--mono);
  line-height: 1;
  color: var(--muted);
  transform: translateY(2px);
}
.prompt-clear:hover { color: var(--accent); text-decoration: none; }
.search-prompt button {
  display: inline-flex;
  align-items: center;
  gap: var(--sp2);
  padding: 0;
  border: 0;
  font: 600 var(--fs-sm) var(--mono);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--muted);
  background: none;
  cursor: pointer;
}
/* The ↵ keeps caps tracking off and hugs its glyph so flex centering
   lines it up with the word; a 1px lift centers it on the caps' optical
   middle (its glyph mass hangs low on the baseline) */
.search-prompt button span { line-height: 1; }
.search-prompt button .key { letter-spacing: 0; transform: translateY(-1px); }
.search-prompt button:hover { color: var(--accent); }

.search-summary,
.search-hint {
  margin: 0;
  padding: var(--sp5) var(--gutter);
  font: 400 var(--fs-sm) var(--mono);
  color: var(--muted);
}
.search-summary b { font-weight: 600; color: var(--head); }
.search-summary .q { color: var(--accent); }

/* A matched term, in a title or an excerpt: a soft accent-tinted panel.
   Results themselves are ordinary feed cards (.day-group / .entry), one
   per hit — relevance order, so each carries its own date heading. */
.hit {
  padding: 0 3px;
  border-radius: var(--r-sm);
  background: var(--hit);
  color: inherit;
}

/* Facet rails: one row per choice — dot or hash, label, right-aligned count */
.facet-list { display: grid; gap: var(--sp2); }
.facet {
  display: flex;
  align-items: baseline;
  gap: var(--sp2);
  font: 400 var(--fs-sm) var(--mono);
  color: var(--fg);
}
.facet .dot { align-self: center; }
.facet .hash { color: var(--muted); }
.facet .n { margin-left: auto; color: var(--muted); }
.facet.active { font-weight: 600; color: var(--head); }
.facet.active .n { font-weight: 600; color: var(--accent); }

.empty { padding: var(--sp5) var(--gutter); color: var(--muted); }

/* Draft preview banner (dev only) */
.draft-banner {
  margin: var(--sp5) var(--gutter) 0;
  padding: var(--sp2) var(--sp4);
  font: 500 var(--fs-sm) var(--mono);
  color: var(--on-accent);
  background: var(--link);
  border-radius: var(--r);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp2) var(--sp5);
  padding: var(--sp4) var(--gutter);
  border-top: 1px solid var(--hair);
  font: 400 var(--fs-sm) var(--mono);
  color: var(--muted);
}
.site-footer .social { display: flex; flex-wrap: wrap; gap: var(--sp1) var(--sp4); }

/* --------------------------------------------------------------------------
   Narrow screens — a tighter gutter, and the columns stack
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  :root { --gutter: var(--sp5); }
  .cols { grid-template-columns: 1fr; }
  .main { border-right: 0; }
  .sidebar { border-top: 1px solid var(--hair); }
  /* The nav wraps to several rows here; a tighter gap reads better and the
     vertical divider doesn't survive the wrap, so drop it. */
  .site-nav { gap: var(--sp2) var(--sp3); }
  .nav-sep { display: none; }
}