/**********/
/* Two-column desktop */
/**********/

.site-columns-divider {
	display: none;
}

@media (min-width: 992px) {

	/**********/
	/* Two-column layout */
	/**********/

	html:has(.site-main--two-columns),
	body:has(.site-main--two-columns) {
		width: 100%;
		height: 100%;
		overflow: hidden;
		overscroll-behavior: none;
	}

	body:has(.site-main--two-columns) {
		padding-top: 0;
		scrollbar-gutter: auto;
	}


	/**********/
	/* Full viewport behind fixed header */
	/**********/

	.site-main--two-columns {
		position: fixed;
		inset: 0;

		width: 100%;
		height: 100vh;
		height: 100dvh;

		overflow: hidden;
	}


	/**********/
	/* Height chain */
	/**********/

	.site-main--two-columns .site-columns-container,
	.site-main--two-columns .site-columns,
	.site-main--two-columns .site-column {
		height: 100%;
		min-height: 0;
	}

	.site-main--two-columns .site-columns {
		position: relative;
		flex-wrap: nowrap;
	}

	.site-main--two-columns .site-columns-divider {
		display: block;
		position: absolute;
		width: 2px;
		height: 0;
		padding: 0;
		background: var(--dark-grey);
		pointer-events: none;
	}


	/**********/
	/* Independent scroll panes */
	/**********/

	.site-main--two-columns .site-column {
		overflow: hidden;
	}

	.site-main--two-columns .site-column-scroll {
		width: 100%;
		height: 100%;

		min-width: 0;
		min-height: 0;

		overflow-x: hidden;
		overflow-y: auto;

		overscroll-behavior-y: contain;
		-webkit-overflow-scrolling: touch;

		scrollbar-width: none;
	}

	.site-main--two-columns .site-column-scroll-inner {
		display: flex;
		flex-direction: column;

		width: 100%;
		min-width: 0;
		min-height: 100%;
	}

	.site-main--two-columns .site-column-content,
	.site-main--two-columns .site-column-footer {
		flex: 0 0 auto;
	}

	.site-main--two-columns .site-column-footer {
		margin-top: auto;
	}

	.site-main--two-columns .site-column-scroll::-webkit-scrollbar {
		display: none;
	}


	/**********/
	/* Modal scroll lock */
	/**********/

	html.no-scroll
	.site-main--two-columns
	.site-column-scroll {
		overflow: hidden !important;
	}


	/**********/
	/* Initial content position */
	/**********/

	.site-main--two-columns .site-column-content {
		padding-top: var(--hh);
	}


	/**********/
	/* Column gap */
	/**********/

	.site-column--left .site-column-content {
		padding-right:
			calc(
				var(--column-gap) / 2
			);
	}

	.site-column--right .site-column-content {
		padding-left:
			calc(
				var(--column-gap) / 2
			);
	}


	/**********/
	/* Split footer */
	/**********/

	.site-footer--two-columns {
		display: none;
	}

}


/**********/
/* Small desktop */
/**********/

@media (max-width: 1439.98px) {

	/**********/
	/* Projects */
	/**********/

	.text-content {
		--text-gutter-x:
			clamp(
				2.75rem,
				5vw,
				5rem
			);
	}

	.projects {
		--projects-gutter-x:
			clamp(
				2.75rem,
				5vw,
				5rem
			);

		--projects-gutter-y:
			clamp(
				3.75rem,
				6.5vw,
				7rem
			);
	}

}


/**********/
/* Laptop */
/**********/

@media (max-width: 1199.98px) {

	/**********/
	/* Projects */
	/**********/

	.text-content {
		--text-gutter-x:
			clamp(
				2.5rem,
				5vw,
				4.5rem
			);
	}

	.projects {
		--projects-gutter-x:
			clamp(
				2.5rem,
				5vw,
				4.5rem
			);

		--projects-gutter-y:
			clamp(
				3.5rem,
				6vw,
				6rem
			);
	}

	.projects-view-switch {
		width:
			min(
				16rem,
				35vw
			);
	}

	.projects[data-layout="list"]
	.projects-item-data {
		grid-template-columns:
			minmax(0, 6fr)
			minmax(6rem, 2fr)
			minmax(4rem, 1fr)
			minmax(7rem, 1.5fr);
	}

}


