.article h1,
.article p,
.ed-related h2,
.ed-related h3,
.ed-related p,
.ed-intro h1,
.ed-intro h2,
.ed-intro p,
.ed-list h3,
.ed-list p {
	margin: 0;
}

.article {
	padding: calc(var(--header-height) + 100px) var(--spacing-page) 150px;
	background: var(--color-white);
	flex-direction: column;
	align-items: center;
	gap: 72px;
	display: flex;
}

.article-head {
	text-align: center;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	width: min(911px, 100%);
	display: flex;
}

.article-title {
	flex-direction: column;
	align-items: center;
	gap: 16px;
	display: flex;
}

.article-title .t56 {
	max-width: 638px;
}

.article-intro {
	max-width: 514px;
}

.article-meta {
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 32px;
	display: flex;
}

.article-content {
	flex-direction: column;
	align-items: center;
	gap: 100px;
	width: 100%;
	display: flex;
}

.article-wide {
	aspect-ratio: 1376/715;
	width: 100%;
}

/* Blocks render flat and carry no theme classes, so these sibling rules rebuild the prototype's groups. */
.article-body {
	--article-text: min(514px, 100%);
	--article-quote: min(843px, calc(100vw - 2 * var(--spacing-page)));
	--article-group: 64px;
	--article-media: 100px;
	--article-image: 1376/715;
	--article-pair-image: 680/869;
	--wp--style--gallery-gap-default: 16px;
	color: var(--color-muted);
	font-size: var(--fs-14);
	letter-spacing: 0;
	line-height: 1.4;
	flex-direction: column;
	align-items: center;
	width: 100%;
	display: flex;
}

.article-body > * {
	width: var(--article-text);
	margin: var(--article-group) 0 0;
}

.article-body > p + p {
	margin-top: 12px;
}

.article-body > :is(h1, h2, h3, h4, h5, h6) {
	color: var(--color-ink);
	font: inherit;
	letter-spacing: inherit;
}

.article-body > :is(h1, h2, h3, h4, h5, h6) + * {
	margin-top: 16px;
}

.article-body > h2,
.article-body .wp-block-quote p {
	color: var(--color-ink);
	font-family: var(--font-display);
	font-size: var(--fs-40);
	font-weight: 400;
	letter-spacing: -.005em;
	line-height: 1.1;
}

.article-body a {
	text-decoration: underline;
}

.article-body > :is(ul, ol) {
	padding-left: 1.25em;
}

.article-body > .wp-block-quote {
	text-align: center;
	width: var(--article-quote);
	padding: 0;
	border: 0;
}

.article-body .wp-block-quote p {
	margin: 0;
}

.article-body .wp-block-quote cite {
	font-size: var(--fs-12);
	font-style: normal;
	margin-top: 16px;
	display: block;
}

.article-body > :is(.wp-block-image, .wp-block-gallery) {
	width: 100%;
}

.article-body > :is(.wp-block-image, .wp-block-gallery),
.article-body > :is(.wp-block-image, .wp-block-gallery) + * {
	margin-top: var(--article-media);
}

.article-body .wp-block-image {
	flex-direction: column;
	align-items: center;
	gap: 24px;
	margin: 0;
	display: flex;
}

/* Bricks sets image margins with a long :not() chain, so only an ID can replace them. */
#brx-content .article-body > .wp-block-image {
	margin-block: var(--article-media) 0;
}

#brx-content .article-body > .wp-block-image:first-child {
	margin-top: 0;
}

.article-body .wp-block-image a {
	width: 100%;
	display: block;
}

.article-body .wp-block-image img {
	aspect-ratio: var(--article-image);
	background: var(--color-frame);
	object-fit: cover;
	width: 100%;
	height: auto;
	display: block;
}

.article-body > .wp-block-gallery {
	flex-wrap: wrap;
	gap: 16px;
	display: flex;
}

.article-body .wp-block-gallery img {
	aspect-ratio: var(--article-pair-image);
}

.article-body figcaption {
	color: var(--color-muted);
	font-size: var(--fs-12);
	text-align: center;
	margin: 0;
}

.article-body .blocks-gallery-caption {
	width: 100%;
	margin-top: 8px;
}

.article-body > :first-child {
	margin-top: 0;
}

.ed-related {
	padding: 0 var(--spacing-page) 150px;
	background: var(--color-white);
	flex-direction: column;
	align-items: stretch;
	gap: 48px;
	display: flex;
}

.ed-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 100px 16px;
	width: 100%;
	display: grid;
}

.ed-card {
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	min-width: 0;
	display: flex;
}

