/* Main Street Timeline — front-end styles
 * Palette pulled from the reference design:
 *   cream #FAF8F2 · ink #1C2437 · navy #1F3A7A · gold #B08D3E · body gray #4B5563
 */

.mst {
	--mst-cream: #faf8f2;
	--mst-ink: #1c2437;
	--mst-navy: #1f3a7a;
	--mst-gold: #b08d3e;
	--mst-line: #e4dbc8;
	--mst-body: #4b5563;
	--mst-muted: #6b7280;
	--mst-serif: "Playfair Display", Georgia, "Times New Roman", serif;
	--mst-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	background: var(--mst-cream);
	padding: 4rem 1.5rem 5rem;
	font-family: var(--mst-sans);
	color: var(--mst-body);
	box-sizing: border-box;
}

.mst *,
.mst *::before,
.mst *::after {
	box-sizing: inherit;
}

/* ------------------------------------------------------------------
 * Header
 * ---------------------------------------------------------------- */

.mst__header {
	max-width: 46rem;
	margin: 0 auto 3.5rem;
	text-align: center;
}

.mst__eyebrow {
	margin: 0 0 0.75rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--mst-navy);
}

.mst__heading {
	margin: 0 0 0.75rem;
	font-family: var(--mst-serif);
	font-weight: 800;
	font-size: clamp(1.9rem, 4.5vw, 3rem);
	line-height: 1.15;
	color: var(--mst-ink);
}

.mst__subheading {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--mst-muted);
}

/* ------------------------------------------------------------------
 * Shared milestone pieces
 * ---------------------------------------------------------------- */

.mst ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mst__label {
	margin: 0 0 0.5rem;
	font-family: var(--mst-serif);
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 1.2;
	color: var(--mst-navy);
}

.mst__text {
	margin: 0;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--mst-body);
}

/* Gold ring marker: outer ring + inner dot on a cream "hole" */
.mst__marker {
	display: block;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2.5px solid var(--mst-gold);
	background: var(--mst-cream);
	position: relative;
}

.mst__marker::after {
	content: "";
	position: absolute;
	inset: 3.5px;
	border-radius: 50%;
	background: var(--mst-gold);
}

/* ==================================================================
 * VERTICAL — alternating sides around a center spine
 * ================================================================== */

.mst--vertical .mst__spine {
	position: relative;
	max-width: 66rem;
	margin: 0 auto;
}

/* Center line */
.mst--vertical .mst__spine::before {
	content: "";
	position: absolute;
	top: 10px;
	bottom: 10px;
	left: 50%;
	width: 2px;
	transform: translateX(-50%);
	background: var(--mst-line);
}

.mst--vertical .mst__item {
	position: relative;
	width: 50%;
	padding-bottom: 3.25rem;
}

.mst--vertical .mst__item:last-child {
	padding-bottom: 0;
}

.mst--vertical .mst__marker {
	position: absolute;
	top: 6px;
	z-index: 1;
}

/* Left-side items: text right-aligned, marker on the spine to the right */
.mst--vertical .mst__item--left {
	margin-right: auto;
	padding-right: 3.25rem;
	text-align: right;
}

.mst--vertical .mst__item--left .mst__marker {
	right: -9px;
}

/* Right-side items: pushed past center, marker on the spine to the left */
.mst--vertical .mst__item--right {
	margin-left: auto;
	padding-left: 3.25rem;
	text-align: left;
}

.mst--vertical .mst__item--right .mst__marker {
	left: -9px;
}

/* Mobile: single column, spine on the left */
@media (max-width: 640px) {
	.mst--vertical .mst__spine::before {
		left: 9px;
		transform: none;
	}

	.mst--vertical .mst__item,
	.mst--vertical .mst__item--left,
	.mst--vertical .mst__item--right {
		width: 100%;
		margin: 0;
		padding: 0 0 2.5rem 2.75rem;
		text-align: left;
	}

	.mst--vertical .mst__item--left .mst__marker,
	.mst--vertical .mst__item--right .mst__marker {
		left: 0;
		right: auto;
	}
}

/* ==================================================================
 * HORIZONTAL — scrolling row under a top rule
 * ================================================================== */

.mst--horizontal .mst__track {
	max-width: 72rem;
	margin: 0 auto;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: var(--mst-gold) transparent;
	padding-bottom: 1rem;
	outline: none;
}

.mst--horizontal .mst__track:focus-visible {
	outline: 2px solid var(--mst-navy);
	outline-offset: 4px;
}

.mst--horizontal .mst__row {
	display: flex;
	position: relative;
	padding-top: 9px; /* room for markers to sit on the line */
}

/* Horizontal line running behind the markers */
.mst--horizontal .mst__row::before {
	content: "";
	position: absolute;
	top: 17px;
	left: 10px;
	right: 10px;
	height: 2px;
	background: var(--mst-line);
}

.mst--horizontal .mst__item {
	position: relative;
	flex: 0 0 clamp(240px, 28vw, 320px);
	padding: 0 1.75rem 0 0.25rem;
}

.mst--horizontal .mst__marker {
	position: relative;
	z-index: 1;
	margin-bottom: 1.25rem;
}

/* Stack into a simple column on small screens */
@media (max-width: 640px) {
	.mst--horizontal .mst__track {
		overflow: visible;
	}

	.mst--horizontal .mst__row {
		display: block;
		padding-top: 0;
	}

	.mst--horizontal .mst__row::before {
		top: 10px;
		bottom: 10px;
		left: 9px;
		right: auto;
		width: 2px;
		height: auto;
	}

	.mst--horizontal .mst__item {
		padding: 0 0 2.5rem 2.75rem;
	}

	.mst--horizontal .mst__item:last-child {
		padding-bottom: 0;
	}

	.mst--horizontal .mst__marker {
		position: absolute;
		left: 0;
		top: 4px;
		margin: 0;
	}
}

/* Respect reduced motion (smooth scrolling off by default anyway) */
@media (prefers-reduced-motion: no-preference) {
	.mst--horizontal .mst__track {
		scroll-behavior: smooth;
	}
}