Eras across

Four eras side by side, each under its own 2px rule, each holding five dated lines. Twenty entries in one screen, read left to right instead of top to bottom. Core blocks only: core/group, core/columns, core/column, core/heading, core/paragraph.

The signature is that the four rules line up and read as one line across the page. Each era column opens with a 2px currentColor border-top, all four sit at the same height, and the gap between them is a clamp(1.25rem, 2.5vw, 2.5rem) gutter. What the eye takes in first is a single ruled band across the whole 1240px measure with four decades hanging off it, and only then the twenty lines underneath. A history down the page is a log: one thing, then the next thing. A history across the page is a table: four things that can be held against each other.

That is a real difference in what the section is for. Laid out across, the decades can be compared. A reader can see that the 1990s column and the 2020s column carry the same number of entries and that one of them is all machinery and the other is all people, without reading a word of either. A running log hides that, because by the time you reach the fourth era the first has scrolled away.

The scale collision is the second half of it. The decade heads clamp from 24px to 36px with -0.035em of tracking; under them the era note is 13px in capitals at 0.2em, and the twenty entries are 15px to 17px. Nothing sits between the decade and the note, and that gap is the only hierarchy in the section. There is no rail, no numeral, no plate and no hairline between entries.

1. The number of eras. Four is the composition. Three works and leaves the columns wider; five is where a column gets too narrow for a dated line at 1280. If you need six, the history wants timeline-decades and the page.
2. The five lines per era. Duplicate an entry group to add one. Keep them short: a column is about 175px at 820, so a line that reads as one sentence on a laptop is three lines on a tablet.
3. The era notes. The tracked line under each decade is optional. Delete all four and the section becomes a plain dated record; delete only some and the columns stop lining up under their rules.
4. The decade heads. Plain paragraphs, so 1990s, Years one to five or Before the fire all set without entering your page's heading outline.
5. The eras need not be equal. Nothing forces five entries a column. Four under one decade and six under another is a truer record, and the top-aligned columns are built for it.

• The typeface. No font family is stated. The decade heads carry -0.035em of tracking and the era notes 0.2em, and that pairing is what carries the record feeling in a serif theme and in a sans one.
• Your colours. base for the ground, contrast for the type, both chains ending on a colour WordPress guarantees. All four era rules are currentColor, so they are the colour of the text beside them and cannot resolve to nothing.
• Your spacing scale. The space under each decade head, the space above the entries and the vertical gap between the stacked columns on a phone are all spacing presets.

• Full bleed with a 1240px measure.
• Four equal columns. No width is stated on any of them, so core divides the row evenly. Four is what makes the band read as one ruled line with four things hanging from it: three leaves a gap where a fourth should be, five drops the column under 215px at 1280 and the entries start laddering.
• A 2px era rule, not a hairline. It is the only structural mark in the pattern and it has to carry a column of five entries, so it is the one place the section states a weight. It is still currentColor.
• The columns are top-aligned, not stretched, so the four rules and the four decades sit on the same line whatever the eras below them weigh. An era with four entries and an era with six still open together.
• The entry rhythm. A spacing-30 gap between entries, and 0.2rem between a year and its line, so the year reads as a label on the line under it rather than as an entry of its own.
• The decade heads are paragraphs, not headings. Twenty dated lines under four h3 elements would put a decade into your page's document outline for every five facts. The section's own h2 is the only heading in the pattern.

Off the theme's ladder on purpose, because the size is the composition:

• paragraph at clamp(1.5rem, 2.4vw, 2.25rem)

Four columns of five lines is a narrow measure. Inside a 1240px band with the gutter, a column is about 270px at 1280 and about 175px at 820, so the entry lines wrap to two or three lines each rather than sitting as the single lines they are in a full-width record. That is the trade: the whole history is visible at once, and each entry is read in a column rather than in a sentence. Write them shorter than you would for a record that runs the page.

Below 782px the four columns stack. Core sets flex-basis: 100% on a column and this pattern does not override it, so on a phone the eras arrive in the same chronological order they read in across a laptop: 1990s, 2000s, 2010s, 2020s, each still under its own rule, each still holding its five lines. The comparison is gone, the record is not.

timeline-decades is this same record run down the page: four eras as full bands one after another, twenty entries that each sit on one line at a 46rem measure with the year beside the line rather than above it. Take that one where the history is read, and this one where it is compared.

timeline-rail is six open milestones on a continuous vertical hairline with a sentence each: it asks "what were the moments" where this one asks "what has the whole of it looked like". Neither is steps. Nothing here is numbered and nothing is a stage; the reader is looking back at a record, not standing inside a process.

• Core blocks only. No plugin, no script, no separator: the era rules are group borders, which cannot be narrowed to a centred stub the way a plain core/separator is in Twenty Twenty-Four.
• Every colour is a fallback chain ending on a guaranteed colour, and every rule is currentColor.
• Grid layout on core/group was deliberately not used: this catalogue's floor is WordPress 6.6 and one core/columns row is the shape that is certain there.