/**********/
/* Tablet */
/**********/

@media (max-width: 991.98px) {

	/**********/
	/* Subpage header and fullscreen menu */
	/**********/

	html:has(#site-header) {
		--hh: calc(clamp(96px, 17.17svh, 160px) + env(safe-area-inset-top));
		--hh-scrolled: calc(4rem + env(safe-area-inset-top));
		--page-gutter: clamp(24px, 8.37vw, 36px);
	}

	#site-header {
		padding-top: env(safe-area-inset-top);
		background: var(--white);
	}

	#site-header .header-backdrop {
		display: none;
	}

	#site-header > .container {
		padding-left: max(var(--page-gutter), env(safe-area-inset-left));
		padding-right: max(var(--page-gutter), env(safe-area-inset-right));
	}

	#site-header .site-header__row {
		--bs-gutter-x: 0;
		flex-wrap: nowrap;
		gap: 1rem;
	}

	#site-header .site-header__brand,
	#site-header .site-header__navigation {
		padding-inline: 0;
	}

	#site-header #box-logo {
		width: clamp(100px, 31.63vw, 136px);
	}

	#site-header #box-logo :is(img, svg) {
		width: 100%;
		height: auto;
	}

	#site-header #box-menu {
		align-items: center;
		column-gap: clamp(16px, 5.58vw, 24px);
		font-size: clamp(14px, 3.954vw, 17px);
		white-space: nowrap;
	}

	#site-header .header-information-link,
	#site-header .header-information-link::after {
		padding-block: 10px;
	}

	#site-header.is-mobile-menu-ready .mobile-menu-toggle {
		display: inline-block;
		min-width: 2.7em;
		min-height: 44px;
		text-align: right;
		cursor: pointer;
	}

	#site-header.is-mobile-menu-ready .main-menu {
		display: none;
	}

	#mobile-menu .main-menu {
		display: grid;
		grid-template-rows: 1fr auto 1.2fr auto;
		min-height: 100%;
		padding: 1rem 0 max(6.4svh, env(safe-area-inset-bottom));
		font-size: clamp(1rem, 3.95vw, 1.25rem);
		line-height: 1.25;
		text-transform: uppercase;
	}

	#mobile-menu .main-menu ul {
		grid-row: 2;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		margin: 0;
		padding: 0;
		border-top: 1px solid rgb(253 252 247 / .5);
		list-style: none;
	}

	#mobile-menu .main-menu li {
		display: block;
		border-bottom: 1px solid rgb(253 252 247 / .5);
	}

	#mobile-menu .main-menu a {
		display: grid;
		place-items: center;
		min-height: 44px;
		padding: .5em max(var(--mobile-menu-gutter), env(safe-area-inset-left), env(safe-area-inset-right));
		text-align: center;
		color: var(--white);
		text-decoration: none;
	}

	#mobile-menu .main-menu ul .active a {
		color: var(--red);
	}

	#mobile-menu .mobile-menu__brand {
		grid-row: 4;
		display: block;
		margin: 1.5rem max(var(--mobile-menu-gutter), env(safe-area-inset-right)) 0 max(var(--mobile-menu-gutter), env(safe-area-inset-left));
		color: var(--white);
	}

	#mobile-menu .mobile-menu__brand :is(img, svg) {
		display: block;
		width: 100%;
		height: auto;
	}

	#mobile-menu .mobile-menu__brand img {
		filter: brightness(0) invert(1);
	}

	#mobile-menu .mobile-menu__brand svg path {
		fill: currentColor;
	}

	/* Keep all links available if the menu cannot be enhanced. */
	#site-header:not(.is-mobile-menu-ready) {
		position: relative;
		height: auto;
		min-height: var(--hh);
	}

	body:has(#site-header:not(.is-mobile-menu-ready)) {
		padding-top: 0;
	}

	#site-header:not(.is-mobile-menu-ready) .site-header__row,
	#site-header:not(.is-mobile-menu-ready) #box-menu,
	#site-header:not(.is-mobile-menu-ready) .main-menu ul {
		flex-wrap: wrap;
		row-gap: .75rem;
	}

	#site-header:not(.is-mobile-menu-ready) .site-header__navigation {
		width: 100%;
	}



	/**********/
	/* Home */
	/**********/

	html:has(.home-main),
	body:has(.home-main) {
		height: auto;
		min-height: 100%;
		overflow-x: clip;
		overflow-y: auto;
		overscroll-behavior: auto;
	}

	.home-main {
		--home-logo-width: min(63vw, 270px);
		--home-image-width: min(35vw, 150px);
		--home-top-padding: max(1.5rem, env(safe-area-inset-top));
		--home-bottom-padding: max(clamp(1.5rem, 6svh, 3.25rem), env(safe-area-inset-bottom));
		--home-image-logo-gap: clamp(2rem, 7svh, 4rem);
		--home-logo-menu-gap: clamp(1rem, 2.6svh, 1.5rem);

		display: block;
		height: auto;
		min-height: 100svh;
		overflow: visible;
		mix-blend-mode: normal;
	}

	.home-main > .container {
		padding-top: var(--home-top-padding);
		padding-bottom: var(--home-bottom-padding);
		padding-left: max(1.5rem, env(safe-area-inset-left));
		padding-right: max(1.5rem, env(safe-area-inset-right));
	}

	.home-row {
		display: grid;
		gap: 0;
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows:
			minmax(0, .82fr)
			auto
			var(--home-image-logo-gap)
			auto
			var(--home-logo-menu-gap)
			auto
			minmax(2.5rem, 1fr)
			auto;
		height: auto;
		min-height: calc(100svh - var(--home-top-padding) - var(--home-bottom-padding));
		margin: 0;
	}

	.home-row > * {
		grid-column: 1;
		min-width: 0;
		margin: 0;
		padding: 0;
	}

	.home-image-slot {
		display: block;
		grid-row: 2;
		justify-self: center;
		width: var(--home-image-width);
	}

	.home-image-slot:not(:has(.home-image-trail)) {
		display: none;
	}

	.home-column--logo {
		grid-row: 4;
		justify-self: center;
		width: var(--home-logo-width);
	}

	.home-column--menu {
		grid-row: 6;
		justify-self: center;
		width: var(--home-logo-width);
	}

	.home-column--location {
		grid-row: 8;
		width: 100%;
	}

	#box-home-logo img {
		filter: brightness(0) invert(1);
	}

	#box-home-menu,
	#box-home-menu .main-menu,
	#box-home-menu .home-information-link,
	#box-home-menu .main-menu li {
		width: 100%;
	}

	#box-home-menu a {
		display: block;
		width: 100%;
		min-height: 24px;
		padding-block: 1px;
		text-align: right;
	}

	#box-home-menu a::after {
		left: auto;
		width: max-content;
		padding-block: 1px;
	}

	#box-home-location {
		font-size: clamp(.7rem, 3.49vw, .882353rem);
		line-height: 1.2;
		text-align: center;
	}

	#box-home-location > div:first-child {
		margin-bottom: .1rem;
	}

	.home-image-slot .home-image-trail {
		position: relative;
		inset: auto;
		width: 100%;
		overflow: visible;
	}

	.home-image-slot .home-image-item {
		position: relative;
		top: auto;
		left: auto;
		width: 100%;
		max-height: none;
		transform: translate3d(var(--home-motion-x, 0px), var(--home-motion-y, 0px), 0);
		will-change: auto;
	}

	.home-image-slot .home-image-item:not(:first-child) {
		display: none;
	}

	/**********/
	/* Home intro */
	/**********/

	.home-intro-text {
		width: auto;
		max-width: calc(100% - 2rem);
		align-items: center;
		font-size: clamp(.8rem, 5.13vw, 1.176471rem);
		line-height: 1.15;
		text-align: center;
		transform: translateY(.5rem);
	}

	.home-intro-text-end {
		display: contents;
	}

	/**********/
	/* Information dialog */
	/**********/

	.information-dialog {
		--information-edge-gap: 2rem;
		--information-edge-top: max(var(--information-edge-gap), env(safe-area-inset-top));
		--information-edge-bottom: max(var(--information-edge-gap), env(safe-area-inset-bottom));
		--information-edge-left: max(var(--information-edge-gap), env(safe-area-inset-left));
		--information-edge-right: max(var(--information-edge-gap), env(safe-area-inset-right));
		top: var(--information-edge-top);
		right: var(--information-edge-right);
		bottom: auto;
		left: var(--information-edge-left);
		width: min(42rem, calc(100vw - var(--information-edge-left) - var(--information-edge-right)));
		height: calc(100vh - var(--information-edge-top) - var(--information-edge-bottom));
		height: calc(100svh - var(--information-edge-top) - var(--information-edge-bottom));
		max-height: calc(100dvh - var(--information-edge-top) - var(--information-edge-bottom));
		max-width: none;
		margin: 0 auto;
		transform: none;
	}

	.information-dialog__inner {
		--information-inner-top: 5.5rem;
		--information-inner-bottom: 2.5rem;
		--information-inner-side: 3rem;
	}

	.information-dialog__close {
		top: 1.5rem;
		right: 1.5rem;
	}


	/**********/
	/* Two-column fallback */
	/**********/

	.site-main--two-columns {
		position: relative;
		inset: auto;

		height: auto;

		overflow: visible;
	}

	.site-main--two-columns
	.site-columns-container,
	.site-main--two-columns
	.site-columns,
	.site-main--two-columns
	.site-column,
	.site-main--two-columns
	.site-column-scroll {
		height: auto;
		min-height: 0;
	}

	.site-main--two-columns
	.site-column-scroll {
		overflow: visible;
	}

	.site-column-footer {
		display: none;
	}

	.site-footer--two-columns {
		display: block;
	}

	.site-footer--two-columns.site-footer--background {
		display: flex;
	}

	.site-footer--background::before {
		background-size: cover;
	}


	/**********/
	/* Projects */
	/**********/

	.text-content {
		--text-gutter-x:
			clamp(
				2rem,
				4vw,
				3.5rem
			);
	}

	.projects {
		--projects-gutter-x:
			clamp(
				2rem,
				4vw,
				3.5rem
			);

		--projects-gutter-y:
			clamp(
				3rem,
				5vw,
				5rem
			);
	}

	.projects-controls {
		align-items:
			flex-start;

		gap: 2rem;
	}

	.projects-filter {
		gap:
			.75em
			1.5em;
	}

	.projects-view-switch {
		width:
			min(
				14rem,
				35vw
			);
	}

}


