/* @group FONTS */

@font-face {
	font-family: 'Sen';
	src: url('../fonts/Sen-VariableFont_wght.woff2') format('woff2 supports variations'),
       url('../fonts/Sen-VariableFont_wght.woff2') format('woff2-variations');
	font-weight: 400 800;
	font-style: normal;
	font-display: swap;
}

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

/* @end */

/* @group ROOT */

:root {
	
	--color-base: 							#333333;
	--color-primary: 					#65D136;
	--color-primary-light: 		#8AE663;
	--color-primary-lighter: 	#C4FF8D;
	--color-background:				#F5F1E9;
	--color-white:							#FFFFFF;
	
	--font-family:	 						'Sen', Verdana, Arial, sans-serif;
	--font-family-handwrite:	 	'Manus', Verdana, Arial, sans-serif;

	--font-xs:	400 .8rem/1.3em var(--font-family);
	--font-sm:	400 .9rem/1.5em var(--font-family);
	--font: 		400 clamp(17px, 1.7vw, 21px)/1.5em var(--font-family);
	--font-lg: 	700 1.3rem/1.2em var(--font-family);
	--font-xl: 	700 1.8rem/1.2em var(--font-family);
	--font-xxl: 	700 clamp(2.2rem, 6.6vw, 3.6rem)/1em var(--font-family-handwrite);
	
	--spacing-inline: clamp(1rem, 6.8vw, 3rem);
	
	--spacing-block: 			clamp(1.5rem, 3.6vw, 2rem);
	--spacing-block-lg: 		clamp(2rem, 5.5vw, 3rem);
	--spacing-block-xl: 		clamp(3rem, 7vw, 4rem);
	--spacing-block-xxl: 	clamp(4rem, 12vw, 7rem);
	
	--width-container: 		47rem;
	--width-container-lg:	57rem;
	
}

/* @end */

/* @group BASE */

html {
	scroll-behavior: smooth;
  font: var(--font);
}

body {
	min-width: 320px;
	background-color: var(--color-background);
	font: var(--font);
}

strong {
	font-weight: bold;
}

u {
	text-decoration: underline;
  text-decoration-thickness: .1em;
	text-decoration-color: var(--color-primary);
  text-underline-offset: .15em;
	mix-blend-mode: multiply;
  transition: text-decoration .15s ease-in-out 0s;
}

h1 {
	font: var(--font-xl);
}

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

h1:has(+ .tags) {
	margin-bottom: 1em;
}

h2 {
	font: var(--font-lg);
}

.text * + h2 {
	margin-top: 2rem;
}

h2:has(+ *) {
	margin-bottom: .5rem;
}

h3 {
	font-weight: bold;
}

* + h3 {
	margin-top: 1.5em;
}

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

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

figure {
	max-width: max-content;
}

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

.image-frame {
	position: relative;
  background: var(--color-white);
	box-shadow: .05rem .05rem .25rem 0 rgba(0, 0, 0, 0.15);
}

	.image-frame img {
		border: .25rem solid var(--color-white);
		border-radius: .5rem;
	}
	
	.image-frame figcaption {
		position: absolute;
		top: 0;
		right: 0;
		padding-block: .1em;
		padding-inline: .5em;
		background-color: var(--color-white);
		border-bottom-left-radius: .25rem;
		font: var(--font-xs);
		text-align: right;
	}
	
/*	.image-frame .credit {
		position: absolute;
		bottom: 0;
		left: 0;
		padding: .25em .5em;
		color: white;
		text-shadow:
			1px 1px 1px rgba(0,0,0,.4),
			-1px -1px 1px rgba(0,0,0,.4);
		font: var(--font-xs);
	}*/

.page-wrap {
  position: fixed;
  top: 10px;
  right: 10px;
  left: 10px;
  bottom: 10px;
  background: white;
  border-radius: 10px;
  padding: 20px;
  text-align: center;
}

