Phase 4: component library

The approved element rules and ornament kit as Astro components in
packages/ui: buttons, pills, chips, filters, kickers, notices, fields and
cards; star paths, the header divider, tick scales and rings, seals and
edge seals, gilt corners, dust and placeholder art; the site header,
footer and page shell. Brand fonts are self-hosted. A gallery page shows
everything, and astro check now runs with the root typecheck.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_012aSbo2D1qP8cMFQCykf7kx

packages/ui/src/components/SectionHeading.astro

@@ -0,0 +1,41 @@
+---
+/**
+ * A section heading: optional gold eyebrow over a tick scale, the heading in
+ * Cinzel, and the filament underline beneath it.
+ */
+import Kicker from "./Kicker.astro";
+
+interface Props {
+  eyebrow?: string;
+  level?: 1 | 2 | 3;
+  id?: string;
+  class?: string;
+}
+const { eyebrow, level = 2, id, class: className } = Astro.props;
+const H = `h${level}` as "h1" | "h2" | "h3";
+---
+<div class:list={["gk-heading", className]}>
+  {eyebrow && <Kicker>{eyebrow}</Kicker>}
+  <H id={id}><slot /></H>
+  <span class="gk-underline" aria-hidden="true"></span>
+</div>
+
+<style>
+  .gk-heading {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+  .gk-heading :is(h1, h2, h3) {
+    margin: 0;
+  }
+  .gk-underline {
+    display: block;
+    width: 180px;
+    max-width: 60%;
+    height: 2px;
+    border-radius: 2px;
+    background: linear-gradient(90deg, var(--gk-gold), rgba(201, 162, 74, 0.15) 70%, transparent);
+    box-shadow: 0 0 8px rgba(201, 162, 74, 0.35);
+  }
+</style>