/* =========================================================================
   The scroll story: spark, brain, lattice.
   A tall track whose stage is pinned, so the animation has room to play
   while the visitor scrolls past it.
   ========================================================================= */

.story {
	position: relative;
	background: var(--bg);
	border-block: 1px solid var(--line);
}

.js .story {
	height: 300vh;
}

.story__stage {
	position: sticky;
	top: 0;
	height: 100svh;
	display: grid;
	place-items: center;
	overflow: hidden;
}

.story__canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
}

/* Hold the left of the stage dark so the copy is always legible, and let
   the right stay clear for the animation. */
.story__stage::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, var(--bg) 6%, rgba(11, 18, 32, 0.82) 30%, transparent 52%),
		linear-gradient(0deg, rgba(11, 18, 32, 0.55), transparent 32%);
	pointer-events: none;
}

.story__copy {
	position: relative;
	z-index: 2;
	width: min(100% - 40px, var(--wrap));
	margin-inline: auto;
	pointer-events: none;
}

.story__lead {
	max-width: min(31rem, 100%);
	margin-bottom: var(--md);
}

.story__lead h2 {
	font-size: clamp(1.9rem, 3.4vw, 2.9rem);
}

.story__lead p {
	color: var(--muted);
	margin-top: var(--sm);
	max-width: min(30rem, 100%);
}

.story__steps {
	display: grid;
	gap: 14px;
	max-width: min(31rem, 100%);
}

.story__step {
	border-left: 1px solid var(--line);
	padding: 4px 0 4px 18px;
	color: var(--muted);
	font-size: 1rem;
	opacity: 0.34;
	transition: opacity 0.45s ease, border-color 0.45s ease, color 0.45s ease;
}

.story__step strong {
	display: block;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1.15;
	color: var(--ink);
	margin-bottom: 3px;
}

.story__step.is-on {
	opacity: 1;
	border-left-color: var(--accent);
	color: var(--ink);
}

/* No JavaScript: no pinning and no tall track, just one readable panel. */
html:not(.js) .story {
	height: auto;
}

html:not(.js) .story__stage {
	position: static;
	height: auto;
	min-height: 70svh;
	padding-block: var(--xl);
}

@media (max-width: 860px) {
	.js .story {
		height: 240vh;
	}
	.story__stage::after {
		background: linear-gradient(180deg, rgba(11, 18, 32, 0.25) 20%, rgba(11, 18, 32, 0.93) 58%);
	}
	.story__copy {
		align-self: end;
		padding-bottom: var(--lg);
	}
}

/* Motion turned down: drop the pin entirely and show the finished state. */
@media (prefers-reduced-motion: reduce) {
	.js .story {
		height: auto;
	}
	.js .story__stage {
		position: static;
		height: auto;
		min-height: 72svh;
		padding-block: var(--xl);
	}
	.story__step {
		opacity: 1;
		color: var(--ink);
	}
}

/* =========================================================================
   Featured articles, three across.
   ========================================================================= */

.featured {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(20px, 2.4vw, 30px);
}

@media (max-width: 940px) {
	.featured {
		grid-template-columns: repeat(2, 1fr);
	}
	.featured > :last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
}

@media (max-width: 620px) {
	.featured {
		grid-template-columns: 1fr;
	}
	.featured > :last-child:nth-child(odd) {
		grid-column: auto;
	}
}