/*
 * Our History (page-history.php) — 2026-10 timeline-first rebuild.
 *
 * Enqueued by inc/cm-pages.php on the history template only. cosmick-2026.css
 * and cm-interior.css are hard-coded <link>s that print AFTER this file, so
 * any rule that overlaps one of theirs wins on SPECIFICITY (every overlapping
 * rule here is scoped under `body.page-template-page-history`), never on order
 * and never with !important. Everything prefixed .cm-hx- is owned by this sheet.
 *
 * Contrast notes (WCAG AA): coral --cm26-brand (#ff675b) is used only for
 * decoration (spine, nodes, wedges, rules). Text accents use --cm26-brand-ink
 * (#b8352b) or --cm26-brand-deep (#8f1d15) on light grounds and
 * --cm26-dark-link (#ff9a90) on charcoal.
 */

/* ---------------------------------------------------------------------------
   Sticky needs a non-scrolling ancestor chain. style.css sets
   `html, body { overflow-x: hidden }` and the legacy theme sets
   `section { overflow-x: hidden }`; both turn the element into a scroll
   container, which pins `position: sticky` to it instead of the viewport.
   `clip` keeps the clipping without a scroll container (same fix as contact).
   --------------------------------------------------------------------------- */

body.page-template-page-history { overflow-x: clip; overflow-y: visible; }

body.page-template-page-history .cm-hx > section { overflow-x: clip; overflow-y: visible; }

/* (0,2,0): beats style.css's bare `ol, ul`; every list below that sets its
   own margin uses a longer selector. */
.cm-hx :where(ol, ul)[class^="cm-hx-"] {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Zero specificity, so every .cm-hx-* item rule below can set its own box. */
:where(.cm-hx :is(ol, ul)[class^="cm-hx-"] > li) { margin: 0; padding: 0; }

/* ===========================================================================
   1. Page head — reference wedge + coral bar, at-a-glance aside
   =========================================================================== */

body.page-template-page-history .cm-hx .cm-page-head > .cm-orbital { display: none; }

body.page-template-page-history .cm-hx .cm-page-head::before {
	content: "";
	position: absolute;
	top: 0;
	right: -100px;
	z-index: -1;
	width: 180px;
	height: 100%;
	background: var(--cm26-brand);
	clip-path: polygon(55% 0, 100% 0, 100% 100%, 0 100%);
	opacity: .72;
	pointer-events: none;
}

body.page-template-page-history .cm-hx .cm-page-head::after { background: var(--cm26-brand); }

@media (min-width: 768px) {
	body.page-template-page-history .cm-hx .cm-page-head::before { width: 300px; right: -160px; }
}

@media (max-width: 767px) {
	body.page-template-page-history .cm-hx .cm-page-head::before { opacity: .36; }
}

body.page-template-page-history .cm-hx .cm-page-head .cm-eyebrow { color: var(--cm26-brand-deep); }

body.page-template-page-history .cm-hx .cm-page-head .cm-lede { max-width: 40ch; }

@media (min-width: 1024px) {
	body.page-template-page-history .cm-hx .cm-page-head-split {
		grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr);
		gap: clamp(40px, 6vw, 96px);
	}

	body.page-template-page-history .cm-hx .cm-page-head .cm-lede { font-size: 19px; }
}

/* The glance card: charcoal panel, coral edge, three facts. */
.cm-hx-glance {
	position: relative;
	max-width: 440px;
	padding: 28px 28px 24px;
	border-radius: var(--cm26-radius-card);
	background: var(--cm26-ink);
	color: var(--cm26-dark-primary);
	box-shadow: var(--cm26-shadow-float);
	overflow: hidden;
}

.cm-hx-glance::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 6px;
	background: var(--cm26-brand);
}

.cm-hx-glance-kicker {
	margin: 0 0 14px;
	font-family: var(--cm26-font-display);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--cm26-dark-link);
}

.cm-hx-glance-list { display: grid; margin: 0; }

.cm-hx-glance-list > div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 0;
	border-top: 1px solid rgba(255, 255, 255, .14);
}

