diff --git a/README.md b/README.md
index 52cf9b2..62b4701 100644
--- a/README.md
+++ b/README.md
@@ -7,7 +7,7 @@
 Made by Together AI.
 
 <p align="center">
-  <img src="site/OG-hallmark.png" alt="Hallmark — A design skill that refuses to look AI-generated" />
+  <img src="site/OG-hallmark.png" alt="Hallmark, a design skill that refuses to look AI-generated" />
 </p>
 
 Hallmark picks a macrostructure for the brief, dresses it in one of twenty themes, runs fifty-seven slop-test gates plus a pre-emit self-critique, and refuses the on-distribution defaults every LLM was trained into. Two pages by Hallmark for two different briefs feel like different sites, not colour-swaps of the same template.
@@ -21,17 +21,17 @@ Hallmark picks a macrostructure for the brief, dresses it in one of twenty theme
 | *(default)* | Build new UI. Picks a macrostructure, applies the rule-set, runs the slop test before handing back. |
 | `hallmark audit <target>` | Score existing code against the anti-patterns. Punch list, no edits. |
 | `hallmark redesign <target>` | Throw out the structure, keep copy + IA + brand, rebuild with a different fingerprint. |
-| `hallmark study <screenshot \| URL>` | Extract the **DNA** from a design you admire — macrostructure, type-pairing, colour anchor. Refuses pixel-clones and paid templates. Optionally emits a portable `design.md` for handoff to other AI tools. |
+| `hallmark study <screenshot \| URL>` | Extract the **DNA** from a design you admire: macrostructure, type-pairing, colour anchor. Refuses pixel-clones and paid templates. Optionally emits a portable `design.md` for handoff to other AI tools. |
 
 ---
 
 ## Different briefs, different shapes
 
-Each generated by exercising the skill on a different brief. The skill picks differently every time — no two share a macrostructure or theme.
+Each generated by exercising the skill on a different brief. The skill picks differently every time. No two share a macrostructure or theme.
 
 <table>
   <tr>
-    <td width="25%"><a href="https://www.usehallmark.com/examples/tally/"><img src="docs/screenshots/hero-tally.jpg" alt="Tally — SaaS product page hero" /></a></td>
+    <td width="25%"><a href="https://www.usehallmark.com/examples/tally/"><img src="docs/screenshots/hero-tally.jpg" alt="Tally SaaS product page hero" /></a></td>
     <td width="25%"><a href="https://www.usehallmark.com/examples/wayfare/"><img src="docs/screenshots/hero-wayfare.jpg" alt="Wayfare travel booking hero" /></a></td>
     <td width="25%"><a href="https://www.usehallmark.com/_tests/09-slow-pour/"><img src="docs/screenshots/hero-slow-pour.jpg" alt="Slow Pour coffee subscription hero" /></a></td>
     <td width="25%"><a href="https://www.usehallmark.com/examples/bananastudio/"><img src="docs/screenshots/hero-bananastudio.jpg" alt="BananaStudio creative studio hero" /></a></td>
@@ -62,26 +62,17 @@ Each page is self-contained HTML + CSS, stamped with its macrostructure in the C
 
 ## Custom <sup>NEW</sup>
 
