Three browser teams now coach the agent writing your CSS

Build a nonprofit campaign landing page for an open-source project as plain HTML and CSS, with a tiny inline script only for a compare slider, a reading meter and a copy button.

Structure:
1. A vertical spine masthead fixed to the left edge, 84px wide, on a darker band of the ground: the issue or campaign number, the organisation name set vertically in the display face, the date and read time, and a thin vertical reading meter with one notch per section. The notches are real anchor links and light up as their section is reached; the meter fills as the reader scrolls. Under 820px the spine becomes a sticky strip across the top with a horizontal meter.
2. Hero: a solid label naming the campaign, a heavy serif headline no wider than 15 characters per line, a one or two sentence appeal, one filled button and one text link.
3. A full-width before and after figure: two images stacked in one grid cell, the second clipped with clip-path inset driven by a native range input. Label each state on the image edge with the figure that changed. Without script, show the two images side by side.
4. Sections opened by milestone markers: a solid label reading "Milestone 2 of 7" beside a seven-segment bar with the finished segments filled. No numbered circles, no section symbols.
5. An impact report as a ruled ledger: one large figure per row, a plain sentence, and its source. Say plainly when a figure is reported by the organisation itself.
6. Program areas as a two by two ruled grid, each area a short numbered list that continues its numbering across areas.
7. A pledge card for the main call to action: cream card, a blue header band holding the title and one copy button, the steps below.
8. Close with a short note beside a ruled source list, then previous and next tiles.

Visual system:
Ground: warm oxblood #2A1517 with a halftone field in rose clay #D9A493 at 14 percent opacity, dots large at the top of the page and shrinking to nothing by the first section. Cards: cream #FAF5EC with ink #22140F. Accent: cyanotype blue #2456A6 on cream; sun blue #9DBBEA for marks and links on the dark ground; rose clay for labels on dark.
Type: one superfamily. Merriweather at 900 weight and its narrowest width for display, its italic for a single pullquote; Merriweather Sans for body and interface; IBM Plex Mono only for commands and code.
Images: cyanotype photograms, pale silhouettes on Prussian blue with a cream paper border, the same treatment on every image, no legible text in any image.

Guardrails: body text at least 19px with line-height 1.7 and lines of 60 to 75 characters; every label meets WCAG AA against the surface it actually sits on; no neon, no glow, no gradient text, no purple-blue gradients; card radius 12px at most and small labels 4px; hover and focus states eased over about 150ms; one signature motion only (the meter fill), and a prefers-reduced-motion block that removes transitions.