# Grid-rows FAQ accordion > **Build brief for a coding agent.** Rebuild this piece in the reader's stack. If they haven't said which stack, ask once, then default to semantic HTML + CSS + a little vanilla JS. Match the numbers below; don't "improve" them. ## What it is A help-page FAQ for a soil subscription product. Six questions set in Newsreader at 22px sit on hairline rules over a warm paper background; the answer panels animate height with `grid-template-rows: 0fr → 1fr` so no JS ever measures `scrollHeight`. Only one answer is open at a time, the chevron rotates 180° on the same 320ms clock, and Up/Down/Home/End move focus between questions like a proper disclosure group. The detail worth copying is the height animation: pure CSS, content-agnostic, and it works with `prefers-reduced-motion` by collapsing to 1ms. ## Reference behaviour 1. Initial state: left column (400px) with kicker "Loam · Help", a 44px serif heading and a short paragraph; right column lists six numbered questions. Question 01 is open, its chevron pointing up and its text in `--accent`. 2. Hover a closed question: its text turns `--accent` over 160ms. No background change, no movement. 3. Click question 03: question 01's panel collapses (`1fr → 0fr`, 320ms) while 03's expands on the same clock; 01's chevron rotates back to 0°, 03's rotates to 180°. The answer text inside 03 fades in and slides up 4px over the same 320ms. 4. `aria-expanded` is `true` on exactly one button, or none. 5. Click the open question again: it collapses; nothing is open. 6. With focus on any question: ArrowDown moves focus to the next question (wrapping from 06 to 01), ArrowUp to the previous (wrapping), Home to 01, End to 06. Moving focus does not open anything; Enter/Space toggles the focused question. 7. Focus-visible on a question shows a 2px `--accent` outline inset 2px, rounded 6px. 8. Some answers end with a small pill tag ("Sizing", "Delivery", "Coverage") in `--accent` on `--accent-soft`. ## Structure ``` 1280 × 800 ┌──────────────────────┬───────────────────────────────────────────────┐ │ 400 │ 6 QUESTIONS Use ↑ ↓ Home End … │ │ LOAM · HELP │ ─────────────────────────────────────── strong │ │ Questions people │ 01 How much soil does one bag… ⌃ │ │ ask before they │ One 40-litre bag fills a 60 × 40 … │ │ plant. │ [Sizing] │ │ │ ─────────────────────────────────────── line │ │ Short answers … │ 02 When do deliveries go out… ⌄ │ │ │ ─────────────────────────────────────── line │ │ │ 03 What is in the mix? ⌄ │ │ │ ─────────────────────────────────────── │ │ ───────────── │ 04 A bag arrived torn. What now? ⌄ │ │ Still stuck? … │ 05 … 06 … │ └──────────────────────┴───────────────────────────────────────────────┘ aside 64px/48px padding main 64px top, 72px right, 64px left ``` - `