/**************************************************
		Content
 **************************************************

	00. Externals
	01. Browser Reset
	02. Basic styles
	03. Basic wireframe
	04. Header
	05. Footer
	06. Modules
	07. Home
	08. Archives
	09. Work archives
	10. Director archives
	11. Pages
	12. About page
	13. Single work
	14. Single director
	15. Content
	16. 404
	
	xx. Misc and Wordpress specials


/**************************************************
	00. Externals
 **************************************************/

@font-face {
	font-family: 'Avenir';
	src: url('../../fonts/Avenir-Medium.woff2') format('woff2'),
		 url('../../fonts/Avenir-Medium.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Avenir';
	src: url('../../fonts/Avenir-Heavy.woff2') format('woff2'),
		 url('../../fonts/Avenir-Heavy.woff') format('woff');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Avenir';
	src: url('../../fonts/Avenir-Black.woff2') format('woff2'),
		 url('../../fonts/Avenir-Black.woff') format('woff');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Freigeist';
	src: url('../../fonts/Freigeist-XWideRegular.woff2') format('woff2'),
		 url('../../fonts/Freigeist-XWideRegular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Freigeist';
	src: url('../../fonts/Freigeist-XWideBold.woff2') format('woff2'),
		 url('../../fonts/Freigeist-XWideBold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Freigeist';
	src: url('../../fonts/Freigeist-XWideBlack.woff2') format('woff2'),
		 url('../../fonts/Freigeist-XWideBlack.woff') format('woff');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}





/**************************************************
	01. Browser Reset
 **************************************************/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, ol, ul, li, fieldset, form, label, caption, tr, th, td, canvas, embed, 
figure, figcaption, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

figcaption, figure {
	display: block;
}

blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}



/**************************************************
	02. Basic Styles
 **************************************************/

* {
	box-sizing: border-box;
}

html {
	--vw:			1vw;
	--vh:			1vh;
	--headerHeight: 29.5px;

	--black:		#000000;
	--nobel:		#B7B7B7;
	--cloud:        #C9C9C9;
	--alto:         #D0D0D0;
	--white:		#FFFFFF;

	--bgColor:      var(--white);
	--fgColor:      var(--black);

	--maxWidth:     1920px;
	--wrapperPad:   1.5rem;
}

html, body {
	margin: 0px;
	padding: 0px;
	min-width: 100%;
	min-height: 100%;
	font-size: 10px;
	
	/*scroll-behavior: smooth;*/
	overscroll-behavior: none;
	-webkit-overflow-scrolling: auto;
	-webkit-tap-highlight-color: transparent;
}

body {
	position: relative;

	color: var(--black);
	background: var(--white);
	font-family: 'Avenir', sans-serif;
	font-weight: 400;
	word-spacing: 0.01em;
	
	line-height: 1.1;
	-webkit-text-size-adjust: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	hanging-punctuation: force-end;
	word-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
	-webkit-column-break-after: avoid;
	-moz-column-break-after: avoid;
	break-after: avoid;
}

p {
	margin-bottom: 1.1em;
	hanging-punctuation: force-end;
}

p:last-child, p:empty {
	margin-bottom: 0;
}

ul, ol {
	list-style-type: none;
	list-style-position: outside;
}

img, iframe {
	outline: 0;
	display: block;
	user-select: none;
}

strong, b {
	font-weight: 500;
}

em, i {
	font-style: oblique;
}

a {
	text-decoration: none;
}

a, a:link, a:active, a:visited, a:focus {
	color: var(--black);
}

a:hover {
	outline: none;
}


img.lazy {
	position: static;
	opacity: 0;

	transition: opacity 0.75s ease;
}

img.lazy.loaded,
.no-js noscript img.lazy {
	opacity: 1;
}

.no-js img.lazy[data-src] {
	display: none;
}

.uc {
	text-transform: uppercase;
	letter-spacing: 0.03em;
	word-spacing: 0.03em;
}

::selection {
	color: var(--gray);
	background: transparent;
}

::-moz-selection {
	color: var(--gray);
	background: transparent;
}

.is-ss        { font-family: 'Avenir', sans-serif; }
.is-highlight { font-family: 'Freigeist', sans-serif; }

.is-light     { font-weight: 300; }
.is-heavy     { font-weight: 600; }

.alpha { font-size: 0.9rem; line-height: 1.3333; }		/* Layout @ 1920px: 12px */
.beta  { font-size: 1.0rem; line-height: 1.4286; }		/* Layout @ 1920px: 14px */
.gamma { font-size: 1.0rem; line-height: 1.1875; }		/* Layout @ 1920px: 16px */
.delta { font-size: 1.6rem; line-height: 1.3750; }		/* Layout @ 1920px: 32px */


@media (min-width: 550px) {

	.alpha { font-size: 0.90rem; line-height: 1.3333; }		/* Layout @ 1920px: 12px */
	.beta  { font-size: 1.05rem; line-height: 1.4286; }		/* Layout @ 1920px: 14px */
	.gamma { font-size: 1.20rem; line-height: 1.1875; }		/* Layout @ 1920px: 16px */
	.delta { font-size: 2.40rem; line-height: 1.3750; }		/* Layout @ 1920px: 32px */
}


@media (min-width: 1440px) {
	html {
		--wrapperPad:   4rem;

		font-size: calc(100vw / 1440px * 10px);
	}
}




/**************************************************
	03. Basic wireframe
 **************************************************/

.wrapper {
	--grid-row-gap:   2rem;
	--grid-col-gap:   2rem;
	--grid-padding:   var(--wrapperPad);
	--grid-width:     clamp(1px, 100 * var(--vw), calc(var(--maxWidth) + 2 * var(--wrapperPad)));
	--grid-col-count: 14;

	--grid-col:   calc(1 / var(--grid-col-count) * (var(--grid-width) - 2 * var(--grid-padding) - (var(--grid-col-count) - 1) * var(--grid-col-gap)));
	--grid-col2:  calc(2  * var(--grid-col) + var(--grid-col-gap));
	--grid-col3:  calc(3  * var(--grid-col) +  2 * var(--grid-col-gap));
	--grid-col4:  calc(4  * var(--grid-col) +  3 * var(--grid-col-gap));
	--grid-col5:  calc(5  * var(--grid-col) +  4 * var(--grid-col-gap));
	--grid-col6:  calc(6  * var(--grid-col) +  5 * var(--grid-col-gap));
	--grid-col7:  calc(7  * var(--grid-col) +  6 * var(--grid-col-gap));
	--grid-col8:  calc(8  * var(--grid-col) +  7 * var(--grid-col-gap));
	--grid-col9:  calc(9  * var(--grid-col) +  8 * var(--grid-col-gap));
	--grid-col10: calc(10 * var(--grid-col) +  9 * var(--grid-col-gap));
	--grid-col11: calc(11 * var(--grid-col) + 10 * var(--grid-col-gap));
	--grid-col12: calc(12 * var(--grid-col) + 11 * var(--grid-col-gap));
	--grid-col13: calc(13 * var(--grid-col) + 12 * var(--grid-col-gap));
	--grid-col14: calc(14 * var(--grid-col) + 13 * var(--grid-col-gap));

	display: flex;
	flex-direction: column;
	min-height: calc(100 * var(--vh));
	padding: 0 var(--wrapperPad);
}

.wrapper.grid-debug:before {
	content: '';
	position: fixed;
	top: 0;
	left: var(--grid-padding);
	width: calc(var(--grid-width) - 2 * var(--grid-padding));
	height: calc(100 * var(--vh));

	display: block;
	--wrapperDebugColor: rgba(255, 0, 0, 0.03);
	background: repeating-linear-gradient(90deg,
		var(--wrapperDebugColor),
		var(--wrapperDebugColor) var(--grid-col),
		transparent var(--grid-col),
		transparent calc(var(--grid-col) + var(--grid-col-gap))
	);

	pointer-events: none;
}

.main {
	min-height: calc(100 * var(--vh));
}

.main .module:last-child {
	margin-bottom: 0;
}

.grid {
	display: grid;
	width: 100%;
	grid-template-columns: repeat(var(--grid-col-count), 1fr);
	grid-gap: var(--grid-row-gap) var(--grid-col-gap);
}



@media (min-width: 1920px) {
	.wrapper {
		--grid-col: calc(1 / var(--grid-col-count) * (var(--grid-width) - 2 * var(--grid-padding) - (var(--grid-col-count) - 1) * var(--grid-col-gap)));
		padding: 0 calc(50 * var(--vw) - 0.5 * var(--maxWidth) + var(--grid-padding));
	}

	.wrapper.grid-debug:before {
		left: calc(50 * var(--vw) - 0.5 * var(--maxWidth) + var(--grid-padding));
	}
}




/**************************************************
	04. Header
 **************************************************/

.header {
	position: fixed;
	top: var(--wrapperPad);
	left: 0;
	width: calc(100 * var(--vw));
	z-index: 2;

	display: flex;
	justify-content: space-between;
	flex-direction: column;

	padding: 0 var(--wrapperPad);
	pointer-events: none;
}

.header .header-logo {
	width: 17.7rem;
	pointer-events: all;
}

.header .header-logo svg {
	fill: var(--alto);
	transition: fill 0.25s ease;
}

.header .header-logo:hover svg {
	fill: var(--fgColor);
}

.header .header-menu {
	position: relative;

	display: flex;
	align-items: center;
	pointer-events: all;
}

.header .menu-inner {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.7rem;
}

.header .menu-item {
	position: relative;
}

.header .menu-item > a {
	position: relative;
	z-index: 2;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;

	color: var(--nobel);
}

.header .menu-item.active > a,
.header .menu-item:hover > a,
.header .menu-item:has(li.active) > a {
	font-weight: 900;
}

.header .menu-item > a:after {
	content: attr(data-text);
	content: attr(data-text)/"";
	height: 0;
	visibility: hidden;
	overflow: hidden;
	user-select: none;
	pointer-events: none;
	font-weight: 900;
}

.header .sub-menu {
	position: fixed;
	top: calc(var(--wrapperPad) + var(--headerHeight));
	left: 0;
	width: max-content;
	z-index: 1;

	display: grid;
	grid-template-columns: auto auto;
	gap: 0.5rem 0.5rem;
	padding-top: 1rem;

	opacity: 0;
	pointer-events: none;
	transition: opacity;
}

body.about .header .sub-menu {
	background-color: var(--bgColor);
}

.header .menu-item.active .sub-menu,
.header .menu-item:hover .sub-menu,
.header .menu-item:has(li.active) .sub-menu {
	opacity: 1;
	pointer-events: all;
}

.header .sub-menu a {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	padding: 0 1.5rem;

	color: var(--fgColor);
	opacity: 0.25;
	transition: opacity 0.25s ease;
}

.header .sub-menu li.active a,
.header .sub-menu a:hover {
	font-weight: 900;
	opacity: 1;
}

.header .sub-menu a:after {
	content: attr(data-text);
	content: attr(data-text)/"";
	height: 0;
	visibility: hidden;
	overflow: hidden;
	user-select: none;
	pointer-events: none;
	font-weight: 900;
}

@media speech {
	.header .menu-item > a:after,
	.header .sub-menu a:after {
		display: none;
	}
}


@media (min-width: 550px) {
	.header {
		flex-direction: row;
	}

	.header .sub-menu {
		left: initial;
		right: var(--wrapperPad);
	}
}

@media (min-width: 1440px) {
	.header {
		display: grid;
		top: 50%;
		transform: translateY(-50%);
	}

	.header .header-logo {
		grid-column: 1 / span 2;
	}

	.header .header-menu {
		left: -1.8rem;
		grid-column: 11 / span 4;
		width: calc(100% + 3.6rem);
	}

	.header .menu-item > a {
		padding: 0 1.5rem;
	}

	.header .sub-menu {
		position: absolute;
		top: 0;
		right: initial;

		gap: 1.6rem 0.5rem;
		padding-top: 5.8rem;
	}
}




/**************************************************
	05. Footer
 **************************************************/

.footer {

}




/**************************************************
	06. Modules
 **************************************************/




/**************************************************
	07. Home
 **************************************************/

/***	Home player		***/

.module-homeplayer {
	position: relative;
	min-height: calc(100 * var(--vh));
	padding: calc(2 * var(--wrapperPad) + var(--headerHeight)) 0 var(--wrapperPad);
}

.module-homeplayer .home-player-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	grid-column: 1 / span 14;
	min-height: max(45rem, calc(100 * var(--vh) - 2 * var(--wrapperPad) - 4rem));
}

.hls-video {
	--padding: 2.5rem;
	--playerFontFamily: "Avenir", sans-serif;
	--playerFontSize: 0.9rem;
	--playerFg: var(--white);
	--segments2Width:   2.5em;
	--segments3Width:   3.9em;

	width: 100%;
	height: auto;
	transition: width 0.1s linear, height 0.1s linear;
}

.module-homeplayer .hls-video {
	aspect-ratio: 16 / 9;
}

.module-homeplayer .hls-video video {
	object-fit: cover;
}

.hls-video .video-right-controls {
	justify-content: end;
}

.hls-video.is-fullscreen {
	position: fixed;
	top: 0;
	left: 0;
	width: calc(100 * var(--vw));
	height: calc(100 * var(--vh));
	z-index: 2;
}

.hls-video.is-stalling .loading-indicator {
	width: 9rem;
	padding: 0;
	aspect-ratio: 510 / 71;
	transform-origin: center;
	border-radius: 0;

	background-color: transparent;
	background-image: url("../../img/logo-white.svg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	mask: none;

	animation: breathe 3s infinite ease-in-out;
}

@keyframes breathe {
	0%   { transform: translate(-50%, -50%) scale(1.0); opacity: 0.75; }
	50%  { transform: translate(-50%, -50%) scale(1.1); opacity: 1.00 }
	100% { transform: translate(-50%, -50%) scale(1.0); opacity: 0.75; }
}

.hls-video video {
	width: 100%;
	height: auto;
	transition: width 0.1s linear, height 0.1s linear;
}

.hls-video .video-controls {
	padding: 1rem;
	background: transparent;
}

.hls-video .video-controls {
	display: grid;
	grid-template-columns: 1fr 9rem;
	gap: 2rem;

	transform: none;
	transition: opacity 0.5s ease, visibility 0.5s ease;
}

.hls-video.is-fullscreen .video-controls {
	display: grid;
	grid-template-columns: 1fr minmax(200px, 500px) 1fr;
	gap: 2rem;
}

.hls-video.is-fullscreen.hide-controls .video-controls {
	opacity: 0;
	pointer-events: none;
	transform: none;
}

.hls-video.is-fullscreen .video-time-controls {
	grid-column: 2;
}

.hls-video .video-progress,
.hls-video .video-progress-buffer {
	height: 0.3rem;
}

.hls-video .video-progress-hint {
	top: calc(-1.3rem - var(--padding));
}

.hls-video .btn-mute,
.hls-video.is-muted .btn-mute,
.hls-video.is-half-volume .btn-mute {
	width: auto;
	background-image: none;
	text-transform: uppercase;
	text-align: right;
}

.hls-video .video-controls.no-audio .btn-mute {
	display: block;
}

.hls-video .btn-mute:before {
	content: 'Sound on';
	color: var(--playerFg);
	font-size: var(--playerFontSize);
	font-family: var(--playerFontFamily);
}

.hls-video.is-muted .btn-mute:before {
	content: 'Sound off';
}



.module-homeplayer .home-player-info {
	width: 100%;
	text-align: left;
}

.module-homeplayer .home-player-info a {
	display: block;
	width: max-content;
}

.module-homeplayer .hls-video.is-fullscreen + .home-player-info {
	position: fixed;
	left: 2.5rem;
	bottom: 2.5rem;

	color: var(--white);
	z-index: 3;
	transition: opacity 0.5s ease, visibility 0.5s ease;
}

.module-homeplayer .hls-video.is-fullscreen.hide-controls + .home-player-info {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.module-homeplayer .hls-video.is-fullscreen + .home-player-info a {
	color: var(--white);
}

.module-homeplayer.show-director:not(:has(.hls-video.is-fullscreen)) .home-player-director {
	display: none;
}

.module-homeplayer .home-player-nav {
	display: none;
}

.module-homeplayer.show-home .home-player-nav {
	position: absolute;
	left: 50%;
	bottom: 2rem;
	transform: translateX(-50%);

	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2.9rem;
	grid-column: 5 / span 6;
}

.module-homeplayer .home-player-nav span {
	opacity: 0.25;
	cursor: pointer;
	transition: opacity 0.25s ease;
}

.module-homeplayer .home-player-nav span.active,
.module-homeplayer .home-player-nav span:hover {
	opacity: 1;
}

.module-homeplayer .home-player-previews {
	display: none;
}

.module-homeplayer.show-director .home-player-previews {
	--maxCount: 6;
	--currentZoom: 1.4;
	--gap: 0.7rem;
	--width: calc((100% - (var(--maxCount) - 1) * var(--gap)) / (var(--maxCount) - 1 + var(--currentZoom)));

	position: absolute;
	left: 50%;
	bottom: 2rem;
	transform: translateX(-50%);

	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: var(--gap);
	width: var(--grid-col6);
}

.module-homeplayer .home-player-previews .director-preview {
	width: var(--width);
	aspect-ratio: 16 / 9;
	cursor: pointer;
	transition: width 0.25s ease;
}

.module-homeplayer .home-player-previews .director-preview.active {
	width: calc(var(--width) * var(--currentZoom));
}

.module-homeplayer .home-player-previews .director-preview video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}


@media (min-width: 1440px) {
	.module-homeplayer {
		padding: var(--wrapperPad) 0;
	}

	.module-homeplayer .home-player-inner {
		grid-column: 5 / span 6;
	}
}




/****	Blog posts	****/

.module-homeblogposts.hide {
	display: none;
}

.module-homeblogposts {
	margin-top: 8rem;
	padding-bottom: calc(50 * var(--vh) - 0.5 * var(--headerHeight));
}

.blog-inner {
	grid-row-gap: 8rem;
}

.blog-inner .blog-card {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	grid-column: 1 / -1;
}

.blog-inner .blog-card-subline {
	margin-top: -0.7rem;
}



.blog-card.blog-card-slider {
	grid-column: 1 / span 14;
	overflow: hidden;
}

.blog-card-slider .blog-card-slidercontainer {
	position: relative;
	width: 100%;
	overflow-x: hidden;
}

.blog-card-slider .slider-inner {
	position: relative;
	left: 0;

	display: flex;
	align-items: center;
	gap: var(--grid-row-gap) var(--grid-col-gap);
	transition: transform 0.5s ease;
}

.blog-card-slider .slider-inner.is-resizing {
	transition: none;
}

.blog-card-slidercontainer .slide {
	flex-shrink: 0;
	width: var(--grid-col14);
	aspect-ratio: 1263 / 937;
}

.blog-card-slidercontainer .slide.active {
	cursor: default;
}

.blog-card.blog-card-slider:hover .slide:not(.active) {
	cursor: pointer;
}

.blog-card-slidercontainer .slide:has(.portrait) {
	width: var(--grid-col9);
	aspect-ratio: 777 / 915;
}

.blog-card-slidercontainer .slide img,
.blog-card-slidercontainer .slide video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.blog-card-slidercontainer .slider-nav {
	position: absolute;
	top: 0;
	left: var(--wrapperPad);
	width: calc(100% - 2 * var(--wrapperPad));
	height: 100%;

	display: flex;
	justify-content: space-between;
	align-items: center;
	pointer-events: none;
}

.blog-card-slidercontainer .slider-nav .slider-nav-prev,
.blog-card-slidercontainer .slider-nav .slider-nav-next {
	position: relative;
	width: 3rem;
	height: 3rem;
	pointer-events: all;
	cursor: pointer;
}

.blog-card-slidercontainer .slider-nav .slider-nav-prev:before,
.blog-card-slidercontainer .slider-nav .slider-nav-next:before {
	content: '';

	position: absolute;
	top: 50%;
	left: 50%;

	display: block;
	width: calc(100% - 2rem);
	height: calc(100% - 2rem);
	border-left: 0.1rem solid var(--white);
	border-top: 0.1rem solid var(--white);
	transform: translate(-50%, -50%) rotateZ(-45deg);
}

.blog-card-slidercontainer .slider-nav .slider-nav-next:before {
	transform: translate(-50%, -50%) rotateZ(135deg);
}



.blog-card-videoplayer .hls-video.is-fullscreen .video-controls,
.blog-card-videoplayer .hls-video .video-controls {
	display: grid;
	grid-template-columns: auto minmax(100px, 500px) auto;
	background: transparent;
}

.blog-card-videoplayer .hls-video:not(.is-fullscreen) .video-controls {
	--padding: 1rem;
	opacity: 1;
	pointer-events: all;
}

.blog-card-videoplayer .hls-video .btn-fullscreen {
	position: relative;
	top: 0;
	right: 0;
	width: calc(1.25 * var(--btnSize));
	height: calc(0.6875 * var(--btnSize));
	border: 0.1rem solid var(--playerFg);
	color: var(--playerFg);
}

.blog-card-videoplayer .hls-video .btn-fullscreen:before {
	content: none;
}






.blog-card-wideimage {
	width: 100%;
}

.blog-card-twoimagestext .blog-card-inner {
	display: flex;
	align-items: start;
	justify-content: space-between;
	flex-direction: column;
	gap: 1.5rem;
}

.blog-card-twoimagestext .blog-card-sideimage {
	width: 100%;
}

.blog-card-twoimagestext .blog-card-sideimage img,
.blog-card-twoimagestext .blog-card-sideimage video {
	width: 100%;
	height: auto;
}

.blog-card-wideimage img,
.blog-card-wideimage video {
	width: 100%;
	height: auto;
}

@media (min-width: 600px) {
	.blog-card-twoimagestext .blog-card-inner {
		flex-direction: row;
	}

	.blog-card-twoimagestext .blog-card-sideimage,
	.blog-card.blog-card-twoimagestext .blog-card-content {
		width: calc(50% - 0.75rem);
	}
}



.blog-card-image {
	width: 100%;
	margin-bottom: 1.0rem;
}

.blog-card-image img,
.blog-card-image video {
	width: 100%;
	height: auto;
}

.blog-card.blog-card-content {
	width: 100%;
	max-width: 60rem;
	margin: 0 auto;
}

.blog-card .blog-card-content {
	width: 100%;
	max-width: 60rem;
}

.blog-card .content strong {
	font-weight: 600;
}

.blog-card .content a {
	text-decoration: underline;
	transition: text-decoration-color 0.25s ease;
}

.blog-card .content a:hover {
	text-decoration-color: transparent;
}


@media (min-width: 1440px) {
	.blog-inner .blog-card {
		grid-column: 4 / span 8;
	}

	.blog-inner .blog-card.col-start-1 { grid-column-start: 1; }
	.blog-inner .blog-card.col-start-2 { grid-column-start: 2; }
	.blog-inner .blog-card.col-start-3 { grid-column-start: 3; }
	.blog-inner .blog-card.col-start-4 { grid-column-start: 4; }
	.blog-inner .blog-card.col-start-5 { grid-column-start: 5; }
	.blog-inner .blog-card.col-start-6 { grid-column-start: 6; }
	.blog-inner .blog-card.col-start-7 { grid-column-start: 7; }
	.blog-inner .blog-card.col-start-8 { grid-column-start: 8; }
	.blog-inner .blog-card.col-start-9 { grid-column-start: 9; }
	.blog-inner .blog-card.col-start-10 { grid-column-start: 10; }
	.blog-inner .blog-card.col-start-11 { grid-column-start: 11; }
	.blog-inner .blog-card.col-start-12 { grid-column-start: 12; }
	.blog-inner .blog-card.col-start-13 { grid-column-start: 13; }
	.blog-inner .blog-card.col-start-14 { grid-column-start: 14; }

	.blog-inner .blog-card.col-span-1 { grid-column-end: span 1; }
	.blog-inner .blog-card.col-span-2 { grid-column-end: span 2; }
	.blog-inner .blog-card.col-span-3 { grid-column-end: span 3; }
	.blog-inner .blog-card.col-span-4 { grid-column-end: span 4; }
	.blog-inner .blog-card.col-span-5 { grid-column-end: span 5; }
	.blog-inner .blog-card.col-span-6 { grid-column-end: span 6; }
	.blog-inner .blog-card.col-span-7 { grid-column-end: span 7; }
	.blog-inner .blog-card.col-span-8 { grid-column-end: span 8; }
	.blog-inner .blog-card.col-span-9 { grid-column-end: span 9; }
	.blog-inner .blog-card.col-span-10 { grid-column-end: span 10; }
	.blog-inner .blog-card.col-span-11 { grid-column-end: span 11; }
	.blog-inner .blog-card.col-span-12 { grid-column-end: span 12; }
	.blog-inner .blog-card.col-span-13 { grid-column-end: span 13; }
	.blog-inner .blog-card.col-span-14 { grid-column-end: span 14; }


	.blog-inner .blog-card.blog-card-slider {
		grid-column: 1 / span 14;
	}

	.blog-card-slider .blog-card-info {
		position: relative;
		left: calc(var(--grid-col4) + var(--grid-col-gap));
	}

	.blog-card-slider .slider-inner {
		position: relative;
		left: calc(var(--grid-col4) + var(--grid-col-gap));
	}

	.blog-card-slidercontainer .slide {
		width: var(--grid-col8);
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.5s ease;
	}

	.blog-card-slidercontainer .slide.active {
		cursor: default;
		opacity: 1;
		pointer-events: all;
	}

	.blog-card.blog-card-slider:hover .slide:not(.active) {
		cursor: pointer;
		opacity: 0.1;
		pointer-events: all;
	}

	.blog-card-slidercontainer .slide:has(.portrait) {
		width: var(--grid-col5);
		aspect-ratio: 777 / 937;
	}

	.blog-card-slidercontainer .slider-nav {
		display: none;
	}
}






/**************************************************
	08. Archives
 **************************************************/



/**************************************************
	09. Work archives
 **************************************************/

.module-worksarchive {
	min-height: calc(100 * var(--vh));
}

.module-worksarchive .works-archive-inner {
	--width: var(--grid-col3);

	display: grid;
	min-height: calc(100 * var(--vh));
	padding-top: 18.6rem;
	padding-bottom: 18.6rem;
	grid-template-columns: repeat(3, var(--width));
	justify-content: space-between;
	align-items: start;
	grid-row-gap: 22rem;
}

.module-worksarchive .post-card {
	width: 100%;
}

.module-worksarchive .post-card-thumb {
	width: 100%;
	aspect-ratio: 16 / 9;
}

.module-worksarchive .post-card-thumb a {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
}

.module-worksarchive .post-card-thumb video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.module-worksarchive .post-card-info {
	margin-top: 0.8rem;
}




.module-worksarchive .works-archive-player {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	background: var(--black);
}

.module-worksarchive .works-archive-player.hide {
	opacity: 0;
	pointer-events: none;
}

.module-worksarchive .works-archive-player .hls-video {
	width: 100%;
	height: 100%;
}

.module-worksarchive:has(.hls-video.is-fullscreen) .is-playing-large .post-card-info {
	position: fixed;
	left: 2.5rem;
	bottom: 2.5rem;

	flex-direction: column;
	color: var(--white);
	z-index: 3;
	pointer-events: none;
	transition: opacity 0.5s ease, visibility 0.5s ease;
}

.module-worksarchive:has(.hls-video.is-fullscreen.hide-controls) .is-playing-large .post-card-info {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.module-worksarchive:has(.hls-video.is-fullscreen) .is-playing-large .post-card-info a {
	color: var(--white);
}





/**************************************************
	10. Director archives
 **************************************************/




/**************************************************
	11. Pages
 **************************************************/





/**************************************************
	12. About page
 **************************************************/

.module-about {
	display: flex;
	justify-content: space-between;
	min-height: calc(100 * var(--vh));
	padding-top: 2.3rem;
	padding-bottom: 2.3rem;
	gap: var(--grid-col-gap);
}

.module-about .about-info {
	width: var(--grid-col4);
	padding-top: calc(50 * var(--vh) - var(--headerHeight));
	text-indent: calc(var(--grid-col2) + 1rem);
	line-height: 1.9375;
}

.module-about .about-inner {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: var(--grid-col7);
	gap: var(--grid-row-gap);
}

.module-about .about-contact {
	min-height: calc(50 * var(--vh) + var(--headerHeight));
}

.module-about .about-title {
	margin-bottom: 1rem;
}

.module-about .about-contact-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--grid-col-gap);
}

.module-about .about-contact-office {
	width: var(--grid-col2);
}

.module-about .about-misc {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: var(--grid-col2);
}

.module-about .about-contact-office > span,
.module-about .about-career > span {
	display: block;
}

.module-about .about-contact a {
	text-decoration: underline;
	transition: text-decoration-color 0.25s ease;
}

.module-about .about-contact a:hover {
	text-decoration-color: transparent;
}

.module-about .about-legal {
	position: relative;
}

.module-about .about-legal-toggle {
	cursor: pointer;
}

.module-about .about-legal-inner {
	position: absolute;
	top: 4rem;
	right: 0;
	width: var(--grid-col6);
	max-height: calc(50 * var(--vh) - var(--grid-padding) - var(--headerHeight) - 12rem);
	overflow-y: scroll;

	opacity: 0;
	pointer-events: none;
}

.module-about .about-legal.show .about-legal-inner {
	opacity: 1;
	pointer-events: all;
}

.module-about .about-staff-inner {
	display: grid;
	grid-template-columns: repeat(4, 1fr) auto;
	align-items: start;
	gap: var(--grid-row-gap) var(--grid-col-gap);
}





/**************************************************
	13. Single work
 **************************************************/




/**************************************************
	14. Single director
 **************************************************/





/**************************************************
	15. Content
 **************************************************/





/**************************************************
	16. 404
 **************************************************/

.main.page-404 {
	--bgColor: var(--black);
	--fgColor: var(--white);

	position: relative;

	min-height: calc(100 * var(--vh));
	color: var(--fgColor);
}

body.error404 .wrapper {
	padding: 0;
}

.main.page-404 .modules {
	position: relative;	

	height: calc(100 * var(--vh));
	overflow: scroll;
	scroll-snap-type: y mandatory;
	color: var(--fgColor);
	background-color: var(--bgColor);
}

.module-404 {
	padding: 2rem var(--wrapperPad);
	background-color: var(--bgColor);
}

.module-404 .pitch-supertitle {
	width: 100%;
	text-align: right;
}

.module-404 .pitch-title {
	width: 100%;
	margin: 0 0 -0.5em;
	text-align: right;
	color: transparent;
	text-stroke: 1px var(--fgColor);
	-webkit-text-stroke: 1px var(--fgColor);
	transition: color 0.25s ease;
}

.module-404 .pitch-title:hover {
	color: var(--white);
}

.module-404 .pitch-title::selection {
	color: transparent;
	background: transparent;
}

.module-404 .pitch-title::-moz-selection {
	color: transparent;
	background: transparent;
}

.module-404 .pitch-logo {
	position: fixed;
	bottom: 1.6rem;
	left: 50%;
	z-index: 2;
	transform: translateX(-50%);

	width: 5rem;
	height: 1.6rem;
	border: 1px solid var(--fgColor);
	padding: 0 0.6rem;
	will-change: transform;
	perspective-origin: 3d;
}

.module-404 .pitch-logo.static {
	position: relative;
}

.module-404 .pitch-logo svg {
	width: 100%;
	height: 100%;
}

.module-404 .pitch-logo svg path {
	fill: var(--fgColor);
}



@media (min-width: 700px) {
	.module-404 {
		padding: 9.5rem var(--wrapperPad) 1.8rem;
	}

	.module-404 .pitch-title {
		margin: -0.11em 0 -0.5em;
	}
}

@media (min-width: 1440px) {
	.module-404 .pitch-title {
		text-stroke: calc(0.06944444444 * var(--vw)) var(--fgColor);
		-webkit-text-stroke: calc(0.06944444444 * var(--vw)) var(--fgColor);
	}
}


@media (min-width: 1920px) {
	body.error404 .wrapper {
		padding: 0;
	}
}





/**************************************************
	xx. Misc and Wordpress specials
 **************************************************/


.cover-container{
	position: relative;
	overflow: hidden;
}

.cover-container img,
.cover-container video {
	width: 100%;
	height: 100%;
	object-position: center;
	object-fit: cover;
}