/*

Theme Name: Lesley Moore - With new intro video
Author: Pascal de Man
Author URI: https://pascaldeman.com
Description: ...
Requires at least: 6.1
Tested up to: 6.1
Requires PHP: 5.6
Version: 2.02
*/

@font-face {
    font-family: 'JLPirelliRegular';

    src: url(fonts/JLPirelli-Regular.woff2) format( 'woff2'),
         url(fonts/JLPirelli-Regular.woff) format( 'woff');
         
    font-weight: 100;
    font-style: normal;
}
@font-face {
    font-family: 'JLPirelliRegularItalic';

    src: url(fonts/JLPirelli-RegularItalic.woff2) format( 'woff2'),
         url(fonts/JLPirelli-RegularItalic.woff) format( 'woff');
         
    font-weight: 100;
    font-style: normal;
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
	border: 0;
	outline: 0;

    box-sizing: border-box;
	
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;

  	scrollbar-visibility: hidden;
      -ms-overflow-style: none;
         scrollbar-width: none;
}
*::-webkit-scrollbar { display: none }

:root, html, body, main:has(#home) > div#home {
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: none;
  	touch-action: pan-y;
	overflow-x: clip;
}

:root {
    font-size: clamp(18px, calc(2800vw / 1440), 36px);
    font-size: clamp(18px, calc(2600vw / 1440), 36px);
	color-scheme: light only;
	
	--background-color: #f7f7f7;
	--text-color: #000000;
	
	--menu-background: pink;
	--menu-text: black;
}

html.resizing  {
	transition: none;	
}

html, body { 
	background-color: var(--background-color);
	color: var(--text-color);
}

html {
    min-height: 100vh;
    min-height: 100dvh;
	
	interpolate-size: allow-keywords;
	
	-webkit-text-size-adjust: 100%;
			text-size-adjust: 100%;
	
    scrollbar-color: transparent transparent;
}
html.fix-darkmode iframe,
html.fix-darkmode img,
html.fix-darkmode video,
html.fix-darkmode *[style*="url"] {
   -webkit-filter: hue-rotate(180deg) invert(100%) !important;
}

label, input[type="radio"], input[type="checkbox"] { 
	-webkit-user-select: none;
			user-select: none; 
}

body { 
	min-height: 100%;
	
	font-family: 'JLPirelliRegular', sans-serif;
	font-size: 1rem;
	line-height: calc(28 / 24);
	
	visibility: hidden;
}

html.loaded {
    scroll-behavior: smooth;
}
html.loaded body {
	visibility: visible;
}


div { position: relative }

p { text-wrap: pretty }
p + p { margin-top: 1rem }

h1, h2, h3, h4, h5, h6 { text-wrap: balance }
h1, h2, h3, h4, h5, h6, 
b, strong { font-weight: bold }

h2 { 
	margin-bottom: 1rem;
	font-size: 1rem; 
	line-height: 1.15;
}

i, em { 
    font-family: 'JLPirelliRegularItalic';
    font-style: normal;
}


iframe[src*="background=1"] {
	pointer-events: none;
}

a {
    color: inherit;
	
    text-underline-offset: .25em;
	text-decoration-thickness: max(1px, .05em);
	text-decoration-skip-ink: auto;
}
a[href^="tel:"],
a[href^="mailto:"] { white-space: nowrap }
a[href^="tel:"] { font-size: .92em }

label { cursor: pointer }

.title, .metatext { 
	font-size: .72em;
	line-height: 1.25;
}
* + .metatext { margin-top: 1rem }

main { 
	--padding-inline: calc(40rem / 36);
	--padding-inline: max(40rem / 36, env( safe-area-inset-left ));
	
	min-height: 100vh;
	min-height: 100dvh;
	
	padding-top: calc(24rem / 36);
	
	padding-bottom: .01px;
	
	
}
main, main * { 
	transform: translate3d(0, 0, 0);
}
header { 
	position: sticky;
	top: 0;
	
	padding-inline: max(40rem/36,env(safe-area-inset-left));
	
	color: var(--background-color);
	mix-blend-mode: difference;
	
	z-index: +2;
}

header .contact-details { 
	font-size: min(5vw / 3, 32px);
	line-height: calc(38 / 32);
}

header, header * { user-select: none }
header + .project-row { margin-top: calc(var(--gap) - .5rem) }


header .breadcrumbs { translate: 0 -.075em }

