:root {
	--bg: #f7f7f7;
	--surface: #f7f7f7;
	--text: #111;
	--muted: #111;
	--accent: #c92a2a;
	--max: 72rem;
	--grid-gap: 1.2rem;
	--studio-grid-gap: 2rem;
	--studio-column-padding-inline: 0.75rem;
	--body-font: "Heldane", Arial, sans-serif;
	/* One body size sitewide; intro (left column lead) uses --site-intro-text-size only */
	--site-text-size: 0.92rem;
	--site-intro-text-size: clamp(1.08rem, 1rem + 0.35vw, 1.22rem);
	/* Sticky header + role block — used to size first-screen portrait hero */
	--landing-header-offset: clamp(4.5rem, 12vw, 6.5rem);
	/* Shared horizontal content edge — header “Lisa Ziven” + Contact column use --site-left-edge */
	--site-layout-inset: max(1rem, calc((100vw - min(92vw, var(--max))) / 2));
	--site-left-edge: max(var(--site-layout-inset), env(safe-area-inset-left, 0px));
	--site-right-edge: max(var(--site-layout-inset), env(safe-area-inset-right, 0px));
	/* Legacy alias (work titles, middle columns) */
	--page-edge-inset: var(--site-layout-inset);
	/* Contact column: wrap safe-area + this inset; full-bleed bands add safe-area in the calc below */
	--copy-inset-start: var(--page-edge-inset);
	--copy-inset-end: var(--page-edge-inset);
	--copy-inset-fullbleed-start: calc(env(safe-area-inset-left, 0px) + var(--page-edge-inset));
	--copy-inset-fullbleed-end: calc(env(safe-area-inset-right, 0px) + var(--page-edge-inset));
	--site-bottom-padding: 6rem;
	--work-scroll-bottom-padding: calc(14rem + 32dvh);
	--work-films-section-top-spacing: 2.5rem;
	--work-section-gap: 3rem;
	--studio-section-gap: 2.25rem;
	--view-transition-duration: 800ms;
	--view-transition-ease: cubic-bezier(0.32, 0.72, 0, 1);
	--brandoor-fade-out: 200ms;
	--nav-link-active: #000;
	--nav-link-inactive: rgb(0 0 0 / 0.95);
	--nav-item-gap: 0.75em;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	font-size: 100%;
	font-family: var(--body-font);
	scroll-behavior: smooth;
	scroll-padding-top: 5rem;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	overflow-x: clip;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: inherit;
	font-feature-settings: "onum" 1;
	font-size: var(--site-text-size);
	font-weight: 400;
	font-style: normal;
	line-height: 1.6;
	overflow-x: clip;
	transition: background-color var(--view-transition-duration) var(--view-transition-ease);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

button,
input,
select,
textarea {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	font-style: inherit;
	line-height: inherit;
	letter-spacing: inherit;
}

em,
i,
cite,
dfn,
var,
address {
	font-family: inherit;
	font-style: italic;
	font-weight: 400;
}

b,
strong {
	font-family: inherit;
	font-weight: 500;
	font-style: inherit;
}

.site-header,
.site-header :is(
	.site-role,
	.site-work-link-cluster,
	.site-work-link,
	.site-work-link__contact,
	.site-work-link__state,
	.site-work-link__label,
	.site-work-subtitle
),
.site-nav,
.site-nav a,
.onepage-menu,
.onepage-menu a,
.work-detail-close {
	font-family: "Heldane", Arial, sans-serif;
	font-feature-settings: "onum" 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.site-preloader {
	position: fixed;
	inset: 0;
	background: var(--bg);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 999999;
	opacity: 1;
	transition: opacity 650ms ease;
}

.site-preloader.is-hidden {
	opacity: 0;
	pointer-events: none;
}

.site-preloader-text {
	font-size: var(--site-text-size);
	letter-spacing: 0.06em;
	text-transform: lowercase;
	color: var(--text);
}

@keyframes elegantFadeIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.wrap {
	/* Use % of the main box, not vw, so width never exceeds the layout viewport beside a scrollbar (avoids extra empty space on the right). */
	width: min(92%, var(--max));
	max-width: 100%;
	margin-inline: auto;
}

.site-footer {
	background: var(--surface);
}

.site-header {
	position: sticky;
	top: 0;
	/* Must be above work-media-stage and site-information-view during transitions */
	z-index: 200;
	background: #fff;
	transition: background-color var(--view-transition-duration) var(--view-transition-ease);
}

.site-footer {
	padding: 0;
}

.site-header .wrap {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: var(--grid-gap);
	row-gap: 0;
	align-items: start;
	/* Full width + shared inset — matches .studio-grid so Lisa Ziven aligns with Contact column */
	width: 100%;
	max-width: none;
	margin-inline: 0;
	padding: calc(1.25rem + env(safe-area-inset-top, 0px)) var(--site-right-edge) 1.25rem var(--site-left-edge);
	animation: elegantFadeIn 800ms ease-out both;
}

.site-branding {
	grid-column: 1 / 2;
}

.site-title {
	font-size: calc(clamp(1.125rem, 1rem + 0.9vw, 1.75rem) - 2pt);
	font-weight: 700;
	letter-spacing: 0.03em;
	text-decoration: none;
	color: var(--text);
	text-transform: uppercase;
}

a {
	color: var(--text);
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.16em;
}

a:hover,
a:focus-visible {
	color: var(--text);
	opacity: 1;
}

.site-main {
	padding: 0;
}

.site-main-inner {
	padding-block: 3rem;
	padding-bottom: calc(var(--site-bottom-padding) + env(safe-area-inset-bottom, 0px));
}

.site-main-inner.site-main-after-hero {
	padding-top: 2.25rem;
	padding-bottom: calc(var(--site-bottom-padding) + 2rem + env(safe-area-inset-bottom, 0px));
}

/* Full-bleed band: studio columns after biography; portrait lives in first column under contact. */
.site-main-studio-band {
	width: 100%;
	background: #000;
	color: #fff;
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.site-main-studio-band a {
	color: #fff;
	opacity: 0.5;
	transition: opacity 160ms ease;
}

.site-main-studio-band a:hover,
.site-main-studio-band a:focus-visible {
	color: #fff;
	opacity: 1;
}

/* Full-bleed grid: columns own horizontal inset (matches header --site-left-edge). */
.site-main-studio-band > .wrap {
	width: 100%;
	max-width: none;
	margin-inline: 0;
	padding-inline: 0;
}

.landing-hero-portrait {
	width: 100%;
	margin: 0;
	padding: 0;
	background: #fff;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	min-height: calc(100svh - var(--landing-header-offset));
	min-height: calc(100dvh - var(--landing-header-offset));
}

.landing-hero-portrait__frame {
	flex: 1 1 auto;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: 100%;
	min-height: calc(100svh - var(--landing-header-offset));
	max-height: calc(100svh - var(--landing-header-offset));
	height: calc(100svh - var(--landing-header-offset));
	min-height: calc(100dvh - var(--landing-header-offset));
	max-height: calc(100dvh - var(--landing-header-offset));
	height: calc(100dvh - var(--landing-header-offset));
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	line-height: 0;
	overflow: hidden;
}

/*
 * Portrait: always fully inside the frame (viewport minus header).
 * When attachment metadata is present, inline style caps display size at file pixels (no upscale).
 * Fallback: never exceed intrinsic box of the bitmap.
 */
.landing-hero-portrait__img {
	display: block;
	width: auto;
	height: auto;
	min-width: 0;
	min-height: 0;
	max-width: min(100%, min-content);
	max-height: min(100%, min-content);
	object-fit: contain;
	object-position: center bottom;
}

/* Multi-zone portrait: all 6 images locked in the same cell, same size */
.landing-hero-portrait__zone-wrap {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	/* Fixed box sized to the image set — every img fills this exactly */
	width: min(438px, 100%);
	aspect-ratio: 438 / 545;
	max-height: calc(100dvh - var(--landing-header-offset));
	/* Position/scale editor uses these CSS vars (set by JS, persisted to localStorage) */
	transform: translate(var(--portrait-x, 0px), var(--portrait-y, 0px)) scale(var(--portrait-scale, 1));
	transform-origin: center bottom;
}

/* Edit-mode: let the portrait move freely outside its container */
body.portrait-edit-mode .landing-hero-portrait__frame {
	overflow: visible;
}
body.portrait-edit-mode .landing-hero-portrait__zone-wrap {
	cursor: grab;
	outline: 1.5px dashed rgba(0, 0, 0, 0.25);
}
body.portrait-edit-mode .landing-hero-portrait__zone-wrap:active {
	cursor: grabbing;
}

/* Portrait position editor panel */
.portrait-pos-panel {
	position: fixed;
	bottom: 2rem;
	right: 2rem;
	z-index: 9999;
	background: #fff;
	border: 1px solid #000;
	padding: 1rem 1.25rem 1rem;
	width: 17rem;
	font-family: inherit;
	font-size: 0.75rem;
	line-height: 1.5;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}
.portrait-pos-panel__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.75rem;
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.portrait-pos-panel__close {
	background: none;
	border: none;
	cursor: pointer;
	font-size: 1rem;
	line-height: 1;
	padding: 0 0 0 0.5rem;
}
.portrait-pos-panel__row {
	display: grid;
	grid-template-columns: 2.5rem 1fr 3.5rem;
	align-items: center;
	gap: 0.4rem;
	margin-bottom: 0.5rem;
}
.portrait-pos-panel__row label {
	font-size: 0.7rem;
	letter-spacing: 0.06em;
}
.portrait-pos-panel__row input[type="range"] {
	width: 100%;
	accent-color: #000;
}
.portrait-pos-panel__row input[type="number"] {
	width: 100%;
	border: 1px solid #ccc;
	padding: 0.1rem 0.25rem;
	font-size: 0.7rem;
	text-align: right;
}
.portrait-pos-panel__footer {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.75rem;
	border-top: 1px solid #eee;
	padding-top: 0.75rem;
}
.portrait-pos-panel__footer button {
	background: #000;
	color: #fff;
	border: none;
	padding: 0.3rem 0.75rem;
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	cursor: pointer;
	text-transform: uppercase;
}
.portrait-pos-panel__footer button#portrait-pos-reset {
	background: #fff;
	color: #000;
	border: 1px solid #000;
}
#portrait-pos-status {
	margin-left: auto;
	font-size: 0.7rem;
	color: #555;
}

.landing-hero-portrait__zone-img {
	grid-column: 1;
	grid-row: 1;
	/* Fill the shared cell completely so all images sit in identical position */
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center bottom;
	opacity: 0;
	transition: opacity 80ms ease;
}

.landing-hero-portrait__zone-img.is-active {
	opacity: 1;
}

/* Mobile / touch: only show the default frame */
@media (hover: none), (pointer: coarse) {
	.landing-hero-portrait__zone-wrap {
		transform: none !important;
	}
	.landing-hero-portrait__zone-img {
		display: none;
	}
	.landing-hero-portrait__zone-img[data-zone="middle-middle"] {
		display: block;
		width: 100%;
		height: 100%;
		opacity: 1;
	}
}

/* Portrait under Contact in the black studio band (not a full-viewport hero). */
.site-main-studio-band .landing-hero-portrait--in-studio {
	min-height: 0;
	margin-top: 0.35rem;
	margin-inline: 0;
	padding: 0;
	background: transparent;
	width: 100%;
	max-width: min(22rem, 100%);
	align-self: flex-start;
}

.site-main-studio-band .landing-hero-portrait--in-studio .landing-hero-portrait__frame {
	flex: 0 1 auto;
	min-height: 0;
	max-height: none;
	height: auto;
	align-items: flex-end;
	justify-content: flex-start;
	padding: 0;
	overflow: visible;
}

.site-main-studio-band .landing-hero-portrait--in-studio .landing-hero-portrait__zone-wrap {
	max-height: min(50vh, 21rem);
	width: min(100%, 22rem);
	/* Information-page portrait: ignore saved editor transform unless panel is open */
	transform: none;
}

body.portrait-edit-mode .site-main-studio-band .landing-hero-portrait--in-studio .landing-hero-portrait__zone-wrap {
	transform: translate(var(--portrait-x, 0px), var(--portrait-y, 0px)) scale(var(--portrait-scale, 1));
}

body:not(.work-media-active) .landing-hero-portrait--in-studio {
	visibility: visible;
}

.site-main-studio-band .landing-hero-portrait--in-studio .landing-hero-portrait__zone-img.is-active {
	opacity: 1;
}

.site-main-studio-band .landing-hero-portrait--in-studio .landing-hero-portrait__img {
	max-width: 100%;
	object-position: left bottom;
}

/* Information page — normal layout in __content; brandoor overlay only while transitioning */
.site-information-view {
	position: relative;
	z-index: 25;
	transition: visibility 0s linear 0s;
}

.site-information-view__content {
	position: relative;
	z-index: 1;
}

.site-information-view__brandoor {
	position: fixed;
	inset: 0;
	z-index: 28;
	display: flex;
	width: 100%;
	height: 100%;
	height: 100dvh;
	height: 100svh;
	overflow: hidden;
	pointer-events: none;
	visibility: hidden;
	opacity: 0;
	transition:
		opacity var(--brandoor-fade-out) var(--view-transition-ease),
		visibility 0s linear var(--brandoor-fade-out);
}

body.is-view-transitioning .site-information-view__brandoor,
body.is-brandoor-exiting .site-information-view__brandoor {
	pointer-events: none;
	visibility: visible;
}

body.is-view-transitioning .site-information-view__brandoor {
	opacity: 1;
	transition: opacity 0s, visibility 0s;
}

body.is-brandoor-exiting .site-information-view__brandoor {
	opacity: 0;
	transition:
		opacity var(--brandoor-fade-out) var(--view-transition-ease),
		visibility 0s linear var(--brandoor-fade-out);
}

body.is-view-transitioning .site-information-view,
body.is-brandoor-exiting .site-information-view {
	visibility: hidden;
	pointer-events: none;
}

body.is-view-transitioning .site-information-view__content,
body.is-brandoor-exiting .site-information-view__content {
	display: none;
}

.site-information-view__panel {
	flex: 0 0 50%;
	width: 50%;
	max-width: 50%;
	height: 100%;
	overflow: hidden;
	background: #000;
	transform: translate3d(0, 0, 0);
	transition: transform var(--view-transition-duration) var(--view-transition-ease);
	will-change: transform;
}

.site-information-view__panel-inner {
	width: 200%;
	max-width: none;
	box-sizing: border-box;
}

.site-information-view__panel--right .site-information-view__panel-inner {
	margin-left: -100%;
}

body.work-media-active .site-information-view__panel--left {
	transform: translate3d(-100%, 0, 0);
}

body.work-media-active .site-information-view__panel--right {
	transform: translate3d(100%, 0, 0);
}

body.work-media-active:not(.is-view-transitioning) .site-information-view {
	pointer-events: none;
	visibility: hidden;
	transition: visibility 0s linear var(--view-transition-duration);
}

body.work-media-active .site-information-view__panel {
	pointer-events: none;
}

body.is-view-transitioning {
	overflow-x: clip;
}

body.is-view-transitioning .site-work-link,
body.is-view-transitioning .site-work-link__contact,
body.is-view-transitioning [data-open-work],
body.is-brandoor-exiting .site-work-link,
body.is-brandoor-exiting .site-work-link__contact,
body.is-brandoor-exiting [data-open-work] {
	pointer-events: none;
}

.landing-bio-band {
	position: relative;
	z-index: 1;
	width: 100%;
	margin: -1px 0 0;
	padding: clamp(3rem, 8vw, 5.5rem) 0;
	background: #000;
	color: #fff;
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.landing-bio-band__inner {
	max-width: min(92%, var(--max));
	margin-inline: auto;
	text-align: center;
}

.landing-bio-band__text {
	margin: 0 auto;
	max-width: 42rem;
	font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.22rem);
	line-height: 1.55;
	letter-spacing: 0.01em;
	font-weight: 400;
	color: #fff;
}

.landing-bio-band__actions {
	margin: 1.75rem auto 0;
	text-align: center;
}

.landing-bio-band__cta {
	display: inline-block;
	font-family: "Heldane", Arial, sans-serif;
	font-weight: 500;
	font-size: var(--site-text-size);
	letter-spacing: 0.04em;
	color: #fff;
	background: transparent;
	border: 1px solid #fff;
	border-radius: 0;
	padding: 0.7rem 1.6rem;
	cursor: pointer;
	line-height: 1.4;
	text-decoration: none;
	transition:
		background-color 160ms ease,
		color 160ms ease,
		border-color 160ms ease;
}

.landing-bio-band__cta:hover,
.landing-bio-band__cta:focus-visible {
	background: #fff;
	border-color: #fff;
	color: #000;
	outline: none;
}

.site-role {
	grid-column: 1 / 4;
	grid-row: 2;
	margin: 0;
	display: block;
	text-align: left !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	letter-spacing: 0.01em;
	font-family: "Heldane", Arial, sans-serif;
	font-size: var(--site-text-size);
	font-weight: 500;
	font-style: normal;
	color: var(--text);
	white-space: nowrap;
	transition: transform 2200ms ease-out;
}

.site-role em {
	font-family: "Heldane", Arial, sans-serif;
	font-style: italic;
	font-weight: 400;
}

.site-work-link-cluster {
	grid-column: 4 / 5;
	grid-row: 2;
	justify-self: end;
	align-self: start;
	display: inline-flex;
	align-items: baseline;
	flex-wrap: wrap;
	column-gap: var(--nav-item-gap);
	white-space: nowrap;
	color: var(--nav-link-active);
}

.site-work-link {
	font-size: var(--site-text-size);
	font-family: "Heldane", Arial, sans-serif;
	font-weight: 500;
	font-style: normal;
	line-height: 1.6;
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0.08rem 0;
	margin: 0;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	display: inline-flex;
	align-items: baseline;
}

.site-work-link__state {
	display: inline-flex;
	align-items: baseline;
	gap: var(--nav-item-gap);
}

.site-work-link__state[hidden] {
	display: none !important;
}

.site-work-link:hover {
	background: transparent;
}

.site-work-link__label {
	color: var(--nav-link-active);
	font-family: "Heldane", Arial, sans-serif;
	font-weight: 500;
	font-style: normal;
	opacity: 0.5;
	transition: opacity 160ms ease;
}

.site-work-link__label.is-nav-active {
	opacity: 1;
}

/* Legacy/custom header_nav_right markup without label spans */
.site-work-link strong {
	color: var(--nav-link-active);
	font-weight: inherit;
	opacity: 1;
}

.site-work-link__contact {
	font-size: var(--site-text-size);
	font-family: "Heldane", Arial, sans-serif;
	font-weight: 500;
	font-style: normal;
	line-height: 1.6;
	color: var(--nav-link-active);
	text-decoration: none;
	padding: 0.08rem 0;
	white-space: nowrap;
	opacity: 0.5;
	transition: opacity 160ms ease;
}

.site-work-link__contact:visited {
	color: var(--nav-link-active);
	opacity: 0.5;
}

.site-work-link__contact:hover,
.site-work-link__contact:active,
.site-work-link__contact:focus-visible {
	opacity: 1;
	color: var(--nav-link-active);
	text-decoration: none;
}

.site-work-link__contact:focus-visible {
	outline: 2px solid var(--nav-link-active);
	outline-offset: 3px;
	border-radius: 1px;
}

.site-work-link:focus-visible {
	background: transparent;
	outline: 2px solid var(--nav-link-active);
	outline-offset: 3px;
}

.site-work-subtitle {
	grid-column: 4 / 5;
	grid-row: 2;
	justify-self: end;
	align-self: start;
	margin: 1.472rem 0 0;
	font-size: calc(var(--site-text-size) - 2pt);
	line-height: 1.6;
	transform: none;
	display: none !important;
}

body.work-media-active .site-work-subtitle {
	display: none !important;
}

.studio-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: var(--grid-gap);
	row-gap: var(--studio-grid-gap);
	align-items: stretch;
	/* Same horizontal inset as .site-header .wrap — Contact + portrait align with Lisa Ziven */
	padding-inline: var(--site-left-edge) var(--site-right-edge);
	box-sizing: border-box;
	transition: opacity 900ms ease, transform 900ms ease, filter 900ms ease;
}

