@import "reset.css";
@import "slick.css";
@import "slick-theme.custom.css";

:root {
	--base: #000;
  --background: #fff;
	--grey: #ccc;
	--lightgrey: #ebebeb;
	--primary: #fce36e;
	--white: #fff;
	
	--success: #adfda7;
	--error: #fdb2b2;
	--error-text: #ff2323;
}

/* @group FONTS */

@font-face {
  font-family: 'Source Sans Pro';
  src: url('../fonts/SourceSansPro-Regular.woff2') format('woff2'),
      url('../fonts/SourceSansPro-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Source Sans Pro';
  src: url('../fonts/SourceSansPro-Italic.woff2') format('woff2'),
      url('../fonts/SourceSansPro-Italic.woff') format('woff');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Source Sans Pro';
  src: url('../fonts/SourceSansPro-SemiBold.woff2') format('woff2'),
      url('../fonts/SourceSansPro-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Source Sans Pro';
  src: url('../fonts/SourceSansPro-Bold.woff2') format('woff2'),
      url('../fonts/SourceSansPro-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

/* @end */

/* @group GENERAL */

html,
body {
	font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
	font-size: 19px;
	line-height: 1.4em;
}

h1 {
	font-size: 2.6rem;
	font-weight: 600;
	line-height: 1.1em;
}

h1:has(+ *) {
	margin-bottom: .5em;
}

h1.small-margin-bottom {
	margin-bottom: .25em;
}

h1.large-margin-bottom {
	margin-bottom: clamp(2.1rem, 5vw, 4.2rem);
}

.cover + h1 {
	margin-top: 1rem;
}

	@media (max-width: 799px) {
		
		h1 {
			font-size: 2rem;
			line-height: 1.1em;
		}
		
	}

h2,
.title {
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.2em;
}

h2 {
	margin-bottom: .7rem;
}

h3:not([class]),
.uppercase,
.card__preheading,
.category {
	font-size: .95em;
	line-height: 1.4rem;
	text-transform: uppercase;
	letter-spacing: .03em;
}

h3:not([class]) {
	line-height: 1.4rem;
}

p + h3:not([class]),
ul + h3:not([class]) {
	margin-top: clamp(2.1rem, 5vw, 3.5rem);
}

h4 {
	margin-bottom: .7em;
	font-weight: 600;
}

h4:not(:first-child) {
	margin-top: 1.4em;
}

strong {
	font-weight: 600;
}

em {
	font-style: italic;
}

p:has(+ *) {
	margin-bottom: .7rem;
}

p:has(+ .masonry) {
	margin-bottom: 2.1rem;
}

p.category {
	margin-bottom: unset;
}

p.teaser {
	max-width: 28em;
}

.kt figure:not(:last-child) {
	margin-bottom: 1rem;
}

	.kt figure img {
		width: 100%;
		height: auto;
	}
	
.kt figure.video {
	position: relative;
	margin-bottom: 0;
  padding-bottom: 56.25%; /* for 16:9 */
  padding-top: 0;
  height: 0;
	overflow: hidden;
}
	 
	.kt figure.video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	}
	
.video-caption {
	margin-top: .35rem;
}

.kt a {
	/*
	text-decoration: underline;
	text-decoration-color: var(--grey);
	*/
	background-color: var(--primary);
	box-shadow: .1em 0 0  var(--primary),
							-.1em 0 0  var(--primary);
	-webkit-box-decoration-break: clone;
  box-decoration-break: clone;
	transition: all .2s;
}

.kt a:hover {
	background-color: #ffd200;
}

	.kt h2 a {
		background-color: transparent;
		box-shadow: none;
	}

.kt a[download],
.kt a.download {
	
}

	.kt a[download]::before,
	.kt a.download::before,
	.slider a[href^="/@/file"]::before  {
		display: inline-block;
		content: url(../images/download.svg);
		width: 1em;
		margin-right: .2em;
		transform: translateY(.2em);
	}

.kt ul:not([class]):not(:last-child),
.kt ol:not([class]):not(:last-child) {
	margin-bottom: 1.4em;
}

.kt ol:not([class]) {
	counter-reset: counter;
}

.kt ul:not([class]) li,
.kt ol:not([class]) li {
	display: table;
}

	.kt ol:not([class]) li {
		counter-increment: counter;
	}
	
	.kt ul:not([class]) li:not(:last-child),
	.kt ol:not([class]) li:not(:last-child) {
		margin-bottom: .7em;
	}
	
	.kt .project__location ul:not([class]) li:not(:last-child) {
		margin-bottom: 0;
	}
	
		.kt ul:not([class]) li::before {
			content: "•";
			display: table-cell;
			width: 1.4em;
			text-align: center;
		}
		
		.kt ol:not([class]) li::before {
			content: counter(counter)".";
			display: table-cell;
			width: 1.4em;
			padding-right: .25em;
		}

.placeholder {
	background-color: var(--grey);
}

.comment:not(:first-child) {
	margin-top: 1.4em;
}

/* @end */

/* @group LAYOUT */

html,
body {
	min-width: 320px;
}

body {
	padding: clamp(1.4rem, 2.8vw, 2.1rem) clamp(1.25rem, 4.5vw, 3rem);
}

.header,
.main,
.footer,
.switch {
	max-width: 70rem;
	margin-right: auto;
	margin-left: auto;
}

.main {
	margin-bottom: clamp(4.2rem, 11vw, 7rem);
}

.container {
	max-width: 60rem;
	margin-right: auto;
	margin-left: auto;
}

.grid + .linegrid,
.container + .linegrid,
.container + .container {
	margin-top: clamp(2.8rem, 6vw, 4.8rem);
}

.masonry + .masonry {
	margin-top: 2.8rem;
}

.container::after,
.masonry::after,
.logos::after {
	content: "";
  clear: both;
  display: table;
}

/* @end */

/* @group header */

.header {
	margin-bottom: clamp(3.6rem, 9vw, 7rem);
}

	.header a:hover {
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 0.1em;
	}

	@media (min-width: 1000px) {
		
		.header {
			display: flex;
			justify-content: space-between;
		}
		
	}

/* @end */

/* @group menu */

.menu {
	padding-top: .4em;
}

	.menu__item {
		display: inline-block;
		white-space: nowrap;
	}
	
	.menu__item:not(:last-child) {
		margin-right: clamp(.75em, 2.5vw, 2em);
	}
	
	.menu__item.active {
		font-weight: 600;
	}
	
	@media (max-width: 999px) {
				
			.menu__item {
				padding-top: .1em;
				padding-bottom: .1em;
			}
		
	}

/* @end */

/* @group grid */

.grid {
	display: grid;
	grid-row-gap: 2.8rem;
}

.grid + .grid {
	margin-top: 2.8rem;
}

.grid {
	grid-column-gap: clamp(2.1rem, 5vw, 4.2rem);
}

	.grid h3,
	.masonry h3,
	.columns h3 {
		margin-bottom: 1.4rem;
		padding-top: calc(.35rem - 1px);
		border-top: 1px solid var(--base);
	}

	@media (min-width: 800px) {
		
		.grid {
			grid-template-columns: repeat(2, 1fr);
		}
		
		.grid--3cols {
			grid-template-columns: repeat(3, 1fr);
		}
		
		.grid--1col {
			grid-template-columns: auto;
			align-content: start;
		}
		
	}

/* @end */

/* @group masonry */

.masonry {
	margin-bottom: -2.8rem;
}

	.masonry .masonry__item {
		width: 100%;
		margin-bottom: 2.8rem;
	}
	
	@media (min-width: 800px) {
		
			.masonry .masonry__item {
				width: 50%;
			}
			
			.masonry--3cols .masonry__item {
				width: 33.333333333%;
			}
			
			.masonry__item--span-2 {
				width: 100%;
			}
		
	}
	
	@media (min-width: 600px) and (max-width: 999px) {
		
			.masonry--3cols .masonry__item {
				width: 50%;
			}
		
	}
	
	@media (min-width: 800px) and (max-width: 1199px) {
	
		.masonry {
			margin-right: -1.4rem;
			margin-left: -1.4rem;
		}
		
			.masonry .masonry__item {
				padding-right: 1.4rem;
				padding-left: 1.4rem;
			}
	}
	
	@media (min-width: 1200px) {
		
		.masonry {
			margin-right: -2.1rem;
			margin-left: -2.1rem;
		}
		
			.masonry .masonry__item {
				padding-right: 2.1rem;
				padding-left: 2.1rem;
			}
	}

/* @end */

/* @group columns */

.columns {
	
}

	.columns__item {
		display: inline-block;
		width: 100%;
		margin-bottom: 2.8rem;
		break-inside: avoid;
	}

	@media (min-width: 800px) {
		
		.columns {
			column-count: 2;
			column-gap: 4.2rem;
		}
		
	}

/* @end */

/* @group linegrid */

.linegrid {
	display: grid;
	grid-row-gap: clamp(2.8rem, 6vw, 5.6rem);
}
	
/* linegrid--4cols */

	@media (max-width: 599px) {
		
			.linegrid--4cols > * {
				border-top: 1px solid var(--base);
				padding-top: .35rem;
			}
	}
	
	@media (min-width: 600px) {
		
		.linegrid--4cols {
			margin-right: -1.25rem;
			margin-left: -1.25rem;
		}
		
			.linegrid--4cols > * {
				padding-right: 1.25rem;
				padding-left: 1.25rem;
				border-left: 1px solid var(--base);
			}
	}

	@media (min-width: 600px) and (max-width: 999px) {
		
		.linegrid--4cols {
			grid-template-columns: repeat(2, 1fr);
		}
			
			.linegrid--4cols > *:nth-child(2n+1) {
				border-left: none;
			}
		
	}

	@media (min-width: 1000px) and (max-width: 1199px) {
		
		.linegrid--4cols {
			grid-template-columns: repeat(3, 1fr);
		}
			
			.linegrid--4cols > *:nth-child(3n+1) {
				border-left: none;
			}
		
	}

	@media (min-width: 1200px) {
		
		.linegrid--4cols {
			grid-template-columns: repeat(4, 1fr);
		}
			
			.linegrid--4cols > *:nth-child(4n+1) {
				border-left: none;
			}
		
	}

/* linegrid--3cols */

	@media (max-width: 599px) {
		
			.linegrid--3cols > * {
				border-top: 1px solid var(--base);
				padding-top: .35rem;
			}
	}

	@media (min-width: 600px) {
		
		.linegrid--3cols {
			margin-right: -1.25rem;
			margin-left: -1.25rem;
		}
		
			.linegrid--3cols > * {
				padding-right: 1.25rem;
				padding-left: 1.25rem;
				border-left: 1px solid var(--base);
			}
	}

	@media (min-width: 600px) and (max-width: 1199px) {
		
		.linegrid--3cols {
			grid-template-columns: repeat(2, 1fr);
		}
			
			.linegrid--3cols > *:nth-child(2n+1) {
				border-left: none;
			}
		
	}
	
	@media (min-width: 1200px) {
			
		.linegrid--3cols {
			grid-template-columns: repeat(3, 1fr);
		}
			
			.linegrid--3cols > *:nth-child(3n+1) {
				border-left: none;
			}
		
	}

/* @end */

/* @group news */

.news {
	display: grid;
	grid-row-gap: 2.8rem;
	max-width: 50rem;
}

/* @end */

/* @group slider */

.slider {
	
}
	
	.slider__figure--portrait {
		width: 50vh;
		max-width: 100%;
		margin-right: auto;
		margin-left: auto;
	}

	.slider__image {
		width: 100%;
		height: auto;
	}
	
	.slider__caption {
		display: inline-block;
		width: 100%;
		padding-top: .35rem;
		text-align: left;
	}

.slick-slide img {
	display: inline-block;
}
	
.slick-dots {
	margin: -.5rem -.5rem .9rem -.5rem;
	font-size: .8em;
	line-height: 1em;
}

	.slick-dots li {
		display: inline-block;
		padding: .5rem .5rem;
	}

	.slick-dots button {
		width: 1em;
		height: 1em;
		border: 1px solid var(--base);
		border-radius: 50%;
		text-indent: 100%;
		overflow: hidden;
		transition: all .1s ease-in-out 0s;
	}
	
	.slick-dots button:hover {
		cursor: pointer;
		transform: scale(1.25);
	}
	
	.slick-active button {
		background-color: var(--base);
	}

/* @end */

/* @group figure */

.figure {
	position: relative;
}

	.figure__credits {
		position: relative;
		z-index: 1;
		float: right;
		margin-top: -1.8em;
		padding: .2em .5em;
		background-color: rgba(0,0,0.6);
		color: var(--white);
		font-size: 12px;
		line-height: 1.4em;
	}

/* @end */

/* @group card */

.card {
	
}

	.card img {
		width: 100%;
		height: auto;
		transition: all .2s ease-in-out 0s;
	}
	
	.card a:hover img {
		transform: scale(1.05);
	}
	
	p.card__preheading {
		margin-bottom: unset;
	}
	
	.card__position {
		margin-bottom: .7em;
	}


/* horizontal*/

.card--horizontal {
	display: inline-grid;
}

	@media (max-width: 799px) {
		
		.card--horizontal .card__figure {
			margin-bottom: .7rem;
		}
		
	}
	
	@media (min-width: 800px) {
		
		.card--horizontal {
			grid-template-columns: 2fr 3fr;
			grid-column-gap: clamp(1rem, 3vw, 2rem)
		}
		
	}
	

/* vertical */

	.card--vertical h2 {
		margin-bottom: .25rem;
	}
	
	.card--vertical h2:last-child {
		margin-bottom: .7rem;
	}

	.card--vertical .card__date {
		margin-top: auto;
		margin-bottom: .25rem;
	}

	@media (min-width: 600px) {
		
		.card--vertical .card__body {
			display: flex;
			flex-direction: column;
			height: 9.1rem;
		}
	}
	

/* @end */

/* @group cover */

.cover:has(+ .category) {
	margin-bottom: .5em;
}

	.cover img {
		width: 100%;
		height: auto;
	}

/* @end */

/* @group switch */

.switch {
	display: grid;
	grid-column-gap: 2.1rem;
	grid-row-gap: .7rem;
	margin-bottom: 2.8rem;
	padding-top: .7rem;
	border-top: 1px solid var(--base);
}

	.switch a {
		font-weight: 600;
	}
	
	.switch a:hover {
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 0.1em;
	}
	
	.switch__next {
		text-align: right;
	}

	.switch__all {
		text-align: center;
	}
	
	@media (max-width: 599px) {
		
			.switch__next {
				text-align: left;
			}
			
			.switch__all {
				text-align: left;
			}
		
	}
	
	@media (min-width: 600px) and (max-width: 999px) {
		
		.switch {
			grid-template-columns: repeat(2, 1fr);
		}
		
			.switch__next {
				grid-column-start: 2;
			}
		
			.switch__prev {
				grid-row-start: 1;
				grid-column-start: 1;
			}
			
			.switch__all {
				grid-column-start: 1;
				grid-column-end: span 2;
			}
		
	}
	
	@media (min-width: 1000px) {
		
		.switch {
			grid-template-columns: repeat(3, 1fr);
		}
		
			.switch__next {
				grid-column-start: 3;
			}
			
			.switch__prev {
				grid-row-start: 1;
				grid-column-start: 1;
			}
			
			.switch__all {
				grid-column-start: 2;
			}
		
	}


/* @end */

/* @group logos */

.logos {
	
}

	.logos__image {
		display: inline-block;
		width: auto;
		height: 2.1rem;
		margin-top: 1.4rem;
		margin-right: 1.5rem;
		vertical-align: middle;
	}

	.logos__image--square {
		height: 3.5rem;
	}
	
	.logos__image--portrait {
		height: 4.2rem;
	}

/* @end */

/* @group list */

.list,
.vita {
	display: grid;
	grid-row-gap: .7em;
}

	.list__item,
	.vita__item {
		display: inline-grid;
		grid-template-columns: max-content 1fr;
	}

	.list__date,
	.vita__date {
		padding-right: .7em;
	}

/* @end */

/* @group audio */

.audio {
	padding: 1.4rem;
	background-color: var(--lightgrey);
}

.audio:not(:last-child) {
	margin-bottom: .7rem;
}

	.audio__title {
		margin-bottom: .7rem;
	}

/*
<div class="audiojs">
	<div class="play-pause">
		<p class="play"></p>
		<p class="pause"></p>
		<p class="loading"></p>
		<p class="error"></p>
	</div>
	<div class="scrubber">
		<div class="progress" style="width: 0px;"></div>
		<div class="loaded" style="width: 418px;"></div>
	</div>
	<div class="time">
		<em class="played">00:00</em>/<strong class="duration">00:21</strong>
	</div>
	<div class="error-message"></div>
</div>
*/


/* resets */
.audiojs,
.audiojs *,
.audiojs .scrubber,
.audiojs .play-pause,
.audiojs .progress,
.audiojs .loaded,
.audiojs .time,
.audiojs p {
	float: none;
	margin: 0;
	padding: 0;
	width: auto; height: auto;
	background-color: transparent;
	background-image: none;
	border: none;
	box-shadow: none;
	text-shadow: none;
	font-family: inherit; font-size: inherit;
	background-position: 0 0;
}

.audiojs {
	position: relative;
	width: 100%;
	padding-right: 5.7em; /* for time */
  overflow: hidden;
}

.audiojs,
.audiojs .scrubber {
	height: 36px;
}

	.audiojs .play-pause {
		z-index: 2;
		position: absolute;
		left: 0;
		top: 0;
	  width: 36px;
		height: 36px;
	}
	
	.audiojs .scrubber {
		margin-left: 44px; /* for play button */
	}
	
	.audiojs .time {
		position: absolute; right: 0; top: 0;
		text-align: right;
		line-height: 36px;
		color: var(--base);
	}

	.audiojs .time em {
		color: var(--base);
	}

	.audiojs .play:before {
		content: url('../images/audioplayer-play.svg');
	}
	
	.audiojs .pause:before {
		content: url('../images/audioplayer-pause.svg');
	}
	
	.audiojs .loading:before {
		content: url('../images/audioplayer-loading.svg');
	}
	
	.audiojs .error:before {
		content: url('../images/audioplayer-error.svg');
	}
	
	.audiojs .play,
	.audiojs .pause,
	.audiojs .loading,
	.audiojs .error {
		height: 100%; width: 100%;
		font-size: 36px;
	}
	
	.audiojs .pause {
		color: #ff3333;
	}
	
	.audiojs .progress,
	.audiojs .loaded {
		height: 4px;
		margin-top: 16px;
	}
	
	.audiojs .loaded {
		background-color: var(--white);
	}
	
	.audiojs .progress {
		background: var(--base);
	}
	
	.audiojs .loading {
		animation: rotating 2s linear infinite;
	}
	
	@keyframes rotating {
	  from {
	    transform: rotate(0deg);
	  }
	  to {
	    transform: rotate(360deg);
	  }
	}

/* @end */

/* @group newsletter */

.sib-form {
	margin-top: 1.4rem;
}

	.form__entry {
		margin-bottom: 1.05em;
	}
	
	.form__label-row {
		margin-bottom: .35em;
	}

	.entry__label {
		display: block;
		margin-bottom: .35em;
	}
	
	.form__button-block {
		margin-top: 1.4em;
	}

input[type="text"] {
	width: 100%;
	padding: .35em .7em;
	border: 1px solid var(--base);
}

	input[type="text"]::placeholder {
		color: var(--grey);
	}
	
.entry__error {
	color: var(--error-text);
}

button[type="submit"] {
	padding: .35em 1.4em;
	background-color: var(--base);
	color: var(--white);
	font-weight: 600;
	text-transform: uppercase;
	transition: all .2s;
}

	button[type="submit"]:hover {
		cursor: pointer;
		transform: scale(1.1);
	}
	
.sib-form-block__button-with-loader svg {
	display: none;
}

.sib-form__declaration {
	margin-top: 1.4em;
	margin-bottom: 1.4em;
}

.sib-form-message-panel {
	display: none;
	margin-top: 1.4rem;
	padding: .35em .7em;
}

.sib-form-message-panel--active {
  display: block;
}

.sib-form-message-panel#error-message {
	background-color: var(--error);
}

.sib-form-message-panel#success-message {
	background-color: var(--success);
}

.input--hidden {
	display: none !important;
}

/* @end */

/* @group footer */

.footer {
	margin-bottom: 2.4rem;
	padding-top: .7rem;
	border-top: 1px solid var(--base);
}

	.footer::after {
		content: "";
	  clear: both;
	  display: table;
	}
	
	.footer a:hover {
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 0.1em;
	}

	.footer__copyright {
		float: left;
		margin-bottom: .7rem;
		white-space: nowrap;
	}

	.footer__menu {
		float: right;
		margin-bottom: .7rem;
	}

/* @end */