.cm-hx-glance-list dt {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	color: var(--cm26-dark-muted);
}

.cm-hx-glance-list dd {
	margin: 0;
	font-family: var(--cm26-font-display);
	font-size: clamp(26px, 2.6vw, 34px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.02em;
	color: var(--cm26-paper);
	font-variant-numeric: tabular-nums;
}

.cm-hx-glance-list dd span {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--cm26-dark-secondary);
}

@media (max-width: 1023px) {
	.cm-hx-glance { max-width: 560px; }
}

@media (max-width: 479px) {
	.cm-hx-glance { padding: 22px 20px 16px 24px; }
}

/* ===========================================================================
   2. Our journey + roots
   =========================================================================== */

.cm-hx-journey-grid { display: grid; gap: clamp(32px, 5vw, 72px); align-items: start; }

@media (min-width: 1024px) {
	.cm-hx-journey-grid { grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr); }
}

.cm-hx-journey-copy .cm-h-section { max-width: 20ch; margin: 0 0 20px; }

.cm-hx-journey-copy p:not(.cm-eyebrow) {
	max-width: 62ch;
	margin: 0 0 16px;
	font-size: 17px;
	line-height: 1.75;
	color: var(--cm26-body);
}

.cm-hx-journey-copy p.cm-hx-journey-lead {
	font-size: clamp(19px, 1.6vw, 22px);
	line-height: 1.6;
	font-weight: 500;
	color: var(--cm26-ink);
}

.cm-hx-journey-copy .cm-eyebrow { margin-bottom: 12px; }

.cm-hx-roots {
	position: relative;
	padding: 28px;
	border: 1px solid var(--cm26-line);
	border-radius: var(--cm26-radius-card);
	background: var(--cm26-card);
	box-shadow: var(--cm26-shadow-card);
}

@media (max-width: 479px) {
	.cm-hx-roots { padding: 22px 20px; }
}

.cm-hx-roots-title {
	margin: 0;
	font-family: var(--cm26-font-display);
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -.01em;
	color: var(--cm26-ink);
}

.cm-hx-roots-intro { margin: 6px 0 22px; font-size: 15px; line-height: 1.6; color: var(--cm26-stone); }

body.page-template-page-history .cm-hx .cm-hx-roots-list { position: relative; display: grid; gap: 18px; }

.cm-hx-root {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 14px;
	padding-left: 30px;
}

.cm-hx-root::before {
	content: "";
	position: absolute;
	top: 5px;
	left: 1px;
	width: 14px;
	height: 14px;
	border: 2px solid var(--cm26-brand);
	border-radius: 50%;
	background: var(--cm26-card);
	box-sizing: border-box;
	z-index: 1;
}

/* The connector: from each root's dot down to the next one's. */
.cm-hx-root:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 19px;
	bottom: -23px;
	left: 7px;
	width: 2px;
	background: var(--cm26-brand);
	opacity: .55;
}

.cm-hx-root:has(+ .cm-hx-root--now)::after { bottom: -37px; }

.cm-hx-root-year {
	grid-row: span 2;
	align-self: start;
	min-width: 4.4em;
	padding: 3px 8px;
	border-radius: var(--cm26-radius-tag);
	background: var(--cm26-sand);
	font-family: var(--cm26-font-display);
	font-size: 13px;
	font-weight: 700;
	text-align: center;
	color: var(--cm26-ink);
}

.cm-hx-root-name {
	font-family: var(--cm26-font-display);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--cm26-ink);
}

.cm-hx-root-note { font-size: 14px; line-height: 1.5; color: var(--cm26-stone); }

.cm-hx-root--now { padding-top: 16px; border-top: 1px dashed var(--cm26-line); }

.cm-hx-root--now::before {
	top: 19px;
	left: -1px;
	width: 18px;
	height: 18px;
	border: 0;
	background: var(--cm26-brand);
	box-shadow: 0 0 0 4px var(--cm26-tint);
}

.cm-hx-root--now .cm-hx-root-year { background: var(--cm26-ink); color: var(--cm26-paper); }

