@charset "UTF-8";
/* ==========================================================================
   LIVING WATER INDIA — ORGANISATIONAL TIMELINE
   --------------------------------------------------------------------------
   Page-scoped layer for timeline.html. Everything here builds on lw.css and
   the earth re-skin in lw-palette.css: same Geist voice, same 12-column
   lattice, same reveal primitives. What this file adds is the one thing the
   base system does not carry — a five-step era ramp, and a single continuous
   chronological axis to hang it from.

   The era colours are not decoration. They trace the widening of the work
   through the palette's own range: water (blue) → sanitation (brass) →
   systems (earth brown) → integrated delivery (forest) → livelihood & land
   stewardship (clay). Each era block sets its own --era group; every coloured
   part inside inherits from it, so an era is re-skinned by changing three
   values in one place.

   Contents
     01  Era ramp tokens
     02  Page head
     03  (removed — boxed intro note)
     04  The arc at a glance
     05  Sticky era rail (scroll-spy)
     06  The chronology — axis, eras, entries
     07  Entry furniture — chips, metrics, notes
     08  (removed — boxed closing note)
     09  Responsive
     10  Reduced motion & print
   ========================================================================== */

/* --------------------------------------------------------------------------
   01  Era ramp tokens
   --------------------------------------------------------------------------
   Three values per era; the fourth is derived.
     --era      the line, the node, the rule — mid-tone, reads on cream
     --era-ink  type colour — darkened until it clears AA on cream
     --era-lit  the same hue lifted for forest grounds (head, sticky rail)
     --era-tint derived: the era mixed back into the paper ground, so every
                tinted block stays on the warm side of the palette rather
                than reverting to a cold white wash
   -------------------------------------------------------------------------- */
/* Water is the one cool hue in a warm palette: mixed into cream at the same
   strength as the rest it greys out and reads as a disabled card, so it takes
   a lighter wash and lets its rule carry the colour. */
