/* Typography follows the homepage's 1120px sections, palette and rounded details. */
.np-block.text-content {
	color: var(--muted);
	font-size: 16px;
	line-height: 1.7;
}

.text-content .text-content__body > * { margin-block: 0 1.25em; }
.text-content .text-content__body > :last-child { margin-bottom: 0; }
.text-content .text-content__body::after { content: ""; display: block; clear: both; }

.text-content .text-content__body :where(h1, h2, h3, h4, h5, h6) {
	color: var(--ink);
	font-weight: 700;
	line-height: 1.2;
	margin-block: 1.6em .65em;
	text-wrap: balance;
}

.text-content .text-content__body > :first-child { margin-top: 0; }
.text-content .text-content__body h1 { font-size: clamp(34px, 4vw, 44px); letter-spacing: -1.8px; }
.text-content .text-content__body h2 { font-size: 35px; letter-spacing: -1.5px; }
.text-content .text-content__body h3 { font-size: 27px; letter-spacing: -1px; }
.text-content .text-content__body h4 { font-size: 22px; letter-spacing: -.5px; }
.text-content .text-content__body h5 { font-size: 19px; }
.text-content .text-content__body h6 { font-size: 17px; }
.text-content .text-content__body strong { color: var(--ink); font-weight: 700; }
.text-content .text-content__body :where(h1, h2, h3) em { font-family: Georgia, "Times New Roman", serif; }

.text-content .text-content__body a {
	color: var(--purple);
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
}
.text-content .text-content__body a:hover { text-decoration-thickness: 2px; }
.text-content .text-content__body :where(ul, ol) { padding-inline-start: 1.5em; }
.text-content .text-content__body li { padding-inline-start: .25em; margin-block: .4em; overflow-wrap: anywhere; }
.text-content .text-content__body li::marker { color: var(--purple); font-weight: 700; }
.text-content .text-content__body li > :where(ul, ol) { margin-block: .5em; }

.text-content .text-content__body blockquote {
	margin-inline: 0;
	padding: 22px 28px;
	border-inline-start: 4px solid var(--purple);
	border-radius: 0 16px 16px 0;
	background: color-mix(in srgb, var(--lilac) 12%, var(--paper));
	color: var(--ink);
	font-size: 18px;
}
.text-content .text-content__body blockquote > :first-child { margin-top: 0; }
.text-content .text-content__body blockquote > :last-child { margin-bottom: 0; }
.text-content .text-content__body blockquote cite { color: var(--muted); font-size: 14px; }
.text-content .text-content__body hr { height: 1px; margin-block: 32px; border: 0; background: var(--line); }

.text-content .text-content__body table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
	border-spacing: 0;
	font-size: 14px;
}
.text-content .text-content__body :where(th, td) { border: 1px solid var(--line); padding: 12px 16px; text-align: start; vertical-align: top; }
.text-content .text-content__body th { color: var(--ink); background: color-mix(in srgb, var(--lilac) 12%, var(--paper)); font-weight: 700; }
.text-content .text-content__body tr:nth-child(even) td { background: color-mix(in srgb, var(--lilac) 4%, var(--paper)); }
.text-content .text-content__body :where(img, video) { max-width: 100%; height: auto; border-radius: 16px; }
.text-content .text-content__body figure { max-width: 100%; margin-inline: 0; }
.text-content .text-content__body :where(figcaption, .wp-caption-text) { margin-top: 8px; color: var(--muted); font-size: 13px; text-align: center; }
.text-content .text-content__body .aligncenter { display: block; margin-inline: auto; }
.text-content .text-content__body .alignleft { float: left; max-width: 48%; margin: 0 24px 20px 0; }
.text-content .text-content__body .alignright { float: right; max-width: 48%; margin: 0 0 20px 24px; }
.text-content .text-content__body pre { max-width: 100%; overflow-x: auto; padding: 20px; background: #151423; color: #fbfaf8; border-radius: 12px; }
.text-content .text-content__body code { font-size: .9em; overflow-wrap: anywhere; }
.text-content .text-content__placeholder { padding: 24px; border: 1px dashed var(--line); border-radius: 16px; color: var(--muted); }

@media (max-width: 760px) {
	.text-content .text-content__body h2 { font-size: 29px; letter-spacing: -1px; }
	.text-content .text-content__body h3 { font-size: 24px; }
	.text-content .text-content__body blockquote { padding: 18px 20px; font-size: 17px; }
	.text-content .text-content__body :where(th, td) { padding: 10px 12px; }
	.text-content .text-content__body :where(.alignleft, .alignright) { float: none; max-width: 100%; margin-inline: 0; }
}