/* Layout: Text */

.text--align-center .container {
	text-align: center;
}

.text--align-center .prose,
.text--align-center .section__title {
	margin-inline: auto;
}

.text--cols-2 .text__body {
	max-width: none;
}

@media (min-width: 720px) {
	.text--cols-2 .text__body {
		columns: 2;
		column-gap: var(--space-xl);
	}

	.text--cols-2 .text__body > :first-child {
		margin-top: 0;
	}
}

/*
 * Grey box: title and text inside one rounded card — the legal pages. The
 * reading measure still applies inside the box; the box itself takes the
 * container width.
 */
.text--card .text__inner {
	padding: clamp(var(--space-l), 2rem + 4vw, 5rem) clamp(var(--space-m), 1.5rem + 3vw, 4rem);
	background-color: var(--color-surface-strong);
	border-radius: var(--radius-l);
}

.text--card .text__title {
	font-size: var(--text-3xl);
}

.text--card .text__body {
	max-width: 72ch;
}

/*
 * On a pattern the box is the white .section__card instead (text.php). Same
 * padding as the grey box, so only the colour has to change back.
 */
.text__inner.section__card {
	background-color: var(--color-bg);
}

/*
 * One column of text on the pattern: the card shrinks to the reading width
 * and centres. At container width the 72ch text left half the white card
 * empty (legal pages). Two columns keep the full width.
 */
.text--cols-1 .text__inner.section__card {
	max-width: var(--container-article);
	margin-inline: auto;
	/*
	 * Less on top than the shared card: the large serif title brings its own
	 * leading above the cap height, and with the full 80px the title sat
	 * visibly lower than the text sits from the left edge.
	 */
	padding-top: clamp(var(--space-l), 0.5rem + 3vw, 3rem);
}

/*
 * Long text on the contour artwork (legal pages): the artwork stays put behind
 * the card and covers the viewport. As a plain section background it stretched
 * to the height of the whole page and lost its scale. A fixed pseudo-element,
 * not background-attachment: iOS ignores that one. clip-path confines it to the
 * section (overflow would not clip a fixed child) and, as a stacking context,
 * keeps z-index: -1 above the tint. lvh: no jump when a phone's address bar
 * collapses.
 */
.section--text.section--pattern-topo {
	background-image: none;
	clip-path: inset(0);
}

.section--text.section--pattern-topo::before {
	content: "";
	position: fixed;
	inset: 0 0 auto;
	z-index: -1;
	height: 100lvh;
	background: var(--section-bg-image) center / cover no-repeat;
}