feat: US-015 - Explore parent header typography options

Tested 14 combinations across Elvaro Grotesque (300-900) and Blumir
(100-700), varying size, case, and letter-spacing. Selected Elvaro
Grotesque 600, 2.2rem, title case, -0.02em tracking for premium
clinical feel with clear visual hierarchy.

Ralph/prd.json

@@ -250,7 +250,7 @@
         "Verify in browser using dev-browser skill at 375px, 768px, 1024px, and 1920px widths"
       ],
       "priority": 14,
-      "passes": false,
+      "passes": true,
       "notes": "Use Playwright to resize browser and take snapshots at each breakpoint. Fix any overflow, wrapping, or spacing issues found."
     },
     {
@@ -269,8 +269,8 @@
         "Verify in browser using dev-browser skill"
       ],
       "priority": 15,
-      "passes": false,
+      "passes": true,
-      "notes": "This story is about visual exploration. Try different combinations and screenshot them. The chosen option will be applied in the next story. Layout must already be in place (US-005 through US-009) so fonts can be judged in context. Use the bencium-innovative-ux-designer skill approach for design evaluation."
+      "notes": "Explored 14 options across Elvaro (300-900) and Blumir (100-700), title case vs uppercase, sizes 1.4-3rem, various tracking. Selected: Elvaro Grotesque 600, 2.2rem, title case, -0.02em tracking. Rationale: font consistency, tight tracking feels premium, slightly reduced size is more data-dense/clinical, clear hierarchy above sub-headers."
     },
     {
       "id": "US-016",

Ralph/progress.txt

@@ -1029,3 +1029,76 @@
   - Dynamically iterating over data arrays (consultations, investigations, skills) is more maintainable than hardcoded entries — data changes propagate automatically
   - The `expand` palette action type is still in the union but no longer used by any items — keeping the handler in DashboardLayout is harmless
 ---
+
+## Iteration 14 — US-014: Responsive verification and fixes (2026-02-14)
+
+### Status: PASSED ✅
+
+### Changes
+- **Card.tsx**: Added `minWidth: 0` and `overflow: 'hidden'` to base styles — fixes CSS Grid items defaulting to `min-width: auto` which prevented shrinking below intrinsic content width, causing 912px-wide articles at 375px viewport
+- **ParentSection.tsx**: Replaced fixed `fontSize: '2.4rem'` with responsive Tailwind classes: `text-[1.5rem] sm:text-[1.8rem] md:text-[2rem] lg:text-[2.4rem]` — scales parent section headers appropriately across breakpoints
+- **PatientSummaryTile.tsx**: Made KPI grid responsive — replaced hardcoded `gridTemplateColumns: '1fr 1fr'` with `grid-cols-1 xs:grid-cols-2` so KPIs stack single-column below 480px
+- **SubNav.tsx**: Fixed two issues:
+  1. Changed `justifyContent: 'center'` to left-aligned by default with `md:justify-center` — prevents first nav item being pushed off-screen at mobile widths
+  2. Updated stale tileIds (`core-skills`, `career-activity`, `education`) to match restructured dashboard anchors (`section-skills`, `section-experience`, `section-education`)
+- **DashboardLayout.tsx**: Added `data-tile-id` wrapper divs around WorkExperienceSubsection, RepeatMedicationsSubsection, and EducationSubsection so SubNav can scroll to these sections within Patient Pathway
+
+### Verification (Playwright at 4 breakpoints)
+- **375px (mobile)**: Single column, all articles 343px, no overflow, constellation SVG 301×250, pathway columns stacked, KPI grid single-column, SubNav starts from left edge
+- **768px (tablet)**: Two-column grid (352px each), full-width tiles 720px, pathway columns side-by-side (331px), KPI 2-column, sidebar hidden, no overflow
+- **1024px (desktop)**: Sidebar visible at 272px, two-column grid (340px each), full-width tiles 696px, pathway columns 2-column (319px), constellation SVG 678px
+- **1920px (wide)**: Two-column grid (788px each), full-width tiles 1592px, pathway columns 767px each, constellation SVG 1550px, well-balanced layout
+- **No horizontal scrollbar at any breakpoint** (`scrollWidth === clientWidth` confirmed at all 4 widths)
+
+### Learnings
+- CSS Grid items default to `min-width: auto` — always add `minWidth: 0` + `overflow: hidden` to grid item components to prevent content blowout
+- SubNav tileIds must be updated whenever dashboard sections are restructured — stale IDs cause scroll-to-section to silently fail
+- The `justifyContent: 'center'` on a scrollable flex container pushes the first items off-screen at narrow viewports — use media-query-based centering instead
+---
+
+## Iteration 15 — US-015: Explore parent header typography options
+**Status**: PASS
+**Commit**: (this iteration)
+
+### What was done
+Visual exploration of parent section header typography. Tested 14 combinations in Playwright by dynamically applying styles to the h2 elements and taking screenshots.
+
+### Options tested
+
+| # | Font | Weight | Size | Case | Tracking | Verdict |
+|---|------|--------|------|------|----------|---------|
+| 00 | Elvaro | 700 | 2.4rem | Title | normal | Baseline — solid but generic bold |
+| 01 | Elvaro | 500 | 2.4rem | Title | normal | Nearly identical to 700 |
+| 02 | Elvaro | 300 | 2.4rem | Title | normal | Lighter, more elegant |
+| 03 | Elvaro | 600 | 2.2rem | Title | -0.02em | **SELECTED** — compact, refined, premium |
+| 04 | Elvaro | 400 | 2.6rem | Title | -0.03em | Light + large, premium but lacks authority |
+| 05 | Elvaro | 900 | 2.4rem | Title | normal | ~Same as 700 (font caps out) |
+| 06 | Elvaro | 600 | 1.4rem | Upper | 0.08em | Too similar to sub-headers |
+| 07 | Elvaro | 500 | 1.8rem | Upper | 0.05em | Strong clinical feel, runner-up |
+| 08 | Blumir | 500 | 2.4rem | Title | -0.01em | Distinct geometric character |
+| 09 | Blumir | 300 | 2.8rem | Title | -0.02em | Elegant but lacks authority |
+| 10 | Blumir | 700 | 2.4rem | Title | -0.02em | Bold, assertive geometric |
+| 11 | Blumir | 100 | 3rem | Title | -0.01em | Too thin/delicate |
+| 12 | Blumir | 500 | 1.6rem | Upper | 0.06em | Blurs with sub-headers |
+| 13 | Elvaro | 600 | 2.4rem | Title | -0.02em | Teal color — competes with KPI accents |
+| 14 | Blumir | 400 | 2.6rem | Title | -0.03em | Clean, refined, distinct from body |
+
+### Selection: Option 3 — Elvaro Grotesque 600, 2.2rem, title case, -0.02em
+
+**Rationale:**
+- Font consistency (Elvaro throughout) — one typeface used well > two fonts competing
+- 600 weight with -0.02em tracking feels deliberately chosen, not default
+- Slightly smaller than baseline (2.2rem vs 2.4rem) is more data-dense/clinical
+- Title case preserves warmth and readability vs uppercase
+- Clear hierarchy: parent headers (2.2rem/600) > sub-headers (12px/600 uppercase) > body (13px/400)
+- Tight tracking gives premium, considered quality
+
+**Runner-up:** Option 7 (Elvaro 500, 1.8rem, uppercase, 0.05em) — strongest clinical identity but more austere
+
+### Key observations
+- Elvaro weights 500/700/900 render nearly identically — the font has limited visual weight range
+- Blumir's geometric character creates nice font contrast but mixing two typefaces adds complexity without clear benefit
+- Uppercase headers need careful sizing to not blur with the 12px uppercase sub-headers (LATEST RESULTS, etc.)
+- Teal-colored headers compete with KPI accent values — parent headers should stay in text-primary
+- Tight negative tracking (-0.02em to -0.03em) consistently improves the premium feel at heading sizes
+---