Layered Depth / Parallax

Build a personal blog home page where scrolling is a descent. Each section is a plane one level deeper than the last on a slowly darkening ground, every surface floats above it as a thick slab with a visible ledge, and the hero is a pointer-driven diorama of mountain ridgelines. The two things that sell it are the solid offset ledge under every slab and the ground color stepping darker per plane; keep everything else restrained.

Use a wrap of about 1200px. Give each section a `--zi` index (0, 1, 2…) and set its background to `color-mix(in oklab, var(--ground-top), var(--ground-deep) calc(var(--zi) * 14%))`, with `inset 0 18px 24px -18px` shadow at each seam and vertical padding of `clamp(56px, 8vw, 104px)`. Label each section with a small ember mono tag such as `z −2 · AI` above its heading. Under the hero, run a three-column Start-here row of numbered slab cards, a large AI feature slab beside two horizontal slabs and a row of three below, a Digital Garden list whose rows step further right one by one like stairs, four experiment slabs with filled icon squares, and open-source rows that alternate a tilted screenshot slab left and right.

Set display type in **Bricolage Grotesque** at 800 weight with tight tracking, the hero headline near 4.5rem with its last line in ember. Use **Public Sans** for body at 17 to 18px and **JetBrains Mono** at 13px minimum for depth labels, dates and stat captions.

The light ground runs from `#f7f9fc` at the top to `#c3cfdc` deep, slabs are white, ink is `#0f1a26`, the brand slate is `#364f6a` and one warm ember `#b2441a` marks the nearest layer. Every slab gets `box-shadow: 0 6px 0 var(--edge)` (a solid ledge in a darker ground tone) under a four-layer tinted soft shadow and a 1px top rim. Dark mode follows elevation-as-lightness: the ground goes to near-black `#04070b`, surfaces get lighter as they come forward (`#121b27`, `#1b2635`), and ember lifts to `#ff9467`.

The menu bar is a white slab with its own ledge, sticky at the top: a three-square stacked `AJ` monogram, then links styled as raised keys where the current one is a filled slate key lifted 2px over a 3px darker ledge, then a **Depth** toggle (parallax and tilt on or off) and a theme button. Move the filled key to the link for the section in view. On wide screens a vertical column of small diamonds on the right edge acts as a section gauge; the current plane's diamond fills.

The hero is a stage with `perspective: 1400px`: a perspective grid floor rotated `rotateX(70deg)`, a huge outlined `AJ` ghost word, and three SVG Flatirons ridgelines in progressively darker slate across the bottom. Each layer has its own `--pd` pointer depth and `--sd` scroll depth and moves with `translate3d` from the pointer position and scroll offset, so near ridges travel further than far ones. The portrait is an exploded stack of three frames, an ember back plate, a dashed mid outline and the photo, rotated about `rotateY(-16deg)` and following the pointer by a few degrees. Stats are small raised slabs.

Cards tilt up to 4 degrees toward the pointer through `--rx` and `--ry` with `perspective(1000px)`, and lift 6px on hover; buttons press down onto their ledge when clicked. Do not combine tilt with scroll animation on cards, and never tilt for touch pointers. When the Depth toggle is off or `prefers-reduced-motion` is set, freeze the parallax and tilt and leave the static layering. At 400px wide the portrait stack moves above the headline, the stats wrap two per row, every grid is one column, and nothing scrolls sideways.