feat: Unified homepage layout: 42rem max-width on 5 sections, removed b…

- "frontend/src/App.css"

GSD-Task: S01/T01

.gsd/REQUIREMENTS.md

@@ -218,3 +218,34 @@
 **Description:** Admin navigation dropdown opens on mouse hover at desktop viewport widths (≥768px). On mobile/touch, remains click/tap to expand.
 **Validation:** AdminDropdown.tsx implements matchMedia(min-width:769px) guard with 150ms leave delay. Mobile retains tap-to-toggle. Frontend build passes with zero errors.
 **Primary Owner:** M015/S05
+
+## R037 — Landing Page Visual Consistency
+**Status:** active
+**Description:** Homepage has consistent max-width tracks, spacing, border-radius, and no CSS bugs (duplicate .btn rule, border-image killing border-radius). Stats scorecard has animated count-up. Section headings use unified treatment.
+**Validation:** Visual comparison at 1280px and 375px shows consistent alignment, spacing, and card radius. No jagged center column. Featured card has rounded corners.
+**Primary Owner:** M016/S01
+**Supporting Slices:** M016/S06
+
+## R038 — Pipeline Admin UI Fixes
+**Status:** active
+**Description:** Pipeline admin page: most-recent run collapse toggle works without flicker, mobile job cards don't show vertical text, stage direction chevrons visible, status filter uses button group (not text input), creator dropdown populates without 422 error.
+**Validation:** Collapse toggle on most-recent run works. 375px shows truncated creator names. Chevrons between stages. Filter buttons right-aligned. Creator dropdown populated.
+**Primary Owner:** M016/S02
+
+## R039 — Brand Minimum (Favicon, OG Tags, Logo)
+**Status:** active
+**Description:** Site has a favicon, OG meta tags for social sharing previews, and an inline SVG logo next to "Chrysopedia" in the header.
+**Validation:** Browser tab shows favicon. Sharing URL produces preview card with title/description/image. Logo visible in header.
+**Primary Owner:** M016/S03
+
+## R040 — Table of Contents Modernization
+**Status:** active
+**Description:** Technique page ToC uses clean indentation (no numbered counters), left accent bar, "On this page" heading, hover background states, IntersectionObserver-based active section highlighting, and sticky positioning in sidebar.
+**Validation:** Navigate to a 4+ section technique page. ToC highlights current section on scroll. Sticky in sidebar. No numbering. Hover states work.
+**Primary Owner:** M016/S04
+
+## R041 — Sticky Reading Header
+**Status:** active
+**Description:** Thin sticky bar appears when user scrolls past the article title on technique pages. Shows article title (truncated) + current section name. Slides in/out with CSS transition. Works on mobile.
+**Validation:** Scroll past title on a long technique page — reading header appears with correct section tracking. Works at 375px.
+**Primary Owner:** M016/S05

.gsd/milestones/M016/M016-ROADMAP.md

@@ -0,0 +1,14 @@
+# M016: 
+
+## Vision
+Modernize the public site's visual identity and reading experience: fix landing page CSS bugs, fix pipeline admin UI issues, establish brand baseline (logo, favicon, OG tags), modernize technique page table of contents with active section tracking, add sticky reading header, and polish the homepage personality.
+
+## Slice Overview
+| ID | Slice | Risk | Depends | Done | After this |
+|----|-------|------|---------|------|------------|
+| S01 | Landing Page Visual Fixes | low | — | ⬜ | Homepage has consistent 42rem max-width, unified spacing, rounded featured card, correct CTA button sizing. |
+| S02 | Pipeline Admin UI Fixes | low | — | ⬜ | Pipeline admin: collapse toggle works, mobile cards truncate, chevrons between stages, filter button group right-aligned, creator dropdown populates. |
+| S03 | Brand Minimum (Favicon, OG Tags, Logo) | low | — | ⬜ | Browser tab shows custom favicon. URL sharing produces preview card. Logo visible in header next to Chrysopedia. |
+| S04 | ToC Modernization | medium | — | ⬜ | Technique page ToC: no counters, left accent bar, On this page heading, active section highlighting on scroll, sticky in sidebar. |
+| S05 | Sticky Reading Header | medium | S04 | ⬜ | Thin sticky bar appears when scrolling past article title, shows title + current section, slides in/out. |
+| S06 | Landing Page Personality Pass | low | S01, S03 | ⬜ | Homepage: animated stat count-up, consistent section headings, content above fold, header brand accent with logo. |

