/* Theme variables */
:root {
	--sidebar-bg: #f7f6f1;
	--content-bg: #fafaf8;
	--bg: var(--sidebar-bg);
	--text: #1a1a1a;
	--text-light: #666666;
	--accent: #1a1a1a;
	--divider-color: rgba(0, 0, 0, 0.08);
	--border-low: rgba(0, 0, 0, 0.08);
	--border-low-dark: rgba(255, 255, 255, 0.12);
	--transition-fast: 180ms;
	--transition-slow: 360ms;
	--theme-fade: 200ms;
	--project-fade: 260ms;
	--transition-dip: rgba(255, 255, 255, 1);
	--sidebar-w: 270px;
	--content-max: 960px;
	--gutter: 12px;
	--gutter-lg: 20px;
	--gutter-xl: 32px;
	--gutter-xxl: 48px;
	--media-offset: 3rem;
}

.theme-dark {
	--sidebar-bg: #181818;
	--content-bg: #2a2a20;
	--bg: var(--sidebar-bg);
	--text: #e8e8e8;
	--text-light: #999999;
	--accent: #e8e8e8;
	--divider-color: rgba(255, 255, 255, 0.08);
	--border-low: rgba(255, 255, 255, 0.1);
	--transition-dip: rgba(0, 0, 0, 1);
}

.theme-dark .site-nav::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: 
		linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05)),
		url("../assets/images/texture/texturebg1.png");
	background-repeat: no-repeat, repeat-y;
	background-size: 100%, calc(100vw - var(--sidebar-w)) auto;
	background-attachment: local, local;
	background-position: 0 0, 0 0;
	filter: invert(1);
	pointer-events: none;
	z-index: 0;
}

.theme-dark .site-nav {
	position: relative;
	background-image: none;
}

.theme-dark .site-nav > * {
	position: relative;
	z-index: 1;
}

.theme-dark .content {
	background-image: url("../assets/images/texture/texturebg1.png");
	background-repeat: repeat-y;
	background-size: 100% auto;
	background-attachment: local;
	background-position: 0 0;
	filter: invert(1);
}

.theme-dark .content > * {
	filter: invert(1);
	position: relative;
}

/* Base */
html,
body {
	background-color: var(--bg);
	color: var(--text);
}

body {
	font-family: "Satoshi", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 16.8px;
	line-height: 1.6;
	transition: background-color var(--theme-fade) ease, color var(--theme-fade) ease;
	display: grid;
	grid-template-columns: var(--sidebar-w) 1fr;
	height: 100vh;
	overflow: hidden;
	overflow-x: hidden;
	width: 100vw;
	max-width: 100vw;
}

/* Theme toggle */
.theme-toggle-fixed {
	position: fixed;
	top: 16px;
	right: 16px;
	z-index: 1000;
	border: none;
	background: transparent;
	color: #ffffff;
	padding: 0;
	font-size: 13.2px;
	font-family: var(--font-sans);
	font-weight: 400;
	letter-spacing: 0.01em;
	text-transform: lowercase;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: opacity var(--transition-fast) ease;
	cursor: pointer;
	text-shadow: none;
	mix-blend-mode: difference;
}
.theme-toggle-fixed:hover {
	opacity: 0.7;
}
.site-nav__inner {
	background: transparent;
}

/* Mobile menu toggle button (copied from fremobileworks) */
.mobile-menu-toggle {
	display: none;
	position: fixed;
	top: 16px;
	right: 16px;
	z-index: 1001;
	width: 32px;
	height: 32px;
	padding: 0;
	background: transparent;
	border: none;
	cursor: pointer;
	flex-direction: column;
	justify-content: space-between;
	gap: 6px;
	transition: opacity var(--transition-fast) ease;
	mix-blend-mode: difference;
	align-items: center;
}

.mobile-menu-toggle__line {
	display: block;
	width: 100%;
	height: 2px;
	background: #ffffff;
	transition: transform var(--transition-fast) ease, opacity var(--transition-fast) ease;
	transform-origin: center;
	border-radius: 1px;
}

.theme-dark .mobile-menu-toggle {
	mix-blend-mode: normal;
}

.theme-dark .mobile-menu-toggle__line {
	background: var(--text);
}

body.mobile-menu-open .mobile-menu-toggle__line:nth-child(1) {
	transform: translateY(8px) rotate(45deg);
}

body.mobile-menu-open .mobile-menu-toggle__line:nth-child(2) {
	opacity: 0;
	transform: scaleX(0);
}

body.mobile-menu-open .mobile-menu-toggle__line:nth-child(3) {
	transform: translateY(-8px) rotate(-45deg);
}

/* Mobile nav overlay backdrop */
.mobile-nav-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	z-index: 99;
	opacity: 0;
	transition: opacity var(--transition-fast) ease;
	pointer-events: none;
	will-change: opacity;
}

