/*
 * MEPCO theme — History route (page-history.php). Prototype lines 1123–1170; every value is the
 * element's inline style. Shared classes (.kicker, .kicker--dark, tokens) come from base.css.
 *
 *   .history__head       header grid: kicker + H1 | lede (auto-fit, min 400px, aligned to the bottom)
 *   .history__archive    the dark band with the archive figures (flex, wraps, centred, bottom-aligned)
 *   .history__body       timeline column (flex 999) + sticky aside (max 380px, top 96px)
 */

/* Header grid (prototype 1125–1130) */
.history__head {
	padding: 56px var(--gutter) 40px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
	gap: 24px 48px;
	align-items: end;
}
.history__heading { min-width: 0; }
.history__title {
	margin: 6px 0 0;
	font: 700 clamp(42px, 6vw, 64px)/0.98 var(--font-display);
	text-transform: uppercase;
	text-wrap: pretty;
}
.history__lede {
	margin: 0;
	color: var(--text-2);
	font-size: 17px;
	text-wrap: pretty;
}

/* Archive band (prototype 1131–1140) */
.history__archive {
	margin: 0 var(--gutter);
	background: var(--band);
	padding: clamp(24px, 4vw, 44px);
	display: flex;
	flex-wrap: wrap;
	gap: 32px 40px;
	justify-content: center;
	align-items: flex-end;
}
.history__figure {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: flex-start;
	max-width: 100%;
	min-width: 0;
}
.history__img {
	height: clamp(200px, 32vw, 380px);
	max-width: 100%;
	width: auto;
	object-fit: contain;
	display: block;
	box-shadow: 0 14px 40px rgba(0, 0, 0, .5);
}
.history__caption {
	font: 11px var(--font-mono);
	color: var(--dark-muted);
	letter-spacing: .08em;
	text-wrap: pretty;
}

/* Timeline + aside (prototype 1141–1168) */
.history__body {
	padding: 56px var(--gutter) 72px;
	display: flex;
	flex-wrap: wrap;
	gap: 40px 56px;
	align-items: flex-start;
}
.history__timeline {
	flex: 999 1 440px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}
.history__row {
	display: grid;
	grid-template-columns: minmax(90px, 120px) minmax(0, 1fr);
	gap: 24px;
	padding: 22px 0;
	border-top: 1px solid var(--line);
}
.history__year {
	font: 700 clamp(30px, 4vw, 40px)/1 var(--font-display);
	color: var(--orange-text);
}
.history__entry { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.history__entry-title {
	margin: 0;
	font: 600 22px/1.1 var(--font-display);
	text-transform: uppercase;
}
.history__entry-body { margin: 0; color: var(--text-2); text-wrap: pretty; }

.history__aside {
	flex: 1 1 300px;
	min-width: 0;
	max-width: 380px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	position: sticky;
	top: 96px;
	align-self: flex-start;
}
.history__card-kicker { margin: 0; }

/* "Three names, one line" (prototype 1152–1160) */
.history__lineage {
	background: var(--band);
	color: #fff;
	padding: 26px 28px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.history__lineage-row {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr);
	gap: 14px;
	align-items: baseline;
	padding: 10px 0;
	border-top: 1px solid var(--line-dark);
}
.history__lineage-span { font: 12px var(--font-mono); color: var(--dark-muted); }
.history__lineage-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.history__lineage-name {
	margin: 0;
	font: 600 20px/1.1 var(--font-display);
	text-transform: uppercase;
}
.history__lineage-note { font-size: 13px; color: var(--dark-text-2); text-wrap: pretty; }

/* "People of note" (prototype 1161–1165) */
.history__people {
	background: var(--panel);
	border: 1px solid var(--line);
	padding: 22px 24px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.history__people-title {
	margin: 0;
	font: 600 20px/1.1 var(--font-display);
	text-transform: uppercase;
}
.history__people-text { margin: 0; color: var(--text-2); font-size: 14px; text-wrap: pretty; }

/* Mobile: the archive aside sits in the flow (no sticky) below 900px; below 600px the year sits above
   its entry instead of beside it, so the text is not squeezed into 179px. */
@media (max-width: 899.98px) {
	.history__aside { position: static; max-width: none; }
}
@media (max-width: 599.98px) {
	.history__row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}