From ae2f83e55d2b7136bf445f055a4c4f214eb1c06a Mon Sep 17 00:00:00 2001
From: Youssef <speedyoussef@gmail.com>
Date: Wed, 3 Jun 2026 16:19:09 +0100
Subject: [PATCH] Lead with Hum, fix theme-picker number contrast, reorder
 worked examples

Theme picker: Hum is now theme 01, with the rest renumbered 02-20. The ordinal
reads off the registry index, so switching, cycling, and the "NN / 20" readout
all stay correct.

Theme numbers: each picker swatch now carries an explicit number colour that
contrasts with its own background, instead of inheriting the active theme's ink.
Dark swatches (Midnight, Terminal, Manifesto, Aurora, Lumen) get a light number
rather than a near-invisible dark one. All twenty clear AA (min 10:1).

Worked Examples: moved the first three carousel cards (Cobalt, Carnival, Lumen)
to the end so the page leads with Hum.

Bumped the asset cache-bust.
---
 site/css/components.css |   2 +-
 site/index.html         | 159 ++++++++++++++++++++--------------------
 site/js/main.js         |   2 +-
 3 files changed, 80 insertions(+), 83 deletions(-)

diff --git a/site/css/components.css b/site/css/components.css
index 83d701f..79d5f8a 100644
--- a/site/css/components.css
+++ b/site/css/components.css
@@ -525,7 +525,7 @@
   font-size: 11px;
   font-weight: 500;
   letter-spacing: 0.02em;
-  color: color-mix(in oklch, var(--dot-edge, var(--color-ink)) 55%, var(--color-ink));
+  color: var(--num, color-mix(in oklch, var(--dot-edge, var(--color-ink)) 55%, var(--color-ink)));
   font-feature-settings: "tnum";
   pointer-events: none;
 }
diff --git a/site/index.html b/site/index.html
index 6e7351c..86016c5 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=23" />
-  <link rel="stylesheet" href="css/base.css?v=23" />
-  <link rel="stylesheet" href="css/components.css?v=23" />
-  <link rel="stylesheet" href="css/sections.css?v=23" />
+  <link rel="stylesheet" href="css/tokens.css?v=24" />
+  <link rel="stylesheet" href="css/base.css?v=24" />
+  <link rel="stylesheet" href="css/components.css?v=24" />
+  <link rel="stylesheet" href="css/sections.css?v=24" />
 
   <script>
     // Load theme before paint to avoid flash. Order: ?theme= → localStorage → default.
@@ -123,7 +123,7 @@
     <div class="banner__theme-wrap" data-theme-wrap>
       <button class="banner__theme-indicator" type="button" aria-haspopup="listbox" aria-expanded="false"
         aria-controls="theme-dropdown" data-theme-trigger>
-        <span class="banner__ordinal tnum" data-theme-ordinal>20 / 20</span>
+        <span class="banner__ordinal tnum" data-theme-ordinal>01 / 20</span>
         <span class="banner__indicator-sep" aria-hidden="true">—</span>
         <span class="banner__theme" data-theme-current>Hum</span>
         <svg class="banner__caret" viewBox="0 0 12 12" width="10" height="10" aria-hidden="true">
@@ -133,65 +133,65 @@
       </button>
 
       <div class="theme-dropdown" id="theme-dropdown" role="listbox" aria-label="Theme picker" hidden>
-        <button class="theme-dropdown__dot" type="button" data-theme-btn="specimen" aria-label="01 — Specimen"
-          style="--dot: oklch(96% 0.018 80); --dot-edge: oklch(70% 0.04 75);"><span
+        <button class="theme-dropdown__dot" type="button" data-theme-btn="hum" aria-label="01 · Hum"
+          style="--dot: oklch(97% 0.012 95); --dot-edge: oklch(68% 0.24 18); --num: oklch(30% 0.05 18);"><span
             class="theme-dropdown__num">01</span></button>
