# S02: Technique Page 2-Column Layout

**Goal:** Technique page shows prose content (summary + body sections) on the left and sidebar content (key moments, signal chains, plugins, related techniques) on the right at desktop widths, collapsing to a single column on mobile/tablet.
**Demo:** After this: Technique page shows prose content on left, plugins/moments/chains on right at desktop widths. Single column on mobile.

## Tasks
- [x] **T01: Added CSS grid layout splitting technique page into prose (left) and sidebar (right) columns, collapsing to single column on mobile** — Add a CSS grid wrapper to TechniquePage.tsx that places summary + body sections in the left column and key moments + signal chains + plugins + related techniques in the right column. Add corresponding CSS grid rules to App.css with a responsive breakpoint at 768px that collapses to single column. Widen .technique-page max-width from 48rem to ~64rem to accommodate the sidebar.

The executor should work on the ub01 remote repo at /vmPool/r/repos/xpltdco/chrysopedia since that's the canonical development directory. Use SSH commands or work locally and push.

## Steps

1. Read `frontend/src/App.css` lines around the `.technique-page` rule (line ~1179) and the technique section CSS (lines 1179–1420) to understand current spacing.

2. In `frontend/src/App.css`, change `.technique-page { max-width: 48rem }` to `max-width: 64rem`.

3. Add new CSS grid rules after the `.technique-page` block:
   ```css
   .technique-columns {
     display: grid;
     grid-template-columns: 1fr 22rem;
     gap: 2rem;
     align-items: start;
   }
   .technique-columns__main {
     min-width: 0; /* prevent grid blowout */
   }
   .technique-columns__sidebar {
     position: sticky;
     top: 1.5rem;
   }
   @media (max-width: 768px) {
     .technique-columns {
       grid-template-columns: 1fr;
     }
     .technique-columns__sidebar {
       position: static;
     }
   }
   ```

4. In `frontend/src/pages/TechniquePage.tsx`, wrap the content sections in a grid container. After the header/report-modal and before the `{/* Summary */}` comment, open a `<div className="technique-columns">` with two children:
   - `<div className="technique-columns__main">` containing the Summary section and Body Sections
   - `<div className="technique-columns__sidebar">` containing Key Moments, Signal Chains, Plugins, and Related Techniques
   Close the `.technique-columns` div after the Related Techniques section.

5. Run `cd frontend && npx tsc --noEmit` to verify no TypeScript errors.

6. Run `cd frontend && npm run build` to verify production build succeeds.

7. Rebuild and restart the web container on ub01: `docker compose build chrysopedia-web-8096 && docker compose up -d chrysopedia-web-8096`

8. Visually verify at http://ub01:8096/techniques/ (pick any technique slug) that:
   - At desktop width: prose on left, sidebar on right
   - At narrow width (<768px): single column
   - Header spans full width above both columns
   - Existing 640px mobile styles still work (title size reduction, etc.)

## Must-Haves

- [ ] `.technique-page` max-width widened from 48rem to ~64rem
- [ ] New `.technique-columns` CSS grid with `1fr 22rem` columns
- [ ] Summary + body sections in left column
- [ ] Key moments + signal chains + plugins + related in right column
- [ ] Responsive collapse to 1 column at ≤768px
- [ ] Sidebar sticky positioning at desktop widths
- [ ] `npx tsc --noEmit` passes
- [ ] `npm run build` succeeds
- [ ] All CSS uses existing custom properties (no new hardcoded colors)
  - Estimate: 45m
  - Files: frontend/src/pages/TechniquePage.tsx, frontend/src/App.css
  - Verify: cd frontend && npx tsc --noEmit && npm run build