/* @group Lists */

.text ul:not([class]):has(+ *) {
    margin-bottom: 1em;
}

	.text ul:not([class]) li {
	   display: flex;
	}
	
		.text ul:not([class]) li::before {
	    content: "•";
	    flex: 0 0 1em;
			padding-right: .25em;
			text-align: center;
		}
	
	.text ul:not([class]) li:has(+ li) {
	   margin-bottom: .5em;
	}
	
.text ol:not([class]) {
  counter-reset: counter;
}

.text ol:not([class]):has(+ *) {
	margin-bottom: 1em;
}

	.text ol:not([class]) li {
		display: table;
	  counter-increment: counter;
	}
	
		.blocks ol:not([class]) li::before {
		  content: counter(counter) ".";
	    display: table-cell;
	    width: 2em;
			padding-right: .3em;
			text-align: right;
		}

/* @end */

/* @group Links */

a.more,
a[download],
a.to-overview {
	font-weight: bold;
}

/* Underline */

.menu a,
a.card__link,
a.more,
h2 a,
.text a,
.footer-menu a,
.colophon a[href^="mailto:"] {
	text-decoration: underline;
  text-decoration-thickness: .1em;
	text-decoration-color: transparent;
  text-underline-offset: .15em;
	mix-blend-mode: multiply;
  transition: text-decoration .15s ease-in-out 0s;
}

.text a {
	text-decoration-color: var(--color-primary-light);
}

.menu a:hover,
.menu a.active,
a.card__link:hover,
a.more:hover,
h2 a:hover,
.text a:hover,
.footer-menu a:hover {
	text-decoration-color: var(--color-primary);
}

.colophon a[href^="mailto:"]:hover {
	text-decoration-color: currentColor;
}

/* Icon */

a.card__link,
a.more,
a[download],
a.to-overview,
.colophon a[href^="mailto:"],
a[href*="instagram"] {
	display: inline-flex;
	column-gap: .3em;
	vertical-align: bottom;
}

	a.card__link::after,
	a.more::after,
	a[download]::before,
	a.to-overview::before,
	.colophon a[href^="mailto:"]::before,
	a[href*="instagram"]::before {
	  content: "";
		position: relative;
		top: .2em;
	  -webkit-mask-size: cover;
	  mask-size: cover;
	  width: 1.1em;
	  height: 1.1em;
	  background-color: currentColor;
		transition: transform .15s ease-in-out 0s;
	}
	
	a.card__link::after,
	a.more::after {
	  -webkit-mask-image: url(../images/arrow-right.svg);
	  mask-image: url(../images/arrow-right.svg);
	}
	
	a.card__link[target="_blank"]::after {
		-webkit-mask-image: url(../images/arrow-up-right.svg);
	  mask-image: url(../images/arrow-up-right.svg);
	}
	
	a[download]::before {
	  -webkit-mask-image: url(../images/download.svg);
	  mask-image: url(../images/download.svg);
	}
	
	a.to-overview::before {
	  -webkit-mask-image: url(../images/arrow-left.svg);
	  mask-image: url(../images/arrow-left.svg);
	}
	
	.colophon a[href^="mailto:"]::before {
	  -webkit-mask-image: url(../images/paper-plane.svg);
	  mask-image: url(../images/paper-plane.svg);
	}
	
	a[href*="instagram"]::before {
	  -webkit-mask-image: url(../images/instagram.svg);
	  mask-image: url(../images/instagram.svg);
	}
	
	a.card__link:hover::after,
	a.card__link[target="_blank"]:hover::after,
	a.more:hover::after,
	a[download]:hover::before,
	.colophon a[href^="mailto:"]:hover::before,
	a[href*="instagram"]:hover::before {
		transform: scale(1.1);
		transform-origin: left center;
	}

/* @end */

/* @end */

/* @group Header */

