# S05: Sticky Reading Header

**Goal:** Thin sticky reading header appears when scrolling past article title on technique pages, showing title + current section, with slide-in/out CSS animation.
**Demo:** After this: Thin sticky bar appears when scrolling past article title, shows title + current section, slides in/out.

## Tasks
- [x] **T01: Lifted scroll-spy state from TableOfContents to TechniquePage, created ReadingHeader sticky bar with slide-in animation triggered by H1 leaving viewport** — Extract IntersectionObserver scroll-spy from TableOfContents into the parent TechniquePage, create a ReadingHeader component that shows article title + current section in a thin fixed bar, and add CSS with slide animation. The bar appears when the H1 title scrolls out of view and hides when it reappears.

**Context for executor:**
- `TableOfContents.tsx` currently owns `activeId` state and the IntersectionObserver effect. These must move up to `TechniquePage.tsx` so both ToC and ReadingHeader can read activeId.
- `TableOfContents` currently takes `sections: BodySectionV2[]` as its only prop. After the lift, it should also accept `activeId: string`.
- The H1 element has class `technique-header__title` — use a ref or querySelector to observe it.
- z-index landscape: modals=1000, mobile menu=200, overlays/dropdowns=100. Use z-index 150 for reading header.
- v2 format gate: only render ReadingHeader when `displayFormat === 'v2'` and sections exist (same condition as ToC).
- Mobile: reading header should still appear at 375px. Truncate title with text-overflow: ellipsis.
  - Estimate: 45m
  - Files: frontend/src/components/ReadingHeader.tsx, frontend/src/components/TableOfContents.tsx, frontend/src/pages/TechniquePage.tsx, frontend/src/App.css
  - Verify: cd frontend && npm run build 2>&1 | tail -5 && echo '---' && grep -l 'reading-header' src/App.css src/components/ReadingHeader.tsx && echo '---' && grep -c 'activeId' src/pages/TechniquePage.tsx
