@import "reset.css";


/* @group FONTS */

@font-face {
 	font-family: 'Noto Sans';
/*  src: url('../fonts/NotoSans-VariableFont_wdth400_700,wght80_100.woff2') format('woff2 supports variations'),
       url('../fonts/NotoSans-VariableFont_wdth400_700,wght80_100.woff2') format('woff2-variations');*/
  src: url('../fonts/NotoSans-VariableFont_wdth,wght.woff2') format('woff2 supports variations'),
       url('../fonts/NotoSans-VariableFont_wdth,wght.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 62.5% 100%;
  font-display: swap;
}

/* @end */

/* @group ROOT */

:root {
	
	--color-base: 						#000000;
	--color-primary: 				#00D933;
	--color-primary-light: 	#CEFFD9;
	--color-white: 					#FFFFFF;
	--color-background: 			var(--color-white);
	
	--font-family:	 'Noto Sans', Helvetica, Arial, sans-serif;
	
	--font-size-xs: 				clamp(14px, 1.5vw, 15px);
	--font-size-sm: 				clamp(15px, 1.7vw, 17px);
	--font-size-uppercase: 	clamp(16px, 1.8vw, 18px);
	--font-size: 						clamp(18px, 2vw, 20px);
	--font-size-lg: 					1.2rem;
	--font-size-xl: 					clamp(1.6rem, 3.6vw, 1.8rem);
	--font-size-xxl: 				clamp(2.2rem, 4.8vw, 2.4rem);
	
	--max-width: 76rem;
	--max-width-sm: 30rem;

	--spacing-block-sm: 	clamp(1rem, 4vw, 2rem);
	--spacing-block: 		clamp(3rem, 8vw, 4rem);
	--spacing-block-lg: 	clamp(4.5rem, 12vw, 6rem);
	
	--spacing-inline	: 	clamp(1.1rem, 4vw, 3rem);
	--spacing-columns: 	clamp(2rem, 6vw, 4rem);
}

/* @end */

/* @group BASE */

html,
body {
	font-family: var(--font-family);
	font-size: var(--font-size);
	font-weight: 400;
	line-height: 1.4em;
}

html {
	scroll-behavior: smooth;
}

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

h1 {
	font-size: var(--font-size-xxl);
	font-weight: 740;
	font-stretch: 80%;
	line-height: .95em;
}

h1:has(+ *) {
	margin-block-end: 1em;
}

	@container (max-width: 49.999999999rem) {
		
		h1 {
			max-width: var(--max-width-sm);
			margin-inline: auto;
		}
		
	}

h2 {
	font-size: var(--font-size-xl);
	font-weight: 740;
	font-stretch: 80%;
	line-height: 1em;
}

h2:has(+ *) {
	margin-block-end: .7em;
}

h3 {
	font-weight: 700;
}

h3:has(+ *) {
	margin-block-end: 1.4em;
}

p:has(+ *) {
	margin-block-end: 1.4em;
}

p + p:has(a:only-child) {
	margin-block-start: -.7em;
}

strong {
	font-weight: 700;
}

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

/* @group Links */

.menu a,
.column a,
.weblink a,
.download__caption a,
.info a {
	text-decoration: underline;
	text-decoration-color: var(--color-primary);
	text-decoration-thickness: .08em;
	text-underline-offset: 0.18em;
	transition: text-decoration .15s ease-in-out 0s;
}

.weblink a,
.info a {
	text-decoration-color: transparent;
}

.menu a:hover,
.column a:hover,
.download__caption a:hover {
	text-decoration-color: currentColor;
}

.weblink a:hover,
.info a:hover {
	text-decoration-color: var(--color-primary);
}

a[href^="mailto:"],
a[href^="tel:"] {
	position: relative;
	display: inline-block;
	padding-inline-start: 1.25em;
}

	a[href^="mailto:"]::before,
	a[href^="tel:"]::before {
	  content: "";
		position: absolute;
		inset-block-start: .2em;
		inset-inline-start: 0;
		width: 1em;
		height: 1em;
	  -webkit-mask-size: cover;
	  mask-size: cover;
	  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);
	}


/* @end */

/* @end */

/* @group Header */

.header {
	container-type: inline-size;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-block: clamp(1rem, 3vw, 2rem) clamp(3rem, 8vw, 5rem);
	padding-inline: var(--spacing-inline);
}

