/* HerdLine design tokens and shared components. */
:root {
	--font-display: "new-science", ui-sans-serif, system-ui, sans-serif;
	--font-body: "mundial", ui-sans-serif, system-ui, sans-serif;
	--font-system: system-ui, ui-sans-serif, sans-serif;
	--font-serif: "Crimson Pro", Georgia, ui-serif, serif;

	--color-ink: #131716;
	--color-green-darkest: #003314;
	--color-green-darker: #007129;
	--color-green-dark: #028833;
	--color-green: #00ac3e;
	--color-green-bright: #08cd4f;
	--color-green-light: #fafffc;
	--color-white: #fff;
	--color-brown: #925d49;
	--color-brown-dark: #402d20;
	--color-gray-50: #fafafa;
	--color-gray-100: #edeeee;
	--color-gray-200: #cbcece;
	--color-gray-300: #a9adad;
	--color-gray-400: #868c8c;
	--color-gray-500: #535c5c;
	--color-gray-600: #3a4040;
	--color-gray-700: #313737;
	--color-gray-800: #212424;
	--color-gray-900: #131716;

	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.25rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
	--space-10: 2.5rem;
	--space-12: 3rem;
	--space-14: 3.5rem;
	--space-16: 4rem;
	--space-20: 5rem;
	--space-24: 6rem;
	--space-28: 7rem;
	--space-36: 9rem;

	--header-height: 70px;
	--content-width: 90rem;
	--reading-width: 68ch;
	--radius-sm: 2px;
	--radius-md: 0.5rem;
	--shadow-card: 0 22px 45px -18px rgb(0 0 0 / 35%);
	--shadow-float: 0 24px 70px -28px rgb(0 0 0 / 45%);
	--ease-fluid: cubic-bezier(0.3, 0, 0, 1);
	--ease-snappy: cubic-bezier(0.2, 0, 0, 1);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	-webkit-font-smoothing: antialiased;
}

body {
	min-height: 100%;
	margin: 0;
	overflow-x: hidden;
	background: var(--color-white);
	color: var(--color-gray-900);
	font-family: var(--font-body);
}

img,
svg,
video {
	display: block;
	max-width: 100%;
}

figure,
h1,
h2,
h3,
h4,
p {
	margin-top: 0;
}

a {
	color: inherit;
	text-decoration: none;
}

button,
input,
textarea,
select {
	font: inherit;
}

[x-cloak] {
	display: none !important;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	top: var(--space-2);
	left: var(--space-2);
	z-index: 100000;
	display: block;
	width: auto;
	height: auto;
	padding: var(--space-3) var(--space-5);
	clip: auto !important;
	clip-path: none;
	background: var(--color-white);
	color: var(--color-green-dark);
	font-size: 0.875rem;
	font-weight: 700;
	text-decoration: none;
}

figure.wp-block-image {
	margin: 0;
}

.site-container {
	width: min(100% - 3rem, var(--content-width));
	margin-inline: auto;
}

.site-container--narrow {
	max-width: 72rem;
}

.section-shell {
	padding-block: var(--space-16);
}

.section-shell--compact {
	padding-block: var(--space-12);
}

.eyebrow {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	color: var(--color-green);
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.3em;
	text-transform: uppercase;
}

.eyebrow__rule {
	width: 2.5rem;
	height: 1px;
	flex: 0 0 auto;
	background: currentcolor;
}

.eyebrow--bright {
	color: var(--color-green-bright);
}

.eyebrow--light {
	color: var(--color-white);
}

.button {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--space-4);
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	font-family: var(--font-body);
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 1;
	text-transform: uppercase;
	vertical-align: middle;
	transition: color 350ms var(--ease-fluid), opacity 350ms var(--ease-fluid);
}

.button__arrow {
	display: grid;
	align-items: center;
	place-items: center;
	width: 38px;
	height: 38px;
	flex: 0 0 auto;
	border: 1.5px solid currentcolor;
	border-radius: 50%;
	transition: background-color 350ms var(--ease-fluid), color 350ms var(--ease-fluid), transform 350ms var(--ease-fluid);
}

.button__arrow svg {
	width: 1rem;
	height: 1rem;
}

.button:hover .button__arrow {
	transform: translateX(0.25rem);
}

.button--dark {
	color: var(--color-gray-900);
}

.button--dark .button__arrow {
	color: var(--color-green);
}

.button--on-green {
	color: var(--color-white);
}

.button--on-green .button__arrow {
	color: var(--color-white);
}

.button--on-dark {
	color: var(--color-white);
}

.button--on-dark .button__arrow {
	color: var(--color-green-bright);
}

.button--secondary {
	opacity: 0.5;
}

.button--secondary:hover {
	opacity: 1;
}

.button--dark:hover .button__arrow {
	background: var(--color-green);
	color: var(--color-white);
}

.button--on-green:hover .button__arrow {
	background: var(--color-white);
	color: var(--color-green);
}

.button--on-dark:hover .button__arrow {
	background: var(--color-green-bright);
	color: var(--color-gray-900);
}

.media-caption {
	display: flex;
	gap: var(--space-3);
	margin-top: var(--space-4);
	color: var(--color-gray-500);
	font-size: 0.95rem;
	font-weight: 500;
	line-height: 1.375;
}

.media-caption__rule {
	width: 0.25rem;
	flex: 0 0 auto;
	align-self: stretch;
	border-radius: 999px;
	background: currentcolor;
}

.media-caption__credit {
	display: block;
	margin-top: var(--space-1);
	font-family: var(--font-display);
	font-size: 0.6875rem;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.story-card {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--radius-sm);
	background: var(--color-green-darkest);
	color: var(--color-white);
}

.story-card__image,
.story-card__fallback,
.story-card__scrim {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.story-card__image {
	object-fit: cover;
	transition: transform 1.2s var(--ease-fluid);
}

.story-card:hover .story-card__image {
	transform: scale(1.06);
}

.story-card__fallback {
	background: linear-gradient(135deg, var(--color-green-dark), var(--color-green-darkest));
}

.story-card__scrim {
	background: linear-gradient(to top, rgb(0 0 0 / 85%), rgb(0 0 0 / 30%), transparent);
}

.story-card__content {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: var(--space-5);
}

.story-card__kicker,
.story-card__author {
	display: block;
	font-family: var(--font-display);
	font-size: 0.75rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.story-card__kicker {
	color: var(--color-green-bright);
	font-weight: 700;
}

.story-card__title {
	margin: var(--space-2) 0 0;
	font-family: var(--font-serif);
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1.2;
	text-wrap: balance;
}

.story-card__description,
.story-card__author {
	margin-top: var(--space-2);
	color: rgb(255 255 255 / 78%);
}

.story-card__description {
	font-family: var(--font-system);
	font-size: 0.875rem;
	line-height: 1.375;
}

.text-shadow {
	text-shadow: 0 2px 12px rgb(0 0 0 / 55%);
}

[data-animate] {
	opacity: 0;
	transform: translateY(1.75rem);
	transition: opacity 700ms var(--ease-fluid), transform 700ms var(--ease-fluid);
}

[data-animate][data-in-view="true"] {
	opacity: 1;
	transform: none;
}

.animate-group > *:nth-child(2) { transition-delay: 100ms; }
.animate-group > *:nth-child(3) { transition-delay: 200ms; }
.animate-group > *:nth-child(4) { transition-delay: 300ms; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}

	[data-animate] {
		opacity: 1;
		transform: none;
	}
}

@media (min-width: 64rem) {
	.site-container {
		width: min(100% - 4rem, var(--content-width));
	}

	.section-shell {
		padding-block: var(--space-28);
	}

	.section-shell--compact {
		padding-block: var(--space-24);
	}

	.story-card__content {
		padding: var(--space-8);
	}
}

@font-face {
	font-family: "Montserrat";
	src: url("../fonts/Montserrat-VariableFont_wght.ttf") format("truetype");
	font-weight: 1 1000;
	font-display: swap;
}

@font-face {
	font-family: "Nunito Sans";
	src: url("../fonts/NunitoSans-VariableFont_YTLC%2Copsz%2Cwdth%2Cwght.ttf") format("truetype");
	font-weight: 1 1000;
	font-display: swap;
}

@font-face {
	font-family: "Crimson Pro";
	src: url("../fonts/CrimsonPro-VariableFont_wght.ttf") format("truetype");
	font-weight: 1 1000;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Crimson Pro";
	src: url("../fonts/CrimsonPro-Italic-VariableFont_wght.ttf") format("truetype");
	font-weight: 1 1000;
	font-style: italic;
	font-display: swap;
}
/* Site chrome, WordPress templates, and shared shell partials. */
.article-chrome {
	position: fixed;
	inset: 0 0 auto;
	z-index: 1000;
}

.article-chrome__masthead {
	position: relative;
	height: var(--header-height);
	background: var(--color-gray-900);
}

.article-chrome__inner {
	display: flex;
	height: 100%;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
}

.article-chrome__brand,
.article-chrome__edition {
	flex: 0 0 auto;
}

.article-chrome__brand {
	display: block;
}

.article-chrome__logo {
	width: auto;
	height: 2.5rem;
}

.article-chrome__desktop-title {
	display: none;
}

.article-chrome__title-text,
.article-chrome__mobile-title-text {
	display: block;
	overflow: hidden;
	color: var(--color-white);
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: 0.025em;
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
}

.article-chrome__edition {
	color: var(--color-white);
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: 700;
	text-transform: uppercase;
}

.article-chrome__edition-link {
	display: flex;
	align-items: center;
	gap: var(--space-1);
}

.article-chrome__edition-link:hover {
	text-decoration: underline;
}

.article-chrome__back-icon {
	width: 1rem;
	height: 1rem;
	flex: 0 0 auto;
}

.article-chrome__desktop-progress,
.article-chrome__mobile-progress {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 3px;
	background: var(--color-green-bright);
}

.article-chrome__desktop-progress {
	display: none;
}

.article-chrome__mobile-title {
	pointer-events: none;
	background: var(--color-gray-900);
	box-shadow: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%);
	opacity: 0;
	transform: translateY(-0.5rem);
	transition: opacity 300ms var(--ease-fluid), transform 300ms var(--ease-fluid);
}

.article-chrome__mobile-title--revealed {
	pointer-events: auto;
	opacity: 1;
	transform: none;
}

.article-chrome__mobile-title-inner {
	position: relative;
	padding: var(--space-2) var(--space-6);
}

.article-chrome__mobile-title-text {
	font-size: 0.75rem;
}

.password-page {
	padding-top: 8rem;
	padding-bottom: var(--space-20);
}

.password-page__panel,
.password-page__form {
	max-width: 42rem;
	margin-inline: auto;
	padding: var(--space-10) var(--space-6);
	border-radius: var(--radius-sm);
	background: var(--color-gray-100);
}

.password-page__form {
	display: grid;
	gap: var(--space-4);
}

.password-page__label,
.comment-form__field {
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.password-page__input,
.comment-form__input {
	display: block;
	width: 100%;
	margin-top: var(--space-2);
	padding: 0.75rem var(--space-4);
	border: 1px solid var(--color-gray-400);
	border-radius: var(--radius-sm);
	background: var(--color-white);
	color: var(--color-gray-900);
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	transition: border-color 200ms ease, box-shadow 200ms ease;
}

.password-page__input:focus,
.comment-form__input:focus {
	border-color: var(--color-green);
	box-shadow: 0 0 0 2px rgb(0 172 62 / 30%);
	outline: none;
}

.password-page__submit {
	justify-self: start;
	cursor: pointer;
}

.related-stories {
	background: var(--color-gray-900);
	color: var(--color-white);
}

.related-stories.section-shell {
	padding-block: var(--space-16);
}

.related-stories__title {
	margin: var(--space-3) 0 var(--space-10);
	font-size: 1.875rem;
	font-weight: 600;
}

.related-stories__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-6);
}

.related-stories__card {
	aspect-ratio: 3 / 4;
}

.related-stories .story-card__scrim {
	background: linear-gradient(to top, rgb(0 0 0 / 90%), rgb(0 0 0 / 45%), transparent);
}

.related-stories .story-card__kicker {
	letter-spacing: 0.25em;
}

.related-stories .story-card__author {
	margin-top: var(--space-3);
	color: rgb(255 255 255 / 80%);
	letter-spacing: 0.15em;
}

.site-footer {
	background: var(--color-gray-900);
	color: var(--color-gray-300);
}

.site-footer__accent {
	height: 1px;
	background: rgb(8 205 79 / 80%);
}

.site-footer__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-8);
	padding-block: var(--space-14);
	text-align: center;
}

.site-footer__brand,
.site-footer__social-link {
	display: inline-flex;
}

.site-footer__logo {
	width: auto;
	height: 3rem;
}

