/* @group FONTS */

@font-face {
  font-family: 'Noto Sans';
  src: url('../fonts/NotoSans-VariableFont_wght400_700.woff2') format('woff2 supports variations'),
       url('../fonts/NotoSans-VariableFont_wght400_700.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Sans';
  src: url('../fonts/NotoSans-Italic-VariableFont_wght400_700.woff2') format('woff2 supports variations'),
       url('../fonts/NotoSans-Italic-VariableFont_wght400_700.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Sans Display';
  src: url('../fonts/NotoSansDisplay-VariableFont_wght400_700.woff2') format('woff2 supports variations'),
       url('../fonts/NotoSansDisplay-VariableFont_wght400_700.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Sans Display';
  src: url('../fonts/NotoSansDisplay-Italic-VariableFont_wght400_700.woff2') format('woff2 supports variations'),
       url('../fonts/NotoSansDisplay-Italic-VariableFont_wght400_700.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

/* @end */

/* @group VARIABLES */

:root {
	
	--color-base: 				#333333;
	--color-primary: 		#0099D5;
	--color-grey-dark: 	#808080;
	--color-grey:				#D9D9D9;
	--color-grey-light: 	#E6E6E6;
	--color-background:	#FFFFFF;
	
	--font-family: 					'Noto Sans', Helvetica, Arial, sans-serif;
	--font-family-display: 	'Noto Sans Display', Helvetica, Arial, sans-serif;
	
	--font-xs:		480 12px/1.25em var(--font-family);
	--font-sm:		450 16px/1.5em var(--font-family);
	--font: 			400 18px/1.5em var(--font-family);
	--font-md:		400 23px/1.5em var(--font-family);
	--font-lg:			700 27px/1.3em var(--font-family-display);
	--font-xl:			700 36px/1.3em var(--font-family-display);
	--font-xxl:		700 52px/1.1em var(--font-family-display);
	
	--font-weight-bold: 700;
	
	--min-width: 320px;
	--max-width: 1300px;
	
	--spacing-xs: 	.75rem;
	--spacing-sm: 	clamp(.75rem, 1vw, 1.5rem);
	--spacing:			clamp(1.5rem, 2vw, 3rem);
	--spacing-lg: 		clamp(3rem, 7.2vw, 4.5rem);
	--spacing-xl: 		clamp(4.5rem, 10.8vw, 6rem);
	
	--spacing-columns: 	2rem;
	--spacing-rows: 		clamp(2rem, 7.2vw, 4rem);
	
	--spacing-inline: 		clamp(1rem, 5.4vw, 3rem);
	
	--logo-height: clamp(3rem, 5.4vw, 3.5rem);
	
}

	@media (max-width: 999px) {
		
		:root {
			--font-md:		400 18px/1.5em var(--font-family);
			--font-lg:			700 23px/1.3em var(--font-family-display);
			--font-xl:			700 30px/1.3em var(--font-family-display);
			--font-xxl:		700 36px/1.1em var(--font-family-display);
		}
		
	}

/* @end */

/* @group BASE */

html {
	scroll-behavior: smooth;
}

html,
body {
	min-width: var(--min-width);
	color: var(--color-base);
	background-color: var(--color-background);
	font: var(--font);
	font-variant-numeric: tabular-nums;
}

strong {
	font-weight: var(--font-weight-bold);
}

em {
	font-style: italic;
}

h1 {
	max-width: 18em;
	font: var(--font-xxl);
	text-wrap: balance;
	word-break: break-word;
}

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

.article.person h1 {
	margin-bottom: .5rem;
}

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

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

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

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

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

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

h4 {
	font-weight: var(--font-weight-bold);
}

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

.logos + h4 {
	margin-top: var(--spacing-columns);
}

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

h4:has(+ .logos) {
	margin-bottom: var(--spacing-columns);
}

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

p:has(+ .logos) {
	margin-bottom: var(--spacing-columns);
}

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

img,
video {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

.main figure {
	position: relative;
}

	.main figure figcaption {
		position: absolute;
		right: 0;
		bottom: 0;
		padding-block: .2em;
		padding-inline: .6em;
		background-color: rgba(255,255,255,.8);
		border-top-left-radius: .5em;
		color: var(--color-base);
		font: var(--font-xs);
		text-align: right;
	}
	
	
/* @group Lists */

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

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

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

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

/* @end */

/* @group Links */

a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: transparent;
	text-underline-offset: .2em;
	transition: all .15s ease-in-out 0s;
}

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

.main a {
	color: var(--color-primary);
}

	a.more::after {
		content: "  ›";
	}

a[href^="mailto:"],
a[href^="tel:"],
a[href*="maps.app"],
a[download],
a.website {
	display: inline-flex;
	align-items: baseline;
}

	a[href^="mailto:"]::before,
	a[href^="tel:"]::before,
	a[href*="maps.app"]::before,
	a[download]::before,
	a.website::before {
	  content: "";
		position: relative;
		top: .1em;
		flex: 0 0 1em;
	  -webkit-mask-size: cover;
	  mask-size: cover;
	  width: 1em;
	  height: 1em;
		margin-right: .3em;
	  background-color: currentColor;
		transition: transform .15s ease-in-out 0s;
	}
	
	a[href^="mailto:"]::before {
	  -webkit-mask-image: url(../images/email.svg);
	  mask-image: url(../images/email.svg);
	}
	
	a[href^="tel:"]::before {
	  -webkit-mask-image: url(../images/phone.svg);
	  mask-image: url(../images/phone.svg);
	}
	
	a[href*="maps.app"]::before {
	  -webkit-mask-image: url(../images/map.svg);
	  mask-image: url(../images/map.svg);
	}
	
	a[download]::before {
	  -webkit-mask-image: url(../images/file.svg);
	  mask-image: url(../images/file.svg);
	}
	
	a.website::before {
	  -webkit-mask-image: url(../images/world.svg);
	  mask-image: url(../images/world.svg);
	}
	
	a[href^="mailto:"]:hover::before,
	a[href^="tel:"]:hover::before,
	a[href*="maps.app"]:hover::before,
	a[download]:hover::before,
	a.website:hover::before {
		transform: scale(1.1);
	}

/* @end */

/* @group Buttons */

.button {
	padding: .25em .75em;
	background-color: var(--color-primary);
	color: var(--color-background);
	font-weight: bold;
	transition: all .2s ease-in-out 0s;
}

.button:hover {
	cursor: pointer;
	transform: scale(1.05);
}

/* @end */

/* @group Form */

form {
	display: flex;
	flex-direction: column;
	row-gap: 1em;
	padding-block: 1rem 1.5rem;
	padding-inline: 1rem;
	background-color: var(--color-grey-light);
}

label {
	display: block;
	width: 100%;
	margin-bottom: .2em;
}

input[type="text"],
input[type="email"] {
	width: 100%;
	padding: .25em .5em;
	color: var(--color-primary);
	background-color: var(--color-background);
}

	form .button {
		align-self: flex-start;
		margin-top: 1em;
	}

/* @end */

/* @end */

/* @group Header */

.header {
	
}

	@media (max-width: 999px) {
		
			.header .logo__subtitle {
				display: none;
			}
		
	}

	@media (min-width: 1000px) {
		
		.header {
			display: flex;
			justify-content: space-between;
			align-items: baseline;
			column-gap: 2rem;
			max-width: var(--max-width);
			margin-inline: auto;
			padding: var(--spacing-inline);
		}
		
	}

/* @end */

/* @group Banner */

.banner {
	transition: all .15s ease-in-out 0s;
}

	@media (max-width: 999px) {
		
		.banner {
			position: fixed;
			z-index: 10;
			top: 0;
			right: 0;
			left: 0;
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			padding-block: 1.25rem;
			padding-inline: var(--spacing-inline);
			background-color: var(--color-background);
		}
		
		.banner.fixed:not(.open) {
			--logo-height: 2rem;
			padding-block: .75rem;
		}
		
			.banner.fixed:not(.open)::after {
				content: "";
				position: absolute;
				bottom: -.75rem;
				right: 0;
				left: 0;
				height: .75rem;
				background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(255,255,255,0) 100%);
			}
		
	}

/* @group Logo */

.logo {
	
}

	.logo svg {
		width: auto;
		height: var(--logo-height);
		transition: all .15s ease-in-out 0s;
		vertical-align: baseline;
	}
	
	.logo__subtitle {
		font: var(--font-sm);
		white-space: nowrap;
	}
	
	@media (max-width: 999px) {
		
		.logo svg {
			vertical-align: top;
		}
		
	}

/* @end */

/* @group Toggle */

.toggle {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.toggle:hover {
	cursor: pointer;
}

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

/* @group Hamburger */

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

	.hamburger > * {
		display: block;
		position: absolute;
		top: 50%;
		height: .2em;
		width: 100%;
		background-color: currentColor;
		transition: all .15s 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 Menu */

.menu {
	font-weight: 500;
}

	.menu > * {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
	}

	@media (max-width: 999px) {
		
		.menu {
			position: fixed;
			z-index: 10;
			top: calc(2.5rem + var(--logo-height));
			bottom: 0;
			right: 0;
			left: 0;
			padding-bottom: 1.25rem;
			padding-inline: var(--spacing-inline);
			background-color: var(--color-background);
			transform: translateX(-100%);
			transition: transform .3s ease-in-out 0s;
		}
		
		.menu.open {
			transform: translateX(0);
		}
		
			.menu > * {
				flex-direction: column;
				padding-block: .4em;
			}
			
			.menu > *:first-child {
				padding-top: unset;
			}
			
			.menu > *:not(:last-child) {
				border-bottom: 1px solid var(--color-grey);
			}
			
			.menu a {
				padding-block: .4em;
			}
		
	}
	
	@media (min-width: 1000px) {
		
		.menu {
			
		}
		
			.menu > * {
				column-gap: 2rem;
			}
		
			.menu .secondary-menu {
				display: none;
			}
		
	}

/* @end */

/* @group Main */

.main {
	max-width: var(--max-width);
	margin-inline: auto;
	padding-top: var(--spacing);
	padding-bottom: var(--spacing-xl);
	padding-inline: var(--spacing-inline);
}

	@media (max-width: 999px) {
	
		.main {
			margin-top: calc(2.5rem + var(--logo-height)); /* placeholder for banner */
		}

	}

/* @end */

/* @group Breadcrumb */

.breadcrumb {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: .5rem;
	font: var(--font-sm);
}

.breadcrumb:has(> *:only-child) {
	display: none;
}
	
	.breadcrumb > *:last-child {
		display: none;
	}

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

		.breadcrumb > *:after {
			content: "›";
			display: inline-block;
			width: 1em;
			font: var(--font);
			text-align: center;
		}

/* @end */

/* @group Article */

.article {
	display: grid;
	column-gap: var(--spacing-columns);
}

.article:has(+ *) {
	margin-bottom: var(--spacing-lg);
}

	.article:not(.person, .default) .text {
		font: var(--font-md);
	}
	
	.article .aside {
		grid-area: aside;
	}
	
	@media (max-width: 999px) {
		
		.article {
			grid-template-areas: 
        "cover"
        "meta"
        "title"
				"anchor-menu"
				"text"
				"films"
				"aside";
		}
		
			.article .aside {
				padding-top: 1.5rem;
				border-top: 1px solid var(--color-grey);
			}
		
	}
	
	@media (min-width: 600px) and (max-width: 999px) {
		
		.article.publication .cover {
			width: calc(50% - .5*var(--spacing-columns));
		}
		
	}

	@media (min-width: 1000px) {
		
		.article {
			grid-template-columns: repeat(3, 1fr);
			grid-template-rows: auto auto auto 1fr;
			grid-template-areas: 
        "cover cover cover"
        "meta meta meta"
        "title title ."
				"anchor-menu anchor-menu anchor-menu"
				"text text aside"
				"films films films";
			align-items: start;
		}
			
		.article.default {
			grid-template-columns: 1fr;
		}
		
		.article.publication {
			grid-template-areas: 
        "cover meta meta"
        "cover title title"
				"cover text text"
				"cover aside aside";
		}
			
			.article:not(.publication) aside {
				padding-left: 1.5rem;
				border-left: 1px solid var(--color-grey);
			}
			
			.article:not(.publication) .films + aside {
				margin-bottom: 1.5rem;
			}
			
			.article.publication .aside {
				padding-top: 1.5rem;
				border-top: 1px solid var(--color-grey);
			}
			
		.article.person,
		.article.default:has(> .cover) {
			grid-template-columns: repeat(2, 1fr);
			grid-template-rows: auto 1fr;
			grid-template-areas: 
        "cover title"
        "cover text";
		}
		
	}

/* @end */

/* @group Blocks */

.blocks {
	
}

.blocks:has(+ *) {
	margin-bottom: var(--spacing-lg);
}

	.blocks img {
		width: 100%;
	}
	
	

	@media (min-width: 1000px) {
		
		.blocks {
			columns: 2;
			column-gap: var(--spacing-columns);
		}
			
			.blocks > * {
				break-inside: avoid;
			}
		
			.blocks h2,
			.blocks h3,
			.blocks h4 {
			  break-after: avoid;
			}
		
	}

/* @end */

/* @group Sections */

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

	@media (max-width: 999px) {
		
		[class*="-section"] {
			scroll-margin-top: calc(var(--spacing) + var(--logo-height));
		}
		
	}
	
	@media (min-width: 1000px) {
		
		[class*="-section"] {
			scroll-margin-top: var(--spacing);
		}
		
	}

/* @group Members-section */

.members-section {
	
}

	@media (min-width: 1000px) {
		
		.members-section {
			display: grid;
			column-gap: var(--spacing-columns);
			grid-template-columns: repeat(2, 1fr);
			grid-template-areas: 
        "title title"
        "text text"
				"cover list";
		}
		
			.members-section .text {
				columns: 2;
				column-gap: var(--spacing-columns);
			}
		
	}

/* @end */

/* @group Newsletter-section */

.newsletter-section {
	
}

.article:has(+ .newsletter-section) {
	margin-bottom: var(--spacing);
}

	@media (min-width: 1000px) {
		
		.newsletter-section {
			display: grid;
			column-gap: var(--spacing-columns);
			grid-template-columns: repeat(3, 1fr);
		}
		
			.newsletter-section > * {
				grid-column: span 2;
			}
		
	}

/* @end */

/* @end */

/* @group Cover */

.cover {
	grid-area: cover;
	margin-bottom: 2rem;
}

/* @end */

/* @group Title */

.title {
	grid-area: title;
}

/* @end */

/* @group Meta */

.meta {
	grid-area: meta;
	margin-bottom: .5em;
	font-weight: var(--font-weight-bold);
}

	.card .meta .categories {
		margin-bottom: -.5em;
	}

.meta:has(+ h1) {
	font: var(--font-lg);
}

/* @end */

/* @group Categories */

* + .categories {
	margin-top: .5em;
}

.categories {
	display: flex;
	flex-wrap: wrap;
	font-weight: var(--font-weight-bold);
}

	.categories > *:not(:last-child)::after {
		content: " · ";
	}

/* @end */

/* @group Anchor-menu */

.anchor-menu {
	grid-area: anchor-menu;
	display: flex;
	flex-wrap: wrap;
	column-gap: clamp(1em, 3.8vw, 2em);
	row-gap: .5em;
	padding-block: .5em;
	border-top: 1px solid var(--color-grey);
	border-bottom: 1px solid var(--color-grey);
}

.anchor-menu:has(+ *) {
	margin-bottom: 2rem;
}

/* @end */

/* @group Text */

.text {
	grid-area: text;
}

.text:has(+ *) {
	margin-bottom: 1.5rem;
}

	.text > * {
		break-inside: avoid;
	}

/* @end */

/* @group List */

.list {
	grid-area: list;
}

	.list ul {
		display: flex;
		flex-wrap: wrap;
		column-gap: 1em;
	}
	
	.list li {
		
	}

/* @end */

/* @group Films */

.films {
	display: flex;
	flex-direction: column;
	row-gap: 1.5rem;
	grid-area: films;
}

	.films video {
		width: 100%;
	}

/* @end */

/* @group Downloads */

.downloads {
	display: flex;
	flex-direction: column;
	row-gap: .25em;
}

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

/* @end */

/* @group Logos & Logo */

.logos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
	column-gap: var(--spacing-columns);
	row-gap: var(--spacing-columns);
}

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

	.logos > * {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.logos img.landscape {
		max-width: 12rem;
	}
	
	.logos img.square {
		max-width: 50%;
	}
	
	.logos img.portrait {
		width: auto;
		max-height: 12em;
	}

/* @end */

/* @group Teasers */

.teasers {
	display: grid;
	column-gap: var(--spacing-columns);
	row-gap: var(--spacing-rows);
}

.teasers:has(+ *) {
	margin-bottom: var(--spacing-lg);
}

	@media (min-width: 800px) {
			
		.teasers {
			grid-template-columns: repeat(2, 1fr);
		}
		
	}

/* @end */

/* @group Crossheading */

.crossheading {
	margin-bottom: 1rem;
	padding-bottom: .5em;
	border-bottom: 1px solid var(--color-grey);
	font: var(--font-sm);
}

	@media (max-width: 999px) {
		
		.crossheading {
			scroll-margin-top: calc(2.5rem + var(--logo-height));
		}
		
	}
	
	@media (min-width: 1000px) {
		
		.crossheading {
			scroll-margin-top: 1rem;
		}
		
	}

/* @end */

/* @group Cards & Card */

.cards {
	display: grid;
	column-gap: var(--spacing-columns);
	row-gap: var(--spacing-rows);
}

.cards:has(+ *:not(.crosslink)) {
	margin-bottom: var(--spacing-lg);
}

	.crossheading + .cards .card:nth-child(1) {
		padding-top: unset;
		border-top: unset;
	}

	@media (min-width: 600px) and (max-width: 999px) {
		
		.cards {
			grid-template-columns: repeat(2, 1fr);
		}
		
			.crossheading + .cards .card:nth-child(-n + 2) {
				padding-top: unset;
				border-top: unset;
			}
		
	}

	@media (min-width: 1000px) {
			
		.cards {
			grid-template-columns: repeat(2, 1fr);
		}
			
		.cards:has(> .card.slim) {
			grid-template-columns: repeat(3, 1fr);
		}
		
		.cards:has(> .card.wide) {
			grid-template-columns: 1fr;
		}
		
			.cards:has(> .card.wide) .card__body {
				grid-column: 2;
			}
		
			.crossheading + .cards .card:nth-child(-n + 2),
			.crossheading + .cards .card.slim:nth-child(-n + 3),
			.crossheading + .cards .card.wide:nth-child(1) {
				padding-top: unset;
				border-top: unset;
			}

	}

.card {
	
}

.card:not(:has(> figure)) {
	padding-top: .5rem;
	border-top: 1px solid var(--color-grey);
}

	.card figure {
		margin-bottom: .5rem;
	}

	.card img {
		width: 100%;
	}
	
	.card h3 {
		margin-top: unset;
		word-break: break-word;
	}
	
	.card h3:has(+ .card__position) {
		margin-bottom: unset;
	}
	
	@media (min-width: 1000px) {
		
		.card.wide {
			display: grid;
			align-items: start;
			grid-template-columns: 1fr 1fr;
			column-gap: var(--spacing-columns);
		}
		
	}

/* @end */

/* @group Links & Link */

.links {
	columns: 16rem auto;
	column-gap: var(--spacing-columns);
}

.links:has(+ *:not(.crosslink)) {
	margin-bottom: var(--spacing-lg);
}

.links > * {
	break-inside: avoid;
}

/* @end */

/* @group Articles */

.articles {
	display: grid;
	column-gap: var(--spacing-columns);
	row-gap: 1em;
}

	@media (min-width: 1000px) {
		
		.articles {
			grid-template-columns: repeat(2, 1fr);
		}
		
	}

/* @end */

/* @group Organisers */

.organisers {
	
}

	.organisers > *:has(+ *) {
		margin-bottom: 1.5em;
	}
	
	.organisers > *:not(:has(> picture)):has(+ *) {
		margin-bottom: .5em;
	}

	.organisers picture {
		display: block;
		margin-top: 1em;
		text-align: center;
	}
	
	.organisers img.portrait {
		max-width: 45%;
	}
	
	.organisers img.square {
		max-width: 60%;
	}
	
	.organisers img.landscape {
		max-width: 90%;
	}

/* @end */

/* @group Crosslink */

.crosslink {
	margin-top: 1rem;
	padding-top: .5em;
	border-top: 1px solid var(--color-grey);
	font: var(--font-sm);
	text-align: right;
}

/* @end */

/* @group Contact */

.contact {
	
}

	.contact a {
		display: flex;
	}

/* @end */

/* @group Footer */

.footer {
	padding-top: var(--spacing);
	padding-bottom: var(--spacing-lg);
	background-color: var(--color-grey-light);
}

/* @group Colophon */

.colophon {
	display: grid;
	column-gap: var(--spacing-columns);
	max-width: var(--max-width);
	margin-inline: auto;
	padding-inline: var(--spacing-inline);
}

	.colophon .logo {
		margin-bottom: 1.5rem;
	}
	
	.colophon .channels {
		margin-bottom: 2.5rem;
	}
	
	.colophon .contact {
		margin-bottom: var(--spacing-lg);
	}

	.colophon .footer-menu {
		margin-bottom: var(--spacing-lg);
	}
	
	.colophon .footer-links {
		margin-bottom: var(--spacing-lg);
	}
	
	@media (min-width: 699px) {
		
			.colophon .logo {
				grid-area: logo;
			}
			
			.colophon .channels {
				grid-area: channels;
			}
			
			.colophon .contact {
				grid-area: contact;
			}
		
			.colophon .footer-menu {
				grid-area: menu;
			}
			
			.colophon .footer-links {
				grid-area: links;
			}
			
			.colophon .copyright {
				grid-area: copyright;
			}
		
	}
	
	@media (min-width: 699px) and (max-width: 999px) {
		
		.colophon {
			grid-template-columns: repeat(2, 1fr);
			grid-template-areas: 
        "logo 	contact"
				"channels	contact"
				"channels menu"
				"channels links"
				"copyright copyright";
		}
		
	}
	
	@media (min-width: 1000px) {
		
		.colophon {
			grid-template-columns: repeat(4, 1fr);
			grid-template-rows: max-content 1fr auto auto;
			grid-template-areas: 
        "logo logo contact menu"
				"channels channels contact menu"
				"channels channels links links"
				"copyright copyright copyright copyright";
		}
		
	}

/* @end */

/* @group Channels */

.channels {
	display: flex;
	column-gap: 1rem;
}

	.channels a {
		display: inline-flex;
	}

		.channels a::before {
		  content: "";
			position: relative;
		  -webkit-mask-size: cover;
		  mask-size: cover;
		  width: 1.5rem;
		  height: 1.5rem;
		  background-color: currentColor;
			transition: transform .15s ease-in-out 0s;
		}
		
		.channels a[href*="linkedin"]::before {
		  -webkit-mask-image: url(../images/linkedin.svg);
		  mask-image: url(../images/linkedin.svg);
		}
		
		.channels a[href*="facebook"]::before {
		  -webkit-mask-image: url(../images/facebook.svg);
		  mask-image: url(../images/facebook.svg);
		}
		
		.channels a[href*="instagram"]::before {
		  -webkit-mask-image: url(../images/instagram.svg);
		  mask-image: url(../images/instagram.svg);
		}
		
		.channels a:hover::before {
			transform: scale(1.1);
		}

/* @end */

/* @group Footer-menu */

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

/* @end */

/* @group Footer-links */

.footer-links {
	display: flex;
	flex-wrap: wrap;
	column-gap: 1em;
	row-gap: .5em;
}

/* @end */

/* @end */

/* @group Scrollup */

.scrollup {
	position: fixed;
	top: 100dvh;
	right: 0;
	display: flex;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	padding: .5em;
	color: var(--color-background);
	background-color: var(--color-primary);
	box-shadow: 0 .1em .5em rgba(0,0,0,.4);
	transition: all .1s ease-in-out 0s;
}

.scrollup:hover {
	cursor: pointer;
}

.scrollup.fixed {
	top: calc(100dvh - env(safe-area-inset-bottom, 0.5vh));
	transform: translateY(-100%);
}

	.scrollup > svg {
		width: 100%;
		height: auto;
	}

/* @end */