/* Every drop counts (journey page): the stage, an off-white band with the two reservoirs and the three chapters.
   Without JavaScript only the chapter cards show, stacked. With it (.is-live, set by site-droplets-scroll.js):
   below 64em the reservoirs stay sticky above the chapters, which scroll normally; from 64em the stage is pinned,
   the reservoirs sit left and the chapter cards cross-fade on the right (--o and --x are set per card from
   progress). Cards, reservoirs and figures are rounded inside the square band (--stz-radius-card). */

.stz-journey-pinned-wrap {
	background: var(--stz-surface-2);
	border-radius: var(--stz-radius-surface);
}

.stz-journey-pinned-stage {
	box-sizing: border-box;
	max-width: var(--j-max);
	margin: 0 auto;
	padding: var(--stz-space-7) var(--j-pad);
}

.stz-stage-visualizer,
.stz-story-nav {
	display: none;
}

.stz-story-cards {
	display: grid;
	gap: var(--stz-gutter);
}

/* ---- Chapter cards ---- */
.stz-chapter-card {
	padding: var(--stz-space-6);
	border-radius: var(--stz-radius-card);
	background: var(--stz-surface);
}

.stz-chapter-header {
	display: flex;
	align-items: baseline;
	gap: var(--stz-space-3);
	color: var(--stz-text-2);
	font-size: var(--stz-fs-footnote);
	font-weight: var(--stz-fw-semibold);
	letter-spacing: var(--stz-track-caps);
	text-transform: uppercase;
}

.stz-chapter-title {
	margin-top: var(--stz-space-3);
	font-size: var(--stz-fs-display-s);
	font-weight: var(--stz-fw-semibold);
	line-height: var(--stz-lh-tight);
	letter-spacing: var(--stz-track-display-s);
}

.stz-chapter-lead {
	margin-top: var(--stz-space-4);
	font-size: var(--stz-fs-lead-s);
	line-height: var(--stz-lh-snug);
	letter-spacing: var(--stz-track-lead);
}

.stz-chapter-text {
	margin-top: var(--stz-space-3);
	color: var(--stz-text-2);
	font-size: var(--stz-fs-body);
	line-height: var(--stz-lh-body);
}

.stz-chapter-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: var(--stz-space-3);
	margin-top: var(--stz-space-6);
}

.stz-chapter-stat {
	padding: var(--stz-space-4);
	border-radius: var(--stz-radius-card);
	background: var(--stz-surface-2);
}

.stz-chapter-stat--highlight {
	background: var(--stz-cta);
	color: var(--stz-on-cta);
}

.stz-chapter-stat__lbl,
.stz-chapter-stat__sub {
	font-size: var(--stz-fs-footnote);
	color: var(--stz-text-2);
}

.stz-chapter-stat--highlight :is(.stz-chapter-stat__lbl, .stz-chapter-stat__sub) {
	color: var(--stz-on-cta);
}

.stz-chapter-stat__val {
	margin-top: var(--stz-space-1);
	font-size: var(--stz-fs-title1);
	font-weight: var(--stz-fw-semibold);
	letter-spacing: var(--stz-track-title);
}

/* ---- Live stage: reservoirs ---- */
.is-live .stz-stage-visualizer {
	display: block;
	position: sticky;
	top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--stz-bar) + var(--stz-space-3));
	z-index: var(--stz-z-raised);
	margin-bottom: var(--stz-gutter);
	padding: var(--stz-space-4);
	border-radius: var(--stz-radius-card);
	background: var(--stz-surface);
	box-shadow: var(--stz-shadow-raised);
}

.stz-telemetry-hud {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--stz-space-1) var(--stz-space-4);
	font-size: var(--stz-fs-sub);
}

.stz-hud-year {
	font-size: var(--stz-fs-title3);
	font-weight: var(--stz-fw-semibold);
	font-variant-numeric: tabular-nums;
}

.stz-hud-month,
.stz-hud-drops {
	color: var(--stz-text-2);
	font-variant-numeric: tabular-nums;
}

.stz-canvas-container {
	margin-top: var(--stz-space-2);
}

.stz-droplets-canvas {
	display: block;
	width: 100%;
	height: 12rem;
}

.stz-reservoir-labels {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--stz-space-3);
	margin-top: var(--stz-space-2);
}

.stz-reservoir {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	font-size: var(--stz-fs-footnote);
	color: var(--stz-text-2);
}

.stz-reservoir strong {
	grid-column: 1 / -1;
	color: var(--stz-text);
	font-size: var(--stz-fs-title3);
	font-variant-numeric: tabular-nums;
}

.stz-stage-total {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--stz-space-1) var(--stz-space-3);
	margin-top: var(--stz-space-3);
	padding-top: var(--stz-space-3);
	border-top: 1px solid var(--stz-hairline);
}

.stz-stage-total__label {
	color: var(--stz-text-2);
	font-size: var(--stz-fs-footnote);
}

.stz-stage-total__value {
	font-size: var(--stz-fs-title1);
	font-weight: var(--stz-fw-semibold);
	letter-spacing: var(--stz-track-title);
	font-variant-numeric: tabular-nums;
}

.stz-stage-caveat {
	margin-top: var(--stz-space-4);
	color: var(--stz-text-2);
	font-size: var(--stz-fs-footnote);
	line-height: var(--stz-lh-small);
}

/* ---- Pinned stage from 64em ---- */
@media (width >= 64em) {
	.is-live .stz-journey-pinned-stage {
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		gap: var(--stz-space-7);
		align-items: center;
		min-height: calc(100svh - var(--stz-bar) - var(--stz-space-6));
		padding-block: var(--stz-space-6);
	}

	.is-live .stz-stage-visualizer {
		position: static;
		margin: 0;
		padding: var(--stz-space-6);
		box-shadow: none;
	}

	.is-live .stz-droplets-canvas {
		height: min(52svh, 30rem);
	}

	.is-live .stz-story-nav {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--stz-space-3);
		margin: 0 0 var(--stz-space-5);
		padding: 0;
		list-style: none;
	}

	.stz-nav-step {
		display: grid;
		gap: var(--stz-space-1);
		color: var(--stz-text-2);
		font-size: var(--stz-fs-footnote);
		transition: color var(--stz-dur-fade) var(--stz-ease);
	}

	.stz-nav-step.is-active {
		color: var(--stz-text);
	}

	.stz-nav-step__num {
		font-weight: var(--stz-fw-semibold);
	}

	.stz-nav-step__track {
		display: block;
		height: 0.1875rem;
		overflow: hidden;
		border-radius: var(--stz-radius-pill);
		background: var(--stz-hairline);
	}

	.stz-nav-step__fill {
		display: block;
		height: 100%;
		background: var(--stz-cta);
		transform: scaleX(var(--fill, 0));
		transform-origin: left;
	}

	/* All cards share one grid cell; the tallest sets the height. Only the visible one takes pointer input. */
	.is-live .stz-story-cards {
		grid-template: 1fr / 1fr;
		gap: 0;
	}

	.is-live .stz-chapter-card {
		grid-area: 1 / 1;
		opacity: var(--o, 1);
		transform: translate3d(var(--x, 0), 0, 0);
	}

	.is-live .stz-chapter-card[data-chapter="2"],
	.is-live .stz-chapter-card[data-chapter="3"] {
		opacity: var(--o, 0);
	}
}

@media (prefers-contrast: more) {
	.stz-chapter-card,
	.stz-chapter-stat,
	.is-live .stz-stage-visualizer {
		box-shadow: var(--stz-ring-contrast);
	}
}