main#primary {
	container-type: inline-size;
}

.the-content {
	/* Keeps the last block clear of the footer, as in the mockup. */
	padding-block-end: var(--spacing-80);
	display: grid;
	position: relative;
	grid-template-columns: min(100%, var(--wp--style--global--content-size));
	justify-content: center;

	> :where(:not(.is-layout-constrained)) {
		/* I _think_ this should be here and not in theme.json? */
		margin: var(--wp--preset--spacing--20) var(--wp--style--root--padding-right)
			0 var(--wp--style--root--padding-left);

		> * {
			margin-inline-start: var(--wp--style--root--padding-right);
			margin-inline-end: var(--wp--style--root--padding-left);
		}
	}

	> :where(.is-layout-constrained) {
		> * {
			padding-inline-start: var(--wp--style--root--padding-left);
			padding-inline-end: var(--wp--style--root--padding-right);
		}
	}

	> * {
		margin-block-start: var(--wp--preset--spacing--20);
	}

	/* This _should_ override > * above. */
	> .alignfull + .alignfull,
	> :where(:first-child) {
		margin-block-start: 0;
	}

	/* biome-ignore lint: Isn't an issue. */
	.alignfull {
		clear: both;
		justify-self: center;
		width: 100cqw;
	}

	.alignleft {
		float: left;
		margin-block-start: var(--wp--preset--spacing--10);
		margin-block-end: var(--wp--preset--spacing--10);
		margin-inline-end: var(--wp--preset--spacing--10);
	}

	.alignright {
		float: right;
		margin-block-start: var(--wp--preset--spacing--10);
		margin-block-end: var(--wp--preset--spacing--10);
		margin-inline-start: var(--wp--preset--spacing--10);
	}

	.alignwide {
		justify-self: center;
		width: 100cqw;
		max-width: var(--wp--style--global--wide-size);
	}

	.gform_wrapper > * {
		margin-inline-start: 0;
		margin-inline-end: 0;
	}
}

/* Radar rings bleeding in from the left, as on the About mockup. The five rings
are listed out rather than repeated inside a sized box — a background box is a
rectangle, so sizing one to limit the count clipped the arcs into a square.

Fixed to the viewport so it holds still as the page scrolls. It hangs off body
rather than .the-content because main#primary sets container-type: inline-size,
and that containment would make main the containing block for a fixed child —
leaving it scrolling with the page. The :has() keeps it to the templates that
pair a post-header with the-content, matching the old descendant selector.

z-index -1 paints it under the text but above the page background, and the
footer's own background covers it there. */
body:has(.post-header ~ .the-content)::before {
	background: radial-gradient(
		circle at -150px 50%,
		transparent 0px 178px,
		var(--seafoam) 178px 180px,
		transparent 180px 223px,
		var(--seafoam) 223px 225px,
		transparent 225px 268px,
		var(--seafoam) 268px 270px,
		transparent 270px 313px,
		var(--seafoam) 313px 315px,
		transparent 315px 358px,
		var(--seafoam) 358px 360px,
		transparent 360px
	);
	content: "";
	/* The viewport is the box now, so the rings centre on it and no longer need a
	fixed height to stay whole on a short page. */
	inset: 0;
	/* The field reaches 210px in from the left, and the content column starts at
	(100vw - 700px) / 2 — so below about 1120px they run behind the text. Faded
	back rather than hidden so they stay a background texture at those widths. */
	opacity: 0.25;
	pointer-events: none;
	position: fixed;
	z-index: -1;
}

/* Above --xl there is ~80px of clearance, so the rings can read at full strength. */
@media (width > 1280px) {
	body:has(.post-header ~ .the-content)::before {
		opacity: 1;
	}
}