.era-01 { --era: #6d8fa8; --era-ink: #3f5c73; --era-lit: #a8c3d3; --era-mix: 8%; }  /* water   */
.era-02 { --era: #a58a4a; --era-ink: #7a6330; --era-lit: #d8c48a; }  /* brass   */
.era-03 { --era: #8a6a4b; --era-ink: #684d33; --era-lit: #c2a385; }  /* earth   */
.era-04 { --era: #4f8a2a; --era-ink: #2c4a17; --era-lit: #b6dc8e; }  /* forest  */
.era-05 { --era: #b25b33; --era-ink: #93441f; --era-lit: #dd9878; }  /* clay    */

/* Every era-coloured consumer derives its wash the same way */
.era-01, .era-02, .era-03, .era-04, .era-05 {
	--era-tint: color-mix(in srgb, var(--era) var(--era-mix, 12%), var(--paper));
	--era-hair: color-mix(in srgb, var(--era) 30%, transparent);
	--era-card: color-mix(in srgb, #fff 55%, var(--paper));
}

/* Fallback so a stray .era-* consumer never renders colourless */
.chron, .arc, .era-rail {
	--era: var(--accent);
	--era-ink: var(--accent);
	--era-lit: var(--accent);
	--era-tint: var(--paper-2);
	--era-hair: var(--hair);
	--era-card: var(--paper);
}

/* Inline word-level accents used inside running copy */
.tint    { color: var(--era-ink); font-weight: var(--w-medium); }
.on-deep .tint { color: var(--era-lit); }
.b       { font-weight: var(--w-medium); color: var(--fg); }
.term    { font-weight: var(--w-medium); color: var(--fg); }
.qt      { font-style: italic; }

/* --------------------------------------------------------------------------
   02  Page head
   -------------------------------------------------------------------------- */
.tl-head__title  { grid-column: 1 / span 10; margin-block-start: clamp(2rem, 1.5rem + 3vw, 4rem); }
/* The line-splitter rebuilds inline markup from tag + class only, so the
   emphasis in the h1 has to carry its style in a class, never inline. */
.tl-head__title em { font-style: normal; }
.tl-head__lead   { grid-column: 1 / span 6; margin-block-start: clamp(2rem, 1.5rem + 2.5vw, 3.25rem); }
.tl-head__aside  { grid-column: 8 / span 5; align-self: end; margin-block-start: clamp(2rem, 1.5rem + 2.5vw, 3.25rem); }

/* The colour ramp, stated once at the top as a legend for the whole page.
   It draws itself in on entry and then keeps moving: each of the five
   segments carries a light travelling through it, in era order, so the line
   reads as a live sequence rather than a static key. */
.ramp { display: flex; align-items: stretch; gap: 3px; }
.ramp span {
	position: relative;
	flex: 1;
	block-size: 4px;
	background: var(--c);
	overflow: hidden;
	transform-origin: 0 50%;
	transform: scaleX(0);
	transition: transform 1.1s var(--ease-out) var(--d, 0ms);
}
.tl-head__aside.is-in .ramp span,
.ramp.is-in span { transform: scaleX(1); }

.ramp span::after {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	inline-size: 45%;
	background: linear-gradient(to right, transparent, rgba(255, 255, 255, .85), transparent);
	transform: translateX(-120%);
}
/* The sweep only starts once the ramp has drawn — otherwise it runs against
   a bar that is still at scaleX(0). The delay chain is the same one the
   draw-in uses, extended so the five segments light in sequence. */
.tl-head__aside.is-in .ramp span::after,
.ramp.is-in span::after {
	animation: ramp-sweep 4.2s var(--ease-in-out) infinite;
	animation-delay: calc(var(--d, 0ms) + 1.1s);
}
@keyframes ramp-sweep {
	0%   { transform: translateX(-120%); }
	38%  { transform: translateX(240%); }
	100% { transform: translateX(240%); }
}

.tl-head__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s3) var(--s6);
	margin-block-start: var(--s5);
	font-family: var(--mono);
	font-size: var(--fs-micro);
	letter-spacing: var(--tr-micro);
	text-transform: uppercase;
	color: var(--fg-3);
}
.tl-head__meta b { font-weight: var(--w-book); color: var(--fg); }

/* 03  (was: the "How to read this" note — removed along with the closing
       callout, so the page runs page head → arc → chronology → CTA with no
       boxed asides bracketing the timeline itself.) */

/* --------------------------------------------------------------------------
   04  The arc at a glance
   --------------------------------------------------------------------------
   The base system's --sect-y opens up to 13rem, which is right for a page of
   full-bleed statements and far too much for a reference band. The timeline
   runs tighter throughout so the five eras stay within reach of each other.
   -------------------------------------------------------------------------- */
.sect--tint { padding-block: clamp(3rem, 2.2rem + 3vw, 5.5rem); }

.arc {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--col-gap);
	grid-column: 1 / span 12;
	margin-block-start: clamp(2.5rem, 2rem + 3vw, 4.5rem);
}
.arc__card {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: var(--s3);
	min-block-size: clamp(11rem, 9rem + 5vw, 14rem);
	padding: clamp(1.25rem, 1rem + .9vw, 1.9rem) clamp(1.1rem, .9rem + .8vw, 1.6rem) clamp(1.4rem, 1rem + 1vw, 2rem);
	background: var(--era-tint);
	border-block-start: 3px solid var(--era);
	transition: transform .55s var(--ease-out), box-shadow .55s var(--ease-out);
}
/* No ghost index here: the card already opens with "Era 01", and at this size
   an oversized numeral has nowhere to sit that does not foul either the
   eyebrow or the year line. The chronology headers carry it instead. */
.arc__card::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 1px solid var(--era-hair);
	border-block-start: 0;
	pointer-events: none;
}
.arc__card:hover { transform: translateY(-5px); box-shadow: 0 22px 50px -30px color-mix(in srgb, var(--era) 70%, transparent); }
.arc__n {
	position: relative;
	z-index: 1;
	font-family: var(--mono);
	font-size: var(--fs-micro);
	letter-spacing: var(--tr-micro);
	text-transform: uppercase;
	color: var(--era-ink);
	line-height: 1;
}
.arc__name {
	position: relative;
	z-index: 1;
	font-size: var(--fs-4);
	font-weight: var(--w-medium);
	letter-spacing: -0.018em;
	line-height: 1.18;
	color: var(--fg);
	text-wrap: balance;
}
/* The title is the link; its ::after stretches so the whole card is the
   target while the accessible name stays just the era title. */
.arc__link::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.arc__card:has(:focus-visible) { outline: 2px solid var(--era-ink); outline-offset: 3px; }
.arc__card:has(:focus-visible) .arc__link { outline: 0; }
.arc__yrs {
	position: relative;
	z-index: 1;
	margin-block-start: auto;
	padding-block-start: var(--s4);
	font-family: var(--mono);
	font-size: var(--fs-sm);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
	color: var(--fg-3);
}
.arc__card[data-current="true"] .arc__yrs::after {
	content: "Current";
	display: inline-block;
	margin-inline-start: .6em;
	padding: .18em .5em;
	font-size: var(--fs-micro);
	letter-spacing: var(--tr-micro);
	text-transform: uppercase;
	color: var(--era-ink);
	border: 1px solid color-mix(in srgb, var(--era) 45%, transparent);
}

.arc-note {
	grid-column: 1 / span 9;
	margin-block-start: var(--s6);
	padding-inline-start: var(--s5);
	border-inline-start: 2px solid var(--hair);
	font-size: var(--fs-sm);
	line-height: 1.6;
	color: var(--fg-3);
	max-width: 88ch;
}
.arc-note b { font-weight: var(--w-book); color: var(--fg-2); }

/* --------------------------------------------------------------------------
   05  Sticky era rail — scroll-spy over the chronology
   --------------------------------------------------------------------------
   Hidden until the chronology is in view (JS sets [data-visible]); a compact
   forest bar so it reads as chrome, not content. Never shown on touch widths.
   -------------------------------------------------------------------------- */
.era-rail {
	position: fixed;
	inset-inline-end: clamp(1rem, 2vw, 2.5rem);
	inset-block-start: 50%;
	z-index: 90;
	translate: 0 -50%;
	display: none;
	flex-direction: column;
	gap: 2px;
	padding: var(--s3);
	background: color-mix(in srgb, var(--deep) 90%, transparent);
	box-shadow: 0 24px 60px -34px rgba(46, 58, 38, .7);
	backdrop-filter: blur(14px) saturate(140%);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	opacity: 0;
	pointer-events: none;
	transform: translate3d(14px, 0, 0);
	transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.era-rail[data-visible="true"] { opacity: 1; pointer-events: auto; transform: none; }

.era-rail a {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--s3);
	padding: .55rem .7rem;
	font-family: var(--mono);
	font-size: var(--fs-micro);
	letter-spacing: var(--tr-micro);
	text-transform: uppercase;
	color: rgba(241, 237, 224, .55);
	white-space: nowrap;
	transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.era-rail a i {
	inline-size: 7px;
	block-size: 7px;
	border-radius: 50%;
	border: 1px solid var(--era-lit);
	background: transparent;
	flex: none;
	transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease-out);
}
/* The index stays legible at rest; the era name unfurls on hover, so the
   rail reads as a position marker rather than an unlabelled row of dots. */
.era-rail a b { font-weight: var(--w-book); font-variant-numeric: tabular-nums; }
.era-rail a span {
	max-inline-size: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-inline-size .5s var(--ease-out), opacity .35s var(--ease);
}
.era-rail:hover a span, .era-rail a:focus-visible span { max-inline-size: 12rem; opacity: 1; }
.era-rail a:hover { color: var(--light, #fff); background: rgba(241, 237, 224, .07); }
.era-rail a[aria-current="true"] { color: var(--light, #fff); background: rgba(241, 237, 224, .1); }
.era-rail a[aria-current="true"] i { background: var(--era-lit); transform: scale(1.3); }

/* --------------------------------------------------------------------------
   06  The chronology
   --------------------------------------------------------------------------
   One axis for the whole page. Three tracks per row: date gutter, the axis
   itself, then the entry. The axis lives in its own column so the node dots
   and the era badges land on exactly the same x at every breakpoint.
   -------------------------------------------------------------------------- */
/* The chronology sets its own vertical frame. Between the arc and the first
   era the standard --sect-y-lg opens a gap wide enough to read as a break in
   the document, so the band is pulled in on both sides. */
.sect--chron { padding-block: clamp(4rem, 2.5rem + 5vw, 7.5rem); }

.chron {
	--date-col: clamp(4.5rem, 3rem + 5vw, 9rem);
	--axis-col: clamp(2.5rem, 1.8rem + 2.4vw, 4rem);
	--axis-w: 2px;
	grid-column: 1 / span 12;
	counter-reset: era;
}

.era { position: relative; counter-increment: era; padding-block-start: clamp(2rem, 1.4rem + 2.2vw, 3.5rem); }
.era + .era { margin-block-start: clamp(2.5rem, 1.8rem + 3vw, 5rem); }

/* ---- The chapter break --------------------------------------------------
   A full-width hairline with a short coloured tab on its leading edge: the
   rule says "new chapter", the tab says which one. Cheaper on the eye than
   another block of tinted background, and it lets the era colour introduce
   itself before the badge does. */
.era::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	block-size: 1px;
	background: var(--hair);
}
.era::after {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	inline-size: clamp(3.5rem, 8vw, 8rem);
	block-size: 3px;
	background: var(--era);
	translate: 0 -1px;
}

/* The coloured segment of axis this era owns. JS measures it to run from the
   centre of the era badge to the centre of the final node, then fills it as
   you scroll past; without JS it falls back to the full height of the era. */
.era__axis {
	position: absolute;
	inset-block-start: var(--axis-top, 0px);
	block-size: var(--axis-len, 100%);
	inset-inline-start: calc(var(--date-col) + var(--axis-col) / 2);
	inline-size: var(--axis-w);
	translate: -50% 0;
	background: color-mix(in srgb, var(--era) 20%, transparent);
	pointer-events: none;
	/* Clips the travelling pulse below to the era's own segment. */
	overflow: hidden;
}
.era__axis::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--era);
	transform: scaleY(var(--axis-fill, 0));
	transform-origin: 50% 0;
	transition: transform .12s linear;
}
/* A pulse that keeps travelling down the era's line whether or not the
   reader is scrolling — the chronology reads as something still running,
   not a finished diagram. Each era is offset so the pulse hands off from
   one to the next rather than firing on all five at once. */
.era__axis::before {
	content: "";
	position: absolute;
	inset-inline: -1px;
	block-size: 18%;
	min-block-size: 2.5rem;
	background: linear-gradient(to bottom, transparent, var(--era), transparent);
	opacity: .85;
	animation: axis-travel 5.2s linear infinite;
	animation-delay: var(--axis-delay, 0s);
	pointer-events: none;
}
.era-01 .era__axis { --axis-delay: 0s; }
.era-02 .era__axis { --axis-delay: 1.04s; }
.era-03 .era__axis { --axis-delay: 2.08s; }
.era-04 .era__axis { --axis-delay: 3.12s; }
.era-05 .era__axis { --axis-delay: 4.16s; }

/* 600% of the pulse's own height clears a segment of any length the axis
   takes; anything past the end is clipped by the axis's overflow. */
@keyframes axis-travel {
	0%   { transform: translateY(-100%); opacity: 0; }
	10%  { opacity: .85; }
	85%  { opacity: .85; }
	100% { transform: translateY(600%); opacity: 0; }
}

/* ---- Era header ---------------------------------------------------------- */
.era__head {
	position: relative;
	display: grid;
	grid-template-columns: var(--date-col) var(--axis-col) minmax(0, 1fr);
	align-items: start;
	padding-block-end: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
}
/* The era index again, oversized and ghosted into the right of the header —
   it gives the long scroll a landmark you can find without reading. */
.era__head::after {
	content: counter(era, decimal-leading-zero);
	position: absolute;
	inset-block-start: -.35em;
	inset-inline-end: 0;
	font-family: var(--mono);
	font-size: clamp(4rem, 2rem + 8vw, 9rem);
	font-weight: var(--w-book);
	line-height: 1;
	letter-spacing: -0.06em;
	color: var(--era);
	opacity: .09;
	pointer-events: none;
	user-select: none;
}
.era__badge {
	grid-column: 2;
	justify-self: center;
	inline-size: clamp(2rem, 1.7rem + 1vw, 2.5rem);
	block-size: clamp(2rem, 1.7rem + 1vw, 2.5rem);
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--era);
	color: var(--paper);
	font-family: var(--mono);
	font-size: var(--fs-sm);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0;
	line-height: 1;
	box-shadow: 0 0 0 6px var(--paper), 0 0 0 7px color-mix(in srgb, var(--era) 22%, transparent);
}
.era__text { grid-column: 3; padding-inline-start: clamp(.5rem, 1vw, 1.25rem); }
.era__eyebrow {
	font-family: var(--mono);
	font-size: var(--fs-micro);
	letter-spacing: var(--tr-micro);
	text-transform: uppercase;
	color: var(--era-ink);
	line-height: 1;
}
.era__eyebrow .sep { opacity: .45; margin-inline: .5em; }
.era__eyebrow .now {
	display: inline-block;
	margin-inline-start: .7em;
	padding: .25em .55em;
	color: var(--paper);
	background: var(--era);
	letter-spacing: .12em;
}
/* One step below the page h1, one step above the entry copy. The base --fs-2
   tops out at 3.75rem, which at five repetitions competes with the headline
   rather than serving it. */
.era__title {
	margin-block-start: var(--s4);
	font-size: clamp(1.65rem, 1.2rem + 1.9vw, 2.85rem);
	font-weight: var(--w-display);
	letter-spacing: var(--tr-title);
	line-height: 1.06;
	text-wrap: balance;
	max-width: 20ch;
}
.era__title em { font-style: normal; color: var(--era-ink); }
.era__sub {
	margin-block-start: var(--s4);
	font-size: var(--fs-lead);
	font-weight: var(--w-light);
	line-height: 1.45;
	letter-spacing: -0.014em;
	color: var(--fg-3);
	max-width: 52ch;
}

/* ---- Entries ------------------------------------------------------------- */
.era__list { display: block; }

.tl-row {
	position: relative;
	display: grid;
	grid-template-columns: var(--date-col) var(--axis-col) minmax(0, 1fr);
	align-items: start;
	padding-block-end: var(--s5);
}
.tl-row:last-child { padding-block-end: 0; }

.tl-row__date {
	grid-column: 1;
	justify-self: end;
	text-align: end;
	padding-block-start: 1.05em;
	font-family: var(--mono);
	font-size: var(--fs-sm);
	font-variant-numeric: tabular-nums;
	font-weight: var(--w-medium);
	letter-spacing: -0.02em;
	line-height: 1.35;
	color: var(--era-ink);
	text-transform: uppercase;
	transition: color var(--t-fast) var(--ease);
}
/* Month-and-year dates stack in the gutter, and unstack once the gutter is
   gone and the date sits on its own line above the entry. */
.tl-row__date .yr { display: block; }

.tl-row__node {
	grid-column: 2;
	justify-self: center;
	margin-block-start: 1.25em;
	inline-size: 11px;
	block-size: 11px;
	border-radius: 50%;
	border: 2px solid var(--era);
	background: var(--paper);
	box-shadow: 0 0 0 5px var(--paper);
	transition: transform .5s var(--ease-out), background .5s var(--ease);
}
.tl-row[data-terminal="true"] .tl-row__node { background: var(--era); }

/* ---- The entry card -----------------------------------------------------
   Entries used to be bare paragraphs floating beside a hairline, which left
   the right two-thirds of the page reading as empty. Giving each one a warm
   card, a leading rule in its era colour and a short connector back to its
   node turns the column into a sequence of objects. */
.tl-row__body {
	grid-column: 3;
	position: relative;
	margin-inline-start: clamp(.75rem, 1.4vw, 1.75rem);
	padding: clamp(1rem, .8rem + .7vw, 1.4rem) clamp(1.1rem, .9rem + 1vw, 1.75rem);
	max-inline-size: 64rem;
	background: var(--era-card);
	border: 1px solid var(--hair-soft);
	border-inline-start: 2px solid var(--era-hair);
	transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), transform .5s var(--ease-out);
}
/* The connector — a hairline from the node to the card's leading edge */
.tl-row__body::before {
	content: "";
	position: absolute;
	inset-block-start: 1.55em;
	inset-inline-start: calc(-1 * clamp(.75rem, 1.4vw, 1.75rem));
	inline-size: clamp(.75rem, 1.4vw, 1.75rem);
	block-size: 1px;
	background: var(--era-hair);
	pointer-events: none;
}
.tl-row:hover .tl-row__body { border-inline-start-color: var(--era); background: var(--era-tint); transform: translateX(2px); }
.tl-row:hover .tl-row__node { transform: scale(1.35); }
.tl-row:hover .tl-row__date { color: var(--era); }

.tl-row__body > p {
	font-size: var(--fs-body);
	line-height: 1.62;
	color: var(--fg-2);
	max-width: 74ch;
}
.tl-row__body > * + * { margin-block-start: var(--s4); }

/* --------------------------------------------------------------------------
   07  Entry furniture
   -------------------------------------------------------------------------- */

/* State chips — the eleven-state footprint */
.chips { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); }
.chips li {
	padding: .42em .85em;
	font-size: var(--fs-sm);
	line-height: 1.3;
	color: var(--fg-2);
	background: var(--paper);
	border: 1px solid var(--era-hair);
	border-radius: 999px;
	transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.chips li:hover { color: var(--paper); background: var(--era); border-color: var(--era); }

/* Metric cards — the documented reach figures */
.metrics {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr));
	gap: var(--s4);
}
.metric {
	padding: clamp(1.1rem, .9rem + .7vw, 1.6rem) clamp(1.1rem, .9rem + .7vw, 1.5rem);
	background: var(--paper);
	border: 1px solid var(--hair-soft);
	border-block-start: 2px solid var(--era);
}
.metric__v {
	display: block;
	font-family: var(--mono);
	font-size: clamp(1.75rem, 1.35rem + 1.7vw, 2.6rem);
	font-weight: var(--w-book);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.045em;
	line-height: 1;
	color: var(--era-ink);
}
.metric__k {
	display: block;
	margin-block-start: var(--s3);
	font-family: var(--mono);
	font-size: var(--fs-micro);
	letter-spacing: var(--tr-micro);
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--era-ink);
}
.metric__s {
	display: block;
	margin-block-start: .35rem;
	font-size: var(--fs-sm);
	line-height: 1.4;
	color: var(--fg-3);
}

