Add listing page circuit heroes

README.md

@@ -83,6 +83,33 @@ README.md                 This runbook
 Generated output such as `build/`, `dist/`, and `.lektor/` is intentionally
 ignored and must not be committed.
 
+## Top-level listing heroes
+
+The three primary listing routes each render one design-specific circuit hero
+through `templates/section.html`:
+
+| Route | Hero treatment |
+| --- | --- |
+| `/projects/` | Green system-architecture and project-matrix display |
+| `/articles/` | Cyan intelligence-briefing and knowledge-system display |
+| `/blog/` | Pink transmission and live-signal display |
+
+These heroes apply only to the top-level Projects, Articles, and Blog listing
+pages. Individual project pages, project devlogs, articles, and blog posts keep
+their existing templates and headers. Each hero preserves its own SVG circuit
+paths, status module, copy, timing, and responsive behavior while sharing
+namespaced CSS in `assets/static/style.css`. The design declares a 175-pixel
+minimum height rather than a fixed height, so its complete content determines
+the final rendered height. At viewports up to 760 pixels wide, each hero's copy
+and decorative panel use the design's single-column layout.
+
+`assets/static/section-heroes.js` supplies the circuit-packet and intermittent
+glitch animations. The complete static hero remains available when JavaScript
+or the Web Animations API is unavailable, and motion is disabled when the user
+prefers reduced motion. When hero styles or behavior change, increment the
+corresponding `style.css` or `section-heroes.js` cache-busting version in
+`templates/base.html`.
+
 ## Routine content workflow
 
 Edit in a normal Git checkout, review the changes, and push them to `main`.