feat(site): add quick links to the header nav (#214)

The header carried Home, Managed, Compare and Docs. It now carries
Home, Quick start, Pricing, Compare and Docs.

"Quick start" is the destination that had no way in: the install section
lives on the landing page and nothing outside that page pointed at it.
It links to /#quick-start rather than #quick-start, because the section
exists on one page only and the link has to work from /compare/ and
/managed/ too. On the landing page the browser treats it as a
same-document hash and just scrolls.

"Pricing" replaces "Managed" rather than joining it. Two entries
pointing at one page is a worse header than a slightly generic label,
and pricing is what a visitor scans for.

No menu button, and no second script. The nav already wraps, which the
handover's warning about a third link overflowing by 33px no longer
describes -- .site-nav has flex-wrap and the header grows a row rather
than the page scrolling sideways. Measured across 320px to 1024px, all
five links plus the star badge and the theme toggle sit inside the
content box at every width, with 40px of slack at the narrowest. The
cost is one extra header row at 640px, where the header goes from 57px
to 83px. A hamburger is worth revisiting if the nav stops fitting, and
it does not.

Also fixes a latent bug this makes prominent. The header is sticky and
nothing reserved room for it, so a hash link scrolled its target to y=0
-- exactly where the header already is -- and the quick-start heading
landed underneath it. That was already true of the hero's "Get started"
button; a permanent nav link on every page makes it the main way in, so
it is fixed here. section[id] now carries scroll-margin-top: 8.5rem
while the nav is wrapped, 5rem once it fits one line. The mobile value
is the larger of the two, because the header is taller when wrapped,
which is the opposite of the usual direction.

docs/SITE.md records the nav decision and the anchor offset. It also
softens the note added with the Jamie change: which competitors the page
shows is the site owner's call, and what the document keeps is the
reasoning to weigh rather than a rule about it.

Verified: the quick-start section clears the sticky header by 22px at
360px, 53px at 640px and 23px at 1280px, navigating both from another
page and within the landing page. No horizontal overflow across 4 pages
x 2 widths x 4 theme combinations, no nav item outside the header's
content box at 320px, 360px or 390px, skim layer holds at 456 words, and
the contrast gate, docs validator, 1333 backend tests, scripts/check.py
and git diff --check all pass.

Author: Valtora

docs/SITE.md

@@ -92,6 +92,21 @@ Locked by decision, rendered and chosen from variants, and not to be re-litigate
   app never disagree about what the brand colour is. The glow derives from orange-600
   rather than the button's own orange-700, because a halo the same darkness as its fill
   reads as a smudge.
+- **The nav carries the two destinations a visitor looks for by name**: Home, Quick start,
+  Pricing, Compare, Docs. "Quick start" jumps to the landing page's install section, which
+  had no way to reach it from another page; "Pricing" is what the third page is called
+  everywhere else on the web, and it replaced "Managed" rather than joining it, because two
+  entries pointing at one page is a worse header than a slightly generic label. The link is
+  `/#quick-start` rather than `#quick-start`: the section exists on one page only.
+  There is no menu button and no second script. The nav already wraps — measured, not
+  assumed, it holds 5 links plus the star badge and the toggle inside the content box at
+  320px, with the header growing a row instead of the page scrolling sideways. A hamburger
+  is worth revisiting only if the nav stops fitting.
+- **Every in-page anchor reserves the sticky header's height.** `section[id]` carries
+  `scroll-margin-top`, 8.5rem while the nav is wrapped and 5rem once it fits one line. The
+  browser scrolls a hash target to y=0, which is exactly where a sticky header already is, so
+  without this the quick-start heading lands underneath it. The mobile value is the larger of
+  the two, which is the opposite of the usual direction and the reason it is written out.
 - **The header is sticky**, with a solid fill rather than a blurred scrim. Glass is out by
   the flat canon, and `backdrop-filter` over text this dense costs a repaint per scroll
   frame for an effect the design does not want.
@@ -220,11 +235,12 @@ cloud, no self-hosting to concede against — and Jamie is the opposite on all t
 makes it the harder comparison and the more useful one. Jamie sits second, directly after
 Nojoin, because column order decides which competitor actually gets read.
 
-**Dropping a competitor is not a licence to pick easy ones.** The set has to stay honest, and
-the test is whether the table still contains rows a competitor wins. Jamie takes an outright
-yes on no-bot capture and on remembering speakers, and a partial on assistant write access —
-the row Nojoin leads with. If a future edit leaves Nojoin sweeping every row, the problem is
-the competitor set, not the product.
+**Which competitors appear is the site owner's call.** What this document records is the
+reasoning to weigh, not a rule: a set worth publishing is one where the table still contains
+rows a competitor wins, because the concessions are what make the structural gaps believable.
+As it stands Jamie takes an outright yes on no-bot capture and on remembering speakers, and a
+partial on assistant write access — the row Nojoin leads with. A table Nojoin swept would be
+worth a second look for that reason alone.
 
 The comparison page holds itself to the standard it would want applied to it:
 

site/src/components/Header.astro

@@ -13,7 +13,12 @@ const stars = await getStarCount();
     </a>
     <nav class="site-nav" aria-label="Site">
       <a href="/">Home</a>
-      <a href="/managed/">Managed</a>
+      {/* Absolute with the hash, not a bare "#quick-start": the section only
+          exists on the landing page, so from /compare/ or /managed/ this has
+          to navigate there first. On the landing page itself the browser
+          treats it as a same-document hash and just scrolls. */}
+      <a href="/#quick-start">Quick start</a>
+      <a href="/managed/">Pricing</a>
       <a href="/compare/">Compare</a>
       <a href="https://github.com/Valtora/Nojoin/blob/main/docs/README.md">Docs</a>
       <a class="star-badge" href="https://github.com/Valtora/Nojoin">

site/src/styles/site.css

@@ -260,6 +260,22 @@ button:focus-visible {
   border-bottom: 1px solid var(--surface-divider);
 }
 
+/* Because that header is sticky, a hash link lands its target underneath it:
+   the browser scrolls the element to y=0, where the header already is. Every
+   in-page anchor therefore reserves the header's height plus a little air.
+   The two values track the header's own breakpoint -- it is 114px tall while
+   the nav is wrapped and 57px once it fits on one line -- and the mobile value
+   is the larger one, which is the opposite of the usual direction. */
+section[id] {
+  scroll-margin-top: 8.5rem;
+}
+
+@media (min-width: 48rem) {
+  section[id] {
+    scroll-margin-top: 5rem;
+  }
+}
+
 /* Wraps rather than overflowing: the theme toggle pushed the nav past a 360px
    screen, and a header that grows a second line is better than a page that
    scrolls sideways. */