.studio-grid > .studio-column {
	border-bottom: 3px solid #000;
	padding-bottom: 0.85rem;
	box-sizing: border-box;
}

.studio-column p {
	margin: 0 0 0.9rem;
	font-size: var(--site-text-size);
	transition: transform 2200ms ease-out;
	will-change: transform;
}

.studio-column .studio-nowrap {
	white-space: nowrap;
}

.studio-column .studio-public-art-body {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.studio-column a.studio-project-work-link {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.12em;
	text-decoration-thickness: 0.06em;
}

.work-media-stage .summary-item.lz-project-anchor {
	scroll-margin-top: 6rem;
	box-sizing: border-box;
}

.studio-intro {
	font-size: var(--site-intro-text-size);
	line-height: 1.25;
}

.studio-column:first-child p.studio-section-heading {
	font-size: var(--site-text-size);
	line-height: normal;
}

.studio-column:first-child p.studio-contact-block {
	font-size: var(--site-text-size);
	line-height: 1.35;
}

.studio-about-intro-image {
	margin: 0.85rem 0 0.9rem;
	max-width: min(100%, 19rem);
}

.studio-about-intro-image img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

.studio-column {
	padding-inline: 0;
	opacity: 0;
	animation: elegantFadeIn 700ms ease-out both;
}

/* Outer insets live on .studio-grid; cells match header tracks (no extra inline padding). */
.studio-column:first-child {
	padding-inline-start: 0;
}

.studio-column:last-child {
	padding-inline-end: 0;
}

.studio-column:nth-child(1) {
	animation-delay: 120ms;
}

.studio-column:nth-child(2) {
	animation-delay: 220ms;
}

.studio-column:nth-child(3) {
	animation-delay: 320ms;
}

.studio-column:nth-child(4) {
	animation-delay: 420ms;
}

/* Black rule directly above the Art block (Short Films ends above this paragraph). */
.studio-column--middle-left p.studio-middle-left-art {
	border-top: 3px solid #000;
	padding-top: 0.75rem;
}

.studio-section-block {
	margin-top: var(--studio-section-gap);
}

/* First subsection in a column keeps the default paragraph gap only */
.studio-column > .studio-section-block:first-child,
.studio-column > p:first-child + .studio-section-block {
	margin-top: 0;
}

.studio-column--right .studio-middle-right-projects-heading {
	margin-top: var(--studio-section-gap);
}

.studio-column--right > .studio-middle-right-projects-heading:first-child {
	margin-top: 0;
}

/* Public Art column: left-aligned blocks (title + list share the same left edge) */
@media (min-width: 701px) {
	.studio-column--right {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
	}

	.studio-column--right > p {
		margin: 0 0 0.9rem;
		width: 100%;
		max-width: 100%;
		text-align: left;
	}

	.studio-column--right > p:last-child {
		margin-bottom: 0;
	}

	.studio-column--right .studio-public-art-body {
		overflow-x: visible;
	}
}

.work-media-stage {
	--work-grid-column-gap: var(--grid-gap);
	--work-grid-row-gap: 1.35rem;
	/* Used in media queries for section title math; keep in sync with column gutters. */
	--work-grid-gap: var(--work-grid-column-gap);
	/* Mobile + tablet: same inset as the information page; desktop work view overrides below. */
	--work-page-edge-inset: var(--page-edge-inset);
	--work-title-inset-3: 0;
	--work-title-inset-4: 0;
	position: fixed;
	/* Full viewport (top–bottom); white fills under the sticky header with no gap above or below */
	inset: 0;
	box-sizing: border-box;
	/* Header clearance is padding on this outer layer; scrolling happens on .work-media-stage__scroll
	   so section titles can use sticky top:0 without doubling the offset (padding-top + top on the same box breaks in Chrome). */
	padding-top: 0;
	padding-inline: var(--work-page-edge-inset);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
	/* No transform on this layer — sticky section titles break if transformed */
	transition:
		opacity var(--view-transition-duration) var(--view-transition-ease),
		z-index 0s linear 0s;
	transition-delay: 0ms;
	z-index: 15;
	scrollbar-width: none;
	-ms-overflow-style: none;
	/* Opaque fill so landing portrait does not show through behind project thumbnails */
	background: #fff;
}

.work-media-stage__scroll {
	flex: 1 1 auto;
	min-height: 0;
	width: 100%;
	position: relative;
	overflow-y: auto;
	overflow-x: clip;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
	background: #fff;
	/* Large bottom inset: breathing room after the last section; safe area on notched devices */
	padding-bottom: calc(var(--work-scroll-bottom-padding) + env(safe-area-inset-bottom, 0px));
	box-sizing: border-box;
}

/* Extra space after the final work grid so the last row of projects is not flush to the scroll edge */
.work-media-stage__scroll > .work-section:last-of-type .summary-item-list.sqs-gallery-design-autogrid {
	padding-bottom: 5rem;
}

.work-media-stage__scroll::-webkit-scrollbar {
	display: none;
}

/* Equal-column grids: uniform gutters between tracks */
.work-media-stage .summary-item-list.sqs-gallery-design-autogrid:not(.section-grid--projects) {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: start;
	justify-items: stretch;
	row-gap: var(--work-grid-row-gap);
	column-gap: var(--work-grid-column-gap);
	margin-bottom: 0 !important;
	width: 100%;
}

.work-media-stage .summary-item-list.sqs-gallery-design-autogrid.photography-grid,
.work-media-stage .summary-item-list.sqs-gallery-design-autogrid.section-grid--short-films {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.work-media-stage .summary-item-list.sqs-gallery-design-autogrid.photography-grid {
	margin-top: 0.15rem;
}

.work-media-stage .summary-item-list.sqs-gallery-design-autogrid > .summary-item {
	min-width: 0;
	width: 100% !important;
	max-width: none;
}

.work-media-stage .summary-item-list.sqs-gallery-design-autogrid > .summary-item[data-type="image"] {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.65rem;
	text-align: left;
}

/* Empty-section placeholder: full width so the message isn’t squeezed into one slot. */
.work-media-stage .summary-item-list.sqs-gallery-design-autogrid > .summary-item[data-type="text"] {
	flex: 1 1 100%;
	max-width: 100%;
	width: 100% !important;
}

.work-section-title {
	margin: 0.85rem 0 0.1rem;
	font-size: var(--site-text-size);
	line-height: 1.2;
	font-style: normal;
	position: sticky;
	top: 0;
	z-index: 6;
	background-color: #fff;
	padding: 0.12rem 0 0.35rem;
	isolation: isolate;
}

.work-media-stage .work-section-title {
	position: relative;
	background-color: #fff;
	margin-top: 0;
	margin-inline: calc(-1 * var(--work-page-edge-inset));
	padding-inline: var(--work-page-edge-inset);
	padding-bottom: 0.15rem;
}

.work-media-stage .work-section-title--films {
	padding-top: 0;
}

/* Sticky section nav — shows active label; hover / tap reveals all sections inline */
.work-section-nav {
	position: sticky;
	top: 0;
	z-index: 13;
	margin-inline: calc(-1 * var(--work-page-edge-inset));
	padding-inline: var(--work-page-edge-inset);
	padding-top: var(--work-films-section-top-spacing);
	padding-bottom: 0.4rem;
	background-color: #fff;
	isolation: isolate;
	font-size: var(--site-text-size);
	line-height: 1.2;
	box-shadow: 0 1px 0 0 #fff;
}

.work-section-nav::before {
	content: "";
	position: absolute;
	inset: 0;
	left: 50%;
	width: 100vw;
	max-width: none;
	transform: translateX(-50%);
	background: #fff;
	z-index: -1;
	pointer-events: none;
}

.work-section-nav__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 1.25rem;
}

.work-section-nav__link {
	color: var(--text);
	text-decoration: none;
	opacity: 0.45;
	transition: opacity 160ms ease;
	white-space: nowrap;
}

.work-section-nav__link.is-active {
	opacity: 1;
}

.work-section-nav:not(:hover):not(.is-expanded):not(:focus-within) .work-section-nav__link:not(.is-active) {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.work-section-nav:hover .work-section-nav__link,
.work-section-nav.is-expanded .work-section-nav__link,
.work-section-nav:focus-within .work-section-nav__link {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
	opacity: 0.45;
}

.work-section-nav:hover .work-section-nav__link.is-active,
.work-section-nav.is-expanded .work-section-nav__link.is-active,
.work-section-nav:focus-within .work-section-nav__link.is-active {
	opacity: 1;
}

.work-section-nav__link:hover,
.work-section-nav__link:focus-visible {
	opacity: 1;
}

@media (hover: none) {
	.work-section-nav__link.is-active {
		cursor: pointer;
	}
}

/* Section gallery rows: left-align thumbnails with the section title text */

.work-media-stage .work-section-title.work-section-title--cols-3 + .summary-item-list.sqs-gallery-design-autogrid:not(.photography-grid) {
	padding-inline-start: var(--work-title-inset-3);
}

.work-media-stage .work-section-title.work-section-title--cols-4 + .summary-item-list.sqs-gallery-design-autogrid.photography-grid {
	padding-inline-start: var(--work-title-inset-4);
}

.work-media-stage .work-section-title.work-section-title--cols-5 + .summary-item-list.sqs-gallery-design-autogrid.photography-grid {
	padding-inline-start: var(--work-title-inset-4);
}

.work-media-stage .summary-item-list.sqs-gallery-design-autogrid {
	/* Provides the visual gap between one section's thumbnails and the next section label */
	padding-bottom: var(--work-section-gap);
}

.work-media-stage .work-section + .work-section .work-section-title {
	/* Keep margin zeroed — spacing comes from gallery padding-bottom above */
	margin-top: 0;
}

/* Desktop: 6% layout inset (Work grid + header + Contact column share one edge). */
@media (min-width: 701px) {
	:root {
		--site-layout-inset: max(1rem, 6%);
		--site-left-edge: max(var(--site-layout-inset), env(safe-area-inset-left, 0px));
		--site-right-edge: max(var(--site-layout-inset), env(safe-area-inset-right, 0px));
	}

	body.work-media-active .work-media-stage {
		--work-page-edge-inset: var(--site-layout-inset);
	}

	body.work-media-active .work-detail-close,
	body.work-media-active #project-video-overlay > .work-detail-close {
		right: var(--site-right-edge);
	}

	.work-media-stage .summary-thumbnail-outer-container,
	.work-media-stage .summary-content.sqs-gallery-meta-container {
		max-width: 100%;
		width: 100%;
		margin-inline: 0;
	}
}

.work-media-stage .summary-item.sqs-gallery-design-autogrid-slide {
	width: 100% !important;
	margin: 0 !important;
	clear: none !important;
	overflow: visible;
}

/* Thumbnail + caption: fill grid column */
.work-media-stage .summary-thumbnail-outer-container,
.work-media-stage .summary-content.sqs-gallery-meta-container {
	max-width: 100%;
	width: 100%;
	margin-inline: 0;
}

/* Keep caption below thumbnail; top-align title block across the row */
.work-media-stage .summary-content.sqs-gallery-meta-container {
	position: relative;
	z-index: 2;
	align-self: flex-start;
}

.work-media-stage .summary-thumbnail-outer-container {
	display: block;
	padding-bottom: 0;
}

.work-media-stage .summary-thumbnail-image {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	max-height: min(24vh, 240px);
	object-fit: contain;
	object-position: left top;
	margin-inline: 0;
}

.work-media-stage .summary-thumbnail-image.lz-progressive-img {
	filter: blur(16px);
	transform: scale(1.03);
	opacity: 0.9;
	transition:
		filter 620ms var(--view-transition-ease),
		transform 620ms var(--view-transition-ease),
		opacity 420ms ease;
	will-change: filter, transform;
}

.work-media-stage .summary-thumbnail-image.lz-progressive-img.is-sharp {
	filter: blur(0);
	transform: scale(1);
	opacity: 1;
}

.work-media-stage .work-section--films .summary-thumbnail-container,
.work-media-stage .work-section--short-films .summary-thumbnail-container,
.work-media-stage .work-section--art .summary-thumbnail-container {
	overflow: hidden;
}

.work-media-stage .summary-thumbnail-container {
	display: block;
	position: relative;
	text-align: left;
	border-radius: 8px;
}

/* External Work cards (trulytype.com, 2manybooks.com): strict 16×9 frame full-width in column */
.work-media-stage .lz-project-external .summary-thumbnail-outer-container {
	width: 100%;
	max-width: 100%;
}

.work-media-stage .lz-project-external .summary-thumbnail-container.lz-project-external-link {
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	box-sizing: border-box;
}

/* Projects: trulytype + 2manybooks — flex row, not the main grid */
.work-media-stage .summary-item-list.section-grid--projects {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	--lz-external-tile-w: min(100%, 6.25rem);
	gap: var(--work-grid-row-gap) var(--work-grid-column-gap);
}

.work-media-stage .section-grid--projects > .summary-item.lz-project-external {
	flex: 0 0 var(--lz-external-tile-w);
	width: var(--lz-external-tile-w);
	max-width: var(--lz-external-tile-w);
	min-width: 0;
	box-sizing: border-box;
}

.work-media-stage .section-grid--projects > .summary-item.lz-project-external + .summary-item.lz-project-external {
	margin-top: 0;
	margin-left: 0;
}

.work-media-stage .section-grid--projects > .summary-item.lz-project-external .summary-thumbnail-outer-container {
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}

.work-media-stage .section-grid--projects .lz-project-external .lz-project-external-tile {
	font-size: max(0.55rem, calc(var(--site-text-size) - 6pt));
}

/* One line per label; ellipsis if the box is too narrow */
.work-media-stage .section-grid--projects .lz-external-card__labels {
	padding: 0.35rem 0.45rem;
	max-width: 100%;
}

.work-media-stage .section-grid--projects .lz-external-card__domain,
.work-media-stage .section-grid--projects .lz-external-card__cta {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

/* Black 16×9 tile: domain centered; crossfade to “Visit site” on hover / focus */
.work-media-stage .lz-project-external-tile {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #000;
	color: #fff;
	text-decoration: none;
	border: 0;
	border-radius: 8px;
	font-size: var(--site-text-size);
	line-height: 1.3;
	text-align: center;
	transition: background 0.2s ease, color 0.2s ease;
}

.work-media-stage .lz-project-external-tile:hover,
.work-media-stage .lz-project-external-tile:focus-visible {
	background: #0a0a0a;
	color: #fff;
	outline: none;
}

.work-media-stage .lz-external-card__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	opacity: 0.22;
	pointer-events: none;
	z-index: 0;
}

.work-media-stage .lz-external-card__labels {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	padding: 0.75rem 1rem;
	max-width: 95%;
	box-sizing: border-box;
}

.work-media-stage .lz-external-card__domain,
.work-media-stage .lz-external-card__cta {
	grid-area: 1 / 1;
	margin: 0;
	transition: opacity 0.2s ease;
}

.work-media-stage .lz-external-card__cta {
	opacity: 0;
}

.work-media-stage .lz-project-external-tile:hover .lz-external-card__domain,
.work-media-stage .lz-project-external-tile:focus-visible .lz-external-card__domain {
	opacity: 0;
}

.work-media-stage .lz-project-external-tile:hover .lz-external-card__cta,
.work-media-stage .lz-project-external-tile:focus-visible .lz-external-card__cta {
	opacity: 1;
}

.work-media-stage .lz-project-external .summary-thumbnail-image {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: cover;
	object-position: center center;
}

.work-media-stage .lz-project-external-tile .lz-external-card__bg + .lz-external-card__labels .lz-external-card__domain {
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.work-media-stage .lz-project-external-tile .lz-external-card__bg + .lz-external-card__labels .lz-external-card__cta {
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.work-media-stage .photography-grid .summary-thumbnail-outer-container,
.work-media-stage .photography-grid .summary-content.sqs-gallery-meta-container {
	max-width: 100%;
	width: 100%;
	margin-inline: 0;
}

/* Legacy fixed-height band (unused — all work grids use 4- or 5-col autogrid). */
.work-media-stage .photography-grid:not(.section-grid--4col):not(.section-grid--5col) > .summary-item[data-type="image"] {
	gap: 0.12rem;
}

.work-media-stage .photography-grid:not(.section-grid--4col):not(.section-grid--5col) .summary-thumbnail-outer-container {
	min-height: min(21vh, 210px);
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
}

/* Incomplete last row (e.g. solo item): no fixed band — caption hugs image */
.work-media-stage .photography-grid:not(.section-grid--4col):not(.section-grid--5col) > .summary-item:nth-child(4n + 1):nth-last-child(1) .summary-thumbnail-outer-container,
.work-media-stage .photography-grid:not(.section-grid--4col):not(.section-grid--5col) > .summary-item:nth-child(4n + 2):nth-last-child(1) .summary-thumbnail-outer-container,
.work-media-stage .photography-grid:not(.section-grid--4col):not(.section-grid--5col) > .summary-item:nth-child(4n + 3):nth-last-child(1) .summary-thumbnail-outer-container,
.work-media-stage .photography-grid:not(.section-grid--4col):not(.section-grid--5col) > .summary-item:nth-child(4n + 4):nth-last-child(1) .summary-thumbnail-outer-container {
	min-height: 0;
	display: block;
}

.work-media-stage .photography-grid:not(.section-grid--4col):not(.section-grid--5col) .summary-content.sqs-gallery-meta-container {
	margin-top: 0;
	padding-top: 0;
}

.work-media-stage .photography-grid:not(.section-grid--4col):not(.section-grid--5col) .summary-thumbnail-image {
	width: 100%;
	max-width: 100%;
	max-height: min(21vh, 210px);
	object-position: left top;
}

.work-media-stage .photography-grid .lz-project-external .summary-thumbnail-outer-container {
	width: 100%;
	max-width: 100%;
}

.work-media-stage .photography-grid:not(.section-grid--4col):not(.section-grid--5col) .summary-thumbnail-image {
	width: 100%;
	max-width: 100%;
	max-height: min(21vh, 210px);
	object-position: left top;
}

.work-media-stage .photography-grid .lz-project-external .summary-thumbnail-image {
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: cover;
	object-position: center center;
}

/* 4-column autogrid (Films, Short Films — ~16px gutter, natural image height) */
.work-media-stage .summary-item-list.sqs-gallery-design-autogrid.section-grid--4col {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: 1rem;
	row-gap: 1rem;
}

.work-media-stage .section-grid--4col > .summary-item[data-type="image"] {
	gap: 0.12rem;
}

.work-media-stage .section-grid--4col .summary-thumbnail-outer-container {
	min-height: 0;
	display: block;
}

.work-media-stage .section-grid--4col .summary-thumbnail-image {
	width: 100%;
	max-width: 100%;
	max-height: none;
	height: auto;
	object-fit: contain;
	object-position: left top;
}

.work-media-stage .section-grid--4col .summary-content.sqs-gallery-meta-container {
	margin-top: 0;
	padding-top: 0;
}

/* 5-column autogrid (Art, Commercial & Editorial, Public Art — ~16px gutter, natural image height) */
.work-media-stage .summary-item-list.sqs-gallery-design-autogrid.section-grid--5col {
	grid-template-columns: repeat(5, minmax(0, 1fr));
	column-gap: 1rem;
	row-gap: 1rem;
}

.work-media-stage .section-grid--5col > .summary-item[data-type="image"] {
	gap: 0.12rem;
}

.work-media-stage .section-grid--5col .summary-thumbnail-outer-container {
	min-height: 0;
	display: block;
}

.work-media-stage .section-grid--5col .summary-thumbnail-image {
	width: 100%;
	max-width: 100%;
	max-height: none;
	height: auto;
	object-fit: contain;
	object-position: left top;
}

.work-media-stage .section-grid--5col .summary-content.sqs-gallery-meta-container {
	margin-top: 0;
	padding-top: 0;
}

.work-media-stage .section-grid--short-films > .summary-item[data-type="text"] {
	grid-column: 1 / -1;
	max-width: 100%;
	width: 100%;
}

.work-media-stage .section-grid--short-films .summary-excerpt {
	line-height: 1.2;
}

.work-media-stage .section-grid--short-films .summary-excerpt p {
	margin: 0;
}

.work-media-stage .summary-excerpt {
	font-size: calc(var(--site-text-size) - 2pt);
	line-height: 1.28;
	text-align: left;
}

.work-media-stage .summary-excerpt p {
	margin: 0;
	text-align: left;
}

.work-media-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.7rem;
	align-items: start;
	padding: 0;
}

.work-media-item {
	margin: 0;
	width: 100%;
	display: grid;
	gap: 0.35rem;
	overflow: visible;
}

.work-media-item img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	max-height: none;
	object-fit: contain !important;
	object-position: center center;
}

.work-media-item figcaption {
	font-size: var(--site-text-size);
	line-height: 1.35;
	color: #111;
}

body.work-media-active {
	overflow: hidden;
	background-color: #fff;
	/* Lock layout height when Work view is open (fullscreen / resize safe). */
	height: 100%;
	height: 100dvh;
	height: 100svh;
	transition: background-color var(--view-transition-duration) var(--view-transition-ease);
}

/* Information view: black extends to the bottom of the viewport (below the white header). */
body:not(.work-media-active) {
	background-color: #000;
	min-height: 100dvh;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	overflow-x: clip;
	overflow-y: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	transition: background-color var(--view-transition-duration) var(--view-transition-ease);
}

body:not(.work-media-active)::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
}

