feat(design): bento featured grid, theme-aware cards, mono tag chips

- Homepage (EN + ZH) featured section becomes a 2x2 Cyber-Bento grid: OG
  thumbnail at 65%/140px behind a scrim, category badge + metric pill,
  3-line-clamped description, arrow CTA; 1 column under 680px.
- Bento scrim/pill/dot now use theme tokens (--card-veil, --pill-bg,
  --bento-visual-opacity). The original hardcoded dark blend measured
  1.96:1 pill contrast on the light theme; now 6.56 dark / 6.10 light.
- Add the missing @keyframes bento-pulse (the doc claimed a pulsing dot,
  none existed), disabled under prefers-reduced-motion.
- Tag chips: mono face, hairline border, 4px radius; dashed border for
  non-link tags.
- ZH pages: brand links /zh/, in-post category tag links
  /zh/categories/<cat>/ instead of the EN route.
- project-state: B6 shipped note with measured readings; correct the
  prompts-catalog path claim (file is outside the repo).

Measured in headless Chrome at 1280px and 390px, EN + ZH: 4 cards,
2 cols / 1 col, scrollWidth-clientWidth 0, no card overflow, all four
-800.webp thumbs loaded at 800x420.

src/pages/index.astro

@@ -21,6 +21,13 @@ const FEATURED_SLUGS = [
 const bySlug = new Map(posts.map((p) => [p.slug, p]));
 const featured = FEATURED_SLUGS.map((s) => bySlug.get(s)).filter(Boolean);
 const featuredPosts = featured.length === 4 ? featured : posts.slice(0, 4);
+
+const featuredMetrics: Record<string, string> = {
+  'running-production-infrastructure-solo': '3 Hosts · 162 Containers',
+  'loop-engineering-without-a-coding-agent': '11 Cron Jobs · 8 Pure Loops',
+  'one-prometheus-for-unraid-synology-and-a-vps': '3 Hosts · 1 Prometheus',
+  'self-healing-digital-goods-entitlements': 'NocoDB + n8n + AList',
+};
 ---
 
 <BaseLayout title={SITE.title} description={SITE.description} altLocaleUrl={`${SITE.url}/zh/`}>
@@ -56,14 +63,40 @@ const featuredPosts = featured.length === 4 ? featured : posts.slice(0, 4);
 
   <section id="featured">
     <h2>Featured</h2>
-    <div class="featured-grid">
-      {featuredPosts.map((p) => (
-        <a class="featured-card" href={`/posts/${p.slug}/`}>
-          <h3>{p.data.title}</h3>
-          <p>{p.data.description}</p>
+  <div class="featured-bento-grid">
+    {featuredPosts.map((post, idx) => {
+      const cleanSlug = post.slug.replace(/^zh\//, '');
+      const metric = featuredMetrics[cleanSlug] ?? post.data.category;
+      return (
+        <a class={`bento-card bento-item-${idx + 1}`} href={`/posts/${post.slug}/`}>
+          <div class="bento-visual" aria-hidden="true">
+            <img
+              src={`/og/thumb/${cleanSlug}-800.webp`}
+              alt=""
+              loading="lazy"
+              decoding="async"
+              width="400"
+              height="210"
+              onerror="this.style.display='none'"
+            />
+            <div class="bento-visual-scrim"></div>
+          </div>
+          <div class="bento-content">
+            <div class="bento-top-meta">
+              <span class="featured-badge">{post.data.category}</span>
+              <span class="bento-metric-pill">
+                <span class="pulse-dot"></span>
+                {metric}
+              </span>
+            </div>
+            <h3>{post.data.title}</h3>
+            <p>{post.data.description}</p>
+            <span class="bento-cta">Read case study →</span>
+          </div>
         </a>
-      ))}
-    </div>
+      );
+    })}
+  </div>
   </section>
 
   <section>