.project-single__masthead {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	margin-bottom: var(--space-sm);
	font-size: var(--text-body);
	line-height: var(--line-height-body);
}

.project-single__heading {
	display: flex;
	align-items: baseline;
	gap: var(--space-xs);
	min-width: 0;
}

.project-single__heading h1,
.project-single__heading p {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
}

.project-single__heading h1 {
	font-size: var(--text-project);
	font-weight: var(--weight-extra-bold);
}

.project-single__nav {
	position: absolute;
	top: 50%;
	right: var(--page-gutter);
	display: flex;
	align-items: center;
	gap: var(--space-md);
	flex-shrink: 0;
	transform: translateY(-50%);
}

.project-single__nav-icon {
	display: block;
	flex: 0 0 auto;
}

.project-single__nav-icon--return {
	width: 13px;
	height: 13px;
}

.project-single__nav-icon--next {
	width: 6px;
	height: 10px;
}

.project-carousel {
	position: relative;
}

.project-carousel__frame {
	position: relative;
	aspect-ratio: 1860 / 755;
	overflow: hidden;
	background: var(--color-background);
}

.project-carousel__slide {
	width: 100%;
	height: 100%;
	margin: 0;
}

.project-carousel__slide.is-leaving-next,
.project-carousel__slide.is-leaving-previous,
.project-carousel__slide.is-entering-next,
.project-carousel__slide.is-entering-previous {
	position: absolute;
	inset: 0;
	backface-visibility: hidden;
	pointer-events: none;
	will-change: transform;
}

.project-carousel__slide.is-leaving-next {
	animation: project-carousel-leave-next var(--transition-carousel) var(--ease-carousel) both;
}

.project-carousel__slide.is-entering-next {
	animation: project-carousel-enter-next var(--transition-carousel) var(--ease-carousel) both;
}

.project-carousel__slide.is-leaving-previous {
	animation: project-carousel-leave-previous var(--transition-carousel) var(--ease-carousel) both;
}

.project-carousel__slide.is-entering-previous {
	animation: project-carousel-enter-previous var(--transition-carousel) var(--ease-carousel) both;
}

@keyframes project-carousel-leave-next {
	to {
		transform: translateX(-100%);
	}
}

@keyframes project-carousel-enter-next {
	from {
		transform: translateX(100%);
	}
}

@keyframes project-carousel-leave-previous {
	to {
		transform: translateX(100%);
	}
}

@keyframes project-carousel-enter-previous {
	from {
		transform: translateX(-100%);
	}
}

.project-carousel__slide[hidden] {
	display: none;
}

.project-carousel__image {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.project-carousel__pointer-controls {
	display: none;
}

.project-carousel__pointer-control {
	position: absolute;
	z-index: 1;
	top: 0;
	bottom: 0;
	width: 50%;
	padding: 0;
	border: 0;
	background: transparent;
}

.project-carousel__pointer-control--previous {
	left: 0;
}

.project-carousel__pointer-control--next {
	right: 0;
}

.project-carousel__controls {
	position: absolute;
	z-index: 2;
	right: calc(var(--page-gutter) + var(--space-2xs));
	bottom: var(--space-2xs);
	display: flex;
	gap: var(--space-2xs);
}

.project-carousel__control {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0 0 4px;
	border: 0;
	border-radius: var(--radius-pill);
	color: var(--color-text);
	background: rgb(255 255 255 / 50%);
	font: inherit;
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--transition-fast) var(--ease-standard);
}

.project-carousel__control:focus-visible {
	outline: 2px solid var(--color-text);
	outline-offset: 2px;
}

.project-details {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--grid-gap);
	margin-block: var(--space-sm) 0;
	padding-bottom: var(--space-md);
}

.project-details__item {
	min-width: 0;
}

.project-details dt,
.project-details dd {
	margin: 0;
	font-size: var(--text-body);
	line-height: var(--line-height-body);
}

.project-details dt {
	font-weight: var(--weight-extra-bold);
}

.project-single__content {
	padding-top: var(--space-lg);
}

@media (hover: hover) and (pointer: fine) {
	.project-carousel__control:hover {
		background: var(--color-background);
	}
}

@media (max-width: 1100px) {
	.project-details {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 521px) and (max-width: 1100px) {
	.project-details:last-child {
		padding-bottom: calc(var(--space-md) * 2);
	}
}

@media (max-width: 781px) {
	.project-single__masthead {
		align-items: flex-start;
		flex-direction: column;
	}

	.project-single__heading {
		align-items: flex-start;
		flex-direction: column;
		gap: 0;
	}

	.project-single__nav {
		position: static;
		justify-content: space-between;
		width: 100%;
		transform: none;
	}

	.project-carousel__frame {
		aspect-ratio: 4 / 3;
	}

	.project-carousel__controls {
		position: static;
		justify-content: flex-end;
		margin-top: var(--space-xs);
	}

	.project-carousel__control {
		background: transparent;
	}
}

@media (max-width: 520px) {
	.project-details {
		grid-template-columns: 1fr;
	}
}

@media (hover: hover) and (pointer: fine) {
	.project-carousel__pointer-controls {
		display: block;
	}

	.project-carousel__pointer-control--previous {
		cursor: url("../images/carousel-cursor-previous.svg") 20 20, w-resize;
	}

	.project-carousel__pointer-control--next {
		cursor: url("../images/carousel-cursor-next.svg") 20 20, e-resize;
	}

	.project-carousel__controls {
		opacity: 0;
		pointer-events: none;
	}

	.project-carousel__controls:focus-within {
		opacity: 1;
		pointer-events: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.project-carousel__slide.is-leaving-next,
	.project-carousel__slide.is-leaving-previous,
	.project-carousel__slide.is-entering-next,
	.project-carousel__slide.is-entering-previous {
		animation: none;
	}

	.project-carousel__control {
		transition: none;
	}
}