.scrollbox {
	padding-inline: 4rem;
	margin: 1rem auto;
	max-width: 120ch;
	/* height set by JS: 100dvh + (N-1) × scroll distance */
}

.scrollbox-inner {
	position: sticky;
	top: 0;
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto 1fr auto;
	column-gap: 2rem;
	padding: 4rem 1rem;
	box-sizing: border-box;

	header {
		grid-column: 1 / -1;
		padding-bottom: 4rem;
	}

	footer {
		grid-column: 1 / -1;
		padding-top: 6rem;
	}

	.wp-block-columns {
		display: grid;
		grid-template-columns: 1fr 1fr;

		.wp-block-column:first-child {
			font-size: 1.5625rem;
			font-weight: bold;
			padding-right: 6rem;
			border-right: 1px solid oklch(var(--theme-dark));
			justify-self: end;
		}

		.wp-block-column:last-child {
			border-top: 6px solid oklch(var(--theme-accent));
			max-width: 64ch;
			margin-left: 6rem;
		}
	}
}

.scrollbox-numbers {
	align-self: start;
	display: flex;
	align-items: center;
	justify-content: end;

	.scrollbox-number {
		font-size: 4rem;
		font-weight: bold;
		font-variant-numeric: tabular-nums;
		width: 6rem;
		height: 6rem;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 10px solid oklch(var(--theme-accent));
		border-radius: 9999px;
	}

	.scrollbox-indicators {
		display: grid;
		row-gap: 3px;
		padding-right: 3rem;
	}

	.scrollbox-indicator {
		display: block;
		background-color: oklch(var(--theme-accent));
		width: 3rem;
		height: 4px;

		&.active {
			background-color: oklch(var(--theme-dark));

			body.dark & {
				background-color: #fff;
			}
		}
	}

	&::after {
		content: "";
		width: 6rem;
		height: 2px;
		background-color: oklch(var(--theme-accent));
	}
}

.scrollbox-slides {
	position: relative;
	overflow: hidden;
}

.scrollbox-slide {
	inset: 0;
	box-sizing: border-box;
	background-color: #fff;
	max-width: 64ch;
	height: max-content;
	transition:
		background-color 0.6s ease,
		color 0.6s ease;
	padding-bottom: 2rem;

	body.dark & {
		background-color: oklch(var(--theme-dark));
	}

	h3 {
		margin-top: 0;
		font-size: 1.25rem;
		color: inherit;
		border-top: 1px solid currentColor;
		padding-top: 0.5rem;
	}
}