design(web): the loop moves into the hero; §02 keeps one still beside its rules

The demo loop takes the hero's right-hand track, copy left, loop right. §02
drops the pair of stills and keeps the click capture on the narrow track
beside the three rules, which is the width at which the two columns end
together.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: angusbezzina

web/src/captures.ts

@@ -60,7 +60,7 @@ const HASH = "b5f58cf";
  * file, which `b5f58cf` renamed, so it was built from the commit before. */
 const LOOP_HASH = "4db8fc6";
 
-/** §02 lead — the one moving figure on the page. */
+/** The hero, right-hand track — the one moving figure on the page. */
 export const annotateLoop: Capture = {
   status: "ready",
   kind: "loop",
@@ -85,7 +85,7 @@ export const annotateClick: Capture = {
   buildHash: HASH,
 };
 
-/** §02 support still — a frame, and what it bound to. */
+/** Not placed. A frame, and what it bound to; kept for a future slot. */
 export const annotateFrame: Capture = {
   status: "ready",
   kind: "still",

web/src/sections/Annotate.tsx

@@ -2,15 +2,14 @@ import { Section } from "../components/Section";
 import { Figure } from "../components/Figure";
 import { TermList } from "../components/TermList";
 import { annotate } from "../copy";
-import { annotateClick, annotateFrame, annotateLoop } from "../captures";
+import { annotateClick } from "../captures";
 
 /**
- * §02 — the targeting rules and the captures that show them.
- *
- * The loop takes the wide track with the three rules beside it, so the first
- * moving figure on the page does not run the full measure and the rules are
- * read while it plays. The two stills, a click and a frame, sit as a pair
- * under it: same height, same frame, one rule each.
+ * §02 — the targeting rules, with the click capture beside them. The loop
+ * lives in the hero; one still here is enough to show the chip and the
+ * composer that the rules produce. The still takes the narrow track: it is
+ * nearly square, and on the wide one it outran the three rules by half its
+ * own height.
  */
 export function Annotate() {
   return (
@@ -21,15 +20,9 @@ export function Annotate() {
       lead={annotate.lead}
       modifier="section--annotate"
     >
-      <div className="stack stack--xl">
-        <div className="section__body section__body--7-5">
-          <Figure capture={annotateLoop} />
-          <TermList terms={annotate.points} />
-        </div>
-        <div className="section__body section__body--6-6">
-          <Figure capture={annotateClick} />
-          <Figure capture={annotateFrame} />
-        </div>
+      <div className="section__body section__body--5-7">
+        <Figure capture={annotateClick} />
+        <TermList terms={annotate.points} />
       </div>
     </Section>
   );

web/src/sections/Hero.tsx

@@ -3,17 +3,21 @@ import { Icon } from "../components/Icon";
 import { hero } from "../copy";
 import { site } from "../config";
 import { track } from "../analytics";
+import { Figure } from "../components/Figure";
+import { annotateLoop } from "../captures";
 
 /**
- * Typography only — no mockup in the fold (epic §6.1). The page's one
- * orchestrated entrance lives here: three elements, staggered by DOM index,
- * settling inside ~200 ms. Nothing below the fold animates on scroll except
- * the section rules.
+ * The display, the standfirst and the two CTAs on the left; the demo loop on
+ * the right, a real capture in a bare frame (gate 47 still holds — nothing is
+ * drawn). The page's one orchestrated entrance lives here: four elements,
+ * staggered by DOM index, settling inside ~200 ms. Nothing below the fold
+ * animates on scroll except the section rules.
  */
 export function Hero() {
   return (
     <section className="hero" aria-labelledby="hero-display">
-      <div className="u-shell">
+      <div className="u-shell hero__grid">
+        <div className="hero__copy">
         <h1 className="hero__display reveal" id="hero-display" style={{ "--i": 0 } as React.CSSProperties}>
           {hero.display}
         </h1>
@@ -44,6 +48,10 @@ export function Hero() {
             <Icon as={ArrowDown} />
           </a>
         </div>
+        </div>
+        <div className="hero__figure reveal" style={{ "--i": 3 } as React.CSSProperties}>
+          <Figure capture={annotateLoop} />
+        </div>
       </div>
     </section>
   );

web/src/styles/base.css

@@ -650,6 +650,28 @@ pre {
   gap: var(--space-lg);
 }
 
+/* Copy left, the loop right, from the span breakpoint up. Centred on the
+ * cross axis: the copy is the taller of the two at most widths and the loop
+ * should sit against its middle, not hang off its first line. Below the
+ * breakpoint the loop follows the CTAs. */
+.hero__grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: var(--space-xl);
+  align-items: center;
+}
+
+@media (min-width: 60rem) {
+  .hero__grid {
+    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
+    gap: var(--space-2xl);
+  }
+}
+
+.hero__figure {
+  min-width: 0;
+}
+
 /* ══ Section shell ══════════════════════════════════════════════════════ */
 
 .section {
@@ -722,13 +744,6 @@ pre {
     grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
   }
 
-  /* Two captures of the same shape, read as a pair. Equal on purpose: the
-   * asymmetric spans are for prose beside a figure, and here both tracks hold
-   * a figure. */
-  .section__body--6-6 {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
   /* §04 carries the page's shortest body — one command beside two tools, 125 px
    * of it. At the standard close (4rem) that body was followed by §05's heavier
    * open (6rem), so the WIDEST gap on the page sat under the THINNEST section