body.mobile-menu-open .mobile-nav-overlay {
	opacity: 1;
	pointer-events: auto;
}
/* Ensure navbar always stays above hero images */
.project__hero {
	z-index: 1 !important;
	position: relative;
}
/* Sidebar overlay mode */
body.sidebar-overlay-active {
	grid-template-columns: 1fr;
	position: relative;
}
body.sidebar-overlay-active .site-nav {
	position: fixed;
	left: 0;
	top: 0;
	width: var(--sidebar-w);
	height: 100vh;
	background: transparent !important;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	z-index: 100;
	border-right: none !important;
	transition: border-color var(--theme-fade) ease;
}
/* Overlay mode: make entire page background same as project page */
body.sidebar-overlay-active {
	background-color: var(--content-bg);
}
body.sidebar-overlay-active .site-nav {
	background: transparent !important;
}
/* Sidebar text inversion in overlay mode - apply to entire navbar and all its content */
body.sidebar-overlay-active .site-nav,
body.sidebar-overlay-active .site-nav * {
	mix-blend-mode: difference !important;
	color: #ffffff !important;
}
/* Ensure buttons and links maintain their functionality */
body.sidebar-overlay-active .site-nav button,
body.sidebar-overlay-active .site-nav a {
	cursor: pointer;
}
body.sidebar-overlay-active .content {
	position: absolute;
	width: 90vw;
	max-width: 90vw;
	right: 0;
	left: auto;
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
}
body.sidebar-overlay-active .project__body {
	padding-left: 80px;
	padding-right: 80px;
}
body.sidebar-overlay-active .project__process {
	padding-left: 80px;
	padding-right: 80px;
}
body.sidebar-overlay-active #project-transition-overlay {
	left: auto;
	right: 0;
	width: 90vw;
}
body.sidebar-overlay-active .process-toggle {
	left: 55vw;
	transform: translateX(-50%);
}
/* Parallelogram mask effect - alternating left and right with same angle (8%) */
/* Exclude hero images from parallelogram effect */
body.parallelogram-active .exhibition-cell.image img,
body.parallelogram-active .exhibition-cell.image video,
body.parallelogram-active .exhibition-cell.image figure,
body.parallelogram-active .about-image img {
	transition: clip-path 0.3s ease;
}
/* Right-leaning parallelograms (default) */
body.parallelogram-active .exhibition-cell.image:nth-child(odd) img,
body.parallelogram-active .exhibition-cell.image:nth-child(odd) video,
body.parallelogram-active .exhibition-cell.image:nth-child(odd) figure,
body.parallelogram-active .exhibition-row:nth-child(odd) .exhibition-cell.image img,
body.parallelogram-active .exhibition-row:nth-child(odd) .exhibition-cell.image video,
body.parallelogram-active .exhibition-row:nth-child(odd) .exhibition-cell.image figure {
	clip-path: polygon(3% 0%, 100% 0%, 97% 100%, 0% 100%);
}
/* Left-leaning parallelograms (alternating) */
body.parallelogram-active .exhibition-cell.image:nth-child(even) img,
body.parallelogram-active .exhibition-cell.image:nth-child(even) video,
body.parallelogram-active .exhibition-cell.image:nth-child(even) figure,
body.parallelogram-active .exhibition-row:nth-child(even) .exhibition-cell.image img,
body.parallelogram-active .exhibition-row:nth-child(even) .exhibition-cell.image video,
body.parallelogram-active .exhibition-row:nth-child(even) .exhibition-cell.image figure {
	clip-path: polygon(0% 0%, 97% 0%, 100% 100%, 3% 100%);
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.skip-link:focus {
	left: var(--gutter);
	top: var(--gutter);
	width: auto;
	height: auto;
	background: var(--bg);
	color: var(--text);
	padding: 6px 10px;
	border: 1px solid var(--border-low);
}

/* Layout */
.site-nav {
	position: sticky;
	top: 0;
	height: 100vh;
	background-color: var(--sidebar-bg);
	background-image: 
		linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)),
		url("../assets/images/texture/texturebg1.png");
	background-repeat: no-repeat, repeat-y;
	background-size: 100%, calc(100vw - var(--sidebar-w)) auto;
	background-attachment: local, local;
	background-position: 0 0, 0 0;
	border-right: none;
	transition: background-color var(--theme-fade) ease, border-color var(--theme-fade) ease;
	z-index: 100;
	pointer-events: none;
	box-shadow: 1px 0 3px rgba(0, 0, 0, 0.03);
	overflow: hidden;
	width: var(--sidebar-w);
	isolation: isolate;
}
.site-nav * {
	pointer-events: auto;
}
.site-nav__inner {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 24px 20px;
	height: 100%;
	overflow-y: auto;
	scrollbar-width: thin;
	position: relative;
}
.site-nav__inner > * {
	flex-shrink: 0;
}
.site-title {
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: 14.4px;
	text-decoration: none;
	color: var(--text);
	letter-spacing: 0.01em;
	padding: 0;
	margin-bottom: 0;
	text-align: left;
	transition: color var(--theme-fade) ease;
	display: block;
	line-height: 1.3;
}
.site-title:hover {
	opacity: 0.7;
}

.nav-spacer {
	height: 24px;
}

.nav-work-wrapper {
	position: relative;
	margin-bottom: 0;
	display: block;
	min-height: auto;
}

.nav-work,
.nav-contact {
	font-family: var(--font-sans);
	font-size: 14.4px;
	font-weight: 400;
	color: var(--text);
	text-decoration: none;
	padding: 4px 0;
	line-height: 1.4;
	transition: opacity var(--transition-fast) ease, color var(--transition-fast) ease;
	display: block;
	margin: 0;
}
.nav-work:hover,
.nav-contact:hover {
	opacity: 0.7;
}

