Examples reorder · audit beautified · Before/After section · section labels stacked · display max tightened

· Examples-rail order: SaaS → wayfare → slow-pour → BananaStudio (moved
  from 1st to 4th) → tracejam → anya-loop video (was static) → Najm-loop
  (was Foundry static) → Soroe-loop (was Cohort static). Five videos +
  three statics now. Five MP4s re-encoded to web (CRF 23–27, +faststart,
  no audio).
· Audit demo: swapped the gradient slop placeholder for the new
  audit-example.png. Caption removed (no longer reads as "actual slop").
· Redesign uractivation video: dropped data-hover-play so it autoplays
  on every device (was hover-only on desktop).
· Footer: "Powered by" → "Made by" (re: the Together AI credit). Base
  credit line now left-aligned across all viewports.
· Section labels: forced single-column section heads in every theme via
  `.section__head, [data-theme] .section__head { grid-template-columns:
  1fr !important }`. Linen + Almanac left-gutter overrides removed —
  every section reads label-above-title now.
· Section pulls: deleted every `<a class="section__pull">` ("See the
  verbs", "Read the rules", etc.) plus 67 lines of associated CSS. The
  banner already provides Install + GitHub; no per-section nav needed.
· Per-theme demo captions ("Lap 1", "Plate I", "Frame 01", etc.)
  removed — they appeared in the wrong section ("Lap 1" showed under
  Study) and added clutter.
· Display max font sizes tightened across every theme token. Largest
  caps were 13rem (Manifesto Anton) → 9rem; multiple 7.5–8rem caps
  pulled down to 6.25–6.5rem. Skill-side typography.md now emits
  `clamp(2.75rem, 5vw + 1rem, 5.25rem)` as the default --text-display.
· New section: Before / After Hallmark, after Foundations.
  Same prompt ("/hallmark build a landing page for The Quiet Hour — a
  weekly natural-wine dispatch from Lisbon") run two ways:
   - Sonnet 4.6 alone → gradient AI slop (before-quiet-hour.png)
   - Sonnet 4.6 + Hallmark → editorial dispatch (after-quiet-hour.png)
  Hairline-framed panels with mono prompt at top, italic-serif captions.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

site/css/components.css

@@ -3274,7 +3274,7 @@ body:not(.easter-open) > footer {
   letter-spacing: var(--tracking-label);
   text-transform: uppercase;
   color: var(--color-muted);
-  text-align: center;
+  text-align: start;
   width: 100%;
 }
 
@@ -3283,7 +3283,6 @@ body:not(.easter-open) > footer {
   .foot--colophon { gap: var(--space-2xl); padding-block: var(--space-2xl) var(--space-xl); }
   .foot__masthead { flex-direction: column; align-items: flex-start; gap: var(--space-sm); padding-block-end: var(--space-lg); }
   .foot__grid { grid-template-columns: 1fr; gap: var(--space-2xl); }
-  .foot__base { text-align: start; }
 }
 
 /* ───────────── SLOT REVEALS ─────────────

site/css/sections.css

@@ -28,9 +28,13 @@
    that forced the section label ("ANTI-PATTERNS") to wrap on
    themes that needed wider title columns. Section titles can grow
    bigger now since they have full width. */
-.section__head {
+/* Single-column always — label sits ABOVE title across every theme.
+   No theme override should put the label in a left gutter (caused
+   uncomfortable wrapping + alignment drift between sections). */
+.section__head,
+[data-theme] .section__head {
   display: grid;
-  grid-template-columns: 1fr;
+  grid-template-columns: 1fr !important;
   gap: var(--space-sm);
   padding-bottom: var(--section-head-gap);
   border-bottom: var(--rule-hair) solid var(--color-rule-2);
@@ -874,26 +878,6 @@
   box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--color-paper) 25%, transparent);
 }
 
-/* Per-theme captions on editorial-register themes — small italic-mono
-   note above the demo, like a foundry plate label. */
-[data-theme="atelier"] .skill-row__demo--build::before,
-[data-theme="salon"] .skill-row__demo--build::before,
-[data-theme="almanac"] .skill-row__demo--build::before,
-[data-theme="studio"] .skill-row__demo--build::before,
-[data-theme="sport"] .skill-row__demo--build::before {
-  display: block;
-  margin: 0 0 var(--space-xs) 0;
-  font-family: var(--font-label);
-  font-size: var(--text-xs);
-  letter-spacing: var(--tracking-label);
-  text-transform: uppercase;
-  color: var(--color-muted);
-}
-[data-theme="atelier"] .skill-row__demo--build::before { content: "Plate I"; }
-[data-theme="salon"] .skill-row__demo--build::before { content: "Specimen — i"; font-style: italic; text-transform: none; letter-spacing: 0; font-family: var(--font-serif); }
-[data-theme="almanac"] .skill-row__demo--build::before { content: "Fig. 01 — 2026 ed."; }
-[data-theme="studio"] .skill-row__demo--build::before { content: "Frame 01"; }
-[data-theme="sport"] .skill-row__demo--build::before { content: "Lap 1"; }
 
 /* Row III — Audit demo: a CSS-only inline slop hero. Built deliberately
    to LOOK like every default AI hero — purple-pink gradient, centered,
@@ -1171,6 +1155,109 @@
   }
 }
 
+/* — Before / After Hallmark ————————————————————————————
+   Two screenshots side by side — the same prompt, run two ways. The
+   "before" panel is what Sonnet 4.6 alone produces; the "after" is
+   the same model with Hallmark loaded. The shared prompt sits above. */
+.ba__prompt {
+  margin: 0 0 var(--space-2xl);
+  padding: var(--space-md) var(--space-lg);
+  background: var(--color-paper-2);
+  border: var(--rule-hair) solid var(--color-rule);
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+  color: var(--color-ink-2);
+  line-height: 1.4;
+  font-feature-settings: "tnum";
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  border-radius: var(--radius-input, 0);
+  max-width: 100%;
+}
+.ba__prompt-mark {
+  color: var(--color-accent);
+  font-weight: 500;
+  margin-inline-end: 0.5em;
+}
+
+.ba {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: var(--space-xl);
+}
+
+@media (max-width: 56rem) {
+  .ba { grid-template-columns: 1fr; gap: var(--space-2xl); }
+}
+
+.ba__panel {
+  margin: 0;
+  display: grid;
+  gap: var(--space-md);
+}
+
+.ba__panel-label {
+  margin: 0;
+  font-family: var(--font-label);
+  font-size: var(--text-xs);
+  letter-spacing: var(--tracking-label);
+  text-transform: uppercase;
+  color: var(--color-muted);
+}
+
+.ba__panel-tag {
+  display: inline-block;
+  padding: 0.3rem 0.75rem;
+  border: var(--rule-hair) solid var(--color-rule-2);
+  border-radius: 999px;
+  background: var(--color-paper);
+  color: var(--color-ink-2);
+  letter-spacing: var(--tracking-label);
+}
+
+.ba__panel-tag--accent {
+  background: var(--color-ink);
+  color: var(--color-paper);
+  border-color: var(--color-ink);
+}
+
+.ba__frame {
+  display: block;
+  aspect-ratio: 16 / 10;
+  overflow: hidden;
+  border: var(--rule-hair) solid var(--color-rule);
+  background: var(--color-paper-2);
+  border-radius: var(--radius-card, 0);
+}
+
+.ba__frame img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: top left;
+  display: block;
+}
+
+.ba__panel-cap {
+  margin: 0;
+  font-family: var(--font-serif);
+  font-size: var(--text-md);
+  line-height: var(--lh-snug);
+  color: var(--color-ink-2);
+  max-width: 48ch;
+}
+
+[data-theme="brutal"] .ba__panel-cap,
+[data-theme="manifesto"] .ba__panel-cap,
+[data-theme="terminal"] .ba__panel-cap,
+[data-theme="sport"] .ba__panel-cap,
+[data-theme="almanac"] .ba__panel-cap,
+[data-theme="quiet"] .ba__panel-cap,
+[data-theme="bloom"] .ba__panel-cap {
+  font-family: var(--font-body);
+}
+
 /* — 07 · Footer ————————————————————————————————————— */
 /* The "Powered by" accent dot — used by the editorial colophon. */
 .foot__powered-mark {
@@ -1233,9 +1320,6 @@
 [data-theme="atelier"] .section + .section {
   padding-block-start: var(--space-3xl);
 }
-[data-theme="atelier"] .section__pull {
-  border-block-start: 0;
-}
 [data-theme="atelier"] .section__title {
   max-width: 22ch;
 }
@@ -1479,24 +1563,13 @@
 /* Section heads hang the label in a left gutter, title in the body column.
    Reads like a printed manuscript margin note + heading. */
 [data-theme="linen"] .section__head {
-  grid-template-columns: 12rem 1fr;
-  gap: var(--space-md);
-  align-items: baseline;
+  grid-template-columns: 1fr;
+  gap: var(--space-sm);
   border-bottom: 0;
   padding-bottom: 0;
 }
 [data-theme="linen"] .section__title { margin-bottom: var(--space-2xl); }
-[data-theme="linen"] .section-label {
-  margin-bottom: 0;
-  align-self: baseline;
-}
-@media (max-width: 56rem) {
-  [data-theme="linen"] .section__head {
-    grid-template-columns: 1fr;
-    gap: var(--space-sm);
-  }
-  [data-theme="linen"] .section-label { margin-bottom: var(--space-sm); }
-}
+[data-theme="linen"] .section-label { margin-bottom: var(--space-sm); }
 [data-theme="linen"] .foundations {
   grid-template-columns: 5fr 7fr;
   gap: var(--space-xl) var(--space-2xl);
@@ -1529,7 +1602,8 @@ html[data-theme="almanac"] body {
   background: var(--color-paper);
   padding-block: var(--space-sm);
   border-bottom: 1px solid var(--color-ink);
-  grid-template-columns: 8rem 1fr;
+  grid-template-columns: 1fr;
+  gap: var(--space-sm);
 }
 [data-theme="almanac"] .section__title { font-size: var(--text-xl); }
 /* Almanac calls itself indexed — push the §-number into every section label. */
@@ -1906,76 +1980,6 @@ html[data-theme="almanac"] body {
    Italic serif label + arrow, biased left or right per section
    for rhythm. Hover nudges the arrow forward. Pulls the eye into
    the next section instead of stopping cold. */
-.section__pull {
-  display: inline-flex;
-  align-items: baseline;
-  gap: 0.5em;
-  margin-block-start: var(--space-xl);
-  padding-block: var(--space-sm);
-  font-family: var(--font-serif);
-  font-size: var(--text-md);
-  line-height: 1.2;
-  color: var(--color-ink-2);
-  text-decoration: none;
-  border-block-start: var(--rule-hair) solid var(--color-rule);
-  width: fit-content;
-  transition: color var(--dur-micro) var(--ease-out);
-}
-
-.section__pull--right {
-  margin-inline-start: auto;
-  text-align: end;
-}
-
-/* Specimen — keep all section pulls flush to the left content edge so
-   they match the page's other CTAs ("Install", section labels, etc.). */
-[data-theme="specimen"] .section__pull--right {
-  margin-inline-start: 0;
-  text-align: start;
-}
-
-.section__pull-arrow {
-  font-style: normal;
-  font-weight: 400;
-  color: var(--color-rule-2);
-  font-feature-settings: "tnum";
-  transition: transform var(--dur-short) var(--ease-out),
-              color var(--dur-micro) var(--ease-out);
-}
-
-@media (hover: hover) and (pointer: fine) {
-  .section__pull:hover { color: var(--color-ink); }
-  .section__pull:hover .section__pull-arrow {
-    transform: translateX(4px);
-    color: var(--color-accent);
-  }
-}
-
-.section__pull:focus-visible {
-  outline: 2px solid var(--color-focus);
-  outline-offset: 4px;
-  color: var(--color-ink);
-}
-
-[data-theme="brutal"] .section__pull,
-[data-theme="manifesto"] .section__pull,
-[data-theme="terminal"] .section__pull,
-[data-theme="sport"] .section__pull,
-[data-theme="almanac"] .section__pull,
-[data-theme="quiet"] .section__pull,
-[data-theme="bloom"] .section__pull {
-  font-family: var(--font-body);
-  font-style: normal;
-  text-transform: uppercase;
-  font-size: var(--text-sm);
-  letter-spacing: 0.04em;
-}
-
-[data-theme="terminal"] .section__pull-arrow::before {
-  content: ">";
-  margin-inline-end: 0.4em;
-  color: var(--color-accent);
-}
 
 /* — Interlude — full-bleed typographic moment between sections —
    One declarative phrase set in the active theme's display face,

site/css/tokens.css

@@ -45,7 +45,7 @@
   --text-xl:   1.75rem;
   --text-2xl:  2.25rem;
   --text-3xl:  2.75rem;
-  --text-display:   clamp(3rem, 5.5vw + 1rem, 5.75rem);
+  --text-display:   clamp(3.0rem, 5.5vw + 1.0rem, 5.75rem);
   --text-display-s: clamp(2rem, 3vw + 1rem, 3rem);
 
   --lh-tight:   1.02;
@@ -137,7 +137,7 @@
   --display-optical: 144;
   --display-soft: 0;
 
-  --text-display:   clamp(2.75rem, 5vw + 1rem, 5.25rem);
+  --text-display:   clamp(2.75rem, 5.0vw + 1.0rem, 5.25rem);
   --text-display-s: clamp(1.75rem, 2.5vw + 1rem, 2.75rem);
 
   --tracking-display: -0.03em;
@@ -175,7 +175,7 @@
   --display-weight: 700;
   --display-soft: 0;
 
-  --text-display:   clamp(3.5rem, 8vw + 1rem, 8rem);
+  --text-display:   clamp(3.5rem, 6vw + 1.0rem, 6.5rem);
   --text-display-s: clamp(2.25rem, 4vw + 1rem, 3.75rem);
   --text-2xl: 2.75rem;
   --text-xl:  2rem;
@@ -226,7 +226,7 @@
   --display-optical: 96;
   --display-soft: 0;
 
-  --text-display:   clamp(3.25rem, 6vw + 1rem, 6.5rem);
+  --text-display:   clamp(3.25rem, 6.0vw + 1.0rem, 5.75rem);
   --text-display-s: clamp(2.25rem, 3.5vw + 1rem, 3.5rem);
 
   --tracking-display: -0.012em;
@@ -272,7 +272,7 @@
   --display-style: normal;
   --display-soft: 0;
 
-  --text-display:   clamp(3.75rem, 7vw + 1rem, 7.5rem);
+  --text-display:   clamp(3.75rem, 5.5vw + 1.0rem, 6.25rem);
   --text-display-s: clamp(2.5rem, 4vw + 1rem, 4rem);
 
   --tracking-display: -0.018em;
@@ -325,7 +325,7 @@
   --text-lg:   1.375rem;
   --text-xl:   1.625rem;
   --text-2xl:  2rem;
-  --text-display:   clamp(2.75rem, 5vw + 1rem, 5rem);
+  --text-display:   clamp(2.75rem, 5.0vw + 1.0rem, 5.0rem);
   --text-display-s: clamp(2rem, 3vw + 1rem, 2.875rem);
 
   --tracking-display: -0.022em;
@@ -367,7 +367,7 @@
   --display-weight: 500;
   --display-style: normal;
 
-  --text-display:   clamp(2.25rem, 4vw + 1rem, 4rem);
+  --text-display:   clamp(2.25rem, 4.0vw + 1.0rem, 4.0rem);
   --text-display-s: clamp(1.625rem, 2.25vw + 1rem, 2.5rem);
   --text-xl: 1.5rem;
   --text-2xl: 1.875rem;
@@ -414,7 +414,7 @@
   --display-optical: 96;
   --display-style: normal;
 
-  --text-display:   clamp(4rem, 12vw + 1rem, 13rem);
+  --text-display:   clamp(4.0rem, 8vw + 1.0rem, 9rem);
   --text-display-s: clamp(2.75rem, 6vw + 1rem, 5.5rem);
   --text-2xl: 3rem;
   --text-xl:  2rem;
@@ -462,7 +462,7 @@
   --display-weight: 500;
   --display-style: normal;
 
-  --text-display:   clamp(2.25rem, 4vw + 1rem, 4rem);
+  --text-display:   clamp(2.25rem, 4.0vw + 1.0rem, 4.0rem);
   --text-display-s: clamp(1.625rem, 2.5vw + 1rem, 2.5rem);
   --text-xl: 1.5rem;
   --text-2xl: 1.875rem;
@@ -513,7 +513,7 @@
   --display-weight: 300;
   --display-style: normal;
 
-  --text-display:   clamp(3rem, 5.5vw + 1rem, 5.75rem);
+  --text-display:   clamp(3.0rem, 5.5vw + 1.0rem, 5.75rem);
   --text-display-s: clamp(2rem, 3vw + 1rem, 3rem);
 
   --tracking-display: -0.018em;
@@ -567,7 +567,7 @@
   --text-lg:   1.25rem;
   --text-xl:   1.5rem;
   --text-2xl:  1.875rem;
-  --text-display:   clamp(2.25rem, 3.5vw + 1rem, 3.75rem);
+  --text-display:   clamp(2.25rem, 3.5vw + 1.0rem, 3.75rem);
   --text-display-s: clamp(1.5rem, 2vw + 1rem, 2.25rem);
 
   --tracking-display: -0.014em;
@@ -616,7 +616,7 @@
   --display-style: italic;
   --display-optical: 96;
 
-  --text-display:   clamp(3.5rem, 8vw + 1rem, 8.5rem);
+  --text-display:   clamp(3.5rem, 6vw + 1.0rem, 6.5rem);
   --text-display-s: clamp(2.25rem, 4vw + 1rem, 4rem);
   --text-2xl: 2.5rem;
   --text-xl:  1.875rem;
@@ -673,7 +673,7 @@
   --display-style: italic;
   --display-soft: 30;
 
-  --text-display:   clamp(3.5rem, 7vw + 1rem, 7.5rem);
+  --text-display:   clamp(3.5rem, 5.5vw + 1.0rem, 6.25rem);
   --text-display-s: clamp(2.25rem, 4vw + 1rem, 4.25rem);
 
   --tracking-display: -0.022em;
@@ -715,7 +715,7 @@
   --display-weight: 600;
   --display-style: normal;
 
-  --text-display:   clamp(3rem, 5.5vw + 1rem, 6rem);
+  --text-display:   clamp(3.0rem, 5.5vw + 1.0rem, 5.75rem);
   --text-display-s: clamp(2rem, 3vw + 1rem, 3.25rem);
 
   --tracking-display: -0.035em;
@@ -759,7 +759,7 @@
   --display-weight: 800;
   --display-style: normal;
 
-  --text-display:   clamp(3.25rem, 7vw + 1rem, 7.25rem);
+  --text-display:   clamp(3.25rem, 5.5vw + 1.0rem, 6.25rem);
   --text-display-s: clamp(2.25rem, 3.5vw + 1rem, 3.75rem);
 
   --tracking-display: -0.04em;
@@ -806,7 +806,7 @@
   --display-style:  normal;
 
   /* A confident, large display — minimalism with conviction, not timidity. */
-  --text-display:   clamp(2.5rem, 5vw + 0.5rem, 4.75rem);
+  --text-display:   clamp(2.5rem, 5.0vw + 0.5rem, 4.75rem);
   --text-display-s: clamp(2rem, 3vw + 0.5rem, 3rem);
   --text-2xl: clamp(1.75rem, 2vw + 0.5rem, 2.5rem);
   --text-xl:  1.5rem;
@@ -863,7 +863,7 @@
   --display-weight: 600;
   --display-style:  normal;
 
-  --text-display:   clamp(3rem, 6vw + 1rem, 6rem);
+  --text-display:   clamp(3.0rem, 6.0vw + 1.0rem, 5.75rem);
   --text-display-s: clamp(2rem, 3vw + 1rem, 3.5rem);
 
   --tracking-display: -0.035em;
@@ -907,7 +907,7 @@
   --display-weight: 600;
   --display-style:  normal;
 
-  --text-display:   clamp(2.5rem, 5vw + 0.5rem, 4.5rem);
+  --text-display:   clamp(2.5rem, 5.0vw + 0.5rem, 4.5rem);
   --text-display-s: clamp(2rem, 3vw + 0.5rem, 3rem);
 
   --tracking-display: -0.025em;
@@ -947,7 +947,7 @@
   --display-weight: 600;
   --display-style:  normal;
 
-  --text-display:   clamp(2.5rem, 5.5vw + 0.5rem, 5rem);
+  --text-display:   clamp(2.5rem, 5.5vw + 0.5rem, 5.0rem);
   --text-display-s: clamp(2rem, 3vw + 0.5rem, 3rem);
 
   --tracking-display: -0.035em;
@@ -988,7 +988,7 @@
   --display-weight: 600;
   --display-style:  normal;
 
-  --text-display:   clamp(3rem, 6vw + 1rem, 5.75rem);
+  --text-display:   clamp(3.0rem, 6.0vw + 1.0rem, 5.75rem);
   --text-display-s: clamp(2rem, 3vw + 1rem, 3.5rem);
 
   --tracking-display: -0.035em;
@@ -1032,7 +1032,7 @@
   --display-weight: 600;
   --display-style:  normal;
 
-  --text-display:   clamp(2.75rem, 5vw + 1rem, 5rem);
+  --text-display:   clamp(2.75rem, 5.0vw + 1.0rem, 5.0rem);
   --text-display-s: clamp(2rem, 3vw + 0.5rem, 3rem);
 
   --tracking-display: -0.03em;
@@ -1073,7 +1073,7 @@
   --display-weight: 700;
   --display-style:  normal;
 
-  --text-display:   clamp(2.75rem, 5vw + 0.75rem, 5rem);
+  --text-display:   clamp(2.75rem, 5.0vw + 0.75rem, 5.0rem);
   --text-display-s: clamp(2rem, 3vw + 0.5rem, 3rem);
 
   --tracking-display: -0.025em;
@@ -1153,7 +1153,7 @@
   --display-weight: 800;
   --display-style:  normal;
 
-  --text-display:   clamp(2.5rem, 5vw + 0.75rem, 4.75rem);
+  --text-display:   clamp(2.5rem, 5.0vw + 0.75rem, 4.75rem);
   --text-display-s: clamp(1.875rem, 3vw + 0.5rem, 2.875rem);
 
   --tracking-display: -0.04em;        /* tight, magazine-shaped */

site/index.html

@@ -188,79 +188,62 @@
 
         <div class="ex-card" role="listitem">
           <div class="ex-card__thumb ex-card__thumb--video" aria-hidden="true">
-            <video data-hover-play src="_tests/_thumbs/BananaStudio-loop.mp4" autoplay loop muted playsinline
-              preload="metadata" width="1784" height="1080"></video>
+            <video data-hover-play src="_tests/_thumbs/SaaS-loop.mp4" autoplay loop muted playsinline preload="metadata" width="1784" height="1080"></video>
           </div>
-          <p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a creative studio with
-            playful motion</p>
+          <p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a SaaS product page, modern-minimal</p>
         </div>
 
         <div class="ex-card" role="listitem">
           <div class="ex-card__thumb ex-card__thumb--video" aria-hidden="true">
-            <video data-hover-play src="_tests/_thumbs/SaaS-loop.mp4" autoplay loop muted playsinline preload="metadata"
-              width="1784" height="1080"></video>
+            <video data-hover-play src="_tests/_thumbs/wayfare-loop.mp4" autoplay loop muted playsinline preload="metadata" width="1784" height="1080"></video>
           </div>
-          <p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a SaaS product page,
-            modern-minimal</p>
+          <p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a travel booking site, atmospheric</p>
         </div>
 
         <div class="ex-card" role="listitem">
           <div class="ex-card__thumb ex-card__thumb--video" aria-hidden="true">
-            <video data-hover-play src="_tests/_thumbs/wayfare-loop.mp4" autoplay loop muted playsinline
-              preload="metadata" width="1784" height="1080"></video>
+            <video data-hover-play src="_tests/_thumbs/slow-pour-loop.mp4" autoplay loop muted playsinline preload="metadata" width="1784" height="1080"></video>
           </div>
-          <p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a travel booking site,
-            atmospheric</p>
+          <p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a small-batch coffee subscription page</p>
         </div>
 
         <div class="ex-card" role="listitem">
           <div class="ex-card__thumb ex-card__thumb--video" aria-hidden="true">
-            <video data-hover-play src="_tests/_thumbs/slow-pour-loop.mp4" autoplay loop muted playsinline
-              preload="metadata" width="1784" height="1080"></video>
+            <video data-hover-play src="_tests/_thumbs/BananaStudio-loop.mp4" autoplay loop muted playsinline preload="metadata" width="1784" height="1080"></video>
           </div>
-          <p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a small-batch coffee
-            subscription page</p>
+          <p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a creative studio with playful motion</p>
         </div>
 
         <div class="ex-card" role="listitem">
           <picture class="ex-card__thumb" aria-hidden="true">
-            <img src="_tests/_thumbs/05-tracejam.png" alt="" loading="lazy" decoding="async" width="1024"
-              height="640" />
+            <img src="_tests/_thumbs/05-tracejam.png" alt="" loading="lazy" decoding="async" width="1024" height="640" />
           </picture>
-          <p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build an observability
-            dashboard, dark</p>
+          <p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build an observability dashboard, dark</p>
         </div>
 
         <div class="ex-card" role="listitem">
-          <picture class="ex-card__thumb" aria-hidden="true">
-            <img src="_tests/_thumbs/06-anya.png" alt="" loading="lazy" decoding="async" width="1024" height="640" />
-          </picture>
-          <p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a software architect
-            personal site</p>
+          <div class="ex-card__thumb ex-card__thumb--video" aria-hidden="true">
+            <video data-hover-play src="_tests/_thumbs/anya-loop.mp4" autoplay loop muted playsinline preload="metadata" width="1784" height="1080"></video>
+          </div>
+          <p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a software architect personal site</p>
         </div>
 
         <div class="ex-card" role="listitem">
-          <picture class="ex-card__thumb" aria-hidden="true">
-            <img src="_tests/_thumbs/07-foundry.png" alt="" loading="lazy" decoding="async" width="1024" height="640" />
-          </picture>
-          <p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a SOC2 compliance
-            landing page</p>
+          <div class="ex-card__thumb ex-card__thumb--video" aria-hidden="true">
+            <video data-hover-play src="_tests/_thumbs/Najm-loop.mp4" autoplay loop muted playsinline preload="metadata" width="1784" height="1080"></video>
+          </div>
+          <p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a Moroccan fashion brand landing page</p>
         </div>
 
         <div class="ex-card" role="listitem">
-          <picture class="ex-card__thumb" aria-hidden="true">
-            <img src="_tests/_thumbs/08-cohort.png" alt="" loading="lazy" decoding="async" width="1024" height="640" />
-          </picture>
-          <p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a cohort-based courses
-            page, stat-led</p>
+          <div class="ex-card__thumb ex-card__thumb--video" aria-hidden="true">
+            <video data-hover-play src="_tests/_thumbs/Soroe-loop.mp4" autoplay loop muted playsinline preload="metadata" width="1804" height="1080"></video>
+          </div>
+          <p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a small ceramics studio site</p>
         </div>
 
       </div>
 
-      <a class="section__pull" href="#skills" aria-label="Continue to Skills section">
-        <span class="section__pull-label">See the verbs</span>
-        <span class="section__pull-arrow" aria-hidden="true">→</span>
-      </a>
     </section>
 
     <!-- 03 · SKILLS — five things Hallmark does, one ruleset underneath -->
@@ -376,12 +359,11 @@
           </header>
 
           <div class="skill-row__body">
-            <figure class="skill-row__demo skill-row__demo--audit" aria-label="Sample AI-default landing hero">
-              <figcaption class="audit-slop__caption">Specimen — actual AI slop, untouched</figcaption>
+            <figure class="skill-row__demo skill-row__demo--audit" aria-label="A Hallmark output for reference">
               <span class="fig-corners brief-output">
                 <span class="fig-corners__bl"></span><span class="fig-corners__br"></span>
-                <img src="_tests/_thumbs/audit-slop.png"
-                  alt="A typical AI-default landing hero — purple-pink gradient, generic headline, gradient pill CTA"
+                <img src="_tests/_thumbs/audit-example.png"
+                  alt="A Hallmark output — editorial display, real proof, hand-built illustration"
                   loading="lazy" decoding="async" width="1024" height="640" />
               </span>
             </figure>
@@ -446,7 +428,7 @@
               <figure class="diptych__half" data-state="after">
                 <span class="fig-corners">
                   <span class="fig-corners__bl"></span><span class="fig-corners__br"></span>
-                  <video data-hover-play src="_tests/_thumbs/uractivation-after-loop.mp4" autoplay loop muted
+                  <video src="_tests/_thumbs/uractivation-after-loop.mp4" autoplay loop muted
                     playsinline preload="metadata" width="1784" height="1080"
                     aria-label="Same content, redesigned by Hallmark — different macrostructure, different fingerprint"></video>
                 </span>
@@ -458,11 +440,6 @@
 
       </ol>
 
-      <a class="section__pull section__pull--right" href="#anti-patterns"
-        aria-label="Continue to Anti-patterns section">
-        <span class="section__pull-label">See the named tells</span>
-        <span class="section__pull-arrow" aria-hidden="true">→</span>
-      </a>
     </section>
 
     <!-- INTERLUDE — full-bleed typographic moment between III and IV.
@@ -565,10 +542,6 @@
 
       </ol>
 
-      <a class="section__pull section__pull--right" href="#s5-foundations" aria-label="Continue to Foundations section">
-        <span class="section__pull-label">Read the rules</span>
-        <span class="section__pull-arrow" aria-hidden="true">→</span>
-      </a>
     </section>
 
 
@@ -693,10 +666,6 @@
 
       </ul>
 
-      <a class="section__pull" href="#install" aria-label="Continue to Install section">
-        <span class="section__pull-label">Install in your editor</span>
-        <span class="section__pull-arrow" aria-hidden="true">→</span>
-      </a>
     </section>
 
     <!-- DEPRECATED: original Section 05 (Foundations radio tabs) — replaced
@@ -706,11 +675,48 @@
          aria-labelledby="s5-foundations"> and the closing </template> to
          </section>, then remove the new 8-card section above. -->
 
-    <!-- 06 · INSTALL — one command, every harness -->
-    <section class="section reveal" style="--i:5" id="install" aria-labelledby="s6">
+    <!-- 06 · BEFORE / AFTER HALLMARK — same prompt, two different outputs.
+         The "before" was generated by Sonnet 4.6 alone; the "after" by
+         Sonnet 4.6 with Hallmark loaded. Both are real outputs of the
+         same brief. -->
+    <section class="section reveal" style="--i:5" id="before-after" aria-labelledby="s-ba">
       <header class="section__head">
         <p class="section-label">
-          <span class="num">06</span><span class="divider">⁄</span><span>Install</span>
+          <span class="num">06</span><span class="divider">⁄</span><span>Before / After</span>
+        </p>
+        <h2 class="section__title" id="s-ba">
+          Same prompt. Two different outputs.
+        </h2>
+      </header>
+
+      <p class="ba__prompt" aria-label="The shared prompt"><span class="ba__prompt-mark">$</span> /hallmark build a landing page for The Quiet Hour — a weekly natural-wine dispatch from Lisbon</p>
+
+      <div class="ba">
+        <figure class="ba__panel ba__panel--before">
+          <p class="ba__panel-label"><span class="ba__panel-tag">Sonnet 4.6, no Hallmark</span></p>
+          <span class="fig-corners ba__frame">
+            <span class="fig-corners__bl"></span><span class="fig-corners__br"></span>
+            <img src="_tests/_thumbs/before-quiet-hour.png" alt="Generic AI-default landing page — purple-pink gradient hero, generic 'Discover natural wines' headline, ★★★★★ trust strip, 3-column feature cards" loading="lazy" decoding="async" width="1440" height="900" />
+          </span>
+          <figcaption class="ba__panel-cap">Default reach for the gradient. Generic stat strip, made-up Trustpilot rating, "10× faster" feature card.</figcaption>
+        </figure>
+
+        <figure class="ba__panel ba__panel--after">
+          <p class="ba__panel-label"><span class="ba__panel-tag ba__panel-tag--accent">Sonnet 4.6 + Hallmark</span></p>
+          <span class="fig-corners ba__frame">
+            <span class="fig-corners__bl"></span><span class="fig-corners__br"></span>
+            <img src="_tests/_thumbs/after-quiet-hour.png" alt="A Hallmark output — editorial Lisbon dispatch, italic Fraunces display, real bottle plate with grape + region + tasting notes, no fabricated proof" loading="lazy" decoding="async" width="1440" height="900" />
+          </span>
+          <figcaption class="ba__panel-cap">Marquee Hero · Atelier · italic Fraunces. Real bottle, real grape, real region. No fabricated stats.</figcaption>
+        </figure>
+      </div>
+    </section>
+
+    <!-- 07 · INSTALL — one command, every harness -->
+    <section class="section reveal" style="--i:6" id="install" aria-labelledby="s6">
+      <header class="section__head">
+        <p class="section-label">
+          <span class="num">07</span><span class="divider">⁄</span><span>Install</span>
         </p>
         <h2 class="section__title" id="s6">
           Install.
@@ -966,7 +972,7 @@
       </div>
 
       <p class="foot__base">
-        Powered by <span class="foot__powered-mark">Together&nbsp;AI</span>. MIT licensed.
+        Made by <span class="foot__powered-mark">Together&nbsp;AI</span>. MIT licensed.
       </p>
 
     </div>

skill/references/typography.md

@@ -183,10 +183,12 @@ Pick a ratio. The default for Hallmark work is **1.25** (major third). Build the
   --text-2xl:  2.4414rem;
   --text-3xl:  3.0518rem;
   --text-4xl:  3.8147rem;
-  --text-display: clamp(3rem, 8vw + 1rem, 8rem);
+  --text-display: clamp(2.75rem, 5vw + 1rem, 5.25rem);
 }
 ```
 
+**Display max — keep it ≤ 5.5rem (88 px).** Above that, hero headlines crowd themselves on 1280–1440 px viewports and require multi-line wrapping that almost always reads as drama, not gravity. Even on Manifesto / Brutal display-heavy themes, cap at 6rem (96 px). The exception is a single-line, single-word display (e.g. a stat) that occupies ≤ 12 ch — it can grow to 7rem. **Default emit format is `clamp(2.75rem, 5vw + 1rem, 5.25rem)`.**
+
 Use no more than five sizes on a single page. If you need more hierarchy, use weight and colour, not another size.
 
 ## Weights