/**
 * Still Water Article text (sw-post-content): Figma "Article body" at 1440, 834 and 390.
 *
 * White. Padding 80 / 56 / 32. Blocks 20 apart in a 792 column: paragraphs body-lg (18/28;
 * 16/24 on phones), a serif pull quote (h2 36/44; h3 28/36 on phones) with a 2px ink rule on
 * the left and padding 8 / 0 / 8 / 24 (16 on phones), figures with square corners and a small
 * muted caption 8 under them. The "sw-aside" group ("At a glance": mist, radius 16, padding 24)
 * sits in a 384 column 24 to the right of the text on desktop, and 40 under the text on tablet
 * and phone. Inside it: the label, three facts 16 apart (a 1px line, 12 above the label 14/20
 * muted, the value 16/24 ink 4 under it), the "Sources" label and the small sources.
 */

.sw-pcontent__body {
	max-width: 792px;
	font-size: var(--sw-fs-body-lg);
	line-height: var(--sw-lh-body-lg);
}

.sw-pcontent__body > * {
	margin: 0 0 20px;
}

.sw-pcontent__body > :last-child {
	margin-bottom: 0;
}

.sw-pcontent__body a {
	color: var(--sw-heading);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.sw-pcontent__body blockquote {
	margin-right: 0;
	margin-left: 0;
	padding: 8px 0 8px 24px;
	border-left: 2px solid var(--sw-c-ink);
	color: var(--sw-heading);
	font-family: var(--sw-serif);
	font-size: var(--sw-fs-h2);
	line-height: var(--sw-lh-h2);
}

.sw-pcontent__body blockquote p {
	margin: 0;
}

.sw-pcontent__body figure {
	margin-right: 0;
	margin-left: 0;
}

.sw-pcontent__body img {
	display: block;
	width: 100%;
	height: auto;
}

.sw-pcontent__body figcaption,
.sw-pcontent__body .has-small-font-size {
	color: var(--sw-muted);
	font-size: var(--sw-fs-small);
	line-height: var(--sw-lh-small);
}

.sw-pcontent__body figcaption {
	margin-top: 8px;
}

/* "At a glance" box. */
.sw-pcontent__body .sw-aside {
	padding: 24px;
	border-radius: var(--sw-radius-panel);
	background: var(--sw-c-mist);
}

.sw-pcontent__body .sw-aside > * {
	margin: 0;
}

.sw-pcontent__body .sw-aside .sw-label {
	color: var(--sw-muted);
}

.sw-pcontent__body .sw-aside > * + .sw-label,
.sw-pcontent__body .sw-aside > .sw-label + *,
.sw-pcontent__body .sw-aside .sw-aside__label {
	margin-top: 16px;
}

.sw-pcontent__body .sw-aside .sw-aside__label {
	padding-top: 12px;
	border-top: 1px solid var(--sw-line);
	color: var(--sw-muted);
	font-size: var(--sw-fs-small);
	line-height: var(--sw-lh-small);
}

.sw-pcontent__body .sw-aside .sw-aside__value {
	margin-top: 4px;
	color: var(--sw-heading);
	font-size: var(--sw-fs-body);
	line-height: var(--sw-lh-body);
}

/* Desktop: the box beside the text. */
@media (min-width: 1025px) {
	.sw-pcontent__body--aside {
		display: grid;
		grid-template-columns: minmax(0, 792fr) minmax(0, 384fr);
		column-gap: 24px;
		max-width: none;
	}

	.sw-pcontent__body--aside > * {
		grid-column: 1;
	}

	.sw-pcontent__body--aside > .sw-aside {
		grid-column: 2;
		grid-row: 1 / span 40;
		align-self: start;
	}
}

@media (max-width: 1024px) {
	.sw-pcontent__body {
		max-width: none;
	}

	.sw-pcontent__body > .sw-aside {
		margin-top: 40px;
	}
}

@media (max-width: 767px) {
	.sw-pcontent__body blockquote {
		padding-left: 16px;
		font-size: var(--sw-fs-h3);
		line-height: var(--sw-lh-h3);
	}
}