/* @group FONTS */

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

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

/* @end */

/* @group VARIABLES */

:root {
	
	--color-light: 	#FFFFEF;
	--color-dark: 		#000000;
	
	--font-family: 'Raleway', Verdana, Helvetica, Arial, sans-serif;
	
	--font-size: clamp(17px, 2.2vw, 22px);
	
	--font-sm: 							450 clamp(16px, 1.8vw, 18px)/1.4em var(--font-family);
	--font: 								450 var(--font-size)/1.4em var(--font-family);
	--font-lg: 							700 clamp(20px, 4vw, 31px)/1.3em var(--font-family);
	--font-lg-uppercase: 		700 clamp(20px, 4vw, 31px)/1.3em var(--font-family);
	--font-subtitle: 				700 clamp(17px, 4vw, 31px)/1.3em var(--font-family);
	
	--spacing: 		clamp(1rem, 6.4vw, 2rem);
	--spacing-lg: clamp(2rem, 8.8vw, 4rem);
	
}

/* @end */

/* @group BASE */

html {
	scroll-behavior: smooth;
	font: var(--font);
	letter-spacing: 0.03em;
}

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

p.align-right {
	text-align: right;
}

strong {
	font-weight: bold;
}

em {
	font-style: italic;
}

hr {
	margin-block: 1em;
	border: unset;
	font-weight: bold;
	text-align: center;
}

	hr::before {
		content: "•";
	}

/* @group Links */

.text a,
.offcanvas-menu a.active,
.footer-menu a {
	text-decoration: underline;
	text-decoration-thickness: .06em; 
	text-underline-offset: .15em;
	transition: text-decoration .15s ease-in-out 0s;
}

.language a,
.menu a,
.offcanvas-menu a,
.footer-info a {
	display: inline-block;
	transition: transform .15s ease-in-out 0s;
}

.language a:hover,
.menu a:hover,
.offcanvas-menu a:hover,
.footer-info a:hover {
	transform: scale(1.05);
}

.text a:hover,
.footer-menu a:hover {
	text-decoration-thickness: .1em;
}

/* @end */

/* @end */

/* @group Body */

body {
	min-width: 320px;
	min-height: calc(100dvh + var(--spacing-lg) + 1.4em);
	color: var(--color-dark);
	background-color: var(--color-light);
	text-align: center;
}

body.home-page {
	display: flex;
	flex-direction: column;
	color: var(--color-light);
	background-color: var(--color-dark);
}

/* @end */

/* @group Header */

.header {
	position: relative;
	margin-block-end: 10vh;
	padding-block-start: var(--spacing);
	padding-inline: var(--spacing);
	text-transform: uppercase;
}

body.menu-page .header {
	height: 30vh;
}

/* @group Language */

.language {
	position: absolute;
	z-index: 10;
	inset-block-start: 0;
	inset-inline-end: 0;
	padding: calc(.5 * var(--spacing));
	font-weight: bold;
	line-height: 1em;
	text-align: right;
}

/* @end */

/* @group Banner */

.banner {
	width: 16em;
	aspect-ratio: 7/4;
	margin-inline: auto;
	font: var(--font-subtitle);
	letter-spacing: .05em;
	line-height: .8em;
}

/* @group Logo */

.logo {
	transition: transform 1s ease-in-out 0s;
}

.logo.scaled {
	transform: scale(5);
}

	.logo svg {
		width: 100%;
		height: auto;
		vertical-align: bottom;
	}

/* @end */

/* @group Subtitle */

.subtitle {
	display: flex;
	justify-content: space-between;
	margin-block-start: 1.6em;
	opacity: 1;
	transition: opacity 2s ease-in-out 0s;
}

.subtitle.hidden {
	opacity: 0;
}

/* @end */

/* @end */

/* @end */

/* @group Main */

.main {
	position: relative;
	container-type: inline-size;
	margin-block-end: 20vh;
	padding-inline: var(--spacing);
	text-wrap: pretty;
}

	body.home-page .main {
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-block-end: var(--spacing-lg);
	}

/* @end */

/* @group Menu */

.menu {
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: .5em;
	font: var(--font-lg);
	text-align: center;
	opacity: 1;
	transition: opacity 2s ease-in-out 0s;
}

.menu.hidden {
	opacity: 0;
}

	.menu a {
		padding-block: .4em .3em;
		padding-inline: .8em;
		border: .1em solid currentColor;
		border-radius: 1.7em;
		font-weight: bold;
		text-transform: uppercase;
		line-height: 1;
	}

/* @end */

/* @group Text */

.text {
	max-width: 36em;
	margin-inline: auto;
	text-align: center;
}

.text:has(+ .menu) {
	margin-block-end: 3em;
}

