@font-face {
	font-family: "Sectra";
	font-weight: 400;
	src: url("sectra/GT-Sectra-Book.eot");
	src: url(sectra/GT-Sectra-Book.woff2) format('woff2'), url(sectra/GT-Sectra-Book.woff) format('woff');
}

@font-face {
	font-family: "Sectra";
	font-weight: 600;
	src: url("sectra/GT-Sectra-Medium.eot");
	src: url(sectra/GT-Sectra-Medium.woff2) format('woff2'), url(sectra/GT-Sectra-Medium.woff) format('woff');
}

@font-face {
	font-family: "Sectra";
	font-weight: 800;
	src: url("sectra/GT-Sectra-Black.eot");
	src: url(sectra/GT-Sectra-Black.woff2) format('woff2'), url(sectra/GT-Sectra-Black.woff) format('woff');
}

* {
	padding: 0;
	margin: 0;
}

html {
	scroll-behaviour: smooth;
}

@keyframes fadein {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

p {
	padding-bottom: 1em;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}

body {
	font-family: Sectra;
	background-color: var(--dark);
	color: var(--light);
	line-height: 1.4;
}

body.entry:not(.contact) {
	background-color: var(--light);
	color: var(--dark);
}

main>nav:not(#prevnext)>* {
	display: block;
	position: relative;
	padding: 1.5em;
	padding-top: 0;
	text-decoration: none;
	transition: color 0.3s ease;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	min-height: 4em;
}

nav.related>a:before, main>nav:not(#prevnext)>*:before {
	content: " ";
	width: 2rem;
	height: 2rem;
	display: inline-block;
	border: 2px solid;
	border-radius: 50%;
	transition: background-color 0.3s ease;
	position: absolute;
	left: -2em;
	top: -0.25rem;
}

main>nav {
	padding-top: 3em;
	padding-left: 3em;
}

main>nav>*:hover {
	color: var(--highlight);
}

main>nav>a.active:before, main>nav:not(#prevnext)>*:hover:before {
	background-color: var(--highlight);
}

#main-nav {
	padding: 1em;
}

#main-nav a {
	display: inline-block;
	padding: 0.5em;
	text-decoration: none;
	transition: color 0.2s ease;
	font-weight: 200;
}

#main-nav svg {
	padding: 0 2em 0 0;
	width: 12em;
	height: 1.5em;
}

#main-nav>a:hover svg {
	padding: 0 0 0 2em;
	transform: rotate(180deg);
	cursor: n-resize;
	cursor: ns-resize;
}

#main-nav svg * {
	fill: currentColor;
}

nav.related {
	grid-column: 2 / 4;
	grid-row: 1 / 3;
	display: flex;
	flex-direction: column;
	padding: 4em 0;
	font-size: 0.8em;
	animation: fadein 0.5s ease 1.5s both;
}

nav.related a {
	padding: 0.2em 0 1.5em 1em;
	display: flex;
	flex-direction: row;
	align-items: center;
	position: relative;
	text-decoration: none;
}

::placeholder {
	color: inherit;
}

#mc-embedded-subscribe-form {
	display: grid;
	grid-gap: 0.5rem;
	grid-template-columns: 1fr 1fr;
}

#mce-responses, #mc-embedded-subscribe-form label {
	display: none;
}

#mce-EMAIL,#mc-embedded-subscribe {
	grid-column-end: span 2;
}

#mc-embedded-subscribe-form input {
	outline: 0;
	background: inherit;
	border: 2px solid;
	transition: background 0.3s ease, color 0.3s ease;
	padding: 0.7rem;
	font-family: inherit;
	color: inherit;
}

#mc-embedded-subscribe-form input:focus, #mc-embedded-subscribe:hover {
	background: var(--highlight);
	color: white;
}

#main-nav>a:hover:not(:first-child), nav.related, .active {
	color: var(--highlight);
}

header>nav>ul, footer>nav>ul {
	display: flex;
	flex-wrap: wrap;
}

header>nav>ul>li, footer>nav>ul>li {
	list-style: none;
}

header>nav>ul>li>a, footer>nav>ul>li>a {
	text-decoration: none;
	display: block;
	padding: 1em;
	margin: 1px;
	border: 2px solid;
	min-height: 4em;
}

a {
	color: inherit;
}

figure.dummy:after, body.contact h1 {
	font-weight: 600;
	font-size: 4em;
}

#main-nav>a:first-child {
	display: block;
	padding-top: 7em;
}

#prevnext {
	justify-content: center;
	align-items: center;
	display: inline-block;
}

#prevnext>span {
	display: block;
	width: 1.5em;
	margin: 0 0.2em;
	border-top: 1px solid;
}

#prevnext>a {
	text-decoration: none;
	padding: 1em;
	display: inline-block;
	transition: transform 0.2s ease;
}

#prevnext>a:hover {
	transform: scale(1.1);
}

#prevnext>a[rel=next]:after, #prevnext>a[rel=prev]:before {
	display: inline-block;
	content: "";
	width: 0;
	height: 0;
	margin: 0 0.5em;
}

#prevnext a[rel=prev]:before {
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-bottom: 10px solid;
}

#prevnext a[rel=next]:after {
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-top: 10px solid;
}

