How it behaves
Exactly what the prompt builds — every timing and easing is specified, so the result matches the demo.
- Layout: a two column grid, 541px 1fr, 115px apart, content min(1344px, 100% - 2 × gutter) wide (gutter 48px, 16px on phones).
- Title: display font, 88px, line-height 0.86, uppercase, -2.2px tracking. It sticks 158px from the top of the viewport while the list scrolls past.
- Title blur-in: once 35% of the title is on screen (or it has been scrolled past), each letter goes from opacity 0 and 10px blur to sharp over 0.8s, 30ms apart.
- Rows: each question is a full-width button (16px uppercase, 24px padding top and bottom) with a 24px chevron on the right and a hairline under the row. Hover turns it the accent color.
- Opening: the answer wrapper animates grid-template-rows from 0fr to 1fr over 420ms cubic-bezier(0.4, 0, 0.2, 1) while fading in over 300ms, so any answer length opens at its natural height. The chevron flips 180°. Only one answer is open at a time, the first one starts open, and clicking an open question closes it.
- Answers: 560px max width, light weight, line-height 1.5, 28px padding below.
- Accessibility: each button has aria-expanded and aria-controls pointing at its answer.
- Under 1200px: one column with the title above the list (56px apart), not sticky.
- Under 768px: 30px title (line-height 1.02, -0.6px tracking), 24px gap, rows at 14px with 16px padding.
- Fallbacks: reduced motion and no JavaScript show the title sharp straight away. Without JavaScript the first answer stays open.