/* Landing pages: lead photograph under the headline, then the report-page
   asymmetry from the home hero carried through the whole body. Argument in
   the wide column, apparatus in the narrow one: sourced facts, one drawn
   diagram, the sources themselves. Loaded after styles.css on the landing
   pages only, so it never touches the shared sheet. */

/* The plate sits between the head and the body with the same air on both
   sides as the home page gives its bands, and it stays shallower than the
   home hero so the first section is still in reach on a laptop screen. */
.landing-lead {
	margin: var(--s8) 0 var(--s9);
	overflow: clip;
	border: 1px solid var(--rule);
	background: var(--paper-alt);
}

.landing-lead img {
	display: block;
	width: 100%;
	aspect-ratio: 21 / 9;
	max-height: 30rem;
	object-fit: cover;
}

@media (max-width: 48rem) {
	.landing-lead img {
		aspect-ratio: 3 / 2;
	}
}

.landing-grid {
	display: grid;
	gap: var(--s7);
	align-items: start;
}

/* Sections inside the grid column are no longer direct children of
   .page-simple, so the shared sheet's reset of their own measure and gutter
   no longer reaches them and they indent by one gutter. Reset here. */
.landing-main > .section,
.landing-main > .closing-section {
	max-width: none;
	margin-inline: 0;
	padding-inline: 0;
}

/* The lead paragraph ends the head; the first section in the wide column
   starts flush with the top of the margin column. */
.landing-main > .section:first-child {
	padding-block-start: 0;
}

.landing-aside > * + * {
	margin-block-start: var(--s6);
}

/* The figure's own reset outranks the sibling spacing above, so it gets
   its air explicitly: a full step from the last fact and the same step
   before the sources rule. */
.landing-aside figure {
	margin: var(--s7) 0 0;
}

.landing-aside figure + * {
	margin-block-start: var(--s7);
}

.landing-aside .side-image img {
	display: block;
}

.landing-aside .image-placeholder {
	margin: 0;
	min-height: 0;
	aspect-ratio: 4 / 3;
}

/* Sources sit under the facts in the same mono register, one per hairline,
   the way the facts column already sets its entries. */
.landing-sources {
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--font-mono);
	font-size: var(--t-small);
	line-height: 1.6;
}

.landing-sources li {
	margin: 0;
	padding-block: var(--s3);
	border-top: 1px solid var(--rule);
}

/* They are links to the documents themselves and should look it: a hairline
   underline in the rule colour, brick on hover like every other link. */
.landing-sources a {
	color: var(--ink);
	text-decoration: underline;
	text-decoration-color: var(--rule);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.landing-sources a:hover {
	color: var(--accent-ink);
	text-decoration-color: currentColor;
}

@media (min-width: 62rem) {
	.landing-grid {
		grid-template-columns: minmax(0, 8fr) minmax(0, 3fr);
		gap: var(--s9);
	}

	.landing-aside {
		position: sticky;
		top: 7rem;
	}
}

/* Landing page titles run to seventy characters, three times the scope
   page's. The shared 22ch cap chops them into four ragged lines; a wider
   measure with balanced wrapping gives two or three even ones. Section
   titles get a little more room for the same reason. */
.page-simple > h1 {
	max-width: 34ch;
	text-wrap: balance;
}

.page-simple .section-title {
	max-width: 30ch;
}