.site-main--projects,
.site-main--project-single {
	width: 100%;
	max-width: none;
	padding: 0;
	overflow: clip;
}

.projects-hero {
	position: relative;
	display: grid;
	min-height: clamp(34rem, 64vh, 44rem);
	align-items: end;
	padding: var(--ewh-internal-hero-space-top) max(var(--ewh-gutter), calc((100vw - var(--ewh-content-width)) / 2 + var(--ewh-gutter))) var(--ewh-internal-hero-space-bottom);
	overflow: hidden;
	background: var(--ewh-color-black);
}

.projects-hero__content {
	position: relative;
	z-index: 1;
	max-width: 67rem;
}

.projects-hero :where(.ewh-eyebrow, h1) {
	color: var(--ewh-color-white);
}

.projects-hero h1 {
	max-width: 10ch;
	font-size: clamp(3.75rem, 6.5vw, 6rem);
}

.projects-hero p {
	max-width: 48rem;
	margin: var(--ewh-space-4) 0 0;
	color: rgb(255 255 255 / 74%);
	font-size: var(--ewh-font-size-large);
}

.projects-hero__geometry {
	position: absolute;
	inset: 0 0 0 48%;
	display: grid;
	grid-template-columns: 1.3fr 0.7fr 1fr;
	transform: skewX(-17deg) scale(1.25);
}

.projects-hero__geometry span {
	border-left: 1px solid rgb(255 255 255 / 18%);
	background: linear-gradient(180deg, transparent, rgb(255 255 255 / 8%));
}

.projects-hero__geometry span:nth-child(2) {
	background: var(--ewh-color-navy);
	opacity: 0.65;
}

.projects-archive {
	padding: var(--ewh-section-space) max(var(--ewh-gutter), calc((100vw - var(--ewh-content-width)) / 2 + var(--ewh-gutter)));
}

.projects-archive__header {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--ewh-space-4);
	align-items: end;
	margin-bottom: var(--ewh-space-7);
}

.projects-archive__header :where(.ewh-eyebrow, h2) {
	grid-column: 1 / span 8;
}

.projects-archive__header h2 {
	margin-bottom: 0;
}

.projects-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ewh-space-6) var(--ewh-space-4);
}

.project-card:first-child:nth-last-child(1) {
	grid-column: 1 / -1;
}

.project-card__media {
	margin: 0;
	overflow: hidden;
	background: var(--ewh-color-off-white);
}

.project-card__image {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 500ms ease;
}

.project-card:hover .project-card__image {
	transform: scale(1.02);
}

.project-card__body {
	display: grid;
	grid-template-columns: 3rem minmax(0, 1fr);
	gap: var(--ewh-space-3);
	padding-top: var(--ewh-space-3);
	border-top: 1px solid var(--ewh-color-black);
}

.project-card__index,
.project-card__location {
	color: var(--ewh-color-muted-text);
	font-size: var(--ewh-font-size-label);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.project-card__content h2 {
	max-width: 18ch;
	margin: var(--ewh-space-2) 0;
}

.project-card__content > p:not(.project-card__location) {
	max-width: var(--ewh-reading-width);
	color: var(--ewh-color-muted-text);
}

.project-card__link {
	display: inline-flex;
	gap: var(--ewh-space-2);
	margin-top: var(--ewh-space-2);
	color: var(--ewh-color-black);
	font-size: var(--ewh-font-size-small);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-decoration: none;
	text-transform: uppercase;
}

.projects-empty {
	grid-column: 1 / -1;
	max-width: var(--ewh-reading-width);
	padding: var(--ewh-space-7) 0;
	border-top: 1px solid var(--ewh-color-black);
}

.projects-empty h2 {
	max-width: 15ch;
}

.projects-empty p {
	color: var(--ewh-color-muted-text);
}

.projects-archive .navigation.pagination {
	margin-top: var(--ewh-space-7);
}

.projects-cta,
.project-single-overview,
.project-single-gallery {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--ewh-space-4);
	padding: var(--ewh-section-space) max(var(--ewh-gutter), calc((100vw - var(--ewh-content-width)) / 2 + var(--ewh-gutter)));
}

.projects-cta {
	align-items: end;
	background: var(--ewh-color-navy);
	color: var(--ewh-color-white);
}

.projects-cta > div:first-child {
	grid-column: 1 / span 8;
}

.projects-cta__content {
	grid-column: 10 / -1;
}

.projects-cta :where(.ewh-eyebrow, h2) {
	color: var(--ewh-color-white);
}

.projects-cta h2 {
	max-width: 15ch;
	margin-bottom: 0;
}

.projects-cta__content p {
	color: rgb(255 255 255 / 74%);
}

.projects-cta .ewh-button {
	margin-top: var(--ewh-space-2);
	border-color: var(--ewh-color-white);
	background: var(--ewh-color-white);
	color: var(--ewh-color-black);
}

.site-main--projects + .site-footer,
.site-main--project-single + .site-footer {
	margin-top: 0;
}

.project-single-hero {
	position: relative;
	display: grid;
	min-height: clamp(38rem, 76vh, 52rem);
	align-items: end;
	padding: var(--ewh-internal-hero-space-top) max(var(--ewh-gutter), calc((100vw - var(--ewh-content-width)) / 2 + var(--ewh-gutter))) var(--ewh-internal-hero-space-bottom);
	overflow: hidden;
	background: var(--ewh-color-black);
}

.project-single-hero::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgb(0 0 0 / 16%), rgb(0 0 0 / 90%));
	content: "";
}

.project-single-hero__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.project-single-hero__content {
	position: relative;
	z-index: 1;
	max-width: 70rem;
}

.project-single-hero :where(.ewh-eyebrow, h1) {
	color: var(--ewh-color-white);
}

.project-single-hero h1 {
	max-width: 17ch;
}

.project-single-hero p {
	color: rgb(255 255 255 / 78%);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.project-single-overview header,
.project-single-gallery header {
	grid-column: 1 / span 5;
}

.project-single-overview__content,
.project-single-gallery__grid {
	grid-column: 7 / -1;
}

.project-single-overview__content {
	font-size: var(--ewh-font-size-large);
}

.project-single-gallery {
	background: var(--ewh-color-off-white);
}

.project-single-gallery__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ewh-space-3);
}

.project-single-gallery figure {
	margin: 0;
}

.project-single-gallery img {
	display: block;
	width: 100%;
	height: auto;
}

@media (max-width: 64rem) {
	.projects-archive__header,
	.projects-cta,
	.project-single-overview,
	.project-single-gallery {
		grid-template-columns: repeat(8, minmax(0, 1fr));
	}

	.projects-archive__header :where(.ewh-eyebrow, h2),
	.projects-cta > div:first-child,
	.projects-cta__content,
	.project-single-overview header,
	.project-single-overview__content,
	.project-single-gallery header,
	.project-single-gallery__grid {
		grid-column: 1 / -1;
	}

	.projects-cta__content {
		max-width: var(--ewh-reading-width);
	}
}

@media (max-width: 48rem) {
	.projects-hero {
		min-height: 36rem;
	}

	.projects-hero h1 {
		font-size: clamp(3.25rem, 14vw, 4.5rem);
	}

	.projects-grid,
	.project-single-gallery__grid {
		grid-template-columns: 1fr;
	}

	.project-card:first-child:nth-last-child(1) {
		grid-column: auto;
	}

	.project-card__body {
		grid-template-columns: 2rem minmax(0, 1fr);
	}

	.projects-cta .ewh-button {
		width: 100%;
	}
}