-        <button class="theme-dropdown__dot" type="button" data-theme-btn="midnight" aria-label="02 — Midnight"
-          style="--dot: oklch(15% 0.022 250); --dot-edge: oklch(72% 0.16 220);"><span
+        <button class="theme-dropdown__dot" type="button" data-theme-btn="specimen" aria-label="02 · Specimen"
+          style="--dot: oklch(96% 0.018 80); --dot-edge: oklch(70% 0.04 75); --num: oklch(30% 0.05 75);"><span
             class="theme-dropdown__num">02</span></button>
-        <button class="theme-dropdown__dot" type="button" data-theme-btn="brutal" aria-label="03 — Brutal"
-          style="--dot: oklch(98% 0.001 0); --dot-edge: oklch(60% 0.21 27);"><span
+        <button class="theme-dropdown__dot" type="button" data-theme-btn="midnight" aria-label="03 · Midnight"
+          style="--dot: oklch(15% 0.022 250); --dot-edge: oklch(72% 0.16 220); --num: oklch(90% 0.04 220);"><span
             class="theme-dropdown__num">03</span></button>
-        <button class="theme-dropdown__dot" type="button" data-theme-btn="garden" aria-label="04 — Garden"
-          style="--dot: oklch(95.5% 0.022 92); --dot-edge: oklch(47% 0.13 140);"><span
+        <button class="theme-dropdown__dot" type="button" data-theme-btn="brutal" aria-label="04 · Brutal"
+          style="--dot: oklch(98% 0.001 0); --dot-edge: oklch(60% 0.21 27); --num: oklch(30% 0.05 27);"><span
             class="theme-dropdown__num">04</span></button>
-        <button class="theme-dropdown__dot" type="button" data-theme-btn="atelier" aria-label="05 — Atelier"
-          style="--dot: oklch(94% 0.005 60); --dot-edge: oklch(45% 0.13 60);"><span
+        <button class="theme-dropdown__dot" type="button" data-theme-btn="garden" aria-label="05 · Garden"
+          style="--dot: oklch(95.5% 0.022 92); --dot-edge: oklch(47% 0.13 140); --num: oklch(30% 0.05 140);"><span
             class="theme-dropdown__num">05</span></button>
-        <button class="theme-dropdown__dot" type="button" data-theme-btn="newsprint" aria-label="06 — Newsprint"
-          style="--dot: oklch(92% 0.045 50); --dot-edge: oklch(32% 0.10 28);"><span
+        <button class="theme-dropdown__dot" type="button" data-theme-btn="atelier" aria-label="06 · Atelier"
+          style="--dot: oklch(94% 0.005 60); --dot-edge: oklch(45% 0.13 60); --num: oklch(30% 0.05 60);"><span
             class="theme-dropdown__num">06</span></button>
-        <button class="theme-dropdown__dot" type="button" data-theme-btn="terminal" aria-label="07 — Terminal"
-          style="--dot: oklch(11% 0.018 145); --dot-edge: oklch(78% 0.19 138);"><span
+        <button class="theme-dropdown__dot" type="button" data-theme-btn="newsprint" aria-label="07 · Newsprint"
+          style="--dot: oklch(92% 0.045 50); --dot-edge: oklch(32% 0.10 28); --num: oklch(30% 0.05 28);"><span
             class="theme-dropdown__num">07</span></button>
-        <button class="theme-dropdown__dot" type="button" data-theme-btn="manifesto" aria-label="08 — Manifesto"
-          style="--dot: oklch(10% 0.005 60); --dot-edge: oklch(60% 0.22 27);"><span
+        <button class="theme-dropdown__dot" type="button" data-theme-btn="terminal" aria-label="08 · Terminal"
+          style="--dot: oklch(11% 0.018 145); --dot-edge: oklch(78% 0.19 138); --num: oklch(90% 0.05 138);"><span
             class="theme-dropdown__num">08</span></button>
