/**
 * Variant CSS: about--timeline-milestones
 * Layer 2 — Path B about role (2026-05-29).
 * Company story timeline: an intro block (kicker + headline + deck) above a
 * vertical rail of dated milestones. Each milestone carries a large accent YEAR
 * as the focal heritage marker, an editorial title and a short description. The
 * rail + nodes are drawn with pseudo-elements in the left gutter so the line
 * tracks variable content height exactly (no raw divs).
 * Every selector scoped to .universal-about--timeline-milestones (no global leak).
 */

body.aibt-universal .universal-about--timeline-milestones {
	background: var(--background);
	color: var(--text-primary);
	border-bottom: 1px solid var(--divider-primary);
}

/* === Intro =============================================================== */
body.aibt-universal .universal-about--timeline-milestones .universal-about__intro {
	margin-bottom: clamp(3.5rem, 7vh, 5.5rem);
}

body.aibt-universal .universal-about--timeline-milestones .universal-about__kicker {
	font-family: var(--font-body) !important;
	font-size: var(--text-xs) !important;
	font-weight: 600 !important;
	letter-spacing: var(--tracking-widest) !important;
	text-transform: uppercase !important;
	color: var(--accent) !important;
	margin: 0 0 var(--space-md) 0 !important;
}

body.aibt-universal .universal-about--timeline-milestones h2.universal-about__headline,
body.aibt-universal .universal-about--timeline-milestones .universal-about__headline {
	font-family: var(--font-display) !important;
	color: var(--text-primary) !important;
	margin: 0 0 var(--space-md) 0 !important;
}

/* Signature em-accent on the emphasised headline fragment — matches sibling
   about variants (italic-color theme treatment). */
body.aibt-universal .universal-about--timeline-milestones .universal-about__headline em {
	font-style: italic;
	color: var(--italic-color, var(--accent));
	font-weight: var(--italic-weight, inherit);
}

body.aibt-universal .universal-about--timeline-milestones .universal-about__deck {
	font-family: var(--font-body) !important;
	font-size: var(--text-lg) !important;
	line-height: var(--leading-relaxed) !important;
	color: var(--text-secondary) !important;
	margin: 0 !important;
	max-width: 56ch;
}

/* === Timeline rail ======================================================= */
/* The wrapper holds the milestones; the rail is drawn per-milestone so it
   follows the real content height of each entry. */
body.aibt-universal .universal-about--timeline-milestones .universal-about__timeline {
	display: flex !important;
	flex-direction: column !important;
	gap: 0 !important;
	max-width: 820px;
}

/* Each milestone: content indented into a gutter where the rail + node sit. */
body.aibt-universal .universal-about--timeline-milestones .universal-about__milestone {
	position: relative;
	padding: 0 0 clamp(2.5rem, 5vh, 3.75rem) 4.25rem !important;
}

body.aibt-universal .universal-about--timeline-milestones .universal-about__milestone--last {
	padding-bottom: 0 !important;
}

/* Vertical rail segment — drawn from each node downward. Uses --divider-accent
   (the strongest divider token) so the connector reads as an intentional line,
   while the solid accent node below carries the primary contrast signal. */
body.aibt-universal .universal-about--timeline-milestones .universal-about__milestone::before {
	content: "";
	position: absolute;
	left: 0.5rem;
	top: 0.6rem;
	bottom: 0;
	width: 2px;
	background: var(--divider-accent, var(--divider-primary));
}

body.aibt-universal .universal-about--timeline-milestones .universal-about__milestone--last::before {
	display: none !important;
}

/* Node marker on the rail — solid --accent ring with a section-bg core so it
   reads as a distinct heritage point. As a graphical object the solid accent
   clears 3:1 on every theme surface; the bg-colored core keeps it open, not a
   heavy blob. */
body.aibt-universal .universal-about--timeline-milestones .universal-about__milestone::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0.35rem;
	width: 1.05rem;
	height: 1.05rem;
	border-radius: 50%;
	background: var(--background);
	border: 3px solid var(--accent);
	box-sizing: border-box;
	z-index: 1;
}

/* === Milestone content =================================================== */
/* Year is the focal heritage marker: large display numerals in --accent. At
   this size (>=24px, bold) the accent clears AA's 3:1 large-text threshold on
   every theme surface; the value also reads as a date, not a link. */
body.aibt-universal .universal-about--timeline-milestones h3.universal-about__year,
body.aibt-universal .universal-about--timeline-milestones .universal-about__year {
	font-family: var(--font-display) !important;
	font-weight: 700 !important;
	font-size: var(--text-2xl) !important;
	line-height: 1 !important;
	letter-spacing: var(--tracking-normal) !important;
	color: var(--accent) !important;
	margin: 0 0 var(--space-2xs) 0 !important;
}

body.aibt-universal .universal-about--timeline-milestones h4.universal-about__milestone-title,
body.aibt-universal .universal-about--timeline-milestones .universal-about__milestone-title {
	font-family: var(--font-display) !important;
	font-weight: 600 !important;
	font-size: var(--text-xl) !important;
	line-height: 1.2 !important;
	letter-spacing: -0.015em !important;
	color: var(--text-primary) !important;
	margin: 0 0 var(--space-xs) 0 !important;
}

body.aibt-universal .universal-about--timeline-milestones .universal-about__milestone-desc {
	font-family: var(--font-body) !important;
	font-size: var(--text-base) !important;
	line-height: var(--leading-relaxed) !important;
	color: var(--text-secondary) !important;
	margin: 0 !important;
	max-width: 58ch;
}

/* === Mobile ============================================================== */
/* Timeline stays vertical (its natural axis); just tighten the gutter and the
   title size so nothing crowds the rail on phones. */
@media (max-width: 781px) {
	body.aibt-universal .universal-about--timeline-milestones .universal-about__milestone {
		padding-left: 3.25rem !important;
		padding-bottom: calc(clamp(2rem, 4.5vh, 2.75rem) * var(--density, 1)) !important;
	}
	body.aibt-universal .universal-about--timeline-milestones .universal-about__milestone-title {
		font-size: var(--text-lg) !important;
	}
}

/* Drop the wide kicker tracking on narrow phones so the uppercase label never
   strains or wraps in the constrained intro column. */
@media (max-width: 640px) {
	body.aibt-universal .universal-about--timeline-milestones .universal-about__kicker {
		letter-spacing: 0 !important;
	}
}