From ea00dae29a7328abeb92aef6de0bd2b91e1577d4 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 13 Oct 2026 01:13:26 +0000
Subject: [PATCH] Bring the map above the fold: tighter gap, smaller heading,
 one-line note

The map now starts right under the hero. The heading is smaller, and the
reading note is a single muted line beside it instead of a paragraph.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01UDZbVW33qquUp8UF5vzCxF
---
 app/home.css      | 35 ++++++++++++++++++++++++++++++++---
 app/page.tsx      |  4 ++--
 content/home.json |  2 +-
 3 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/app/home.css b/app/home.css
index b185d33..a624173 100644
--- a/app/home.css
+++ b/app/home.css
@@ -73,21 +73,50 @@
 
 /* The map */
 
+/* Pulled up close to the hero so the columns start above the fold. */
 .home__map {
+  margin-block-start: calc(var(--space-12) - var(--space-24));
   scroll-margin-block-start: var(--space-8);
 }
 
 .map-head {
   display: grid;
-  gap: var(--space-4);
-  margin-block-end: var(--space-8);
+  gap: var(--space-3) var(--space-8);
+  margin-block-end: var(--space-6);
+}
+
+@media (min-width: 48rem) {
+  .map-head {
+    grid-template-columns: auto minmax(0, 1fr);
+    align-items: baseline;
+  }
+
+  .map-head__note {
+    justify-self: end;
+    text-align: end;
+  }
+
+  .legend {
+    grid-column: 1 / -1;
+  }
+}
+
+.map-head__title {
+  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem);
+}
+
+.map-head__note {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  letter-spacing: 0.02em;
+  color: var(--color-ink-muted);
 }
 
 .legend {
   display: flex;
   flex-wrap: wrap;
   gap: var(--space-3) var(--space-8);
-  margin: var(--space-2) 0 0;
+  margin: 0;
   padding: 0;
   list-style: none;
   font-size: var(--text-sm);
diff --git a/app/page.tsx b/app/page.tsx
index 03fd364..0503257 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -38,10 +38,10 @@ export default function HomePage() {
 
       <section id="map" className="wrap home__map" aria-labelledby="map-title">
         <div className="map-head">
-          <h2 id="map-title" className="section-title">
+          <h2 id="map-title" className="section-title map-head__title">
             {home.mapHeading}
           </h2>
-          <p className="lede">{home.mapLede}</p>
+          <p className="map-head__note">{home.mapLede}</p>
           <ul className="legend" aria-label={home.legendLabel}>
             {STATUS_IDS.map((id) => (
               <li key={id} className="legend__item" data-status={id}>
diff --git a/content/home.json b/content/home.json
index 2d898a6..1a7e52d 100644
--- a/content/home.json
+++ b/content/home.json
@@ -11,7 +11,7 @@
   ],
   "lede": "Agents are the new browsers. Since mid-2025, a dozen open standards have appeared to teach websites how to deal with them. They're young, they overlap, and the press releases make all of them sound finished. Here is what each one does, who's behind it, and how real it is today.",
   "mapHeading": "The map",
-  "mapLede": "Read it left to right as an agent's visit: find what's offered, use the site, prove who it is, shop, then pay.",
+  "mapLede": "Read it left to right, in the order an agent visits a site.",
   "patternsHeading": "What's real, what's hype",
   "patterns": [
     {