Design: typographic structural treatment for the three practices on Approach page

[simonives]

Problem

The three practices on the Approach page (Socratic, Utilitarian, Polyrhythm) are currently presented as flowing prose. This is appropriate to the writing register but the abstract nature of the three concepts means readers do not naturally absorb their distinctness or their relationship to each other.

A diagram would be the conventional solution but is explicitly wrong here — it would tip the page toward consulting-firm visual language (BCG, McKinsey, KPMG, PwC). The site's intellectual seriousness demands a different approach.

Solution

An editorial-typographic structural treatment using the existing brand system:

• Each of the three practices presented as a distinct section with strong visual weight
• Large display numerals (Cormorant Garamond, Aurum var(--color-aurum)) as structural markers — the number itself becomes the visual anchor, not a box or icon
• The practice name as a prominent heading below the numeral
• Body text in the normal prose style below
• Generous vertical whitespace between practices to give each breathing room
• No boxes, no arrows, no icons — the structure comes from typography and space

The feel should be closer to a serious literary magazine or a well-designed essay collection than a slide deck. Innovative in that it uses the brand's own elements (the Aurum numerals against Parchment or Midnight) to create structure rather than importing any external visual convention.

Acceptance criteria

• Three practices are visually distinct and immediately scannable
• The treatment reads as editorial and intellectually serious — not corporate
• Works in both light and dark mode with appropriate contrast
• Responsive — the treatment scales gracefully from mobile to large desktop
• Does not conflict with existing CSS variables or typography rules in CLAUDE.md
• Relates coherently to issue The Phi Mark (Φ) Usage #39 (Φ mark usage) — the Φ symbol may play a structural role here

Note

This issue may relate to or partially supersede #39 (The Phi Mark usage). Review both together when implementing.