#166 Published spaces: the notesd look

Stacked on #162 (stack #163: #158 ← #160 ← #162 ← this).

Gives every published site a bit of notesd's character, with nothing for the owner to set. Class names and CSS variables don't change, so existing custom CSS keeps working. --font-heading now defaults to the serif.

What

• The bar, as on notesd's own pages: sticky and full width, with a 3px accent line on top and the page blurred underneath (backdrop-filter, with a solid fallback).
  • On phones, the name and links stay on one line while they fit.
• Instrument Serif (the face the apps use for note titles) for the site name, titles, h2/h3 and blockquotes, which read as pull quotes.
  • It's served by the site itself: latin and latin-ext subsets, regular and italic, about 67 KB in all. A page loads only the subsets its text needs.
  • Files are named by their content and cached for good. There's no third-party request. Licence: OFL, in assets/fonts/OFL.txt.
• Meta lines: dates and reading time ("1 min read", at 230 words a minute) in small mono capitals. In lists, the date sits above the title as an eyebrow.
• The accent on selected text, list markers, link underlines, and tag pills on a post's tags and on the Tags page, plus a short accent dash above the footer.
• Heading anchors: each body heading gets an id from its words and a link to itself, shown on hover or focus. The ids avoid the page's own main. Since goldmark doesn't render aria-label, the link's accessible name is visually hidden text.
• Excerpts leave out #tags, since the post's page lists them.
• Favicon: an SVG of the name's first letter on the accent, light or dark with the browser.
  • Its colours come from assets/accents.json, written by scripts/space_icons.py alongside theme.css.
  • It's the one response whose CSP allows an inline style, which it needs for its colours.
• Link previews: Open Graph tags (site name, title, description, type, URL, published time) and twitter:card.
• Page transitions: pages cross-fade with @view-transition, unless the reader prefers reduced motion.
• Home: the "Posts" heading is visually hidden but kept for screen readers, since the bar already says where you are.

Not in this PR

As agreed: no featured newest post, no month headings, no icon on the site.

Tests

• Unit:
  • heading ids, de-duplication and main reserved;
  • excerpts without tags;
  • reading time;
  • the favicon's letter, colours and escaping;
  • the built site's fonts (served, named in the stylesheet, not gzipped again), icon, Open Graph tags and reading time.
• API: fonts and the favicon are served with their content types and immutable; the favicon gets its own CSP.
• E2E: the home page's heading check now asserts it's present for screen readers rather than visible.
• Checked by eye: light, dark and a 390px phone, on a real published demo space.
• mise run lint, typecheck, test and test:e2e: all green.

---

Summary by cubic

Gives every published site notesd's character with nothing for the owner to set. Class names and CSS variables don't change, so existing custom CSS keeps working; --font-heading now defaults to the serif.

• A sticky bar with the accent along its top and a blurred backdrop; the skip link shows above it.
• Titles, headings and pull quotes use Instrument Serif, served by the site itself (latin and latin-ext, regular and italic, OFL).
• Dates and reading time are small mono capitals; the accent marks selection, list markers, link underlines and tag pills.
• A post's body headings get an id and a link to themselves, on its page only, not in the feed; excerpts drop #tags from prose, leaving code blocks' # alone.
• The favicon is the site name's first letter on the accent, light or dark with the browser, with its own CSP allowing its inline style.
• Pages carry Open Graph tags and cross-fade where the browser supports view transitions; reduced motion turns that off and stills the tag pills.