Japanese Ma (Negative Space)

Build a personal blog home page around ma, the Japanese idea that the interval between things is part of the design. Use sumi ink on warm kinari paper, an asymmetric field where sections deliberately start on different columns, wide empty pauses between them, and a single vermilion accent used sparingly like a seal on a print.

Fix a 96px pillar (hashira) to the left edge, divided from the page by a 1px rule: a 48px vermilion square seal with `Aj` in white serif at the top, a large kanji for the page (`間`) with a vertical-rl English gloss `MA · THE INTERVAL` in spaced mono, and `Boulder, Colorado` running vertically at the foot. Beside it, the page uses a 12-column grid with a fluid gutter, max 1400px. Put a `--pause` token of `clamp(5rem, 12vw, 11rem)` of pure empty space between every section. Start content blocks on different columns (3, 5, 9) so no two sections share an axis. Below 1080px the pillar collapses into a slim top bar with the seal and a menu button.

Set headings in **Shippori Mincho**: the hero headline around 5.5rem at regular weight with the last word in vermilion. Use **Zen Kaku Gothic New** for body and UI at 17 to 18px with generous 1.8 line-height, and **IBM Plex Mono** for dates written as `2026.08.14`, eyebrows and labels in wide-tracked uppercase.

Light mode is kinari paper `#f6f1e7` with ink `#1b1a17`, muted text `#655e53`, hairlines `#cfc3ac` and vermilion `#a3382a`. Overlay a fixed washi fibre texture from an inline SVG `feTurbulence` with a stretched `baseFrequency='0.9 0.035'` at low opacity and `mix-blend-mode: multiply`. Dark mode is yoru night `#111214` with gofun shell-white text `#ede6d8`, vermilion lifted to `#e0735c`, and the fibre switched to `screen`. Use no shadows anywhere.

The hero places the eyebrow and headline from column 3 over a faint brushed enso circle (an SVG path at 10% opacity), the lede, a quiet three-stat row and three actions below, and pushes a small portrait with a mono caption low and to the right, far from the headline. Mark each following section with a vertical-rl label and a vermilion kanji numeral (`一`, `二`, `三`…) in the left margin beside a hairline. Start here is a staggered ledger: three featured pieces alternate image left and text right, then text left and image right, with a wide pause between rows. The AI and Digital Garden sections are hairline ledgers of date, title, two-line description and a quiet kind label; cards appear only as a hairline-joined tile grid for experiments, never with shadows. Set a single proverb alone in its own pause.

On load, brush the enso in with `stroke-dasharray: 1400` animating `stroke-dashoffset` to 0 over 2.4s after a 300ms delay, and let the headline, lede and stats rise 14px into place over 900ms with 120ms, 260ms and 420ms staggers. Nav links get a small vermilion dot under the current one; move it to the section in view. Resist filling the space: the pauses are the design, and adding decoration to them breaks it.

Under `prefers-reduced-motion`, skip the brush and rise so everything renders in place. At 400px wide hide the enso, stack the ledger rows with image above text, drop the column offsets to full width, keep the pauses proportionally large, and make sure nothing scrolls sideways.