.site-footer__navigation,
.site-footer__socials,
.site-menu,
.pagination__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__navigation {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	column-gap: var(--space-8);
	row-gap: var(--space-3);
	font-family: var(--font-display);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.site-footer__navigation-link,
.site-footer__social-icon {
	transition: color 250ms ease, fill 250ms ease;
}

.site-footer__navigation-link:hover {
	color: var(--color-green-bright);
}

.site-footer__socials {
	display: flex;
	align-items: center;
	gap: var(--space-5);
}

.site-footer__social-icon {
	width: 1.25rem;
	height: 1.25rem;
	flex: 0 0 auto;
	fill: var(--color-gray-400);
}

.site-footer__social-link:hover .site-footer__social-icon {
	fill: var(--color-white);
}

.site-footer__copyright {
	max-width: 28rem;
	margin: 0;
	color: var(--color-gray-500);
	font-size: 0.875rem;
}

.graphic-accent {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	margin-block: var(--space-6);
	text-align: left;
}

.graphic-accent__image {
	height: var(--space-6);
}

.site-menu {
	display: flex;
	align-items: center;
	gap: var(--space-6);
}

.site-menu .site-menu {
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-2);
	margin-top: var(--space-2);
}

.site-menu__link:hover {
	color: var(--color-green);
}

.post-list,
.single-story,
.error-page {
	padding-top: calc(var(--header-height) + var(--space-16));
}

.post-list__title,
.single-story__title {
	font-family: var(--font-display);
	font-size: clamp(2rem, 6vw, 4rem);
	line-height: 1.05;
}

.post-list__items {
	display: grid;
	gap: var(--space-8);
}

.tease {
	display: grid;
	gap: var(--space-4);
	padding-bottom: var(--space-8);
	border-bottom: 1px solid var(--color-gray-200);
}

.tease__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 4vw, 2.25rem);
	line-height: 1.15;
}

.tease__link:hover {
	color: var(--color-green-darker);
}

.tease__excerpt {
	margin: 0;
	color: var(--color-gray-600);
	font-size: 1.125rem;
	line-height: 1.6;
}

.tease__image {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.pagination {
	margin-top: var(--space-12);
}

.pagination__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-2);
}

.pagination__link {
	display: inline-flex;
	min-width: 2.75rem;
	min-height: 2.75rem;
	align-items: center;
	justify-content: center;
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--color-gray-300);
	border-radius: var(--radius-sm);
	background: var(--color-white);
	color: var(--color-gray-800);
	font-weight: 700;
}

.pagination a.pagination__link:hover,
.pagination__item--current .pagination__link {
	border-color: var(--color-green-darker);
	background: var(--color-green-darker);
	color: var(--color-white);
}

.pagination__item--disabled .pagination__link {
	cursor: not-allowed;
	opacity: 0.45;
}

.single-story__hero {
	width: 100%;
	max-height: 18.75rem;
	object-fit: cover;
}

.single-story__content,
.discussion {
	max-width: var(--reading-width);
	margin-inline: auto;
}

.single-story__content {
	padding-block: var(--space-10);
}

.single-story__byline {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	color: var(--color-gray-500);
	font-family: var(--font-display);
	font-size: 0.875rem;
	text-transform: uppercase;
}

.single-story__body {
	font-size: 1.125rem;
	line-height: 1.75;
}

.discussion {
	padding-top: var(--space-10);
	border-top: 1px solid var(--color-gray-200);
}

.discussion__title,
.comment-form__title,
.comment__replies-title {
	font-family: var(--font-display);
}

.discussion__closed,
.comment-form__notice {
	color: var(--color-gray-500);
}

.comment {
	padding-block: var(--space-6);
	border-bottom: 1px solid var(--color-gray-200);
}

.comment__author {
	margin-bottom: var(--space-3);
	font-family: var(--font-display);
	font-size: 1rem;
}

.comment__content {
	line-height: 1.6;
}

.comment__replies,
.comment__children {
	margin-top: var(--space-6);
	padding-left: var(--space-6);
	border-left: 2px solid var(--color-gray-200);
}

.comment-form {
	margin-top: var(--space-8);
}

.comment-form__form {
	display: grid;
	gap: var(--space-5);
}

.comment-form__field {
	display: block;
}

.comment-form__input--textarea {
	min-height: 8rem;
	resize: vertical;
}

.comment-form__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

.comment-form__notice {
	margin: 0;
	font-size: 0.875rem;
}

.error-page__message {
	font-size: 1.25rem;
}

@media (min-width: 40rem) {
	.related-stories__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tease {
		grid-template-columns: minmax(0, 1fr) minmax(12rem, 35%);
	}

	.tease__image {
		grid-column: 2;
		grid-row: 1 / span 2;
	}
}

@media (min-width: 48rem) {
	.article-chrome__desktop-title {
		position: absolute;
		left: 50%;
		display: block;
		width: 46%;
		max-width: 46%;
		padding-inline: var(--space-4);
		pointer-events: none;
		text-align: center;
		opacity: 0;
		transform: translate(-50%, var(--space-1));
		transition: opacity 500ms var(--ease-fluid), transform 500ms var(--ease-fluid);
	}

	.article-chrome__desktop-title--revealed {
		pointer-events: auto;
		opacity: 1;
		transform: translate(-50%, 0);
	}

	.article-chrome__title-text {
		font-size: 0.875rem;
	}

	.article-chrome__desktop-progress {
		display: block;
	}

	.article-chrome__mobile-title {
		display: none;
	}
}

@media (min-width: 64rem) {
	.article-chrome__logo {
		height: 3rem;
	}

	.article-chrome__back-icon {
		margin-top: 0.125rem;
	}

	.password-page {
		padding-top: 10rem;
		padding-bottom: var(--space-28);
	}

	.password-page__panel,
	.password-page__form {
		padding-inline: var(--space-12);
	}

	.related-stories.section-shell {
		padding-block: var(--space-24);
	}

	.related-stories__title {
		font-size: 2.25rem;
	}

	.related-stories__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--space-8);
	}

	.related-stories .story-card__kicker {
		font-size: 0.875rem;
		letter-spacing: 0.25em;
	}

	.related-stories .story-card__title {
		font-size: 1.875rem;
	}

	.site-footer__logo {
		height: var(--space-24);
	}
}
/* Editorial content blocks and embedded article components. */

/* Basic content. */
.editorial-content {
	--editorial-gradient: var(--color-white);
	--editorial-rule: var(--color-gray-900);
	--editorial-caption: var(--color-gray-500);
	--editorial-pattern-dot: rgb(0 172 62 / 30%);
	--editorial-pattern-line: rgb(0 172 62 / 14%);
	--editorial-pattern-grid: rgb(17 24 39 / 6%);
	position: relative;
	padding-block: var(--space-12);
	background: var(--color-white);
}

.editorial-content::before {
	position: absolute;
	inset: 0;
	z-index: 0;
	content: "";
	background-position: center;
	background-size: cover;
	background-attachment: fixed;
	filter: grayscale(1);
}

.editorial-content--green {
	--editorial-gradient: var(--color-green);
	--editorial-rule: var(--color-white);
	--editorial-caption: rgb(255 255 255 / 70%);
	--editorial-pattern-dot: rgb(255 255 255 / 22%);
	--editorial-pattern-line: rgb(255 255 255 / 12%);
	--editorial-pattern-grid: rgb(255 255 255 / 10%);
	background: var(--color-green);
}

.editorial-content--black {
	--editorial-gradient: var(--color-gray-900);
	--editorial-rule: var(--color-white);
	--editorial-caption: var(--color-gray-300);
	--editorial-pattern-dot: rgb(255 255 255 / 22%);
	--editorial-pattern-line: rgb(255 255 255 / 12%);
	--editorial-pattern-grid: rgb(255 255 255 / 10%);
	background: var(--color-gray-900);
}

.editorial-content--viewport,
.editorial-content--viewport .editorial-content__body {
	min-height: calc(100svh - var(--header-height));
}

.editorial-content__gradient {
	display: none;
}

.editorial-content__texture {
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 0;
	pointer-events: none;
}

.editorial-content__texture--edge {
	right: 0;
	width: 10%;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 60%);
	mask-image: linear-gradient(to right, transparent, #000 60%);
}

.editorial-content__texture--field {
	display: none;
}

.editorial-content--pattern-side-dots .editorial-content__texture {
	background-image: radial-gradient(circle, var(--editorial-pattern-dot) 1.5px, transparent 1.6px);
	background-size: 22px 22px;
}

.editorial-content--pattern-side-diagonal .editorial-content__texture {
	background-image: repeating-linear-gradient(45deg, var(--editorial-pattern-line) 0 1px, transparent 1px 12px);
}

.editorial-content--pattern-side-grid .editorial-content__texture {
	background-image: linear-gradient(var(--editorial-pattern-grid) 1px, transparent 1px), linear-gradient(90deg, var(--editorial-pattern-grid) 1px, transparent 1px);
	background-size: 30px 30px;
}

.editorial-content--pattern-side-vertical .editorial-content__texture {
	background-image: repeating-linear-gradient(90deg, var(--editorial-pattern-line) 0 1px, transparent 1px 14px);
}

.editorial-content--pattern-side-crosshatch .editorial-content__texture {
	background-image: repeating-linear-gradient(45deg, var(--editorial-pattern-line) 0 1px, transparent 1px 12px), repeating-linear-gradient(-45deg, var(--editorial-pattern-line) 0 1px, transparent 1px 12px);
}

.editorial-content--copy-left.editorial-content--pattern-side-rings .editorial-content__texture {
	background-image: repeating-radial-gradient(circle at 100% 50%, var(--editorial-pattern-line) 0 1px, transparent 1px 18px);
}

.editorial-content--copy-right.editorial-content--pattern-side-rings .editorial-content__texture {
	background-image: repeating-radial-gradient(circle at 0% 50%, var(--editorial-pattern-line) 0 1px, transparent 1px 18px);
}

.editorial-content--pattern-topleft::before,
.editorial-content--pattern-topright::before,
.editorial-content--pattern-bottomleft::before,
.editorial-content--pattern-bottomright::before {
	background-repeat: no-repeat;
}

.editorial-content--pattern-topleft::before {
	background-image: linear-gradient(135deg, rgb(19 23 22 / 8%) 0 8%, rgb(19 23 22 / 6%) 8% 48%, rgb(19 23 22 / 3.5%) 48.05% 54%, transparent 54.05% 100%);
}

.editorial-content--pattern-topright::before {
	background-image: linear-gradient(-135deg, rgb(19 23 22 / 8%) 0 8%, rgb(19 23 22 / 6%) 8% 48%, rgb(19 23 22 / 3.5%) 48.05% 54%, transparent 54.05% 100%);
}

.editorial-content--pattern-bottomleft::before {
	background-image: linear-gradient(45deg, rgb(19 23 22 / 8%) 0 8%, rgb(19 23 22 / 6%) 8% 48%, rgb(19 23 22 / 3.5%) 48.05% 54%, transparent 54.05% 100%);
}

.editorial-content--pattern-bottomright::before {
	background-image: linear-gradient(-45deg, rgb(19 23 22 / 8%) 0 8%, rgb(19 23 22 / 6%) 8% 48%, rgb(19 23 22 / 3.5%) 48.05% 54%, transparent 54.05% 100%);
}

.editorial-content--pattern-middlevs {
	background-image: repeating-linear-gradient(135deg, transparent 0 4rem, rgb(19 23 22 / 5%) 4rem 8rem);
	background-attachment: fixed;
}

.editorial-content--pattern-graph {
	background-color: var(--color-white);
	background-image: url("../assets/patterns/graph.svg");
}

.editorial-content--pattern-texture {
	background-color: var(--color-white);
	background-image: url("../assets/patterns/texture.svg");
}

.editorial-content--pattern-topography {
	background-color: var(--color-white);
	background-image: url("../assets/patterns/topography.svg");
}

.editorial-content--pattern-mountain {
	background-color: var(--color-white);
	background-image: linear-gradient(rgb(255 255 255 / 70%), rgb(255 255 255 / 70%)), url("../assets/patterns/mountains.svg");
	background-position: bottom;
	background-repeat: no-repeat;
	background-size: auto;
}

.editorial-content__layout {
	position: relative;
	z-index: 20;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-12);
}

.editorial-content__media-column {
	text-align: center;
}

.editorial-content__gallery {
	display: flex;
	max-width: 500px;
	margin-inline: auto;
	flex-direction: column;
	gap: var(--space-12);
	text-align: left;
}

.editorial-content__figure {
	margin: 0;
}

.editorial-content__media-marker {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-bottom: var(--space-3);
}

.editorial-content__camera {
	width: 1rem;
	height: 1rem;
	opacity: 0.3;
}

.editorial-content__media-rule {
	height: 1px;
	flex: 1;
	background: var(--editorial-rule);
	opacity: 0.2;
}

.editorial-content__image-frame {
	overflow: hidden;
}

.editorial-content__figure--photo .editorial-content__image-frame {
	border-radius: var(--radius-sm);
	box-shadow: 0 0 0 1px rgb(0 0 0 / 5%), var(--shadow-card);
}

.editorial-content__image {
	width: 100%;
	height: auto;
}

.editorial-content__figure--photo .editorial-content__image {
	transition: transform 1.2s var(--ease-fluid);
}

.editorial-content__figure--photo:hover .editorial-content__image {
	transform: scale(1.04);
}

.editorial-content__figure--graphic .editorial-content__image {
	filter: drop-shadow(0 20px 13px rgb(0 0 0 / 12%));
}

