/**
 * Styles the pipeline band: studio statement above a five-stage strip
 * connected by one continuous line, like a timeline in a production tracker.
 *
 * Sits on the deep-paper field between the dark services band and the proof
 * section. Deliberately gold-free — the accent stays reserved for conversion
 * moments, so the strip reads through structure (line, rings, numerals) alone.
 */

.studio-section {
	padding-block: var(--inv-sect);
	background: var(--inv-paper-deep);
}

.studio-section__inner {
	display: grid;
	gap: var(--inv-space-xl);
}

.studio-section__statement {
	max-width: 48rem;
}

.studio-section__statement h2 {
	margin-top: var(--inv-space-sm);
}

.studio-section__detail {
	max-width: 40rem;
	color: var(--inv-muted);
	font-size: clamp(1.05rem, 1.5vw, 1.3rem);
	line-height: 1.5;
}

/* The connecting line is the list's top border; each stage hangs a hollow
   ring on it so the five steps read as one continuous production line. */
.pipeline {
	display: grid;
	gap: var(--inv-space-lg);
	margin-top: var(--inv-space-md);
	padding-left: 0;
	border-top: 1px solid var(--inv-line-strong);
	list-style: none;
}

.pipeline__stage {
	position: relative;
	display: grid;
	align-content: start;
	gap: var(--inv-space-xs);
	padding-top: var(--inv-space-lg);
}

.pipeline__stage::before {
	position: absolute;
	top: -0.4rem;
	left: 0;
	width: 0.8rem;
	height: 0.8rem;
	border: 1px solid var(--inv-text);
	border-radius: 50%;
	background: var(--inv-paper-deep);
	content: "";
}

.pipeline__number {
	color: var(--inv-muted);
	font-family: var(--inv-font-mono);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.1em;
}

.pipeline__name {
	font-size: clamp(1.3rem, 1.7vw, 1.7rem);
}

.pipeline__note {
	color: var(--inv-muted);
	font-size: 0.9rem;
	line-height: 1.5;
}

@media (min-width: 58rem) {
	.pipeline {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: var(--inv-space-lg) var(--inv-space-md);
	}
}

@media (max-width: 57.99rem) {
	/* Vertical timeline on smaller screens: the line moves to the left edge. */
	.pipeline {
		padding-left: var(--inv-space-lg);
		border-top: 0;
		border-left: 1px solid var(--inv-line-strong);
	}

	.pipeline__stage {
		padding-top: 0;
	}

	.pipeline__stage::before {
		top: 0.2rem;
		left: calc(-1 * var(--inv-space-lg) - 0.4rem);
	}
}