-        <button class="theme-dropdown__dot" type="button" data-theme-btn="almanac" aria-label="09 — Almanac"
-          style="--dot: oklch(94% 0.008 245); --dot-edge: oklch(38% 0.135 250);"><span
+        <button class="theme-dropdown__dot" type="button" data-theme-btn="manifesto" aria-label="09 · Manifesto"
+          style="--dot: oklch(10% 0.005 60); --dot-edge: oklch(60% 0.22 27); --num: oklch(90% 0.04 27);"><span
             class="theme-dropdown__num">09</span></button>
-        <button class="theme-dropdown__dot" type="button" data-theme-btn="sport" aria-label="10 — Sport"
-          style="--dot: oklch(98% 0.003 250); --dot-edge: oklch(58% 0.190 35);"><span
+        <button class="theme-dropdown__dot" type="button" data-theme-btn="almanac" aria-label="10 · Almanac"
+          style="--dot: oklch(94% 0.008 245); --dot-edge: oklch(38% 0.135 250); --num: oklch(30% 0.05 250);"><span
             class="theme-dropdown__num">10</span></button>
-        <button class="theme-dropdown__dot" type="button" data-theme-btn="studio" aria-label="11 — Studio"
-          style="--dot: oklch(96.5% 0.014 95); --dot-edge: oklch(46% 0.140 145);"><span
+        <button class="theme-dropdown__dot" type="button" data-theme-btn="sport" aria-label="11 · Sport"
+          style="--dot: oklch(98% 0.003 250); --dot-edge: oklch(58% 0.190 35); --num: oklch(30% 0.05 35);"><span
             class="theme-dropdown__num">11</span></button>
-        <button class="theme-dropdown__dot" type="button" data-theme-btn="riso" aria-label="12 — Riso"
-          style="--dot: oklch(91% 0.034 30); --dot-edge: oklch(58% 0.170 220);"><span
+        <button class="theme-dropdown__dot" type="button" data-theme-btn="studio" aria-label="12 · Studio"
+          style="--dot: oklch(96.5% 0.014 95); --dot-edge: oklch(46% 0.140 145); --num: oklch(30% 0.05 145);"><span
             class="theme-dropdown__num">12</span></button>
-        <button class="theme-dropdown__dot" type="button" data-theme-btn="bloom" aria-label="13 — Bloom"
-          style="--dot: oklch(97% 0.010 72); --dot-edge: oklch(56% 0.13 35);"><span
+        <button class="theme-dropdown__dot" type="button" data-theme-btn="riso" aria-label="13 · Riso"
+          style="--dot: oklch(91% 0.034 30); --dot-edge: oklch(58% 0.170 220); --num: oklch(30% 0.05 220);"><span
             class="theme-dropdown__num">13</span></button>
-        <button class="theme-dropdown__dot" type="button" data-theme-btn="coral" aria-label="14 — Coral"
-          style="--dot: oklch(96.5% 0.005 50); --dot-edge: oklch(64% 0.165 28);"><span
+        <button class="theme-dropdown__dot" type="button" data-theme-btn="bloom" aria-label="14 · Bloom"
+          style="--dot: oklch(97% 0.010 72); --dot-edge: oklch(56% 0.13 35); --num: oklch(30% 0.05 35);"><span
             class="theme-dropdown__num">14</span></button>
-        <button class="theme-dropdown__dot" type="button" data-theme-btn="aurora" aria-label="15 — Aurora"
-          style="--dot: oklch(11% 0.025 200); --dot-edge: oklch(72% 0.170 200);"><span
+        <button class="theme-dropdown__dot" type="button" data-theme-btn="coral" aria-label="15 · Coral"
+          style="--dot: oklch(96.5% 0.005 50); --dot-edge: oklch(64% 0.165 28); --num: oklch(30% 0.05 28);"><span
             class="theme-dropdown__num">15</span></button>