/* Stack the mobile trail in the image slot without changing the page layout. */
@media (max-width: 991.98px) and (prefers-reduced-motion: no-preference) {
	.home-image-slot .home-image-trail.is-motion-active .home-image-item {
		will-change: transform;
	}

	.home-image-slot .home-image-trail.is-motion-active .home-image-item:not(:first-child) {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
	}
}


/**********/
/* Mobile */
/**********/

@media (max-width: 767.98px) {

	/**********/
	/* Information dialog */
	/**********/

	.information-dialog {
		--information-edge-gap: .75rem;
	}

	.information-dialog__inner {
		--information-inner-top: 5rem;
		--information-inner-bottom: 1.5rem;
		--information-inner-side: 1.25rem;
	}

	.information-dialog__content {
		width: 100%;
	}

	.information-dialog__footer {
		grid-template-columns:
			1fr;

		gap: 1rem;

		padding-top: 3rem;
	}

	.information-dialog__meta ul {
		flex-wrap: wrap;

		gap:
			.75rem
			1.5rem;
	}

	.information-dialog__language ul {
		flex-wrap: wrap;
		gap: 0;
	}

	.information-dialog__close {
		top: 1rem;
		right: 1rem;
	}


	/**********/
	/* Projects */
	/**********/

	.text-content {
		--text-gutter-x:
			calc(var(--fs) * 1.5);
	}

	.projects {
		--projects-gutter-x:
			calc(var(--fs) * 1.5);

		--projects-gutter-y:
			3.5rem;
	}

	.projects-controls {
		display: block;

		margin-bottom:
			var(--ceP-md);
	}

	.projects-filter {
		display: flex;
		gap: 0 1.5em;
		margin-bottom: 1.25rem;
	}

	.projects-filter-button.fancy-hover {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	.projects-filter-button.fancy-hover > span,
	.projects-filter-button.fancy-hover::after {
		white-space: nowrap;
	}

	.projects-view-switch {
		width: 100%;
	}

	.projects[data-layout="grid"] .projects-item {
		flex: 0 0 auto;
		width: 50%;
	}

	.projects[data-layout="grid"]
	.projects-item-data {
		display: none;
	}

	.projects[data-layout="list"]
	.projects-item-data {
		grid-template-columns:
			minmax(0, 1fr)
			auto
			auto;

		column-gap:
			1.25em;

		font-size:
			.75em;
	}

	.projects[data-layout="list"]
	.projects-item-status {
		display: none;
	}

	.footer-row {
		display: block;
	}
	.footer-row > * {
		text-align: center;
	}
	.footer-row > * + * {
		margin-top: 1rem;
	}

	.objects-gallery__info-subtitle,
	.objects-gallery__info-description {
		display:none
	}

}


/**********/
/* Small mobile */
/**********/

@media (max-width: 575.98px) {

	/**********/
	/* Information dialog */
	/**********/

	.information-dialog {
		--information-edge-gap: .5rem;
	}

	.information-dialog__inner {
		--information-inner-top: 5rem;
		--information-inner-bottom: 1.5rem;
		--information-inner-side: 1rem;
	}

	.information-dialog__footer {
		padding-top:
			2.5rem;
	}


	/**********/
	/* Projects */
	/**********/

	.projects {
		--projects-gutter-y:
			3rem;
	}

	.projects[data-layout="list"]
	.projects-item-data {
		column-gap:
			.75em;
	}

	.projects[data-layout="list"]
	.projects-item-location,
	.projects[data-layout="list"]
	.projects-item-year {
		white-space:
			nowrap;
	}

}


/**********/
/* Projects grid hover */
/**********/

.projects:not(.is-filtering)[data-layout="grid"]
.projects-item.is-hovered
.projects-item-data {
	visibility: visible;

	opacity: 1;

	transition-delay: 0s;
}

.projects:not(.is-filtering)[data-layout="grid"]
.projects-item.is-hovered
.projects-item-media img {
	opacity: .52;

	filter:
		blur(6px)
		brightness(1.35)
		saturate(.35);

	transform:
		scale(1.06);
}


/* Tap labels stay centered and readable without following a pointer. */
.projects[data-layout="grid"] .projects-item.is-tapped .projects-item-data {
	display: block;
	top: 50%;
	left: 50%;
	max-width: min(18rem, calc(100% - 1rem));
	transform: translate(-50%, -50%);
	overflow-wrap: anywhere;
}


/**********/
/* Fine pointer */
/**********/

@media (hover: hover) and (pointer: fine) {

	/**********/
	/* Information dialog */
	/**********/

	.information-dialog__meta a:hover,
	.information-dialog__language a:hover {
		opacity: 1;
	}


	/**********/
	/* Projects list hover */
	/**********/

	.projects:not(.is-filtering)[data-layout="list"]
	.projects-item-link:is(
		:hover,
		:focus-visible
	)
	.projects-item-media {
		opacity: 1;

		transform:
			translate(
				-50%,
				-50%
			)
			scale(1);
	}

	.projects:not(.is-filtering)[data-layout="list"]
	.projects-item-link:is(
		:hover,
		:focus-visible
	)
	.projects-item-data {
		color:
			var(--red);
	}

}


/**********/
/* Reduced motion */
/**********/

@media (prefers-reduced-motion: reduce) {

	/**********/
	/* Information dialog */
	/**********/

	.information-dialog::backdrop,
	#mobile-menu::backdrop,
	.information-dialog__meta a,
	.information-dialog__language a {
		transition:
			none !important;
	}

	/**********/
	/* Project slider popup */
	/**********/

	.project-slider-popup__dialog::backdrop,
	.project-slider-popup__dialog.is-closing::backdrop {
		transition: none;
	}


	/**********/
	/* Global motion */
	/**********/

	#site-header,
	#site-header > .container,
	.header-backdrop,
	.home-intro,
	.home-intro-char,
	nav[class*="menu"] a[data-linktext] > span,
	.fancy-hover[data-linktext] > span,
	nav[class*="menu"] a[data-linktext]::after,
	.fancy-hover[data-linktext]::after {
		transition: none;
	}

	.js .home-image-trail {
		opacity: 1;
	}

	.home-image-trail
	.home-image-item:not(:first-child) {
		display: none;
	}


	/**********/
	/* Projects */
	/**********/

	.projects-view-knob,
	.projects-item-data,
	.projects-item-media,
	.projects-item-media img {
		transition:
			none !important;
	}

}


/**********/
/* Coarse pointer */
/**********/

@media (hover: none), (pointer: coarse) {

	/* Keep keyboard focus visible without a hover reveal or an outline. */
	nav[class*="menu"] a[data-linktext]:focus-visible,
	.fancy-hover[data-linktext]:focus-visible,
	#mobile-menu .main-menu a:focus-visible {
		color: var(--red);
	}

	/**********/
	/* Information dialog */
	/**********/

	.information-dialog__close {
		width:
			max(
				2.75rem,
				44px
			);

		height:
			max(
				2.75rem,
				44px
			);
	}


	/**********/
	/* Project slider popup */
	/**********/

	.project-slider-popup {
		--popup-close-size:
			max(
				2.5rem,
				44px
			);
	}


	/**********/
	/* Homepage */
	/**********/

	.home-image-trail
	.home-image-item:not(:first-child) {
		display: none;
	}


	/**********/
	/* Projects */
	/**********/

	.projects[data-layout="list"]
	.projects-item-media {
		display: none;
	}

}


