@import "reset.css";

:root {
	--base-color: #000;
  --primary-color: #4c0096;
	--secondary-color-dark: #d053ae;
	--secondary-color: #dd6cba;
	--secondary-color-light: #f2d7ec;
	--background-color: #fff;
	--dark-area-background-color: var(--primary-color);
	--dark-area-base-color: var(--secondary-color-light);
	
	--text-sm: 0.9rem;
	--text-md: clamp(1rem, 2vw, 1.25rem);
	--text-lg: clamp(1.2rem, 3vw, 1.4rem);
	--text-xl: clamp(2.2rem, 5vw, 2.4rem);
	
	--spacing-sm: 1.5rem;
	--spacing-md: clamp(1.75rem, 5vw, 3rem);
	--spacing-lg: clamp(2.5rem, 7vw, 5rem);
	--spacing-xl: clamp(4rem, 9vw, 9rem);
	--spacing-columns: clamp(1.5rem, 4vw, 3rem);
	
	--padding: clamp(1rem, 5vw, 3rem);
}

/* @group FONTS */

@font-face {
  font-family: 'Alice';
  src: url('../fonts/Alice-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

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

/* @end */

/* @group GENERAL */

html,
body {
	min-width: 320px;
	background-color: var(--background-color);
	color: var(--base-color);
	font-family: 'Figgins', Helvetica, Arial, sans-serif;
	font-size: 18px;
	line-height: 1.4em;
}

h1 {
	color: var(--secondary-color);
	margin-bottom: .5em;
	font-size: var(--text-xl);
	line-height: 1em;
}

h2 {
	margin-top: 2rem;
	margin-bottom: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

h3 {
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

h3:has(+ *) {
	margin-bottom: 1em;
}

h4:has(+ *) {
	margin-bottom: 1em;
}

p:has(+ *) {
	margin-bottom: 1em;
}

.main p:has(+ ul:not([class])),
.main p:has(+ ol:not([class])) {
	margin-bottom: .7em;
}

p strong {
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

/* @group Links */

.topbar__info a,
.languages a.active,
.block a,
.colophon a {
	text-decoration: underline;
	text-decoration-color: var(--secondary-color);
	text-decoration-thickness: .05em;
	text-underline-offset: .15em;
	transition: all .1s ease-in-out 0s;
}

.languages a.active {
	text-decoration-color: currentColor;
}

.topbar a:hover,
.block a:hover,
.colophon a:hover,
.bottombar a:hover {
	color: var(--secondary-color);
}

/* @end */

/* @group Buttons */

.button {
	font-size: var(--text-sm);
	color: var(--secondary-color-dark);
	text-transform: uppercase;
	text-align: center;
	letter-spacing: 0.1em;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .5em;
	transition: all .2s ease-in-out 0s;
}

.button:hover {
	cursor: pointer;
	color: var(--primary-color);
}

/* @end */

/* @end */

/* @group Container */

.container {
	max-width: 1800px;
	margin-right: auto;
	margin-left: auto;
	padding-inline: var(--padding);
}

/* @end */

/* @group Dark area */

.dark-area {
	background-color: var(--dark-area-background-color);
	color: var(--dark-area-base-color);
}

/* @end */

/* @group Offcanvas */

.offcanvas {
	position: fixed;
	z-index: 10;
	top: 0;
	right: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	min-width: 320px;
	min-height: 100vh;
	padding: 4.5rem var(--spacing-md);
	background-color: var(--dark-area-background-color);
	color: var(--dark-area-base-color);
	text-align: center;
	transform: translateY(-110vh); /* with -110vh there’s a bug on iOS 16.2 */
  transition: transform 0.3s ease;
}
		
.offcanvas.isOpen {
	transform: translateY(0);
}

	.offcanvas__bottom {
		margin-top: auto;
		padding-top: 3rem;
	}
	
	.offcanvas__info {
		margin-bottom: 1.5rem;
	}

	@media (min-width: 1600px) {
		
		.offcanvas {
			display: none;
		}
		
	}

/* @end */

/* @group Menu-toggle-bar */

.menu-toggle-bar {
  position: fixed;
  z-index: 20;
  top: 0;
  right: 0;
  left: 0;
	padding-top: .25rem;
	padding-bottom: .25rem;
  background-color: var(--dark-area-background-color);
	color: var(--dark-area-base-color);
	text-align: center;
}

	@media (min-width: 1600px) {
		
		.menu-toggle-bar {
			display: none;
		}
		
	}


/* @end */

/* @group Menu toggle */

.menu-toggle {
	position: relative;
	display: inline-block;
	width: 2rem;
	height: 2rem;
}

	.menu-toggle__label {
		position: absolute;
		width: 100%;
		height: 100%;
		overflow: hidden;
		text-indent: -999px;
	}

/* @end */


/* @group Hamburger */

.hamburger {
	position: relative;
}

	.hamburger > * {
		display: block;
		position: absolute;
		height: .1rem;
		width: 100%;
		background-color: currentColor;
		transition: all 300ms ease-in-out 0s;
	}
	
	.hamburger > *:nth-child(1) {
		transform: translateY(0.625em);
	}

	.hamburger > *:nth-child(3) {
		transform: translateY(-0.625em);
	}
	
	/* isNavOpen */
	
	.hamburger.isOpen > *:nth-child(1) {
		width: 80%;
		margin-left: 10%;
		transform: rotate(45deg);
	}
	
	.hamburger.isOpen > *:nth-child(2) {
		opacity: 0;
	}
	
	.hamburger.isOpen > *:nth-child(3) {
		width: 80%;
		margin-left: 10%;
		transform: rotate(-45deg);
	}

/* @end */

/* @group Wrapper */

	@media (min-width: 1600px) {
		
		.wrapper {
			display: grid;
			grid-template-columns: 20rem 1fr;
			column-gap: var(--spacing-md);
			align-items: start;
			margin-right: auto;
			margin-left: auto;
			padding-top: var(--spacing-md);
		}
		
	}

/* @end */

/* @group Header */

.header {
	padding-bottom: var(--spacing-sm);
}

	@media (max-width: 1599px) {
		
		.header {
			padding-top: calc(var(--spacing-sm) + 2.5rem);
		}
		
	}
	
	@media (min-width: 1600px) {
		
		.header {
			position: sticky;
			top: var(--spacing-md);
			padding-bottom: var(--spacing-lg);
		}
		
	}

/* @end */

/* @group Topbar */

.topbar {
	display: flex;
	column-gap: 2rem;
	justify-content: space-between;
	padding-right: 1.5rem;
	padding-left: 1.5rem;
	padding-top: .5em;
	padding-bottom: .5em;
	background-color: var(--dark-area-background-color);
	color: var(--dark-area-base-color);
}
	
	.topbar .languages {
		order: 2;
		align-self: flex-end;
		white-space: nowrap;
	}

	@media (max-width: 1599px) {
		
		.topbar {
			display: none;
		}
		
	}

/* @end */

/* @group Languages */

.languages {
	text-transform: uppercase;
}

	.languages > * {
		display: inline-block;
	}

	.languages > *:not(:last-child)::after {
		content: " ·";
		display: inline-block;
	}

	.languages > *:not(:first-child)::before {
		content: " ";
		display: inline-block;
	}

/* @end */

/* @group Logo */

.logo {
	width: 20rem;
	max-width: 100%;
	margin-bottom: 1rem;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}

	.logo__figure {
		color: var(--primary-color);
	}
	
		.logo__figure svg {
			width: 100%;
			height: auto;
		}
	
	.logo__subtitle {
		margin-top: .2em;
		font-size: 1.5rem;
		line-height: 1em;
	}
	
	.offcanvas .logo__figure,
	.dark-theme .logo__figure {
		color: var(--background-color);
	}

/* @end */

/* @group Menu */

.menu {
	color: var(--secondary-color-dark);
	font-size: 1.5rem;
	line-height: 1em;
	text-align: center;
}

	.menu > * {
		display: block;
		padding-top: .7em;
	}
	
	.menu > *:not(:last-child)::after {
		content: "";
		display: block;
		height: .7em;
		margin-top: .7em;
		background: url("../images/separator.svg") center center / contain no-repeat;
	}
	
	.menu a {
		transition: color .15s ease-in-out 0s;
	}
	
	.menu a:hover {
		color: var(--primary-color);
	}
	
	.menu > *.active {
		color: var(--base-color);
	}

	@media (max-width: 1599px) {
		
		.menu {
			font-size: 1.25rem;
		}
		
		.header .menu {
			display: none;
		}
	
	}

/* @end */

/* @group Main */

.main {
	padding-bottom: var(--spacing-lg);
}

	@media (min-width: 1200px) {
		
		.main {
			margin-top: var(--spacing-md);
		}
		
	}

/* @end */

/* @group Dark-theme */

.dark-theme {
	background-color: var(--primary-color);
	color: var(--secondary-color-light);
}

	.dark-theme h2 {
		color: var(--background-color);
	}

	.dark-theme .topbar {
		background-color: var(--base-color);
	}
	
	.offcanvas .menu > *:hover,
	.dark-theme .menu > *:hover {
		color: var(--secondary-color-light);
	}
	
	.offcanvas .menu > *.active,
	.dark-theme .menu > *.active {
		color: var(--background-color);
	}

/* @end */

/* @group Block */

.block {
	margin-bottom: var(--spacing-lg);
}

/* @end */

/* @group Block: Text */

.text-block {
	display: grid;
	column-gap: 2rem;
	font-size: var(--text-md);
	line-height: 1.4em;
}

	.text-block a {
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 0.2em;
	}
	
	.text-block a:hover {
		text-decoration-color: var(--secondary-color);
	}
		
	@media (max-width: 1199px) {
		
		.text-block {
			max-width: 30rem;
			margin-right: auto;
			margin-left: auto;
		}
		
	}
		
	@media (min-width: 1200px) {
		
		.text-block {
			grid-template-columns: repeat(2, 1fr);
		}
		
	}
	
.text-block ul:has(+ *) {
  margin-bottom: 1.4em;
}

	.text-block ul > li {
	  display: table;
	}
	
	.text-block ul > li:has(+ li) {
	  margin-bottom: .7em;
	}
	
		.text-block ul > li::before {
	    content: "•";
			display: table-cell;
			width: 1.4em;
			text-align: center;
		}
	
.text-block ol {
  counter-reset: counter;
}

.text-block ol:has(+ *) {
	margin-bottom: 1.4em;
}

	.text-block ol > li {
		display: table;
	  counter-increment: counter;
	}
	
	.text-block ol > li:has(+ li) {
	   margin-bottom: .7em;
	}
	
		.text-block ol > li::before {
		  content: counter(counter) ".";
	    display: table-cell;
	    width: 1.4em;
			padding-right: .3em;
			text-align: right;
		}

/* @end */

/* @group Block: Text voice */

.text-voice-block {
	display: grid;
	column-gap: 2rem;
	font-size: var(--text-md);
	line-height: 1.4em;
}

	.text-voice-block__voice {
		max-width: 10em;
		margin-right: auto;
		margin-left: auto;
		margin-bottom: var(--spacing-lg);
	}
	
	@media (max-width: 799px) {
		
		.text-voice-block {
			max-width: 30rem;
			margin-right: auto;
			margin-left: auto;
		}
		
	}
	
	@media (min-width: 800px) {
		
		.text-voice-block {
			grid-template-columns: repeat(2, 1fr);
		}
		
			.text-voice-block__voice {
				align-self: center;
			}
		
	}

/* @end */

/* @group Block: Image */

.image-block {
	
}

	.image-block__figure img {
		width: 100%;
		height: auto;
	}
	
	@media (max-width: 999px) {
		
		
		
	}

	@media (min-width: 1000px) {
		
		.image-block__figure {
			width: 50%;
			max-width: 40rem;
			margin-right: auto;
			margin-left: auto;
		}
		
		.image-block__figure[data-orientation="landscape"] {
			width: 70%;
		}
	}

/* @end */

/* @group Block: Teasers */

.teasers-block {
	display: grid;
	column-gap: 2rem;
	row-gap: var(--spacing-lg);
}

	@media (max-width: 799px) {
		
		.teasers-block {
			max-width: 26rem;
			margin-right: auto;
			margin-left: auto;
		}
		
	}

	@media (min-width: 800px) and (max-width: 1399px) {
		
		.teasers-block {
			grid-template-columns: repeat(2, 1fr);
			grid-auto-rows: auto;
		}
		
			.teasers-block > *:nth-child(1) {
				grid-column: 1;
				grid-row: 1 / span 2;
			}
		
			.teasers-block > *:nth-child(2) {
				grid-column: 2;
				grid-row: 2 / span 2;
			}
			
			.teasers-block > *:nth-child(3) {
				grid-column: 1;
				grid-row: 3;
			}
			
			.teasers-block > *:only-child {
				grid-column: 2;
			}
		
	}

	@media (min-width: 1400px) {
		
		.teasers-block {
			grid-template-columns: repeat(3, 1fr);
		}
		
		.teasers-block:has(> *:only-child) {
			grid-template-columns: 3fr 2fr 1fr;
		}
		
			.teasers-block > *:only-child {
				grid-column: 2;
			}
		
	}

/* @end */

/* @group Block: Gallery */

.gallery-block {
	display: grid;
	column-gap: 1rem;
	row-gap: 1rem;
}

	.gallery-block img {
		width: 100%;
		height: auto;
	}
	
	@media (max-width: 999px) {
		
		.gallery-block {
			max-width: 30rem;
			margin-right: auto;
			margin-left: auto;
		}
		
			.gallery-block__figure[data-orientation="portrait"] {
				width: 70%;
				margin-right: auto;
				margin-left: auto;
			}
		
	}
	
	@media (min-width: 1000px) and (max-width: 1399px) {
		
		.gallery-block {
			grid-template-columns: 3fr 3fr 3fr 1fr;
			grid-template-rows: repeat(3, max-content);
		}
		
			.gallery-block__figure:nth-child(1) {
				grid-column: 3 / span 2;
				grid-row: 1 / span 2;
			}
			
			.gallery-block__figure:nth-child(2) {
				grid-column: 1 / span 2;
				grid-row: 2;
			}
			
			.gallery-block__figure:nth-child(3) {
				grid-column: 2 / span 2;
				grid-row: 3;
			}
		
	}
	
	@media (min-width: 1400px) {
		
		.gallery-block {
			grid-template-columns: 6fr 1fr 2fr 3fr;
			grid-template-rows: repeat(4, auto);
		}
		
			.gallery-block__figure:nth-child(1) {
				grid-column: 2 / span 2;
				grid-row: 1 / span 2;
			}
			
			.gallery-block__figure:nth-child(2) {
				grid-column: 1;
				grid-row: 2 / span 2;
			}
			
			.gallery-block__figure:nth-child(3) {
				grid-column: 3 / span 2;
				grid-row: 3 / span 2;
			}
		
	}

/* @end */

/* @group Block: Image-Text */

.image-text-block {
	display: grid;
	column-gap: 2rem;
	margin-bottom: unset;
	color: var(--primary-color);
	font-family: 'Alice', Times, serif;
	text-align: center;
	line-height: 1.4em;
}

	.image-text-block__figure {
		margin-bottom: var(--spacing-lg);
	}
	
		.image-text-block__figure img {
			width: 100%;
			height: auto;
		}
		
	.image-text-block__text {
		margin-bottom: var(--spacing-lg);
	}

		.image-text-block__text::after,
		.image-text-block__text h1::after {
			content: "";
			display: block;
			height: 3rem;
			margin-top: 1rem;
			background: url("../images/separator-vertical.svg") center center / contain no-repeat;
		}
		
		.image-text-block__text li:not(:last-child)::after {
			content: "•";
			display: block;
			color: var(--base-color);
			line-height: .9em;
		}
	
	@media (max-width: 1199px) {
		
		.image-text-block {
			max-width: 30rem;
	    margin-right: auto;
	    margin-left: auto;
		}
		
	}
	
	@media (min-width: 1200px) {
		
		.image-text-block {
			grid-template-columns: repeat(2, 1fr);
		}
		
	}

/* @end */

/* @group Block: Vita */

.vita-block {
	display: grid;
	column-gap: 2rem;
	row-gap: var(--spacing-md);
}

	.vita-block__figures {
		display: grid;
		row-gap: 1rem;
	}
	
		.vita-block__figures img {
			width: 100%;
			height: auto;
		}

	.vita-block__text {
		font-family: 'Alice', Times, serif;
		font-size: var(--text-md);
		line-height: 1.4em;
	}
	
		.vita-block__text h1 {
			color: var(--background-color);
			font-family: 'Figgins', Helvetica, Arial, sans-serif;
		}
	
	.vita-block__vita {
		max-width: 22em;
		letter-spacing: 0.04em;
	}
	
		.vita-block__vita h3 {
			font-family: 'Alice', Times, serif;
			font-size: var(--text-md);
			line-height: 1.4em;
			letter-spacing: 0;
		}
		
	@media (min-width: 600px) {
		
			.vita-block__figures {
				grid-template-columns: 2fr 1fr 2fr;
			}
		
				.vita-block__figures > *:nth-child(1) {
					grid-column: 2 / span 2;
				}
				
				.vita-block__figures > *:nth-child(2) {
					grid-column: 1 / span 2;
				}
		
	}
		
	@media (min-width: 1000px) {
		
		.vita-block {
			grid-template-columns: repeat(2, 1fr);
		}
		
			.vita-block__figures {
				grid-row: 1 / span 2;
				align-self: start;
			}

	}

/* @end */

/* @group Block: FAQ */

.faqs-block {
	max-width: 40rem;
	margin-right: auto;
	margin-left: auto;
}

	@media (max-width: 1199px) {
		
		.faqs-block {
			max-width: 30rem;
		}
		
	}

.faq {
	
}

	.faq__question {
		margin-bottom: .7em;
		color: var(--primary-color);
		font-family: 'Alice', Times, serif;
		line-height: 1.4em;
	}
	
	.faq__question:hover {
		cursor: pointer;
	}
	
	.faq__answer {
		margin-bottom: 1.4em;
		font-size: var(--text-md);
		line-height: 1.4em;
	}

/* @end */

/* @group Block: Video */

.video-block {
	
}

	.video-block > p {
		max-width: 40em;
		margin-top: 1em;
	}

.video {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
	vertical-align: bottom;
}

	.video__iframe,
	.video__placeholder {
	  position: absolute;
	  top: 0;
	  inset-inline: 0;
	  width: 100%;
	  height: 100%;
	}
	
	.video__placeholder {
		display: flex;
		align-items: center;
		padding: 1rem;
		background-color: var(--secondary-color-light);
		text-align: center;
	}
	
		.video__placeholder > * {
			max-width: 30em;
			margin-inline: auto;
		}

/* @end */

/* @group Voice */

.voice {
	color: var(--secondary-color);
	font-family: 'Alice', Times, serif;
	font-size: clamp(2rem, 5vw, 3rem);
	line-height: .9em;
	text-transform: uppercase;
	text-align: center;
}

/* @end */

/* @group Teaser */

.teaser {
	position: relative;
}

	.teaser__figure {
		margin-bottom: 1rem;
	}
		
		.teaser__figure img {
			width: 100%;
			height: auto;
		}

	.teaser__heading {
		margin-bottom: 1rem;
		padding-left: 1.5rem;
		padding-right: 1.5rem;
		color: var(--secondary-color);
		font-family: 'Alice', Times, serif;
		font-size: var(--text-xl);
		line-height: 1em;
		text-transform: none;
		letter-spacing: 0;
	}
	
	.teaser__text {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
	
	.teaser:only-child .teaser__heading,
	.teaser:only-child .teaser__text {
		padding-left: unset;
		padding-right: unset;
	}
	
	.teaser__button {
		margin-top: 1em;
	}
	
	.teaser__link {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		overflow: hidden;
		text-indent: -999px;
	}
	
	
/* Hover effects for teaser with link */

.teaser:has(> a:last-child) {
	position: relative;
}

	.teaser:has(> a:last-child) .teaser__figure img {
		transition: transform .15s ease-in-out 0s;
	}
	
	.teaser:has(> a:last-child):hover .teaser__figure img {
		transform: scale(1.05);
	}
	
	.teaser:has(> a:last-child) .teaser__heading {
		transition: color .15s ease-in-out 0s;
	}

	.teaser:has(> a:last-child):hover .teaser__heading {
		color: var(--primary-color);
	}

/* @end */

/* @group Footer */

.footer {
	clear: both;
}

/* @end */

/* @group Colophon */

.colophon {
	padding-top: var(--spacing-lg);
}

	.colophon__container {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
	}

	.colophon__info {	
		max-width: 700px;
		margin-bottom: var(--spacing-md);
		font-family: 'Alice', Times, serif;
		font-size: var(--text-lg);
		line-height: 1.2em;
	}
	
		.colophon__info h2 {
			color: var(--background-color);
			font-family: 'Figgins', Helvetica, Arial, sans-serif;
			font-size: var(--text-xl);
			line-height: 1.2em;
			text-transform: none;
			letter-spacing: 0;
		}
		
		.colophon__info p {
			margin-bottom: .8em;
		}
	
		.colophon__figure img {
			width: 100%;
			height: auto;
		}

/* @end */

/* @group Bottombar */

.bottombar {
	display: flex;
	flex-wrap: wrap;
	column-gap: 2em;
	row-gap: 1em;
	justify-content: space-between;
	padding-top: 1em;
	padding-bottom: 1em;
	padding-right: 1.5rem;
	padding-left: 1.5rem;
	background-color: var(--base-color);
}

	@media (max-width: 1199px) {
		
		.bottombar {
			padding-bottom: 2em;
		}
		
	}
	
	.bottombar__menu {
		align-self: flex-end;
		white-space: nowrap;
	}
	
		.bottombar__menu > *:not(:last-child)::after {
			content: " ·";
			display: inline-block;
		}
		
		.bottombar__menu > *:not(:first-child)::before {
			content: " ";
			display: inline-block;
		}

/* @end */