-        <button class="theme-dropdown__dot" type="button" data-theme-btn="editorial" aria-label="16 — Editorial"
-          style="--dot: oklch(94% 0.020 75); --dot-edge: oklch(60% 0.160 35);"><span
+        <button class="theme-dropdown__dot" type="button" data-theme-btn="aurora" aria-label="16 · Aurora"
+          style="--dot: oklch(11% 0.025 200); --dot-edge: oklch(72% 0.170 200); --num: oklch(90% 0.05 200);"><span
             class="theme-dropdown__num">16</span></button>
-        <button class="theme-dropdown__dot" type="button" data-theme-btn="carnival" aria-label="17 — Carnival"
-          style="--dot: oklch(92% 0.075 85); --dot-edge: oklch(40% 0.13 25);"><span
+        <button class="theme-dropdown__dot" type="button" data-theme-btn="editorial" aria-label="17 · Editorial"
+          style="--dot: oklch(94% 0.020 75); --dot-edge: oklch(60% 0.160 35); --num: oklch(30% 0.05 35);"><span
             class="theme-dropdown__num">17</span></button>
-        <button class="theme-dropdown__dot" type="button" data-theme-btn="lumen" aria-label="18 — Lumen"
-          style="--dot: oklch(15% 0.016 265); --dot-edge: oklch(76% 0.13 60);"><span
+        <button class="theme-dropdown__dot" type="button" data-theme-btn="carnival" aria-label="18 · Carnival"
+          style="--dot: oklch(92% 0.075 85); --dot-edge: oklch(40% 0.13 25); --num: oklch(30% 0.05 25);"><span
             class="theme-dropdown__num">18</span></button>
-        <button class="theme-dropdown__dot" type="button" data-theme-btn="hum" aria-label="19 — Hum"
-          style="--dot: oklch(97% 0.012 95); --dot-edge: oklch(68% 0.24 18);"><span
+        <button class="theme-dropdown__dot" type="button" data-theme-btn="lumen" aria-label="19 · Lumen"
+          style="--dot: oklch(15% 0.016 265); --dot-edge: oklch(76% 0.13 60); --num: oklch(90% 0.05 60);"><span
             class="theme-dropdown__num">19</span></button>
-        <button class="theme-dropdown__dot" type="button" data-theme-btn="cobalt" aria-label="20 — Cobalt"
-          style="--dot: oklch(98.5% 0.004 250); --dot-edge: oklch(58% 0.20 256);"><span
+        <button class="theme-dropdown__dot" type="button" data-theme-btn="cobalt" aria-label="20 · Cobalt"
+          style="--dot: oklch(98.5% 0.004 250); --dot-edge: oklch(58% 0.20 256); --num: oklch(30% 0.05 256);"><span
             class="theme-dropdown__num">20</span></button>
       </div>
     </div>
@@ -237,33 +237,9 @@
 
       <div class="examples-rail" role="list" aria-label="Example landing pages">
 
-        <!-- New-theme showcase. Scroll previews via Remotion from the live pages
-             (see examples/scroll-demos.json); swap each <img> for
-             <video data-hover-play src="_tests/_thumbs/<slug>-scroll.mp4" poster="..."> once rendered. -->
-        <a class="ex-card" style="--scroll-dur:2.5s" 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?v=23" 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" style="--scroll-dur:2.7s" 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?v=23" 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" style="--scroll-dur:3.1s" 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?v=23" 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" style="--scroll-dur:3.3s" 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?v=23" alt="" loading="lazy" width="1600" height="1000" />
+            <img src="_tests/_thumbs/hum-07.jpg?v=24" 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,74 +249,95 @@
              once rendered, swap the <img> for <video data-hover-play src="..." poster="...">. -->
         <a class="ex-card" style="--scroll-dur:4s" 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?v=23" alt="" loading="lazy" width="1600" height="1000" />
