.project-page {
	padding-block: var(--air-4) var(--air-6);
}
.project-page__panel {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	align-items: center;
	gap: var(--air-4);
	padding: var(--air-4);
	border-radius: var(--r-lg);
	background: var(--field);
	background-image: var(--strata-a, url("../img/strata-a.webp"));
	background-size: cover;
	background-position: center;
	box-shadow: var(--lift-card);
}
.project-page__cover img,
.project-page__blank {
	width: 100%;
	height: auto;
	aspect-ratio: 710 / 460;
	object-fit: cover;
	border-radius: var(--r-md);
	border: 1px solid var(--edge);
}
.project-page__blank { background: color-mix(in srgb, var(--edge) 45%, var(--field)); }
.project-page__lead {
	display: grid;
	justify-items: start;
}
.project-page__kicker {
	margin-bottom: var(--air-3);
}
.project-page__title {
	max-width: 16ch;
	font-size: var(--fs-8);
}
.project-page__actions {
	margin-top: var(--air-4);
}
.project-page__gallery {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--air-1);
	margin-top: var(--air-6);
}
.project-page__frame {
	margin: 0;
}
.project-page__frame:first-child:nth-last-child(odd) {
	grid-column: 1 / -1;
}
.project-page__frame img,
.project-page__frame .project-page__blank {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: var(--r-md);
	border: 1px solid var(--edge);
}
.project-page__frame:first-child:nth-last-child(odd) img,
.project-page__frame:first-child:nth-last-child(odd) .project-page__blank {
	aspect-ratio: 21 / 9;
}
.beat {
	display: grid;
	justify-items: start;
	gap: var(--air-1);
	margin-top: var(--air-6);
}
.beat--mid { margin-inline-start: clamp(0rem, 6vw, 5rem); }
.beat--ink { margin-inline-start: clamp(0rem, 12vw, 10rem); }
.beat__label { margin-left: 0; }
.beat__body {
	max-width: 62ch;
	padding: var(--air-3) var(--air-3);
	border-radius: var(--r-lg);
	font-size: var(--fs-4);
	line-height: var(--lh-air);
}
.beat__body p + p { margin-top: 0.75em; }
.beat--paper .beat__body {
	background: var(--field);
	border: 1px solid var(--edge);
}
.beat--mid .beat__body { background: var(--tint); }
.beat--ink .beat__body {
	background: var(--ink);
	color: var(--field);
}
.project-page__next {
	display: flex;
	justify-content: center;
	margin-top: var(--air-6);
}
@media (max-width: 820px) {
	.project-page__panel { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
	.beat--mid,
	.beat--ink { margin-inline-start: 0; }
	.project-page__gallery { grid-template-columns: minmax(0, 1fr); }
}
