Pkg-cards: Hugo partial + shortcode + color-coded categories (garden#5)

Ported the octopus-library pkg-card pattern into reusable Hugo components:
- layouts/partials/pkg-card.html — renders data-card="pkg" with category
- layouts/shortcodes/pkg-card.html — markdown-usable shortcode
- garden.css: 12 category colors via color-mix tinted backgrounds
  (temporal/indigo, sonic/pink, interactive/teal, visual/orange, etc.)

Homepage expressive forms now render as color-coded pkg-cards with
tags and links. Each category gets a left border accent + tinted pill.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

layouts/partials/pkg-card.html

@@ -0,0 +1,15 @@
+<article data-card="pkg" data-category="{{ .category }}">
+  <header>
+    <span data-card-name>{{ .name }}</span>
+    {{ with .version }}<span data-badge>{{ . }}</span>{{ end }}
+    <span data-card-cat>{{ .category }}</span>
+  </header>
+  <p data-card-desc>{{ .description }}</p>
+  {{ with .tags }}
+  <footer data-card-tags>
+    {{ range . }}<span data-tag>{{ . }}</span>{{ end }}
+  </footer>
+  {{ end }}
+  {{ with .reaches }}<small data-card-reaches>{{ . }}</small>{{ end }}
+  {{ with .link }}<a data-card-link href="{{ . }}">{{ . }}</a>{{ end }}
+</article>