div:has(#work) .breadcrumbs,
div:has(#werk) .breadcrumbs { 
/* 	padding-inline: 0; */
	translate: 0 -.125em;
		
	display: none;
}


footer {
	padding: calc(24rem / 36) max(40rem/36,env(safe-area-inset-left));
}
footer p {
	font-size: max(2rem / 3, 15px);
	font-size: max(2rem / 3, 14.9px);
	text-wrap: balance;
}

footer p a {
	text-decoration-line: none;
}
footer p a:hover {
    text-decoration-line: underline;
}


.project-divider {
	--gap: max(3rem, env(safe-area-inset-left));
	
/* 	margin: var(--gap); */
	margin: calc(1.5 * var(--gap)) var(--gap);
	
	border-top: 1px solid #ccc;
}

.project-row { 
	--gap: max(3rem, env(safe-area-inset-left));
	
	margin: var(--gap);
}
.project-row, .project-row * {
	-webkit-user-select: none;
			user-select: none;
}
.project-row .description *:not(input) {
	user-select: text;
}

.project-row:not(.landscape) {
	width: calc(100% - 2 * var(--gap));
	display: flex;
	gap: var(--gap);
}

.project-row .project { flex: 0 }
.project-row .project > div { 
	width: var(--image-width);
	margin-inline: auto;
}
.project-row .project > div:has(.text) {
	flex-direction: column;
	display: flex;
}
.project-row .project > div:has(.text.above) {
	flex-direction: column-reverse;
}
.project-row .project .text {
	padding: var(--gap) min(10%, var(--gap));
}
.project-row .project .text.above {
	padding-top: 0;
}
.project-row .project .text.below {
	padding-bottom: 0;
}
.project-row .project .text > div {
	width: min(100%, 60ch);
}
.project-row .project .text h2 {
/* 	max-width: 34ch; */
	max-width: 18em;
	
	font-size: max(28px, 1rem);
	font-weight: 100;
}
.project-row .project .text p {
/* 	max-width: 40ch; */
	max-width: 26em;
/* 	text-wrap: balance; */
}
.project-row {
	font-size: min(24px, 1rem);
}

.project-row .project .mobile { display: none }

.project-row .portrait {
	--image-width: calc(0.4 * (100vw - 3 * var(--gap)));
}
.project-row.landscape-landscape .landscape {
	--image-width: calc(0.5 * (100vw - 3 * var(--gap)));
}
.project-row .landscape {
	--image-width: calc(0.6 * (100vw - 3 * var(--gap)));
}
.project-row.landscape .landscape {
	--image-width: calc(100vw - 2 * var(--gap));
}

.project-row:not(.portrait-portrait) .portrait {
	flex-basis: 40%;
}
.project-row:not(.landscape) .landscape {
	flex-basis: 60%;
}
.project-row.portrait-portrait .portrait,
.project-row.landscape-landscape .landscape {
	flex-basis: 50%;	
}
.project-row.portrait-landscape .image img,
.project-row.landscape-portrait .image img {
	width: 100%;
}


.project-row .project .image, 
.project-row .project .video,
.content .video {
	position: relative;
	background-color: #f7f7f7;
	background-size: cover;
	content-visibility: auto;
	isolation: isolate;
	overflow: clip;
}
.project-row .project .video::before,
.content .video::before {
	position: absolute;
/* 	inset: -1px; */
	inset: 0 0 auto;
	height: 1px;
	
	content: '';
	
	background-color: var(--background-color);
/* 	border: 2px solid var(--background-color); */
}
.project-row .project .video iframe
.content .video iframe {
	pointer-events: none;
	transition: opacity .25s;
	display: block;
	opacity: 0;
}
.project-row .project .video iframe.ready,
.content .video iframe.ready {
	pointer-events: unset;
	opacity: 1;
}

.project-row .project.landscape .image img,
.project-row .project.landscape .video iframe {
	width: 100%;
	
	object-position: center;
	object-fit: cover;
	
	display: block;
}
.project-row .project .image img{
	background-size: cover;
	background-repeat: no-repeat;
}
.project-row .project .video {
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.project-row .project:has(.content) {
	padding-bottom: calc(1rem + 4px);
}
.project-row .project .content {
	--padding-inline: calc(40rem / 36);
	
	position: absolute;
	bottom: calc(-1.5rem - 4px); left: 0;
	padding-bottom: calc(1rem + 4px);
	
	width: 75%;
	max-width: calc(0.45 * (100vw - 3 * var(--gap)));
}
.project-row .project form {
	-webkit-user-select: none;
			user-select: none;
}
.project-row .project input {
	width: 0;
	height: 0;
	opacity: 0; 
}
.project-row .project .open-button {
	position: absolute;
/* 	bottom: 0; left: 0; */
	bottom: calc(-1rem - 4px); left: 0;
}

.project-row .project .description {
	position: absolute;
/* 	bottom: 0; left: 0; */
	bottom: calc(-1rem - 4px); left: 0;
	max-height: 0;
	
	transition: max-height .15s linear,
				opacity .15s linear;
	
	overflow: hidden;
	opacity: 0;
}

.project-row .project .description > div {
	padding: calc(2rem / 3) calc(var(--padding-inline) + .72rem) calc(32rem / 36) calc(2rem / 3);
}
.project-row .project .description > div p {
	font-size: max(2rem / 3, 15px);
	line-height: max(1em + 4px, 17px);
}
.project-row .project .description > div h2,
.project-row .project .description > div p.metatext {
	font-size: max(4rem / 9, 12px);
	line-height: max(1em + 4px, 14px);
}
.project-row .project .description > div h2 {
	margin-bottom: calc(32rem / 36); 
}
.project-row .project .description > div p.metatext {
	margin-top: calc(32rem / 36); 
}
.project-row .project form:where(:focus, :focus-within, :focus-visible) 
						  :has(input[value="show-project-description"]:checked) + .description {
	max-height: 700px;
/* 	max-height: calc-size(fit-content); */
							  
	transition: max-height .35s ease-out;
	opacity: 1;
}

.project-row .project .description .close-button {
	position: absolute;
    top: calc(var(--padding-inline) - .8rem);
    left: calc(100% - var(--padding-inline));
	
	font-size: .8em;
	vertical-align: super;
}
.project-row .project .description .close-button,
.project-row .project .description .close-button * {
	user-select: none;
}

main > .text, 
main .intro-text {
	padding: 0 var(--padding-inline);	
}

main .intro-text {
/* 	width: clamp(30ch, (100vw - 2 * var(--padding-inline)) / 3 + 2 * var(--padding-inline), 100%); */
	width: clamp(400px, (100vw - 2 * var(--padding-inline)) / 3 + 2 * var(--padding-inline), 100%);
}

main .intro-text .breadcrumbs { display: none }
main .intro-text p { text-wrap: balance }


html:has( #home) {
	scroll-snap-type: y mandatory;
}

#home, div:has( > #werk ), div:has( > #work ) {
	--padding-top: max(5rem / 3, (4rem + 98px) / 3);
	
 	scroll-snap-align: start;
}

#work, #werk {
	position: absolute; top: 0;
}
#home {
	/* height: calc(100vh + 2rem); */
	height: 100vh;