.editorial-content__caption {
	color: var(--editorial-caption);
}

.editorial-content__caption .media-caption__rule {
	background: var(--editorial-rule);
}

.editorial-content__body {
	position: relative;
	z-index: 10;
}

.editorial-content__body h2,
.editorial-content__body h3 {
	margin-bottom: var(--space-4);
	color: var(--color-green);
	font-family: var(--font-display);
	font-weight: 700;
}

.editorial-content__body h2 {
	position: relative;
	margin-top: var(--space-14);
	padding-top: var(--space-6);
	font-size: 1.875rem;
}

.editorial-content__body h2::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 4rem;
	height: 1px;
	content: "";
	background: var(--color-green);
}

.editorial-content__body h3 {
	font-size: 1.5rem;
}

.editorial-content__body h4 {
	margin-bottom: var(--space-4);
	color: var(--color-green);
	font-size: 1.25rem;
	font-weight: 700;
}

.editorial-content__body p {
	margin-bottom: var(--space-4);
	color: var(--color-gray-800);
	font-size: 1.25rem;
	line-height: 1.625;
}

.editorial-content__body p + h2,
.editorial-content__body p + h3,
.editorial-content__body p + h4 {
	margin-top: var(--space-12);
}

.editorial-content--green .editorial-content__body h2,
.editorial-content--green .editorial-content__body h3 {
	color: var(--color-white);
}

.editorial-content--black .editorial-content__body h2,
.editorial-content--black .editorial-content__body h3 {
	color: var(--color-green-bright);
}

.editorial-content--black .editorial-content__body p {
	color: var(--color-white);
}

.editorial-content__text {
	max-width: var(--reading-width);
	margin: 0 auto var(--space-12) 0;
	hanging-punctuation: first last;
	text-wrap: pretty;
}

.editorial-content__text > :first-child,
.editorial-content__heading--first {
	margin-top: 0;
}

.editorial-content__text blockquote {
	position: relative;
	margin: var(--space-12) 0;
	padding: 0 0 0 var(--space-8);
	border: 0;
	font-style: normal;
}

.editorial-content__text blockquote::before {
	position: absolute;
	top: -1.5rem;
	left: -0.5rem;
	content: "\201c";
	color: var(--color-green);
	font-family: var(--font-serif);
	font-size: 5rem;
	line-height: 1;
}

.editorial-content__text blockquote p {
	color: var(--color-gray-900);
	font-family: var(--font-serif);
	font-size: 1.875rem;
	line-height: 1.375;
}

.editorial-content__text--lede {
	position: relative;
	padding-top: var(--space-6);
}

.editorial-content__text--lede::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 4rem;
	height: 2px;
	content: "";
	background: var(--color-green);
}

.editorial-content__text--lede p {
	color: var(--color-gray-900);
	font-size: 1.4rem;
	font-weight: 500;
	line-height: 1.45;
}

/* Callout. */
.callout {
	background: var(--color-white);
	color: var(--color-gray-900);
	border-top: 1px solid rgb(19 23 22 / 10%);
}

.callout--gray {
	border-top: 0;
	background: linear-gradient(to bottom, var(--color-gray-50), var(--color-gray-200));
}

.callout--green {
	border-top: 0;
	background: var(--color-green);
	color: var(--color-white);
}

.callout--black {
	border-top: 0;
	background: var(--color-gray-900);
	color: var(--color-white);
}

.callout__layout {
	display: flex;
	flex-direction: column;
	gap: var(--space-10);
}

.callout__copy {
	max-width: 36rem;
}

.callout__eyebrow {
	margin-bottom: var(--space-5);
}

.callout--green .callout__eyebrow {
	color: var(--color-white);
}

.callout--black .callout__eyebrow {
	color: var(--color-green-bright);
}

.callout__headline {
	margin-bottom: 0;
	font-family: var(--font-display);
	font-size: 1.875rem;
	font-weight: 600;
	line-height: 1.25;
}

.callout__body {
	margin: var(--space-5) 0 0;
	color: var(--color-gray-600);
	font-size: 1.125rem;
	line-height: 1.625;
}

.callout--green .callout__body {
	color: rgb(255 255 255 / 80%);
}

.callout--black .callout__body {
	color: var(--color-gray-300);
}

.callout__actions {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

/* Q&A. */
.qa {
	background: var(--color-white);
}

.qa__rows > *:nth-child(2) { transition-delay: 100ms; }
.qa__rows > *:nth-child(3) { transition-delay: 200ms; }
.qa__rows > *:nth-child(4) { transition-delay: 300ms; }

.qa__item {
	max-width: var(--reading-width);
	padding-block: var(--space-10);
}

.qa__item--divided {
	border-top: 1px solid rgb(19 23 22 / 10%);
}

.qa__question {
	max-width: var(--reading-width);
	margin-bottom: var(--space-5);
	color: var(--color-gray-400);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	line-height: 1.625;
	text-transform: uppercase;
}

.qa__answer {
	max-width: 60ch;
	color: var(--color-gray-800);
	font-size: 1.25rem;
	line-height: 1.625;
}

.qa__answer p {
	margin-bottom: var(--space-5);
}

.qa__answer p:last-child {
	margin-bottom: 0;
}

.qa__answer a {
	color: var(--color-green);
	text-decoration: underline;
}

.qa__quote-wrap {
	padding-block: var(--space-4);
}

.qa__quote {
	max-width: 80ch;
	margin: 0;
	padding: var(--space-10) var(--space-8);
	border-left: 3px solid var(--color-green);
	background: rgb(0 172 62 / 5%);
}

.qa__quote-text {
	max-width: var(--reading-width);
	color: var(--color-gray-900);
	font-family: var(--font-serif);
	font-size: 1.5rem;
	font-style: italic;
	text-wrap: balance;
}

.qa__quote-attribution {
	display: block;
	margin-top: var(--space-5);
	color: var(--color-green);
	font-size: 0.75rem;
	font-style: normal;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.qa__image {
	max-width: 60ch;
}

/* Full-width quote. */
.quote-block {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background-position: center;
	background-size: cover;
	color: var(--color-white);
}

.quote-block--fit {
	padding-block: var(--space-24);
}

.quote-block--viewport {
	min-height: calc(100svh - var(--header-height));
	padding-block: var(--space-12);
}

.quote-block--top { justify-content: flex-start; }
.quote-block--bottom { justify-content: flex-end; }

.quote-block--green {
	background: linear-gradient(to bottom, var(--color-green-dark), var(--color-green));
}

.quote-block--black {
	background: linear-gradient(to bottom, var(--color-gray-900), var(--color-gray-700));
}

.quote-block--white {
	background: linear-gradient(to bottom, var(--color-gray-50), var(--color-white));
	color: var(--color-green);
}

.quote-block__scrim {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(to bottom, rgb(0 51 20 / 45%), rgb(0 51 20 / 55%), rgb(0 51 20 / 70%));
}

.quote-block__content {
	position: relative;
	z-index: 10;
	width: 100%;
	max-width: 640px;
}

.quote-block__content--left {
	padding-inline: var(--space-16) var(--space-8);
}

.quote-block__content--right {
	margin-left: auto;
	padding-inline: var(--space-8) var(--space-16);
}

.quote-block__content--center {
	margin-inline: auto;
	padding-inline: var(--space-8);
}

.quote-block__inner {
	text-align: center;
}

.quote-block__mark {
	display: block;
	color: rgb(0 51 20 / 80%);
	font-family: var(--font-serif);
	font-size: 9rem;
	line-height: 1;
}

.quote-block--black .quote-block__mark {
	color: var(--color-green-bright);
}

.quote-block--white .quote-block__mark {
	color: rgb(0 51 20 / 20%);
}

.quote-block--image .quote-block__mark {
	color: var(--color-green-darkest);
}

.quote-block--with-overlay .quote-block__mark {
	color: var(--color-white);
}

.quote-block__quote {
	margin: -1.5rem 0 0;
	font-family: var(--font-serif);
	font-size: 1.875rem;
	font-weight: 500;
	letter-spacing: -0.025em;
	line-height: 1.15;
}

.quote-block__quote p {
	margin: 0;
}

.quote-block__quote p + p {
	margin-top: var(--space-6);
}

.quote-block__attribution {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-4);
	margin-top: var(--space-10);
}

.quote-block__attribution-rule {
	width: var(--space-8);
	height: 1px;
	background: currentcolor;
	opacity: 0.4;
}

.quote-block__attribution-name,
.quote-block__attribution-detail {
	font-family: var(--font-display);
	text-transform: uppercase;
}

.quote-block__attribution-name {
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.2em;
}

.quote-block__attribution-detail {
	margin-top: 0.375rem;
	font-size: 0.75rem;
	letter-spacing: 0.15em;
	opacity: 0.7;
}

/* Scrollytelling. */
.scrollytelling {
	background: var(--color-white);
	color: var(--color-gray-900);
}

.scrollytelling--green {
	background: var(--color-green-darkest);
	color: var(--color-white);
}

.scrollytelling--black {
	background: var(--color-ink);
	color: var(--color-white);
}

.scrollytelling__intro {
	padding-top: var(--space-12);
}

.scrollytelling__intro-eyebrow,
.scrollytelling__step-label {
	color: var(--color-green-dark);
	font-family: var(--font-system);
	font-weight: 700;
	text-transform: uppercase;
}

.scrollytelling--green .scrollytelling__intro-eyebrow,
.scrollytelling--green .scrollytelling__step-label,
.scrollytelling--black .scrollytelling__intro-eyebrow,
.scrollytelling--black .scrollytelling__step-label {
	color: var(--color-green-bright);
}

.scrollytelling__intro-eyebrow {
	font-size: 0.75rem;
	letter-spacing: 0.3em;
}

.scrollytelling__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.scrollytelling__media-column {
	order: 1;
}

.scrollytelling__media {
	position: relative;
	display: flex;
	height: 42vh;
	overflow: hidden;
	align-items: center;
	justify-content: center;
	background: var(--color-green-darkest);
}

.scrollytelling__frame {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	transition: opacity 500ms var(--ease-fluid);
}

.scrollytelling__frame--active {
	opacity: 1;
}

.scrollytelling__video,
.scrollytelling__image {
	width: 100%;
	height: 100%;
}

.scrollytelling__video {
	object-fit: cover;
}

.scrollytelling__image {
	background-size: cover;
}

.scrollytelling__caption {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	z-index: 5;
	padding: 2.25rem var(--space-6) var(--space-4);
	background: linear-gradient(to top, rgb(0 51 20 / 75%), transparent);
	color: var(--color-white);
	font-family: var(--font-system);
	font-size: 0.75rem;
}

.scrollytelling__steps {
	order: 2;
}

.scrollytelling__step {
	display: flex;
	min-height: 60vh;
	padding: var(--space-12) var(--space-6);
	flex-direction: column;
	justify-content: center;
	opacity: 0.3;
	transition: opacity 300ms var(--ease-fluid);
}

.scrollytelling__step--active {
	opacity: 1;
}

.scrollytelling__step-label {
	margin-bottom: var(--space-3);
	font-size: 0.875rem;
	letter-spacing: 0.18em;
}

.scrollytelling__step-heading {
	margin-bottom: var(--space-3);
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.25;
	text-wrap: balance;
}

.scrollytelling__step-text {
	font-size: 1.125rem;
	text-wrap: pretty;
}

/* Feature links. */
.feature-links {
	--feature-link-heading: var(--color-green);
	--feature-link-rule: rgb(19 23 22 / 10%);
	--feature-link-title: var(--color-gray-900);
	--feature-link-title-hover: var(--color-green);
	--feature-link-description: var(--color-gray-500);
	--feature-link-arrow: var(--color-green);
	--feature-link-background: rgb(19 23 22 / 3%);
	--feature-link-background-hover: rgb(0 172 62 / 4%);
	--feature-link-border: rgb(19 23 22 / 10%);
	--feature-link-border-hover: var(--color-green);
	margin-block: var(--space-12);
}

.feature-links--green {
	--feature-link-heading: var(--color-white);
	--feature-link-rule: rgb(255 255 255 / 20%);
	--feature-link-title: var(--color-white);
	--feature-link-title-hover: var(--color-white);
	--feature-link-description: rgb(255 255 255 / 70%);
	--feature-link-arrow: var(--color-white);
	--feature-link-background: rgb(255 255 255 / 6%);
	--feature-link-background-hover: rgb(255 255 255 / 10%);
	--feature-link-border: rgb(255 255 255 / 20%);
	--feature-link-border-hover: var(--color-white);
}

.feature-links--black {
	--feature-link-heading: var(--color-green-bright);
	--feature-link-rule: rgb(255 255 255 / 15%);
	--feature-link-title: var(--color-white);
	--feature-link-title-hover: var(--color-green-bright);
	--feature-link-description: var(--color-gray-300);
	--feature-link-arrow: var(--color-green-bright);
	--feature-link-background: rgb(255 255 255 / 4%);
	--feature-link-background-hover: rgb(8 205 79 / 6%);
	--feature-link-border: rgb(255 255 255 / 15%);
	--feature-link-border-hover: var(--color-green-bright);
}

.feature-links__heading {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-bottom: var(--space-5);
}

.feature-links__heading-text {
	color: var(--feature-link-heading);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.feature-links__heading-rule {
	height: 1px;
	flex: 1;
	background: var(--feature-link-rule);
}

.feature-links__list {
	display: grid;
	margin: 0;
	padding: 0;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-4);
	list-style: none;
}

.feature-links__item {
	margin: 0;
}

.feature-links__link {
	display: flex;
	height: 100%;
	padding: var(--space-5);
	flex-direction: column;
	border: 1px solid var(--feature-link-border);
	border-radius: var(--radius-md);
	background: var(--feature-link-background);
	text-decoration: none;
	transition: background-color 300ms var(--ease-fluid), border-color 300ms var(--ease-fluid);
}

.feature-links__link:hover {
	border-color: var(--feature-link-border-hover);
	background: var(--feature-link-background-hover);
}

.feature-links__title-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-3);
}

