Hover Card Mosaic Team Block for React

Edit PLANNERS at the top of the file. A planner is a name, a role, a bio, a city, the years at the studio and a tile: lead, wide or small. The grid has four columns from md, and the shapes together (lead 2x2, two wide, three small and the "+12" cell) fill three rows exactly; TILES holds each shape's span and layout. MORE is the number in the last cell, so keep it in step with your real headcount.

Each person's cell is the card's trigger and a real link. Hovering it or focusing it with the keyboard opens the card, and Escape closes it. The name and role are always inside the cell, so the card adds the bio, the city and the years rather than the only copy of anything; point the links at each person's profile page. The trigger renders the link itself, with closeDelay and delay on it.

The cells are built to look finished without them: initials in greyscale tones, a faint plan grid behind the lead and the lines of the mosaic itself. To use photos, put an AvatarImage in each Avatar, before the fallback; keep them square, and greyscale if you want the mosaic as calm as it is now.

The grid has a one-pixel gap on a border-coloured background and every cell is a background-coloured box, so the gaps show as the hairlines whatever a cell's span. The rails and the top rule come from the page's spine and Guides; the mosaic draws no rule at its foot, because the next block's top rule closes it.

Below md the grid has two columns: the lead and the wide cells span both, and the small cells and the "+12" cell pair up, so every row is full. Names and roles stay in the cells, so a phone loses nothing the card says apart from the bio, which a tap on the link takes you to. Nothing scrolls sideways at 320 pixels.

The header and the mosaic fade up once when the page loads, a cell tints on hover and focus, and the "+12" arrow nudges. All of these are CSS transitions, off with reduced motion. The hover card opens with its own transition, which the page's reduced-motion setting also shortens.