/* Both .page-sub-title blocks here open a subject unrelated to the one above: the intro gives way to the history, the history to the closing call to action.
   Their own 2 * --padd is the margin for blocks inside one argument, and it left the closing heading sitting against the last timeline entry — which carries no padding of its own to help. */
.page-sub-title {
	margin-top: var(--space-section);
}

/* The rail is drawn once on the list, not per entry: drawn per entry it restarts at every item and leaves a visible seam wherever two of them meet.
   It stops short of the first and last dot, because a line running past them reads as a list that continues off the page. */
.timeline {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;

	&:before {
		content: '';
		position: absolute;
		left: 8rem;
		top: .65rem;
		bottom: .65rem;
		width: 1px;
		background-color: var(--border-color);
	}

	li {
		display: grid;
		grid-template-columns: 7rem 1fr;
		column-gap: 2rem;
		position: relative;
		padding-bottom: calc(var(--padd) * 1.6);

		&:last-child {
			padding-bottom: 0;
		}

		/* Centred on the rail above: 7rem column + half of the 2rem gap, less half the dot. */
		&:before {
			content: '';
			position: absolute;
			left: calc(8rem - 4px);
			top: .5rem;
			width: 9px;
			height: 9px;
			border-radius: var(--radius-full);
			background-color: var(--primary-color);
		}
	}

	.timeline-year {
		text-align: right;
		color: var(--text-secondary);
		font-weight: 500;
		font-size: .9375rem;
		padding-top: .2rem;
	}

	/* Smaller than the site h3.
	   A stack of these at display size reads as a run of headings competing with the page title, rather than as one list. */
	h3 {
		font-size: 1.0625rem;
		font-weight: 500;
		margin-bottom: .15rem;
	}

	p {
		margin: 0;
		color: var(--text-secondary);
	}
}

/* Under 576px the container itself drops below 540px, and a 9rem year column takes more width than it earns.
   The year moves above its entry and the rail moves to the left edge. */
@media (max-width: 575px) {
	.timeline {
		&:before {
			left: 4px;
		}

		li {
			grid-template-columns: 1fr;
			padding-left: 1.75rem;

			&:before {
				left: 0;
			}
		}

		.timeline-year {
			text-align: left;
			padding-top: 0;
		}
	}
}