/* Timeline — narrative steps connected by a vertical rail (inc/timeline-render.php). The marker is a
   Londrina chip on the rail; title in the voice face, text in structure. Tokens only. */

.tmk-timeline{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-7);position:relative}
.tmk-timeline__step{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-5);align-items:start}

/* The rail — a 2px line behind the markers, drawn between step centres. */
.tmk-timeline__step::before{
	content:"";position:absolute;left:calc(var(--tmk-timeline-marker,44px) / 2 - 1px);top:var(--tmk-timeline-marker,44px);
	width:2px;height:calc(100% + var(--space-7));background:var(--color-border-default);
}
.tmk-timeline__step:last-child::before{display:none}

.tmk-timeline__marker{
	--tmk-timeline-marker:44px;
	position:relative;z-index:1;
	width:44px;height:44px;border-radius:var(--radius-pill);
	display:grid;place-items:center;
	background:var(--color-action-primary);color:var(--color-action-on-primary);
	font-family:var(--font-voice);font-weight:var(--weight-voice);font-size:var(--text-body);line-height:1;
}
.tmk-timeline__title{margin:var(--space-1) 0 var(--space-2);font-family:var(--font-voice);font-weight:var(--weight-voice);font-size:var(--text-h2);line-height:1.02;color:var(--color-text-primary)}
.tmk-timeline__text{margin:0;font-family:var(--font-structure);font-size:var(--text-lead);line-height:var(--leading-prose);color:var(--color-text-primary);text-wrap:pretty}