.feature-links__title {
	color: var(--feature-link-title);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.375;
	transition: color 300ms var(--ease-fluid);
}

.feature-links__link:hover .feature-links__title {
	color: var(--feature-link-title-hover);
}

.feature-links__arrow {
	width: var(--space-5);
	height: var(--space-5);
	margin-top: var(--space-1);
	flex: none;
	color: var(--feature-link-arrow);
	transition: transform 300ms var(--ease-fluid);
}

.feature-links__link:hover .feature-links__arrow {
	transform: translateX(var(--space-1));
}

.feature-links__description {
	margin-top: var(--space-2);
	color: var(--feature-link-description);
	font-size: 1rem;
	line-height: 1.5;
}

/* Inset image. */
.inset-image {
	--inset-rule: var(--color-gray-900);
	--inset-caption: var(--color-gray-500);
	margin: var(--space-12) 0 var(--space-14);
}

.inset-image--green {
	--inset-rule: var(--color-white);
	--inset-caption: rgb(255 255 255 / 70%);
}

.inset-image--black {
	--inset-rule: var(--color-white);
	--inset-caption: var(--color-gray-300);
}

.inset-image__figure {
	margin: 0;
}

.inset-image__layout {
	display: grid;
	gap: var(--space-3) var(--space-4);
}

.inset-image__marker {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.inset-image__camera {
	width: 1rem;
	height: 1rem;
	opacity: 0.3;
}

.inset-image__rule {
	height: 1px;
	flex: 1;
	background: var(--inset-rule);
	opacity: 0.2;
}

.inset-image__frame {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border-radius: min(1vw, 6px);
	box-shadow: 0 0 0 1px rgb(0 0 0 / 5%), var(--shadow-float);
}

.inset-image--black .inset-image__frame {
	box-shadow: 0 0 0 1px rgb(255 255 255 / 10%), 0 24px 70px -28px rgb(0 0 0 / 80%);
}

.inset-image__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.2);
	will-change: transform;
}

.inset-image__caption {
	padding-top: var(--space-3);
	border-top: 1px solid var(--color-green);
	color: var(--inset-caption);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.5;
}

/* Pull quote. */
.pull-quote {
	--pull-quote-border: var(--color-green);
	--pull-quote-background: rgb(0 172 62 / 5%);
	--pull-quote-text: var(--color-gray-900);
	--pull-quote-accent: var(--color-green);
	--pull-quote-detail: var(--color-gray-500);
	margin-block: var(--space-12);
}

.pull-quote--green {
	--pull-quote-border: rgb(255 255 255 / 50%);
	--pull-quote-background: rgb(255 255 255 / 10%);
	--pull-quote-text: var(--color-white);
	--pull-quote-accent: var(--color-green-bright);
	--pull-quote-detail: rgb(255 255 255 / 70%);
}

.pull-quote--black {
	--pull-quote-border: var(--color-green-bright);
	--pull-quote-background: rgb(255 255 255 / 5%);
	--pull-quote-text: var(--color-white);
	--pull-quote-accent: var(--color-green-bright);
	--pull-quote-detail: var(--color-gray-300);
}

.pull-quote__body {
	margin: 0;
	padding: var(--space-10) var(--space-8);
	border-left: 3px solid var(--pull-quote-border);
	background: var(--pull-quote-background);
}

.pull-quote__text {
	color: var(--pull-quote-text);
	font-family: var(--font-serif);
	font-size: 1.5rem;
	font-style: italic;
	text-wrap: balance;
}

