Glass Bento Morph

Build a personal home page as one bento board of frosted glass tiles, with the navigation itself made of tiles. Every piece of the page (headline, portrait, stats, location, featured posts, writing lists, projects, contact) is a tile on the same grid, photo tiles are filled edge to edge with their image, and a single lit slab in the nav marks where you are. Large images do the heavy lifting; the glass frames them.

Make the board a grid of `repeat(6, minmax(0, 1fr))` with 16px gaps and `grid-auto-rows: minmax(150px, auto)`, inside a 1280px wrap, and place tiles with named template areas so the layout reads as a deliberate composition, not a masonry pour. The first rows are `"hero hero hero hero photo photo" "hero hero hero hero photo photo" "s1 s2 s3 loc photo photo"`, followed by a four-wide featured image tile beside a two-wide AI writing tile, two more image tiles beside a writing tile, a Digital Garden list beside pattern and story tiles, a projects tile with four small experiment tiles beside a tall dark work-with-me tile, and a last row of a project list and a connect list. Every tile has a 28px radius, `clamp(20px, 2.2vw, 30px)` padding, and clips its contents.

Use Geist at an 18px base for body and UI, Instrument Serif italic for one accent word per headline, and Geist Mono for eyebrows, labels and dates. The headline tile sets the headline at `clamp(2.8rem, 5.8vw, 5.4rem)` with -0.045em tracking, 0.98 line height and a 14ch measure, spaced away from the lede and buttons at the bottom of the tile. The ground is `#e6ecf6` in light and `#060a13` in dark with ink `#0c1626` and `#eef3fb`. Behind the board, drift four blurred blobs whose hues come from the portrait's palette, clamped to 64 to 80% lightness in light and 20 to 32% in dark so ink over glass always clears AA. Glass is `rgba(255,255,255,.60)` in light and `rgba(16,24,40,.56)` in dark with `backdrop-filter: blur(18px) saturate(170%)`, a rim highlight, a soft long shadow and a pointer-following specular, with a strong variant for text tiles and a dark smoke variant for the work-with-me tile. Buttons and the lit elements use the brand slate `#364f6a`. Provide a light/dark toggle that honours the system preference.

Photo tiles have 8px of padding and a minimum height of 260px; the image fills an inset 8px layer with a radius 8px smaller than the tile and scales to 1.04 on hover, and the text sits at the bottom on a strong glass lens with its own radius. On hover or focus, a photo tile's lens and a text tile's glass tint 24% toward the most vivid colour in that tile's own image. Of the three stat tiles, make the first one lit (the brand slate fill with white text) and the other two plain glass; the location tile carries a thin mountain-ridge line drawing under a `Based in` eyebrow. Link tiles lift 3px on hover over 200ms.

Build the nav as a tray fixed 12px from the top, up to 1180px wide, a glass strip with 8px padding and a 26px radius holding tiles: a brand tile with the logomark, six icon-plus-label nav tiles at least 56px tall with an 18px radius and a chip fill, and icon-only tool tiles for search and theme. The current tile holds the lit slab, an absolutely positioned span filling the tile in the brand slate with an inset top highlight and a soft drop shadow, behind the tile's icon and label, which turn white. When a different part of the board scrolls into the middle of the viewport, move the slab into that tile and animate it from its old box with a FLIP transform over 520ms on `cubic-bezier(.34, 1.35, .5, 1)` so it overshoots slightly. Keep exactly one slab; it should feel like a physical piece sliding along the tray.

Don't let tiles drift to random sizes; the grid areas are the design, and every tile edge should land on the same columns and rows. Below 1100px rebuild the board as four columns with its own template areas (hero across the top, the portrait as a 2 by 2 block beside the stats), and collapse the tray to the logo, a "You are in" lit tile showing the current section, the theme button and a menu button that opens a 3 by 2 board of nav tiles. Below 680px drop the template areas, let tiles span both of two columns except the stat and location tiles, which pair up, and give the portrait 440px of height. With `prefers-reduced-motion` the slab jumps without gliding and the drift stops; with `prefers-reduced-transparency` tiles go near-solid.