.cm-hx-root--now .cm-hx-root-name { font-size: 19px; }

/* ===========================================================================
   3. Timeline
   =========================================================================== */

section.cm-section.cm-hx-journey { padding-bottom: calc(var(--cm26-section-y) * .5); }

section.cm-section.cm-hx-timeline-section { padding-top: calc(var(--cm26-section-y) * .5); }

.cm-hx-tl-head { max-width: 760px; margin: 0 auto 28px; text-align: center; }

.cm-hx-tl-head .cm-eyebrow { margin-bottom: 12px; }

.cm-hx-tl-head .cm-h-section { margin: 0; }

.cm-hx-tl-head .cm-lede { margin: 14px auto 0; max-width: 56ch; }

body.page-template-page-history .cm-hx .cm-hx-legend {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 22px;
	margin-top: 22px;
}

.cm-hx-legend-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 500;
	color: var(--cm26-body);
}

.cm-hx-legend-item .cm-hx-ico {
	box-sizing: content-box;
	width: 14px;
	height: 14px;
	padding: 5px;
	border-radius: 50%;
}

.cm-hx-legend-item--origin .cm-hx-ico    { background: var(--cm26-brand-deep); color: #fff; }
.cm-hx-legend-item--milestone .cm-hx-ico { background: var(--cm26-card); color: var(--cm26-brand-ink); box-shadow: inset 0 0 0 2px var(--cm26-brand); }
.cm-hx-legend-item--chapter .cm-hx-ico   { background: var(--cm26-card); color: var(--cm26-stone); box-shadow: inset 0 0 0 2px var(--cm26-stone); }

/* --- Decade navigator (sticky) ------------------------------------------- */

/* The site header lives in #wrapper and scrolls away (it is sticky only
   within its wrapper), so the bar sticks to the viewport's top edge. */
.cm-hx-nav {
	position: sticky;
	top: 12px;
	z-index: 30;
	display: flex;
	justify-content: center;
	margin: 0 auto clamp(28px, 4vw, 48px);
	pointer-events: none; /* the bar's empty sides never block the page */
}

body.page-template-page-history .cm-hx .cm-hx-nav-list {
	display: flex;
	gap: 4px;
	max-width: 100%;
	padding: 5px;
	border: 1px solid var(--cm26-line);
	border-radius: 999px;
	background: rgba(255, 253, 251, .94);
	-webkit-backdrop-filter: saturate(1.4) blur(10px);
	backdrop-filter: saturate(1.4) blur(10px);
	box-shadow: var(--cm26-shadow-pop);
	overflow-x: auto;
	scrollbar-width: none;
	pointer-events: auto;
}

.cm-hx-nav-list::-webkit-scrollbar { display: none; }

.cm-hx-nav-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 6px 18px;
	border-radius: 999px;
	color: var(--cm26-ink);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .2s var(--cm26-ease), color .2s var(--cm26-ease);
}

body.page-template-page-history .cm-hx a.cm-hx-nav-link { color: var(--cm26-ink); text-decoration: none; }

.cm-hx-nav-dec {
	font-family: var(--cm26-font-display);
	font-size: 15px;
	font-weight: 800;
	line-height: 1.2;
}

.cm-hx-nav-name { font-size: 12px; line-height: 1.3; color: var(--cm26-stone); }

body.page-template-page-history .cm-hx a.cm-hx-nav-link:hover { background: var(--cm26-sand); }

body.page-template-page-history .cm-hx a.cm-hx-nav-link[aria-current="true"] {
	background: var(--cm26-ink);
	color: var(--cm26-paper);
}

body.page-template-page-history .cm-hx a.cm-hx-nav-link[aria-current="true"] .cm-hx-nav-name { color: var(--cm26-dark-secondary); }

body.page-template-page-history .cm-hx a.cm-hx-nav-link:focus-visible {
	outline: 3px solid var(--cm26-brand-ink);
	outline-offset: -3px;
}

