fix(site): landing showcase cards caption the piece, not the shared pipeline

Every showcase `teaches` ends in the same "through UVs, bake, LOD,
collider, and Unity glTF, asserting recomputed budgets" tail, which the
section lede already states, and the one-line ellipsis cut every card to
that boilerplate. build_site.py now derives `caption` (the piece-specific
clause; 73 of 76 pieces match, the rest fall back to the full sentence),
and card captions clamp to two lines instead of one.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Author: TMHSDigital

scripts/site/build_site.py

@@ -311,9 +311,31 @@ def load_examples(repo_root: Path) -> list[dict]:
     return load_gallery_items(repo_root, "examples/gallery.json", "examples")
 
 
+# Every showcase `teaches` reads "A procedural <piece> ... through UVs, bake,
+# LOD, collider, and Unity glTF, asserting recomputed budgets ...". The tail is
+# the same for all pieces and the section lede already says it, so a card that
+# shows the sentence from the start spends its line on boilerplate.
+_SHOWCASE_TEACHES = re.compile(
+    r"^A procedural (.+?)[\s,:;—–-]*\b(?:carried |taken |run |all |then |and )?"
+    r"through UVs, bake\b", re.S)
+
+
+def showcase_caption(teaches: str) -> str:
+    """The piece-specific clause of a showcase ``teaches``, or the whole
+    sentence when it does not follow the template."""
+    m = _SHOWCASE_TEACHES.match(teaches)
+    if not m:
+        return teaches
+    cap = m.group(1).strip()
+    return cap[:1].upper() + cap[1:]
+
+
 def load_showcase(repo_root: Path) -> list[dict]:
     """Read showcase/gallery.json. Empty or absent is fine — not an error."""
-    return load_gallery_items(repo_root, "showcase/gallery.json", "pieces")
+    pieces = load_gallery_items(repo_root, "showcase/gallery.json", "pieces")
+    for piece in pieces:
+        piece["caption"] = showcase_caption(piece.get("teaches", ""))
+    return pieces
 
 
 def pick_featured(examples: list[dict]) -> list[dict]:

scripts/site/template.html.j2

@@ -161,8 +161,8 @@
     .render-card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
     .render-meta { display: flex; align-items: baseline; gap: 0.75rem; padding: 0.6rem 0.9rem; }
     .render-meta .name { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text); white-space: nowrap; }
-    .render-meta .teach { color: var(--dim); font-size: var(--fs-sm); white-space: nowrap; overflow: hidden;
-      text-overflow: ellipsis; }
+    .render-meta .teach { color: var(--dim); font-size: var(--fs-sm); overflow: hidden;
+      display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
     .panel-cta { display: inline-block; margin-top: 1.25rem; font-weight: 500; font-size: var(--fs-md); color: var(--select); }
     .panel-cta:hover { text-decoration: underline; }
     /* featured subset: gallery link is the section's primary call to action */
@@ -253,7 +253,6 @@
     @media (max-width: 820px) {
       .skill-grid, .render-grid { grid-template-columns: 1fr; }
       .recent-grid { grid-template-columns: 1fr 1fr; }
-      .render-meta .teach { white-space: normal; }
     }
     @media (max-width: 640px) {
       /* The gizmo would sit on the version label; the mode label goes. */
@@ -354,7 +353,7 @@
           <img src="{{ ex.heroSite }}" srcset="{{ ex.thumbSite }} 640w, {{ ex.heroSite }} 1280w" sizes="(min-width: 821px) 500px, calc(100vw - 4.5rem)" alt="{{ ex.alt | default(ex.name ~ ' render', true) }}" loading="lazy" decoding="async" width="1280" height="720" />
           <div class="render-meta">
             <span class="name">{{ ex.name }}</span>
-            <span class="teach">{{ ex.teaches }}</span>
+            <span class="teach">{{ ex.caption or ex.teaches }}</span>
           </div>
         </a>
         {% endfor %}
@@ -399,7 +398,7 @@
           <img src="{{ ex.heroSite }}" srcset="{{ ex.thumbSite }} 640w, {{ ex.heroSite }} 1280w" sizes="(min-width: 821px) 500px, calc(100vw - 4.5rem)" alt="{{ ex.alt | default(ex.name ~ ' render', true) }}" loading="lazy" decoding="async" width="1280" height="720" />
           <div class="render-meta">
             <span class="name">{{ ex.name }}</span>
-            <span class="teach">{{ ex.teaches }}</span>
+            <span class="teach">{{ ex.caption or ex.teaches }}</span>
           </div>
         </a>
         {% endfor %}