/* @end */

/* @group Logo */

.logo svg {
	width: clamp(5rem, 14vw, 7rem);
	height: auto;
}

/* @end */

/* @group Menu */

.menu {
	display: flex;
	justify-content: flex-end;
	flex-wrap: wrap;
	column-gap: 1.5em;
	font-size: var(--font-size-uppercase);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
}

	@container (max-width: 29.999999999rem) {
		
		.menu {
			flex-direction: column;
		}
		
	}

/* @end */

/* @group Main */

.main {
	container-name: main;
	container-type: inline-size;
	max-width: var(--max-width);
	margin-inline: auto;
	padding-inline: var(--spacing-inline);
}

/* @end */

/* @group Layout */

.layout {
	display: grid;
	column-gap: var(--spacing-columns);
	row-gap: 1.4rem;
}

.layout:has(+ *) {
	margin-bottom: 2.8rem;
}

	@container (max-width: 49.999999999rem) {
		
		.layout {
			max-width: var(--max-width-sm);
			margin-inline: auto;
		}
		
	}

	@container (min-width: 50rem) {
		
		.layout {
			grid-template-columns: repeat(6, 1fr);
		}
		
			.layout > .column {
				grid-column: span var(--span);
			}
		
	}

/* @end */

/* @group Cards & Card */

.cards {
	display: grid;
	column-gap: clamp(.5rem, 2vw, 1rem);
	row-gap: clamp(2rem, 6vw, 3rem);
}
	
	@container (max-width: 35.999999999rem) {
		
		.cards {
			grid-template-columns: repeat(2, 1fr);
		}
		
	}
	
	@container (min-width: 36rem) and (max-width: 49.999999999rem) {
		
		.cards {
			grid-template-columns: repeat(3, 1fr);
		}
		
	}
	
	@container (min-width: 50rem) {
		
		.cards {
			grid-template-columns: repeat(4, 1fr);
		}
		
	}
	
.card {
	position: relative;
}

	.card h2 {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		max-width: 4em;
		min-height: 2em;
		margin-block-end: 1rem;
		transition: text-decoration .2s ease-in-out 0s;
	}
		
	.card figure {
		overflow: hidden;
	}

	.card img {
		width: 100%;
		transition: transform .2s ease-in-out 0s;
	}
	
	.card:hover img {
		transform: scale(1.1);
	}
	
	.card a {
		content: "";
	  position: absolute;
	  inset: 0;
	  z-index: 1;
	  cursor: pointer;
	}

/* @end */

/* @group Artist */

.artist {
	display: grid;
	column-gap: 2rem;
	row-gap: 1.4em;
}

.artist:has(+ *) {
	margin-bottom: var(--spacing-block-lg);
}
	
	.artist figure {
		position: relative;
	}

		.artist figure .credit {
			position: absolute;
			inset-block-end: 0;
			inset-inline-end: 0;
			padding: .5em .75em;
			color: var(--color-white);
			mix-blend-mode: difference;
			font-size: var(--font-size-xs);
			line-height: 1.2em;
		}

	.artist h1:has(+ .weblink) {
		margin-block-end: 1rem;
	}

	.artist .weblink {
		margin-block-end: var(--spacing-block-sm);
		font-size: var(--font-size-lg);
		font-weight: 700;
	}
	
		.artist .weblink::before {
			display: inline-block;
			content: "";
			-webkit-mask-image: url(../images/arrow.svg);
			mask-image: url(../images/arrow.svg));
		  -webkit-mask-size: cover;
		  mask-size: cover;
			width: 1em;
			height: 1em;
			margin-inline-end: .2em;
			color: var(--color-primary);
		  background-color: currentColor;
			vertical-align: middle;
		}

	@container (max-width: 49.999999999rem) {
		
		.artist {
			max-width: var(--max-width-sm);
			margin-inline: auto;
		}
		
	}

	@container (min-width: 50rem) {
		
		.artist {
			grid-template-columns: repeat(2, 1fr);
		}
		
	}

/* @end */

/* @group Submenu-section */

