Add OpenGraph/Twitter cards, generated per sin at build time

Link previews are the funnel for a "send the link" site, so give every sin
a share-optimized card.

- og/twitter meta tags on every page (poke as description, canonical URL,
  summary_large_image)
- Per-sin 1200x630 card generated at build: the poke, the before/after
  charts (uniform height so tall vconcat charts fit), severity meter,
  category, and short citations — composed with satori, rasterized with
  @resvg/resvg-js, no browser needed
- Default brand card for the homepage and canon
- Shared chart pipeline extracted to lib/renderChart.ts (used by both the
  on-page component and the card generator)
- Bundle three IBM Plex TTF weights for the rasterizer

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XPEvmMbac2fCvKXpQcovj8

src/pages/sins/[...slug].astro

@@ -23,9 +23,10 @@ const fixedSpec = getChartSpec(sin.data.fixedChart);
 
 // Canonical, shareable URL for this sin — the thing you paste into a thread.
 const pageUrl = new URL(href(`sins/${sin.id}/`), Astro.site).toString();
+const ogImage = new URL(href(`og/${sin.id}.png`), Astro.site).toString();
 ---
 
-<BaseLayout title={`${sin.data.title} — Chart Sins`} description={sin.data.poke}>
+<BaseLayout title={`${sin.data.title} — Chart Sins`} description={sin.data.poke} image={ogImage}>
   <article class="wrap sin">
     <nav class="breadcrumb"><a href={href()}>All sins</a> / {sin.data.title}</nav>