.gsd/milestones/M016/slices/S01/S01-PLAN.md

@@ -0,0 +1,25 @@
+# S01: Landing Page Visual Fixes
+
+**Goal:** Homepage has consistent 42rem max-width, unified spacing, rounded featured card, correct CTA button sizing.
+**Demo:** After this: Homepage has consistent 42rem max-width, unified spacing, rounded featured card, correct CTA button sizing.
+
+## Tasks
+- [x] **T01: Unified homepage layout: 42rem max-width on 5 sections, removed border-image from featured card, constrained CTA to 20rem on mobile, standardized 2rem section margins** — Four CSS fixes in App.css to resolve homepage layout inconsistencies:
+
+1. **Max-width unification** — Change `.nav-cards`, `.home-stats`, `.home-trending`, `.home-popular-topics__list` from 36rem to 42rem. Keep `.home-hero__value-prop` at 32rem (intentionally narrower for readability).
+
+2. **Featured card border-radius** — Remove `border-image` and `border-image-slice` from `.home-featured`. The existing `box-shadow` glow provides visual distinction. Per KNOWLEDGE.md: border-image strips border-radius per CSS spec.
+
+3. **CTA button mobile sizing** — Add `max-width: 20rem; margin-left: auto; margin-right: auto;` to `.home-cta` in the 640px media query so it doesn't stretch to full viewport width.
+
+4. **Unified section spacing** — Standardize bottom margins: major sections (nav-cards, stats, featured, recent-section, trending) get `margin-bottom: 2rem`. The hero section keeps its existing padding.
+
+Steps:
+1. Read `frontend/src/App.css` around lines 1167, 1430, 1470, 3286 and change max-width from 36rem to 42rem.
+2. Remove `border-image` and `border-image-slice` lines from `.home-featured` (around line 1514-1515).
+3. Add max-width constraint to `.home-cta` in the `@media (max-width: 640px)` block (around line 2980).
+4. Normalize bottom margins on `.home-stats`, `.home-trending`, `.home-random` to 2rem in their margin declarations.
+5. Run `cd frontend && npm run build` — must pass with zero errors.
+  - Estimate: 30m
+  - Files: frontend/src/App.css
+  - Verify: cd frontend && npm run build 2>&1 | tail -5

.gsd/milestones/M016/slices/S01/S01-RESEARCH.md

