Timeline rail

The signature is that the hairline starts above the first year and carries on below the last entry. The first entry's copy group takes a spacing-70 top padding and the last one takes a spacing-70 bottom padding, so the rule exists for a stretch where there is nothing beside it at either end. A history that begins exactly at its first entry and stops exactly at its last one reads as a closed list of six things. This one reads as a length cut out of something longer, which is what a company history actually is, and the last entry says so in as many words.

The rail is a structural mark carrying the whole composition, so it is currentColor and never an accent: it cannot resolve to nothing, it follows your text colour, and it inverts with the section if you recolour it.

How the rail is built, and why it is unbroken

There is no separator block and no rail element. Each entry is a two-column row whose right column holds a group with a border-left, and consecutive entries carry no gap between them, so those borders touch and form one line. The entries' own top and bottom padding is what spaces the content, not the gap between rows. That is why the rule is continuous rather than a stack of six dashes, and it is also why adding an entry cannot break it.

The columns do not stack. isStackedOnMobile: false keeps the year beside its entry at 390, which is the measured way to beat core's flex-basis: 100% !important rule. If the row stacked, the year would drop above the copy and the rail would break into six pieces at exactly the width where a timeline most wants to be one line. The year column is 16%, which is about 56px at 390 and holds a four-digit year at the clamp() floor with room to spare.