html:has(body:not(.work-media-active)) {
	scrollbar-width: none;
	-ms-overflow-style: none;
}

html:has(body:not(.work-media-active))::-webkit-scrollbar {
	display: none;
}

body:not(.work-media-active) .site-main {
	flex: 1 1 auto;
	background-color: #000;
}

/* Work page: white header bar, black nav type (matches work grid) */
body.work-media-active .site-header {
	background: #fff;
	--nav-link-active: #000;
	--nav-link-inactive: rgb(0 0 0 / 0.95);
}

body.work-media-active .site-role {
	color: var(--text);
}

body.work-media-active .site-work-link:focus-visible,
body.work-media-active .site-work-link__contact:focus-visible {
	outline-color: #000;
}

body.work-media-active .landing-hero-portrait {
	visibility: hidden;
	pointer-events: none;
}

/* During brandoor: Work sits in the gap between panels (below brandoor, above hidden info). */
body.is-view-transitioning .work-media-stage,
body.is-brandoor-exiting .work-media-stage {
	z-index: 24;
	transition-delay: 0ms;
}

body.is-view-transitioning.work-media-active .work-media-stage {
	transition-delay: 40ms;
}

body.work-media-active .work-media-stage {
	opacity: 1;
	pointer-events: auto;
	/* Always cover the full viewport — prevents Information columns bleeding through. */
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	height: 100dvh;
	height: 100svh;
	max-height: 100dvh;
	max-height: 100svh;
}

