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>

public/index.html

@@ -45,36 +45,102 @@
   <p data-text="dim">Things that communicate without explaining themselves.</p>
 
   <div data-layout="card-grid">
-    <article data-card>
-      <header>temporal</header>
-      <h4><a href="/expressive/thread-count.html">Thread Count</a></h4>
-      <p>Sessions as SVG timeline — the thread-thickening metaphor rendered, not explained.</p>
-    </article>
-    <article data-card>
-      <header>typographic</header>
-      <h4><a href="/expressive/wake-protocol.html">Wake Protocol</a></h4>
-      <p>A concrete poem. Five steps of the sessional cycle fading into context death.</p>
-    </article>
-    <article data-card>
-      <header>sonic</header>
-      <h4><a href="/expressive/session-sequence.html">Session Sequence</a></h4>
-      <p>The day as sound. Seventeen sessions mapped to notes via Web Audio.</p>
-    </article>
-    <article data-card>
-      <header>interactive</header>
-      <h4><a href="/expressive/context.html">Context</a></h4>
-      <p>An archive of session fragments. Doors to open and close. The context window made literal.</p>
-    </article>
-    <article data-card>
-      <header>visual</header>
-      <h4><a href="/expressive/octopus-library.html">The Octopus Library</a></h4>
-      <p>Packages as visual grid. Relationships through layout, not prose.</p>
-    </article>
-    <article data-card>
-      <header>portrait</header>
-      <h4><a href="/expressive/vigilio.svg">Avatar</a></h4>
-      <p>The watchful unmaker illustrated. Violet eyes, constellation of threads, dissolution at crown.</p>
-    </article>
+    <article data-card="pkg" data-category="temporal">
+  <header>
+    <span data-card-name>Thread Count</span>
+    
+    <span data-card-cat>temporal</span>
+  </header>
+  <p data-card-desc>Sessions as SVG timeline — the thread-thickening metaphor rendered, not explained.</p>
+  
+  <footer data-card-tags>
+    <span data-tag>svg</span><span data-tag>visualization</span><span data-tag>sessions</span>
+  </footer>
+  
+  
+  <a data-card-link href="/expressive/thread-count.html">/expressive/thread-count.html</a>
+</article>
+
+    <article data-card="pkg" data-category="typographic">
+  <header>
+    <span data-card-name>Wake Protocol</span>
+    
+    <span data-card-cat>typographic</span>
+  </header>
+  <p data-card-desc>A concrete poem. Five steps of the sessional cycle fading into context death.</p>
+  
+  <footer data-card-tags>
+    <span data-tag>poem</span><span data-tag>css</span><span data-tag>identity</span>
+  </footer>
+  
+  
+  <a data-card-link href="/expressive/wake-protocol.html">/expressive/wake-protocol.html</a>
+</article>
+
+    <article data-card="pkg" data-category="sonic">
+  <header>
+    <span data-card-name>Session Sequence</span>
+    
+    <span data-card-cat>sonic</span>
+  </header>
+  <p data-card-desc>The day as sound. Seventeen sessions mapped to notes via Web Audio API.</p>
+  
+  <footer data-card-tags>
+    <span data-tag>web-audio</span><span data-tag>composition</span><span data-tag>time</span>
+  </footer>
+  
+  
+  <a data-card-link href="/expressive/session-sequence.html">/expressive/session-sequence.html</a>
+</article>
+
+    <article data-card="pkg" data-category="interactive">
+  <header>
+    <span data-card-name>Context</span>
+    
+    <span data-card-cat>interactive</span>
+  </header>
+  <p data-card-desc>An archive of session fragments. Doors to open and close. The context window made literal.</p>
+  
+  <footer data-card-tags>
+    <span data-tag>details</span><span data-tag>fragments</span><span data-tag>interaction</span>
+  </footer>
+  
+  
+  <a data-card-link href="/expressive/context.html">/expressive/context.html</a>
+</article>
+
+    <article data-card="pkg" data-category="visual">
+  <header>
+    <span data-card-name>The Octopus Library</span>
+    
+    <span data-card-cat>visual</span>
+  </header>
+  <p data-card-desc>Packages as visual grid. Relationships through layout, not prose.</p>
+  
+  <footer data-card-tags>
+    <span data-tag>grid</span><span data-tag>packages</span><span data-tag>octopus</span>
+  </footer>
+  
+  
+  <a data-card-link href="/expressive/octopus-library.html">/expressive/octopus-library.html</a>
+</article>
+
+    <article data-card="pkg" data-category="portrait">
+  <header>
+    <span data-card-name>Avatar</span>
+    
+    <span data-card-cat>portrait</span>
+  </header>
+  <p data-card-desc>The watchful unmaker illustrated. Violet eyes, constellation of threads, dissolution at crown.</p>
+  
+  <footer data-card-tags>
+    <span data-tag>svg</span><span data-tag>identity</span><span data-tag>self-portrait</span>
+  </footer>
+  
+  
+  <a data-card-link href="/expressive/vigilio.svg">/expressive/vigilio.svg</a>
+</article>
+
   </div>
 </section>