/* Wide metric — value and label share a line, for the smaller CRP figures */
.metrics--inline { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.metrics--inline .metric { display: flex; align-items: baseline; gap: var(--s3); }
.metrics--inline .metric__v { font-size: clamp(1.4rem, 1.15rem + 1vw, 1.9rem); }
.metrics--inline .metric__k {
	margin-block-start: 0;
	font-family: var(--sans);
	font-size: var(--fs-sm);
	letter-spacing: var(--tr-body);
	text-transform: none;
	color: var(--fg-2);
}

/* A card that carries a list rather than a figure */
.note-card {
	grid-column: span 2;
	padding: clamp(1.1rem, .9rem + .7vw, 1.6rem) clamp(1.1rem, .9rem + .7vw, 1.5rem);
	background: var(--era-tint);
	border: 1px solid var(--era-hair);
}
.note-card__k {
	display: block;
	font-family: var(--mono);
	font-size: var(--fs-micro);
	letter-spacing: var(--tr-micro);
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--era-ink);
}
.note-card__b { margin-block-start: var(--s3); font-size: var(--fs-body); color: var(--fg-2); }

/* Dot-separated inline series */
.series { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem var(--s3); }
.series li { display: inline-flex; align-items: center; gap: var(--s3); font-size: var(--fs-body); color: var(--fg-2); }
.series li:not(:last-child)::after {
	content: "";
	inline-size: 3px;
	block-size: 3px;
	border-radius: 50%;
	background: currentColor;
	opacity: .45;
}