@@ -0,0 +1,89 @@
+# S01 Research: Landing Page Visual Fixes
+
+## Summary
+
+Straightforward CSS fix slice. Four bugs on the homepage, all in `App.css` with one known pattern from KNOWLEDGE.md. No new dependencies, no backend changes.
+
+## Recommendation
+
+Single task — all four fixes are in the same CSS file and tightly coupled (the max-width unification affects every section). Verify with a frontend build + visual check.
+
+## Implementation Landscape
+
+### Files
+
+| File | Role |
+|------|------|
+| `frontend/src/App.css` | All CSS for homepage sections lives here |
+| `frontend/src/pages/Home.tsx` | JSX structure — likely no changes needed |
+
+### Bug 1: Inconsistent max-widths
+
+Sections use different `max-width` values:
+- **42rem**: `.home-how-it-works` (L1088), `.home-featured` (L1505), `.recent-section` (L1578)
+- **36rem**: `.nav-cards` (L1430), `.home-stats` (L1470), `.home-trending` (L3287)
+- **32rem**: `.home-hero__value-prop` (L1076)
+
+No `.home` container class exists — each section self-constrains independently.
+
+**Fix**: Set all homepage sections to `max-width: 42rem` for consistency. Could also add a `.home` container, but changing per-section values is less invasive.
+
+### Bug 2: Featured card not rounded (border-image strips border-radius)
+
+`.home-featured` (L1504-1518) has both:
+```css
+border-radius: 0.5rem;
+border-image: linear-gradient(135deg, var(--color-accent), #a855f7) 1;
+border-image-slice: 1;
+```
+
+Per KNOWLEDGE.md: "CSS `border-image` property overrides `border-radius`, making rounded corners disappear."
+
+**Fix**: Remove `border-image` and `border-image-slice`. Use alternative visual treatment — either `box-shadow` glow only (already present), or a `::before` pseudo-element with gradient background + border-radius for a gradient border effect. The box-shadow glow is already there and provides visual distinction, so removing border-image and keeping box-shadow is the simplest fix.
+
+### Bug 3: CTA button sizing
+
+`.home-cta` (L1128):
+```css
+padding: 0.75rem 2rem;
+font-size: 1rem;
+```
+
+At `@media (max-width: 640px)` (L2980):
+```css
+width: 100%;
+text-align: center;
+```
+
+The mobile override makes it span full width of the container. Since the hero has no max-width, the button stretches to viewport width minus padding. The fix should constrain the button's max-width on mobile (e.g., `max-width: 20rem`) and ensure desktop sizing feels proportional to the hero section.
+
+### Bug 4: Unified spacing
+
+Sections have inconsistent vertical margins:
+- `.home-hero`: `padding: 2rem 1rem 2.5rem`
+- `.nav-cards`: `margin: 0 auto 2rem`
+- `.home-stats`: `margin: 0 auto 1.5rem`
+- `.home-trending`: `margin: 0 auto 1rem`
+- `.home-random`: `margin: 1.5rem 0 0.5rem`
+- `.home-featured`: `margin: 0 auto 1.5rem`
+- `.recent-section`: `margin: 0 auto 2rem`
+
+**Fix**: Standardize bottom margins across sections (e.g., `2rem` for major sections, `1rem` for minor ones) for consistent rhythm.
+
+### Mobile responsive (640px breakpoint)
+
+Existing overrides at L2970: title font-size, how-it-works to single-column, CTA full-width, nav-cards single-column, recent-list single-column, featured padding reduction. These should remain functional after the max-width unification.
+
+## Verification
+
+```bash
+cd frontend && npm run build
+```
+
+Zero TypeScript/build errors confirms no structural breakage. Visual verification against `ub01:8096` confirms the layout changes render correctly (consistent widths, rounded featured card, button sizing, even spacing).
+
+## Constraints
+
+- KNOWLEDGE.md confirms `border-image` strips `border-radius` — known CSS spec behavior.
+- The `#a855f7` purple in the featured card gradient border is hardcoded (not a CSS variable). Removing border-image eliminates this.
+- `.home-hero__value-prop` at 32rem is intentionally narrower for readability — may want to keep this one narrower than the 42rem container width.

.gsd/milestones/M016/slices/S01/tasks/T01-PLAN.md

@@ -0,0 +1,36 @@
+---
+estimated_steps: 11
+estimated_files: 1
+skills_used: []
+---
+
+# T01: Fix homepage max-widths, featured card border-radius, CTA sizing, and section spacing
+
+Four CSS fixes in App.css to resolve homepage layout inconsistencies:
+
+1. **Max-width unification** — Change `.nav-cards`, `.home-stats`, `.home-trending`, `.home-popular-topics__list` from 36rem to 42rem. Keep `.home-hero__value-prop` at 32rem (intentionally narrower for readability).
+
+2. **Featured card border-radius** — Remove `border-image` and `border-image-slice` from `.home-featured`. The existing `box-shadow` glow provides visual distinction. Per KNOWLEDGE.md: border-image strips border-radius per CSS spec.
+
+3. **CTA button mobile sizing** — Add `max-width: 20rem; margin-left: auto; margin-right: auto;` to `.home-cta` in the 640px media query so it doesn't stretch to full viewport width.
+
+4. **Unified section spacing** — Standardize bottom margins: major sections (nav-cards, stats, featured, recent-section, trending) get `margin-bottom: 2rem`. The hero section keeps its existing padding.
+
+Steps:
+1. Read `frontend/src/App.css` around lines 1167, 1430, 1470, 3286 and change max-width from 36rem to 42rem.
+2. Remove `border-image` and `border-image-slice` lines from `.home-featured` (around line 1514-1515).
+3. Add max-width constraint to `.home-cta` in the `@media (max-width: 640px)` block (around line 2980).
+4. Normalize bottom margins on `.home-stats`, `.home-trending`, `.home-random` to 2rem in their margin declarations.
+5. Run `cd frontend && npm run build` — must pass with zero errors.
+
+## Inputs
+
+- ``frontend/src/App.css` — current homepage styles with the four CSS bugs`
+
+## Expected Output
+
+- ``frontend/src/App.css` — patched with consistent 42rem max-widths, removed border-image on featured card, constrained CTA button, unified section margins`
+
+## Verification
+
+cd frontend && npm run build 2>&1 | tail -5