.pull-quote__attribution {
	margin-top: var(--space-5);
	color: var(--pull-quote-accent);
	font-size: 0.75rem;
	font-style: normal;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.pull-quote__sub-attribution {
	display: block;
	margin-top: var(--space-1);
	color: var(--pull-quote-detail);
	font-size: 0.875rem;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
}

/* Note. */
.editorial-note {
	margin-block: var(--space-8);
	padding: var(--space-4);
	border-radius: var(--radius-md);
	background: rgb(19 23 22 / 10%);
}

.editorial-note__title {
	color: rgb(19 23 22 / 80%);
	font-weight: 600;
	text-transform: uppercase;
}

/* Separators. */
.editorial-separator {
	position: relative;
}

.editorial-separator--pattern {
	overflow: hidden;
	padding-block: var(--space-16);
}

.editorial-separator--asterism {
	padding-block: var(--space-4);
}

.editorial-separator__rule,
.editorial-separator__asterism {
	display: flex;
	align-items: center;
	justify-content: center;
}

.editorial-separator__rule {
	gap: var(--space-8);
}

.editorial-separator__asterism {
	gap: var(--space-6);
	color: var(--color-green);
}

.editorial-separator__line {
	height: 1px;
	flex: 1;
	background: rgb(19 23 22 / 15%);
}

.editorial-separator__diamond {
	width: var(--space-3);
	height: var(--space-3);
	flex: none;
	transform: rotate(45deg);
	background: var(--color-green);
}

.editorial-separator__diamond--large {
	width: var(--space-4);
	height: var(--space-4);
}

.editorial-separator__pattern {
	position: absolute;
	inset: 0;
	-webkit-mask-image: radial-gradient(ellipse 70% 120% at 50% 50%, #000 28%, transparent 78%);
	mask-image: radial-gradient(ellipse 70% 120% at 50% 50%, #000 28%, transparent 78%);
}

.editorial-separator--dots .editorial-separator__pattern {
	background-image: radial-gradient(circle, rgb(0 172 62 / 32%) 1.5px, transparent 1.6px);
	background-size: 22px 22px;
}

.editorial-separator--diagonal .editorial-separator__pattern {
	background-image: repeating-linear-gradient(45deg, rgb(0 172 62 / 16%) 0 1px, transparent 1px 11px);
}

.editorial-separator--grid .editorial-separator__pattern {
	background-image: linear-gradient(rgb(17 24 39 / 7%) 1px, transparent 1px), linear-gradient(90deg, rgb(17 24 39 / 7%) 1px, transparent 1px);
	background-size: 30px 30px;
}

/* YouTube facade. */
.video-embed {
	margin: 0 0 2.75rem;
}

.video-embed:not(:first-child) {
	margin-top: 2.75rem;
}

.video-embed__label {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin-bottom: 0.875rem;
	color: var(--color-gray-400);
}

.video-embed__label-icon {
	width: 1.125rem;
	height: 1.125rem;
	flex: none;
}

.video-embed__label-text {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	white-space: nowrap;
}

.video-embed__label-rule {
	height: 1px;
	flex: 1;
	background: var(--color-gray-200);
}

.video-embed__overline {
	max-width: 30ch;
	margin-bottom: var(--space-4);
	color: var(--color-ink);
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.375;
}

.video-embed__stage {
	position: relative;
	width: 100%;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: var(--color-gray-900);
}

.video-embed__stage--interactive {
	cursor: pointer;
}

.video-embed__poster {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 900ms var(--ease-fluid);
}

.video-embed__stage--interactive:hover .video-embed__poster {
	transform: scale(1.035);
}

.video-embed__scrim {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(to top, rgb(0 0 0 / 45%), transparent 55%);
	opacity: 0.85;
}

.video-embed__play {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 10;
	display: flex;
	width: 68px;
	height: 68px;
	align-items: center;
	justify-content: center;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: var(--color-green);
	box-shadow: 0 8px 30px rgb(0 0 0 / 35%);
	transition: background-color 250ms var(--ease-snappy), transform 250ms var(--ease-snappy);
}

.video-embed__stage--interactive:hover .video-embed__play {
	transform: translate(-50%, -50%) scale(1.07);
	background: var(--color-green-dark);
}

.video-embed__play-icon {
	width: 26px;
	height: 26px;
	margin-left: var(--space-1);
	fill: var(--color-white);
}

.video-embed__iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.video-embed__caption {
	max-width: 760px;
	margin-top: 0.875rem;
}

.video-embed__caption-text {
	color: var(--color-gray-500);
	font-size: 0.86rem;
	line-height: 1.625;
}

.video-embed__credit {
	display: block;
	margin-top: var(--space-1);
	color: var(--color-gray-400);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Editor empty state. */
.block-placeholder {
	padding: var(--space-12) var(--space-6);
	border: 1px solid var(--color-gray-200);
	background-color: var(--color-gray-50);
	background-image: repeating-linear-gradient(-45deg, rgb(0 172 62 / 5%) 0 1px, transparent 1px 10px);
	text-align: center;
}

.block-placeholder__label {
	margin: 0 0 var(--space-2);
	color: var(--color-green);
	font-family: var(--font-display);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.block-placeholder__hint {
	max-width: 46ch;
	margin: 0 auto;
	color: var(--color-gray-500);
	font-size: 1rem;
	line-height: 1.6;
}

.block-placeholder__hint code {
	padding: 0.1em 0.4em;
	border-radius: var(--radius-sm);
	background: var(--color-gray-100);
	font-size: 0.9em;
	white-space: nowrap;
}

@media (min-width: 40rem) {
	.callout__actions {
		flex-direction: row;
	}

	.feature-links__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.inset-image__frame {
		aspect-ratio: 16 / 10;
	}

	.inset-image__caption {
		font-size: 0.95rem;
	}
}

@media (min-width: 48rem) {
	.quote-block--green,
	.quote-block--black,
	.quote-block--white {
		background-attachment: fixed;
	}
}

@media (min-width: 64rem) {
	.editorial-content {
		padding-block: var(--space-24);
	}

	.editorial-content__gradient {
		position: absolute;
		inset-block: 0;
		z-index: 10;
		display: block;
		width: 50%;
		pointer-events: none;
	}

	.editorial-content--copy-left .editorial-content__gradient {
		left: 0;
		background: linear-gradient(to right, var(--editorial-gradient) 85%, transparent);
	}

	.editorial-content--copy-right .editorial-content__gradient {
		right: 0;
		background: linear-gradient(to left, var(--editorial-gradient) 85%, transparent);
	}

	.editorial-content__texture--edge {
		display: none;
	}

	.editorial-content__texture--field {
		display: block;
		width: 45%;
	}

	.editorial-content--copy-left .editorial-content__texture--field {
		right: 0;
		-webkit-mask-image: linear-gradient(to left, #000 35%, transparent 92%);
		mask-image: linear-gradient(to left, #000 35%, transparent 92%);
	}

	.editorial-content--copy-right .editorial-content__texture--field {
		left: 0;
		-webkit-mask-image: linear-gradient(to right, #000 35%, transparent 92%);
		mask-image: linear-gradient(to right, #000 35%, transparent 92%);
	}

	.editorial-content__layout {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.editorial-content__media-column {
		position: sticky;
		top: var(--space-24);
		grid-row: 1;
		grid-column: span 2;
		align-self: start;
	}

	.editorial-content--copy-left .editorial-content__media-column {
		grid-column: 3 / span 2;
	}

	.editorial-content--copy-right .editorial-content__media-column {
		grid-column: 1 / span 2;
	}

	.editorial-content__gallery {
		margin-inline: 0;
		gap: var(--space-16);
	}

	.editorial-content__gallery--inner-left {
		margin-right: auto;
	}

	.editorial-content__gallery--inner-right {
		margin-left: auto;
	}

	.editorial-content__body {
		grid-row: 1;
		grid-column: span 2;
	}

	.editorial-content--copy-left .editorial-content__body {
		grid-column: 1 / span 2;
	}

	.editorial-content--copy-right .editorial-content__body {
		grid-column: 3 / span 2;
	}

	.editorial-content--copy-right .editorial-content__text {
		margin-right: 0;
		margin-left: auto;
	}

	.editorial-content--copy-center .editorial-content__body {
		grid-column: 1 / span 3;
	}

	.editorial-content__text {
		margin-bottom: var(--space-16);
	}

	.callout__layout {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-16);
	}

	.callout__headline {
		font-size: 3rem;
	}

	.callout__actions {
		flex: 0 0 auto;
		flex-direction: column;
	}

	.qa__item {
		padding-block: var(--space-16);
	}

	.qa__quote-wrap {
		padding-block: var(--space-6);
	}

	.qa__quote,
	.pull-quote__body {
		padding-block: var(--space-14);
	}

	.qa__quote-text,
	.pull-quote__text {
		font-size: 1.875rem;
		line-height: 1.375;
	}

	.quote-block--fit {
		padding-block: var(--space-36);
	}

	.quote-block--viewport {
		height: calc(100svh - var(--header-height));
		padding-block: var(--space-24);
	}

	.quote-block--image {
		background-attachment: fixed;
	}

	.quote-block__content--left {
		padding-right: 0;
	}

	.quote-block__content--right {
		padding-left: 0;
	}

	.quote-block__content--center {
		padding-inline: 0;
	}

	.quote-block__mark {
		font-size: 12rem;
	}

	.quote-block__quote {
		margin-top: -2.5rem;
		font-size: 3rem;
	}

	.scrollytelling__intro {
		padding-top: var(--space-24);
	}

	.scrollytelling__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.scrollytelling__media-column {
		order: 2;
	}

	.scrollytelling--media-left .scrollytelling__media-column {
		order: 1;
	}

	.scrollytelling__media {
		position: sticky;
		top: 0;
		height: 100vh;
	}

	.scrollytelling__steps {
		order: 1;
	}

	.scrollytelling--media-left .scrollytelling__steps {
		order: 2;
	}

	.scrollytelling__step {
		min-height: 100vh;
		padding: var(--space-12) var(--space-14);
	}

	.scrollytelling__step-heading {
		font-size: 1.875rem;
	}

	.scrollytelling__step-text {
		font-size: 1.25rem;
		line-height: 1.625;
	}

	.feature-links,
	.pull-quote {
		margin-block: var(--space-16);
	}

	.inset-image {
		margin-top: var(--space-16);
		margin-right: calc(-1 * var(--space-24));
		margin-bottom: var(--space-20);
	}

	.inset-image__layout {
		grid-template-columns: 7fr 2fr;
		align-items: end;
	}

	.inset-image__marker {
		grid-row: 1;
		grid-column: 1;
	}

	.inset-image__frame {
		grid-row: 2;
		grid-column: 1;
		aspect-ratio: 16 / 12;
	}

	.inset-image__caption {
		grid-row: 2;
		grid-column: 2;
	}

	.editorial-separator--pattern {
		padding-block: var(--space-20);
	}

	.editorial-separator--asterism {
		padding-block: var(--space-8);
	}

	.editorial-separator__asterism {
		gap: var(--space-8);
	}

	.editorial-separator__diamond--large {
		width: var(--space-5);
		height: var(--space-5);
	}

	.video-embed {
		margin-bottom: var(--space-16);
	}

	.video-embed:not(:first-child) {
		margin-top: var(--space-16);
	}

	.video-embed__overline {
		margin-bottom: var(--space-5);
		font-size: 1.6rem;
	}

	.video-embed__breakout {
		width: calc(100% + 200px);
		margin-left: -100px;
	}

	.video-embed__play {
		width: 74px;
		height: 74px;
	}

	.video-embed__caption {
		margin-top: var(--space-4);
	}
}

/* Front-end choreography is intentionally disabled in the editor canvas. */
:where(.editor-styles-wrapper, .block-editor-iframe__body) .editorial-content::before,
:where(.editor-styles-wrapper, .block-editor-iframe__body) .quote-block {
	background-attachment: scroll;
}

:where(.editor-styles-wrapper, .block-editor-iframe__body) .editorial-content__media-column,
:where(.editor-styles-wrapper, .block-editor-iframe__body) .scrollytelling__media {
	position: static;
}

:where(.editor-styles-wrapper, .block-editor-iframe__body) .editorial-content--viewport,
:where(.editor-styles-wrapper, .block-editor-iframe__body) .editorial-content--viewport .editorial-content__body,
:where(.editor-styles-wrapper, .block-editor-iframe__body) .quote-block--viewport,
:where(.editor-styles-wrapper, .block-editor-iframe__body) .scrollytelling__media,
:where(.editor-styles-wrapper, .block-editor-iframe__body) .scrollytelling__step {
	height: auto;
	min-height: 0;
}

:where(.editor-styles-wrapper, .block-editor-iframe__body) .scrollytelling__frame,
:where(.editor-styles-wrapper, .block-editor-iframe__body) .scrollytelling__step {
	opacity: 1;
}
/* Immersive hero, photo, gallery, and featured-story blocks. */

/* Hero -------------------------------------------------------------------- */
.immersive-hero {
	position: relative;
}

.immersive-hero__container {
	width: 100%;
	max-width: none;
	padding-inline: var(--space-8);
}

.immersive-hero--minimal {
	padding-block: 90px var(--space-10);
	background: linear-gradient(to bottom right, var(--color-green-dark), var(--color-green-darker), var(--color-green-darkest));
	color: var(--color-white);
}

.immersive-hero__minimal-layout {
	display: grid;
	max-width: 72rem;
	align-items: center;
	gap: var(--space-8);
}

.immersive-hero__minimal-copy {
	order: 2;
	padding-block: var(--space-2);
}

.immersive-hero__badge-row {
	margin-top: var(--space-6);
}

.immersive-hero__badge {
	display: inline-flex;
	align-items: center;
	padding: var(--space-2) var(--space-4);
	border-radius: 999px;
	background: var(--color-white);
	color: var(--color-green-darker);
	font-family: var(--font-display);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.25em;
	text-transform: uppercase;
}

.immersive-hero__minimal-title,
.immersive-hero__minimal-dek,
.immersive-hero__minimal-byline,
.immersive-hero__portrait-credit,
.immersive-hero__title,
.immersive-hero__dek,
.immersive-hero__byline,
.immersive-hero__photo-credit,
.immersive-hero__edition-eyebrow,
.immersive-hero__edition-title,
.immersive-hero__edition-dek {
	margin-bottom: 0;
}

.immersive-hero__minimal-title {
	margin-top: var(--space-5);
	color: var(--color-white);
	font-family: var(--font-serif);
	font-size: 2.25rem;
	font-weight: 600;
	line-height: 1.05;
}

.immersive-hero__minimal-dek {
	margin-top: var(--space-5);
	color: rgb(255 255 255 / 85%);
	font-size: 1.125rem;
	line-height: 1.375;
}

.immersive-hero__details {
	max-width: 28rem;
	margin: var(--space-8) 0 0;
}

.immersive-hero__detail {
	padding-block: 0.875rem;
	border-top: 1px solid rgb(255 255 255 / 15%);
}

.immersive-hero__detail-label {
	color: var(--color-green-bright);
	font-family: var(--font-display);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.25em;
	text-transform: uppercase;
}

.immersive-hero__detail-value {
	margin: var(--space-1) 0 0;
	color: rgb(255 255 255 / 90%);
	font-size: 1rem;
	line-height: 1.375;
}

.immersive-hero__minimal-byline {
	margin-top: var(--space-8);
	color: rgb(255 255 255 / 60%);
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.immersive-hero__portrait-wrap {
	order: 1;
}

.immersive-hero__portrait {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	box-shadow: 0 20px 25px -5px rgb(0 0 0 / 30%), 0 8px 10px -6px rgb(0 0 0 / 30%);
	outline: 1px solid rgb(255 255 255 / 10%);
}

.immersive-hero__portrait-credit {
	margin-top: var(--space-2);
	color: rgb(255 255 255 / 60%);
	font-family: var(--font-display);
	font-size: 0.75rem;
}

.immersive-hero--feature {
	z-index: 0;
	display: flex;
	min-height: 100svh;
	align-items: flex-end;
	background-color: var(--color-ink);
	background-repeat: no-repeat;
	background-size: cover;
	color: var(--color-white);
}

.immersive-hero__scrim,
.immersive-hero__edition-image,
.immersive-hero__edition-scrim {
	position: absolute;
	inset: 0;
}

.immersive-hero__scrim {
	background: linear-gradient(to top right, rgb(0 0 0 / 80%), rgb(0 0 0 / 35%), transparent);
}

.immersive-hero--high-contrast .immersive-hero__scrim {
	background: linear-gradient(to top right, rgb(0 0 0 / 90%), rgb(0 0 0 / 55%), transparent);
}

.immersive-hero__feature-content {
	position: relative;
	z-index: 1;
	width: 100%;
	padding-block: 110px var(--space-14);
}

.immersive-hero__feature-copy {
	max-width: 48rem;
}

.immersive-hero--feature .immersive-hero__eyebrow {
	margin-bottom: var(--space-6);
}

.immersive-hero__title {
	margin-top: 0;
	color: var(--color-white);
	font-family: var(--font-serif);
	font-weight: 600;
	line-height: 1.02;
	text-wrap: balance;
	text-shadow: 0 4px 12px rgb(0 0 0 / 55%);
	transition-delay: 100ms;
}

.immersive-hero__title--long {
	font-size: clamp(1.75rem, 7.4vw, 2.25rem);
}

.immersive-hero__title--medium {
	font-size: clamp(2rem, 8.6vw, 2.75rem);
}

.immersive-hero__title--short {
	font-size: clamp(2.5rem, 10vw, 3rem);
}

.immersive-hero__dek {
	max-width: 42rem;
	margin-top: var(--space-6);
	color: rgb(255 255 255 / 85%);
	font-size: 1.125rem;
	line-height: 1.375;
	text-shadow: 0 2px 8px rgb(0 0 0 / 55%);
	transition-delay: 200ms;
}

.immersive-hero__byline {
	margin-top: var(--space-8);
	color: rgb(255 255 255 / 80%);
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	transition-delay: 300ms;
}

.immersive-hero__photo-credit {
	position: absolute;
	right: var(--space-5);
	bottom: var(--space-5);
	z-index: 1;
	color: rgb(255 255 255 / 75%);
	font-family: var(--font-display);
	font-size: 0.75rem;
	text-shadow: 0 2px 12px rgb(0 0 0 / 55%);
	transition-delay: 300ms;
}

.immersive-hero--edition {
	display: flex;
	width: 100%;
	min-height: 640px;
	align-items: flex-end;
	justify-content: center;
	background: var(--color-ink);
	color: var(--color-white);
	text-align: center;
}

.immersive-hero__edition-image {
	background-repeat: no-repeat;
	background-size: cover;
}

.immersive-hero__edition-scrim {
	background: linear-gradient(to top, rgb(0 0 0 / 90%), rgb(0 0 0 / 45%), transparent);
}

.immersive-hero__edition-content {
	position: relative;
	z-index: 1;
	max-width: 48rem;
	padding: 0 var(--space-6) var(--space-28);
}

.immersive-hero__edition-eyebrow {
	color: var(--color-green-bright);
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.4em;
	text-transform: uppercase;
}

.immersive-hero__edition-title {
	margin-top: var(--space-5);
	color: var(--color-white);
	font-family: var(--font-serif);
	font-size: 3rem;
	font-weight: 600;
	line-height: 0.95;
	text-shadow: 0 4px 12px rgb(0 0 0 / 55%);
	transition-delay: 100ms;
}

.immersive-hero__edition-accent {
	display: block;
	color: var(--color-green-bright);
}

.immersive-hero__edition-rule {
	display: block;
	width: var(--space-24);
	height: 1px;
	margin: var(--space-6) auto 0;
	background: rgb(255 255 255 / 50%);
	transition-delay: 200ms;
}

.immersive-hero__edition-dek {
	max-width: 36rem;
	margin: var(--space-6) auto 0;
	color: rgb(255 255 255 / 85%);
	font-size: 1.125rem;
	line-height: 1.375;
	text-shadow: 0 2px 8px rgb(0 0 0 / 55%);
	transition-delay: 200ms;
}

.immersive-hero__scroll-cue {
	position: absolute;
	bottom: var(--space-6);
	left: 50%;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.375rem;
	color: rgb(255 255 255 / 80%);
	transform: translate(-50%, 1.75rem);
	transition: color 200ms ease, opacity 700ms var(--ease-fluid), transform 700ms var(--ease-fluid);
	transition-delay: 300ms;
}

.immersive-hero__scroll-cue[data-in-view="true"] {
	transform: translateX(-50%);
}

.immersive-hero__scroll-cue:hover {
	color: var(--color-white);
}

.immersive-hero__scroll-label {
	font-family: var(--font-display);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.35em;
	text-shadow: 0 2px 12px rgb(0 0 0 / 55%);
	text-transform: uppercase;
	white-space: nowrap;
}

.immersive-hero__scroll-icon {
	width: var(--space-5);
	height: var(--space-5);
	animation: immersive-bounce 1s infinite;
}

.immersive-hero__content-anchor {
	scroll-margin-top: var(--space-20);
}

/* Photos ------------------------------------------------------------------ */
.photos {
	position: relative;
}

.photos--polaroid,
.photos--full-image {
	padding-block: var(--space-16);
}

.photos__container {
	width: 100%;
	max-width: none;
	padding-inline: var(--space-6);
}

.photos--theme-white {
	background: var(--color-white);
}

.photos--theme-green {
	background: var(--color-green);
}

.photos--theme-dark,
.photos--scroll {
	background: var(--color-gray-900);
}

.photos--theme-gray {
	background: var(--color-gray-100);
}

.photos__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
	column-gap: var(--space-6);
	row-gap: var(--space-12);
}

.photos__item,
.photos__stack-item,
.photos__frame {
	margin: 0;
}

.photos__image-frame {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	background: var(--color-gray-200);
	box-shadow: 0 1px 2px rgb(0 0 0 / 8%);
	transition: box-shadow 500ms var(--ease-fluid);
}

.photos--theme-green .photos__image-frame {
	background: rgb(0 0 0 / 10%);
}

.photos--theme-dark .photos__image-frame {
	background: var(--color-gray-800);
}

.photos--theme-gray .photos__image-frame {
	background: var(--color-gray-300);
}

.photos__image-frame:hover {
	box-shadow: 0 20px 25px -5px rgb(0 0 0 / 25%), 0 8px 10px -6px rgb(0 0 0 / 20%);
}

.photos__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 700ms var(--ease-fluid);
}

.photos__image-frame:hover .photos__image {
	transform: scale(1.05);
}

.photos__caption-copy {
	min-width: 0;
}

.photos__caption-text {
	display: block;
}

.photos--theme-white .photos__caption,
.photos--theme-gray .photos__caption {
	color: var(--color-gray-500);
}

.photos--theme-white .media-caption__rule,
.photos--theme-gray .media-caption__rule,
.photos--full-image .media-caption__rule {
	background: var(--color-gray-900);
}

.photos--theme-green .photos__caption {
	color: rgb(255 255 255 / 70%);
}

.photos--theme-dark .photos__caption {
	color: var(--color-gray-300);
}

.photos--theme-green .media-caption__rule,
.photos--theme-dark .media-caption__rule {
	background: var(--color-white);
}

.photos__stack {
	max-width: 56rem;
	margin-inline: auto;
}

.photos__stack-item + .photos__stack-item {
	margin-top: var(--space-12);
}

.photos__natural-image {
	width: 100%;
	height: auto;
}

.photos__filmstrip {
	display: flex;
	height: calc(100svh - var(--header-height));
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
}

.photos__frame {
	position: relative;
	width: 88vw;
	height: 100%;
	flex: 0 0 auto;
	scroll-snap-align: center;
}

.photos__frame-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.photos__frame-scrim,
.photo-break__scrim,
.gallery__frame-scrim {
	pointer-events: none;
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 66.666%;
}

.photos__frame-scrim {
	background: linear-gradient(to top, rgb(0 0 0 / 80%), rgb(0 0 0 / 30%), transparent);
}

.photos__frame-caption {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: 0 var(--space-6) var(--space-16);
}

.photos__frame-copy {
	max-width: 42rem;
}

.photos__frame-rule,
.photo-break__caption-rule {
	width: var(--space-12);
	height: var(--space-1);
	background: var(--color-green-bright);
}

.photos__frame-rule {
	margin-bottom: var(--space-4);
}

.photos__frame-text,
.photo-break__caption-text {
	margin-bottom: 0;
	color: var(--color-white);
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.375;
	text-shadow: 0 2px 12px rgb(0 0 0 / 55%);
}

.photos__frame-credit,
.photos__frame-counter,
.photo-break__credit {
	font-family: var(--font-display);
	text-transform: uppercase;
}

.photos__frame-credit {
	margin: var(--space-3) 0 0;
	color: rgb(255 255 255 / 70%);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
}

.photos__frame-counter {
	position: absolute;
	top: var(--space-6);
	right: var(--space-6);
	color: rgb(255 255 255 / 60%);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
}

.photos__scroll-cue {
	pointer-events: none;
	position: absolute;
	bottom: var(--space-6);
	left: 50%;
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-4);
	border-radius: 999px;
	background: rgb(19 23 22 / 40%);
	color: rgb(255 255 255 / 80%);
	font-family: var(--font-display);
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	transform: translateX(-50%);
	backdrop-filter: blur(4px);
}

.photos__scroll-cue-icon {
	width: var(--space-4);
	height: var(--space-4);
	transform: rotate(-90deg);
}

.photo-break {
	position: relative;
	height: calc(100svh - var(--header-height));
	background-position: center;
	background-size: cover;
	scroll-snap-align: start;
	transition: filter 1s linear 500ms;
}

.photo-break--grayscale {
	filter: grayscale(1);
}

.photo-break--color {
	filter: grayscale(0);
}

.photo-break__scrim {
	background: linear-gradient(to top, rgb(0 0 0 / 80%), rgb(0 0 0 / 40%), transparent);
}

.photo-break__caption {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: 0 var(--space-6) var(--space-24);
}

.photo-break__caption-copy {
	max-width: 48rem;
}

.photo-break__caption-rule {
	margin-bottom: var(--space-5);
}

.photo-break__credit {
	position: absolute;
	right: var(--space-5);
	bottom: var(--space-5);
	color: rgb(255 255 255 / 75%);
	font-size: 0.75rem;
	text-shadow: 0 2px 12px rgb(0 0 0 / 55%);
	transition-delay: 300ms;
}

.photo-break__scroll-indicator {
	position: absolute;
	bottom: var(--space-8);
	left: 50%;
	display: flex;
	width: var(--space-12);
	height: var(--space-12);
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgb(19 23 22 / 30%);
	transform: translateX(-50%);
	backdrop-filter: blur(4px);
}

.photo-break__scroll-icon {
	width: var(--space-6);
	height: var(--space-6);
	color: var(--color-white);
}

main > [data-block-type="photo-break"]:last-child .photo-break__scroll-indicator,
main > [data-block-type="photos"]:last-child .photo-break__scroll-indicator {
	display: none;
}

/* Gallery ----------------------------------------------------------------- */
.gallery {
	position: relative;
}

.gallery--theme-dark {
	background: var(--color-gray-900);
	color: var(--color-white);
}

.gallery--theme-white {
	background: var(--color-white);
	color: var(--color-gray-900);
}

.gallery--theme-green {
	background: var(--color-green);
	color: var(--color-white);
}

.gallery__cover {
	position: relative;
	display: flex;
	min-height: calc(100svh - var(--header-height));
	align-items: center;
	justify-content: center;
	flex-direction: column;
	padding: var(--space-24) var(--space-6);
	text-align: center;
}

.gallery__eyebrow,
.gallery__scroll-label {
	font-family: var(--font-display);
	text-transform: uppercase;
}

.gallery__eyebrow {
	font-size: 0.75rem;
	letter-spacing: 0.28em;
}

.gallery__title {
	max-width: 56rem;
	margin: var(--space-6) 0 0;
	font-size: 3rem;
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 0.95;
	text-wrap: balance;
	text-transform: uppercase;
}

.gallery__script-word {
	margin-top: var(--space-1);
	font-family: var(--font-serif);
	font-size: 3rem;
	font-style: italic;
	line-height: 1;
}

.gallery__dek {
	max-width: 28rem;
	margin: var(--space-6) 0 0;
	font-size: 1rem;
}

.gallery--theme-dark .gallery__eyebrow,
.gallery--theme-dark .gallery__dek,
.gallery--theme-dark .gallery__scroll-indicator {
	color: rgb(255 255 255 / 60%);
}

.gallery--theme-white .gallery__eyebrow,
.gallery--theme-white .gallery__dek,
.gallery--theme-white .gallery__scroll-indicator {
	color: var(--color-gray-500);
}

.gallery--theme-green .gallery__eyebrow,
.gallery--theme-green .gallery__dek,
.gallery--theme-green .gallery__scroll-indicator {
	color: rgb(255 255 255 / 70%);
}

.gallery--theme-dark .gallery__script-word {
	color: var(--color-green-bright);
}

.gallery--theme-white .gallery__script-word {
	color: var(--color-green);
}

.gallery--theme-green .gallery__script-word {
	color: var(--color-white);
}

.gallery__scroll-indicator {
	position: absolute;
	bottom: var(--space-8);
	left: 50%;
	display: flex;
	align-items: center;
	flex-direction: column;
	gap: var(--space-2);
	transform: translateX(-50%);
}

.gallery__scroll-label {
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
}

.gallery__scroll-icon {
	width: var(--space-5);
	height: var(--space-5);
	animation: immersive-bounce 1s infinite;
}

/* Phones and tablets: each photo card, at the photo's natural size with its
   caption below, pins under the header while the next card slides up over it,
   like prints piling onto a stack. Wide screens get the full-height cinematic
   frame instead (see 64rem). */
.gallery__frame {
	position: sticky;
	top: calc(var(--header-height) + 2rem);
	margin: 0;
	padding-bottom: var(--space-16);
	overflow: hidden;
	background: inherit;
	box-shadow: 0 -10px 24px -10px rgb(0 0 0 / 40%);
}

.gallery__backdrop {
	display: none;
	pointer-events: none;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: blur(40px) brightness(0.45);
	transform: scale(1.1);
	will-change: transform;
}

.gallery__backdrop--settled {
	animation: gallery-settle 2.4s var(--ease-fluid) forwards;
}

/* Cap tall photos so the caption is on screen before the next card covers it. */
.gallery__image {
	display: block;
	width: 100%;
	height: auto;
	max-height: calc(100svh - var(--header-height) - 12rem);
	object-fit: contain;
}

.gallery__frame-scrim {
	display: none;
	z-index: 2;
	background: linear-gradient(to top, rgb(0 0 0 / 85%), rgb(0 0 0 / 40%), transparent);
}

.gallery__caption {
	padding: var(--space-4) var(--space-6) 0;
}

.gallery__caption-copy {
	max-width: 48rem;
}

.gallery__tag {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-bottom: var(--space-4);
	color: var(--color-green-bright);
	font-family: var(--font-display);
	font-size: 0.75rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
}

.gallery--theme-white .gallery__tag {
	color: var(--color-green);
}

.gallery--theme-green .gallery__tag {
	color: var(--color-white);
}

.gallery__tag-rule {
	width: var(--space-8);
	height: 2px;
	background: currentColor;
}

.gallery__caption-text {
	margin-bottom: 0;
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.375;
}

.gallery__credit {
	margin: var(--space-3) 0 0;
	opacity: 0.7;
	font-family: var(--font-display);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Featured stories -------------------------------------------------------- */
.feature-stories__story {
	position: relative;
	z-index: 0;
	display: flex;
	height: 100vh;
	align-items: flex-end;
	background-repeat: no-repeat;
	background-size: cover;
	color: var(--color-white);
}

.feature-stories__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgb(19 23 22 / 45%), rgb(19 23 22 / 9%), transparent);
}

.feature-stories__scroll-cue {
	position: absolute;
	bottom: 0;
	width: 100%;
}

.feature-stories__scroll-icon {
	width: var(--space-10);
	height: var(--space-10);
	margin-inline: auto;
	stroke: var(--color-white);
}

.feature-stories__content {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 56rem;
	margin: 0 auto var(--space-12);
	padding-inline: var(--space-6);
}

.feature-stories__title {
	margin: 0;
	color: var(--color-white);
	font-family: var(--font-display);
	font-size: 3rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-shadow: 0 2px 8px rgb(0 0 0 / 55%);
}

.feature-stories__subheading {
	display: block;
	margin-top: var(--space-6);
	font-size: 1.5rem;
	font-weight: 400;
	text-align: center;
	text-shadow: 0 4px 12px rgb(0 0 0 / 55%);
}

.feature-stories__action {
	margin-top: var(--space-8);
	text-align: center;
}

.immersive-hero__eyebrow[data-animate],
.immersive-hero__edition-eyebrow[data-animate],
.photos__item[data-animate],
.photos__stack-item[data-animate],
.photo-break__caption[data-animate],
.gallery__caption[data-animate],
.feature-stories__scroll-cue[data-animate],
.feature-stories__title[data-animate],
.feature-stories__subheading[data-animate],
.feature-stories__action[data-animate] {
	transition-delay: 100ms;
}

@keyframes immersive-bounce {
	0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
	50% { transform: none; animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
}

@keyframes gallery-settle {
	from { transform: scale(1.24); }
	to { transform: scale(1.1); }
}

@media (min-width: 40rem) {
	.immersive-hero__container,
	.photos__container {
		max-width: 40rem;
	}

	.photos__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 48rem) {
	.immersive-hero__container,
	.photos__container {
		max-width: 48rem;
	}

	.immersive-hero--feature,
	.immersive-hero__edition-image,
	.photo-break,
	.feature-stories__story {
		background-attachment: fixed;
	}
}

@media (min-width: 64rem) {
	.immersive-hero__container,
	.photos__container {
		max-width: 64rem;
	}

	.immersive-hero--minimal {
		padding-block: 110px var(--space-16);
	}

	.immersive-hero__minimal-layout {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		gap: var(--space-12);
	}

	.immersive-hero__minimal-copy {
		order: 1;
		grid-column: span 7;
		padding-block: var(--space-8);
	}

	.immersive-hero__minimal-title {
		font-size: 3rem;
	}

	.immersive-hero__minimal-dek {
		font-size: 1.5rem;
	}

	.immersive-hero__detail-value {
		font-size: 1.125rem;
	}

	.immersive-hero__portrait-wrap {
		order: 2;
		grid-column: span 5;
	}

	.immersive-hero__feature-content {
		padding-bottom: var(--space-24);
	}

	.immersive-hero--feature .immersive-hero__eyebrow {
		font-size: 1rem;
	}

	.immersive-hero__title--long,
	.immersive-hero__title--medium,
	.immersive-hero__title--short {
		font-size: 5.5rem;
	}

	.immersive-hero__dek {
		font-size: 1.875rem;
	}

	.immersive-hero__byline {
		font-size: 1rem;
	}

	.immersive-hero__photo-credit {
		right: var(--space-8);
		bottom: var(--space-6);
		font-size: 0.875rem;
	}

	.immersive-hero--edition {
		height: 68vh;
		min-height: 0;
	}

	.immersive-hero__edition-content {
		padding-bottom: var(--space-24);
	}

	.immersive-hero__edition-title {
		margin-top: var(--space-6);
		font-size: 6rem;
	}

	.immersive-hero__edition-rule,
	.immersive-hero__edition-dek {
		margin-top: 1.75rem;
	}

	.immersive-hero__edition-dek {
		font-size: 1.5rem;
	}

	.photos--polaroid,
	.photos--full-image {
		padding-block: var(--space-28);
	}

	.photos__container {
		padding-inline: var(--space-8);
	}

	.photos__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: var(--space-10);
	}

	.photos__item--offset-medium {
		margin-top: var(--space-16);
	}

	.photos__item--offset-large {
		margin-top: var(--space-28);
	}

	.photos__stack-item + .photos__stack-item {
		margin-top: var(--space-20);
	}

	.photos__frame {
		width: 72vw;
	}

	.photos__frame-caption {
		padding-inline: var(--space-12);
		padding-bottom: var(--space-20);
	}

	.photos__frame-text {
		font-size: 1.875rem;
	}

	.photo-break__caption {
		padding-inline: var(--space-16);
		padding-bottom: var(--space-28);
	}

	.photo-break__caption-text {
		font-size: 2.25rem;
	}

	.photo-break__credit {
		right: var(--space-8);
		bottom: var(--space-6);
		font-size: 0.875rem;
	}

	.photo-break__scroll-indicator {
		width: var(--space-16);
		height: var(--space-16);
	}

	.photo-break__scroll-icon {
		width: var(--space-8);
		height: var(--space-8);
	}

	.gallery__title,
	.gallery__script-word {
		font-size: 4.5rem;
	}

	.gallery__frame {
		position: relative;
		top: auto;
		display: flex;
		height: calc(100svh - var(--header-height));
		padding-bottom: 0;
		box-shadow: none;
		align-items: center;
		justify-content: center;
		scroll-snap-align: start;
	}

	.gallery__backdrop,
	.gallery__frame-scrim {
		display: block;
	}

	.gallery__image {
		position: relative;
		z-index: 1;
		height: 100%;
		max-height: none;
	}

	.gallery__caption {
		position: absolute;
		inset-inline: 0;
		bottom: 0;
		z-index: 3;
		width: 100%;
		padding: 0 var(--space-16) var(--space-24);
		color: var(--color-white);
	}

	.gallery .gallery__tag {
		color: var(--color-green-bright);
	}

	.gallery__caption-text {
		font-size: 2.25rem;
		text-shadow: 0 2px 12px rgb(0 0 0 / 55%);
	}

	.feature-stories__scroll-cue {
		padding-bottom: var(--space-4);
	}

	.feature-stories__scroll-icon {
		width: var(--space-16);
		height: var(--space-16);
	}

	.feature-stories__content {
		margin-bottom: var(--space-36);
		padding-inline: 0;
	}

	.feature-stories__title {
		font-size: 4rem;
	}

	.feature-stories__subheading {
		font-size: 2.25rem;
	}
}

@media (min-width: 90rem) {
	.immersive-hero__container,
	.photos__container {
		max-width: 90rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.immersive-hero__scroll-icon,
	.gallery__scroll-icon,
	.gallery__backdrop--settled {
		animation: none;
	}
}

:where(.editor-styles-wrapper, .block-editor-iframe__body) .feature-stories__story,
:where(.editor-styles-wrapper, .block-editor-iframe__body) .gallery__cover,
:where(.editor-styles-wrapper, .block-editor-iframe__body) .gallery__frame,
:where(.editor-styles-wrapper, .block-editor-iframe__body) .photos__filmstrip,
:where(.editor-styles-wrapper, .block-editor-iframe__body) .photo-break,
:where(.editor-styles-wrapper, .block-editor-iframe__body) .immersive-hero--feature,
:where(.editor-styles-wrapper, .block-editor-iframe__body) .immersive-hero--edition {
	height: auto !important;
	min-height: 0 !important;
}

:where(.editor-styles-wrapper, .block-editor-iframe__body) .immersive-hero--feature,
:where(.editor-styles-wrapper, .block-editor-iframe__body) .immersive-hero__edition-image,
:where(.editor-styles-wrapper, .block-editor-iframe__body) .photo-break,
:where(.editor-styles-wrapper, .block-editor-iframe__body) .feature-stories__story {
	background-attachment: scroll !important;
}
/* Collection, index, gallery callout, and separator blocks. */

/* Table of contents. */
.toc__shell {
	background: var(--color-white);
}

.toc__header {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	padding-bottom: var(--space-6);
	border-bottom: 1px solid rgb(19 23 22 / 15%);
}

.toc__title {
	margin: 0;
	color: var(--color-gray-800);
	font-family: var(--font-display);
	font-size: 1.875rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1;
}

.toc__issue {
	color: var(--color-green);
	font-family: var(--font-system);
	font-size: 1rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.toc__section {
	margin-top: var(--space-14);
}

.toc__section-heading {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	margin-bottom: var(--space-6);
}

.toc__section-title {
	flex: 0 0 auto;
	margin: 0;
	color: var(--color-green);
	font-family: var(--font-system);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
}

.toc__section-rule {
	height: 1px;
	flex: 1 1 auto;
	background: rgb(19 23 22 / 15%);
}

.toc__story-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: var(--space-8);
	row-gap: var(--space-12);
}

.toc__story-grid--after-feature {
	margin-top: var(--space-12);
}

.toc__story-grid > [data-animate]:nth-child(2) { transition-delay: 100ms; }
.toc__story-grid > [data-animate]:nth-child(3) { transition-delay: 200ms; }
.toc__story-grid > [data-animate]:nth-child(4) { transition-delay: 300ms; }

.story-card--toc {
	aspect-ratio: 3 / 4;
}

.story-card--toc .story-card__content {
	padding: var(--space-5);
}

.story-card--toc .story-card__title {
	font-size: 1.125rem;
	line-height: 1.375;
}

.story-card--toc .story-card__author {
	color: rgb(255 255 255 / 80%);
	letter-spacing: 0.15em;
}

.story-card--toc .story-card__kicker {
	letter-spacing: 0.25em;
}

.story-card--toc .story-card__description {
	color: rgb(255 255 255 / 75%);
}

.story-card--prominent .story-card__content {
	padding: var(--space-6);
}

.story-card--prominent .story-card__title {
	font-size: 1.5rem;
	line-height: 1.1;
}

.story-card--toc-feature {
	aspect-ratio: 4 / 3;
}

.story-card--toc-feature .story-card__scrim {
	background: linear-gradient(to top, rgb(0 0 0 / 85%), rgb(0 0 0 / 40%), transparent);
}

.story-card--toc-feature .story-card__content {
	padding: var(--space-6);
}

.story-card--toc-feature .story-card__title {
	max-width: 48rem;
	font-size: 1.875rem;
	line-height: 1.05;
}

.story-card--toc-feature .story-card__description {
	max-width: 42rem;
	margin-top: var(--space-3);
	color: rgb(255 255 255 / 80%);
	font-size: 1rem;
}

.story-card--toc-feature .story-card__author {
	margin-top: var(--space-3);
	color: rgb(255 255 255 / 80%);
	letter-spacing: 0.15em;
}

/* Recent issues. */
.recent-issues {
	position: relative;
	padding-block: var(--space-28) var(--space-16);
}

.recent-issues__background {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.recent-issues__background-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.recent-issues__background-wash {
	position: absolute;
	inset: 0;
	background: rgb(255 255 255 / 85%);
}

.recent-issues__content {
	position: relative;
}

.recent-issues__header {
	max-width: 42rem;
	margin-inline: auto;
	text-align: center;
}

.recent-issues__eyebrow {
	justify-content: center;
	font-size: 0.75rem;
}

.recent-issues__title {
	margin: var(--space-3) 0 0;
	color: var(--color-gray-900);
	font-family: var(--font-serif);
	font-size: 3rem;
	font-weight: 400;
	line-height: 1;
}

.recent-issues__intro {
	margin: var(--space-4) 0 0;
	color: var(--color-gray-600);
	font-family: var(--font-system);
}

.recent-issues__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-6);
	margin-top: var(--space-14);
}

.issue-card {
	display: block;
}

.issue-card__cover {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	border-radius: var(--radius-sm);
	background: var(--color-green-darkest);
	box-shadow: 0 1px 2px rgb(0 0 0 / 5%);
	outline: 1px solid rgb(0 0 0 / 5%);
	transition: transform 500ms var(--ease-fluid), box-shadow 500ms var(--ease-fluid);
}

.issue-card:hover .issue-card__cover {
	transform: translateY(-0.25rem);
	box-shadow: 0 20px 25px -5px rgb(0 0 0 / 10%), 0 8px 10px -6px rgb(0 0 0 / 10%);
}

.issue-card__cover-image,
.issue-card__fallback,
.issue-card__fallback-glow {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.issue-card__cover-image {
	object-fit: cover;
	transition: transform 1.2s var(--ease-fluid);
}

.issue-card:hover .issue-card__cover-image {
	transform: scale(1.05);
}

.issue-card__fallback {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-3);
	padding-inline: var(--space-5);
	background: linear-gradient(135deg, var(--color-green-dark), var(--color-green-darker), var(--color-green-darkest));
	text-align: center;
}

.issue-card__fallback-glow {
	background: radial-gradient(circle at 30% 20%, var(--color-white), transparent 55%);
	opacity: 0.07;
	pointer-events: none;
}

.issue-card__fallback-logo {
	position: relative;
	width: 66.666%;
	max-width: 10rem;
}

.issue-card__fallback-title {
	position: relative;
	color: var(--color-white);
	font-family: var(--font-serif);
	font-size: 1.875rem;
	line-height: 1;
}

.issue-card__badge {
	position: absolute;
	top: var(--space-3);
	left: var(--space-3);
	padding: var(--space-1) var(--space-3);
	border-radius: 999px;
	color: var(--color-white);
	font-family: var(--font-display);
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	backdrop-filter: blur(4px);
}

.issue-card__badge--online { background: rgb(0 172 62 / 80%); }
.issue-card__badge--print { background: rgb(0 0 0 / 55%); }

.issue-card__footer {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-3);
	margin-top: var(--space-4);
}

.issue-card__title {
	color: var(--color-gray-900);
	font-family: var(--font-serif);
	font-size: 1.25rem;
	line-height: 1.25;
}

.issue-card__action {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: var(--space-1);
	color: var(--color-green);
	font-family: var(--font-display);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	transition: color 300ms var(--ease-fluid);
}

.issue-card__action svg {
	width: 0.875rem;
	height: 0.875rem;
	transition: transform 300ms var(--ease-fluid);
}

.issue-card:hover .issue-card__action { color: var(--color-green-dark); }
.issue-card:hover .issue-card__action svg { transform: translateX(var(--space-1)); }

/* More stories. */
.more-stories {
	padding-block: var(--space-12);
	background-color: var(--color-white);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='152' height='152' viewBox='0 0 152 152'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23131716' fill-opacity='0.05'%3E%3Cpath d='M152 150v2H0v-2h28v-8H8v-20H0v-2h8V80h42v20h20v42H30v8h90v-8H80v-42h20V80h42v40h8V30h-8v40h-42V50H80V8h40V0h2v8h20v20h8V0h2v150zm-2 0v-28h-8v20h-20v8h28zM82 30v18h18V30H82zm20 18h20v20h18V30h-20V10H82v18h20v20zm0 2v18h18V50h-18zm20-22h18V10h-18v18zm-54 92v-18H50v18h18zm-20-18H28V82H10v38h20v20h38v-18H48v-20zm0-2V82H30v18h18zm-20 22H10v18h18v-18zm54 0v18h38v-20h20V82h-18v20h-20v20H82zm18-20H82v18h18v-18zm2-2h18V82h-18v18zm20 40v-18h18v18h-18zM30 0h-2v8H8v20H0v2h8v40h42V50h20V8H30V0zm20 48h18V30H50v18zm18-20H48v20H28v20H10V30h20V10h38v18zM30 50h18v18H30V50zm-2-40H10v18h18V10z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.more-stories__title {
	margin: 0;
	color: var(--color-gray-900);
	font-size: 3.75rem;
	font-weight: 700;
	line-height: 1;
	text-align: center;
}

.more-stories__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-8);
	margin-top: var(--space-8);
}

.more-stories__card {
	display: block;
	overflow: hidden;
	height: 100%;
	border-radius: var(--radius-md);
	transition: box-shadow 300ms ease-out;
}

.more-stories__card:hover {
	box-shadow: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%);
}

.more-stories__image {
	height: 16rem;
	overflow: hidden;
	background-position: center;
	background-size: cover;
}

.more-stories__card-content {
	height: 100%;
	padding: var(--space-6);
	border-radius: 0 0 var(--radius-md) var(--radius-md);
	background: var(--color-white);
}

.more-stories__card-title {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 600;
	transition: text-decoration-color 300ms ease-out;
}

.more-stories__card:hover .more-stories__card-title {
	text-decoration: underline;
}

.more-stories__summary,
.more-stories__type {
	display: block;
	margin: var(--space-2) 0 0;
	color: var(--color-gray-700);
	font-size: 1.125rem;
}

/* Gallery highlight. */
.gallery-highlight--light {
	background: var(--color-white);
	color: var(--color-gray-900);
}

.gallery-highlight--green {
	background: var(--color-green);
	color: var(--color-white);
}

.gallery-highlight--black {
	background: var(--color-gray-900);
	color: var(--color-white);
}

.gallery-highlight__layout {
	display: grid;
	align-items: center;
	gap: var(--space-14);
}

.gallery-highlight__container {
	padding-block: var(--space-20);
}

.gallery-highlight__copy .eyebrow__rule {
	opacity: 0.7;
}

.gallery-highlight__headline {
	margin: var(--space-6) 0 0;
	font-family: var(--font-body);
	font-size: 2.25rem;
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.05;
	text-wrap: balance;
}

.gallery-highlight__copy > .eyebrow + .gallery-highlight__headline {
	margin-top: var(--space-6);
}

.gallery-highlight__copy > .gallery-highlight__headline:first-child {
	margin-top: 0;
}

.gallery-highlight__accent {
	margin-top: var(--space-1);
	color: var(--color-green);
	font-family: var(--font-serif);
	font-size: 2.25rem;
	font-style: italic;
	line-height: 1.25;
}

.gallery-highlight--green .gallery-highlight__accent { color: rgb(255 255 255 / 90%); }
.gallery-highlight--black .gallery-highlight__accent { color: var(--color-green-bright); }

.gallery-highlight__body {
	max-width: 28rem;
	margin-top: var(--space-6);
	color: var(--color-gray-600);
	font-family: var(--font-body);
	font-size: 1.125rem;
	line-height: 1.625;
}

.gallery-highlight--green .gallery-highlight__body,
.gallery-highlight--black .gallery-highlight__body {
	color: rgb(255 255 255 / 70%);
}

.gallery-highlight__body p { margin-top: var(--space-4); }
.gallery-highlight__body p:first-child { margin-top: 0; }
.gallery-highlight__body a { text-decoration: underline; text-underline-offset: 2px; }

.gallery-highlight__button {
	margin-top: 2.25rem;
}

.gallery-highlight__mosaic {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: repeat(2, minmax(0, 1fr));
	gap: var(--space-3);
}

.gallery-highlight__tile {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 1;
	background: var(--color-gray-200);
}

.gallery-highlight__tile--lead {
	grid-row: span 2;
	align-self: center;
	aspect-ratio: 3 / 4;
}

.gallery-highlight__tile--action {
	background: var(--color-gray-900);
}

.gallery-highlight__tile-media,
.gallery-highlight__placeholder {
	width: 100%;
	height: 100%;
	transition: transform 700ms var(--ease-fluid);
}

.gallery-highlight__tile-media {
	object-fit: cover;
}

.gallery-highlight__tile:hover .gallery-highlight__tile-media,
.gallery-highlight__tile:hover .gallery-highlight__placeholder {
	transform: scale(1.05);
}

.gallery-highlight__tile-media--dimmed {
	opacity: 0.6;
}

.gallery-highlight__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
}

.gallery-highlight__placeholder--green { background: linear-gradient(135deg, var(--color-green), var(--color-green-darker)); }
.gallery-highlight__placeholder--brown { background: linear-gradient(135deg, var(--color-brown), var(--color-brown-dark)); }
.gallery-highlight__placeholder--dark { background: linear-gradient(135deg, var(--color-gray-700), var(--color-gray-900)); }

.gallery-highlight__placeholder-icon {
	width: var(--space-8);
	height: var(--space-8);
	color: rgb(255 255 255 / 40%);
}

.gallery-highlight__view-all {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: rgb(0 0 0 / 40%);
	color: var(--color-white);
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-align: center;
	text-transform: uppercase;
}

.gallery-highlight__remaining {
	font-size: 1.5rem;
}

.gallery-highlight__view-all-label {
	margin-top: var(--space-1);
	font-size: 0.6875rem;
	letter-spacing: 0.2em;
}

/* Separators. */
.separator-block {
	position: relative;
	background-color: var(--color-white);
}

.separator-block--photo {
	display: flex;
	align-items: flex-end;
	min-height: 45svh;
	background-color: var(--color-gray-900);
	background-position: center;
	background-size: cover;
}

.separator-block__photo-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgb(0 51 20 / 85%), rgb(0 51 20 / 35%), rgb(0 51 20 / 10%));
}