.submenu-section {
	display: grid;
	column-gap: var(--spacing-columns);
	row-gap: var(--spacing-block-sm);
}

	@container (max-width: 49.999999999rem) {
		
		.submenu-section {
			max-width: var(--max-width-sm);
			margin-inline: auto;
		}
		
	}

	@container (min-width: 50rem) {
		
		.submenu-section {
			grid-template-columns: 1fr 2fr;
		}
		
			.submenu-section .subsections {
				grid-column: 2;
			}
		
	}
	
.submenu {
	background-color: var(--color-background);
}

	.submenu h2 {
		font-size: var(--font-size-uppercase);
		font-weight: 700;
		text-transform: uppercase;
		font-stretch: 100%;
		letter-spacing: .05em;
	}
	
	@container (min-width: 50rem) {
		
		.submenu {
			position: sticky;
			z-index: 10;
		  inset-block-start: var(--spacing-block-sm);
		  align-self: start;
		}
		
	}
	
.subsections {
	display: flex;
	flex-direction: column;
	row-gap: var(--spacing-block);
}

.subsection {
	scroll-margin-block-start: var(--spacing-block-sm);
}
	
/* @end */

/* @group Anchors */

.anchors {
	display: flex;
	flex-direction: column;
	row-gap: .5em;
	margin-block-start: 1.4rem;
	font-size: var(--font-size-lg);
	font-weight: 700;
}

	@container main (max-width: 49.999999999rem) {
		
		.anchors {
			display: none;
		}
		
	}

	@container main (min-width: 50rem) {
		
				.anchors > *::after {
					content: "";
					display: inline-block;
					transition: all .15s ease-in-out 0s;
					width: 1em;
					height: 1em;
					margin-inline-start: .3em;
					-webkit-mask-image: url(../images/arrow.svg);
					mask-image: url(../images/arrow.svg));
				  -webkit-mask-size: cover;
				  mask-size: cover;
					color: var(--color-background);
				  background-color: currentColor;
					vertical-align: middle;
				}
		
				.anchors > .active::after {
					color: var(--color-primary);
				}
		
	}

/* @end */

/* @group Downloads & Download */

.downloads {
	display: flex;
	flex-direction: column;
	row-gap: .5rem;
	font-size: var(--font-size-sm);
	line-height: 1.2em;
}

.downloads:has(+ *) {
	margin-block-end: var(--spacing-block);
}

.download {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 3.8em;
	padding-inline-start: 5.8em;
}

.download.image {
	min-height: 5em;
}

	.download figure {
		position: absolute;
		inset-block: 0;
		inset-inline-start: 0;
		width: 5em;
		background-color: #d9d9d9;
	  background-image:
	    linear-gradient(45deg, var(--color-background) 25%, transparent 25%),
	    linear-gradient(-45deg, var(--color-background) 25%, transparent 25%),
	    linear-gradient(45deg, transparent 75%, var(--color-background) 75%),
	    linear-gradient(-45deg, transparent 75%, var(--color-background) 75%);
	  background-size: .4em .4em;
	  background-position:
			0 0,
			0 .2em,
			.2em -.2em,
			-.2em 0;
	}
	
		.download figure a {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 100%;
		}
	
		.download figure img {
			max-height: 100%;
		}
		
		.download figure svg {
			width: 50%;
			height: auto;
		}
		
	.download p:has(+ *) {
		margin-block-end: .2em;
	}
	
	.download__caption {
		font-weight: 700;
	}
	
	.download__extension {
		text-transform: uppercase;
	}
	
		.download__extension:has(+ *)::after,
		.download__dimensions:has(+ *)::after {
			content: " · ";
		}

/* @end */

/* @group Info */

.info {
	margin-block-start: var(--spacing-block);
	padding: 1.5rem;
	background-color: var(--color-primary-light);
	font-size: var(--font-size-sm);
	line-height: 1.4em;
}

	@container (max-width: 49.999999999rem) {
		
		.info {
			max-width: var(--max-width-sm);
			margin-inline: auto;
		}
		
	}

	@container (min-width: 50rem) {
		
		.info {
			margin-inline-start: calc((100% - var(--spacing-columns)) / 3 + var(--spacing-columns));
			max-width: 40em;
		}
		
	}

/* @end */

/* @group Footer */

.footer {
	padding-block: clamp(4rem, 12vw, 6rem) clamp(2rem, 6vw, 3rem);
	padding-inline: var(--spacing-inline);
}

/* @end */