/* @group FONTS */

@font-face {
  font-family: 'Aleo';
  src: url('../fonts/Aleo-VariableFont_wght.woff2') format('woff2 supports variations'),
       url('../fonts/Aleo-VariableFont_wght.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'Aleo';
  src: url('../fonts/Aleo-Italic-VariableFont_wght.woff2') format('woff2 supports variations'),
       url('../fonts/Aleo-Italic-VariableFont_wght.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/PlayfairDisplay-VariableFont_wght.woff2') format('woff2 supports variations'),
       url('../fonts/PlayfairDisplay-VariableFont_wght.woff2') format('woff2-variations');
  font-weight: 400 900;
  font-display: swap;
}

/* @end */

/* @group VARIABLES */

:root {
	
	--font-family: 'Aleo', Georgia, Times, serif;
	
	--font: 					350 24px/1.4em var(--font-family); /* 24px*/
	--font-sm:				380 20px/1.4em var(--font-family); /* 20px */
	--font-menu: 			400 24px/1.2em var(--font-family); /* 24px */
	--font-quote:			330 1.25rem/1.4em var(--font-family); /* 30px */
	--font-h1: 				400 2.5rem/1em var(--font-family); /* 60px*/
	--font-h2: 				400 1.7rem/1.1em var(--font-family); /* 40px */
	--font-tags:			200 2rem/1em var(--font-family); /* 48px*/
	--font-event:			var(--font-h2);
	
	--font-weight-bold: 600;
	
	--spacing-block: 		clamp(1.5rem, 6.0vw, 2.5rem);
	--spacing-block-lg: clamp(2.5rem, 9.6vw, 4rem);
	--spacing-block-xl:	clamp(4rem, 14vw, 6rem);
	
	--spacing-inline: 		clamp(1rem, 4.8vw, 2rem);
	
	--spacing-columns: 	clamp(1rem, 6.0vw, 2.5rem);
	
	--min-width: 				320px;
	--max-width: 				1200px;
	--max-width-lg: 			1600px;
	--max-width-sm: 		800px;
}

	@media (max-width: 999px) {
		
		:root {
			--font:				350 20px/1.5rem var(--font-family);
			--font-sm: 		380 17px/1.4em var(--font-family);
			--font-h1: 		400 2rem/1em var(--font-family);
			--font-tags:	200 1.75rem/1em var(--font-family);
			--font-event:	500 28px/1.2em var(--font-family);
		}
		
	}

/* @group Colors */

@property --color-base {
  syntax: "<color>";
  inherits: true;
  initial-value: #424A52;
}

@property --color-background {
  syntax: "<color>";
  inherits: true;
  initial-value: #B4C0CE;
	/*initial-value: rgb(180,192,206);*/
}

@property --color-white {
  syntax: "<color>";
  inherits: true;
  initial-value: #FFFFFF;
}

@property --color-black {
  syntax: "<color>";
  inherits: true;
  initial-value: #000000;
}

@property --color-black-transparent {
  syntax: "<color>";
  inherits: true;
  initial-value: rgba(0,0,0,.9);
}

/* @end */

/* @end */

/* @group BASE */

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

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

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

em {
	font-style: italic;
}

h1 {
	padding-top: .1em;
	font: var(--font-h1);
}

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

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

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

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

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

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

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

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

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

blockquote {
	font: var(--font-quote);
}

	blockquote footer {
		margin-top: .5em;
		font: var(--font-sm);
	}
	
.crossheading {
	margin-bottom: .25em;
	font: var(--font-sm);
}

/* @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;
	}
	
ol {
  counter-reset: counter;
}

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

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

/* @end */

/* @group Links */

.links a,
.text-section a,
.quote-section a,
.newsletter-section a,
.release__link,
.download__link,
.events a,
.footer-menu a,
.colophon a {
	text-decoration: underline;
	text-decoration-thickness: .05em;
	text-underline-offset: .12em;
	transition: all .15s ease-in-out 0s;
}

.text-section a,
.quote-section a,
.newsletter-section a,
.colophon a {
	text-decoration-color: currentColor;
}

.text-section a:hover,
.quote-section a:hover,
.newsletter-section a:hover,
.colophon a:hover {
	font-weight: 500;
}

.links a,
.release__link,
.download__link,
.events a,
.footer-menu a {
	color: var(--color-white);
	text-decoration-color: transparent;
}

.links a:hover,
.release__link:hover,
.download__link:hover,
.events a:hover,
.footer-menu a:hover {
	text-decoration-color: currentColor;
}

	.links a::before,
	.release__link::before,
	.download__link::before {
		content: "// ";
	}

/* @end */

/* @group Form */

form p,
label {
	font: var(--font-sm)
}

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

label {
	width: 100%;
}

input[type="text"],
input[type="email"],
textarea {
	width: 100%;
	padding: .4rem .6rem;
	background-color: var(--color-white);
}

*:has(> input[type="checkbox"]) {
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
}

input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  outline: none;
  margin: 0;
  padding: 0;
  cursor: pointer;
	width: 1em;
  height: 1em;
  background-color: var(--color-white);
  position: relative;
  transition: border-color 0.3s, background-color 0.3s;
}

