Bento Grid

`<pura-bento>` lays its children out as a bento grid: a dense CSS grid where each cell declares its own footprint with `col-span` and `row-span` attributes, so one or two hero cells can dominate while smaller ones fill the gaps (`grid-auto-flow: dense` closes holes automatically). Cells enter with a staggered fade and rise whose delay is a pure function of their `:nth-child` index, and lift with a border and shadow highlight on hover. Everything is plain CSS so the layout, spans and entrance work pre-JS and under SSR; reduced motion paints the final state immediately. Cells get a quiet default card chrome (background, border, radius, padding) themeable via `--pura-bento-*` tokens, and below 640px the grid collapses to a single column. Each instance registers in `window.__puraBentos` by `data-pura-id` with `{ cols, cells }`.

Preview

<!-- feature grid: hero cell spans 2x2, the rest auto-fill densely -->
<pura-bento cols="3">
  <div col-span="2" row-span="2"><h3>Analytics</h3><p>Realtime dashboards.</p></div>
  <div><h3>Alerts</h3></div>
  <div><h3>Exports</h3></div>
  <div col-span="2"><h3>Integrations</h3></div>
</pura-bento>

<!-- 4 columns, slower stagger, no hover lift, custom look -->
<pura-bento cols="4" stagger="120" duration="800" no-hover
  style="--pura-bento-gap: 0.75rem; --pura-bento-radius: 1.25rem; --pura-bento-row: 10rem;">
  <div col-span="2">Wide</div>
  <div row-span="2">Tall</div>
  <div>Small</div>
  <div>Small</div>
  <div col-span="3">Footer band</div>
</pura-bento>

<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/bento.js"></script>

import "./pura/lib/bento.js";