/* Project page (single portfolio): the horizontal strip approved on 25 September 2026.
   Stacked by default, which is also what phones, tablets in portrait, short screens,
   reduced-motion visitors and visitors without JavaScript get. The strip applies when
   <html> has .sha-js (set in the head, removed again if the page script never starts)
   and the screen matches the media query below, which project-page.js repeats. */

.sha-project-view {
	--sha-surface: #fafaf9;
	--sha-ink: #31312c;
	--sha-deep: #fafaf9;
	--sha-muted: #72726c;
	--sha-hair: #d9d7d4;
	--sha-gutter: clamp(20px, 3.2vw, 56px);
	--sha-ease: cubic-bezier(.22, .61, .36, 1);
	--sha-bar: var(--wp-admin--admin-bar--height, 0px);
	background: var(--sha-deep);
	color: #31312c;
	font-family: "Fact", "Inter", system-ui, sans-serif;
	font-weight: 300;
	-webkit-font-smoothing: antialiased;
}

html.lenis,
html.sha-js:has(.sha-project-view) {
	scroll-behavior: auto;
}

.sha-project-view .wp-site-blocks {
	padding: 0;
}

.sha-project-view .wp-site-blocks > *,
.sha-project-page > * {
	margin-block: 0;
}

.sha-project-page {
	margin: 0;
	padding: 0;
}

.sha-project,
.sha-project * {
	box-sizing: border-box;
}

.sha-project :where(h1, h2, h3, p, ul, dl, dd, figure) {
	margin: 0;
	padding: 0;
}

.sha-project :where(h1, h2, h3) {
	font-family: inherit;
	letter-spacing: normal;
	text-transform: none;
}

.sha-project img {
	display: block;
	max-width: none;
}

/* Stacked layout */

.sha-project__track {
	display: flex;
	flex-direction: column;
}

.sha-project__panel {
	position: relative;
	flex: 0 0 auto;
	overflow: hidden;
}

.sha-project__open,
.sha-project__next {
	height: 100vh;
	height: 100svh;
	min-height: 520px;
	background: var(--sha-deep);
	color: #fff;
}

.sha-project__cover {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Mobile display mode "focal": the crop follows the focal point on tablets and phones,
   as on the listing and the home hero. */
@media (max-width: 64rem) {
	.sha-project__cover {
		object-position: var(--sha-project-focal, 50% 50%);
	}
}

.sha-project__shade {
	position: absolute;
	left: -30%;
	bottom: -55%;
	width: 120%;
	height: 130%;
	background: radial-gradient(closest-side, rgba(0, 0, 0, .44), rgba(0, 0, 0, .2) 55%, rgba(0, 0, 0, 0));
	pointer-events: none;
}

.sha-project__words {
	position: absolute;
	left: var(--sha-gutter);
	right: var(--sha-gutter);
	bottom: clamp(72px, 12vh, 124px);
	max-width: min(920px, 72vw);
}

.sha-project .sha-project__title {
	font-weight: 300;
	font-size: clamp(40px, 4.2vw, 64px);
	line-height: 1.1;
	letter-spacing: -.005em;
	color: inherit;
}

.sha-project__place,
.sha-project__kicker {
	font-size: clamp(15px, 1.15vw, 17px);
	line-height: 1.55;
}

.sha-project__place {
	margin-top: 14px !important;
}

.sha-project__kicker {
	margin-bottom: 10px !important;
	opacity: .85;
}

.sha-project__links {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 28px;
	margin-top: 28px;
}

.sha-project .sha-project__link {
	display: inline-block;
	padding-bottom: 3px;
	border-bottom: 1px solid currentColor;
	color: inherit;
	font-size: 15px;
	font-weight: 400;
	text-decoration: none;
}

.sha-project__cue {
	position: absolute;
	left: var(--sha-gutter);
	bottom: clamp(28px, 5vh, 48px);
	display: flex;
	gap: 12px;
	align-items: center;
	font-size: 13px;
	opacity: .85;
}

.sha-project__cue i {
	display: block;
	width: 34px;
	height: 1px;
	background: currentColor;
	transform: rotate(90deg) scaleX(.6);
}

.sha-project__photo {
	background: var(--sha-deep);
}

.sha-project__photo img {
	width: 100%;
	height: auto;
	max-height: 92vh;
	max-height: 92svh;
	aspect-ratio: var(--r);
	object-fit: cover;
}

.sha-project__photo + .sha-project__photo {
	margin-top: 6px;
}

/* Gallery captions: under the photograph when stacked, over its foot in the strip. */
.sha-project__caption {
	padding: 10px var(--sha-gutter) 14px;
	color: #4f4f49;
	font-size: 13px;
	line-height: 1.45;
	letter-spacing: .01em;
}

.sha-project__text {
	background: var(--sha-surface);
	color: var(--sha-ink);
	padding: 72px var(--sha-gutter) 84px;
}

.sha-project__inner {
	max-width: 640px;
}

.sha-project__text p {
	font-size: clamp(17px, 1.25vw, 19px);
	line-height: 1.62;
}

.sha-project__text p + p,
.sha-project__text p + .sha-project__quote,
.sha-project__quote + p {
	margin-top: 1em;
}

.sha-project__quote {
	margin: 0;
	padding-left: 22px;
	border-left: 1px solid var(--sha-hair);
	break-inside: avoid;
}

.sha-project__quote cite {
	display: block;
	margin-top: 12px;
	font-size: 14px;
	font-style: normal;
	color: var(--sha-muted);
}

.sha-project__text a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sha-project__facts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px 28px;
	margin: 0 0 40px !important;
	break-inside: avoid;
}