.separator-block__photo-content {
	position: relative;
	z-index: 1;
	padding-bottom: var(--space-10);
}

.separator-block__label .eyebrow__rule {
	background: var(--color-green-bright);
}

.separator-block--center-rule {
	padding-block: var(--space-4);
}

.separator-block__rule {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-8);
}

.separator-block__line {
	height: 1px;
	flex: 1 1 auto;
	background: rgb(19 23 22 / 15%);
}

.separator-block__node,
.separator-block__diamond {
	display: block;
	flex: 0 0 auto;
	transform: rotate(45deg);
	background: var(--color-green);
}

.separator-block__node {
	width: var(--space-4);
	height: var(--space-4);
}

.separator-block--pattern,
.separator-block--asterism {
	overflow: hidden;
	padding-block: var(--space-16);
}

.separator-block__pattern {
	position: absolute;
	inset: 0;
	-webkit-mask-image: radial-gradient(ellipse 70% 120% at 50% 50%, #000 28%, transparent 78%);
	mask-image: radial-gradient(ellipse 70% 120% at 50% 50%, #000 28%, transparent 78%);
}

.separator-block--dots .separator-block__pattern {
	background-image: radial-gradient(circle, rgb(0 172 62 / 32%) 1.5px, transparent 1.6px);
	background-size: 22px 22px;
}

.separator-block--diagonal .separator-block__pattern {
	background-image: repeating-linear-gradient(45deg, rgb(0 172 62 / 16%) 0, rgb(0 172 62 / 16%) 1px, transparent 1px, transparent 11px);
}

.separator-block--grid .separator-block__pattern {
	background-image: linear-gradient(rgb(17 24 39 / 7%) 1px, transparent 1px), linear-gradient(90deg, rgb(17 24 39 / 7%) 1px, transparent 1px);
	background-size: 30px 30px;
}

.separator-block__asterism {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-6);
}

.separator-block__diamond {
	width: var(--space-3);
	height: var(--space-3);
}

.separator-block__diamond--large {
	width: var(--space-4);
	height: var(--space-4);
}

@media (min-width: 40rem) {
	.toc__header {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
	}

	.toc__story-grid--two-columns,
	.toc__story-grid--three-columns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.story-card--toc-feature {
		aspect-ratio: 16 / 9;
	}

	.recent-issues__grid {
		gap: var(--space-8);
	}

	.gallery-highlight__mosaic {
		gap: var(--space-4);
	}
}

@media (min-width: 64rem) {
	.toc__title { font-size: 3rem; }
	.toc__section { margin-top: var(--space-20); }
	.toc__story-grid--three-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.toc__story-grid--after-feature { margin-top: var(--space-16); }
	.story-card--toc .story-card__content { padding: var(--space-5); }
	.story-card--toc .story-card__title { font-size: 1.5rem; }
	.story-card--prominent .story-card__content { padding: var(--space-8); }
	.story-card--prominent .story-card__kicker,
	.story-card--prominent .story-card__author { font-size: 0.875rem; }
	.story-card--prominent .story-card__title { font-size: 2.25rem; }
	.story-card--prominent .story-card__description { font-size: 1rem; }
	.story-card--toc-feature { aspect-ratio: 21 / 9; }
	.story-card--toc-feature .story-card__content { padding: var(--space-10); }
	.story-card--toc-feature .story-card__kicker,
	.story-card--toc-feature .story-card__author { font-size: 0.875rem; }
	.story-card--toc-feature .story-card__title { font-size: 3rem; }
	.story-card--toc-feature .story-card__description { font-size: 1.125rem; }

	.recent-issues { padding-block: var(--space-28); }
	.recent-issues__title { font-size: 3.75rem; }
	.recent-issues__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--space-12);
	}
	.issue-card__fallback-title { font-size: 2.25rem; }

	.more-stories { padding-block: var(--space-24); }
	.more-stories__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--space-16);
	}

	.gallery-highlight__layout {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		gap: var(--space-16);
	}
	.gallery-highlight__container { padding-block: var(--space-28); }
	.gallery-highlight__headline,
	.gallery-highlight__accent { font-size: 3rem; }

	.separator-block--photo { min-height: 55svh; }
	.separator-block__photo-content { padding-bottom: var(--space-14); }
	.separator-block__label .eyebrow__rule { width: var(--space-16); }
	.separator-block--center-rule { padding-block: var(--space-8); }
	.separator-block--pattern,
	.separator-block--asterism { padding-block: var(--space-20); }
	.separator-block__node,
	.separator-block__diamond--large {
		width: var(--space-5);
		height: var(--space-5);
	}
	.separator-block__asterism { gap: var(--space-8); }
}
/* WordPress block editor canvas overrides. */
:where(.editor-styles-wrapper, .block-editor-iframe__body) {
	font-family: var(--font-body);
	color: var(--color-gray-900);
}