+            <img src="_tests/_thumbs/custom-04.jpg?v=24" 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>
 
         <a class="ex-card" style="--scroll-dur:3.6s" role="listitem" href="examples/garden-01/" target="_blank" rel="noopener" aria-label="Open the Hollowback Apiary example, a small-batch honey farm, Garden, in a new tab">
           <div class="ex-card__thumb" aria-hidden="true">
-            <img src="_tests/_thumbs/garden-01.jpg?v=23" alt="" loading="lazy" width="1600" height="1000" />
+            <img src="_tests/_thumbs/garden-01.jpg?v=24" alt="" loading="lazy" width="1600" height="1000" />
           </div>
           <p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a landing page for a small-batch honey farm</p>
         </a>
 
         <a class="ex-card" style="--scroll-dur:4.6s" role="listitem" href="examples/riso-01/" target="_blank" rel="noopener" aria-label="Open the Off-Register example, an indie risograph print fair, Riso, in a new tab">
           <div class="ex-card__thumb" aria-hidden="true">
-            <img src="_tests/_thumbs/riso-01.jpg?v=23" alt="" loading="lazy" width="1600" height="1000" />
+            <img src="_tests/_thumbs/riso-01.jpg?v=24" alt="" loading="lazy" width="1600" height="1000" />
           </div>
           <p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a page for an indie risograph print fair</p>
         </a>
 
         <a class="ex-card" style="--scroll-dur:4.7s" role="listitem" href="examples/press-01/" target="_blank" rel="noopener" aria-label="Open the Press Quaternary example, an experimental type studio, in a new tab">
           <div class="ex-card__thumb" aria-hidden="true">
-            <img src="_tests/_thumbs/press-01.jpg?v=23" alt="" loading="lazy" width="1600" height="1000" />
+            <img src="_tests/_thumbs/press-01.jpg?v=24" alt="" loading="lazy" width="1600" height="1000" />
           </div>
           <p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a portfolio for an experimental typographer</p>
         </a>
 
         <a class="ex-card" style="--scroll-dur:3.6s" role="listitem" href="examples/tally/" target="_blank" rel="noopener" aria-label="Open the Tally example, a SaaS product page, modern-minimal, in a new tab">
           <div class="ex-card__thumb" aria-hidden="true">
-            <img src="_tests/_thumbs/tally.jpg?v=23" alt="" loading="lazy" width="1600" height="1000" />
+            <img src="_tests/_thumbs/tally.jpg?v=24" alt="" loading="lazy" width="1600" height="1000" />
           </div>
           <p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a SaaS product page, modern-minimal</p>
         </a>
 
         <a class="ex-card" style="--scroll-dur:3s" role="listitem" href="examples/wayfare/" target="_blank" rel="noopener" aria-label="Open the Wayfare example, a travel booking site, atmospheric, in a new tab">
           <div class="ex-card__thumb" aria-hidden="true">
-            <img src="_tests/_thumbs/wayfare.jpg?v=23" alt="" loading="lazy" width="1600" height="1000" />
+            <img src="_tests/_thumbs/wayfare.jpg?v=24" alt="" loading="lazy" width="1600" height="1000" />
           </div>
           <p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a travel booking site, atmospheric</p>
         </a>
 
         <a class="ex-card" style="--scroll-dur:3.2s" role="listitem" href="examples/bananastudio/" target="_blank" rel="noopener" aria-label="Open the BananaStudio example, a creative studio with playful motion, in a new tab">
           <div class="ex-card__thumb" aria-hidden="true">
-            <img src="_tests/_thumbs/bananastudio.jpg?v=23" alt="" loading="lazy" width="1600" height="1000" />
+            <img src="_tests/_thumbs/bananastudio.jpg?v=24" alt="" loading="lazy" width="1600" height="1000" />
           </div>
           <p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a creative studio with playful motion</p>
         </a>
 
         <a class="ex-card" style="--scroll-dur:1.8s" role="listitem" href="_tests/06-anya-portfolio/" target="_blank" rel="noopener" aria-label="Open the Anya Reis example, a software architect personal site, in a new tab">
           <div class="ex-card__thumb" aria-hidden="true">