main {
	padding-bottom: 10em;
	padding-bottom: 1em;
}

main>section.text {
	grid-column: 4 / 6;
	max-width: 80ch;
}

section.text+main>section.text:nth-child(2n+3) {
	grid-column: 5 / 6;
}

main>section.text:nth-child(3n+0) {
	grid-column: 3 / 6;
}

main>header>h1, main>header>time {
	font-size: 1.5em;
	font-weight: 800;
	padding: 1.5rem;
}

main>h1~h3 {
	padding-top: 10em;
	font-weight: 600;
}

main>div.visual {
	grid-column: 1 / -1;
	padding: 4em 0;
}

main>div.visual>figure {
	line-height: 0;
}

section>h3 {
	text-transform: uppercase;
	font-weight: 600;
	padding-bottom: 1em;
}

section.images {
	grid-column: main;
	margin-bottom: 4em;
	margin-top: 4em;
}

figure {
	width: 100%;
	position: relative;
	background-color: var(--highlight);
	transition: background-color 0.3s ease;
}

figure:not(:hover):before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: var(--dark);
	mix-blend-mode: lighten;
}

figure.dummy:before {
	background-color: transparent;
}

div.visual>figure.dummy,section.dummy>figure>div {
	min-height: 30em;
	min-width: 30em;
	background-color: unset;
	background-image: url(frame.svg);
	background-repeat: no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
}

section.dummy figure:before {
	background-color: unset;
}

figure[data-label]:after {
	content: attr(data-label);
	padding-bottom: 0.2em;
	font-weight: 200;
}

section.dummy figure {
	background-color: unset;
}

figure:not(:hover)>img{
	filter: grayscale(1);
	mix-blend-mode: darken;
}

figure>img {
	width: 100%;
}

section.images.three {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
}

figure:hover {
	background: none;
}

figure:hover img {
	mix-blend-mode: unset;
}

::-moz-selection {
	background: var(--highlight);
}

::selection {
	background: var(--highlight);
}

figcaption {
	display: inline-block;
	padding: 1em;
	max-width: calc(50% - 2em);
}

figure {
	display: flex;
	align-items: flex-start;
	position: relative;
}

figure>figcaption {
	background: var(--highlight);
	position: absolute;
	right: 0;
	bottom: 0;
	display: flex;
	padding: 1em;
}

figure:hover>figcaption {
	background: var(--light);
}

section.text {
	padding: 1em;
}

@media (min-width: 44em) {
	#prevnext {
		transform: rotate(-90deg);
	}

	main>header>h1, main>header>time {
		font-size: 4vw;
		line-height: 1;
		padding: 1.5rem 0 0;
	}

	main>header {
		padding: 1em;
		grid-column: 4 / -1;
		position: -webkit-sticky;
		position: sticky;
		top: 0em;
	}

	main>nav:not(#prevnext)>* {
		padding-top: 0;
		padding-right: 3em;
		font-size: 1.2em;
		animation-name: fadein;
		animation-duration: 1s;
		animation-fill-mode: both;
	}

	video+nav:not(#prevnext)>*>* {
		animation-name: fadein;
		animation-duration: 1s;
		animation-delay: 5s;
		animation-fill-mode: both;
	}

	#prevnext {
		position: fixed;
		justify-content: center;
		align-items: center;
		display: flex;
		top: 40vh;
		right: 3em;
		transform: translate(50%,0) rotate(-90deg);
		overflow: hidden;
	}

	main>nav:not(.related):not(#prevnext) {
		padding-top: 20em;
		margin-left: 10em;
		display: grid;
		grid-template-columns: repeat(auto-fit,minmax(22em, 1fr));
		grid-auto-rows: 18em;
	}

	#main-nav {
		position: fixed;
		left: 0;
		top: 0;
		transform-origin: 100% 0;
		transform: translate(-100%,0) rotate(-90deg);
		display: flex;
		direction: rtl;
		padding: unset;
	}

	#main-nav a {
		padding: 1em;
		transition: color 0.2s ease;
	}

	#main-nav>a:first-child {
		display: block;
		padding-top: 1rem;
	}

	main>nav>a>time {
		display: block;
		padding-top: 1rem;
	}

	body.entry:not(.contact) main {
		padding: 5em 0;
		display: grid;
		grid-template-columns: [full-start] minmax(1em, 1fr) [main-start] 1fr 2fr 3fr 6fr [main-end] minmax(1em, 1fr) [full-end];
	}

	main>div.visual {
		width: 60%;
		margin: 0 auto;
		animation: fadein 0.5s ease .5s both;
	}

	main>div.visual> figcaption {
		float: right;
	}

	p {
		font-size: 1.2em;
	}

	section.images.three figure:nth-child(3) {
		width: 100%;
	}

	section.images.three figure {
		width: 50%;
		line-height: 0;
	}

	section.dummy div, section.images.four figure, section.images.five figure {
		width: 50%;
		display: inline-block;
		float: left;
		line-height: 0;
	}

	section.images.four figure:nth-child(3) {
		float: right;
	}

	.contact h1 {
		padding: 2em 2em 0;
	}
}

video#bgvid {
	position: fixed;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: -10;
	-ms-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	opacity: 0.5;
}

.fadeout {
	opacity: 0!important;
	transition: opacity 3s ease;
}