.project-nav {
	display: flex;
	flex-direction: column;
	max-height: 0;
	overflow: hidden;
	transition: max-height var(--transition-slow) ease, opacity var(--transition-slow) ease;
	opacity: 0;
	margin: 0;
	padding: 0;
	width: 100%;
}
.nav-work-wrapper:hover .project-nav,
.project-nav:hover {
	max-height: 800px;
	opacity: 1;
	padding-top: 4px;
}
body.landing-active .project-nav {
	max-height: 800px;
	opacity: 1;
	padding-top: 0;
}
body.landing-active .nav-work-wrapper:hover .project-nav,
body.landing-active .project-nav:hover {
	padding-top: 0;
}
.project-nav ul {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-top: 0;
	flex: 1 1 auto;
}
.nav-label {
	font-family: var(--font-sans);
	font-size: 13.2px;
	font-weight: 500;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	letter-spacing: 0.01em;
	color: var(--text);
	margin-top: 20px;
	margin-bottom: 8px;
}
.nav-label:first-child {
	margin-top: 0;
}
.project-nav .nav-label a {
	font-family: var(--font-sans);
	font-size: 13.2px;
	font-weight: 500;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	letter-spacing: 0.01em;
	color: var(--text);
	padding: 0;
}
.project-nav .nav-label a:hover {
	opacity: 0.7;
}
.project-nav .nav-label a.active {
	opacity: 1;
	font-weight: 600;
}
.nav-contact.active,
.nav-work.active {
	opacity: 1;
	font-weight: 600;
}
.push-bottom {
	margin-top: auto;
}

.nav-about-text {
	font-family: var(--font-sans);
	font-size: 11.52px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--text);
	padding-top: 29px;
	flex-shrink: 0;
	position: absolute;
	bottom: 5px;
	left: 20px;
	right: 20px;
	z-index: 20;
}
.nav-about-text p {
	margin-bottom: 0.4rem;
}
.nav-about-text p:last-child {
	margin-bottom: 0;
}
.project-nav a {
	font-family: var(--font-sans);
	font-size: 13.2px;
	font-weight: 400;
	color: var(--text);
	text-decoration: none;
	padding: 2px 0;
	line-height: 1.15;
	position: relative;
	transition: opacity var(--transition-fast) ease, color var(--transition-fast) ease;
}
.project-nav a:hover {
	opacity: 0.7;
}
.project-nav a.active {
	color: var(--text);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-style: dotted;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}
.project-nav a.active::before {
	display: none;
}

.content {
	min-height: 100vh;
	height: 100vh;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 0;
	background-color: var(--content-bg);
	background-image: url("../assets/images/texture/texturebg1.png");
	background-repeat: repeat-y;
	background-size: 100% auto;
	background-attachment: local;
	background-position: 0 0;
	transition: background-color var(--theme-fade) ease, color var(--theme-fade) ease;
	width: calc(100vw - var(--sidebar-w));
	position: relative;
	margin-left: 0;
}
.content::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
	z-index: 0;
}
.content > * {
	position: relative;
	z-index: 1;
}

/* Content wrapper for max-width and padding */
.content > .project {
	padding: 0;
	max-width: none;
	margin: 0;
	width: 100%;
}

/* Transition overlay */
#project-transition-overlay {
	position: fixed;
	top: 0;
	left: var(--sidebar-w);
	width: calc(100% - var(--sidebar-w));
	height: 100vh;
	background: var(--transition-dip);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--project-fade) ease;
	z-index: 200;
}
#project-transition-overlay.is-active {
	opacity: 1;
}

/* Project sections */
.project {
	display: none;
	opacity: 0;
	transition: opacity var(--project-fade) ease;
}
.project.is-preparing,
.project.is-active,
.project.is-hiding {
	display: block;
}
.project.is-active {
	opacity: 1;
}
.project.is-hiding {
	opacity: 0;
}

.project__title {
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: 13.2px;
	text-decoration: none;
	letter-spacing: 0.01em;
	line-height: 1.4;
	margin: 0;
	color: #ffffff;
	position: absolute;
	bottom: 10px;
	left: 32px;
	z-index: 10;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8), 0 0 2px rgba(0, 0, 0, 0.8);
}
.project__title .name-mono {
	font-family: var(--font-mono);
	font-weight: 700;
	font-size: 24px;
}

/* Landing preview */
.landing-preview__hero {
	margin: 0 0 48px 0;
	position: relative;
	width: 100%;
	z-index: 1;
}

.landing-preview__media {
	width: 100%;
	position: relative;
	display: block;
	background: transparent;
}

.landing-preview__media img {
	width: 100%;
	object-fit: contain;
	height: auto;
	max-height: 80vh;
	display: block;
	background: transparent;
}

.landing-preview__media video {
	width: 100%;
	object-fit: contain;
	height: auto;
	max-height: 80vh;
	display: block;
	background: #000;
}

.landing-preview__title {
	position: absolute;
	bottom: 10px;
	left: 32px;
	z-index: 10;
}

.landing-preview__controls {
	position: absolute;
	bottom: 10px;
	right: 10px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	z-index: 10;
}

.landing-nav--next {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
}

.landing-preview__see-more-wrapper {
	position: absolute;
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10;
}

.landing-nav {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 14.4px;
	font-family: var(--font-sans);
	letter-spacing: 0.02em;
	text-transform: lowercase;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
	cursor: pointer;
	transition: opacity var(--transition-fast) ease, background var(--transition-fast) ease;
}

.landing-nav:hover {
	opacity: 0.9;
	background: rgba(0, 0, 0, 0.7);
}

.theme-dark .landing-nav {
	border-color: rgba(255, 255, 255, 0.3);
	background: rgba(10, 10, 10, 0.7);
}