/* height: 100dvh; */
/*  height: 100svh; */
	
	padding-top: calc(var(--padding-top) + 1rem);
	/* margin-block: calc(-1 * var(--padding-top) - 1rem) 1rem; */
	margin-block: calc(-1 * var(--padding-top)) 0;
	
	overflow: clip;
}
#home .portrait { display: none }


div:has( > #werk ), div:has( > #work ) {
	position: sticky;
	top: 0;
	
	height: 100vh;
	height: 100dvh;
	padding-top: calc(var(--padding-top) + .25rem);
	
	color: var(--text-color);
	
	background-color: var(--background-color);

	scroll-behavior: smooth;
	
	overflow-y: auto;
}


body[class*="home"] main {
	padding-top: var(--padding-top);
	margin-block: calc(-1 * var(--padding-top));
}
body[class*="home"] .homepage-video {
	position: absolute;
	top: 0; left: calc(-1 * env(safe-area-inset-left));
	/* translate: 0 calc(.05 * var(--padding-top)); */
	
	width: calc(100% - 2 * env(safe-area-inset-left));
	width: calc(100% + 2 * env(safe-area-inset-left));
	/* height: calc(100vh - var(--padding-top));
	height: 100dvh;
	height: calc(100dvh + 1rem); */
	height: 100%;
	
	background-repeat: no-repeat;
	/* background-position: bottom; */
	background-position: center;
	background-size: contain;
	
	content-visibility: auto;
	
	align-items: center;
	overflow: hidden;
	display: flex;
}
body[class*="home"] .homepage-video iframe {
	width: 100%;
	height: 100%;
	
	margin-inline: auto;
	
	display: block;
}

