Tidy the dead space above the hero on the home page

On home the header is invisible at scroll 0 (per the scroll-driven
hero-collapse animation) but it still occupies its natural flow
space: ~52px header height + 32px header margin-bottom + 24px body
padding-top = ~108px of mostly-invisible chrome before the hero
panel's top edge.

Tightened the two pieces that aren't the header itself:

  body:has(.hero)         padding-top: var(--space-4) → var(--space-2)
                          (24px → 12px)
  body:has(.hero) header  margin-bottom: var(--space-5) → var(--space-2)
                          (32px → 12px)

Net: dead space above the hero drops from ~108px to ~76px on the
home page only. Other pages keep their original spacing — the rules
are scoped via body:has(.hero) and live inside the
@supports (animation-timeline: scroll()) + prefers-reduced-motion
no-preference gates, so they only apply where the invisible-header
animation runs.

Didn't touch the header's own padding (12px each side of nav) so
the header at its final emerged state stays the same size as
everywhere else; only the OUTSIDE spacing got tighter.

Author: claude

public/site.8f693d8043fe.css public/site.57a55415849b.csspublic/site.8f693d8043fe.css renamed to public/site.57a55415849b.css

@@ -37,7 +37,8 @@
         .hero { animation: hero-fade linear forwards; animation-timeline: scroll(root); animation-range: 0 280px; }
         .hero h1 { animation: hero-h1-morph linear forwards; animation-timeline: scroll(root); animation-range: 0 240px; }
         .hero p { animation: hero-p-fade linear forwards; animation-timeline: scroll(root); animation-range: 0 140px; }
-        body:has(.hero) header { opacity: 0; background: rgba(245, 241, 235, 0); box-shadow: none; animation: header-emerge linear forwards; animation-timeline: scroll(root); animation-range: 40px 240px; }
+        body:has(.hero) { padding-top: var(--space-2); }
+        body:has(.hero) header { opacity: 0; background: rgba(245, 241, 235, 0); box-shadow: none; margin-bottom: var(--space-2); animation: header-emerge linear forwards; animation-timeline: scroll(root); animation-range: 40px 240px; }
         body:has(.hero) header .brand { filter: blur(4px); transform: scale(0.88); animation: brand-focus linear forwards; animation-timeline: scroll(root); animation-range: 80px 240px; }
       }
     }

public/site.css

@@ -37,7 +37,8 @@
         .hero { animation: hero-fade linear forwards; animation-timeline: scroll(root); animation-range: 0 280px; }
         .hero h1 { animation: hero-h1-morph linear forwards; animation-timeline: scroll(root); animation-range: 0 240px; }
         .hero p { animation: hero-p-fade linear forwards; animation-timeline: scroll(root); animation-range: 0 140px; }
-        body:has(.hero) header { opacity: 0; background: rgba(245, 241, 235, 0); box-shadow: none; animation: header-emerge linear forwards; animation-timeline: scroll(root); animation-range: 40px 240px; }
+        body:has(.hero) { padding-top: var(--space-2); }
+        body:has(.hero) header { opacity: 0; background: rgba(245, 241, 235, 0); box-shadow: none; margin-bottom: var(--space-2); animation: header-emerge linear forwards; animation-timeline: scroll(root); animation-range: 40px 240px; }
         body:has(.hero) header .brand { filter: blur(4px); transform: scale(0.88); animation: brand-focus linear forwards; animation-timeline: scroll(root); animation-range: 80px 240px; }
       }
     }

src/asset_manifest.py

@@ -1,3 +1,3 @@
 # Generated by scripts/fingerprint_assets.py. Do not edit by hand.
-ASSET_PATHS = {'SITE_CSS': '/site.8f693d8043fe.css', 'SYNTAX_JS': '/syntax-highlight.3b6c7f730d46.js', 'EDITOR_JS': '/editor.a4a7766e1b9b.js'}
-HTML_CACHE_VERSION = '3104d816ddfc'
+ASSET_PATHS = {'SITE_CSS': '/site.57a55415849b.css', 'SYNTAX_JS': '/syntax-highlight.3b6c7f730d46.js', 'EDITOR_JS': '/editor.a4a7766e1b9b.js'}
+HTML_CACHE_VERSION = '324f7ab4825b'