/* ==========================================================================
   Article screen (single post)
   Contents: body type · related articles (the aside is in pages/blog.css)
   ========================================================================== */

/*
 * The article fills its column, like the location screen's copy fills the same
 * track — one layout, one shape, no band of empty page before the aside.
 *
 * Kept at 18px rather than the site's 16: this is the one screen whose job is
 * continuous reading rather than scanning, and the larger size is what keeps
 * the line count honest at this width. Measured, the body runs 88–100
 * characters a line here, against the location screen's 101 in the same track.
 */
/*
 * The standfirst runs the width of the title above it.
 *
 * The shared hero lead is capped at 33rem, a measure tuned line by line against
 * five mockups, so it is left alone everywhere else — this stylesheet only
 * loads on an article, which is why the override can live here plainly.
 *
 * An article's lead is not a lead-in to a screen, it is the brief: the sentence
 * that decides whether the reader starts. Held to 33rem it broke into four
 * short lines while the headline above it ran the full column, which reads as a
 * stray narrow block rather than as a measure. `text-wrap: balance` stays on,
 * so the wider version still evens its rag.
 */
.page-hero__lead {
	max-width: none;
}

.article-body {
	font-size: var(--fs-md);
	line-height: 1.75;
}

/*
 * Headings keep their own rhythm at this size: the shared .entry-content rules
 * are written for 16px body copy and read tight under 18px.
 */
.article-body h2 {
	margin-top: var(--space-8);
	font-size: 1.5rem;
	line-height: 1.25;
	color: var(--color-ink);
}

.article-body h3 {
	margin-top: var(--space-6);
	font-size: 1.25rem;
	color: var(--color-ink);
}

/*
 * The aside and the featured card closing it moved to pages/blog.css on 16
 * October 2026: a service's page uses the same two, and that stylesheet is the
 * one both screens load.
 */

/* The article ends and the next thing begins; one gap, not two. */
.article-related {
	padding-top: 0;
}

/*
 * One row of related articles. The section shows four on the Blog's grid,
 * which has three columns from 992 to 1399, so the fourth sat alone on a
 * second row (Robert, 18 October 2026). There the row shows the first three;
 * from 1400 all four, and below 992 they pair up or stack. The cards keep the
 * grid's widths, so the photographs' sizes stay as measured, and the hidden
 * card's photograph is lazy and never fetched.
 *
 * Four columns down to 992 were measured and rejected the same day: below
 * about 1300 the cards fell to 221–269px, with titles on four or five lines
 * and the date line broken in two.
 */
@media (min-width: 992px) and (max-width: 1399.98px) {
	.article-related .article-grid > :nth-child(n+4) {
		display: none;
	}
}