/* Project detail page, composed to the measured reference at 1440px.
   Hero fills the viewport with the title low on the left at 72px. The
   intro band pairs the summary sentence, 26.8px on a 420px measure,
   with a three across thumbnail grid on 26px and 79px gaps. The about
   zone runs mono labels in the left column against meta rows and body
   copy in the right column, values from x 40 percent, body 17.4px on a
   1.6 line at an 828px measure, section padding 64px. The split shows
   two staggered inset portraits offset 82px. Tones, fonts, reveals and
   buttons are the site's own. Scoped under .project-single because the
   page css directory loads on every route. */

.project-single .project-detail-hero {
	position: relative;
	height: 100vh;
	min-height: 30rem;
	overflow: hidden;
	background: var(--color-surface-strong);
}

.project-single .project-detail-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: var(--photo-grade);
}

.project-single .project-detail-hero__inner {
	position: absolute;
	top: 49%;
	left: 0;
	right: 0;
}

.project-single .project-detail-hero__title {
	margin: 0;
	font-family: var(--font-heading);
	font-size: clamp(2.4rem, 5vw, 4.5rem);
	font-weight: 500;
	line-height: 0.9;
	letter-spacing: normal;
	text-transform: uppercase;
	color: #f0f2ee;
}

.project-single .project-detail-hero__title--plain {
	color: var(--color-ink);
}

/* Intro: summary sentence left, thumbnail grid right. */
.project-single .project-detail-intro__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
	gap: clamp(2.4rem, 5vw, 5.4rem);
	align-items: start;
}

.project-single .project-detail-intro__lead {
	margin: 0;
	max-width: 26.5rem;
	font-family: var(--font-heading);
	font-size: 1.675rem;
	line-height: 1.3;
	font-weight: 500;
	color: var(--color-ink);
}

.project-single .project-detail-intro__thumbs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 4.9rem 1.625rem;
}

.project-single .project-detail-intro__thumb {
	margin: 0;
	aspect-ratio: 210 / 173;
	overflow: hidden;
	background: var(--color-surface-strong);
}

.project-single .project-detail-intro__thumb-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: var(--photo-grade);
}

/* About zone: mono label left, name, meta rows and body right. */
.project-single .project-detail-about__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.66fr) minmax(0, 1fr);
	gap: clamp(2.4rem, 5vw, 5.4rem);
	align-items: start;
}

.project-single .project-detail-about__label {
	margin: 0;
	padding-bottom: 0.6rem;
	border-bottom: 1px solid var(--color-line);
	font-family: var(--font-mono);
	font-size: 0.86rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-muted);
}

.project-single .project-detail-about__name {
	margin: 0;
	padding-bottom: 0.6rem;
	border-bottom: 1px solid var(--color-line);
	font-family: var(--font-heading);
	font-size: 1.675rem;
	line-height: 1.3;
	font-weight: 500;
	color: var(--color-ink);
}

.project-single .project-detail-about__rows {
	margin: 0;
	display: flex;
	flex-direction: column;
}

.project-single .project-detail-about__row {
	display: grid;
	grid-template-columns: minmax(0, 0.66fr) minmax(0, 1fr);
	gap: var(--space-4);
	padding: 1.4rem 0 0.6rem;
	border-bottom: 1px solid var(--color-line);
}

.project-single .project-detail-about__row dt {
	font-family: var(--font-mono);
	font-size: 0.86rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-muted);
}

.project-single .project-detail-about__row dd {
	margin: 0;
	font-size: 1.0875rem;
	font-weight: 500;
	color: var(--color-ink);
}

.project-single .project-detail-about__body {
	max-width: 51.75rem;
	margin-top: clamp(2.2rem, 3.6vw, 3.4rem);
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.project-single .project-detail-about__lead-copy {
	margin: 0;
	font-size: 1.0875rem;
	line-height: 1.6;
	font-weight: 500;
	color: var(--color-ink);
}

.project-single .project-detail-about__copy {
	margin: 0;
	font-size: 1.0875rem;
	line-height: 1.6;
	color: var(--color-muted);
}

.project-single .project-detail-about__scope {
	margin: var(--space-2) 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.project-single .project-detail-about__scope li {
	display: flex;
	align-items: baseline;
	gap: var(--space-3);
	font-size: 1.0875rem;
	line-height: 1.5;
	color: var(--color-muted);
}

.project-single .project-detail-about__scope-marker {
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--color-accent);
	transform: translateY(-1px);
}

/* Split: two staggered inset portraits. */
.project-single .project-detail-split__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: clamp(2rem, 4vw, 4.4rem);
	align-items: start;
}

.project-single .project-detail-split__item {
	margin: 0;
	overflow: hidden;
	background: var(--color-surface-strong);
}

.project-single .project-detail-split__item--lead {
	aspect-ratio: 4 / 5;
}

.project-single .project-detail-split__item--trail {
	aspect-ratio: 4 / 5;
	margin-top: 5.125rem;
}

.project-single .project-detail-split__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: var(--photo-grade);
}

/* Next project: shared band pattern with a quiet header. */
.project-single .project-detail-next {
	padding-top: clamp(3rem, 5vw, 4.5rem);
}

.project-single .project-detail-next__head {
	margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
}

.project-single .project-detail-next .work-bands {
	margin-top: 0;
}

@media (max-width: 900px) {
	.project-single .project-detail-intro__grid,
	.project-single .project-detail-about__grid {
		grid-template-columns: 1fr;
	}

	.project-single .project-detail-intro__thumbs {
		gap: clamp(1rem, 3vw, 2rem);
	}

	.project-single .project-detail-about__label {
		border-bottom: 0;
		padding-bottom: 0;
	}
}

@media (max-width: 640px) {
	.project-single .project-detail-hero {
		height: 72vh;
	}

	.project-single .project-detail-intro__thumbs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.project-single .project-detail-split__grid {
		grid-template-columns: 1fr;
	}

	.project-single .project-detail-split__item--trail {
		margin-top: 0;
	}

	.project-single .project-detail-about__row {
		grid-template-columns: 1fr;
		gap: 0.4rem;
	}
}