-Most briefs route to the catalog. But when a brief carries real creative intent — a named brand colour, a vibe the catalog can't carry, or a layout that *is* the point — Hallmark switches to **Custom** and designs the whole page from first principles: a made-to-measure OKLCH palette, a free-font pairing, and a structure no catalog theme would produce. Same fifty-seven slop-test gates. No template underneath.
+Most briefs route to the catalog. But when a brief carries real creative intent (a named brand colour, a vibe the catalog can't carry, or a layout that *is* the point) Hallmark switches to **Custom** and designs the whole page from first principles: a made-to-measure OKLCH palette, a free-font pairing, and a structure no catalog theme would produce. Same fifty-seven slop-test gates. No template underneath.
 
-Four one-line briefs, four pages that share nothing:
+One brief, one page that looks like nothing else in the catalog:
 
-<table>
-  <tr>
-    <td width="25%"><a href="https://www.usehallmark.com/examples/custom-01/"><img src="site/_tests/_thumbs/custom-01.jpg" alt="Setting the Night Edition — a letterpress poem broadside" /></a></td>
-    <td width="25%"><a href="https://www.usehallmark.com/examples/custom-02/"><img src="site/_tests/_thumbs/custom-02.jpg" alt="The Cascadia Nightjar — a sleeper-train ticket" /></a></td>
-    <td width="25%"><a href="https://www.usehallmark.com/examples/custom-03/"><img src="site/_tests/_thumbs/custom-03.jpg" alt="Ferns &amp; Fathom — a tea menu as a periodic table" /></a></td>
-    <td width="25%"><a href="https://www.usehallmark.com/examples/custom-04/"><img src="site/_tests/_thumbs/custom-04.jpg" alt="The Mend Assembly — a repair-café manifesto poster" /></a></td>
-  </tr>
-  <tr>
-    <td><b>Setting the Night Edition</b><br/><sub>Letterpress poem broadside</sub></td>
-    <td><b>The Cascadia Nightjar</b><br/><sub>Sleeper-train ticket</sub></td>
-    <td><b>Ferns &amp; Fathom</b><br/><sub>Tea menu as a periodic table</sub></td>
-    <td><b>The Mend Assembly</b><br/><sub>Repair-café manifesto poster</sub></td>
-  </tr>
-</table>
+<p align="center">
+  <a href="https://www.usehallmark.com/examples/custom-04/"><img src="site/_tests/_thumbs/custom-04.jpg" width="560" alt="The Mend Assembly, a repair-café manifesto poster designed from scratch with Custom" /></a>
+</p>
 
-Custom stays a quiet branch — vanilla briefs never see it. The protocol lives in [`custom-theme.md`](skills/hallmark/references/custom-theme.md).
+<p align="center"><sub><b>The Mend Assembly</b> &nbsp;·&nbsp; a repair-café manifesto poster, designed from first principles</sub></p>
+
+Custom stays a quiet branch. Vanilla briefs never see it. The protocol lives in [`custom-theme.md`](skills/hallmark/references/custom-theme.md).
 
 ---
 
@@ -93,9 +84,9 @@ npx skills add nutlope/hallmark
 
 Re-run any time to update. Or copy [`SKILL.md`](skills/hallmark/SKILL.md) + [`references/`](skills/hallmark/references/) into:
 
-- **Claude Code** — `~/.claude/skills/hallmark/`
-- **Cursor** — `.cursor/rules/hallmark.mdc` (body of `SKILL.md`, no frontmatter)
-- **Codex** — `~/.codex/skills/hallmark/` (personal) or `.codex/skills/hallmark/` (project-scoped)
+- **Claude Code**: `~/.claude/skills/hallmark/`
+- **Cursor**: `.cursor/rules/hallmark.mdc` (body of `SKILL.md`, no frontmatter)
+- **Codex**: `~/.codex/skills/hallmark/` (personal) or `.codex/skills/hallmark/` (project-scoped)
 
 The rule-set lives in [`SKILL.md`](skills/hallmark/SKILL.md) and [`references/`](skills/hallmark/references/). Worked examples in [`docs/recipes.md`](docs/recipes.md) and [`docs/study-examples.md`](docs/study-examples.md).
 
diff --git a/site/_tests/_thumbs/carnival-01.jpg b/site/_tests/_thumbs/carnival-01.jpg
index 48400bd..4cd40ad 100644
Binary files a/site/_tests/_thumbs/carnival-01.jpg and b/site/_tests/_thumbs/carnival-01.jpg differ
diff --git a/site/_tests/_thumbs/cobalt-01.jpg b/site/_tests/_thumbs/cobalt-01.jpg
index fa71e13..a6d7543 100644
Binary files a/site/_tests/_thumbs/cobalt-01.jpg and b/site/_tests/_thumbs/cobalt-01.jpg differ
diff --git a/site/_tests/_thumbs/custom-04.jpg b/site/_tests/_thumbs/custom-04.jpg
index 45e0184..2b4b8f4 100644
Binary files a/site/_tests/_thumbs/custom-04.jpg and b/site/_tests/_thumbs/custom-04.jpg differ
diff --git a/site/_tests/_thumbs/hum-07.jpg b/site/_tests/_thumbs/hum-07.jpg
index ac16dad..b7ae648 100644
Binary files a/site/_tests/_thumbs/hum-07.jpg and b/site/_tests/_thumbs/hum-07.jpg differ
diff --git a/site/_tests/_thumbs/lumen-01.jpg b/site/_tests/_thumbs/lumen-01.jpg
index 777e124..a7ddac2 100644
Binary files a/site/_tests/_thumbs/lumen-01.jpg and b/site/_tests/_thumbs/lumen-01.jpg differ
diff --git a/site/css/components.css b/site/css/components.css
index d4d5949..b89099c 100644
--- a/site/css/components.css
+++ b/site/css/components.css
@@ -3796,6 +3796,20 @@ html[data-theme="aurora"] body {
   .ex-card__thumb video { transition: none; }
 }
 
+/* Hover scroll for the image cards (the four new themes + the bespoke build).
+   The thumb is a tall full-page screenshot; on hover we pan object-position
+   top → bottom so the page "scrolls" itself. Pure CSS, GPU-light, no video
+   decode. Touch devices and reduced-motion get a static top crop. Only the
+   <img> cards scroll; the original <video> cards keep their hover-play. */
+@media (hover: hover) and (prefers-reduced-motion: no-preference) {
+  .ex-card__thumb img { transition: object-position 600ms ease; }
+  .ex-card:hover .ex-card__thumb img,
+  .ex-card:focus-visible .ex-card__thumb img {
+    object-position: left bottom;
+    transition: object-position 5s ease-in-out;
+  }
+}
+
 /* New card meta — single-line prompt only, mono. The card is the prompt
    that produced the output above it. */
 .ex-card__prompt {
diff --git a/site/index.html b/site/index.html
index b8a3ed3..2acaa55 100644
--- a/site/index.html
+++ b/site/index.html
@@ -56,10 +56,10 @@
   <link rel="stylesheet"
     href="https://fonts.googleapis.com/css2?family=Albert+Sans:wght@400;500;600;700;800&family=Anton&family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,900;1,9..144,400;1,9..144,500&family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&family=Hanken+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=Inter+Tight:ital,wght@0,500;0,600;0,700;0,800;1,500;1,600;1,700&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400;1,6..72,500&family=Playfair+Display:ital,wght@1,400;1,500;1,600&family=Public+Sans:wght@400;500;600;700&family=Young+Serif&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" />
 
-  <link rel="stylesheet" href="css/tokens.css?v=19" />
-  <link rel="stylesheet" href="css/base.css?v=19" />
-  <link rel="stylesheet" href="css/components.css?v=19" />
-  <link rel="stylesheet" href="css/sections.css?v=19" />
+  <link rel="stylesheet" href="css/tokens.css?v=20" />
+  <link rel="stylesheet" href="css/base.css?v=20" />
+  <link rel="stylesheet" href="css/components.css?v=20" />
+  <link rel="stylesheet" href="css/sections.css?v=20" />
 
   <script>
     // Load theme before paint to avoid flash. Order: ?theme= → localStorage → default.
@@ -242,28 +242,28 @@
              <video data-hover-play src="_tests/_thumbs/<slug>-scroll.mp4" poster="..."> once rendered. -->
         <a class="ex-card" role="listitem" href="examples/cobalt-01/" target="_blank" rel="noopener" aria-label="Open the Distil example — content-extraction API, Cobalt — in a new tab">
           <div class="ex-card__thumb" aria-hidden="true">
-            <img src="_tests/_thumbs/cobalt-01.jpg" alt="" loading="lazy" width="1600" height="1000" />
+            <img src="_tests/_thumbs/cobalt-01.jpg?v=20" alt="" loading="lazy" width="1600" height="1000" />
           </div>
           <p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a content-extraction API, Cobalt</p>
         </a>
 
         <a class="ex-card" role="listitem" href="examples/carnival-01/" target="_blank" rel="noopener" aria-label="Open the Cold Snap example — record-label EP page, Carnival — in a new tab">
           <div class="ex-card__thumb" aria-hidden="true">
-            <img src="_tests/_thumbs/carnival-01.jpg" alt="" loading="lazy" width="1600" height="1000" />
+            <img src="_tests/_thumbs/carnival-01.jpg?v=20" alt="" loading="lazy" width="1600" height="1000" />
           </div>
           <p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a record-label EP page, Carnival</p>
         </a>
 
         <a class="ex-card" role="listitem" href="examples/lumen-01/" target="_blank" rel="noopener" aria-label="Open the Cinder example — AI reasoning tool, Lumen — in a new tab">
           <div class="ex-card__thumb" aria-hidden="true">
-            <img src="_tests/_thumbs/lumen-01.jpg" alt="" loading="lazy" width="1600" height="1000" />
+            <img src="_tests/_thumbs/lumen-01.jpg?v=20" alt="" loading="lazy" width="1600" height="1000" />
           </div>
           <p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build an AI reasoning tool, Lumen</p>
         </a>
 
         <a class="ex-card" role="listitem" href="examples/hum-07/" target="_blank" rel="noopener" aria-label="Open the Bubble example, a guided sourdough app, Hum, in a new tab">
           <div class="ex-card__thumb" aria-hidden="true">
-            <img src="_tests/_thumbs/hum-07.jpg" alt="" loading="lazy" width="1600" height="1000" />
+            <img src="_tests/_thumbs/hum-07.jpg?v=20" alt="" loading="lazy" width="1600" height="1000" />
           </div>
           <p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a guided sourdough app, Hum</p>
         </a>
@@ -273,7 +273,7 @@
              once rendered, swap the <img> for <video data-hover-play src="..." poster="...">. -->
         <a class="ex-card" role="listitem" href="examples/custom-04/" target="_blank" rel="noopener" aria-label="Open the Mend Assembly example, a repair-café manifesto poster, custom, in a new tab">
           <div class="ex-card__thumb" aria-hidden="true">
-            <img src="_tests/_thumbs/custom-04.jpg" alt="" loading="lazy" width="1600" height="1000" />
+            <img src="_tests/_thumbs/custom-04.jpg?v=20" alt="" loading="lazy" width="1600" height="1000" />
           </div>
           <p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a repair-café manifesto poster, custom</p>
         </a>
@@ -1120,7 +1120,7 @@
     </div>
   </template>
 
-  <script type="module" src="js/main.js?v=19"></script>
+  <script type="module" src="js/main.js?v=20"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/skills/hallmark/references/components/h7-demo-video-clipped-by-viewport-edge.md b/skills/hallmark/references/components/h7-demo-video-clipped-by-viewport-edge.md
index 5cc9ad6..82fecbf 100644
--- a/skills/hallmark/references/components/h7-demo-video-clipped-by-viewport-edge.md
+++ b/skills/hallmark/references/components/h7-demo-video-clipped-by-viewport-edge.md
@@ -3,7 +3,7 @@ Display headline left, demo video right, the rightmost ~10–20 % extending past
 *Use when:* the brief is SaaS / dev-tool / dashboard / platform AND you have real footage of the product (or a hand-built CSS-art mockup of it).
 *Don't confuse with:* H4 Stat-Led (number-led, no video) or H8 Mockup Split (still screenshot, not video).
 
-See [`hero-enrichment.md`](hero-enrichment.md) for the full E1 recipe (codec chain, autoplay rules, `prefers-reduced-motion` fallback, mobile collapse). The cookbook entry below is the structural sketch.
+See [`hero-enrichment.md`](../hero-enrichment.md) for the full E1 recipe (codec chain, autoplay rules, `prefers-reduced-motion` fallback, mobile collapse). The cookbook entry below is the structural sketch.
 
 ```html
 <section class="hero hero--clipped">
diff --git a/skills/hallmark/references/components/h9-custom-illustration-centerpiece.md b/skills/hallmark/references/components/h9-custom-illustration-centerpiece.md
index 8a1dfdb..7b65eac 100644
--- a/skills/hallmark/references/components/h9-custom-illustration-centerpiece.md
+++ b/skills/hallmark/references/components/h9-custom-illustration-centerpiece.md
@@ -3,7 +3,7 @@ A single hand-built SVG (Tier B in the enrichment hierarchy — or pure CSS at T
 *Use when:* the brand has a *thing* that benefits from being drawn — a craft, a character, a process.
 *Don't confuse with:* H6 Photographic (real photography) or H8 Mockup (a product screenshot, not artwork).
 
-The illustration itself is *built*, not picked from Storyset / Humaaans / unDraw / Lottie. See [`custom-craft.md`](custom-craft.md) for full recipes (CSS art, hand-built SVG, declarative animation). The cookbook entry below is the page-level structural sketch.
+The illustration itself is *built*, not picked from Storyset / Humaaans / unDraw / Lottie. See [`custom-craft.md`](../custom-craft.md) for full recipes (CSS art, hand-built SVG, declarative animation). The cookbook entry below is the page-level structural sketch.
 
 ```html
 <section class="hero-art">
diff --git a/skills/hallmark/references/components/n10-floating-on-scroll-morph.md b/skills/hallmark/references/components/n10-floating-on-scroll-morph.md
index b0116b4..6297780 100644
--- a/skills/hallmark/references/components/n10-floating-on-scroll-morph.md
+++ b/skills/hallmark/references/components/n10-floating-on-scroll-morph.md
@@ -12,7 +12,7 @@ A sticky bar at the top that **morphs into a floating pill** as the user scrolls
 </header>
 ```
 
-The full recipe — the four laws (height-constant, transform-for-offset, cross-fade-everything, single-curve), the property-morph table, the scroll-handler script, and the eight anti-patterns Hallmark refuses — lives in [`floating-nav.md`](floating-nav.md). Reach for that file *before* building this archetype. Skipping the four laws is what makes 90% of attempts read as broken.
+The full recipe — the four laws (height-constant, transform-for-offset, cross-fade-everything, single-curve), the property-morph table, the scroll-handler script, and the eight anti-patterns Hallmark refuses — lives in [`floating-nav.md`](../floating-nav.md). Reach for that file *before* building this archetype. Skipping the four laws is what makes 90% of attempts read as broken.
 
 *Anti-pattern (one of eight in floating-nav.md):* swapping two `<header>` elements via opacity instead of cross-fading one DOM. Doubles markup, fights focus order, desyncs content.