body.selection-page .text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 100vh;
	padding-block-end: 20vh;
}

	.text h1 {
		font: var(--font-lg-uppercase);
		text-transform: uppercase;
	}
	
	.text h1:has(+ *) {
		margin-block-end: 1em;
	}
	
	.text h2 {
		font-weight: bold;
	}
	
	.text h2:has(+ *) {
		margin-block-end: 1em;
	}
	
	*:has(+ h2) {
		margin-block-end: 2em;
	}
	
	.text blockquote {
		font: var(--font-lg-uppercase);
		text-transform: uppercase;
	}
	
	.text blockquote:has(+ p) {
		margin-bottom: .5em;
	}
	
	/* @group Lists */

	.text ul:has(+ *) {
		margin-block-end: 1.5em;
	}
	
	.text *:has(+ ul) {
		margin-block-end: 1em;
	}
		
		.text ul li:has(+ li) {
			margin-block-end: .5em;
		}
		
			.text ul li > *:first-child::before {
				content: "•";
				display: inline-block;
				margin-inline-end: .3em;
			}
	
	/* @end */

/* @end */

/* @group Footertext */

.footertext {
	margin-block-start: 6em;
	font: var(--font-sm);
	font-style: italic;
}

/* @end */

/* @group Offcanvas-menu */

.offcanvas-menu {
	position: fixed;
	inset-block: 0;
	right: 0;
	width: calc(100vw - 3 * var(--font-size));
	max-width: max-content;
	font: var(--font-lg-uppercase);
	text-transform: uppercase;
	transform: translateX(100%);
	transition: transform .3s ease-in-out 0s;
}

.offcanvas-menu.open {
	transform: translateX(0);
}

	.offcanvas-menu__toggle {
		position: absolute;
		inset-block-start: 50vh;
		left: 0;
		font: var(--font);
		transform: translateY(-50%) rotate(90deg) translateX(-50%);
		transform-origin: left top;
	}
	
		.offcanvas-menu__toggle > * {
			margin-block: unset;
			padding-block: .5em;
			padding-inline: 1em;
			color: var(--color-light);
			background-color: var(--color-dark);
			border-end-start-radius: 1em;
			border-end-end-radius: 1em;
			font: var(--font);
			font-weight: bold;
			line-height: 1;
			white-space: nowrap;
			transition: transform .15s ease-in-out 0s;
		}
	
		.offcanvas-menu__toggle:hover > * {
			cursor: pointer;
			transform: scale(1.1);
		}
	
	.offcanvas-menu__nav {
		display: flex;
		flex-direction: column;
		row-gap: .5em;
		height: 100vh;
		overflow: auto;
		padding: var(--spacing);
		color: var(--color-light);
		background-color: var(--color-dark);
	}
	
		.offcanvas-menu__nav .signet {
			margin-block-end: 1em;
		}
		
			.offcanvas-menu__nav .signet svg {
				width: 2em;
				height: auto;
			}

/* @end */

/* @group Selection */

.selection {
	max-width: 36em;
	margin-inline: auto;
}

	.selection > * {
		scroll-margin-block-start: 2em;
	}

	.selection > *:has(+ *) {
		margin-block-end: 6em;
	}
	
	.selection h2 {
		font: var(--font-lg-uppercase);
		text-transform: uppercase;
	}
	
	.selection h2:has(+ p) {
		margin-block-end: 1em;
	}
	
	.selection *:has(+ h2) {
		margin-block-end: 1em;
	}
	
	.selection h3 {
		display: inline-block;
		margin-inline: auto;
		padding-block: .4em .3em;
		padding-inline: .8em;
		border: .1em solid currentColor;
		border-radius: 1.7em;
		font-weight: bold;
		text-transform: uppercase;
		line-height: 1;
	}
	
	.selection h3:has(+ p) {
		margin-block-end: 1em;
	}
	
	.selection *:has(+ h3) {
		margin-block-end: 2em;
	}

/* @end */

/* @group Footer */

.footer {
	container-type: inline-size;
	padding-inline: var(--spacing);
	padding-block-end: var(--spacing);
	display: flex;
	flex-direction: column;
	row-gap: var(--spacing-lg);
	opacity: 1;
	transition: opacity 2s ease-in-out 0s;
}

.footer.hidden {
	opacity: 0;
}

	body.home-page .footer {
		margin-block-start: auto;
	}

/* @end */

/* @group Footer-info */

.footer-info {
	display: grid;
	column-gap: 1em;
	row-gap: 1em;
	font: var(--font-lg);
	text-align: center;
}

	.footer-info > *:first-child {
		text-align: left;
	}
	
	.footer-info > *:last-child {
		text-align: right;
	}
	
	@container (min-width: 48em) {
		
		.footer-info:has(> :nth-child(2)):not(:has(> :nth-child(3))) {
			grid-template-columns: repeat(2, 1fr);
		}
		
		.footer-info:has(> *:nth-child(3)):not(:has(> :nth-child(4))) {
			grid-template-columns: repeat(3, 1fr);
		}
		
	}

/* @end */

/* @group Footer-menu */

.footer-menu {
	display: flex;
	flex-wrap: wrap;
	column-gap: var(--spacing);
	justify-content: space-between;
}

/* @end */