.header {
	transition: background-color .3s ease-in-out 0s;
}

	@media (min-width: 1000px) {
		
		.header {
			position: absolute;
			top: 0;
			right: 0;
			left: 0;
		}
		
		.header.fixed {
			position: fixed;
			z-index: 100;
			background-color: var(--color-primary-light);
		}
		
	}

/* @group Banner */

.banner {
	max-width: var(--width-container-lg);
	margin-inline: auto;
	padding-block: 2rem;
	padding-inline: var(--spacing-inline);
}

	@media (min-width: 1000px) {
		
		.banner {
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
		}
		
		.header.fixed .banner {
			flex-direction: row;
			padding-block: .75rem;
		}
		
	}
	
/* @end */

/* @group Logo */

.logo {
	width: max-content;
	margin-left: -1rem;
	padding-left: 1rem;
	background-image: url(../images/logo-underline.svg);
	background-repeat: no-repeat;
	background-size: auto 85%;
	background-position: left .8rem;
	mix-blend-mode: multiply;
}

	.logo__title {
		font-size: 2.3rem;
		font-weight: bold;
		line-height: 1em;
	}
	
	.logo__subtitle {
		font: var(--font-sm);
		font-weight: bold;
		white-space: nowrap;
	}
	
	@media (min-width: 1000px) {
	
		.logo {
			margin-top: 3rem;
		}
	
		.header.fixed .logo {
			margin-top: unset;
			background-image: unset;
		}
		
		.header.fixed .logo__title {
			font-size: 1.2rem;
		}
		
		.header.fixed .logo__subtitle {
			display: none;
		}
		
	}

/* @end */

/* @group Menu */

.menu {
	display: flex;
	column-gap: 1.5em;
	transition: position .5s ease-in-out 0s;
}

	@media (max-width: 999px) {
		
		.menu {
			position: fixed;
			z-index: 30;
			top: 0;
			left: -100%;
			width: calc(100vw - 5rem);
			flex-direction: column;
			row-gap: 1rem;
			padding-block: 1.5rem 2.5rem;
			padding-inline: 1.5rem;
			background-color: var(--color-primary-light);
			border-bottom-right-radius: 1.2rem;
			font-size: 1.4rem;
			font-weight: bold;
			line-height: 1.2em;
		}
		
		.menu.open {
			left: 0;
		}
		
	}
	
	@media (min-width: 1000px) {
		
		.menu {
			flex-wrap: wrap;
			justify-content: flex-end;
			row-gap: .5em;
			font: var(--font-sm);
			font-weight: bold;
		}
		
			.menu > *:first-child {
				display: none;
			}
		
	}

/* @end */

/* @group Toggle */

.toggle {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 30;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 1rem;
	color: var(--color-base);
	background-color: var(--color-primary-light);
	border-bottom-left-radius: 1.2rem;
	text-align: center;
}

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

/* @group Hamburger */

.hamburger {
	position: relative;
	width: 2rem;
	height: 2rem;
}

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

	.hamburger > *:nth-child(3) {
		transform: translateY(calc(-50% - .5em));
	}
	
	.hamburger--open > *:nth-child(1),
	.hamburger--open > *:nth-child(3) {
		margin-inline: auto;
	}
	
	.hamburger--open > *:nth-child(1) {
		transform: rotate(45deg);
	}
	
	.hamburger--open > *:nth-child(2) {
		opacity: 0;
	}
	
	.hamburger--open > *:nth-child(3) {
		transform: rotate(-45deg);
	}

/* @end */

/* @end */

/* @end */

/* @group Overlay */

.overlay {
	pointer-events: none;
	position: fixed;
	z-index: 20;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	background-color: var(--color-base);
	opacity: 0;
	transition: opacity .2s ease-in-out 0s;
}

	.overlay.open {
		pointer-events: auto;
		opacity: .5;
	}

/* @end */

/* @group Main */

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

.main:has(.navigation:last-child) {
	padding-bottom: var(--spacing-block);
}