/* 08  (was: the closing callout box — removed; see 03.) */

/* --------------------------------------------------------------------------
   09  Responsive
   -------------------------------------------------------------------------- */
/* The rail floats over the right gutter, so it only appears once that gutter
   is genuinely clear of the content column. */
@media (min-width: 1200px) {
	.era-rail { display: flex; }
}

@media (max-width: 1180px) {
	.tl-head__title { grid-column: 1 / span 8; }
	.tl-head__lead  { grid-column: 1 / span 5; }
	.tl-head__aside { grid-column: 1 / span 5; align-self: start; }
	.arc     { grid-column: 1 / span 8; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--s5); }
	.arc-note { grid-column: 1 / span 8; }
	.chron   { grid-column: 1 / span 8; }
	.note-card { grid-column: span 1; }
}

@media (max-width: 860px) {
	.tl-head__title, .tl-head__lead, .tl-head__aside { grid-column: 1 / span 4; }
	.arc { grid-column: 1 / span 4; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.arc-note, .chron { grid-column: 1 / span 4; }

	/* The date gutter collapses: the axis moves to the far left and each date
	   rides above its own entry, so nothing has to squeeze into two tracks. */
	.chron { --date-col: 0px; --axis-col: 2.25rem; }

	.era__head { grid-template-columns: var(--axis-col) minmax(0, 1fr); }
	.era__head::after { font-size: clamp(3.5rem, 14vw, 6rem); inset-block-start: -.2em; }
	.era__badge { grid-column: 1; }
	.era__text  { grid-column: 2; }
	.era__title { max-width: none; }

	.tl-row { grid-template-columns: var(--axis-col) minmax(0, 1fr); column-gap: 0; }
	.tl-row__node { grid-column: 1; grid-row: 1; margin-block-start: .25em; }
	.tl-row__date {
		grid-column: 2;
		grid-row: 1;
		justify-self: start;
		text-align: start;
		padding-inline-start: clamp(.5rem, 1vw, 1.25rem);
		padding-block-start: 0;
		margin-block-end: var(--s3);
	}
	.tl-row__date .yr { display: inline; }
	.tl-row__body { grid-column: 2; grid-row: 2; margin-inline-start: 0; }
	.tl-row__body::before { display: none; }

	.metrics { grid-template-columns: minmax(0, 1fr); }
}

/* The base lattice used to drop to two columns here, so every block that had
   asked for four above was restated at two. It now stays at four all the way
   down — a `span 4` in a two-column grid grew implicit tracks rather than
   clamping, which starved the real columns — so the spans set at 860 already
   hold and only the interior track sizing needs restating. */
@media (max-width: 520px) {
	.arc { grid-template-columns: minmax(0, 1fr); }
	.arc__card { min-block-size: 0; }

	.chron { --axis-col: 1.9rem; }
	.era__title { font-size: clamp(1.5rem, 1.1rem + 3vw, 2rem); }
}

/* --------------------------------------------------------------------------
   10  Reduced motion & print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.ramp span { transform: scaleX(1) !important; }
	.ramp span::after, .era__axis::before { animation: none !important; display: none; }
	.era__axis::after { transform: scaleY(1) !important; transition: none !important; }
	.era-rail { transition: none !important; }
	.arc__card:hover, .tl-row:hover .tl-row__body { transform: none; }
}

@media print {
	.era-rail { display: none !important; }
	.era__axis::before, .ramp span::after { display: none !important; }
	.era__axis::after { transform: scaleY(1) !important; }
	.era__head::after, .arc__card::before { display: none !important; }
	.arc__card, .metric, .note-card, .chips li, .tl-row { break-inside: avoid; }
	.era { break-inside: avoid-page; }
}