body[class*="home"] .homepage-video.contain {
	left: 50%;
	translate: calc(-1 * (50% + var(--padding-inline))) 0;

	width: calc(100% - 2 * env(safe-area-inset-left) - 2 * var(--padding-inline));
	height: calc(100% - var(--padding-top) - var(--padding-inline));

	margin: var(--padding-top) var( --padding-inline) var( --padding-inline);
}
body[class*="home"] .homepage-video.fill {
	top: 50%; left: 50%;
    translate: -50% -50%;
    
    width: calc(100% - 2 * env(safe-area-inset-left));
    height: 100%;
    
    margin: 0;
}
body[class*="home"] .homepage-video.fill.landscape {
	min-width: 100%;
	height: auto;
}
body[class*="home"] .homepage-video.cover {
	background-size: cover;
}
body[class*="home"] .homepage-video.cover iframe {
	position: absolute; 
	top: 50%; left: 50%;
	translate: -50% -50%;
	
	
	
/* 	min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto; */
}

body[class*="home"] main + footer { display: none }

body[class*="studio"] .content {
	width: min(45ch, 100%);
	padding-block: 1rem 2rem;
	margin-inline: auto;
	
	font-size: clamp(24px, 5vw / 3, 32px);
	
	flex-direction: column;
	display: flex;
	gap: 2rem;
}
body[class*="studio"] .content .mobile {
	display: none;
}
body[class*="studio"] .mobile-address {
	display: none;
	order: 99;
}


body[class*="studio"] footer { display: none }

.content .main > div + div {
	margin-top: 1rem;
}

.content p {
	font-size: clamp(24px, 5vw / 3, 32px);
	line-height: calc(38 / 32);
}
.content p.metatext {
	font-size: clamp(18px, 1.25vw, 24px);
	line-height: calc(28 / 24);
}

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


.video-wrapper,
.image-wrapper {
	width: 100%;
	    
    justify-items: center;
    display: grid;
	
	isolation: isolate;
	overflow: clip;
}

.video::after,
.image::after {
	position: absolute;
	inset: auto -1rem -1rem;
	height: calc(100% + 1rem);
	
	content: '';
	
	transform-origin: bottom;
	transform: translate3d(0,0,0);
	transition: scale 1s ease-out;
	
	background-color: var(--background-color);
}
.video.initialized::after,
.image.initialized::after,
.image:has(img[src])::after {
	scale: 1 0;
}

@keyframes hideOverlay {
	99% { content: '' }
	100% { content: none }
}

.video + .content,
.video + * + .content,

.image + .content,
.image + * + .content {
	visibility: hidden;
}

.video.initialized + .content,
.video.initialized + * + .content,
.image:has(img[src]) + .content,
.image:has(img[src]) + * + .content {
	animation: showWithDelay 1.125s forwards;
}



.project-row .project .video.initialized:not( :has( :is( [data-src*="background=1"], [src*="background=1"] ) ) )::before {
	position: absolute;
	top: 50%; left: 50%;
	translate: -50% -50%;
	
	width: 56px;
	height: auto;
 	aspect-ratio: 7 / 4;

	background-color: rgb(0 0 0 / .9);
 	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 12C19 12.3557 18.8111 12.6846 18.5039 12.8638L6.50387 19.8638C6.19458 20.0442 5.81243 20.0455 5.50194 19.8671C5.19145 19.6888 5 19.3581 5 19L5 5C5 4.64193 5.19145 4.3112 5.50194 4.13286C5.81243 3.95452 6.19458 3.9558 6.50387 4.13622L18.5039 11.1362C18.8111 11.3154 19 11.6443 19 12Z' fill='%23fff'%3E%3C/path%3E%3C/svg%3E" );
	
	background-position: center;
	background-repeat: no-repeat;
	background-size: auto calc(100% - 8px);
	
	border-radius: 4px;
	cursor: pointer;
}

@keyframes showWithDelay {
  99% { visibility: hidden }
  100% { visibility: visible }
}

.menu-toggle {
    display: none;
}

.menubar {
	padding: calc(24rem / 36) 0;
	
	font-size: max(28px, 1rem);
	
	pointer-events: none;
    justify-content: space-evenly;
    display: flex;

    z-index: +2;
}

.menubar > * {
    flex-basis: 50%;
	translate: 0 -0.075em;
}
.menubar > nav { 
	flex-basis: fit-content;
	min-width: 50%;
}

.menubar a { 
	pointer-events: all;
    text-decoration-line: none;
    cursor: pointer;
}

.menubar .selected, 
.menubar .current-lang a, 
.menubar a:hover,
.menubar a:not(.logo).active {
    text-decoration-line: underline;
}

#menu-language-toggle { white-space: nowrap }
#menu-language-toggle li { text-transform: uppercase }
#menu-language-toggle li:not(li:last-child)::after {
	margin-inline: .125rem;
	content: '/';
	display: inline-block;
}
#menu-language-toggle-mobile {
	margin-block: 1.5rem;
	display: none;
}