:where(.editor-styles-wrapper, .block-editor-iframe__body) a {
	color: inherit;
}

:where(.editor-styles-wrapper, .block-editor-iframe__body) [data-animate] {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
}

:where(.editor-styles-wrapper, .block-editor-iframe__body) [x-cloak],
:where(.editor-styles-wrapper, .block-editor-iframe__body) [x-show] {
	display: revert !important;
}

:where(.editor-styles-wrapper, .block-editor-iframe__body) .wp-block,
:where(.editor-styles-wrapper, .block-editor-iframe__body) .wp-block[data-align="wide"],
:where(.editor-styles-wrapper, .block-editor-iframe__body) .block-editor-block-list__layout > .wp-block {
	max-width: none !important;
}

:where(.editor-styles-wrapper, .block-editor-iframe__body) .herdline-block {
	height: auto !important;
	min-height: 0 !important;
}

:where(.editor-styles-wrapper, .block-editor-iframe__body) .editorial-content::before {
	background-attachment: scroll !important;
}

:where(.editor-styles-wrapper, .block-editor-iframe__body) .editorial-content__media-column,
:where(.editor-styles-wrapper, .block-editor-iframe__body) .scrollytelling__media-column {
	position: static !important;
	height: auto !important;
}

:where(.editor-styles-wrapper, .block-editor-iframe__body) .editorial-content__media-column:empty {
	display: none;
}