.gsd/milestones/M016/slices/S01/tasks/T01-SUMMARY.md

@@ -0,0 +1,74 @@
+---
+id: T01
+parent: S01
+milestone: M016
+provides: []
+requires: []
+affects: []
+key_files: ["frontend/src/App.css"]
+key_decisions: ["Kept .search-container at 36rem and .home-hero__value-prop at 32rem for readability — only content sections widened to 42rem"]
+patterns_established: []
+drill_down_paths: []
+observability_surfaces: []
+duration: ""
+verification_result: "cd frontend && npm run build — passes with zero errors, producing optimized CSS bundle in 969ms."
+completed_at: 2026-04-03T05:31:43.307Z
+blocker_discovered: false
+---
+
+# T01: Unified homepage layout: 42rem max-width on 5 sections, removed border-image from featured card, constrained CTA to 20rem on mobile, standardized 2rem section margins
+
+> Unified homepage layout: 42rem max-width on 5 sections, removed border-image from featured card, constrained CTA to 20rem on mobile, standardized 2rem section margins
+
+## What Happened
+---
+id: T01
+parent: S01
+milestone: M016
+key_files:
+  - frontend/src/App.css
+key_decisions:
+  - Kept .search-container at 36rem and .home-hero__value-prop at 32rem for readability — only content sections widened to 42rem
+duration: ""
+verification_result: passed
+completed_at: 2026-04-03T05:31:43.308Z
+blocker_discovered: false
+---
+
+# T01: Unified homepage layout: 42rem max-width on 5 sections, removed border-image from featured card, constrained CTA to 20rem on mobile, standardized 2rem section margins
+
+**Unified homepage layout: 42rem max-width on 5 sections, removed border-image from featured card, constrained CTA to 20rem on mobile, standardized 2rem section margins**
+
+## What Happened
+
+Applied four CSS fixes to frontend/src/App.css: (1) Changed max-width from 36rem to 42rem on .home-popular-topics__list, .nav-cards, .home-stats, .home-trending. (2) Removed border-image and border-image-slice from .home-featured to restore border-radius. (3) Added max-width: 20rem with auto margins to .home-cta in the 640px mobile media query. (4) Normalized bottom margins to 2rem on .home-stats, .home-featured, .home-random, .home-trending.
+
+## Verification
+
+cd frontend && npm run build — passes with zero errors, producing optimized CSS bundle in 969ms.
+
+## Verification Evidence
+
+| # | Command | Exit Code | Verdict | Duration |
+|---|---------|-----------|---------|----------|
+| 1 | `cd frontend && npm run build` | 0 | ✅ pass | 969ms |
+
+
+## Deviations
+
+None.
+
+## Known Issues
+
+None.
+
+## Files Created/Modified
+
+- `frontend/src/App.css`
+
+
+## Deviations
+None.
+
+## Known Issues
+None.

.gsd/milestones/M016/slices/S02/S02-PLAN.md

@@ -0,0 +1,6 @@
+# S02: Pipeline Admin UI Fixes
+
+**Goal:** Fix 5 pipeline admin UI bugs: collapse race condition, mobile vertical text, missing stage chevrons, text input filter, creator dropdown 422 error.
+**Demo:** After this: Pipeline admin: collapse toggle works, mobile cards truncate, chevrons between stages, filter button group right-aligned, creator dropdown populates.
+
+## Tasks

.gsd/milestones/M016/slices/S03/S03-PLAN.md