.menubar .logo {
    text-transform: uppercase;
}
.menubar .breadcrumbs { 
/* 	translate: 0 -0.075em; */
/* 	translate: 0 -0.25em; */
	text-transform: uppercase;
	display: none;
}
.menubar > div:first-child {
/* 	min-width: 50%; */
	
    justify-content: space-between;
	flex-basis: max-content;
    flex-shrink: 0;
	flex-grow: 1;
    display: flex;
}
.menubar .breadcrumb { white-space: nowrap }
/* .menubar .breadcrumbs a[href="#home"]:hover,
.menubar .breadcrumbs a[href="#home"].selected {
	text-decoration: none;
} 
.menubar .breadcrumbs a[href="#home"]:hover::after,
.menubar .breadcrumbs a[href="#home"].selected::after {
	position: absolute;
	bottom: min(-2.5px, -.05em - .5px); left: 0;
	width: 100%;
	height: max(1px, .05em);
	content: '';
	background-color: #fff;
	display: inline-block;
}
.menubar .breadcrumbs a[href="#home"] {
	position: relative;
	display: inline-block;
}
.menubar .breadcrumbs a[href="#home"] .collapse {
 	padding-right: .5rem;
	transition: all .15s;
	display: inline-block;
	overflow-x: clip;
}
.menubar .breadcrumbs a[href="#home"] .collapse:last-child {
	padding-right: 0;
}
.menubar .breadcrumbs:has( a[href="#happy-collaborations"].selected ) a[href="#home"] .collapse {
 	max-width: 0;
	padding-right: 0;
	opacity: 0; 
}
.menubar .breadcrumbs .expand {
 	max-width: 0;
	transition: all .15s;
	
	opacity: 0;
} 
.menubar .breadcrumbs:has( a[href="#happy-collaborations"].selected ) .expand {
 	max-width: fit-content;
	opacity: 1; 
} */

.menubar .breadcrumbs a[href="#werk" ],
.menubar .breadcrumbs a[href="#work" ] { display: none }
.menubar .breadcrumbs a[href="#werk" ].selected,
.menubar .breadcrumbs a[href="#work" ].selected { display: block }
.menubar .breadcrumbs:has( a[href="#werk"].selected ) a[href="#home"],
.menubar .breadcrumbs:has( a[href="#work"].selected ) a[href="#home"] { display: none }

.menubar nav ul {
    list-style-type: none;
    flex-wrap: nowrap;
    display: flex;

}
.menubar nav > ul {
    justify-content: space-between;
/* 	gap: 3rem; */
/* 	gap: 1.5rem; */
	gap: 3vw;
}
.menubar nav ul a { white-space: nowrap }


.menubar nav ul li:has(a[aria-label="Home"]) {
	display: none;
}

.menubar nav ul .contact-details {
	position: absolute;
	top: calc(100% + 2rem);
	z-index: +1;
}
.menubar nav ul .contact-details p {
    font-size: clamp(24px, 5vw / 3, 32px);
    line-height: calc(38 / 32);
}
.menubar nav ul .contact-details p.metatext {
	font-size: clamp(18px, 1.25vw, 24px);
	line-height: calc(28 / 24);
}

.menubar nav ul .contact-details p a {
	text-decoration-line: underline;
}

body:not(.studio, .studio-nl, .studio-en) .menubar nav ul .contact-details {
	display: none;
}


.item {
    height: 100%;

    font-weight: 400;
}
.video iframe {
	width: 100%;
	height: 100%;
}
.video.contain iframe {
	width: 100%;
	min-height: initial;
}

a.item:not(:hover) {
	text-decoration: none;
}


.item .image-wrapper,
.item img {
    width: 100%;
    height: calc(100% - 2.5rem);
    object-fit: cover;
}
.item .image-wrapper {
	position: relative;
    display: inline-block;
    overflow: hidden;
}
.item .image-wrapper img,
body.single .item .image-wrapper {
    height: 100%;
}
	

.item .image-wrapper .desktop-rollover {
	position: absolute;
	inset: 0;
	
	display: none;
}
.item:hover .image-wrapper:not(:has(.desktop-image img[data-src])) .desktop-rollover {
	display: block;
}

.item .image-wrapper .mobile-image {
	display: none;
}

@media screen and (max-width: 1300px) {
	body[class*="studio"] .content {
		width: 100%;
		padding-inline: 18ch 26.5%;
	}
}

