/*
 * Section: Narrative.
 *
 * Loaded only on pages carrying the `narrative` layout.
 *
 * Prose-first. The measure is the governing constraint here, not a nicety:
 * this is the section people actually read end to end, and a line longer than
 * about 75 characters loses the return sweep.
 *
 * Measure is set in `ch` rather than px or rem. One `ch` is the width of "0"
 * in the current font, so 68ch stays inside 65–75 characters whether the
 * viewer has bumped their default size or the font falls back to Helvetica.
 * A fixed 680px does not — it is 68 characters at 18px and 90 at 14px.
 */


.narrative__inner {
	display: flex;
	flex-direction: column;
	gap: var(--sq-space-5);
}

.narrative__heading {
	margin: 0;
	max-width: 20ch;
	font-size: var(--sq-text-h2);
	line-height: 0.98;
}

/*
 * Everything that is read, held to the measure. Applied per block rather than
 * to the container, so a full-width image can still break out.
 */
.narrative__lead,
.narrative__body,
.narrative__points,
.narrative__closing {
	max-width: 68ch;
}

.narrative__lead > *,
.narrative__body > *,
.narrative__closing > * {
	margin: 0;
	text-wrap: pretty;
}

.narrative__lead > * + *,
.narrative__body > * + *,
.narrative__closing > * + * {
	margin-top: var(--sq-space-4);
}

/* The hook. Larger, and looser, because it is doing the recruiting. */
.narrative__lead > * {
	font-size: var(--sq-text-lead);
	line-height: var(--sq-leading-normal);
}

/* And back to normal for everything after it. */
.narrative__body > *,
.narrative__closing > * {
	font-size: var(--sq-text-body);
	line-height: 1.7;
}

.narrative__body ul,
.narrative__body ol,
.narrative__closing ul,
.narrative__closing ol {
	padding-left: 1.25em;
}

.narrative__body li + li,
.narrative__closing li + li {
	margin-top: var(--sq-space-2);
}


/* ============================================================== POINTS ==
 *
 * Inside the prose flow, not cards. A rule down the left marks them as a set
 * without boxing them — no border on four sides, no background, no equal
 * heights. They read as an aside in the argument, which is what they are.
 */

.narrative__points {
	margin: 0;
	padding-left: var(--sq-space-5);
	border-left: var(--sq-border-width) solid var(--sq-border);
}

.narrative__point + .narrative__point {
	margin-top: var(--sq-space-4);
}

.narrative__point-label {
	margin: 0;
	font-weight: var(--sq-weight-bold);
	line-height: 1.4;
}

.narrative__point-description {
	margin: 0;
	color: var(--sq-fg);
	line-height: 1.7;
}


/* =============================================================== MEDIA == */

.narrative__media {
	margin: 0;
}

.narrative__media-image {
	display: block;
	width: 100%;
	height: auto;
	border: var(--sq-border-width) solid var(--sq-color-ink);
	background-color: var(--sq-color-surface-sunken);
}

.narrative__media-caption {
	margin-top: var(--sq-space-3);
	max-width: 68ch;
	color: var(--sq-fg-muted);
	font-size: var(--sq-text-small);
	line-height: var(--sq-leading-normal);
}


/* ============================================================= DESKTOP == */

@media (min-width: 61.25em) {

	.narrative__inner {
		gap: var(--sq-space-6);
	}

	.narrative__heading {
		letter-spacing: var(--sq-tracking-display);
	}

	/*
	 * media_position: right.
	 *
	 * A two-column grid rather than a float, so the prose column keeps a firm
	 * width instead of reflowing around the image and losing its measure
	 * halfway down.
	 *
	 * The media is the only child placed explicitly; every prose block auto-
	 * flows down column one. That is what lets the DOM keep a single media
	 * position — after the lead, which is the order mobile needs — while
	 * desktop lifts it to the top of column two.
	 */
	.narrative--media-right .narrative__inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
		column-gap: var(--sq-space-7);
		align-items: start;
	}

	.narrative--media-right .narrative__inner > * {
		grid-column: 1;
	}

	.narrative--media-right .narrative__media {
		grid-column: 2;
		grid-row: 1;
	}

	/* The rows the grid creates would otherwise collapse the flex gap. */
	.narrative--media-right .narrative__inner > * + * {
		margin-top: var(--sq-space-6);
	}

	.narrative--media-right .narrative__media,
	.narrative--media-right .narrative__heading {
		margin-top: 0;
	}

	/* below_lead: full prose width, still inside the measure column. */
	.narrative--media-below-lead .narrative__media {
		max-width: 68ch;
	}

	/*
	 * full_width: the one block allowed out of the measure. A diagram is
	 * looked at rather than read, so the constraint does not apply to it —
	 * but the caption underneath is read, so that keeps its measure.
	 */
	.narrative--media-full-width .narrative__media {
		max-width: none;
	}
}