input[type="checkbox"]::after {
  content: "";
  display: block;
  width: .25em;
  height: .5em;
  border: solid transparent;
  border-width: 0 .125em .125em 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg) scale(0);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

input[type="checkbox"]:checked {
  border-color: var(--color-base);
  background-color: var(--color-base);
}

input[type="checkbox"]:checked::after {
  transform: translate(-50%, -50%) rotate(45deg) scale(1);
  border-color: var(--color-white);
}

/* Style the label */
.checkbox-label {
  font-size: 16px;
  color: #333;
  cursor: pointer;
}

/* Accessibility focus style */
input[type="checkbox"]:focus {
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.3);
}


button[type="submit"],
input[type="submit"] {
	width: max-content;
	padding: .25em 1em;
	color: var(--color-white);
	background-color: var(--color-base);
	transition: all .15s ease-in-out 0s;
}

button[type="submit"]:hover,
input[type="submit"]:hover {
	cursor: pointer;
	transform: scale(1.1);
}

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

/* @end */

/* @end */

/* @group Header */

.header {
	position: absolute;
	z-index: 10;
	top: 0;
	right: 0;
	left: 0;
	max-width: var(--max-width-lg);
	margin-inline: auto;
}

	.header--light {
		color: var(--color-white);
	}

	@media (min-width: 1000px) {
		
		.header {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: flex-end;
			row-gap: .5rem;
			padding-block: .75rem;
			padding-inline: var(--spacing-inline);
		}
		
			.header .tags {
				flex-basis: 100%;
			}
		
	}

/* @end */

/* @group Banner */

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

	@media (max-width: 999px) {
		
		.banner {
			display: flex;
			justify-content: space-between;
			padding-top: .75rem;
			padding-bottom: .25rem;
			padding-inline: var(--spacing-inline);
		}
		
		.banner.fixed,
		.banner.open {
			padding-bottom: .75rem;
			color: var(--color-white);
			background-color: var(--color-black-transparent);
		}
		
		.banner.fixed {
			position: fixed;
			z-index: 20;
			top: 0;
			right: 0;
			left: 0;
		}

	}

/* @end */

/* @group Logo */

.logo {
	font-family: 'Playfair Display', Georgia, Times, serif;
	font-size: clamp(50px, 9vw, 110px);
	line-height: .9;
	white-space: nowrap;
	transition: all .15s ease-in-out 0s;
}

	@media (max-width: 999px) {
		
		.logo.fixed {
			font-size: 2.5rem;
		}
		
	}


/* @end */

/* @group Toggle */

.toggle {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	transition: all .15s ease-in-out 0s;
}

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

/* @group Hamburger */

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

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

	.hamburger > *:nth-child(3) {
		transform: translateY(calc(-50% - .6em));
	}
	
	.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 */

/* @group Menu */

.menu {
	display: flex;
}

	@media (max-width: 999px) {
		
		.menu {
			position: fixed;
			z-index: 10;
			top: 3.5rem;
			bottom: 0;
			right: 0;
			left: 0;
			flex-direction: column;
			row-gap: 3rem;
			padding-block: 2rem;
			padding-inline: var(--spacing-inline);
			color: var(--color-white);
			background-color: var(--color-black-transparent);
			transform: translateY(100vh);
			transition: transform .3s ease-in-out 0s;
		}
		
		.menu.open {
			transform: translateY(0);
		}
		
	}

	@media (min-width: 1000px) and (max-width: 1399px) {
		
		.menu {
			flex-direction: column;
			row-gap: 1rem;
			align-items: flex-end;
		}
		
	}
	
	@media (min-width: 1400px) {
		
		.menu {
			flex-direction: row;
			column-gap: 1.5rem;
			justify-content: flex-end;
			align-items: center;
		}
		
	}

