[JacobStephens2]

Summary

"The factory grows" goes straight after the hero. Sections 2–4 (#64, #66) are being built on parallel branches and will slot in above it.

 <header class="hero">            proof sheet
+<section class="grows">          The factory grows
+  text: one Run is the first primitive … closing line
+  <figure class="floor">         inline SVG, 480×680, no animation
+    Line 1 · One Run    solid:  issue → C M Y K → PR     → README "What a Run does"
+    Line 2 · Self-merge ghost:  floor-tape footprints    → #26
+    Line 3 · Architecture ghost                          → #27
+    Line 4 · Whole spec ghost                            → #28
 <footer class="foot">

• Each line is an SVG <a> holding its name, its status ("INSTALLED" or "NOT YET INSTALLED · #n") and a short hint. Its machines are aria-hidden, and the SVG has a <title> and <desc>.
• The name and status are always visible. The hint is the hover and focus label. It is hidden only under (hover: hover) and (pointer: fine), so touch screens, and any device that can't hover, always show it.
• Ghost lines have no ink: dashed chests, and crossed footprints where a machine will stand. Their hints say "Would …".
• The styles live in one .grows / .floor block in site/styles.css. No JS changes.

Evidence

Screenshots come from headless Chromium, served with python3 -m http.server -d site.

Before: the page had only the hero and the footer.
After:

1440×900. With a mouse, the hints are hidden until hover or focus:

1440×900, keyboard focus on Line 3. The frame turns yellow and the hint appears:

390×844, touch pointer. Every hint shows without hover:

Tab from "Show the full command" → Line 1 (README#what-a-run-does), #26, #27, #28, then the footer
hint opacity on focus            → 1 on every line
hint opacity, laptop (mouse)     → 0 until hover or focus
hint opacity, phone (hover:none) → 1
console errors                   → none
cargo test                       → all 14 suites pass

Merge Danger

Door: two-way

The change only adds markup and CSS to the static site.

Blast Radius: small

It adds one section to the home page. The #64 and #66 branches also insert sections before the footer, so expect a simple merge conflict in site/index.html.

Unaddressed findings

Standards

• Duplicated Code: the belt row and footprint shapes repeat on each line. The SVG is drawn once and never changes. Moving the shapes into <symbol>/<use> would put them in a shadow tree, where the .ghost selectors can't style them.
• Primitive Obsession: raw hex greys (#15130a, #06080b, #0e0e0e, #3a3a3a, #333). They copy prototype press B's values, as the hero copies its raw greys. The --y tint, the clearest case, now uses color-mix.
• Repeated font shorthand with the heading face. The closing line and the ink letters need a size and line-height the h1, h2, h3 rule doesn't set, so the shorthand is the simplest way to write them.
• "PR"/"PRs" in the chest labels. A 68-unit chest can't fit "pull request". The hints and the prose spell it out.

Spec

• The hints are hidden until hover on desktop. The factory grows: the floor plan #67 asks for "a short hover or focus label". Everything the section needs is always visible (name, "not yet installed", issue number), and touch screens always show the hints.
• The solid line links to the README. The factory grows: the floor plan #67 asks for a focus label on each line, which needs something focusable. The README's "What a Run does" is a real target for it.
• The extra labels ("Plan view", "PRESS HALL · PLAN", "N ↑", a second framing sentence). These are floor-plan dressing. The second sentence tells the reader, in words, that the outlined lines aren't built.
• The chests say "issue"/"PR", not "feeder"/"delivery". On a floor plan the chest labels say what goes in and what comes out. The press-line section (Press line, static: the full How a Run works diagram in HTML and SVG #64) names the feeder and the delivery pile.

Closes #67

🤖 Generated with Claude Code