.main:not(.main--home) {
	max-width: var(--width-container);
	margin-inline: auto;
	padding-top: var(--spacing-block);
	padding-inline: var(--spacing-inline);
}

.main--posts:not(.main--home),
.main--partners:not(.main--home) {
	max-width: var(--width-container-lg);
}

	@media (min-width: 1000px) {
		
		.main {
			margin-top: 12rem; /* placeholder for .header */
		}
		
	}

/* @end */

/* @group Section */

.section {
	container-type: inline-size;
	scroll-margin-top: var(--spacing-block-xxl);
}

.section:has(+ *) {
	margin-bottom: var(--spacing-block-xxl);
}

	.section__title {
		max-width: var(--width-container);
		margin-bottom: .5em;
		margin-inline: auto;
		padding-inline: var(--spacing-inline);
		font: var(--font-sm);
		font-weight: bold;
		text-transform: uppercase;
		text-align: center;
	}

/* @end */

/* @group Columns & Column */

.columns {
	display: grid;
	column-gap: 2.5rem;
	row-gap: var(--spacing-block);
	max-width: var(--width-container);
	margin-inline: auto;
	padding-inline: var(--spacing-inline);
}

.columns:has(+ *) {
	margin-bottom: var(--spacing-block);
}

.columns--lg {
	max-width: var(--width-container-lg);
}

@container (min-width: 40rem) {
	
	.columns {
		grid-template-columns: 1fr 1fr;
	}
	
}
	
.column {
	container-type: inline-size;
}

	.column figure:has(+ p) {
		margin-bottom: var(--spacing-block);
	}

.column.span-2 {
	grid-column: span 2;
	text-align: center;
}

	.column.span-2 h1 {
		color: var(--color-primary);
		font: var(--font-xxl);
	}

	.column.span-2 h1:has(+ *) {
		margin-bottom: .5rem;
	}
	
	.column .cards {
		margin-top: var(--spacing-block);
	}

/* @end */

/* @group Blocks */

*[class$="-block"] {
	margin-inline: auto;
	padding-inline: var(--spacing-inline);
}

*[class$="-block"]:has(+ *) {
	margin-bottom: var(--spacing-block);
}

/* @group image */

.image:has(+ *) {
	margin-bottom: 1rem;
}

	.image > * {
		margin-inline: -2.5%;
	}

/* @end */

/* @group Images */

.images {
	
}

	@container (max-width: 39.999999999rem) {
	
		.images {
			display: flex;
		  flex-direction: column;
			align-items: center;
			max-width: 24rem;
			margin-inline: auto;
		}
		
			.images > * {
				width: 85%;
			}
			
			.images > *:nth-child(odd) {
				margin-left: -15%;
				transform: rotate(-1deg);
			}
			
			.images > *:nth-child(odd):not(:first-child) {
				margin-top: -10%;
			}
			
			.images > *:nth-child(even) {
				margin-top: -10%;
				margin-right: -10%;
				transform: rotate(1deg);
			}
		
	}
	
	@container (min-width: 40rem) {
		
		.images {
			display: grid;
			grid-template-columns: 1fr 1fr;
			align-items: start;
		}
			
			.images > *:nth-child(1) {
				transform: rotate(-1deg);
				margin-left: -10%;
				margin-right: -10%;
			}
			
			.images > *:nth-child(2) {
				transform: rotate(1deg);
				margin-top: 15%;
				margin-left: -10%;
				margin-right: -10%;
			}
			
			.images > *:nth-child(3) {
				transform: rotate(1deg);
				margin-top: -25%;
			}
			
			.images > *:nth-child(4) {
				transform: rotate(-1deg);
				margin-top: -5%;
				margin-left: -5%;
			}
			
			.images > *:nth-child(5) {
				transform: rotate(1deg);
				margin-top: -30%;
				margin-left: 30%;
				margin-right: -30%;
			}
	
	}

/* @end */

