/* Wrap any run of copy in .typography and everything inside it is styled: the_content() on every
   page and post, and the classic editor (.mce-content-body), so the editor matches the site. */
@layer components {
	:is(.typography, .mce-content-body) > * {
		margin-top: 1.1em;
	}

	:is(.typography, .mce-content-body) > *:first-child {
		margin-top: 0;
	}

	:is(.typography, .mce-content-body) :is(h1, h2, h3, h4) {
		font-family: var(--font-serif);
		font-weight: 700;
		line-height: 1.2;
		text-wrap: balance;
	}

	:is(.typography, .mce-content-body) > :is(h1, h2):not(:first-child) {
		margin-top: 1.8em;
	}

	:is(.typography, .mce-content-body) > :is(h3, h4):not(:first-child) {
		margin-top: 1.5em;
	}

	:is(.typography, .mce-content-body) > :is(h1, h2, h3, h4) + * {
		margin-top: 0.5em;
	}

	:is(.typography, .mce-content-body) h1 {
		font-size: var(--text-h1);
	}

	:is(.typography, .mce-content-body) h2 {
		font-size: var(--text-h2);
	}

	:is(.typography, .mce-content-body) h3 {
		font-size: var(--text-h3);
	}

	:is(.typography, .mce-content-body) h4 {
		font-family: var(--font-sans);
		font-size: var(--text-label);
		letter-spacing: var(--tracking-label);
		text-transform: uppercase;
	}

	:is(.typography, .mce-content-body) :is(ul, ol) {
		padding-left: 1.25em;
	}

	:is(.typography, .mce-content-body) ul {
		list-style: disc;
	}

	:is(.typography, .mce-content-body) ol {
		list-style: decimal;
	}

	/* A list whose letters or numbers are part of its text, like "(a)" in the Terms and Conditions. */
	:is(.typography, .mce-content-body) .list-plain {
		list-style: none;
		padding-left: 1.5em;
	}

	:is(.typography, .mce-content-body) li + li {
		margin-top: 0.35em;
	}

	:is(.typography, .mce-content-body) li::marker {
		color: var(--color-muted);
	}

	:is(.typography, .mce-content-body) a {
		text-decoration-line: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 0.18em;
		overflow-wrap: break-word;
	}

	:is(.typography, .mce-content-body) a:hover {
		text-decoration-thickness: 2px;
	}

	:is(.typography, .mce-content-body) :is(strong, b) {
		font-weight: 700;
	}

	:is(.typography, .mce-content-body) blockquote {
		border-left: 3px solid var(--color-ink);
		padding-left: 1em;
		font-style: italic;
	}

	:is(.typography, .mce-content-body) hr {
		border: 0;
		border-top: 1px solid var(--color-rule);
		margin-block: 2em;
	}

	:is(.typography, .mce-content-body) table {
		width: 100%;
		border-collapse: collapse;
		font-family: var(--font-sans);
		font-size: var(--text-small);
	}

	:is(.typography, .mce-content-body) :is(th, td) {
		border-bottom: 1px solid var(--color-rule);
		padding: 0.6em 0.75em 0.6em 0;
		text-align: left;
		vertical-align: top;
	}

	/* On phones a wide table scrolls sideways in its own box, rather than widening the page. */
	@media not all and (min-width: 40rem) {
		:is(.typography, .mce-content-body) table {
			display: block;
			overflow-x: auto;
		}

		:is(.typography, .mce-content-body) :is(th, td) {
			min-width: 7rem;
		}
	}

	:is(.typography, .mce-content-body) th {
		font-weight: 700;
	}

	/* Images and the classic editor's alignment classes. Floats only when there is room beside them. */
	:is(.typography, .mce-content-body) img {
		display: inline-block;
		max-width: 100%;
		height: auto;
	}

	:is(.typography, .mce-content-body) :is(.alignnone, .aligncenter) {
		display: block;
	}

	:is(.typography, .mce-content-body) .aligncenter {
		margin-inline: auto;
	}

	:is(.typography, .mce-content-body) :is(.alignleft, .alignright) {
		display: block;
		margin: 0 auto 1em;
	}

	@media (min-width: 40rem) {
		:is(.typography, .mce-content-body) .alignleft {
			float: left;
			max-width: 50%;
			margin: 0.3em 1.5em 1em 0;
		}

		:is(.typography, .mce-content-body) .alignright {
			float: right;
			max-width: 50%;
			margin: 0.3em 0 1em 1.5em;
		}
	}

	:is(.typography, .mce-content-body)::after {
		content: "";
		display: table;
		clear: both;
	}

	:is(.typography, .mce-content-body) :is(.wp-caption, figure) {
		max-width: 100%;
	}

	:is(.typography, .mce-content-body) :is(.wp-caption-text, figcaption) {
		margin-top: 0.5em;
		color: var(--color-muted);
		font-family: var(--font-sans);
		font-size: var(--text-label);
		line-height: 1.4;
	}

	:is(.typography, .mce-content-body) :is(iframe, video) {
		display: block;
		width: 100%;
	}

	/* An intro paragraph, slightly larger. */

	/* Small capitals label, used above headings and in the header, footer and cards. */
	.label {
		font-family: var(--font-sans);
		font-size: var(--text-label);
		font-weight: 600;
		letter-spacing: var(--tracking-label);
		line-height: 1.3;
		text-transform: uppercase;
	}

	.page-title {
		font-size: var(--text-h1);
		line-height: 1.12;
		letter-spacing: -0.01em;
	}

	.section-title {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 1rem;
		border-top: 1px solid var(--color-ink);
		padding-top: 0.6rem;
		margin-bottom: 1.25rem;
	}

	.section-title > :first-child {
		font-family: var(--font-sans);
		font-size: var(--text-label);
		font-weight: 700;
		letter-spacing: var(--tracking-label);
		text-transform: uppercase;
	}

	.section-title a {
		font-family: var(--font-sans);
		font-size: var(--text-label);
		font-weight: 600;
	}
}