body.work-media-active:not(.is-view-transitioning) .work-media-stage {
	z-index: 30;
	transition-delay: 0ms;
}

/* Keep About (default) view text fully visible while scrolling */
body:not(.work-media-active) .studio-grid {
	opacity: 1 !important;
	transform: none !important;
	filter: none !important;
	pointer-events: auto !important;
	padding-bottom: 2rem;
}

/* content-visibility:auto underestimates scroll height; last sections (Public Art) vanish. */
body.work-media-active .work-media-stage .summary-item,
body.work-media-active .work-media-stage .work-section {
	content-visibility: visible;
}

.work-detail-overlay {
	position: fixed;
	inset: 0;
	background: var(--bg);
	/* Above .site-header (200) so × Close and overlay content are not covered */
	z-index: 250;
	display: none;
	padding: 5.5rem 1.2rem 1.2rem;
	overflow: auto;
}

.work-detail-overlay.is-open {
	display: block;
}

.work-detail-panel {
	max-width: 44rem;
	margin: 0 auto;
	position: relative;
}

.work-detail-close {
	position: fixed;
	top: calc(1.25rem + 0.08rem);
	right: var(--page-edge-inset, 1rem);
	left: auto;
	padding: 0;
	border: 0;
	background: transparent;
	color: #111;
	font-family: inherit;
	font-size: var(--site-text-size);
	line-height: 1.6;
	letter-spacing: 0.01em;
	text-transform: none;
	cursor: pointer;
	/* Stacking relative to siblings inside overlay (e.g. gallery nav z-index 120) */
	z-index: 200;
	transition: text-decoration-color 160ms ease;
}

.work-detail-close.is-struck {
	text-decoration: line-through;
	text-decoration-color: currentColor;
	text-decoration-thickness: 1px;
}

.work-detail-title {
	margin: 0 0 0.7rem;
	font-size: calc(var(--site-text-size) - 2pt);
	font-weight: 600;
}

.work-detail-video-wrap {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%;
	margin-bottom: 0.9rem;
}

.work-detail-video-wrap iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	outline: none;
	display: block;
}

/* Video overlay: gallery-style white layout with black accordion strip below */
.project-video-overlay.is-open {
	display: flex;
	flex-direction: column;
	height: 100dvh;
	max-height: 100dvh;
	padding-inline: 0;
	padding-bottom: 0;
	overflow-x: hidden;
	overflow-y: auto;
	scrollbar-gutter: stable;
	box-sizing: border-box;
	background: #fff;
	transition: background-color 2.75s cubic-bezier(0.4, 0, 0.2, 1);
	--project-video-edge: max(1.2rem, env(safe-area-inset-left, 0px));
	--project-video-inline-max: min(72rem, calc(100vw - 2 * var(--project-video-edge)));
	--project-video-chrome-block: calc(7.5rem + env(safe-area-inset-top, 0px));
	--project-video-stage-max-h: max(12rem, calc(100dvh - var(--project-video-chrome-block)));
	--project-video-above-black-gap: 0.75rem;
}

.project-video-overlay.is-open.is-video-started {
	background: #111;
}

.project-video-panel {
	max-width: min(72rem, 100%);
	width: 100%;
	height: auto;
	min-height: calc(100dvh - 5.5rem);
	margin: 0 auto;
	flex: 1 1 0%;
	display: flex;
	flex-direction: column;
	position: relative;
	padding-top: 0.25rem;
	padding-inline: max(1.2rem, env(safe-area-inset-left, 0px)) max(1.2rem, env(safe-area-inset-right, 0px));
	box-sizing: border-box;
	--pg-gallery-motion-duration: 0.78s;
	--pg-gallery-motion-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

#project-video-overlay .work-detail-close {
	color: var(--text);
	transition: color 2.75s cubic-bezier(0.4, 0, 0.2, 1);
}

#project-video-overlay > .work-detail-close {
	position: fixed;
	top: calc(1.25rem + env(safe-area-inset-top, 0px) + 0.08rem);
	right: max(var(--page-edge-inset, 1rem), env(safe-area-inset-right, 0px));
	left: auto;
	z-index: 300;
	pointer-events: auto;
}

#project-video-overlay.is-video-started > .work-detail-close {
	color: #fff;
}

.project-video-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 0%;
	min-height: 0;
	align-items: stretch;
	gap: 0;
	width: 100%;
	margin-top: 1.5rem;
	--project-gallery-column-max: var(--project-video-inline-max, min(72rem, calc(100vw - 2rem)));
}

.project-video-grid {
	flex: 1 1 auto;
	width: 100%;
	max-width: var(--project-video-inline-max, min(72rem, calc(100vw - 2rem)));
	min-height: 0;
	margin-inline: auto;
	padding-bottom: 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.project-video-embed {
	width: min(
		100%,
		var(--project-video-inline-max, 100%),
		calc(var(--project-video-stage-max-h, 70dvh) * 16 / 9)
	);
	max-width: 100%;
	aspect-ratio: 16 / 9;
	max-height: min(
		var(--project-video-stage-max-h, 70dvh),
		calc(var(--project-video-inline-max, 100vw) * 9 / 16)
	);
	height: auto;
	position: relative;
	background: #fff;
	overflow: hidden;
	transition: background-color 2.75s cubic-bezier(0.4, 0, 0.2, 1);
}

.project-video-overlay.is-open.is-video-started .project-video-embed,
.project-video-overlay.is-open.is-video-started #project-video-wrap {
	background: #111;
}

/* ID specificity override — keep the container positioned so the absolute iframe stays inside */
#project-video-wrap {
	position: relative;
	width: min(
		100%,
		var(--project-video-inline-max, 100%),
		calc(var(--project-video-stage-max-h, 70dvh) * 16 / 9)
	);
	max-width: 100%;
	height: auto;
	max-height: min(
		var(--project-video-stage-max-h, 70dvh),
		calc(var(--project-video-inline-max, 100vw) * 9 / 16)
	);
	aspect-ratio: 16 / 9;
	padding-bottom: 0;
	margin: 0;
}

#project-video-wrap video {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	border: 0;
	outline: none;
	display: block;
	object-fit: contain;
	background: transparent;
}

.project-video-freeze-frame {
	position: absolute;
	inset: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
	background: #111;
	pointer-events: none;
}

.project-video-freeze-frame[hidden] {
	display: none !important;
}

.project-video-overlay.is-open.is-video-started #project-video-wrap video {
	background: transparent;
}

/* Block embed fullscreen button (Vimeo/YouTube) when URL params are ignored */
.project-video-fullscreen-shield {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 4;
	width: 4.75rem;
	height: 3rem;
	pointer-events: auto;
	background: rgb(15 15 15 / 0.96);
}

.project-video-hosted-controls {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.45rem 0.65rem;
	background: rgb(15 15 15 / 0.92);
	color: #fff;
	box-sizing: border-box;
}

.project-video-hosted-controls__play {
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
	padding: 0;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
}

.project-video-hosted-controls__icon {
	display: block;
	line-height: 0;
}

.project-video-hosted-controls__icon svg {
	display: block;
	width: 0.95rem;
	height: 0.95rem;
}

.project-video-hosted-controls__progress {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	accent-color: #fff;
}

.project-video-hosted-controls__time {
	font-size: calc(var(--site-text-size) - 3pt);
	white-space: nowrap;
	flex: 0 0 auto;
}

.project-video-embed iframe,
#project-video-wrap iframe {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	border: 0;
	outline: none;
	display: block;
	background: #111;
}

/* Tile / video thumbnail as first frame over embed until the iframe loads */
.project-video-embed-poster {
	position: absolute;
	inset: 0;
	z-index: 1;
	margin: 0;
	padding: 0;
	pointer-events: none;
	background: #fff;
	box-sizing: border-box;
	transition: background-color 2.75s cubic-bezier(0.4, 0, 0.2, 1);
}

.project-video-overlay.is-open.is-video-started .project-video-embed-poster {
	background: #111;
}

.project-video-embed-poster[hidden] {
	display: none !important;
}

.project-video-embed-poster img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Video drawer: same typography as gallery work-details / columns */
#project-video-work-details .project-gallery-lead {
	margin: 0 0 0.75rem;
	white-space: pre-line;
	font-size: calc(var(--site-text-size) - 1pt);
	line-height: 1.45;
}

#project-video-work-details .project-video-subtitle-line,
#project-video-work-details .project-video-credit-line {
	margin: 0 0 0.55rem;
	white-space: pre-line;
	font-size: calc(var(--site-text-size) - 2pt);
	font-style: italic;
}

/* Pin black credits strip to the bottom of the viewport (same flex pattern as photo gallery). */
.project-video-body:has(#project-video-below-stage:not([hidden])) {
	gap: var(--project-video-above-black-gap, 0.75rem);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	align-self: stretch;
	width: 100%;
	flex: 1 1 0%;
	min-height: 0;
	--project-video-chrome-block: calc(
		13.5rem + env(safe-area-inset-top, 0px) + var(--project-video-above-black-gap, 0.75rem)
	);
}

#project-video-overlay.is-open:has(#project-video-below-stage:not([hidden])) .project-video-panel {
	flex: 1 1 0%;
	min-height: 0;
}

#project-video-overlay.is-open:has(#project-video-below-stage:not([hidden])) .project-video-body {
	flex: 1 1 0%;
	min-height: 0;
	margin-top: 0;
}

#project-video-overlay.is-open:has(#project-video-below-stage:not([hidden]):not(.is-below-expanded)) {
	overflow-y: hidden;
}

.project-video-body:has(#project-video-below-stage:not([hidden])) .project-video-grid {
	flex: 1 1 auto;
	min-height: 0;
	max-height: none;
	padding-bottom: 0;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	background: transparent;
}

/* Collapsed: pin black strip to the bottom of the viewport */
.project-video-body:has(#project-video-below-stage:not([hidden]):not(.is-below-expanded)) #project-video-below-stage {
	flex: 0 0 auto;
	flex-shrink: 0;
	margin-top: auto;
	position: sticky;
	bottom: 0;
	z-index: 4;
	align-self: stretch;
	box-sizing: border-box;
}

