How it's made
Everything on that page
can be audited.
Concept
MERIDIAN is a love letter to the Swiss International Style — Müller-Brockmann, air, order — built on the wager that type alone can carry a whole site. One family, Inter Tight, does every job from the 300-weight cover statement to the 900-weight numeral cropped at the viewport edge; hierarchy is weight and scale, never ornament. Spectral appears exactly once, italic, for the pull quote — a single planned transgression, which is the most Swiss thing about it.
The grid that tells the truth
The GRID button (or the G key) is the signature. Most “grid overlays” are decorative approximations; this one cannot lie, because the overlay and the layout share the same construction — one .wrap container, one display:grid with repeat(var(--cols),1fr) and the same gutter token. Twelve JS-built cells get red hairline borders and tiny indices; a repeating-linear-gradient adds the 28-pixel baseline rows. If a paragraph misses a column, the overlay shows the crime. Toggling it is choreographed: each column draws top-down on a 35 ms stagger (scaleY with a snap bézier), the baselines develop after, and a spec chip states what you're looking at. Below 760px the layout drops to six columns and the overlay drops with it, via the same --cols custom property.
The arc plate
Plate 04 rebuilds the logic of the 1955 beethoven poster in generated SVG: seven <circle> elements whose band widths roughly double (4, 7, 11, 18, 29, 47, 76), turned into arcs with stroke-dasharray computed from each circumference. A single requestAnimationFrame loop rotates each band at 0.2–0.9 degrees per second — slow enough to feel geological — while the whole system lerps toward a ±5° deflection driven by scroll position. Under a fine pointer the plate becomes an instrument: pointermove mapped through the viewBox drives red crosshairs, a registration ring, and a readout in millimetres of the printed page. The same loop runs the red progress rule, the right-edge ruler readout, the cover numeral's counter-drift, and the red plate that hunts around register behind the ink “04” — two beat-frequency sines that let it slip a few pixels and pull back in, a press that never quite settles. Every moving part shares one clock. It pauses on document.hidden and never starts under prefers-reduced-motion, where the plate simply holds still, as ink would.
Type as arithmetic
Everything vertical is a multiple of --bl: 28px: body text sits at 17/28, rules and paddings are computed with calc(), and the drop cap is floated at exactly three baselines. Display sizes use clamp() with viewport terms so the spreads recompose rather than shrink. Texture is one inline SVG feTurbulence tile at 5% opacity — paper, not pixels.
Passes
The site is built in passes, each a fresh audit of screenshots at 1440×900 and 390×844, read like proofs off a press. The first passes fixed art direction: the crop of the numeral, the rag of the dek, an ornamental italic the essay itself argues against. The motion pass added the choreography — the misregistering red plate, the grid cascade, the pull quote setting itself word by word, the essay arriving paragraph by paragraph like a galley. The final pass was the finishing audit: a caption that measured 2.97:1 against the paper was reseated at 4.75:1, each essay paragraph got its own IntersectionObserver entry so nothing animates below the fold, a skip link and aria-keyshortcuts joined the instruments, and a <noscript> rule guarantees the issue reads perfectly with the presses stopped. Everything eased on two custom béziers, everything off under prefers-reduced-motion. What the audit caught, the stylesheet corrected — which is, of course, the entire argument of the issue.