.landing-see-more {
	display: inline-block;
	border: none;
	background: transparent;
	color: #ffffff;
	padding: 0;
	font-size: 13.2px;
	font-family: var(--font-sans);
	font-weight: 400;
	letter-spacing: 0.01em;
	text-transform: lowercase;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	cursor: pointer;
	transition: opacity var(--transition-fast) ease;
	mix-blend-mode: difference;
	text-shadow: none;
}
.landing-see-more:hover {
	opacity: 0.7;
}

.landing-unmute-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 14.4px;
	font-family: var(--font-sans);
	letter-spacing: 0.02em;
	text-transform: lowercase;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
	cursor: pointer;
	transition: opacity var(--transition-fast) ease, background var(--transition-fast) ease;
	position: absolute;
	bottom: 10px;
	right: 10px;
	z-index: 10;
}

.landing-nav {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 14.4px;
	font-family: var(--font-sans);
	letter-spacing: 0.02em;
	text-transform: lowercase;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
	cursor: pointer;
	transition: opacity var(--transition-fast) ease, background var(--transition-fast) ease;
}

.landing-unmute-btn:hover {
	opacity: 0.9;
	background: rgba(0, 0, 0, 0.7);
}

.theme-dark .landing-unmute-btn {
	border-color: rgba(255, 255, 255, 0.3);
	background: rgba(10, 10, 10, 0.7);
}

.project__hero {
	margin: 0 0 48px 0;
	position: relative;
	width: 100%;
	z-index: 1;
}
/* Ensure hero never obstructs navbar - navbar always on top */
.site-nav {
	z-index: 100;
}
.project__hero img {
	width: 100%;
	height: auto;
	max-height: 80vh;
	object-fit: contain;
	object-position: center;
	display: block;
}
/* Override aspect ratio for pos weekender hero image */
#pos-weekender .project__hero img {
	aspect-ratio: auto;
	height: auto;
	object-fit: contain;
}
.project__hero.hero-dual {
	display: flex;
	gap: 0;
	position: relative;
	align-items: stretch;
}
.project__hero.hero-dual img:first-child {
	width: auto;
	flex: 0 0 auto;
	height: auto;
	max-height: 80vh;
	object-fit: contain;
	object-position: left top;
	aspect-ratio: auto;
	display: block;
	align-self: flex-start;
}
.project__hero.hero-dual img:last-child {
	flex: 1 1 auto;
	width: 0;
	min-width: 0;
	height: auto;
	max-height: 80vh;
	object-fit: contain;
	object-position: center;
	aspect-ratio: auto;
}
.project__hero.hero-dual .project__title {
	position: absolute;
	bottom: 10px;
	left: 32px;
	z-index: 10;
}
.hero-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	gap: var(--gutter-lg);
}
.hero-video {
	width: 100%;
	object-fit: contain;
	height: auto;
	max-height: 80vh;
	background: #000;
}
.video-controls {
	position: absolute;
	bottom: 10px;
	right: 10px;
	z-index: 10;
	display: flex;
	align-items: center;
}
.unmute-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 14.4px;
	letter-spacing: 0.02em;
	text-transform: lowercase;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
	font-family: var(--font-sans);
}
.theme-dark .unmute-btn {
	border-color: rgba(255, 255, 255, 0.3);
	background: rgba(10, 10, 10, 0.7);
}

.project__body {
	display: block;
	padding: 0 80px 80px 80px;
}
.about-page {
	display: flex;
	align-items: flex-start;
	gap: 48px;
	padding: 40px 80px 40px 80px;
	max-height: calc(100vh - 80px);
	overflow-y: auto;
	position: relative;
}

.contact-page {
	display: flex;
	align-items: flex-start;
	gap: 48px;
	padding: 40px 80px 40px 80px;
	max-height: calc(100vh - 80px);
	overflow-y: auto;
	position: relative;
}

.contact-image {
	flex-shrink: 0;
	width: 330px;
	height: 330px;
	overflow: visible;
	display: flex;
	align-items: center;
	justify-content: center;
}

.contact-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	transform: rotate(-90deg);
	transform-origin: center center;
}

.contact-info {
	font-family: var(--font-sans);
	font-size: 14.4px;
	font-weight: 400;
	line-height: 1.6;
}

.contact-info p {
	margin-bottom: 0.8rem;
}

.contact-info a {
	color: var(--text);
	text-decoration: none;
}

.contact-info a:hover {
	opacity: 0.7;
}
.about-image {
	flex-shrink: 0;
	width: 330px;
	height: 330px;
	overflow: visible;
	display: flex;
	align-items: center;
	justify-content: center;
}
.about-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	transform: rotate(-90deg);
	transform-origin: center center;
}
.about-content {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
	position: relative;
}
.about-text {
	font-size: 11.52px;
	font-weight: 600;
	line-height: 1.5;
	max-width: 45ch;
}
.about-text p {
	margin-bottom: 1.2rem;
}
.about-contact {
	position: fixed;
	bottom: 40px;
	right: 80px;
	text-align: right;
	font-size: 13.2px;
	font-weight: 500;
	line-height: 1.6;
	z-index: 10;
}
.about-contact p {
	margin-bottom: 0.4rem;
}
.about-content .project__title {
	margin: 0 0 12px 0;
	position: static;
	color: var(--text);
	background: transparent;
	padding: 0;
	border-radius: 0;
	text-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}