.ed-card-img {
	aspect-ratio: 1;
	width: 100%;
	display: block;
}

.ed-card-body {
	flex-direction: column;
	flex: auto;
	gap: 24px;
	width: 100%;
	max-width: 448px;
	display: flex;
}

.ed-card-text {
	flex-direction: column;
	gap: 8px;
	display: flex;
}

.ed-card-text .ts24 {
	max-width: 340px;
}

.ed-card-text .te16 {
	max-width: 352px;
}

/* Journal listing. journal.js adds is-ready; before that, CSS shows the newest post as the feature and the rest as cards. */
.ed-intro {
	padding: calc(var(--header-height) + 100px) var(--spacing-page) 0;
	background: var(--color-white);
	flex-flow: column nowrap;
	align-items: stretch;
	gap: 64px;
	display: flex;
}

.ed-head {
	margin-bottom: 8px;
}

.ed-title {
	max-width: 443px;
}

.ed-lede {
	max-width: 347px;
}

.ed-filters {
	justify-content: space-between;
	align-items: flex-end;
	gap: 40px;
	display: flex;
}

.chips {
	box-shadow: inset 0 -.5px var(--color-chip-rule);
	gap: 24px;
	min-width: 0;
	display: flex;
}

.chip {
	color: var(--color-chip);
	font-family: var(--font-display);
	font-size: var(--fs-14);
	letter-spacing: .01em;
	line-height: normal;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	background: none;
	border: 0;
	flex-shrink: 0;
	padding: 0 0 8px;
	transition: color .3s;
	position: relative;
}

.chip:before {
	content: "";
	position: absolute;
	inset: -12px -8px 0;
}

.chip:after {
	content: "";
	border-top: .5px solid var(--color-ink);
	opacity: 0;
	transition: opacity .3s;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}

.chip[aria-pressed="true"] {
	color: var(--color-ink);
}

.chip[aria-pressed="true"]:after {
	opacity: 1;
}

@media (hover: hover) {
	.chip:hover {
		color: var(--color-ink);
	}
}

.ed-search {
	border-bottom: .5px solid var(--color-ink);
	color: var(--color-muted);
	cursor: text;
	align-items: center;
	gap: 16px;
	width: 345px;
	max-width: 100%;
	margin: 0;
	padding: 0 4px 8px;
	display: flex;
}

.ed-search-icon {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
}

.ed-search input {
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: var(--fs-14);
	letter-spacing: .01em;
	line-height: normal;
	background: none;
	border: 0;
	outline: 0;
	flex: 1 1 0;
	min-width: 0;
	padding: 0;
}

.ed-search input::placeholder {
	color: var(--color-muted);
	opacity: 1;
}

.ed-search input::-webkit-search-cancel-button {
	cursor: pointer;
}

.ed-search:focus-within {
	box-shadow: 0 .5px 0 var(--color-ink);
}

.ed-intro:not(.is-ready) .ed-search {
	visibility: hidden;
}

.ed-feature {
	justify-content: space-between;
	align-items: flex-end;
	gap: 32px;
	display: flex;
}

.ed-feature-img {
	aspect-ratio: 802/680;
	flex-shrink: 0;
	width: 55.6944%;
	display: block;
}

.ed-feature-body {
	flex-direction: column;
	align-items: flex-start;
	gap: 72px;
	width: 499px;
	max-width: 45%;
	display: flex;
}

.ed-feature-text {
	flex-direction: column;
	gap: 40px;
	display: flex;
}

.ed-feature-copy {
	flex-direction: column;
	gap: 16px;
	display: flex;
}

.ed-feature-copy .ts32 {
	max-width: 439px;
}

.ed-feature-copy .te24 {
	max-width: 428px;
}

.ed-empty {
	padding: 40px 0 120px;
}

.ed-list {
	padding: 125px var(--spacing-page) 150px;
	background: var(--color-white);
	flex-flow: column nowrap;
	align-items: center;
	gap: 125px;
	display: flex;
}

.jr-pair {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: start;
	gap: 16px;
	width: 100%;
	display: grid;
}

.jr-pair > :nth-child(2) {
	margin-top: 110px;
}

.ed-list .ed-grid {
	row-gap: 125px;
}

.ed-card.is-wide .ed-card-img {
	aspect-ratio: 680/448;
}

.ed-more {
	cursor: pointer;
	background: none;
	border: 0;
	padding: 0;
}

.ed-intro:not(.is-ready) .ed-feature ~ .ed-feature,
.ed-intro:not(.is-ready) .ed-feature ~ .ed-empty,
.ed-list:not(.is-ready) .ed-grid > .ed-card:first-child,
.ed-list:not(.is-ready) .ed-more,
.jr-pair:empty,
.ed-intro [hidden],
.ed-list[hidden],
.ed-list [hidden] {
	display: none;
}