/* @end */

/* @group Pages */

.pages {
	display: flex;
	column-gap: 1.25em;
	row-gap: .75em;
	font: var(--font-menu);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

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

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

	@media (max-width: 999px) {
		
		.pages {
			flex-direction: column;
		}
		
	}
	
	@media (min-width: 1000px) and (max-width: 1399px) {
		
		.pages {
			order: 1;
		}
		
	}

/* @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: 40px;
	  height: 40px;
	  background-color: currentColor;
		transition: transform .15s ease-in-out 0s;
	}
	
	.channels a[href*="youtube"]::before {
	  -webkit-mask-image: url(../images/youtube.svg);
	  mask-image: url(../images/youtube.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[href*="spotify"]::before {
	  -webkit-mask-image: url(../images/spotify.svg);
	  mask-image: url(../images/spotify.svg);
	}
	
	.channels a:hover::before {
		transform: scale(1.1);
	}
	
	@media (min-width: 1000px) {
		
		.channels a::before {
			width: 1.5rem;
			height: 1.5rem;
		}
		
	}

/* @end */

/* @group Tags */

.tags {
	display: flex;
	flex-direction: column;
	font: var(--font-tags);
}

	.tags a {
		max-width: min-content;
		text-decoration: underline;
		text-decoration-thickness: .03em;
		text-underline-offset: .1em;
		text-decoration-color: transparent;
		transition: text-decoration .15s ease-in-out 0s;
	}

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

	@media (max-width: 999px) {
		
		.tags {
			padding-inline: var(--spacing-inline);
		}
		
	}

/* @end */

/* @group Cover */

.cover {
	position: relative;
	z-index: 1;
	min-height: 50vh;
}

	.cover img {
		width: 100%;
		object-fit: cover;
	}
	
	.cover:not(.cover--home) img {
		height: 80vh;
	}
	
	.cover:not(.cover--home)::after {
		content: "";
		position: absolute;
		z-index: 1;
		top: 0;
		bottom: -1px; /* avoid flash */
		right: 0;
		left: 0;
		background:
			linear-gradient(0deg, var(--color-background) 0%, transparent 20%),
			linear-gradient(10deg, var(--color-background) 10%, transparent 30%),
			linear-gradient(-10deg, var(--color-background) 10%, transparent 30%);
	}

	.cover--home img {
		height: 100vh;
	}
	
	@media (orientation: portrait) {
		
			.cover:not(.cover--home) img {
				height: 70vh;
			}
			
			.cover:not(.cover--home)::after {
				background:
					linear-gradient(0deg, var(--color-background) 0%, transparent 50%);
			}
		
	}

/* @end */

/* @group Main */

.main {
	max-width: var(--max-width-lg);
	margin-inline: auto;
}

/* @end */

/* @group Projects */

.projects {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
	column-gap: var(--spacing-columns);
	row-gap: var(--spacing-block-lg);
	max-width: var(--max-width);
	margin-inline: auto;
	padding-inline: var(--spacing-inline);
	color: var(--color-white);
}

/* @end */

/* @group Project */

.project-subtitle {
	font-weight: var(--font-weight-bold);
}

/* @end */

/* @group Card */

.card {
	position: relative;
}

	.card h2 {
		margin-bottom: unset;
		transition: all .15s;
	}
	
	.card:hover h2 {
		font-weight: 600;
	}
	
	.card p {
		margin-top: .25em;
		margin-bottom: unset;
		line-height: 1.3em;
	}
	
	.card figure {
		overflow: hidden;
		text-align: center;
	}
	
	.card img {
		margin-top: 1rem;
		transform: scale(1);
		transition: all .15s;
	}
	
	.card:hover img {
		transform: scale(1.05);
	}
	
	.card a {
		position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
	}
	
	@media (max-width: 599px) {
		
			.card img.portrait {
				width: 75%;
			}
		
	}

/* @end */

/* @group Sections */

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

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

.header-section,
.text-section,
.quote-section,
.newsletter-section {
	max-width: var(--max-width-sm);
}

.releases-section,
.downloads-section,
.events-section {
	max-width: var(--max-width);
}

* + .releases-section,
* + .downloads-section,
* + .events-section {
	margin-top: var(--spacing-block-lg);
}

/* @end */

/* @group Links */

.links {
	color: var(--color-white);
}

p:has(+ .links) {
	margin-bottom: unset;
}

	.links > * {
		display: inline-block;
		margin-right: .5em;
	}

/* @end */

/* @group Releases & Release */

.releases {
	display: flex;
	flex-direction: column;
	row-gap: 2.5rem;
}
	
.release {
	display: flex;
	flex-direction: column;
	column-gap: 1.25rem;
	row-gap: 1rem;
	padding-top: 1.25rem;
	border-top: 1px solid currentColor;
}

	.release > *:first-child {
		flex: 0 0 10rem;
		width: 10rem;
	}
	
	.release p:has(+ *) {
		margin-bottom: .75rem;
	}

	.release__title {
		margin-bottom: .2em;
		font: var(--font-h2);
	}
	
	.release__subtitle {
		font: var(--font-sm);
	}
	
	@media (min-width: 600px) {
		
		.release {
			flex-direction: row;
			column-gap: 1.25rem;
		}
		
	}

/* @end */

/* @group Downloads & Download */

.downloads {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr));
	gap: var(--spacing-columns);
	padding-top: 1.25rem;
	border-top: 1px solid currentColor;
}