.about-content .exhibition-section {
	gap: 20px;
}
.about-content .exhibition-row {
	gap: 24px;
}
.about-content .exhibition-cell.text {
	max-width: none;
	font-size: 10.56px;
	line-height: 1.4;
}
.about-content .exhibition-cell.text p {
	margin-bottom: 0.8rem;
}
.exhibition-section {
	display: grid;
	gap: calc(var(--gutter-xxl) * 2);
	/* Use gap to create spacing between rows - doubled from 48px to 96px */
	margin: 0;
	padding: 0;
}
/* Ensure main body sections don't have extra spacing */
.project__body .exhibition-section {
	gap: calc(var(--gutter-xxl) * 2);
	margin: 0;
	padding: 0;
}
.exhibition-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--gutter-xl);
	align-items: start;
	position: relative;
	/* No padding or margin - gap handles spacing */
	margin: 0;
	padding: 0;
}
/* Bars between rows - positioned at the exact middle of the gap */
.exhibition-row:not(:last-child)::after {
	content: "";
	position: absolute;
	bottom: calc(-1 * var(--gutter-xxl));
	left: 0;
	right: 0;
	height: 1px;
	background: var(--divider-color);
	/* Position bar in the middle of the 96px gap:
	   Row 1 content ends -> 48px (half gap) -> bar -> 48px (half gap) -> Row 2 content starts
	   This ensures equal 48px spacing above and below the bar */
}
/* Completely remove bar on last row of last section in main body (before process) */
.project__body .exhibition-section:last-child .exhibition-row:last-child::after {
	content: none !important;
	display: none !important;
	height: 0 !important;
	background: transparent !important;
}
/* Show bar on last row only when process is open */
.project__body.process-open .exhibition-section:last-child .exhibition-row:last-child::after {
	content: "" !important;
	position: absolute;
	bottom: calc(-1 * var(--gutter-xxl));
	left: 0;
	right: 0;
	height: 1px;
	background: var(--divider-color);
	display: block !important;
	/* Ensure bar has proper spacing from content above */
}
.exhibition-cell {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	/* Ensure no margins affect bar spacing */
	margin: 0;
	padding: 0;
	/* Ensure content stays within cell boundaries and doesn't extend into gap */
	overflow: visible;
	/* Prevent content from extending beyond cell */
	min-height: 0;
}
/* Ensure content inside cells doesn't add extra spacing that would touch the bar */
.exhibition-cell > * {
	margin-top: 0;
	margin-bottom: 0;
}
.exhibition-cell figure {
	margin: 0;
	padding: 0;
	/* Ensure figure doesn't extend beyond cell */
	overflow: visible;
}
.exhibition-cell figure img,
.exhibition-cell figure video {
	margin: 0;
	padding: 0;
	display: block;
	/* Ensure images/videos don't extend beyond their container */
	max-width: 100%;
	max-height: 80vh;
}
.exhibition-cell.text {
	max-width: 55ch;
	font-family: var(--font-sans);
	font-size: 11.52px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--text);
}
.exhibition-cell.text p {
	margin: 0;
}
.exhibition-cell.image {
	display: flex;
	justify-content: flex-end;
	align-items: flex-start;
	/* Ensure images maintain proper orientation */
	transform: none;
}
.exhibition-row > .exhibition-cell.image:nth-child(2) {
	max-width: 55ch;
	margin-left: auto;
	justify-content: flex-end;
}
.exhibition-cell.image figure {
	margin: 0 !important;
	padding: 0;
	width: 100%;
	display: flex;
	justify-content: flex-end;
}
.exhibition-cell.image figure .media {
	margin: 0 !important;
	padding: 0;
}
.exhibition-row > .exhibition-cell.image:nth-child(2) figure {
	width: 100%;
	justify-content: flex-end;
}
.exhibition-cell.image img, .exhibition-cell.image video {
	width: 85%;
	height: auto;
	max-height: 80vh;
	display: block;
	margin: 0 auto !important;
	padding: 0;
	/* Ensure images maintain proper orientation - ignore EXIF rotation */
	image-orientation: none;
	transform: none !important;
	object-fit: contain;
	/* Prevent any rotation */
	writing-mode: horizontal-tb;
	direction: ltr;
}
/* Full-width video variations - 80% width, left or right aligned */
.exhibition-row.video-full-left {
	grid-template-columns: 1fr;
}
.exhibition-row.video-full-left .exhibition-cell.image {
	width: 80%;
	max-width: 80%;
	margin-left: 0;
	margin-right: auto;
	justify-content: flex-start;
	align-self: flex-start;
}
.exhibition-row.video-full-left .exhibition-cell.image figure {
	width: 100%;
	justify-content: flex-start;
}
.exhibition-row.video-full-left .exhibition-cell.image img,
.exhibition-row.video-full-left .exhibition-cell.image video {
	width: 100%;
	margin: 0 !important;
	margin-left: 0 !important;
	margin-right: auto !important;
}
.exhibition-row.video-full-right {
	grid-template-columns: 1fr;
}
.exhibition-row.video-full-right .exhibition-cell.image {
	width: 80%;
	max-width: 80%;
	margin-left: auto;
	margin-right: 0;
	justify-content: flex-end;
	align-self: flex-end;
}
.exhibition-row.video-full-right .exhibition-cell.image figure {
	width: 100%;
	justify-content: flex-end;
}
.exhibition-row.video-full-right .exhibition-cell.image img,
.exhibition-row.video-full-right .exhibition-cell.image video {
	width: 100%;
	margin: 0 !important;
	margin-left: auto !important;
	margin-right: 0 !important;
}
/* Coexist specific overrides - must come after general rules */
#coexist .project__body .exhibition-row:nth-child(3).video-full-right .exhibition-cell.image video {
	width: 120% !important;
	margin: 0 !important;
	margin-left: auto !important;
	margin-right: 0 !important;
}
#coexist .project__body .exhibition-row:nth-child(4).video-full-left .exhibition-cell.image img {
	width: 60% !important;
	margin: 0 !important;
	margin-left: 0 !important;
	margin-right: auto !important;
}
/* Tussen-tompouce specific: hero image left-aligned */
#tussen-tompouce .project__hero.hero-row {
	display: flex;
	justify-content: flex-start;
}
#tussen-tompouce .project__hero img {
	margin-left: 0 !important;
	margin-right: auto !important;
}
/* Tussen-tompouce specific: images much smaller and alternating left/right */
#tussen-tompouce .project__body .exhibition-row.video-full-left .exhibition-cell.image img {
	width: 40% !important;
	margin: 0 !important;
	margin-left: 0 !important;
	margin-right: auto !important;
}
#tussen-tompouce .project__body .exhibition-row.video-full-right .exhibition-cell.image img {
	width: 40% !important;
	margin: 0 !important;
	margin-left: auto !important;
	margin-right: 0 !important;
}
/* Kervan specific: hero full width with crop, maintain height */
#kervan .project__hero img {
	width: 100% !important;
	max-height: 80vh !important;
	object-fit: cover !important;
	object-position: center !important;
}
/* Kervan specific: first row - exact same layout as coexist */
#kervan .project__body .exhibition-row:first-child {
	grid-template-columns: 35% 65% !important;
}
#kervan .project__body .exhibition-row:first-child .exhibition-cell.image img {
	width: 120% !important;
	margin: 0 auto !important;
}
/* Kervan specific: rest of images keep 50% size and aligned to outside edges */
#kervan .project__body .exhibition-row.video-full-left .exhibition-cell.image {
	width: auto !important;
	max-width: none !important;
}
#kervan .project__body .exhibition-row.video-full-left .exhibition-cell.image figure {
	width: 50% !important;
	max-width: 50% !important;
}
#kervan .project__body .exhibition-row.video-full-left .exhibition-cell.image img {
	width: 100% !important;
	margin: 0 !important;
	margin-left: 0 !important;
	margin-right: auto !important;
}
#kervan .project__body .exhibition-row.video-full-right .exhibition-cell.image {
	width: auto !important;
	max-width: none !important;
}
#kervan .project__body .exhibition-row.video-full-right .exhibition-cell.image figure {
	width: 50% !important;
	max-width: 50% !important;
}
#kervan .project__body .exhibition-row.video-full-right .exhibition-cell.image img {
	width: 100% !important;
	margin: 0 !important;
	margin-left: auto !important;
	margin-right: 0 !important;
}
/* AdLap specific: hero full width with crop, maintain height */
#adlap .project__hero img {
	width: 100% !important;
	max-height: 80vh !important;
	object-fit: cover !important;
	object-position: center !important;
}
/* AdLap specific: hero full width with crop, maintain height */
#adlap .project__hero img {
	width: 100% !important;
	max-height: 80vh !important;
	object-fit: cover !important;
	object-position: center !important;
}
/* AdLap specific: logo much smaller (20% of current size) */
#adlap .project__body .exhibition-cell.text .adlap-logo {
	width: 17% !important;
	height: auto !important;
	margin: 0 !important;
	display: block !important;
}
/* Plantain Fiber Extractor specific: hero full width with crop, maintain height */
#fiber-extractor .project__hero img {
	width: 100% !important;
	max-height: 80vh !important;
	object-fit: cover !important;
	object-position: center !important;
}
/* Coexist specific: first row - narrower text column, bigger image */
#coexist .project__body .exhibition-row:first-child {
	grid-template-columns: 35% 65% !important;
}
#coexist .project__body .exhibition-row:first-child .exhibition-cell.image img {
	width: 120% !important;
	margin: 0 auto !important;
}
/* Coexist specific: other videos at 60% width aligned to outside edges */
#coexist .project__body .exhibition-row.video-full-left .exhibition-cell.image video {
	width: 60% !important;
	margin: 0 !important;
	margin-left: 0 !important;
	margin-right: auto !important;
}
#coexist .project__body .exhibition-row.video-full-right .exhibition-cell.image video {
	width: 60% !important;
	margin: 0 !important;
	margin-left: auto !important;
	margin-right: 0 !important;
}
.gallery-video {
	cursor: pointer;
	max-height: 80vh;
}
.gallery-video::-webkit-media-controls {
	display: none !important;
}
.gallery-video::-webkit-media-controls-enclosure {
	display: none !important;
}