@@ -0,0 +1,6 @@
+# S03: Brand Minimum (Favicon, OG Tags, Logo)
+
+**Goal:** Establish brand baseline: SVG logo, favicon set, OG meta tags with preview image, logo in header.
+**Demo:** After this: Browser tab shows custom favicon. URL sharing produces preview card. Logo visible in header next to Chrysopedia.
+
+## Tasks

.gsd/milestones/M016/slices/S04/S04-PLAN.md

@@ -0,0 +1,6 @@
+# S04: ToC Modernization
+
+**Goal:** Modernize technique page table of contents: remove numbered counters, add left accent bar, sentence-case heading, hover backgrounds, IntersectionObserver active section tracking, sticky positioning.
+**Demo:** After this: Technique page ToC: no counters, left accent bar, On this page heading, active section highlighting on scroll, sticky in sidebar.
+
+## Tasks

.gsd/milestones/M016/slices/S05/S05-PLAN.md

@@ -0,0 +1,6 @@
+# S05: Sticky Reading Header
+
+**Goal:** Add a sticky reading header component that shows article title and current section name when user scrolls past the title area on technique pages.
+**Demo:** After this: Thin sticky bar appears when scrolling past article title, shows title + current section, slides in/out.
+
+## Tasks

.gsd/milestones/M016/slices/S06/S06-PLAN.md

@@ -0,0 +1,6 @@
+# S06: Landing Page Personality Pass
+
+**Goal:** Polish the homepage: tighter hero spacing, animated stat count-up, Random button treatment, unified section heading style, header brand accent.
+**Demo:** After this: Homepage: animated stat count-up, consistent section headings, content above fold, header brand accent with logo.
+
+## Tasks

frontend/src/App.css

@@ -1164,7 +1164,7 @@ a.app-footer__repo:hover {
   flex-wrap: wrap;
   justify-content: center;
   gap: 0.5rem;
-  max-width: 36rem;
+  max-width: 42rem;
   margin: 0 auto;
 }
 
@@ -1427,7 +1427,7 @@ a.app-footer__repo:hover {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 1rem;
-  max-width: 36rem;
+  max-width: 42rem;
   margin: 0 auto 2rem;
 }
 
@@ -1467,8 +1467,8 @@ a.app-footer__repo:hover {
   display: flex;
   justify-content: center;
   gap: 2.5rem;
-  max-width: 36rem;
-  margin: 0 auto 1.5rem;
+  max-width: 42rem;
+  margin: 0 auto 2rem;
   padding: 1rem 1.5rem;
   background: var(--color-bg-surface);
   border: 1px solid var(--color-border);
@@ -1503,15 +1503,13 @@ a.app-footer__repo:hover {
 
 .home-featured {
   max-width: 42rem;
-  margin: 0 auto 1.5rem;
+  margin: 0 auto 2rem;
   padding: 1.25rem 1.5rem;
   background: var(--color-bg-surface);
   border: 1px solid var(--color-border);
   border-radius: 0.5rem;
   text-align: left;
   position: relative;
-  border-image: linear-gradient(135deg, var(--color-accent), #a855f7) 1;
-  border-image-slice: 1;
   box-shadow:
     0 0 20px rgba(34, 211, 238, 0.15),
     0 0 40px rgba(34, 211, 238, 0.05);
@@ -2979,6 +2977,9 @@ a.app-footer__repo:hover {
 
   .home-cta {
     width: 100%;
+    max-width: 20rem;
+    margin-left: auto;
+    margin-right: auto;
     text-align: center;
   }
 
@@ -3277,14 +3278,14 @@ a.app-footer__repo:hover {
 
 .home-random {
   text-align: center;
-  margin: 1.5rem 0 0.5rem;
+  margin: 1.5rem 0 2rem;
 }
 
 /* ── Trending Searches ──────────────────────────────────────────────────── */
 
 .home-trending {
-  max-width: 36rem;
-  margin: 0 auto 1rem;
+  max-width: 42rem;
+  margin: 0 auto 2rem;
   padding: 1rem 1.5rem;
   background: var(--color-bg-surface);
   border: 1px solid var(--color-border);