/* @group Gallery */

.gallery {
	
}

	.gallery > * {
		position: relative;
	}

	.gallery > *:not(:nth-child(1)) {
		width: 85%;
		margin-top: -10%;
	}
	
	.gallery > *:nth-child(1) {
		z-index: 9;
	}
	
	.gallery > *:nth-child(2) {
		z-index: 8;
		transform: rotate(-1deg);
	}
	
	.gallery > *:nth-child(3) {
		z-index: 7;
		transform: rotate(1deg);
	}
	
	.gallery > *:nth-child(4) {
		z-index: 6;
		transform: rotate(1deg);
	}
	
	.gallery > *:nth-child(5) {
		z-index: 5;
		transform: rotate(-1deg);
	}
	
	.gallery > *:nth-child(6) {
		z-index: 4;
		transform: rotate(-1deg);
	}
	
	.gallery > *:nth-child(7) {
		z-index: 3;
		transform: rotate(1deg);
	}
	
	.gallery > *:nth-child(8) {
		z-index: 2;
		transform: rotate(1deg);
	}
	
	.gallery > *:nth-child(9) {
		z-index: 1;
		transform: rotate(-1deg);
	}

	@container (max-width: 39.999999999rem) {
		
		.gallery {
			display: flex;
	    flex-direction: column;
			align-items: center;
			max-width: 20rem;
			margin-inline: auto;
	  }
			
			.gallery > *:not(:nth-child(1)) {
				width: 85%;
				margin-top: -10%;
			}
			
			.gallery > *:nth-child(1) {
				margin-inline: -.5rem;
			}
			
			.gallery > *:nth-child(2) {
				margin-right: 2%;
			}
			
			.gallery > *:nth-child(3) {
				align-self: flex-end;
			}
			
			.gallery > *:nth-child(4) {
				align-self: flex-start;
				margin-top: -8%;
				margin-left: 2%;
			}
			
			.gallery > *:nth-child(5) {
				align-self: flex-end;
				margin-left: 1%;
			}
			
			.gallery > *:nth-child(6) {
				align-self: flex-start;
				margin-top: -8%;
			}
			
			.gallery > *:nth-child(7) {
				align-self: flex-end;
			}
			
			.gallery > *:nth-child(8) {
				align-self: flex-start;
			}
			
			.gallery > *:nth-child(9) {
				
			}
		
	}
	
	@container (min-width: 40rem) {
		
		.gallery {
			position: relative;
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			align-items: center;
			padding-top: 10%;
			padding-bottom: 5%;
		}
		
			.gallery > *:not(:nth-child(1)) {
				width: 100%;
			}
			
			.gallery > *:nth-child(1) {
				position: absolute;
				top: 50%;
				left: 50%;
				width: 50%;
				transform: translate(-50%, -50%);
			}
			
			.gallery > *:nth-child(2) {
				grid-column: 2;
				/*top: -33.333333333%;*/
				margin-top: -50%;
			}
			
			.gallery > *:nth-child(3) {
				margin-left: -15%;
				margin-top: -8%;
			}
			
			.gallery > *:nth-child(4) {
				grid-column: 1;
				grid-row: 2;
				margin-top: -5%;
				margin-left: -10%;
			}
			
			.gallery > *:nth-child(5) {
				z-index: 8;
				margin-block: -10% -7%;
				margin-left: 18%;
				margin-right: -18%;
				grid-column: 1;
				grid-row: 1;
			}
			
			.gallery > *:nth-child(6) {
				z-index: 3;
				margin-top: -20%;
				margin-left: -15%;
				grid-column: 3;
				grid-row: 3;
				transform: rotate(1deg);
			}
			
			.gallery > *:nth-child(7) {
				margin-top: -20%;
				grid-column: 3;
				grid-row: 2;
				transform: rotate(-1deg);
			}
			
			.gallery > *:nth-child(8) {
				z-index: 7;
				margin-top: -12%;
				margin-left: 20%;
				margin-right: -20%;
				grid-column: 1;
				grid-row: 3;
				transform: rotate(-1deg);
			}
			
			.gallery > *:nth-child(9) {
				z-index: 5;
				margin-right: -10%;
				margin-bottom: -25%;
				grid-column: 2;
				grid-row: 3;
				transform: rotate(1deg);
			}
		
	}