-            <img src="_tests/_thumbs/anya.jpg?v=23" alt="" loading="lazy" width="1600" height="1000" />
+            <img src="_tests/_thumbs/anya.jpg?v=24" alt="" loading="lazy" width="1600" height="1000" />
           </div>
           <p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a software architect personal site</p>
         </a>
 
         <a class="ex-card" style="--scroll-dur:2s" role="listitem" href="examples/najm/" target="_blank" rel="noopener" aria-label="Open the NAJM example, a Moroccan fashion brand landing page, in a new tab">
           <div class="ex-card__thumb" aria-hidden="true">
-            <img src="_tests/_thumbs/najm.jpg?v=23" alt="" loading="lazy" width="1600" height="1000" />
+            <img src="_tests/_thumbs/najm.jpg?v=24" alt="" loading="lazy" width="1600" height="1000" />
           </div>
           <p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a Moroccan fashion brand landing page</p>
         </a>
 
         <a class="ex-card" style="--scroll-dur:3.5s" role="listitem" href="examples/hyperlane/" target="_blank" rel="noopener" aria-label="Open the Hyperlane example, a developer infrastructure landing page, in a new tab">
           <div class="ex-card__thumb" aria-hidden="true">
-            <img src="_tests/_thumbs/hyperlane.jpg?v=23" alt="" loading="lazy" width="1600" height="1000" />
+            <img src="_tests/_thumbs/hyperlane.jpg?v=24" alt="" loading="lazy" width="1600" height="1000" />
           </div>
           <p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a developer infrastructure landing page</p>
         </a>
 
+        <a class="ex-card" style="--scroll-dur:2.5s" role="listitem" href="examples/cobalt-01/" target="_blank" rel="noopener" aria-label="Open the Distil example, a content-extraction API, Cobalt, in a new tab">
+          <div class="ex-card__thumb" aria-hidden="true">
+            <img src="_tests/_thumbs/cobalt-01.jpg?v=24" 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" style="--scroll-dur:2.7s" role="listitem" href="examples/carnival-01/" target="_blank" rel="noopener" aria-label="Open the Cold Snap example, a record-label EP page, Carnival, in a new tab">
+          <div class="ex-card__thumb" aria-hidden="true">
+            <img src="_tests/_thumbs/carnival-01.jpg?v=24" 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" style="--scroll-dur:3.1s" role="listitem" href="examples/lumen-01/" target="_blank" rel="noopener" aria-label="Open the Cinder example, an AI reasoning tool, Lumen, in a new tab">
+          <div class="ex-card__thumb" aria-hidden="true">
+            <img src="_tests/_thumbs/lumen-01.jpg?v=24" 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>
+
       </div>
 
     </section>
@@ -1127,7 +1124,7 @@
     </div>
   </template>
 
-  <script type="module" src="js/main.js?v=23"></script>
+  <script type="module" src="js/main.js?v=24"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/site/js/main.js b/site/js/main.js
index 4e33de3..ca7eeea 100644
--- a/site/js/main.js
+++ b/site/js/main.js
@@ -40,6 +40,7 @@ document.querySelectorAll(".reveal").forEach((el) => el.classList.add("is-in"));
 
 /* — Theme registry ————————————————————————————————————— */
 const THEMES = {
+  hum: "Hum",
   specimen: "Specimen",
   midnight: "Midnight",
   brutal: "Brutal",
@@ -58,7 +59,6 @@ const THEMES = {
   editorial: "Editorial",
   carnival: "Carnival",
   lumen: "Lumen",
-  hum: "Hum",
   cobalt: "Cobalt",
 };
 const STORAGE_KEY = "hallmark-theme";