.sha-project__facts dt,
.sha-project__group h3 {
	display: block;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--sha-muted);
}

.sha-project__facts dd {
	font-size: 16px;
	line-height: 1.5;
}

.sha-project__details .sha-project__inner {
	max-width: 760px;
}

.sha-project__details h2 {
	margin-bottom: 28px !important;
	font-size: 22px;
	font-weight: 400;
	line-height: 1.3;
	color: inherit;
}

/* Credits read like a colophon: one column of groups, each a row with its label on the left and
   its entries on the right, divided by hairlines. */
.sha-project__group {
	display: grid;
	grid-template-columns: 11em minmax(0, 1fr);
	gap: 0 24px;
	padding: 18px 0 20px;
	border-top: 1px solid var(--sha-hair);
}

.sha-project__group:last-child {
	border-bottom: 1px solid var(--sha-hair);
}

/* The label sits on the first entry's line. */
.sha-project__group h3 {
	margin: 4px 0 0 !important;
}

.sha-project__group ul {
	list-style: none;
}

.sha-project__group li {
	display: grid;
	grid-template-columns: 12.5em 1fr;
	gap: 16px;
	font-size: 16px;
	line-height: 1.6;
}

.sha-project__awards li {
	grid-template-columns: 3.2em 1fr;
}

.sha-project__plain li {
	display: block;
}

.sha-project__group li span:first-child {
	color: var(--sha-muted);
}

.sha-project__note {
	display: block;
	font-size: 14px;
	line-height: 1.5;
	color: var(--sha-muted);
}

/* Sideways controls: arrows, dashes, counter (shown by the script in strip mode) */

.sha-project__controls {
	position: fixed;
	right: var(--sha-gutter);
	bottom: clamp(28px, 5vh, 48px);
	z-index: 50;
	display: flex;
	align-items: center;
	gap: 10px;
	color: #fff;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	transition: color .6s var(--sha-ease), opacity .6s;
}

.sha-project__controls[hidden] {
	display: none;
}

.sha-project__controls.is-ink {
	color: var(--sha-ink);
}

.sha-project__arrow {
	transition: opacity .6s var(--sha-ease), visibility 0s;
}


.sha-project__controls.is-off {
	opacity: 0;
	pointer-events: none;
}

.sha-project__arrow {
	position: relative;
	width: 28px;
	height: 28px;
	margin: 0 -6px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font-size: 0;
	cursor: pointer;
	opacity: .75;
}

/* A thin caret, as on the homepage: the arrows stay for the whole visit. */
.sha-project__arrow::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 7px;
	height: 7px;
	margin: -4px 0 0 -5px;
	border-top: 1px solid currentColor;
	border-right: 1px solid currentColor;
	transform: rotate(45deg);
}

.sha-project__arrow[data-step="-1"]::before {
	margin-left: -2px;
	transform: rotate(-135deg);
}

.sha-project__arrow[data-step="1"] {
	margin-right: -2px;
}

.sha-project__arrow:hover,
.sha-project__arrow:focus-visible {
	opacity: 1;
}

