Milestone Rail Footer Block for React

Edit the MILESTONES array at the top of the file: each entry is a year string and a label, oldest first. Four fill the desktop row; with a different count, change md:grid-cols-4 on the list to match. The years are typed, not computed, so a milestone from 2019 stays 2019.

There is no script and no SVG. Each item draws its own piece of the rail: a one-pixel hairline across its width and a dot at its start, so the pieces join into one line from rail to rail. On a phone the items stack with a dot on a vertical line that runs down the start edge.

The block is a footer element, so at the end of the page it is the content-info landmark. The rail has an h2 ("Twenty years of building") and the milestones are an ordered list, each read as the year and then the line. The rail's drawing, the dots and hairlines, is hidden from assistive technology. The links sit in one nav labelled Footer.

Yes. The dots sit at the start of each item and the first milestone is at the start of the row, so the rail reads from the end side when the page flips. Each year is in a bdi.

The brand and the two link groups stack, then the rail becomes a vertical list with a line and a dot at the start of each item, then the legal band. Nothing scrolls sideways at 320 pixels.