/* Video overlay */
.video-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.9);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}
.video-overlay.is-open {
	opacity: 1;
	visibility: visible;
}
.video-overlay__content {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 90vw;
	max-width: 90vw;
	height: 90vh;
	max-height: 90vh;
}
.video-overlay__content video {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}
.video-overlay__close {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32px;
	color: #ffffff;
	cursor: pointer;
	background: rgba(0, 0, 0, 0.5);
	border-radius: 50%;
	transition: background 0.2s ease;
	z-index: 10000;
}
.video-overlay__close:hover {
	background: rgba(0, 0, 0, 0.8);
}
.exhibition-row > .exhibition-cell.image:nth-child(2) img,
.exhibition-row > .exhibition-cell.image:nth-child(2) video {
	width: 100%;
}
@media (max-width: 1024px) {
	.exhibition-row {
		grid-template-columns: 1fr;
		gap: var(--gutter-lg);
	}
	.project__body {
		padding-top: 48px;
	}
}
@media (max-width: 860px) {
	.project__hero {
		margin: 0 0 32px 0;
		width: 100%;
	}
}
.project__module {
	display: block;
	margin-bottom: 3.5rem;
}
.project__subtitle {
	font-family: var(--font-sans);
	font-size: 16.8px;
	font-weight: 500;
	margin-bottom: 12px;
	color: var(--text);
}