.sha-project__arrow:disabled {
	opacity: .25;
	cursor: default;
}

/* The left arrow appears once there is a picture to go back to. */
.sha-project__arrow[data-step="-1"]:disabled {
	opacity: 0;
	visibility: hidden;
	transition: opacity .6s var(--sha-ease), visibility 0s .6s;
}

/* Photographs can be dragged sideways with a mouse. */
@media (hover: hover) and (pointer: fine) {
	.sha-js .sha-project__photo {
		cursor: grab;
	}
}

.sha-project.is-dragging,
.sha-project.is-dragging * {
	cursor: grabbing !important;
	user-select: none;
}

.sha-project__ticks {
	display: flex;
	align-items: center;
	gap: 5px;
	margin: 0 6px 0 10px;
}

.sha-project__ticks button {
	position: relative;
	display: block;
	width: 10px;
	height: 1px;
	padding: 0;
	border: 0;
	background: currentColor;
	cursor: pointer;
	opacity: .4;
	transition: width .8s var(--sha-ease), opacity .8s;
}

.sha-project__ticks button::before {
	content: "";
	position: absolute;
	inset: -10px -3px;
}

.sha-project__ticks button.is-on {
	width: 30px;
	opacity: 1;
}

.sha-project__ticks button:hover,
.sha-project__ticks button:focus-visible {
	opacity: 1;
}

.sha-project__total {
	opacity: .55;
}

/* Closing panel: the invitation (editable in the template), the studio's details set like the
   project facts, and the links. Anchored to the same baseline as the photo captions. */

.sha-project__end .sha-project__invite {
	font-size: clamp(30px, 2.8vw, 42px);
	font-weight: 300;
	line-height: 1.15;
	letter-spacing: -.005em;
}

.sha-project__invite-blocks > * + * {
	margin-top: .8em !important;
}

.sha-project__contact {
	margin: 40px 0 0 !important;
}

.sha-project__contact a {
	color: inherit;
	text-decoration: none;
}

.sha-project__contact a:hover,
.sha-project__contact a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sha-project__wide {
	grid-column: 1 / -1;
}

.sha-project__end .sha-project__links {
	margin-top: 36px;
}

/* Links on the light panels turn black on hover and focus (the theme's default); links over
   photographs keep their white. */
.sha-project__text a:hover,
.sha-project__text a:focus-visible {
	color: #000;
}

.sha-project__end .sha-project__link[hidden] {
	display: none;
}

/* Next project: a half-width teaser after the closing panel, in black and white until the
   pointer is on it. The whole panel opens the project. */

