facelift: the scroll story - bento capabilities, dossier cards, series badges, GitOps receipt

02 Capabilities becomes a 4-col bento (Edge AI 2x2 flagship w/ magenta corner radial, Platform
wide, magenta-flavoured security tile, Observability row-completer) driven by span/flavor fields
in skills.ts. 03 Selected Work becomes dossier cards: house-style SVG thumbnails (per-project
motif via DossierThumb), DOSSIER/00N corner tags, 'the argument' line from the outcome field,
chip tags, mono meta footer. 04 Writing cards gain the security-series badge (data/series.ts)
and sit three across. Section numbers glow cyan; a circuit divider (gradient hairlines + two
diamonds) closes the hero. Footer opens with the GitOps receipt - git sha + build date baked at
build time via lib/build-info.ts, zero runtime calls.

src/components/DossierThumb.astro

@@ -0,0 +1,83 @@
+---
+// House-style mini-diagram for a dossier card thumbnail. Keyed by the project's
+// `diagram` frontmatter; each motif is a tiny node/line sketch in the board palette.
+// Pure SVG, pulsing cores only (reduced-motion turns them off).
+interface Props {
+  kind?: string;
+}
+const { kind = "generic" } = Astro.props;
+---
+
+<svg viewBox="0 0 400 180" aria-hidden="true" class="thumb">
+  {kind === "edge-ai" ? (
+    <>
+      {/* GPU chip feeding a rack of stores */}
+      <line x1="70" y1="90" x2="330" y2="50" class="ln ln--c" />
+      <line x1="70" y1="90" x2="330" y2="90" class="ln ln--c" />
+      <line x1="70" y1="90" x2="330" y2="130" class="ln ln--m" />
+      <rect x="46" y="66" width="48" height="48" rx="6" class="nd nd--c" />
+      <text x="70" y="95" text-anchor="middle" class="tx">GPU</text>
+      <rect x="314" y="36" width="32" height="28" rx="4" class="nd nd--dim" />
+      <rect x="314" y="76" width="32" height="28" rx="4" class="nd nd--dim" />
+      <rect x="314" y="116" width="32" height="28" rx="4" class="nd nd--m" />
+      <circle cx="200" cy="70" r="2.5" class="dot dot--c pulse" />
+      <circle cx="200" cy="110" r="2.5" class="dot dot--m pulse-slow" />
+    </>
+  ) : kind === "homelab" ? (
+    <>
+      {/* hub and spokes — the fleet */}
+      <line x1="200" y1="90" x2="90" y2="45" class="ln ln--c" />
+      <line x1="200" y1="90" x2="90" y2="135" class="ln ln--c" />
+      <line x1="200" y1="90" x2="310" y2="45" class="ln ln--m" />
+      <line x1="200" y1="90" x2="310" y2="135" class="ln ln--m" />
+      <circle cx="200" cy="90" r="24" class="hub" />
+      <circle cx="200" cy="90" r="3" class="dot dot--c pulse" />
+      <circle cx="90" cy="45" r="12" class="nd nd--c" />
+      <circle cx="90" cy="135" r="12" class="nd nd--c" />
+      <circle cx="310" cy="45" r="12" class="nd nd--m" />
+      <circle cx="310" cy="135" r="12" class="nd nd--m" />
+    </>
+  ) : (
+    <>
+      {/* pipeline — commits flowing through gates to a fleet */}
+      <line x1="40" y1="90" x2="360" y2="90" class="ln ln--c" />
+      <rect x="88" y="70" width="40" height="40" rx="5" class="nd nd--c" />
+      <rect x="180" y="70" width="40" height="40" rx="5" class="nd nd--dim" />
+      <rect x="272" y="70" width="40" height="40" rx="5" class="nd nd--m" />
+      <circle cx="60" cy="90" r="2.5" class="dot dot--c pulse" />
+      <circle cx="156" cy="90" r="2.5" class="dot dot--c pulse-slow" />
+      <circle cx="248" cy="90" r="2.5" class="dot dot--m pulse" />
+      <circle cx="340" cy="90" r="2.5" class="dot dot--m pulse-slow" />
+    </>
+  )}
+</svg>
+
+<style>
+  .thumb {
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+  .ln {
+    stroke-width: 1;
+  }
+  .ln--c { stroke: rgba(63, 186, 245, 0.3); }
+  .ln--m { stroke: rgba(232, 121, 249, 0.3); }
+  .nd { fill: var(--panel-solid); stroke-width: 1.5; }
+  .nd--c { stroke: var(--accent); }
+  .nd--m { stroke: rgba(232, 121, 249, 0.5); stroke-width: 1; }
+  .nd--dim { stroke: rgba(126, 139, 161, 0.5); stroke-width: 1; }
+  .hub { fill: rgba(63, 186, 245, 0.06); stroke: var(--accent); stroke-width: 1.5; }
+  .tx { fill: var(--accent); font-family: var(--font-mono); font-size: 10px; }
+  .dot--c { fill: var(--accent); }
+  .dot--m { fill: var(--accent-2); }
+  .pulse { animation: thumbPulse 2.4s ease-in-out infinite; }
+  .pulse-slow { animation: thumbPulse 3.4s ease-in-out infinite; }
+  @keyframes thumbPulse {
+    0%, 100% { opacity: 0.35; }
+    50% { opacity: 1; }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .pulse, .pulse-slow { animation: none; }
+  }
+</style>