/* Image rhythm - lookbook style */
.media-grid {
	display: contents;
}
/* Old media styles - only apply if not using exhibition-section layout */
.project__body > .media {
	width: 100%;
	margin: 0 0 0 0;
	transition: transform 200ms ease-out, opacity 200ms ease-out;
}
.project__body > .media img,
.project__body > .media video {
	width: 100%;
	height: auto;
	display: block;
	transition: transform 200ms ease-out, opacity 200ms ease-out;
}

/* Varied widths and spacing for lookbook rhythm - only for direct children */
.project__body > .media:nth-of-type(1) {
	width: 75%;
	margin-left: 0;
	margin-bottom: 3rem;
}
.project__body > .media:nth-of-type(2) {
	width: 82%;
	margin-left: 2.5rem;
	margin-bottom: 2.5rem;
}
.project__body > .media:nth-of-type(3) {
	width: 70%;
	margin-left: 0;
	margin-bottom: 4rem;
}
.project__body > .media:nth-of-type(4) {
	width: 88%;
	margin-left: 3rem;
	margin-bottom: 3.5rem;
}
.project__body > .media:nth-of-type(5) {
	width: 78%;
	margin-left: 0;
	margin-bottom: 2.8rem;
}
.project__body > .media:nth-of-type(6) {
	width: 85%;
	margin-left: 2rem;
	margin-bottom: 4rem;
}
.project__body > .media:nth-of-type(7) {
	width: 72%;
	margin-left: 0;
	margin-bottom: 3rem;
}
.project__body > .media:nth-of-type(8) {
	width: 80%;
	margin-left: 3.5rem;
	margin-bottom: 2.5rem;
}
.project__body > .media:nth-of-type(9) {
	width: 76%;
	margin-left: 0;
	margin-bottom: 3.5rem;
}
.project__body > .media:nth-of-type(n+10) {
	width: 75%;
	margin-left: 0;
	margin-bottom: 3rem;
}
/* Ensure media inside exhibition-section doesn't get these styles */
.project__body .exhibition-section .media {
	margin: 0 !important;
	margin-bottom: 0 !important;
	margin-left: 0 !important;
}

/* Subtle hover effect */
@media (hover: hover) and (pointer: fine) {
	.project__body .media:hover img,
	.project__body .media:hover video {
		transform: translateY(-2px);
		opacity: 0.95;
	}
}

/* Thin editorial lines */

.project__process {
	margin: 0;
	border-top: 1px solid var(--divider-color);
	padding-top: calc(var(--gutter-xxl) / 2);
	padding-left: 80px;
	padding-right: 80px;
	padding-bottom: calc(var(--gutter-xxl) / 2);
	position: relative;
}

/* Process section - 6-column grid */
.project__process .process-content {
	margin-top: 0;
}

/* Override exhibition-section to use 4-column grid in process */
.project__process .exhibition-section {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: var(--gutter-lg) !important;
	margin-top: 24px !important;
	align-items: start;
}

/* Override exhibition-row in process to not use 2-column layout - use contents so cells participate in parent grid */
.project__process .exhibition-row {
	display: contents !important;
}

/* Process section cells - participate in 6-column grid */
.project__process .exhibition-cell {
	display: contents;
}

/* Process section - reset all video/image styles and rebuild from scratch */
/* Override ALL possible video/image styles that might affect process section */
.project__process .exhibition-cell.image video,
.project__process .exhibition-cell.image img,
.project__process video.gallery-video,
.project__process .gallery-video,
.project__process .exhibition-row.video-full-left .exhibition-cell.image video,
.project__process .exhibition-row.video-full-right .exhibition-cell.image video,
.project__process figure video,
.project__process figure img {
	width: 100% !important;
	height: auto !important;
	object-fit: contain !important;
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	max-width: 100% !important;
	max-height: none !important;
	cursor: pointer;
}

/* Process section images and videos - all treated exactly the same, fit grid cells at 100% width */
.project__process .exhibition-cell.image {
	display: block !important;
	grid-column: span 1 !important;
	padding: 0 !important;
	margin: 0 !important;
	width: auto !important;
	max-width: none !important;
	align-self: start !important;
}

.project__process .exhibition-cell.image figure,
.project__process .exhibition-cell.image .media {
	display: block !important;
	align-self: start !important;
}

/* Empty cells don't take space */
.project__process .exhibition-cell:empty {
	display: none;
}
.project {
	position: relative;
}

.project__hero {
	position: relative;
	z-index: 1;
}