@media (max-width: 767px) {
	.cm-hx-nav-name { display: none; }
	.cm-hx-nav-link { padding: 6px 14px; }
}

/* --- Spine and decades ---------------------------------------------------- */

/* Mobile-first: spine on the left. --cm-hx-x is the spine's centre line. */
.cm-hx-tl {
	--cm-hx-x: 22px;
	--cm-hx-node: 44px;
	position: relative;
}

.cm-hx-tl::before,
.cm-hx-tl::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(var(--cm-hx-x) - 1.5px);
	width: 3px;
	border-radius: 3px;
	pointer-events: none;
}

.cm-hx-tl::before { background: var(--cm26-line); }

/* Without JS the coral runs the whole spine; with JS it fills as you scroll. */
.cm-hx-tl::after {
	background: linear-gradient(var(--cm26-brand), var(--cm26-brand-ink));
	transform-origin: top;
	transform: scaleY(var(--cm-hx-progress, 1));
	opacity: .9;
}

.cm-hx-era { position: relative; }

.cm-hx-era + .cm-hx-era { margin-top: clamp(36px, 5vw, 64px); }

.cm-hx-era { scroll-margin-top: 96px; }

.cm-hx-tl-head .cm-h-section { scroll-margin-top: 120px; }

.cm-hx-era-head {
	position: relative;
	z-index: 1;
	margin-bottom: 28px;
	padding-left: calc(var(--cm-hx-x) * 2 + 12px);
}

.cm-hx-era-head::before {
	/* A ring on the spine marks where each decade starts. */
	content: "";
	position: absolute;
	top: 50%;
	left: calc(var(--cm-hx-x) - 9px);
	width: 18px;
	height: 18px;
	margin-top: -9px;
	border: 3px solid var(--cm26-ink);
	border-radius: 50%;
	background: var(--cm26-paper);
	box-sizing: border-box;
}

.cm-hx-era-title {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
	margin: 0;
	padding: 10px 18px;
	border-radius: 999px;
	background: var(--cm26-ink);
	color: var(--cm26-paper);
	font-family: var(--cm26-font-display);
	line-height: 1.2;
}

.cm-hx-era-dec { font-size: clamp(18px, 1.6vw, 22px); font-weight: 800; letter-spacing: -.01em; }

.cm-hx-era-name { font-size: 14px; font-weight: 500; color: var(--cm26-dark-secondary); }

body.page-template-page-history .cm-hx .cm-hx-list { display: grid; gap: clamp(20px, 3vw, 36px); }

/* --- Entries (mobile) ----------------------------------------------------- */

.cm-hx-item {
	position: relative;
	display: grid;
	grid-template-columns: calc(var(--cm-hx-x) * 2) minmax(0, 1fr);
	column-gap: 12px;
	align-items: start;
}

.cm-hx-node {
	position: relative;
	z-index: 1;
	grid-column: 1;
	grid-row: 1 / span 2;
	justify-self: center;
	display: grid;
	place-items: center;
	width: var(--cm-hx-node);
	height: var(--cm-hx-node);
	border-radius: 50%;
	background: var(--cm26-card);
	color: var(--cm26-stone);
	box-shadow: inset 0 0 0 2px var(--cm26-line), 0 0 0 6px var(--cm26-paper);
}

.cm-hx-year {
	grid-column: 2;
	grid-row: 1;
	margin: 0 0 8px;
	min-height: calc(var(--cm-hx-node) - 8px);
	display: flex;
	align-items: center;
	font-family: var(--cm26-font-display);
	font-size: 26px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.03em;
	color: var(--cm26-ink);
	font-variant-numeric: tabular-nums;
}

.cm-hx-card {
	position: relative;
	grid-column: 2;
	grid-row: 2;
	padding: 22px 22px 20px;
	border: 1px solid var(--cm26-line);
	border-radius: var(--cm26-radius-card);
	background: var(--cm26-card);
	box-shadow: var(--cm26-shadow-card);
	transition: transform .35s var(--cm26-ease), box-shadow .35s var(--cm26-ease);
}

