:root {
	--project-detail-gutter: clamp(20px, 2.6vw, 52px);
	--project-detail-nav-height: 34px;
	--project-detail-cream: #f2efe9;
	--project-detail-muted: rgba(24, 24, 24, 0.56);
	color-scheme: light;
}

html,
.project-detail-page {
	width: 100%;
	height: 100%;
}

.project-detail-page {
	overflow: hidden;
	background: #f8f7f4;
	color: #181818;
	font-family: var(--font-sans);
}

.project-detail-page a,
.project-detail-page button {
	-webkit-tap-highlight-color: transparent;
}

.project-detail-page :focus-visible {
	outline: 2px solid #181818;
	outline-offset: 5px;
}

.project-detail__server-source,
.project-detail-page .photos {
	display: none !important;
}

.project-detail-page .skip-link {
	z-index: 100;
	background: #fff;
	color: #111;
}

.sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.project-detail-nav {
	position: fixed;
	z-index: 30;
	top: 0;
	right: 0;
	left: 0;
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	height: var(--project-detail-nav-height);
	align-items: center;
	padding: 0 max(9px, 0.45vw);
	background: linear-gradient(180deg, rgba(248, 247, 244, 0.96), rgba(248, 247, 244, 0));
	pointer-events: none;
}

.project-detail-nav a,
.project-detail-nav button {
	display: flex;
	min-width: 0;
	min-height: var(--project-detail-nav-height);
	align-items: center;
	justify-content: center;
	border: 0;
	padding: 0;
	background: transparent;
	color: rgba(24, 24, 24, 0.56);
	font-family: var(--font-sans);
	font-size: 10.5px;
	font-weight: 500;
	line-height: 10.5px;
	letter-spacing: 0;
	text-decoration: none;
	pointer-events: auto;
	transition: color 220ms ease;
}

.project-detail-nav__brand {
	grid-column: 1;
	justify-self: start;
}

.project-detail-nav__back {
	grid-column: 2;
}