.download {
	display: flex;
	flex-direction: column;
	row-gap: .5rem;
	font: var(--font-sm);
}

	.download__title {
		font-weight: var(--font-weight-bold);
	}
	
	.download__extension {
		text-transform: uppercase;
	}
	
	.download__link {
		display: block;
		margin-top: .5em;
	}

/* @end */

/* @group Events & Event */

.events {
	
}

.event {
	display: grid;
	column-gap: .5rem;
	padding-block: .75rem;
	border-top: 1px solid currentColor;
	/*line-height: 1.25em;*/
}

	.event__date,
	.event__city {
		font: var(--font-event);
	}
	
	.event__date {
		
	}
	
	.event__time {
		
	}
	
	.event__show {
		margin-top: .5rem;
		line-height: 1.4em;
	}
	
	.event__link {
		margin-top: .5rem;
	}
	
	@media (max-width: 799px) {
		
		.event {
			grid-template-columns: 5.5rem 1fr;
			padding-bottom: 1.5rem;
		}
		
			.event > *:nth-child(3),
			.event > *:nth-child(4) {
				grid-column: span 2;
			}
			
			.event__city {
				word-break: break-all;
			}
			
			.event__location {
				hyphens: auto;
			}
		
	}
	
	@media (min-width: 800px) {
		
		.event {
			grid-template-columns: 6rem 1fr 9rem;
		}
		
			.event > *:first-child {
				grid-row: span 2;
			}
		
			.event > *:nth-child(3) {
				grid-column: 2;
				grid-row: 2;
			}
		
			.event > *:last-child {
				display: flex;
				justify-content: flex-end;
				align-items: flex-end;
				grid-row: span 2;
			}
		
	}

/* @end */

/* @group Footer */

.footer {
	margin-top: var(--spacing-block-lg);
	padding-block: 3rem;
}

.cover + .footer {
	margin-top: unset;
}

/* @end */

/* @group Colophon */

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

/* @end */

/* @group Contact */

.contact {
	
}

	.contact .crossheading,
	.contact h2 {
		margin-bottom: unset;
		font: var(--font);
		text-transform: uppercase;
		letter-spacing: 0.05em;
	}
	
	.contact form {
		display: grid;
		row-gap: 1rem;
	}

	.contact .honeypot {
	  position: absolute;
	  left: -9999px;
	}
	
	@media (min-width: 1000px) {
		
		.contact {
			margin-left: calc(50% + var(--spacing-columns)*.5);
		}
		
	}

/* @end */

/* @group Bottombar */

.bottombar {
	display: grid;
	column-gap: var(--spacing-columns);
	row-gap: 1.5rem;
	max-width: var(--max-width-lg);
	margin-inline: auto;
	padding-inline: var(--spacing-inline);
}

	.bottombar .channels {
		color: var(--color-white);
	}

	@media (min-width: 1000px) {
		
		.bottombar {
			grid-template-columns: 1fr 1fr;
		}
		
			.bottombar .channels {
				justify-content: flex-end;
			}
		
	}

/* @end */

/* @group Footer-menu */

.footer-menu {
	display: flex;
	flex-wrap: wrap;
	column-gap: 1.25rem;
	row-gap: .5em;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* @end */