.cm-hx-badge {
	display: inline-block;
	margin: 0 0 12px;
	padding: 4px 10px;
	border-radius: var(--cm26-radius-tag);
	background: var(--cm26-sand);
	font-family: var(--cm26-font-display);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--cm26-stone);
}

body.page-template-page-history .cm-hx .cm-hx-title {
	margin: 0;
	font-family: var(--cm26-font-display);
	font-size: clamp(19px, 1.5vw, 22px);
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -.012em;
	color: var(--cm26-ink);
	text-wrap: balance;
}

body.page-template-page-history .cm-hx .cm-hx-text {
	margin: 10px 0 0;
	font-size: 16px;
	line-height: 1.7;
	color: var(--cm26-body);
}

.cm-hx-more { margin: 14px 0 0; }

/* --- Entry types ----------------------------------------------------------- */

/* Founding brand: coral node, deep-coral badge, coral edge on the card. */
.cm-hx-item--origin .cm-hx-node {
	background: var(--cm26-brand-deep);
	color: #fff;
	box-shadow: 0 0 0 6px var(--cm26-paper), 0 0 0 8px rgba(255, 103, 91, .35);
}

.cm-hx-item--origin .cm-hx-card {
	border-color: #f0c9c2;
	background: linear-gradient(180deg, var(--cm26-tint), var(--cm26-card) 70%);
	box-shadow: inset 4px 0 0 var(--cm26-brand), var(--cm26-shadow-card);
}

.cm-hx-item--origin .cm-hx-badge { background: var(--cm26-brand-deep); color: var(--cm26-on-brand); }

.cm-hx-item--origin .cm-hx-year { color: var(--cm26-brand-deep); }

/* Milestone: ringed node with a star, tinted badge. */
.cm-hx-item--milestone .cm-hx-node {
	color: var(--cm26-brand-ink);
	box-shadow: inset 0 0 0 2px var(--cm26-brand), 0 0 0 6px var(--cm26-paper);
}

.cm-hx-item--milestone .cm-hx-badge { background: var(--cm26-tint); color: var(--cm26-brand-deep); box-shadow: inset 0 0 0 1px #f3cdc6; }

/* Chapter: the quiet default — small dot. */
.cm-hx-item--chapter .cm-hx-node .cm-hx-ico { width: 14px; height: 14px; }

/* Today: the dark card that closes the line. */
.cm-hx-item--today .cm-hx-node {
	background: var(--cm26-ink);
	color: var(--cm26-dark-link);
	box-shadow: 0 0 0 6px var(--cm26-paper), 0 0 0 8px var(--cm26-ink);
}

.cm-hx-item--today .cm-hx-card {
	border-color: var(--cm26-ink);
	background: var(--cm26-ink);
	box-shadow: var(--cm26-shadow-lift);
}

.cm-hx-item--today .cm-hx-badge { background: var(--cm26-brand); color: var(--cm26-ink); }

body.page-template-page-history .cm-hx .cm-hx-item--today .cm-hx-title { color: var(--cm26-paper); font-size: clamp(22px, 2vw, 28px); }

body.page-template-page-history .cm-hx .cm-hx-item--today .cm-hx-text { color: var(--cm26-dark-secondary); }

/*
 * The spine ends at the Today node. The Today item is the last thing in the
 * timeline, so a paper-coloured strip from the node's centre to the item's
 * bottom hides both the grey line and the coral fill behind the "Today" label
 * and the closing card. z-index:-1 inside the item's own stacking context keeps
 * it under the node, label and card. --cm-hx-x is 50% of the timeline on
 * desktop; the item spans the timeline's full width, so it lines up there too.
 */
.cm-hx-item.cm-hx-item--today { z-index: 1; }

.cm-hx-item.cm-hx-item--today::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: calc(var(--cm-hx-node) / 2);
	bottom: 0;
	left: calc(var(--cm-hx-x) - 4px);
	width: 8px;
	background: var(--cm26-paper);
	pointer-events: none;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.cm-hx-card:hover { transform: translateY(-3px); box-shadow: var(--cm26-shadow-lift); }
	.cm-hx-item--origin .cm-hx-card:hover { box-shadow: inset 4px 0 0 var(--cm26-brand), var(--cm26-shadow-lift); }
}