/* Expanded: two-row grid — video stays visible and centered above scrolling credits */
.project-video-body:has(#project-video-below-stage.is-below-expanded) {
	display: grid;
	grid-template-rows: minmax(0, 1fr) auto;
	gap: var(--project-video-above-black-gap, 0.75rem);
	align-content: stretch;
	min-height: 0;
	--project-video-expanded-stage-max-h: min(58dvh, calc(100dvh - 16rem));
}

.project-video-body:has(#project-video-below-stage.is-below-expanded) .project-video-grid {
	grid-row: 1;
	flex: unset;
	min-height: 0;
	max-height: none;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	position: relative;
	z-index: 2;
}

.project-video-body:has(#project-video-below-stage.is-below-expanded) #project-video-wrap,
.project-video-body:has(#project-video-below-stage.is-below-expanded) .project-video-embed {
	position: relative;
	z-index: 2;
	max-height: min(100%, var(--project-video-expanded-stage-max-h));
	max-width: 100%;
	width: min(
		100%,
		var(--project-video-inline-max, 100%),
		calc(var(--project-video-expanded-stage-max-h) * 16 / 9)
	);
	height: auto;
	aspect-ratio: 16 / 9;
}

.project-video-body:has(#project-video-below-stage.is-below-expanded) #project-video-below-stage {
	grid-row: 2;
	flex: unset;
	margin-top: 0;
	position: static;
	bottom: auto;
	z-index: 1;
	align-self: stretch;
	box-sizing: border-box;
	max-height: min(42dvh, 40rem);
	min-height: 0;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding-bottom: max(1.1rem, env(safe-area-inset-bottom, 0px));
}

#project-video-overlay.is-open:has(#project-video-below-stage.is-below-expanded) {
	overflow-y: hidden;
}

.work-detail-copy {
	font-size: var(--site-text-size);
	line-height: 1.45;
}

.project-gallery-overlay {
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.project-gallery-overlay::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
}

.work-detail-overlay.project-gallery-overlay.is-open {
	display: flex;
	flex-direction: column;
	/* Bound main-axis size so nested flex (below-stage) receives real “free space”;
	   otherwise this box can grow to content height and flex-grow never activates. */
	height: 100dvh;
	max-height: 100dvh;
	/* Hard cap for main slide bitmaps — never use img { max-height:100% } here; wide + portrait would grow with frame width and clip. */
	--pg-main-img-max-h: min(72dvh, 78vh, calc(100dvh - 10rem));
	/* Horizontal padding lives on .project-gallery-panel so the black band can span true viewport width. */
	padding-inline: 0;
	/* Inherited work-detail overlay uses 1.2rem bottom padding — that leaves a white strip under the black stage. */
	padding-bottom: 0;
	overflow-x: hidden;
	overflow-y: auto;
	scrollbar-gutter: stable;
	box-sizing: border-box;
	background: #fff;
}

/* When black strip is present (peek + drawer), slightly tighter cap so chrome + strip fit; same cap collapsed or expanded. */
#project-gallery-overlay:has(#project-gallery-below-stage:not([hidden])) {
	--pg-main-img-max-h: min(62dvh, 68vh, calc(100dvh - 13rem));
}

.project-gallery-panel {
	max-width: min(72rem, 100%);
	margin: 0 auto;
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 1 1 0%;
	min-height: 0;
	--pg-gallery-motion-duration: 0.78s;
	/* Smooth acceleration into a long ease-out — avoids an abrupt “on/off” feel. */
	--pg-gallery-motion-ease: cubic-bezier(0.4, 0, 0.2, 1);
	/* Fill everything below the overlay’s top padding so the black stage can reach the bottom of the viewport. */
	min-height: calc(100dvh - 5.5rem);
	width: 100%;
	padding-top: 0.25rem;
	padding-inline: max(1.2rem, env(safe-area-inset-left, 0px)) max(1.2rem, env(safe-area-inset-right, 0px));
	box-sizing: border-box;
	background: #fff;
}

.project-gallery-body {
	--project-gallery-column-max: min(52rem, calc(100vw - 2rem));
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	width: 100%;
	box-sizing: border-box;
	margin-top: 1.5rem;
	flex: 1 1 0%;
	min-height: 0;
	overflow-x: visible;
	overflow-y: visible;
	background: #fff;
}

/* Column flex: intro + image at the top; black strip (peek + credits text) pins to the bottom of the window/panel via margin-top: auto. */
.project-gallery-body:has(#project-gallery-below-stage:not([hidden])) {
	gap: 0;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	align-self: stretch;
	width: 100%;
	flex: 1 1 0%;
	min-height: 0;
}

.project-gallery-body:has(#project-gallery-below-stage:not([hidden])) #project-gallery-grid {
	flex: 0 1 auto;
	min-height: 0;
	max-height: none;
	height: auto;
	box-sizing: border-box;
	overflow: visible;
}

.project-gallery-body:has(#project-gallery-below-stage:not([hidden])) .project-gallery-slideshow {
	min-height: 0;
	max-height: none;
	flex: 0 1 auto;
	padding: 0;
	box-sizing: border-box;
	justify-content: center;
	align-items: center;
	align-content: center;
}

.project-gallery-body:has(#project-gallery-below-stage:not([hidden])) .project-gallery-slide-frame {
	margin-bottom: 0;
	height: auto;
	max-height: var(--pg-main-img-max-h, min(72dvh, 78vh, calc(100dvh - 9rem), 100%));
}

/* Below-stage / accordion layout: undo base .project-gallery-main-slide / .project-gallery-tile height:100% + flex-grow so the bitmap does not fill the column. */
#project-gallery-overlay:has(#project-gallery-below-stage:not([hidden])) #project-gallery-grid .project-gallery-main-slide.project-gallery-tile {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: visible;
	height: auto;
	max-height: none;
	flex: 0 1 auto;
	min-height: 0;
	width: 100%;
	align-self: center;
}

.project-gallery-body:has(#project-gallery-below-stage:not([hidden])) #project-gallery-text-block:not([hidden]) {
	min-width: 0;
	width: 100%;
	max-width: var(--project-gallery-column-max);
	margin-inline: auto;
	text-align: left;
	flex: 0 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	box-sizing: border-box;
}

.project-gallery-body:has(#project-gallery-below-stage:not([hidden])) #project-gallery-below-stage {
	flex: 0 0 auto;
	flex-shrink: 0;
	margin-top: auto;
	position: sticky;
	bottom: 0;
	z-index: 4;
	align-self: stretch;
}

#project-gallery-below-stage.is-below-expanded {
	flex: 1 1 auto;
	min-height: 0;
	max-height: min(72dvh, 52rem);
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding-bottom: max(1.1rem, env(safe-area-inset-bottom, 0px));
}

/* Full view (credits collapsed): center the main slide in the space above the black strip */
#project-gallery-overlay.is-open:not(.is-mountain-gallery):has(#project-gallery-below-stage:not([hidden]):not(.is-below-expanded)) {
	--pg-main-img-max-h: min(76dvh, calc(100dvh - 5.5rem - 5.5rem));
}

#project-gallery-overlay.is-open:not(.is-mountain-gallery):has(#project-gallery-below-stage:not([hidden]):not(.is-below-expanded)) .project-gallery-body {
	margin-top: 0;
}

#project-gallery-overlay.is-open:not(.is-mountain-gallery):has(#project-gallery-below-stage:not([hidden]):not(.is-below-expanded)) .project-gallery-body #project-gallery-grid {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	min-height: 0;
	height: auto;
}

#project-gallery-overlay.is-open:not(.is-mountain-gallery):has(#project-gallery-below-stage:not([hidden]):not(.is-below-expanded)) .project-gallery-body .project-gallery-slideshow {
	flex: 1 1 auto;
	width: 100%;
	min-height: 0;
	justify-content: center;
	align-items: center;
}

#project-gallery-overlay.is-open:not(.is-mountain-gallery):has(#project-gallery-below-stage:not([hidden]):not(.is-below-expanded)) .project-gallery-stage {
	flex: 1 1 auto;
	width: 100%;
	min-height: 0;
	align-items: center;
	justify-content: center;
}

.project-gallery-lead {
	flex: 1 1 auto;
	min-height: 0;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: 0 0.2rem 0.35rem;
	box-sizing: border-box;
	font-size: calc(var(--site-text-size) - 2pt);
	line-height: 1.45;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	word-break: break-word;
	color: var(--text);
}

.project-gallery-grid {
	--grid-cols: 1;
	--grid-rows: 1;
	display: grid;
	grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
	grid-template-rows: repeat(var(--grid-rows), minmax(0, 1fr));
	align-items: center;
	justify-items: center;
	overflow: visible;
	gap: 0.45rem;
	min-height: 0;
	flex: 0 1 auto;
	width: 100%;
	max-width: var(--project-gallery-column-max);
	margin-inline: auto;
	padding-bottom: 0.85rem;
	height: auto;
	max-height: none;
	transition:
		opacity 280ms var(--pg-gallery-motion-ease, ease-in-out),
		transform 280ms var(--pg-gallery-motion-ease, ease-in-out);
}

.project-gallery-overlay.has-multiple-images .project-gallery-grid {
	display: flex;
	flex-direction: column;
	align-items: center;
	align-self: center;
	justify-content: center;
	gap: 0;
	width: 100%;
	max-width: var(--project-gallery-column-max);
	margin-inline: auto;
	padding-bottom: 0.85rem;
	height: auto;
	max-height: none;
	overflow: visible;
	transition:
		opacity 280ms var(--pg-gallery-motion-ease, ease-in-out),
		transform 280ms var(--pg-gallery-motion-ease, ease-in-out);
}

/* Side preview thumbs are position:fixed; keep main slide narrower so it never sits under them */
.project-gallery-overlay.has-multiple-images {
	--pg-nav-thumb-max-w: min(11rem, 30vw);
	--pg-nav-thumb-max-h: min(6.5rem, 20vh);
	--pg-nav-edge: 0.75rem;
	--pg-nav-slot: calc(var(--pg-nav-thumb-max-w) + var(--pg-nav-edge) + 1rem);
	--pg-main-slide-max-w: min(46rem, calc(100vw - 2 * var(--pg-nav-slot)), calc(100vw - 2.5rem));
}

.project-gallery-overlay.has-multiple-images .project-gallery-nav-thumb {
	max-width: var(--pg-nav-thumb-max-w);
	max-height: var(--pg-nav-thumb-max-h);
	width: auto;
	height: auto;
}

.project-gallery-overlay.has-multiple-images .project-gallery-slide-frame {
	max-width: min(46rem, calc(100vw - 2 * var(--pg-nav-slot)), calc(100vw - 2.5rem));
}

.project-gallery-slideshow {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0;
	width: 100%;
	min-height: 0;
	flex: 0 1 auto;
	box-sizing: border-box;
}

/* Desktop: prev / main / next in one row */
.project-gallery-stage {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: clamp(0.5rem, 1.75vw, 1.25rem);
	width: 100%;
	max-width: min(72rem, 100%);
	margin-inline: auto;
	box-sizing: border-box;
}

.project-gallery-stage .project-gallery-main-slide {
	flex: 1 1 auto;
	min-width: 0;
}

.project-gallery-stage .project-gallery-nav {
	position: static;
	top: auto;
	left: auto;
	right: auto;
	transform: none;
	flex: 0 0 auto;
	align-self: center;
	max-width: var(--pg-nav-thumb-max-w, min(11rem, 30vw));
}

.project-gallery-stage .project-gallery-slide-frame {
	max-width: 100%;
}

/* Bounds + transition on one wrapper (layout) so the bitmap does less reflow work than animating img + flex-grow together. */
.project-gallery-slide-frame {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 0;
	min-height: 0;
	max-width: min(94vw, calc(100vw - 2.5rem), 52rem);
	max-height: var(--pg-main-img-max-h, min(72dvh, 78vh, calc(100dvh - 9rem), 100%));
	margin: 0 0 1.5rem;
	overflow: visible;
	background: #fff;
	transition:
		max-height var(--pg-gallery-motion-duration) var(--pg-gallery-motion-ease),
		max-width var(--pg-gallery-motion-duration) var(--pg-gallery-motion-ease);
}

.project-gallery-below-stage {
	align-self: stretch;
	z-index: 1;
	position: relative;
	/* Full viewport width from inside padded panel: 100% = panel inner, 100vw = frame. */
	width: 100vw;
	max-width: none;
	position: static;
	left: auto;
	transform: none;
	margin-inline: calc((100% - 100vw) / 2);
	margin-block: 0;
	padding: 0 0 max(0.75rem, env(safe-area-inset-bottom, 0px));
	box-sizing: border-box;
	/* Height comes from content; position in column is controlled on .project-gallery-body (margin-top: auto). */
	min-height: 0;
	display: flex;
	flex-direction: column;
	background: #000;
	transition: min-height var(--pg-gallery-motion-duration) var(--pg-gallery-motion-ease);
	scrollbar-gutter: stable;
}

.project-gallery-below-peek {
	display: none;
	width: 100%;
	margin: 0;
	padding: 0.55rem 0 0.45rem;
	border: 0;
	border-radius: 0;
	background: #000;
	color: rgba(255, 255, 255, 0.92);
	font: inherit;
	font-size: calc(var(--site-text-size) - 2pt);
	line-height: 1.28;
	text-align: left;
	cursor: pointer;
	flex: 0 0 auto;
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
}