.sha-project__next-area {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.sha-project__next .sha-project__words {
	z-index: 2;
}

@media (hover: hover) {
	.sha-project__next .sha-project__cover {
		filter: grayscale(1);
		transition: filter .9s var(--sha-ease), transform 1.4s var(--sha-ease);
	}

	.sha-project__next:hover .sha-project__cover,
	.sha-project__next:focus-within .sha-project__cover {
		filter: none;
		transform: scale(1.03);
	}
}

.sha-project-view .sha-site-footer {
	font-family: inherit;
}

/* Text settles in as it arrives (only when the script runs, so nothing stays hidden without it) */

.sha-js .sha-project__text .sha-project__inner > * {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 1.1s var(--sha-ease), transform 1.1s var(--sha-ease);
}

.sha-js .sha-project__text.is-in .sha-project__inner > * {
	opacity: 1;
	transform: none;
}

.sha-js .sha-project__text.is-in .sha-project__inner > *:nth-child(2) { transition-delay: .12s; }
.sha-js .sha-project__text.is-in .sha-project__inner > *:nth-child(3) { transition-delay: .24s; }
.sha-js .sha-project__text.is-in .sha-project__inner > *:nth-child(n+4) { transition-delay: .36s; }

@keyframes sha-project-rise {
	from { opacity: 0; transform: translateY(24px); }
	to { opacity: 1; transform: none; }
}

@keyframes sha-project-cue {
	0% { transform: scaleX(.2); }
	60% { transform: scaleX(1); }
	100% { transform: scaleX(1); opacity: 0; }
}

.sha-project__open .sha-project__title,
.sha-project__open .sha-project__place,
.sha-project__open .sha-project__cue {
	animation: sha-project-rise 1.4s var(--sha-ease) both;
}

.sha-project__open .sha-project__place { animation-delay: .25s; }
.sha-project__open .sha-project__cue { animation-delay: .6s; }

/* The strip */

@media (min-width: 1024px) and (orientation: landscape) and (min-height: 561px) and (prefers-reduced-motion: no-preference) {
	.sha-js .sha-project__hs {
		position: relative;
	}

	.sha-js .sha-project__pin {
		position: sticky;
		top: var(--sha-bar);
		height: calc(100vh - var(--sha-bar));
		height: calc(100svh - var(--sha-bar));
		overflow: hidden;
	}

	.sha-js .sha-project__track {
		flex-direction: row;
		height: 100%;
		will-change: transform;
	}

	.sha-js .sha-project__panel {
		height: 100%;
	}

	.sha-js .sha-project__open {
		width: 100vw;
		min-height: 0;
	}

	.sha-js .sha-project__next {
		width: 50vw;
		min-height: 0;
	}

	/* The closing spread: the credits, the invitation and the next project's caption share one
	   baseline, so the panels read as one composition. */
	.sha-js .sha-project__text.sha-project__details,
	.sha-js .sha-project__text.sha-project__end {
		justify-content: flex-end;
		padding-bottom: clamp(72px, 12vh, 124px);
	}

	.sha-js .sha-project__text + .sha-project__end {
		border-left: 1px solid var(--sha-hair);
	}

	.sha-js .sha-project__cue i {
		transform-origin: left;
		transform: none;
		animation: sha-project-cue 2.4s var(--sha-ease) infinite;
	}

	.sha-js .sha-project__photo {
		aspect-ratio: var(--r);
	}

	.sha-js .sha-project__photo img {
		height: 100%;
		max-height: none;
		aspect-ratio: auto;
		transform: scale(1.06);
		will-change: transform;
	}

	.sha-js .sha-project__photo + .sha-project__photo {
		margin: 0 0 0 6px;
	}

	.sha-js .sha-project__caption {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 48px 22px 18px;
		background: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
		color: rgba(255, 255, 255, .86);
		pointer-events: none;
	}

	.sha-js .sha-project__text {
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: max(40vw, 440px);
		padding: clamp(96px, 15vh, 150px) clamp(40px, 3.8vw, 64px) clamp(64px, 10vh, 110px);
	}

	.sha-js .sha-project__text .sha-project__inner {
		width: 100%;
		max-width: 540px;
		margin-inline: auto;
	}

	.sha-js .sha-project__text.is-cols {
		width: auto;
	}

	.sha-js .sha-project__text.is-cols .sha-project__inner {
		max-width: none;
		column-gap: 56px;
	}

	.sha-js .sha-project__details {
		width: clamp(820px, 64vw, 1040px);
	}

	.sha-js .sha-project__details .sha-project__inner {
		max-width: 760px;
	}

	/* Details too long for the screen flow into columns like the other text panels; each group
	   then puts its label above its entries. */
	.sha-js .sha-project__details.is-cols h2 {
		column-span: all;
	}

	.sha-js .sha-project__details.is-cols .sha-project__group {
		display: block;
		break-inside: avoid;
	}

	.sha-js .sha-project__details.is-cols .sha-project__group h3 {
		margin: 0 0 10px !important;
		break-after: avoid;
	}

	.sha-js .sha-project__details.is-cols .sha-project__group li {
		break-inside: avoid;
	}
}

@media (max-width: 760px) {
	.sha-project__group {
		grid-template-columns: 1fr;
	}

	.sha-project__group h3 {
		margin: 0 0 10px !important;
	}

	.sha-project__group li {
		grid-template-columns: 9.5em 1fr;
	}

	.sha-project__awards li {
		grid-template-columns: 3.2em 1fr;
	}

	.sha-project__facts {
		gap: 16px 20px;
	}

	.sha-project__contact {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sha-project *,
	.sha-project *::before,
	.sha-project *::after {
		animation: none !important;
		transition: none !important;
	}

	.sha-js .sha-project__text .sha-project__inner > * {
		opacity: 1;
		transform: none;
	}
}

/* A project without a featured image (sha_theme_project_cover() returns nothing): the opening and
   the next-project panel are plain light panels, so their words turn ink and the shade goes. */
.sha-project__panel.is-coverless {
	color: #31312c;
}

.sha-project__panel.is-coverless .sha-project__shade {
	display: none;
}