/* --- Desktop: centre spine, alternating cards ---------------------------- */

@media (min-width: 1024px) {
	.cm-hx .cm-hx-tl {
		--cm-hx-x: 50%;
		--cm-hx-node: 52px;
		max-width: 1120px;
		margin-inline: auto;
	}

	.cm-hx-era-head {
		display: flex;
		justify-content: center;
		margin-bottom: 40px;
		padding-left: 0;
	}

	.cm-hx-era-head::before { display: none; }

	.cm-hx-era-title { flex-direction: column; align-items: center; gap: 2px; padding: 12px 28px; text-align: center; box-shadow: 0 0 0 8px var(--cm26-paper); }

	.cm-hx-item {
		grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr);
		column-gap: 0;
	}

	.cm-hx-node { grid-column: 2; grid-row: 1; margin-top: 18px; }

	.cm-hx-node .cm-hx-ico { width: 20px; height: 20px; }

	.cm-hx-item--chapter .cm-hx-node .cm-hx-ico { width: 16px; height: 16px; }

	.cm-hx-card { grid-row: 1; padding: 28px 30px 26px; }

	.cm-hx-year {
		grid-row: 1;
		margin: 0;
		min-height: 0;
		padding-top: 14px;
		font-size: clamp(44px, 4.4vw, 68px);
		letter-spacing: -.045em;
		color: #7b6656; /* 5.0:1 on paper; large text */
	}

	.cm-hx-item--origin .cm-hx-year { color: var(--cm26-brand-deep); }

	.cm-hx-item--today .cm-hx-year { color: var(--cm26-ink); }

	/* Left: card left of the spine, year to the right of it. */
	.cm-hx-item--left .cm-hx-card { grid-column: 1; }
	.cm-hx-item--left .cm-hx-year { grid-column: 3; justify-content: flex-start; padding-left: 8px; }

	/* Right: mirror. */
	.cm-hx-item--right .cm-hx-card { grid-column: 3; }
	.cm-hx-item--right .cm-hx-year { grid-column: 1; justify-content: flex-end; padding-right: 8px; }

	/* A small pointer from each card toward the spine. */
	.cm-hx-card::after {
		content: "";
		position: absolute;
		top: 36px;
		width: 14px;
		height: 14px;
		border: inherit;
		background: inherit;
		transform: rotate(45deg);
	}

	.cm-hx-item--left .cm-hx-card::after  { right: -8px; border-left: 0; border-bottom: 0; }
	.cm-hx-item--right .cm-hx-card::after { left: -8px;  border-right: 0; border-top: 0; }

	/* Gradient backgrounds don't carry into a pointer cleanly — solid tint. */
	.cm-hx-item--origin .cm-hx-card::after { background: var(--cm26-tint); }

	/* Today sits centred under the spine as the closing card. */
	.cm-hx-item.cm-hx-item--today { grid-template-columns: minmax(0, 1fr); justify-items: center; row-gap: 14px; }
	.cm-hx-item--today .cm-hx-node { grid-column: 1; grid-row: 1; margin-top: 0; }
	.cm-hx-item--today .cm-hx-year { grid-column: 1; grid-row: 2; padding: 0; justify-content: center; font-size: clamp(36px, 3.4vw, 52px); }
	.cm-hx-item--today .cm-hx-card { grid-column: 1; grid-row: 3; max-width: 640px; text-align: center; padding: 34px 40px 32px; }
	.cm-hx-item--today .cm-hx-card::after { display: none; }
}

@media (min-width: 1440px) {
	.cm-hx .cm-hx-tl { max-width: 1180px; }
	.cm-hx-item { grid-template-columns: minmax(0, 1fr) 112px minmax(0, 1fr); }
}

/* --- Scroll reveal (JS adds .is-enhanced; motion-safe, screen only) ------ */

