/* Block: closer. Also used by the case template and the blog (same markup).
   Its own rounded beige container, the band inside it from top edge to bottom edge, clipped by the
   radius (system.css, "the band"). It never ends flat against the surface above or the footer below:
   above it is open page, below it the green footer container at one gutter's distance, so the two
   read as a stacked pair. Same margins and inner padding as .panel and the footer, so the text lines
   up with the footer columns. */
.closer {
	position: relative;
	overflow: hidden;
	margin: var(--sp-block) var(--g) var(--g);
	border-radius: var(--radius-l);
	background: var(--beige);
	padding: var(--sp-section) clamp(0px, 2vw, 24px) clamp(64px, 7vw, 112px);
	--bc: var(--beige-tint);
	--bl: 30%;
	--bw: 40%;
}
/* After a section that already ends with --sp-section of padding, that padding is the air. */
:is(.section, .related) + .closer { margin-top: 0; }
.closer .split {
	position: relative;
	z-index: 1;
	align-items: end;
}
.closer-side {
	display: grid;
	gap: 24px;
	justify-items: start;
	padding-bottom: 0.6em;
}
.closer-side p {
	font-size: 18px;
	max-width: 20em;
}

@media (max-width: 900px) {
	.closer { --bl: 34%; --bw: 54%; }
}