.project-detail-nav__title {
	grid-column: 3;
	grid-row: 1;
	margin: 0;
	overflow: hidden;
	color: rgba(24, 24, 24, 0.9);
	font-family: var(--font-sans);
	font-size: 10.5px;
	font-weight: 500;
	line-height: 10.5px;
	letter-spacing: 0;
	text-align: center;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.project-detail-nav__details {
	grid-column: 4;
	grid-row: 1;
}

.project-detail-nav__projects {
	display: contents;
}

.project-detail-nav__projects [data-project-previous] {
	grid-column: 5;
	grid-row: 1;
}

.project-detail-nav__projects [data-project-next] {
	grid-column: 6;
	grid-row: 1;
	justify-self: end;
}

.project-detail-nav__flip {
	position: relative;
	display: block;
	height: 10.5px;
	overflow: hidden;
	line-height: 10.5px;
}

.project-detail-nav__flip > span {
	display: flex;
	height: 10.5px;
	align-items: center;
	white-space: nowrap;
	transition: transform 0.475s cubic-bezier(0.76, 0, 0.24, 1);
}

.project-detail-nav__flip > span:nth-child(2) {
	position: absolute;
	top: 100%;
	left: 0;
}

.project-detail-nav a:hover,
.project-detail-nav button:hover,
.project-detail-nav a:focus-visible,
.project-detail-nav button:focus-visible {
	color: #181818;
}

.project-detail-nav a:hover .project-detail-nav__flip > span,
.project-detail-nav button:hover .project-detail-nav__flip > span,
.project-detail-nav a:focus-visible .project-detail-nav__flip > span,
.project-detail-nav button:focus-visible .project-detail-nav__flip > span {
	transform: translateY(-100%);
}

.project-detail {
	width: 100%;
	height: 100%;
}

.project-detail__gallery {
	position: relative;
	width: 100%;
	min-height: 100svh;
	min-height: 100dvh;
	overflow: hidden;
	background: #f8f7f4;
	isolation: isolate;
	touch-action: none;
}

.project-detail__heading {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.project-detail__loading,
.project-detail__error {
	position: absolute;
	z-index: 5;
	top: 50%;
	left: 50%;
	margin: 0;
	transform: translate(-50%, -50%);
	text-align: center;
}

.project-detail__loading {
	display: grid;
	width: min(74vw, 280px);
	grid-template-columns: 1fr auto;
	align-items: center;
	color: rgba(24, 24, 24, 0.62);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-align: left;
	text-transform: uppercase;
	gap: 13px 18px;
}

.project-detail__loading-value {
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.project-detail__loading-rule {
	position: relative;
	grid-column: 1 / -1;
	height: 1px;
	overflow: hidden;
	background: rgba(24, 24, 24, 0.18);
}

.project-detail__loading-rule span {
	position: absolute;
	inset: 0;
	transform: scaleX(0);
	transform-origin: left center;
	background: #181818;
}

.project-detail__error {
	width: min(86vw, 620px);
}

.project-detail__error-kicker {
	margin-bottom: 20px;
	color: rgba(24, 24, 24, 0.54);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.project-detail__error h2 {
	margin-bottom: 34px;
	color: #181818;
	font-size: clamp(38px, 6vw, 72px);
}

.project-detail__error a {
	display: inline-flex;
	min-height: 44px;
	align-items: center;
	border-bottom: 1px solid rgba(24, 24, 24, 0.62);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-decoration: none;
	text-transform: uppercase;
}

.project-detail__viewport {
	position: absolute;
	z-index: 2;
	inset: var(--project-detail-nav-height) 0 78px;
	overflow: hidden;
	cursor: grab;
	touch-action: none;
	user-select: none;
}

.project-detail__viewport.is-dragging {
	cursor: grabbing;
}

.project-detail__track {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	width: max-content;
	height: 100%;
	align-items: center;
	gap: clamp(70px, 8vw, 165px);
	will-change: transform;
}

.project-detail__slide {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	margin: 0;
	opacity: 0.52;
	transform: scale(0.94);
	transition: opacity 420ms ease, transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

.project-detail__enlarge {
	display: block;
	border: 0;
	padding: 0;
	background: transparent;
	color: inherit;
	cursor: zoom-in;
}

.project-detail__enlarge::after {
	position: absolute;
	right: 14px;
	bottom: 12px;
	padding: 5px 7px;
	background: rgba(0, 0, 0, 0.58);
	color: rgba(255, 255, 255, 0.9);
	content: "View";
	font-size: 8px;
	font-weight: 600;
	letter-spacing: 0.12em;
	opacity: 0;
	text-transform: uppercase;
	transform: translateY(6px);
	transition: opacity 220ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.project-detail__slide {
	position: relative;
}

.project-detail__enlarge:hover::after,
.project-detail__enlarge:focus-visible::after {
	opacity: 1;
	transform: translateY(0);
}

.project-detail__slide[aria-current="true"] {
	opacity: 1;
	transform: scale(1);
}

.project-detail__slide img {
	width: auto;
	height: auto;
	max-width: min(70vw, 1100px);
	max-height: calc(100dvh - 190px);
	object-fit: contain;
	box-shadow: 0 22px 70px rgba(49, 42, 36, 0.12);
	pointer-events: none;
}

.project-detail__slide--next-project {
	display: block;
	width: min(76vw, 1200px);
	opacity: 1;
	transform: none;
}

.project-detail__slide--next-project[aria-current="true"] {
	transform: none;
}

.project-detail__next-project-image {
	display: flex;
	height: min(64dvh, 780px);
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.project-detail__next-project-image img {
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: cover;
	transform: scale(1.015);
	transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.project-detail__next-project-image:hover img,
.project-detail__next-project-image:focus-visible img {
	transform: scale(1.05);
}

.project-lightbox {
	position: fixed;
	z-index: 80;
	inset: 0;
	overflow: hidden;
	background: #f8f7f4;
	color: #181818;
	isolation: isolate;
}

.project-lightbox__topbar {
	position: absolute;
	z-index: 8;
	top: 0;
	right: 0;
	left: 0;
	display: flex;
	height: 40px;
	align-items: center;
	justify-content: space-between;
	padding: 0 max(12px, 0.7vw);
	pointer-events: none;
}

.project-lightbox__counter,
.project-lightbox__close {
	margin: 0;
	color: rgba(24, 24, 24, 0.62);
	font-size: 10.5px;
	font-weight: 500;
	line-height: 10.5px;
}

.project-lightbox__counter {
	font-variant-numeric: tabular-nums;
}

.project-lightbox__close {
	position: relative;
	display: block;
	height: 10.5px;
	overflow: hidden;
	border: 0;
	padding: 0;
	background: transparent;
	pointer-events: auto;
}

.project-lightbox__close span {
	display: flex;
	height: 10.5px;
	align-items: center;
	transition: transform 0.475s cubic-bezier(0.76, 0, 0.24, 1);
}

.project-lightbox__close span:nth-child(2) {
	position: absolute;
	top: 100%;
	left: 0;
}

.project-lightbox__close:hover span,
.project-lightbox__close:focus-visible span {
	transform: translateY(-100%);
}

.project-lightbox__figure {
	position: absolute;
	z-index: 4;
	inset: 4.7vh 18vw;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	will-change: transform, opacity, clip-path;
}

.project-lightbox__figure img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 90.6vh;
	object-fit: contain;
	box-shadow: 0 22px 68px rgba(42, 36, 31, 0.1);
}

.project-lightbox__preview {
	position: absolute;
	z-index: 2;
	top: 20%;
	bottom: 13%;
	width: 18vw;
	overflow: hidden;
	opacity: 0.16;
	filter: blur(10px);
	pointer-events: none;
	transform: scale(0.86);
}

.project-lightbox__preview--previous {
	left: -10vw;
}

.project-lightbox__preview--next {
	right: -10vw;
}

.project-lightbox__preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.project-lightbox__control {
	position: absolute;
	z-index: 7;
	top: 40px;
	bottom: 0;
	width: 22vw;
	border: 0;
	padding: 0;
	background: transparent;
	color: rgba(24, 24, 24, 0.55);
	cursor: pointer;
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.project-lightbox__control span {
	position: absolute;
	bottom: 18px;
	opacity: 0;
	transition: opacity 220ms ease;
}

.project-lightbox__control--previous {
	left: 0;
	text-align: left;
}

.project-lightbox__control--previous span {
	left: 15px;
}

.project-lightbox__control--next {
	right: 0;
	text-align: right;
}

.project-lightbox__control--next span {
	right: 15px;
}

.project-lightbox__control:hover span,
.project-lightbox__control:focus-visible span {
	opacity: 1;
}

.project-lightbox__loading {
	position: absolute;
	z-index: 6;
	top: 50%;
	left: 50%;
	display: flex;
	align-items: center;
	color: rgba(24, 24, 24, 0.58);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	transform: translate(-50%, -50%);
	gap: 10px;
}

.project-lightbox__loading-ring {
	width: 14px;
	height: 14px;
	border: 1px solid rgba(24, 24, 24, 0.2);
	border-top-color: #181818;
	border-radius: 50%;
	animation: project-lightbox-spin 0.8s linear infinite;
}

@keyframes project-lightbox-spin {
	to {
		transform: rotate(360deg);
	}
}

.project-lightbox-open {
	overflow: hidden;
}

.project-detail__progress {
	position: fixed;
	z-index: 25;
	right: var(--project-detail-gutter);
	bottom: 24px;
	left: var(--project-detail-gutter);
	display: grid;
	grid-template-columns: auto minmax(120px, 280px) 44px;
	align-items: center;
	justify-content: end;
	color: rgba(24, 24, 24, 0.58);
	gap: 15px;
	pointer-events: none;
}

.project-detail__counter,
.project-detail__percentage {
	margin: 0;
	font-size: 10px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.14em;
}

.project-detail__percentage {
	text-align: right;
}

.project-detail__progress-rule {
	position: relative;
	height: 1px;
	overflow: hidden;
	background: rgba(24, 24, 24, 0.18);
}

.project-detail__progress-rule span {
	position: absolute;
	inset: 0;
	transform: scaleX(0);
	transform-origin: left center;
	background: #181818;
}

.project-detail__hint {
	position: fixed;
	z-index: 24;
	bottom: 20px;
	left: var(--project-detail-gutter);
	margin: 0;
	color: rgba(24, 24, 24, 0.42);
	font-size: 9px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	pointer-events: none;
}

.project-detail-dialog {
	position: fixed;
	z-index: 60;
	inset: 0;
	display: grid;
	align-items: center;
	padding: clamp(90px, 10vw, 170px) clamp(28px, 11vw, 220px);
	background: var(--project-detail-cream);
	color: #25211e;
}

.project-detail-dialog__close {
	position: absolute;
	top: 25px;
	right: var(--project-detail-gutter);
	min-width: 72px;
	min-height: 44px;
	border: 0;
	padding: 0;
	background: transparent;
	color: inherit;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.project-detail-dialog :focus-visible {
	outline-color: #25211e;
}

.project-detail-dialog__content {
	display: grid;
	grid-template-columns: minmax(260px, 0.8fr) minmax(400px, 1.2fr);
	align-items: end;
	gap: clamp(60px, 11vw, 220px);
}

.project-detail-dialog__eyebrow {
	grid-column: 1;
	margin: 0 0 24px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.project-detail-dialog h2 {
	grid-column: 1;
	margin: 0;
	font-size: clamp(56px, 8vw, 132px);
	letter-spacing: -0.04em;
}

.project-detail-dialog__meta {
	grid-column: 2;
	grid-row: 1 / span 2;
	display: grid;
	margin: 0;
	border-top: 1px solid rgba(37, 33, 30, 0.28);
}

.project-detail-dialog__meta div {
	display: grid;
	grid-template-columns: minmax(110px, 0.34fr) 1fr;
	padding: 19px 0;
	border-bottom: 1px solid rgba(37, 33, 30, 0.2);
	gap: 28px;
}

.project-detail-dialog dt,
.project-detail-dialog dd {
	margin: 0;
}

.project-detail-dialog dt {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

.project-detail-dialog dd {
	font-family: var(--font-serif);
	font-size: clamp(18px, 1.8vw, 28px);
	line-height: 1.3;
}

.project-detail-dialog-open {
	overflow: hidden;
}

@media (max-width: 1050px) {
	.project-detail__slide img {
		max-width: 76vw;
	}
}

@media (max-width: 767px) {
	:root {
		--project-detail-gutter: max(18px, env(safe-area-inset-left));
		--project-detail-nav-height: 86px;
	}

	.project-detail-nav {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-template-rows: 40px 40px;
		height: var(--project-detail-nav-height);
		align-content: start;
		padding-top: max(4px, env(safe-area-inset-top));
		gap: 0 12px;
	}

	.project-detail-nav__brand {
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
	}

	.project-detail-nav__back {
		grid-column: 1;
		grid-row: 2;
		justify-self: start;
	}

	.project-detail-nav__title {
		grid-column: 2;
		grid-row: 1;
		font-size: 10.5px;
	}

	.project-detail-nav__details {
		grid-column: 3;
		grid-row: 1;
	}

	.project-detail-nav__projects [data-project-previous] {
		grid-column: 2;
		grid-row: 2;
	}

	.project-detail-nav__projects [data-project-next] {
		grid-column: 3;
		grid-row: 2;
		justify-self: end;
	}

	.project-detail__viewport {
		inset: var(--project-detail-nav-height) 0 82px;
	}

	.project-detail__track {
		gap: 18vw;
	}

	.project-detail__slide img {
		max-width: 84vw;
		max-height: calc(100dvh - 238px);
	}

	.project-detail__slide--next-project {
		width: 88vw;
	}

	.project-detail__next-project-image {
		height: min(48dvh, 520px);
	}

	.project-detail__progress {
		right: 18px;
		bottom: max(24px, env(safe-area-inset-bottom));
		left: 18px;
		grid-template-columns: auto minmax(80px, 1fr) 42px;
		gap: 12px;
	}

	.project-detail__hint {
		display: none;
	}

	.project-detail-dialog {
		align-items: start;
		overflow-y: auto;
		padding: max(110px, calc(env(safe-area-inset-top) + 86px)) 24px max(55px, env(safe-area-inset-bottom));
	}

	.project-detail-dialog__close {
		top: max(18px, env(safe-area-inset-top));
		right: 18px;
	}

	.project-detail-dialog__content {
		display: block;
	}

	.project-detail-dialog__eyebrow {
		margin-bottom: 20px;
	}

	.project-detail-dialog h2 {
		margin-bottom: 64px;
		font-size: clamp(52px, 18vw, 82px);
	}

	.project-detail-dialog__meta {
		display: block;
	}

	.project-detail-dialog__meta div {
		grid-template-columns: 92px 1fr;
		padding: 17px 0;
		gap: 16px;
	}

	.project-detail-dialog dd {
		font-size: 18px;
	}

	.project-lightbox__figure {
		inset: 70px 6vw 56px;
	}

	.project-lightbox__figure img {
		max-height: calc(100dvh - 126px);
	}

	.project-lightbox__preview {
		display: none;
	}

	.project-lightbox__control {
		width: 32vw;
	}
}

@media (prefers-reduced-motion: reduce) {
	.project-detail__slide {
		transition: none;
	}

	.project-detail__track,
	.project-detail__progress-rule span,
	.project-detail__loading-rule span,
	.project-detail-dialog,
	.project-lightbox,
	.project-lightbox__figure {
		animation: none !important;
		transition: none !important;
	}

	.project-lightbox__loading-ring {
		animation-duration: 1.8s;
	}
}