/* Screen only: printing before scrolling must not give blank cards. */
@media screen and (prefers-reduced-motion: no-preference) {
	.cm-hx-tl.is-enhanced .cm-hx-item > .cm-hx-card,
	.cm-hx-tl.is-enhanced .cm-hx-item > .cm-hx-year {
		opacity: 0;
		transform: translateY(22px);
		transition: opacity .6s var(--cm26-ease), transform .7s var(--cm26-ease), box-shadow .35s var(--cm26-ease);
	}

	.cm-hx-tl.is-enhanced .cm-hx-item > .cm-hx-node {
		transform: scale(.6);
		transition: transform .5s var(--cm26-ease);
	}

	.cm-hx-tl.is-enhanced .cm-hx-item > .cm-hx-year { transition-delay: .08s; }

	.cm-hx-tl.is-enhanced .cm-hx-item.is-in > .cm-hx-card,
	.cm-hx-tl.is-enhanced .cm-hx-item.is-in > .cm-hx-year { opacity: 1; transform: none; }

	.cm-hx-tl.is-enhanced .cm-hx-item.is-in > .cm-hx-node { transform: none; }

	@media (hover: hover) {
		.cm-hx-tl.is-enhanced .cm-hx-item.is-in > .cm-hx-card:hover { transform: translateY(-3px); }
	}

	html { scroll-behavior: smooth; }
}

/* ===========================================================================
   4. Values + looking forward
   =========================================================================== */

.cm-hx-values-grid { display: grid; gap: clamp(28px, 4vw, 64px); align-items: start; }

@media (min-width: 1024px) {
	.cm-hx-values-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr); }
	.cm-hx-values-intro { position: sticky; top: 32px; }
}

.cm-hx-values-intro .cm-eyebrow { margin-bottom: 12px; }
.cm-hx-values-intro .cm-h-section { margin: 0; }
.cm-hx-values-intro .cm-lede { margin-top: 14px; max-width: 40ch; }

body.page-template-page-history .cm-hx .cm-hx-values-list {
	display: grid;
	gap: 14px;
	counter-reset: cm-hx-v;
}

@media (min-width: 600px) {
	body.page-template-page-history .cm-hx .cm-hx-values-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

body.page-template-page-history .cm-hx .cm-hx-values-list > li.cm-hx-value {
	counter-increment: cm-hx-v;
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 84px;
	padding: 18px 22px;
	border: 1px solid var(--cm26-line);
	border-radius: var(--cm26-radius-card);
	background: var(--cm26-card);
}

.cm-hx-value::before {
	content: counter(cm-hx-v, decimal-leading-zero);
	flex: none;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--cm26-tint);
	font-family: var(--cm26-font-display);
	font-size: 14px;
	font-weight: 800;
	color: var(--cm26-brand-deep);
	box-shadow: inset 0 0 0 1px #f3cdc6;
}

.cm-hx-value-name {
	font-family: var(--cm26-font-display);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--cm26-ink);
}

section.cm-section.cm-hx-forward { padding-bottom: calc(var(--cm26-section-y) * .4); }

.cm-hx-forward-inner {
	position: relative;
	max-width: 880px;
	margin-inline: auto;
	text-align: center;
}

.cm-hx-forward-inner .cm-eyebrow { margin-bottom: 12px; }

body.page-template-page-history .cm-hx .cm-hx-forward-title {
	margin: 0;
	font-family: var(--cm26-font-display);
	font-size: clamp(28px, 3.4vw, 44px);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -.025em;
	color: var(--cm26-ink);
	text-wrap: balance;
}

body.page-template-page-history .cm-hx .cm-hx-forward-copy {
	max-width: 60ch;
	margin: 18px auto 0;
	font-size: clamp(17px, 1.4vw, 19px);
	line-height: 1.7;
	color: var(--cm26-body);
}

/* ===========================================================================
   Very wide screens: keep the timeline readable, not stretched.
   =========================================================================== */

@media (min-width: 1920px) {
	.cm-hx .cm-hx-tl { max-width: 1240px; }
}