.process-toggle {
	position: fixed;
	bottom: 3px;
	left: calc(var(--sidebar-w) + (100vw - var(--sidebar-w)) / 2);
	transform: translateX(-50%);
	z-index: 1001;
	display: inline-block;
	border: none;
	background: transparent;
	color: #ffffff;
	padding: 0;
	font-size: 13.2px;
	font-family: var(--font-sans);
	font-weight: 400;
	letter-spacing: 0.01em;
	text-transform: lowercase;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	cursor: pointer;
	transition: opacity var(--transition-fast) ease;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	mix-blend-mode: difference;
	text-shadow: none;
}
.process-toggle:hover {
	opacity: 0.7;
}
.process-content {
	overflow: hidden;
	transition: height var(--transition-slow) ease, opacity var(--transition-slow) ease;
	margin-top: 24px;
	opacity: 1;
}
.process-content[hidden] {
	display: none !important;
	opacity: 0;
	height: 0;
	overflow: hidden;
}
.process-content:not([hidden]) {
	display: block;
}
/* Image rotation classes */
.rotate-right {
	transform: rotate(90deg);
	transform-origin: center center;
}
.rotate-left {
	transform: rotate(-90deg);
	transform-origin: center center;
}
.exhibition-cell.image figure {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: visible;
}
.exhibition-cell.image .rotate-right,
.exhibition-cell.image .rotate-left {
	width: auto !important;
	height: auto !important;
	max-width: 100vh;
	max-height: 100%;
	object-fit: contain;
	flex-shrink: 0;
}

/* Contact divider */
.project__body hr {
	border: 0;
	height: 1px;
	background: var(--divider-color);
	margin: 3rem 0 2rem 0;
}
.project__body hr + p,
.project__body hr + p + p,
.project__body hr + p + p + p {
	font-size: 15.6px;
	color: var(--text-light);
	margin-bottom: 0.5rem;
}
.project__body hr + p:last-child {
	margin-bottom: 0;
}

/* Responsive */
@media (max-width: 768px) {
	body {
		grid-template-columns: 1fr;
		height: auto;
		overflow: auto;
		width: 100%;
		max-width: 100%;
	}
	.site-nav {
		position: fixed;
		top: 0;
		left: 0;
		width: 280px;
		max-width: 85vw;
		height: 100vh;
		height: 100dvh;
		background-color: var(--sidebar-bg);
		background-image: 
			linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)),
			url("../assets/images/texture/texturebg1.png");
		background-repeat: no-repeat, repeat;
		background-size: 100%, 100% auto;
		background-attachment: local, local;
		background-position: 0 0, 0 0;
		border-right: 1px solid var(--divider-color);
		z-index: 1002;
		transform: translateX(-100%);
		transition: transform var(--transition-slow) ease;
		overflow-y: auto;
		overflow-x: hidden;
		box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15);
		will-change: transform;
	}
	.site-nav__inner {
		padding: 24px 20px;
		min-height: 100%;
		display: flex;
		flex-direction: column;
		padding-top: calc(24px + env(safe-area-inset-top, 0px));
	}
	/* Show burger on mobile, move theme toggle left of it (match fremobileworks) */
	.mobile-menu-toggle {
		display: flex;
	}
	.mobile-nav-overlay {
		display: block;
	}
	.theme-toggle-fixed {
		top: 16px;
		right: 56px;
		z-index: 1002;
		position: fixed;
		line-height: 1;
	}
	/* Mobile: always show full work list inside the sliding nav */
	.project-nav {
		display: block;
		max-height: none;
		opacity: 1;
		padding-top: 4px;
	}
	.project-nav[data-open="true"] {
		display: block;
	}
	.project__body {
		padding: 0 16px 40px 16px;
	}
	#project-transition-overlay {
		left: 0;
		width: 100%;
	}
	/* Mobile: content should span full width below the navbar */
	.content {
		width: 100%;
		margin-left: 0;
		height: auto;
		overflow: visible;
	}
	.content > .project {
		padding: 24px 16px 40px 16px;
		max-width: 100%;
	}
	/* Landing hero: full-bleed video (no side padding) on mobile */
	.content > #landing {
		padding: 0;
	}

	/* Mobile: make unmute buttons smaller */
	.unmute-btn,
	.landing-unmute-btn {
		padding: 3px 9px;
		font-size: 11px;
		border-radius: 999px;
	}

	/* Scale down overlay typography/controls on mobile */
	.landing-preview__title,
	.project__title {
		font-size: 11px;
	}

	.landing-see-more {
		font-size: 11px;
	}

	.landing-nav--next {
		padding: 4px 10px;
		font-size: 12px;
	}

	/* Dark/light toggle smaller on mobile */
	.theme-toggle-fixed {
		font-size: 11px;
	}
	.project__body .media,
	.project__body .media:nth-of-type(n) {
		width: 100%;
		margin-left: 0;
		margin-bottom: 2rem;
	}
	/* Ensure landing hero/media are full-width on mobile */
	.landing-preview__hero {
		margin: 0 0 24px 0;
		width: 100%;
	}
	.landing-preview__media,
	.landing-preview__media img,
	.landing-preview__media video {
		width: 100%;
		max-width: 100%;
		height: auto;
		display: block;
	}
	/* Center process toggle on small screens */
	.process-toggle {
		left: 50%;
		transform: translateX(-50%);
	}

	/* Dark mode navbar texture on mobile - keep navbar fixed */
	.theme-dark .site-nav {
		position: fixed !important;
	}

	.theme-dark .site-nav::before {
		background-size: 100%, 100% auto;
		background-repeat: no-repeat, repeat;
	}

	body.mobile-menu-open .site-nav {
		transform: translateX(0);
	}

	body.mobile-menu-open .content {
		overflow-x: hidden;
	}
}