@media screen and (max-width: 1200px) {
	
	/* menubar right-aligned with minimum width */
	/* .menubar > div:first-child,
	.menubar > nav {
		min-width: max-content;
		flex-basis: max-content;
	}
	.menubar nav > ul {
		gap: 6vw;
	} */
	body[class*="studio"] .content {
		width: clamp(800px - 2 * var(--padding-inline), 45ch, 100%);
		margin-inline: auto;
		padding-inline: 0;
	}
	
	body[class*="studio"] .mobile-address {
		display: block;
	}
	
	body[class*="studio"] footer { display: none }
	
	.menubar nav ul .contact-details { display: none }
}
@media screen and (max-width: 960px) and (max-height: 600px),
	   screen and (max-width: 800px) {
		   
	header { position: relative }

	div:has(#werk), div:has(#work) { padding-top: 0 }
	div:has(#werk) .breadcrumbs,
	div:has(#work) .breadcrumbs { 
		padding: calc(40rem / 36) 0; /* max(40rem/36,env(safe-area-inset-left)); */
		padding: calc(40rem / 36) max(40rem / 36, env(safe-area-inset-left));
		padding-inline: 0;
		
/* 		translate: 0 -0.25em; */
		
		font-size: max(28px, 1rem);
		text-transform: uppercase;
		
		display: block;
	}
		   
	/* show hamburger here ! */
	.menu-toggle {
		position: fixed;
		top: calc(40rem / 36); 
/* 		right: calc(40rem / 36); */
		right: max(40rem / 36, env(safe-area-inset-right));
		translate: -2px .075em;
		
		pointer-events: all;
	    display: block;
		z-index: +1;
	}
	.menu-toggle input {
		height: max(28px, 1rem);
		aspect-ratio: 1;
		
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath stroke='%23000' stroke-width='2' d='M0 2h20M0 10h20M0 18h20' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
		
		filter: invert(1);
		
		background-position: center;
		background-repeat: no-repeat;
		background-size: 20px 20px;
		
		appearance: none;
		cursor: pointer;
	}
	.menu-toggle input:checked {
		filter: none;
		
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath stroke='%23000' stroke-width='2' d='m0 0 20 20M0 20 20 0' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
	}
	
	.menubar { padding-block: calc(40rem / 36) }
	.menubar .logo { display: none }
	.menubar .breadcrumbs { display: block }
	
	.menubar nav {
		position: fixed;
		inset: 0;
		
		z-index: +1;
	}
	.menubar nav > ul {
		position: absolute; 
		inset: 0;
		
		padding-block: 2.5rem 1rem;
		padding-inline: max(40rem / 36, env(safe-area-inset-left));
		
		background-color: var(--menu-background);
		pointer-events: all;
		
		color: var(--menu-text);
		
		translate: 100% 0.12rem;
		transition: none;
		
		justify-content: flex-start;
		flex-direction: column;
		gap: 0.25rem;
	}
	
	header:has(:checked) {
		color: #000;
		mix-blend-mode: unset;
	}
	header:has(:checked) nav > ul {
		translate: 0 0.12rem;
		transition: translate .2s;
	}
	
	
	.menubar nav ul li:has(a[aria-label="Home"]) {
		display: unset;
	}
	.menubar nav ul .contact-details {
		position: static;
		
		display: block !important;
	}
	.menubar nav ul .contact-details p {
		font-size: max(28px, 1rem);
	}
	.menubar nav ul .contact-details p a {
		text-decoration-line: none;
	}
	.menubar nav ul .contact-details p a:hover {
		text-decoration-line: underline;
	}
	.menubar nav ul .contact-details p:not(:last-child) {
		display: none;
	}
	.menubar nav ul .contact-details p.metatext  {
		font-size: max(28px, 1rem);
		line-height: calc(28 / 24);
	}
	
	#menu-language-toggle { display: none }
	#menu-language-toggle-mobile { display: block }
		   
		   
		   
/* 	main div:has( > #happy-collaborations ) .intro-text {
		padding-top: 1rem;
	} */
	main .intro-text { 
		width: 50%;
		padding-right: 0;
	}
/* 	main div:has( '#happy-collaborations' ) .intro-text {
		padding-top: calc(80rem / 36 + 1.1rem);
	} */
		   
	body[class*="studio"] .content .text {
		padding-right: calc(var(--padding-inline) + 1rem);
	}
}
@media screen and (max-width: 960px) and (max-height: 600px) {
    .menubar {
        top: calc(40rem / 36);
        padding-top: 0;
    }
}

/* 
@media screen and (min-width: 600px) and (max-width: 960px) and (max-height: 600px) {
	body[class*=home] #home,
	body[class*=home] .homepage-video {
		height: 200vh;
		height: 200vmin;
	}
	body[class*=home] .homepage-video {
		padding-top: 3rem;
	}
}
 */

@media screen and (max-width: 960px) {
	.project-row .project .text {
		padding-inline: 0;
	}
	.project-row .project .text.above
	.project-row .project .text.below {
		padding-block: 0;
	}
	.project-row .project .text > div{
		width: min(100%, 52ch);
	}
}


@media screen and (max-width: 800px) {
	html {
		--padding: calc(40rem / 36);
	}
	
	main { padding-top: 0 }
	
	main .intro-text {
/* 		width: 100%; */
		width: min(100%, 400px);
		padding-inline: var(--padding) calc(2 * var(--padding) + 1rem);
	}
	
	div:has(#werk) .breadcrumbs,
	div:has(#work) .breadcrumbs {
		padding-inline: var(--padding) calc(2 * var(--padding) + 1rem);
	}
	
	/* single column content */
	body[class*="studio"] .content {
		width: 100%;
		padding-inline: calc(40rem / 36);
	}
	
	body[class*="studio"] .mobile-address { order: 0 }
	
	body[class*="studio"] footer { display: block }
	
	
	.project-row .project .text {
		padding: var(--gap) calc(16 * 1.1rem / 22);
	}
	.project-row .project .text > div {
		margin-inline: auto;
	}
	
	.project-divider {
		--gap: 2rem;
		margin-inline: calc(40rem / 36);
	}
	.project-row,
	.project-row:not(.landscape) {
		--gap: 2rem;
		
		width: calc(100% - 20rem / 9);
		margin-inline: calc(40rem / 36);
		
		flex-direction: column;
	} 
	.project-row .portrait,
	.project-row .landscape {
		--image-width: 100% !important;
	}
	.project-row:not(.landscape) .portrait,
	.project-row:not(.landscape) .landscape {
		width: 100%;
	}
		   
		   
	.project-row .project > div:has(.wide-margins) {
		margin-inline: var(--padding);
	}
	.project-row .project.landscape .image.wide-margins img, 
	.project-row.portrait-landscape .image.wide-margins img, 
	.project-row.landscape-portrait .image.wide-margins img,	
	.project-row.portrait-landscape .video.wide-margins iframe,  
	.project-row.landscape-portrait .video.wide-margins iframe,	 
	.project-row .project.landscape .video.wide-margins iframe {
		width: calc(100% - 2 * var(--padding));
	}
	
	.project-row .project .content {
		width: calc(250% / 3);
		max-width: unset;
	}
	
	.project-row .project .mobile { display: block }
	.project-row .project .desktop { display: none }
	
	body[class*="studio"] .content  .text {
		padding-right: calc(var(--padding-inline) + 1rem);
	}
	
	body[class*="studio"] .content .mobile { display: block }
	body[class*="studio"] .content .desktop { display: none }
}
@media screen and (max-width: 800px) {
	.project-row .project .text {
		padding-inline: 0;
	}
	.project-row .project .text > div {
		width: min(100%, 400px);
		padding-inline: 0 calc(var(--gap) + 1rem - var(--padding));
		margin-inline: 0;
	}
}
@media screen and (max-width: 600px) {
	html {
		--padding: calc(16 * 1.1rem / 22);
	}
	
	header {
		padding-inline: var(--padding);
	}
	
	.menubar {
		padding-block: calc(1.15 * var(--padding)) var(--padding);
	}
	
	.menubar .breadcrumbs,
	div:has(#werk) .breadcrumbs,
	div:has(#work) .breadcrumbs {
		font-size: max(20px, 1.1rem);
	}
	div:has(#werk) .breadcrumbs,
	div:has(#work) .breadcrumbs {
		padding: calc(1.15 * var(--padding)) var(--padding) var(--padding);
	}
	.menu-toggle {
		top: var(--padding);
		right: var(--padding);
		translate: 0 -0.075em;
	}
	
	.menubar nav > ul {
		padding-inline: var(--padding);
	}
	main div:has( > #werk ) .intro-text,
	main div:has( > #work ) .intro-text {
		padding-top: 0;
	}
	main > .text, 
	body[class*="studio"] .content {
		padding-inline: var(--padding);
	}
	main > .text p, 
	body[class*="studio"] .content p {
		text-wrap: pretty;
	}
	main > .text p br, 
	main .intro-text p br,
	body[class*="studio"] .content p br {
		display: none;
	}
	body[class*="studio"] .content .mobile-address p br {
		display: block;
	}
	
	body[class*="studio"] .content .text{
		padding-right: 0;
	}
	.project-row,
	.project-row:not(.landscape) {
		width: calc(100% - 2 * var(--padding));
		margin-inline: var(--padding);
	} 
	
	.project-divider {
		margin-inline: calc(16 * 1.1rem / 22);
	}
	
	.project-row .project .text h2 {
		font-size: max(20px, 1.1rem);
	}
	
	.project-row .project .description > div {
		padding: calc(.75 * var(--padding)) calc(1.5 * var(--padding)) 
				 calc(1.5 * var(--padding)) calc(.75 * var(--padding));
	}
	.project-row .project .description .close-button {
		top: calc(.75 * var(--padding));
		left: calc(100% - 1.5 * var(--padding));	
	}
	.project-row .project .description .close-button label {
		font-size: 1rem;
		line-height: 1;
	}
	
	.project-row .project .description > div p {
		font-size: calc(15 * var(--padding) / 16);
		line-height: calc(17 * var(--padding) / 16);
	}
	.project-row .project .description > div h2,
	.project-row .project .description > div p.metatext {
		font-size: calc(.75 * var(--padding));
		line-height: calc(14 * .75 * var(--padding) / 12);
	}
	.project-row .project .description > div h2 {
		margin-bottom: calc(1.5 * var(--padding)); 
	}
	.project-row .project .description > div p.metatext {
		margin-top: calc(1.5 * var(--padding));  
	}
	
	
	header { position: absolute }
	
	#home,
	body[class*="home"] main { 
		height: 100vh;
		height: calc(100vh + env(safe-area-inset-bottom) + env(safe-area-inset-top));
		padding-top: 0;
		margin-block: 0;
		translate: 0 calc(-1 * env(safe-area-inset-top))
	}
	
	#home { margin-bottom: -1px }
	
	body[class*="home"] .homepage-video.cover iframe {
/* 		inset: 0;
		translate: unset; */
/* 		top: 0;
		translate: -50% 0; */
		
		top: 50%;
		left: 50%;
		translate: -50% -50%;
		
/* 		width: auto; */
		min-width: 100%;
		min-height: 100%;
	}
	
}



@media screen and (max-aspect-ratio: 1) {
/* @media screen and (max-aspect-ratio: 4 / 3) { */
	#home .portrait { display: block }
	#home .landscape { display: none }
}
/* @media screen and (max-aspect-ratio: 277 / 390) {
	
	body[class*="home"] .homepage-video iframe {
		height: auto;
		aspect-ratio: 277 / 390;
	}
} */
@media screen and (max-width: 480px) {
	main .intro-text p {
		text-wrap: balance;
	}
}

@supports (padding: max(0px)) {
	main { 
		--padding-inline: max(40rem / 36, env( safe-area-inset-left ));
	}
	@media screen and (max-height: 600px) and (orientation: landscape) {
		main,
		main #home,
		main div:has( > #werk ),
		main div:has( > #work ) { 
			padding-inline: max(40rem / 36, env( safe-area-inset-left ));
		}	
		main:has(#home) {
			padding-inline: 0;
		}
		
		.menu-toggle {
			right: max(env(safe-area-inset-left), 40rem / 36);
		}
		header.menubar {
			width: calc(100% + 2 * env(safe-area-inset-left));
			margin-inline: calc(-1 * env(safe-area-inset-left));
			padding-inline: calc(env(safe-area-inset-left) + 1rem);
		}
		
		.menubar nav > ul {
			padding-inline: max(env(safe-area-inset-left), 40rem / 36);
			
		}
		main .intro-text {
			padding-inline: 0;
		}
		
		.project-row:not(.portrait-portrait) { margin: var(--gap) 0 }
		.project-row .portrait {
			--image-width: calc(0.4 * (100vw - var(--gap) - 2 * env(safe-area-inset-left)));
		}
		.project-row.landscape-landscape .landscape {
			--image-width: calc(0.5 * (100vw - var(--gap) - 2 * env(safe-area-inset-left)));
		}
		.project-row .landscape {
			--image-width: calc(0.6 * (100vw - var(--gap) - 2 * env(safe-area-inset-left)));
		}
		.project-row.landscape .landscape {
			--image-width: calc(100vw - 2 * env(safe-area-inset-left));
		}
		
		div:has( > #werk ) > footer,
		div:has( > #work ) > footer {
			padding-inline: 0; 
		}
	}
}