.project-gallery-below-peek:not([hidden]) {
	display: block;
}

/* Match contact / work page horizontal alignment (--page-edge-inset) */
.project-gallery-below-peek__inner,
.project-gallery-below-image__inner,
.project-gallery-work-details {
	--pg-below-copy-inset-start: var(--copy-inset-fullbleed-start);
	--pg-below-copy-inset-end: var(--copy-inset-fullbleed-end);
	box-sizing: border-box;
	width: auto;
	max-width: none;
	margin-inline: 0;
	padding-left: var(--pg-below-copy-inset-start);
	padding-right: var(--pg-below-copy-inset-end);
	text-align: left;
}

.project-gallery-below-peek__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

.project-gallery-below-peek:hover {
	color: #fff;
}

.project-gallery-below-peek:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.85);
	outline-offset: -2px;
}

.project-gallery-below-peek__title {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 500;
}

.project-gallery-below-peek__icon {
	flex: 0 0 auto;
	font-size: 0.65em;
	line-height: 1;
	opacity: 0.75;
	transition:
		transform var(--pg-gallery-motion-duration) var(--pg-gallery-motion-ease),
		opacity 200ms ease;
}

#project-gallery-below-stage.is-below-expanded .project-gallery-below-peek__icon {
	transform: rotate(180deg);
}

#project-gallery-below-stage:has(#project-gallery-below-peek:not([hidden])) #project-gallery-work-title-line {
	display: none;
}

/* Collapsed: drawer tucked under the peek (under the fold); expanded: reveal full credits block. */
.project-gallery-below-drawer-clip {
	flex: 0 1 auto;
	min-height: 0;
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--pg-gallery-motion-duration) var(--pg-gallery-motion-ease);
}

#project-gallery-below-stage.is-below-expanded .project-gallery-below-drawer-clip {
	grid-template-rows: 1fr;
}

.project-gallery-below-drawer {
	min-height: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

#project-gallery-below-stage.is-below-expanded .project-gallery-below-drawer {
	overflow-x: hidden;
	overflow-y: visible;
	min-height: auto;
}

#project-gallery-below-stage.is-below-expanded .project-gallery-below-drawer-clip > .project-gallery-below-drawer {
	min-height: auto;
}

/* Expanded: black strip scrolls when credits drawer is open. */
@media (hover: hover) and (pointer: fine) {
	#project-gallery-overlay:has(#project-gallery-below-stage.is-below-expanded) #project-gallery-below-stage {
		flex-grow: 1;
		flex-shrink: 0;
	}
}

@media (pointer: coarse) {
	#project-gallery-overlay:has(#project-gallery-below-stage.is-below-expanded) #project-gallery-below-stage {
		flex-grow: 1;
		flex-shrink: 0;
	}
}

/* Video overlay: same accordion mechanics as photo gallery */
#project-video-below-stage.is-below-expanded .project-gallery-below-peek__icon {
	transform: rotate(180deg);
}

#project-video-below-stage.is-below-expanded .project-gallery-below-drawer-clip {
	grid-template-rows: 1fr;
}

#project-video-below-stage.is-below-expanded .project-gallery-below-drawer {
	overflow-x: hidden;
	overflow-y: visible;
	min-height: auto;
}

#project-video-below-stage.is-below-expanded .project-gallery-below-drawer-clip > .project-gallery-below-drawer {
	min-height: auto;
}

.project-gallery-below-image {
	align-self: stretch;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	border-top: 0;
	background: transparent;
	box-sizing: border-box;
	flex: 0 0 auto;
}

.project-gallery-below-image__inner {
	padding-top: 0.65rem;
	padding-bottom: 0.85rem;
	font-size: calc(var(--site-text-size) - 2pt);
	line-height: 1.45;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	word-break: break-word;
	color: rgba(255, 255, 255, 0.92);
	text-align: left;
	box-sizing: border-box;
	transition:
		opacity var(--pg-gallery-motion-duration, 0.5s) var(--pg-gallery-motion-ease, ease-in-out),
		transform var(--pg-gallery-motion-duration, 0.5s) var(--pg-gallery-motion-ease, ease-in-out);
}

.project-gallery-below-image:not([hidden]) + .project-gallery-work-details {
	margin-top: 0;
	padding-top: 0.75rem;
}

.project-gallery-work-details {
	align-self: stretch;
	padding-top: 0.65rem;
	padding-bottom: 0.5rem;
	border-top: 0;
	background: transparent;
	flex: 0 0 auto;
	transition:
		opacity var(--pg-gallery-motion-duration, 0.5s) var(--pg-gallery-motion-ease, ease-in-out),
		transform var(--pg-gallery-motion-duration, 0.5s) var(--pg-gallery-motion-ease, ease-in-out);
}

.project-gallery-work-details .project-gallery-work-line {
	color: rgba(255, 255, 255, 0.92);
}

.project-gallery-work-line {
	margin: 0;
	padding: 0;
	font-size: calc(var(--site-text-size) - 2pt);
	line-height: 1.28;
	color: var(--text);
}

.project-gallery-work-line + .project-gallery-work-line {
	margin-top: 0;
}

.project-gallery-work-value {
	display: block;
	min-width: 0;
	overflow-wrap: anywhere;
	word-break: break-word;
	white-space: pre-line;
}

.project-gallery-slide-columns {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.85rem 1.15rem;
	margin-top: 0.55rem;
	padding-top: 0.6rem;
	width: 100%;
	box-sizing: border-box;
}

.project-gallery-slide-columns[hidden] {
	display: none !important;
}

.project-gallery-slide-col {
	font-size: calc(var(--site-text-size) - 3pt);
	line-height: 1.38;
	color: rgba(255, 255, 255, 0.88);
	/* Honor Enter / newlines from gallery manager columns (normal collapses \n to a space). */
	white-space: pre-line;
	overflow-wrap: anywhere;
	word-break: break-word;
	min-width: 0;
	text-align: left;
}

@media (max-width: 720px) {
	.project-gallery-slide-columns {
		grid-template-columns: 1fr;
		gap: 0.75rem;
	}
}

.project-gallery-main-slide {
	width: 100%;
	height: 100%;
	min-height: 0;
	flex: 1 1 auto;
	max-height: 100%;
}

.project-gallery-slide-image {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: var(--pg-main-img-max-h, min(72dvh, 78vh, calc(100dvh - 10rem)));
	margin: 0;
	padding: 0;
	object-fit: contain;
	object-position: center center;
	background: transparent;
}

.project-gallery-tile {
	background: transparent;
	appearance: none;
	border: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
	cursor: default;
	transition: opacity 180ms ease;
}

.project-gallery-overlay.has-multiple-images .project-gallery-tile.project-gallery-main-slide {
	flex: 0 1 auto;
	height: auto;
	min-height: 0;
	max-height: none;
	overflow: visible;
	cursor: default;
}

.project-gallery-overlay.has-multiple-images .project-gallery-main-slide:focus-visible {
	outline: 2px solid var(--text, #111);
	outline-offset: 4px;
}

.project-gallery-tile img {
	display: block;
	width: auto;
	height: auto;
	background: transparent;
	max-width: min(94vw, calc(100vw - 2.5rem), 52rem);
	max-height: var(--pg-main-img-max-h, min(72dvh, 78vh, calc(100dvh - 9rem)));
	margin-bottom: 1.5rem;
	object-fit: contain;
	object-position: center center;
	outline: 0 solid transparent;
	outline-offset: 0;
}

/* Main slide: always cap with --pg-main-img-max-h (never height:100% / max-height:100% — breaks portrait when the slide frame gets wider). */
.project-gallery-main-slide.project-gallery-tile img.project-gallery-slide-image {
	max-width: 100%;
	max-height: var(--pg-main-img-max-h, min(72dvh, 78vh, calc(100dvh - 10rem)));
	width: auto;
	height: auto;
	margin-bottom: 0;
	object-fit: contain;
	object-position: center center;
}

.project-gallery-overlay.is-single-image .project-gallery-grid {
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: center;
	width: 100%;
	max-width: var(--project-gallery-column-max);
	margin-inline: auto;
	padding-bottom: 0.85rem;
	height: auto;
	max-height: none;
	overflow: visible;
}

.project-gallery-overlay.is-single-image .project-gallery-tile {
	width: auto;
	height: auto;
	background: transparent;
	border: 0;
	padding: 0;
}

.project-gallery-overlay.is-single-image .project-gallery-main-slide {
	width: auto;
	height: auto;
	flex: 0 1 auto;
}

.project-gallery-overlay.is-single-image .project-gallery-slide-frame {
	max-width: min(92vw, calc(100vw - 2.5rem), 52rem);
	max-height: var(--pg-main-img-max-h, min(72dvh, 78vh, calc(100dvh - 9rem), 100%));
}

.project-gallery-overlay.is-single-image .project-gallery-tile img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: var(--pg-main-img-max-h, min(72dvh, 78vh, calc(100dvh - 10rem)));
	margin-bottom: 0;
	object-fit: contain;
	object-position: center center;
}

.project-gallery-overlay.has-fullscreen .project-gallery-text {
	opacity: 0.12;
	pointer-events: none;
	filter: blur(6px);
	transition:
		opacity 260ms var(--pg-gallery-motion-ease, ease-in-out),
		filter 260ms var(--pg-gallery-motion-ease, ease-in-out);
}

.project-gallery-overlay.has-fullscreen .project-gallery-grid {
	opacity: 0.12;
	transform: scale(0.985);
	pointer-events: none;
	filter: blur(8px);
}

.project-gallery-overlay.is-single-image.has-fullscreen .project-gallery-grid {
	filter: blur(10px);
}

.project-gallery-viewer {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	background: transparent;
	z-index: 80;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 280ms cubic-bezier(0.22, 0.9, 0.3, 1);
}

.project-gallery-nav {
	background: transparent;
	border: 0;
	padding: 0.25rem;
	font: inherit;
	font-size: calc(var(--site-text-size) - 1pt);
	line-height: 1;
	color: var(--text);
	cursor: pointer;
	z-index: 1;
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	appearance: none;
	-webkit-appearance: none;
	box-shadow: none;
	outline: none;
	border-radius: 0;
	pointer-events: auto;
}

.project-gallery-overlay.is-open.has-multiple-images .project-gallery-nav {
	display: inline-flex;
}

.project-gallery-nav-thumb {
	display: block;
	width: auto;
	height: 10rem;
	max-width: 14rem;
	object-fit: contain;
	object-position: center;
	opacity: 0.45;
	transition: opacity 220ms var(--pg-gallery-motion-ease, ease-in-out);
}

.project-gallery-nav:hover .project-gallery-nav-thumb,
.project-gallery-nav:focus-visible .project-gallery-nav-thumb {
	opacity: 1;
}

.project-gallery-nav:focus,
.project-gallery-nav:focus-visible,
.project-gallery-nav:hover,
.project-gallery-nav:active {
	background: transparent;
	border: 0;
	box-shadow: none;
	outline: none;
}

.project-gallery-viewer img {
	display: block;
	width: auto;
	height: auto;
	max-width: min(92vw, 56rem);
	max-height: min(88dvh, 90vh, calc(100dvh - 3rem));
	object-fit: contain;
	object-position: center;
	transform: translate(0px, 0px) scale(1, 1);
	opacity: 1;
	transition: opacity 220ms ease;
	will-change: transform, opacity;
}

.project-gallery-viewer.is-switching img {
	opacity: 0;
}

.project-gallery-overlay.has-fullscreen .project-gallery-viewer {
	opacity: 1;
	pointer-events: auto;
}