/**********/
/* Print */
/**********/

@media print {

	.site-main--two-columns .site-columns-divider {
		display: none;
	}

	/**********/
	/* Dialogs */
	/**********/

	.information-dialog,
	#mobile-menu {
		display:
			none !important;
	}


	/**********/
	/* Two-column layout */
	/**********/

	html:has(.site-main--two-columns),
	body:has(.site-main--two-columns) {
		width: auto;
		height: auto;

		overflow: visible;
	}

	body:has(.site-main--two-columns) {
		padding-top: 0;
	}

	.site-main--two-columns {
		position: static;
		inset: auto;

		width: 100%;
		height: auto;

		overflow: visible;
	}

	.site-main--two-columns
	.site-columns-container,
	.site-main--two-columns
	.site-columns,
	.site-main--two-columns
	.site-column,
	.site-main--two-columns
	.site-column-scroll {
		height: auto;

		overflow: visible;
	}

	.site-main--two-columns
	.site-columns {
		flex-wrap: wrap;
	}

	.site-main--two-columns
	.site-column {
		flex:
			0 0 100%;

		width: 100%;
	}

	.site-main--two-columns
	.site-column-content {
		padding-top: 0;
	}

	.site-column-footer {
		display: none;
	}

	.site-footer--two-columns {
		display: block;
	}

}