Grid Reveal Team Block for React

Edit PEOPLE at the top of the file. A person is a name, a role, a tenure ("Year 4": never a calendar year), a quote, two skills and an ask phrase. Eight fills two rows at four columns and four rows at two. If you change the count, keep the last row in mind: LAST_ROW_START works out where it starts so that the rule under the last row only shows when the open band sits there.

Tab moves to a cell, the arrow keys move focus between cells (they follow the page's direction, so they flip in a right-to-left layout), and Enter or Space opens that person. Each cell says whether it is open (aria-expanded) and which band it controls (aria-controls), and a polite line says whose bio is open. In reading order the band comes after the eight cells; aria-controls ties it to the cell that opens it.

The grid has no gaps, and each cell and the band sit in a grid row of their own: people in the odd rows, the band in the even row under the picked person's. Each element carries its rows for both column counts as CSS variables, so the browser places it with no measuring and no script, and an empty row collapses to nothing. COLUMNS holds the two column counts and must match the grid's classes.

Closing the band would move everything below the block, and a block that changes height on every click is hard to read. Picking another person moves the band and keeps its height about the same; keep quotes to about the same length so it does.

Each cell draws its end and bottom borders, except the last column's end (the page's rail draws that) and the last row's foot, which the next block's top rule closes. The band draws its foot too unless it is under the last row, and its top corners carry the + marks where it meets the rails.

The band fades in when it opens, a cell's tint and its bar change on hover, focus and pick, and the block fades up when the page loads. All of these are CSS and are off with reduced motion; the band still opens.