/*
 * Rich text block. Loaded only on pages that use it. Mobile first; desktop from 900px.
 * "Narrow" keeps lines to a comfortable reading length; "wide" uses the full page width.
 * Everything uses the design tokens.
 */

.richtext { padding: 40px 0; }
.richtext--surface { background: var(--surface); }

.richtext__inner { max-width: 68ch; }
.richtext__inner--wide { max-width: none; }

.richtext__title { margin-bottom: 0.5em; font-size: 1.9rem; line-height: 1.1; }

.richtext__content > * { margin: 0; }
.richtext__content > * + * { margin-top: 1em; }

.richtext__content h2 { margin-top: 1.6em; font-size: 1.5rem; }
.richtext__content h3 { margin-top: 1.4em; font-size: 1.2rem; }
.richtext__content h4 { margin-top: 1.2em; font-size: 1.05rem; }

.richtext__content ul,
.richtext__content ol { padding-left: 1.3em; }
.richtext__content li + li { margin-top: 0.35em; }

.richtext__content a { text-underline-offset: 3px; }
.richtext__content img { height: auto; border-radius: var(--card-r); }

.richtext__content blockquote {
	margin-inline: 0;
	padding: 4px 0;
	color: var(--muted);
	font-family: var(--fh);
	font-size: 1.15em;
	font-style: italic;
}

.richtext__content hr { border: 0; border-top: 1px solid var(--line); }

.richtext__content table { width: 100%; border-collapse: collapse; }
.richtext__content th,
.richtext__content td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; }

@media (min-width: 900px) {
	.richtext { padding: 56px 0; }
	.richtext__title { font-size: 2.6rem; }
}