:where(.editor-styles-wrapper, .block-editor-iframe__body) .editorial-content__layout:has(> .editorial-content__media-column:empty) .editorial-content__body {
	grid-column: 1 / -1 !important;
}

:where(.editor-styles-wrapper, .block-editor-iframe__body) .wp-block-herdline-hero,
:where(.editor-styles-wrapper, .block-editor-iframe__body) .wp-block-herdline-gallery,
:where(.editor-styles-wrapper, .block-editor-iframe__body) .wp-block-herdline-photos,
:where(.editor-styles-wrapper, .block-editor-iframe__body) .wp-block-herdline-quote,
:where(.editor-styles-wrapper, .block-editor-iframe__body) .wp-block-herdline-separator,
:where(.editor-styles-wrapper, .block-editor-iframe__body) .wp-block-herdline-feature-stories,
:where(.editor-styles-wrapper, .block-editor-iframe__body) .wp-block-herdline-scrollytelling {
	max-height: 500px;
	overflow: hidden;
}

:where(.editor-styles-wrapper, .block-editor-iframe__body) .immersive-hero,
:where(.editor-styles-wrapper, .block-editor-iframe__body) .gallery__cover,
:where(.editor-styles-wrapper, .block-editor-iframe__body) .gallery__frame,
:where(.editor-styles-wrapper, .block-editor-iframe__body) .photos__filmstrip,
:where(.editor-styles-wrapper, .block-editor-iframe__body) .photos__frame,
:where(.editor-styles-wrapper, .block-editor-iframe__body) .photo-break,
:where(.editor-styles-wrapper, .block-editor-iframe__body) .quote-block,
:where(.editor-styles-wrapper, .block-editor-iframe__body) .feature-stories__story {
	height: auto !important;
	min-height: 0 !important;
}

/* The preview box clips overflow, so a sticky gallery card would only be pushed down. */
:where(.editor-styles-wrapper, .block-editor-iframe__body) .gallery__frame {
	position: relative !important;
}