/* @end */

/* @end */

/* @group Tags */

.tags {
	display: flex;
	flex-wrap: wrap;
	gap: .5em;
	font: var(--font-sm);
	font-weight: 600;
	line-height: 1em;
}

	.tags a {
		padding: .5em 1em;
		border: 2px solid var(--color-base);
		border-radius: 2em;
		transition: background-color .2s ease-in-out 0s;
	}
	
	.tags a:hover,
	.tags a.active {
		color: var(--color-white);
		background-color: var(--color-base);
	}

/* @end */

/* @group Cards & Card */

.cards {
	display: grid;
	gap: 2.5rem;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
}

* + .cards {
	margin-top: var(--spacing-block);
}

.cards:has(+ a) {
	margin-bottom: var(--spacing-block);
}

.card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding-block: 1.5rem 1.5rem;
	padding-inline: 1.5rem;
	border-radius: 1rem;
	font: var(--font-sm);
	text-align: left;
	mix-blend-mode: multiply;
}

.card:has(> .card__header) {
	padding-top: unset;
}

.card--full {
	background-color: var(--color-primary-lighter);
}

.card--outline {
	border: 2px solid var(--color-primary);
}

	.card__header {
		width: max-content;
		margin-left: -1.5rem;
		margin-bottom: .5rem;
		padding-block: .4em;
		padding-inline: 1.5rem;
		background-color: var(--color-primary-light);
		border-top-left-radius: 1rem;
		border-bottom-right-radius: 1rem;
		font-weight: bold;
	}
	
	.card__meta {
		margin-bottom: 1rem;
		font-weight: bold;
	}

	.card h2:has(+ .card__logo) {
		margin-right: 4rem;
	}

	.card__logo {
		position: absolute;
		top: .75rem;
		right: .75rem;
		width: auto;
		height: 2rem;
		mix-blend-mode: multiply;
	}
	
	.card__footer {
		margin-top: auto;
	}
	
	.card--full .card__footer {
		text-align: right;
	}
	
	.card__link {
		font-weight: bold;
	}

/* @end */

/* @group Text */

.text {
	
}

/* @end */

/* @group Attachments & Attachment */

.attachments {
	display: flex;
	flex-direction: column;
	row-gap: .5em;
}

* + .attachments {
	margin-top: 2em;
}

/* @end */

/* @group Navigation */

* + .navigation {
	margin-top: 4rem;
}

/* @end */

/* @group Footer */

.footer {
	padding-bottom: 2rem;
}

/* @group Colophon */

.colophon {
	background-color: var(--color-primary-lighter);
	mix-blend-mode: multiply;
}

	.colophon > * {
		max-width: var(--width-container-lg);
		margin-inline: auto;
		padding-block: clamp(1.5rem, 2vw, 2rem) clamp(2rem, 2.5vw, 2.5rem);
		padding-inline: var(--spacing-inline);
	}

/* @end */

/* @group Footer-menu */

.footer-menu {
	display: flex;
	justify-content: flex-end;
	flex-wrap: wrap;
	column-gap: 1.25em;
	max-width: var(--width-container-lg);
	margin-block: 1rem 3rem;
	margin-inline: auto;
	padding-inline: var(--spacing-inline);
	font: var(--font-sm);
	font-weight: bold;
}

/* @end */

/* @group Copyright */

.copyright {
	max-width: var(--width-container-lg);
	margin-inline: auto;
	padding-inline: var(--spacing-inline);
	font: var(--font-sm);
}

/* @end */

/* @end */