/*
 * growth-line.css — B4, the birch growth line.
 *
 * The overlay box mirrors .container exactly, so the line lands on the same
 * left edge as the content it runs beside. Purely decorative and never
 * intercepts pointer events.
 */

.growth-wrap {
	position: relative;
}

.growth-line {
	position: absolute;
	inset-block: 0;
	inset-inline: 0;
	z-index: 0;
	margin-inline: auto;
	max-width: var(--container-max);
	padding-inline: var(--container-pad);
	pointer-events: none;
}

/* Sections keep their own stacking context above the line. */
.growth-wrap > section {
	position: relative;
	z-index: 1;
}

/* Sit in the OUTER margin, not on the text edge: the padded box above puts us
   exactly where the copy starts, so step left into the gutter. */
.growth-line__svg {
	width: 24px;
	height: 100%;
	margin-left: -32px;
	overflow: visible;
}

.growth-line__track {
	fill: none;
	stroke: var(--line);
	stroke-width: 1;
}

/* Without JS this simply sits drawn at full length; motion.js takes it over. */
.growth-line__grow {
	fill: none;
	stroke: var(--koivu);
	stroke-width: 2;
	stroke-linecap: round;
	opacity: 0.85;
}

.growth-line__branch {
	fill: none;
	stroke: var(--koivu);
	stroke-width: 1.5;
	stroke-linecap: round;
	opacity: 0.7;
}

/* The line is a flourish, not information. Below 1024px the gutter is too
   narrow to hold it clear of the copy, so it steps aside entirely rather than
   crowding the text. */
@media (max-width: 1023.98px) {
	.growth-line {
		display: none;
	}
}