@media (width<=1279px) {
	.ed-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 72px 24px;
	}

	.ed-card-img {
		aspect-ratio: 381/460;
	}

	.ed-related .sec-head-row > .text-link {
		align-self: flex-end;
	}

	.ed-intro {
		padding-top: calc(var(--header-height) + 96px);
		gap: 40px;
	}

	.ed-head {
		margin-bottom: 0;
	}

	.ed-filters {
		flex-direction: column;
		align-items: stretch;
		gap: 32px;
	}

	.chips {
		column-gap: 16px;
	}

	.ed-search {
		width: 100%;
	}

	.ed-feature {
		flex-direction: column;
		align-items: stretch;
		gap: 24px;
	}

	.ed-feature-img {
		aspect-ratio: 786/520;
		width: 100%;
	}

	.ed-feature-body {
		gap: 40px;
		width: 100%;
		max-width: none;
	}

	.ed-list {
		padding: 72px var(--spacing-page) 120px;
		gap: 72px;
	}

	.ed-list .ed-grid {
		row-gap: 72px;
	}

	.ed-card.is-wide .ed-card-img {
		aspect-ratio: 381/460;
	}

	.jr-pair {
		gap: 72px 24px;
	}

	.jr-pair > :nth-child(2) {
		margin-top: 0;
	}
}

@media (width>=768px) and (width<=1279px) {
	.article {
		padding: calc(var(--header-height) + 96px) var(--spacing-page) 120px;
		gap: 80px;
	}

	.article-head {
		gap: 24px;
	}

	.article-title .t56 {
		max-width: 428px;
	}

	.article-intro {
		max-width: 520px;
	}

	.article-content {
		gap: 80px;
	}

	.article-wide {
		aspect-ratio: 786/443;
	}

	.article-body {
		--article-text: min(560px, 100%);
		--article-quote: min(640px, calc(100vw - 2 * var(--spacing-page)));
		--article-media: 80px;
		--article-image: 786/443;
		--article-pair-image: 385/539;
	}

	.ed-related {
		gap: 40px;
		padding: 40px var(--spacing-page) 120px;
	}

	.ed-related .ed-card:first-child {
		grid-column: 1 / -1;
	}

	.ed-related .ed-card:first-child .ed-card-img {
		aspect-ratio: 786/495;
	}

	.ed-related .ed-card:first-child .ed-card-text > * {
		max-width: none;
	}

	.ed-feature-copy .ts32 {
		max-width: none;
	}

	.ed-feature-copy .te24 {
		max-width: 479px;
	}

	.ed-list {
		padding-top: 100px;
	}
}

@media (width<=767px) {
	.article {
		padding: calc(var(--header-height) + 48px) var(--spacing-page) 96px;
		gap: 40px;
	}

	.article-content {
		gap: 32px;
	}

	.article-wide {
		aspect-ratio: 350/231;
	}

	.article-body {
		--article-group: 32px;
		--article-media: 32px;
		--article-image: 350/231;
		--article-pair-image: 350/273;
	}

	/* WordPress sets gallery widths through an ID inside :not(), so min-width stacks them instead. */
	.article-body .wp-block-gallery .wp-block-image {
		min-width: 100%;
	}

	.ed-related {
		gap: 32px;
		padding: 100px var(--spacing-page) 96px;
	}

	.ed-related .sec-head-row,
	.ed-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
	}

	.ed-related .sec-head-row > .sec-head,
	.ed-head > .sec-head {
		flex: none;
		width: 100%;
	}

	.ed-related .sec-head-row > .text-link {
		align-self: flex-start;
	}

	.ed-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 56px;
	}

	.ed-card-img {
		aspect-ratio: 1;
	}

	.ed-intro {
		padding-top: calc(var(--header-height) + 48px);
		gap: 32px;
	}

	.chips {
		flex-wrap: wrap;
		gap: 12px;
	}

	.ed-feature-img {
		aspect-ratio: 350/297;
	}

	.ed-feature-body {
		gap: 32px;
	}

	.ed-list {
		padding: 192px var(--spacing-page) 96px;
		gap: 32px;
	}

	.ed-list .ed-grid {
		row-gap: 56px;
	}

	.jr-pair {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.ed-list .ed-card-img {
		aspect-ratio: 350/318;
	}

	.ed-card.is-wide .ed-card-img {
		aspect-ratio: 350/210;
	}

	.ed-list > .ed-more {
		margin-top: 48px;
	}
}