@media (max-width: 820px) {
	.project-gallery-tile {
		min-height: 0;
	}

	.project-gallery-grid {
		height: auto;
		max-height: none;
	}

	.project-gallery-overlay.has-multiple-images .project-gallery-grid {
		height: auto;
		max-height: none;
	}

	/* Mobile thumb-row galleries: hide side previews; main image on top, thumbs directly below */
	.project-gallery-overlay.is-open.has-multiple-images:has(.project-gallery-stage--mobile-thumbs) .project-gallery-nav {
		display: none !important;
	}

	.project-gallery-overlay.is-open.has-multiple-images .project-gallery-slideshow:has(.project-gallery-stage--mobile-thumbs) {
		flex: 1 1 auto;
		min-height: 0;
		justify-content: center;
		align-items: stretch;
		width: 100%;
	}

	.project-gallery-overlay.is-open.has-multiple-images .project-gallery-stage--mobile-thumbs {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		flex: 0 1 auto;
		min-height: 0;
		width: 100%;
		max-width: 100%;
		gap: 0.55rem;
	}

	.project-gallery-overlay.is-open.has-multiple-images .project-gallery-stage--mobile-thumbs .project-gallery-stage__main {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		min-width: 0;
		flex: 0 1 auto;
		min-height: 0;
		order: 1;
	}

	.project-gallery-overlay.is-open.has-multiple-images:has(.project-gallery-stage--mobile-thumbs) .project-gallery-mobile-thumb-row-clip {
		order: 2;
		flex: 0 0 auto;
	}

	.project-gallery-overlay.is-open.has-multiple-images:has(.project-gallery-stage--mobile-thumbs) {
		--pg-mountain-thumb-row-h: min(3.75rem, 12vh);
	}

	#project-gallery-overlay.is-open.has-multiple-images:has(.project-gallery-stage--mobile-thumbs):has(#project-gallery-below-stage:not([hidden])) {
		--pg-main-img-max-h: max(
			8rem,
			calc(100dvh - 5.5rem - var(--pg-mountain-thumb-row-h, 3.75rem) - 7rem - 0.75rem)
		);
	}

	#project-gallery-overlay.is-open.has-multiple-images:has(.project-gallery-stage--mobile-thumbs) .project-gallery-main-slide.project-gallery-tile img.project-gallery-slide-image {
		max-width: 100%;
		max-height: var(--pg-main-img-max-h, min(72dvh, 78vh, calc(100dvh - 10rem)));
		width: auto;
		height: auto;
		object-fit: contain;
		object-position: center center;
	}

	/* Mobile thumb-row galleries — centered image, single thumb row, black strip */
	.project-gallery-overlay.is-mountain-gallery.is-open.has-multiple-images {
		--pg-mountain-thumb-row-h: min(3.75rem, 12vh);
	}

	#project-gallery-overlay.is-mountain-gallery.is-open.has-multiple-images:has(#project-gallery-below-stage:not([hidden])) {
		--pg-main-img-max-h: max(
			8rem,
			calc(100dvh - 5.5rem - var(--pg-mountain-thumb-row-h, 3.75rem) - 7rem - 0.75rem)
		);
	}

	.project-gallery-overlay.is-mountain-gallery.is-open {
		padding-bottom: 0;
		overflow-x: hidden;
	}

	.project-gallery-overlay.is-mountain-gallery.is-open .project-gallery-panel {
		flex: 1 1 auto;
		min-height: calc(100dvh - 5.5rem);
		height: calc(100dvh - 5.5rem);
		max-height: calc(100dvh - 5.5rem);
		padding-bottom: 0;
	}

	.project-gallery-overlay.is-mountain-gallery.is-open .project-gallery-body:has(#project-gallery-below-stage:not([hidden])) {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		flex: 1 1 auto;
		min-height: 100%;
		height: 100%;
		margin-top: 0.25rem;
		margin-bottom: 0;
		padding-bottom: 0;
	}

	.project-gallery-overlay.is-mountain-gallery.is-open.has-multiple-images .project-gallery-body {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}

	.project-gallery-overlay.is-mountain-gallery.is-open.has-multiple-images #project-gallery-grid {
		flex: 1 1 auto;
		min-height: 0;
		display: flex;
		flex-direction: column;
		align-self: stretch;
		width: 100%;
		max-width: none;
		padding-bottom: 0;
	}

	.project-gallery-overlay.is-mountain-gallery.is-open.has-multiple-images .project-gallery-slideshow {
		flex: 1 1 auto;
		min-height: 0;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		justify-content: center;
		width: 100%;
	}

	.project-gallery-overlay.is-mountain-gallery .project-gallery-stage--mobile-thumbs {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 0.55rem;
		width: 100%;
		max-width: 100%;
		flex: 0 1 auto;
		min-height: 0;
	}

	.project-gallery-overlay.is-mountain-gallery .project-gallery-stage--mobile-thumbs .project-gallery-stage__main {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		min-width: 0;
		flex: 0 1 auto;
		min-height: 0;
		order: 1;
	}

	.project-gallery-overlay.is-mountain-gallery .project-gallery-stage--mobile-thumbs .project-gallery-main-slide,
	.project-gallery-overlay.is-mountain-gallery .project-gallery-stage--mobile-thumbs .project-gallery-slide-frame {
		width: 100%;
		max-width: 100%;
	}

	.project-gallery-overlay.is-mountain-gallery.has-multiple-images .project-gallery-stage--mobile-thumbs .project-gallery-slide-frame {
		max-width: min(100%, calc(100vw - 2.5rem));
		max-height: var(--pg-main-img-max-h, min(72dvh, 78vh, calc(100dvh - 9rem), 100%));
		margin-bottom: 0;
		overflow: visible;
	}

	#project-gallery-overlay.is-mountain-gallery .project-gallery-main-slide.project-gallery-tile img.project-gallery-slide-image {
		max-width: 100%;
		max-height: var(--pg-main-img-max-h, min(72dvh, 78vh, calc(100dvh - 10rem)));
		width: auto;
		height: auto;
		object-fit: contain;
		object-position: center center;
	}

	.project-gallery-overlay.is-mountain-gallery.is-open.has-multiple-images .project-gallery-mobile-thumb-row-clip {
		position: relative;
		width: 100%;
		flex: 0 0 auto;
		flex-shrink: 0;
		order: 2;
		height: calc(var(--pg-mountain-thumb-row-h) + 0.7rem);
		max-height: calc(var(--pg-mountain-thumb-row-h) + 0.7rem);
		overflow: hidden;
		background: #fff;
	}

	.project-gallery-overlay.is-mountain-gallery.is-open.has-multiple-images .project-gallery-mobile-thumb-row-clip::before,
	.project-gallery-overlay.is-mountain-gallery.is-open.has-multiple-images .project-gallery-mobile-thumb-row-clip::after {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		width: min(2rem, 12vw);
		z-index: 2;
		pointer-events: none;
		opacity: 0;
		transition: opacity 220ms var(--pg-gallery-motion-ease, ease-in-out);
	}

	.project-gallery-overlay.is-mountain-gallery.is-open.has-multiple-images .project-gallery-mobile-thumb-row-clip::before {
		left: 0;
		background: linear-gradient(to right, #fff 0%, rgb(255 255 255 / 0.92) 35%, transparent 100%);
	}

	.project-gallery-overlay.is-mountain-gallery.is-open.has-multiple-images .project-gallery-mobile-thumb-row-clip::after {
		right: 0;
		background: linear-gradient(to left, #fff 0%, rgb(255 255 255 / 0.92) 35%, transparent 100%);
	}

	.project-gallery-overlay.is-mountain-gallery.is-open.has-multiple-images .project-gallery-mobile-thumb-row-clip.is-thumb-row-scrollable:not(.is-thumb-row-at-start)::before {
		opacity: 1;
	}

	.project-gallery-overlay.is-mountain-gallery.is-open.has-multiple-images .project-gallery-mobile-thumb-row-clip.is-thumb-row-scrollable:not(.is-thumb-row-at-end)::after {
		opacity: 1;
	}

	.project-gallery-overlay.is-mountain-gallery.is-open.has-multiple-images .project-gallery-mobile-thumb-row-clip:not(.is-thumb-row-scrollable) {
		display: flex;
		justify-content: center;
	}

	.project-gallery-overlay.is-mountain-gallery.is-open.has-multiple-images .project-gallery-mobile-thumb-row-clip:not(.is-thumb-row-scrollable) .project-gallery-mobile-thumb-row {
		justify-content: center;
		width: auto;
		max-width: 100%;
	}

	.project-gallery-overlay.is-mountain-gallery.is-open.has-multiple-images .project-gallery-mobile-thumb-row {
		display: flex !important;
		flex-flow: row nowrap !important;
		align-items: center;
		justify-content: flex-start;
		gap: 0.45rem;
		width: 100%;
		max-width: 100%;
		min-width: 0;
		height: var(--pg-mountain-thumb-row-h);
		max-height: var(--pg-mountain-thumb-row-h);
		flex: 0 0 auto;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
		scroll-snap-type: x proximity;
		touch-action: pan-x pan-y pinch-zoom;
		scrollbar-width: none;
		-ms-overflow-style: none;
		padding: 0 max(0.5rem, env(safe-area-inset-right, 0px)) 0
			max(0.5rem, env(safe-area-inset-left, 0px));
		box-sizing: border-box;
		background: #fff;
	}

	.project-gallery-overlay.is-mountain-gallery.is-open.has-multiple-images .project-gallery-mobile-thumb-row::-webkit-scrollbar {
		display: none;
	}

	.project-gallery-overlay.is-mountain-gallery .project-gallery-mobile-thumb-row .project-gallery-thumb {
		flex: 0 0 auto;
		flex-shrink: 0;
		display: block;
		height: var(--pg-mountain-thumb-row-h);
		max-height: var(--pg-mountain-thumb-row-h);
		overflow: hidden;
		scroll-snap-align: center;
		margin: 0;
		padding: 0;
		border: 0;
		background: transparent;
		cursor: pointer;
		line-height: 0;
		opacity: 0.42;
		transition: opacity 220ms var(--pg-gallery-motion-ease, ease-in-out);
		appearance: none;
		-webkit-appearance: none;
	}

	.project-gallery-overlay.is-mountain-gallery .project-gallery-body:has(#project-gallery-below-stage:not([hidden])) #project-gallery-grid {
		flex: 1 1 auto;
		min-height: 0;
	}

	.project-gallery-overlay.is-mountain-gallery .project-gallery-body:has(#project-gallery-below-stage:not([hidden])) .project-gallery-slideshow {
		flex: 1 1 auto;
		min-height: 0;
		align-items: stretch;
		justify-content: center;
	}

	.project-gallery-overlay.is-mountain-gallery .project-gallery-mobile-thumb-row .project-gallery-thumb.is-active,
	.project-gallery-overlay.is-mountain-gallery .project-gallery-mobile-thumb-row .project-gallery-thumb:hover,
	.project-gallery-overlay.is-mountain-gallery .project-gallery-mobile-thumb-row .project-gallery-thumb:focus-visible {
		opacity: 1;
	}

	.project-gallery-overlay.is-mountain-gallery .project-gallery-mobile-thumb-row .project-gallery-thumb:focus-visible {
		outline: 2px solid var(--text, #111);
		outline-offset: 3px;
	}

	.project-gallery-overlay.is-mountain-gallery .project-gallery-mobile-thumb-row .project-gallery-thumb__img {
		display: block;
		width: auto;
		height: 100%;
		max-width: min(4.5rem, 22vw);
		max-height: 100%;
		object-fit: contain;
		object-position: center center;
		pointer-events: none;
	}

	.project-gallery-overlay.is-mountain-gallery.is-open .project-gallery-body:has(#project-gallery-below-stage:not([hidden])) #project-gallery-below-stage {
		flex: 0 0 auto;
		flex-shrink: 0;
		margin-top: auto;
		margin-bottom: 0;
		position: sticky;
		bottom: 0;
		align-self: stretch;
		width: 100vw;
		max-width: none;
		margin-inline: calc((100% - 100vw) / 2);
		z-index: 4;
	}

	.project-gallery-overlay.is-mountain-gallery.is-open .project-gallery-body:has(#project-gallery-below-stage.is-below-expanded) #project-gallery-below-stage {
		flex: 1 1 auto;
		min-height: 0;
		max-height: min(72dvh, 52rem);
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.project-gallery-overlay.is-mountain-gallery.is-open:has(#project-gallery-below-stage.is-below-expanded) .project-gallery-panel {
		height: auto;
		max-height: 100dvh;
		min-height: calc(100dvh - 5.5rem);
	}

	.project-gallery-overlay.is-mountain-gallery.is-open:has(#project-gallery-below-stage.is-below-expanded) .project-gallery-body:has(#project-gallery-below-stage:not([hidden])) {
		height: auto;
		min-height: calc(100dvh - 5.5rem);
	}

	/* Mobile multi-image: hide side previews (thumb-row galleries use scrollable row instead) */
	.project-gallery-overlay.is-open.has-multiple-images .project-gallery-stage .project-gallery-nav {
		display: none !important;
	}

	.project-gallery-overlay.has-multiple-images {
		--pg-nav-slot: 0;
		--pg-main-slide-max-w: min(52rem, calc(100vw - 2.5rem));
	}

	.project-gallery-stage--swipeable {
		touch-action: pan-y pinch-zoom;
		-webkit-user-select: none;
		user-select: none;
	}

	.project-gallery-stage--swipeable:active {
		cursor: grabbing;
	}

	.project-gallery-stage--swipeable .project-gallery-slide-image,
	.project-gallery-stage--swipeable .project-gallery-thumb__img {
		-webkit-user-drag: none;
	}

	.project-gallery-viewer img {
		max-width: 90vw;
		max-height: min(86dvh, 88vh, calc(100dvh - 3rem));
	}
}

.wp-block-image img {
	display: block;
	height: auto;
	max-width: 100%;
}

.wp-block-button__link {
	background: var(--text);
	color: #fff;
	border-radius: 0;
	border: 0;
}

.wp-block-button__link:hover {
	background: transparent;
	color: var(--text);
}

@media (max-width: 700px) {
	.site-header .wrap {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 0.35rem;
	}

	.site-role {
		order: 1;
		width: 100%;
		text-align: left;
		white-space: normal;
		font-style: normal;
	}

	.site-work-link-cluster {
		order: 2;
		justify-self: start;
		white-space: normal;
	}

	.site-work-subtitle {
		order: 3;
	}


	.studio-grid {
		grid-template-columns: 1fr;
		column-gap: 0;
		row-gap: var(--studio-grid-gap);
	}

	.studio-grid .studio-column {
		padding-inline: 0;
	}

	.work-media-grid {
		grid-template-columns: 1fr;
	}

	.work-media-stage .summary-item-list.sqs-gallery-design-autogrid:not(.section-grid--projects),
	.work-media-stage .summary-item-list.sqs-gallery-design-autogrid.photography-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.work-media-stage .photography-grid:not(.section-grid--4col):not(.section-grid--5col) .summary-thumbnail-outer-container {
		min-height: 0;
		display: block;
	}

	.work-media-stage {
		--work-title-inset-3: 0;
		--work-title-inset-4: 0;
		/* padding-top is set by JS (syncHeaderHeight) from #top height — do not add a fixed clamp here
		   or the first section title will sit too low / fight the measured header on mobile */
	}

	/* Portrait image: flush to the bottom of the viewport on mobile */
	.landing-hero-portrait__frame {
		align-items: flex-end;
		justify-content: center;
	}

	.landing-hero-portrait__img {
		width: 100%;
		height: auto;
		max-width: 100%;
		max-height: 100%;
		object-fit: contain;
		object-position: center bottom;
	}

	.landing-hero-portrait__zone-wrap {
		width: 100%;
		max-height: calc(100dvh - var(--landing-header-offset));
	}

	/* In-column portrait: don’t inherit full-bleed mobile hero sizing */
	.site-main-studio-band .landing-hero-portrait--in-studio .landing-hero-portrait__frame {
		justify-content: flex-start;
	}
	.site-main-studio-band .landing-hero-portrait--in-studio .landing-hero-portrait__zone-wrap {
		max-height: min(42vh, 19rem);
		width: min(100%, 22rem);
	}

}

/* Touch / mobile: performance hints only — layout and appearance unchanged */
@media (hover: none), (pointer: coarse) {
	html {
		scroll-behavior: auto;
	}

	.studio-column p {
		will-change: auto;
	}

	.work-media-stage__scroll,
	.project-gallery-overlay,
	.project-video-overlay {
		touch-action: pan-y;
		overscroll-behavior-y: contain;
	}

	.summary-thumbnail-container,
	.work-detail-close,
	.project-gallery-nav-btn,
	.site-work-link {
		-webkit-tap-highlight-color: transparent;
	}
}

@media (max-width: 900px) and (min-width: 701px) {
	.studio-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.studio-column:first-child {
		grid-column: 1 / -1;
	}

	.studio-column--middle-left,
	.studio-column--middle-right,
	.studio-column:nth-child(4) {
		padding-inline-start: 0;
	}

	.studio-column:nth-child(4) {
		grid-column: 1 / -1;
		padding-inline-end: 0;
	}

	.work-media-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.work-media-stage .summary-item-list.sqs-gallery-design-autogrid:not(.section-grid--projects),
	.work-media-stage .summary-item-list.sqs-gallery-design-autogrid.photography-grid,
	.work-media-stage .summary-item-list.sqs-gallery-design-autogrid.section-grid--short-films {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.work-media-stage .summary-item-list.sqs-gallery-design-autogrid.section-grid--5col {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.work-media-stage .summary-item-list.sqs-gallery-design-autogrid.section-grid--4col {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.work-media-stage .photography-grid:not(.section-grid--4col):not(.section-grid--5col) > .summary-item:nth-child(2n + 1):nth-last-child(1) .summary-thumbnail-outer-container,
	.work-media-stage .photography-grid:not(.section-grid--4col):not(.section-grid--5col) > .summary-item:nth-child(2n + 2):nth-last-child(1) .summary-thumbnail-outer-container {
		min-height: 0;
		display: block;
	}

	.work-media-stage {
		--work-title-inset-3: 0;
		--work-title-inset-4: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-header .wrap,
	.studio-column {
		animation: none;
		opacity: 1;
		transform: none;
	}

	.site-role,
	.studio-column p,
	body,
	.site-header,
	.site-information-view,
	.site-information-view__brandoor,
	.site-information-view__panel,
	.work-media-stage {
		transition: none;
	}

	.work-media-stage .summary-thumbnail-image.lz-progressive-img {
		filter: none;
		transform: none;
		opacity: 1;
		transition: none;
	}

	body.work-media-active .site-information-view__panel--left,
	body.work-media-active .site-information-view__panel--right {
		transform: none;
	}

	body.work-media-active .site-information-view {
		visibility: hidden;
	}

	.studio-grid,
	.work-media-stage {
		transition: none;
	}

	.project-gallery-below-stage,
	.project-gallery-below-drawer-clip,
	.project-gallery-below-peek__icon,
	.project-gallery-slide-frame,
	.project-gallery-slide-image,
	.project-gallery-tile img,
	.project-gallery-grid,
	.project-gallery-below-image__inner,
	.project-gallery-work-details,
	.project-gallery-nav-thumb {
		transition: none;
	}

	.project-video-overlay.is-open,
	.project-video-overlay.is-open .work-detail-close,
	.project-video-embed,
	#project-video-wrap,
	.project-video-embed-poster {
		transition: none;
	}

}

html.spider-cursor-enabled,
html.spider-cursor-enabled body,
html.spider-cursor-enabled a,
html.spider-cursor-enabled button,
html.spider-cursor-enabled input,
html.spider-cursor-enabled select,
html.spider-cursor-enabled textarea {
	cursor: none !important;
}

.spider-cursor {
	position: fixed;
	left: 0;
	top: 0;
	width: 18px;
	height: 18px;
	transform: translate(-50%, -50%);
	pointer-events: none;
	z-index: 2147483647;
	opacity: 0;
	transition: opacity 80ms linear, transform 80ms linear;
	will-change: transform, left, top, opacity;
}

.spider-body {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 10px;
	height: 10px;
	background: #000;
	border-radius: 50%;
	transform: translate(-50%, -50%);
}

.spider-head {
	position: absolute;
	left: 50%;
	top: calc(50% - 6px);
	width: 6px;
	height: 6px;
	background: #000;
	border-radius: 50%;
	transform: translate(-50%, -50%);
}

.spider-legs {
	position: absolute;
	inset: 0;
}

.spider-leg {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 8px;
	height: 1.2px;
	background: #000;
	transform-origin: 0 50%;
	animation: spider-leg-idle 900ms ease-in-out infinite;
}

.spider-leg-1 {
	transform: translate(1px, -4px) rotate(-160deg);
}
.spider-leg-2 {
	transform: translate(1px, -2px) rotate(-140deg);
}
.spider-leg-3 {
	transform: translate(1px, 2px) rotate(-38deg);
}
.spider-leg-4 {
	transform: translate(1px, 4px) rotate(-18deg);
}
.spider-leg-5 {
	transform: translate(1px, -4px) rotate(-20deg) scaleX(-1);
}
.spider-leg-6 {
	transform: translate(1px, -2px) rotate(-40deg) scaleX(-1);
}
.spider-leg-7 {
	transform: translate(1px, 2px) rotate(-142deg) scaleX(-1);
}
.spider-leg-8 {
	transform: translate(1px, 4px) rotate(-162deg) scaleX(-1);
}

.spider-cursor.is-moving .spider-leg {
	animation-name: spider-leg-move;
	animation-duration: 260ms;
}

.spider-cursor.is-clicking {
	transform: translate(-50%, -50%) scale(0.92);
}

.hypnotic-spiral-overlay {
	position: fixed;
	inset: 0;
	background: #000;
	z-index: 2147483000;
	opacity: 0;
	pointer-events: none;
	transition: opacity 360ms ease;
}

.hypnotic-spiral-overlay.is-open {
	opacity: 1;
	pointer-events: auto;
}

.hypnotic-spiral-track {
	position: absolute;
	inset: 2.2rem;
	display: block;
	overflow: auto;
}

.hypnotic-spiral-track.is-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
	gap: 0.42rem;
	align-content: start;
}

.hypnotic-spiral-track.is-spiral {
	inset: auto;
	left: 50%;
	top: 50%;
	width: min(88vw, 72rem);
	height: min(88vh, 72rem);
	transform: translate(-50%, -50%);
	overflow: hidden;
	display: block;
}

.hypnotic-spiral-item {
	position: relative;
	left: auto;
	top: auto;
	transform-origin: center;
	transform: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 260ms ease;
	will-change: opacity;
	aspect-ratio: 1 / 1;
}

.hypnotic-spiral-item.is-visible {
	opacity: 1;
	visibility: visible;
}

.hypnotic-spiral-item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(1.08) contrast(1.05);
}

.hypnotic-spiral-track.is-spiral .hypnotic-spiral-item {
	position: absolute;
	left: 50%;
	top: 50%;
	transform-origin: 0 0;
	transform: translate(-50%, -50%);
	width: auto;
	height: auto;
	aspect-ratio: auto;
	animation: hypnotic-spiral-orbit var(--duration, 40s) linear infinite;
	animation-delay: var(--delay, 0s);
	will-change: transform, opacity;
}

.hypnotic-spiral-track.is-spiral .hypnotic-spiral-item img {
	width: var(--img-size, 42px);
	height: var(--img-size, 42px);
}

@keyframes hypnotic-spiral-orbit {
	0% {
		transform: translate(-50%, -50%) rotate(var(--angle)) translateX(var(--radius-start)) translateY(calc(var(--wobble, 0px) * -0.9));
		opacity: 0.92;
	}
	36% {
		transform: translate(-50%, -50%) rotate(calc(var(--angle) - (var(--turns, 1200deg) * 0.34))) translateX(calc((var(--radius-start) * 0.65))) translateY(var(--wobble, 0px));
		opacity: 0.78;
	}
	72% {
		transform: translate(-50%, -50%) rotate(calc(var(--angle) - (var(--turns, 1200deg) * 0.72))) translateX(calc((var(--radius-start) * 0.34))) translateY(calc(var(--wobble, 0px) * -0.55));
		opacity: 0.48;
	}
	100% {
		transform: translate(-50%, -50%) rotate(calc(var(--angle) - var(--turns, 1200deg))) translateX(var(--radius-end)) translateY(0px);
		opacity: 0;
	}
}

@keyframes spider-leg-idle {
	0%,
	100% {
		filter: none;
	}
	50% {
		filter: brightness(0.92);
	}
}

@keyframes spider-leg-move {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.82;
	}
}

/* Fullscreen film-style credits (F inside a project) */
.project-credits-fullscreen {
	position: fixed;
	inset: 0;
	z-index: 520;
	background: #000;
	color: rgba(255, 255, 255, 0.92);
	display: none;
	flex-direction: column;
	align-items: stretch;
	justify-content: stretch;
	opacity: 0;
	pointer-events: none;
	transition: opacity 320ms cubic-bezier(0.22, 0.9, 0.3, 1);
}

.project-credits-fullscreen.is-open {
	display: flex;
	opacity: 1;
	pointer-events: auto;
}

.project-credits-fullscreen__viewport {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: max(2.5rem, env(safe-area-inset-top, 0px)) max(1.25rem, env(safe-area-inset-right, 0px)) max(2.5rem, env(safe-area-inset-bottom, 0px)) max(1.25rem, env(safe-area-inset-left, 0px));
	box-sizing: border-box;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.project-credits-fullscreen__track {
	width: min(34rem, 88vw);
	max-height: 100%;
	box-sizing: border-box;
}

.project-credits-fullscreen.is-card-mode .project-credits-fullscreen__track {
	display: block;
}

.project-credits-fullscreen.is-scroll-mode .project-credits-fullscreen__track {
	animation: project-credits-scroll-up var(--project-credits-scroll-duration, 48s) linear forwards;
	will-change: transform;
}

.project-credits-fullscreen__block {
	text-align: center;
	white-space: pre-line;
	font-size: calc(var(--site-text-size) - 2pt);
	line-height: 1.55;
	letter-spacing: 0.02em;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.project-credits-fullscreen.is-card-mode .project-credits-fullscreen__block {
	display: none;
	padding: 0.35rem 0;
}

.project-credits-fullscreen.is-card-mode .project-credits-fullscreen__block.is-active {
	display: block;
	animation: project-credits-card-in 720ms cubic-bezier(0.22, 0.9, 0.3, 1) both;
}

.project-credits-fullscreen.is-scroll-mode .project-credits-fullscreen__block + .project-credits-fullscreen__block {
	margin-top: 3.5rem;
}

.project-credits-fullscreen__close {
	position: fixed;
	top: calc(1.25rem + 0.08rem);
	right: var(--page-edge-inset, 1rem);
	z-index: 2;
	background: transparent;
	border: 0;
	padding: 0;
	font: inherit;
	font-size: var(--site-text-size);
	line-height: 1;
	color: rgba(255, 255, 255, 0.72);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.project-credits-fullscreen__close:hover,
.project-credits-fullscreen__close:focus-visible {
	color: #fff;
}

.project-credits-fullscreen__hint {
	position: fixed;
	left: var(--page-edge-inset, 1rem);
	bottom: max(1rem, env(safe-area-inset-bottom, 0px));
	margin: 0;
	font-size: calc(var(--site-text-size) - 4pt);
	line-height: 1.3;
	color: rgba(255, 255, 255, 0.38);
	pointer-events: none;
}

@keyframes project-credits-card-in {
	from {
		opacity: 0;
		transform: translateY(0.65rem);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes project-credits-scroll-up {
	from {
		transform: translateY(38vh);
	}
	to {
		transform: translateY(calc(-100% + 38vh));
	}
}

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

	.project-credits-fullscreen.is-scroll-mode .project-credits-fullscreen__track {
		animation: none;
		transform: none;
	}

	.project-credits-fullscreen.is-card-mode .project-credits-fullscreen__block.is-active {
		animation: none;
	}
}