/* Mobile devices don't seem to like the <link> for some reason */
/* FIXME: Remove this someday, hopefully */
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&family=Fira+Sans:ital,wght@0,400;0,500;1,400;1,500&family=Montserrat:wght@550;700&display=swap');

/*
 * Variables
 */

:root {
	color-scheme: light dark;

	/* Colors & branding */
	--clr-brand-gray: #303028;
	--clr-brand-red: #cc0000;
	--clr-brand-white: #eee;

	--clr-transparent-black: #0006;
	--clr-slightly-transparent-black: #0009;

	--clr-glass-dark: #ffffff09;
	--clr-glass-dark-reflection: #ffffff18;
	--clr-glass: light-dark(#22222209, #ffffff09);
	--clr-glass-reflection: light-dark(#22222210, #ffffff18);
	--clr-glass-border: light-dark(#22222228, #ffffff28);

	/* Layout - General */
	--clr-text: light-dark(#000, #eee);
	--clr-bg: light-dark(#eee, #22221c);
	--clr-border: light-dark(#ddd, #282824);
	--clr-hex: #161613;

	/* Layout - Accents */
	--clr-accent: #ce001a;
	--clr-accent-light: #f62000;
	--clr-shade: #0005;
	--clr-shadow: var(--clr-transparent-black);
	--shadow-spread: 3em;

	/* Layout - Wedges */
	--clr-wedge: #eee;
	--wedge-angle: 2deg;
	/* Set wedge height to prevent gaps */
	--wedge-height: 3.493vw; /* Computed with width * sin(angle) / sin(90 - angle) */
	/* Prevent wedge margin from getting too extreme with computed vw */
	--wedge-margin: min(2.6rem, var(--wedge-height)); /* 1.9 computed via content width & wedge height */
	--wedge-text-size: 1.375rem;
	--clr-wedge-text: #222;
	--clr-wedge-link: #666;
	--clr-wedge-link-active: var(--clr-bg1);

	/* Navigation */
	--pad-block-nav: 1rem;
	--pad-inline-nav: 1rem;

	/* Alerts */
	--clr-banner: #d2d2d2;
	--clr-banner-border: #b0b0b0;
	--clr-banner-text: #222;
	--clr-banner-dark: #282824;
	--clr-banner-dark-border: #42423b;
	--clr-banner-dark-text: var(--clr-brand-white);
	--clr-banner-info: #55e1ff;
	--clr-banner-info-border: #00c7f2;
	--clr-banner-info-text: #222;
	--clr-banner-warning: #ffe33b;
	--clr-banner-warning-border: #ecca00;
	--clr-banner-warning-text: #222;
	--clr-banner-orange: #ffcb89;
	--clr-banner-orange-border: #ff993d;
	--clr-banner-orange-text: #222;
	--clr-banner-pink: #ffc6d3;
	--clr-banner-pink-border: #ff5078;
	--clr-banner-pink-text: #222;

	--pad-block-banner: 0.25rem;
	--pad-inline-banner: 0.75rem;

	/* Menu */
	--clr-menu-text: var(--clr-text);

	--size-menu-btn: 3rem;
	--size-menu-hamburger-spacing: 0.375rem;
	--size-menu-hamburger-width: 1.125rem;
	--size-menu-hamburger-height: 0.125rem;
	--spacing-menu-vertical: 0.5rem;
	--width-menu: 20rem;

	--transition-curve-menu: cubic-bezier(.3, .1, .7, .9);
	--transition-duration-menu: 300ms;

	/* Content */
	--size-text: 1.1rem;
	--border-content: 0.0625rem solid var(--clr-border);
	--spacing-content-vertical: 2rem;	
	--width-content: 1250px;
	--pad-content: max(2em, calc((100vw - var(--width-content)) / 2 + 2em));
	--clr-feature-text: #eee;
	--clr-faded-text: #eeea;
	--clr-faded-text-alt: #000a;
	--clr-quote: #888;

	/* Links & buttons */
	--clr-link: var(--clr-accent);
	--clr-link-active: var(--clr-accent-light);

	--clr-button: var(--clr-accent);
	--clr-button-hover: var(--clr-accent-light);
	--clr-button-text: var(--clr-brand-white);
	--clr-button-dark: #464643;
	--clr-button-dark-hover: #4d4d4a;
	--clr-button-coffee: #ffdd00;
	--clr-button-coffee-hover: #ffea00;

	/* Animations */
	--transition-curve-default: ease-in-out;
	--transition-curve: cubic-bezier(.18, .89, .32, 1.18);
	--transition-duration: 300ms;
	--transition-duration-btn: 100ms;
	--transition-duration-link: 300ms;
	--wedge-transition-deviation: 0.8;
}

/*
 * Layout reset / standardization
 */

* {
	margin: 0;
	padding: 0;
}

html, body {
	min-height: 100dvh;
}

body {
	background: var(--clr-hex) url('/assets/img/hex-bg.svg') repeat center / 168px 96.99px;
	font-family: "Fira Sans", sans-serif;
	font-size: var(--size-text);
}

#wrapper {
	display: flex;
	min-height: 100dvh;
	flex-direction: column;
}

/*
 * General layout
 */

/* General styling */
h1, h2, h3, h4, h5, h6 {
	font-family: "Montserrat", sans-serif;
	font-weight: 500;
}

p + div,
p + p,
p + section,
section + section,
section + p {
	margin-top: 1em;
}

blockquote {
	color: var(--clr-quote);
	text-align: left;
	border-left: 0.2em solid var(--clr-accent);
	padding: 0.5em 1.25em;
	margin-block: 1em;

	em {
		color: var(--clr-text);
		font-weight: 500;
	}
}

.nowrap {
	wrap: nowrap;
}

.content {
	background: url(../assets/img/noise.svg) repeat, linear-gradient(var(--clr-bg));
	background-blend-mode: multiply;
	color: var(--clr-text);
	position: relative;
	width: 100dvw;
	left: 50%;
	right: 50%;
	z-index: 5;
	margin: 0 -50vw;
	padding: 0 var(--pad-content);
	flex: 1;

	/* Wedges */
	&::before {
		content: '';
		display: block;
		position: relative;
		background: inherit;
		margin-inline: calc(-1 * max(2em, ((100vw - var(--width-content)) / 2 + 2em)));
		height: var(--wedge-height);
		z-index: -1;
		box-shadow: 0 0 var(--shadow-spread) var(--clr-shadow);
		clip-path: inset(calc(-1 * var(--shadow-spread)) 0 0 0);
		border-top: var(--border-content);
		background-blend-mode: multiply;
	}

	&.left::before {
		transform-origin: bottom right;
		transform: skewY(var(--wedge-angle));
	}
	&.right::before {
		transform-origin: bottom left;
		transform: skewY(calc(-1 * var(--wedge-angle)));
	}
}

footer {
	text-align: center;
	background: var(--clr-wedge);
	font-size: 0.75em;
	color: var(--clr-faded-text-alt);
	position: relative;
	width: 100vw;
	left: 50%;
	right: 50%;
	/* Margin normally --wedge-margin. Since the angle is provided on the footer via
	the ::before pseudo class, and the pseudoelement sticks out past the footer itself,
	the extra overlap needs to be added. This extra margin needed is half of the height
	of the pseudoelement (--wedge-height), since the midpoint of it is on the edge of
	the footer, effectively cutting that height in half. */
	margin: calc(var(--wedge-margin) + var(--wedge-height) / 2) -50vw 0;
	padding: 0 max(2em, calc((100vw - var(--width-content)) / 2 + 2em)) 2em;

	&::before {
		content: '';
		display: block;
		position: relative;
		background: inherit;
		margin-inline: calc(-1 * max(2em, ((100vw - var(--width-content)) / 2 + 2em)));
		/* Chromium browsers leave an ugly edge on the bottom of the pseudoelement where the
		shadow would be. Fix is to add a few pixels to the height, and then clip that off of
		the bottom to remove the ugly edge caused by the bad antialiasing of the shadow. */
		height: calc(var(--wedge-height) + 5px);
		z-index: -1;
		box-shadow: 0 0 var(--shadow-spread) var(--clr-shadow);
		clip-path: inset(calc(-1 * var(--shadow-spread)) 0 5px 0);
		-webkit-backface-visibility: hidden;
		transition: transform var(--transition-duration) var(--transition-curve);
	}
	&.left {
		&::before {
		transform-origin: bottom right;
		transform: skewY(var(--wedge-angle));
		}
		&:hover::before {
			transform: skewY(calc(var(--wedge-transition-deviation) * var(--wedge-angle)));
		}
	}
	&.right {
		&::before {
			transform-origin: bottom left;
			transform: skewY(calc(-1 * var(--wedge-angle)));
		}
		&:hover::before {
			transform: skewY(calc(-1 * var(--wedge-transition-deviation) * var(--wedge-angle)));
		}
	}
}
.wedge a,
footer a {
	color: var(--clr-wedge-link);
}
.wedge a:focus,
.wedge a:hover,
footer a:focus,
footer a:hover {
	color: var(--clr-wedge-link-active);
}
.wedge a::after,
footer a::after {
	background: var(--clr-wedge-link-active);
}

.wedge {
	background: var(--clr-wedge);
	position: relative;
	width: 100vw;
	left: 50%;
	right: 50%;
	margin: var(--wedge-margin) -50vw;
	padding: calc(var(--wedge-height) + 1em) max(2em, calc((100vw - var(--width-content)) / 2 + 2em));
	font-size: var(--wedge-text-size);
	color: var(--clr-wedge-text);
	box-shadow: 0 0 var(--shadow-spread) var(--clr-shadow);
	z-index: 5;

	@media screen and (min-width: 651px) {
		scroll-margin-top: calc(var(--size-text) + 2 * var(--pad-block-nav));
	}

	&, > div {
		transition: transform var(--transition-duration) var(--transition-curve);
	}

	&.left {
		transform: skew(var(--wedge-angle)) rotate(var(--wedge-angle));

		> div {
			transform: rotate(calc(-1 * var(--wedge-angle))) skew(calc(-1 * var(--wedge-angle)));
		}

		&:hover {
			transform: skew(calc(var(--wedge-transition-deviation) * var(--wedge-angle))) rotate(calc(var(--wedge-transition-deviation) * var(--wedge-angle)));
			
			> div {
				transform: rotate(calc(-1 * var(--wedge-transition-deviation) * var(--wedge-angle))) skew(calc(-1 * var(--wedge-transition-deviation) * var(--wedge-angle)));
			}
		}
	}
	&.right {
		text-align: right;
		transform: skew(calc(-1 * var(--wedge-angle))) rotate(calc(-1 * var(--wedge-angle)));

		> div {
			transform: rotate(var(--wedge-angle)) skew(var(--wedge-angle));
		}

		&:hover {
			transform: skew(calc(-1 * var(--wedge-transition-deviation) * var(--wedge-angle))) rotate(calc(-1 * var(--wedge-transition-deviation) * var(--wedge-angle)));

			> div {
				transform: skew(calc(var(--wedge-transition-deviation) * var(--wedge-angle))) rotate(calc(var(--wedge-transition-deviation) * var(--wedge-angle)));
			}
		}
	}
}

span.arrow {
	font-size: 2em;
	position: relative;
	top: 0.08em;
	line-height: 0.25;
	overflow: hidden;
}

/* Links */
a {
	&:focus {
		outline: none;
	}

	&.disabled {
		pointer-events: none;

		&.btn {
			opacity: 30%;
		}
	}
}

/* Text links */
a:not(.btn), menu nav details > summary {
	display: inline-block;
	position: relative;
	padding-bottom: 0.2em;
	margin-bottom: -0.2em;
	text-decoration: none;
	color: var(--clr-link);
	transition: color var(--transition-duration-link) var(--transition-curve-default);

	&:focus, &:hover {
		color: var(--clr-link-active);

		&::before {
			transform: scaleX(1);
			transform-origin: left;
		}
	}

	&::before {
		content: '';
		position: absolute;
		bottom: 0.15em;
		left: 0;
		width: 100%;
		height: 0.1em;
		background: var(--clr-link-active);
		transform: scaleX(0);
		transform-origin: right;
		transition: transform var(--transition-duration-link) ease-in;
	}
}

/* Link buttons */
section.buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4em;
}
a.btn {
	box-shadow: 0 0 0.5rem var(--clr-shadow);
	transition-property: background, filter, top, left, box-shadow;
	transition-duration: var(--transition-duration-btn);
	transition-timing-function: var(--transition-curve-default);
	position: relative;
	top: 0;
	left: 0;

	&:hover, &:focus {
		top: -0.1rem;
		left: -0.1rem;
		box-shadow: 0.2rem 0.2rem 0.5rem var(--clr-shadow);
	}

	&, &:hover, &:focus, &:active {
		text-decoration: none;
	}

	/* Standard buttons */
	&:not(.img) {
		--button-bg: var(--clr-button);
		--button-hover-bg: var(--clr-button-hover);
		--button-text: var(--clr-button-text);

		display: inline-flex;
		padding: 0.45em 0.7em;
		align-items: center;
		background: var(--button-bg);
		color: var(--button-text);
		border-radius: 0.25rem;
		font-size: 1.15em;
		font-weight: 550;
		font-family: "Montserrat", sans-serif;
		text-transform: uppercase;

		&:hover {
			background: var(--button-hover-bg);
		}

		&.dark {
			--button-bg: var(--clr-button-dark);
			--button-hover-bg: var(--clr-button-dark-hover);
		}
		&.coffee {
			--button-bg: var(--clr-button-coffee);
			--button-hover-bg: var(--clr-button-coffee-hover);
			--button-text: var(--clr-brand-gray);
			padding: 0.75em;

			img {
				height: 1.5em;
			}
		}
	}

	/* File buttons */
	&.file {
		display: flex;
		flex-direction: column;
		text-align: center;
		min-width: 0;
		line-height: 1.25;

		&:before, &:after {
			color: var(--clr-faded-text);
			font-size: 0.75em;
		}
		&:before {
			content: attr(data-type);
		}
		&:after {
			content: attr(data-version);
			text-transform: none;
		}
	}

	&.img {
		display: flex;
		flex-direction: column;
		width: 9em;
		height: 9.5em;
		border: 1px solid var(--clr-brand-red);
		border-radius: 0.5em;
		position: relative;
		overflow: hidden;

		&.disabled {
			opacity: 30%;
		}

		&:hover {
			div.img > img {
				filter: none;
			}
		}

		div.img {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			min-height: 0;

			img {
				min-height: 0;
				object-fit: cover;
				filter: grayscale(20%) brightness(80%);
				transition: filter var(--transition-duration-btn) var(--transition-curve-default);
			}
		}

		div.title {
			background: var(--clr-shade);
			color: var(--clr-brand-white);
			font-size: 0.8em;
			padding: 0.25em 0.5em;
			text-align: center;
		}
	}
}

/* HTML: <div class="loader"></div> */
.loader {
	width: 50px;
	aspect-ratio: 1;
	color:#dc1818;
	background:
		radial-gradient(circle at 60% 65%, currentColor 62%, #0000 65%) top left,
		radial-gradient(circle at 40% 65%, currentColor 62%, #0000 65%) top right,
		linear-gradient(to bottom left, currentColor 42%,#0000 43%) bottom left ,
		linear-gradient(to bottom right,currentColor 42%,#0000 43%) bottom right;
	background-size: 50% 50%;
	background-repeat: no-repeat;
	position: relative;
}
.loader:after {
	content: "";
	position: absolute;
	inset: 0;
	background: inherit;
	opacity: 0.4;
	animation: l3 1s infinite;
}
@keyframes l3 {
	to {transform:scale(1.8);opacity:0}
}

/*
 * Navigation
 */

header {
	position: sticky;
	top: 0;
	z-index: 10;

	.alerts {
		> :last-child {
			box-shadow: 0 0 0.5rem var(--clr-shadow);
			clip-path: inset(0 -0.5rem -0.5rem -0.5rem);
		}
	}
}

menu {
	/* Full-screen overlay container */
	position: fixed;
	top: 0;
	left: 0;
	z-index: 20;
	display: flex;
	max-width: 100dvw;
	height: 100dvh;

	/* Checkbox is always hidden; label is the UI */
	input[type=checkbox] {
		display: none;
	}

	/* Toggle area exists to host the checkbox + label */
	.toggle {
		width: 0;
		height: var(--size-menu-btn);
		display: flex;
		justify-content: flex-start;
		z-index: 15;
		transition: width var(--transition-duration-menu) var(--transition-curve-menu);
	}

	/* Hamburger label */
	.menu-icon {
		cursor: pointer;
		display: flex;
		align-items: baseline;
		padding-block: calc((var(--size-menu-btn) - var(--size-menu-hamburger-height)) / 2);
		padding-left: calc((var(--size-menu-btn) - var(--size-menu-hamburger-width)) / 2);
		position: absolute;
		height: var(--size-menu-btn);
		width: var(--size-menu-btn);
		-webkit-user-select: none;
		user-select: none;
		visibility: visible;
		background: var(--clr-bg);
		border-right: var(--border-content);
		border-bottom: var(--border-content);
		border-bottom-right-radius: 0.5em;
	}

	/* Hamburger bars */
	.navicon {
		background: var(--clr-text);
		display: block;
		height: var(--size-menu-hamburger-height);
		width: var(--size-menu-hamburger-width);
		position: relative;

		&:before {
			top: var(--size-menu-hamburger-spacing);
		}
		&:after {
			top: calc(-1 * var(--size-menu-hamburger-spacing));
		}
		&:before,
		&:after {
			background: var(--clr-text);
			display: block;
			width: 100%;
			height: 100%;
			content: "";
			position: absolute;
			transition: all 0.2s ease-out;
		}
	}

	/* Nav panel */
	nav {
		width: var(--width-menu);
		height: 100vh;
		overflow-y: auto;
		scrollbar-width: none;

		background: var(--clr-bg);
		color: var(--clr-text);
		border-right: var(--border-content);

		position: fixed;
		top: 0;
		left: calc(-1 * var(--width-menu));
		z-index: 10;

		padding: var(--pad-block-nav) var(--pad-inline-nav);
		padding-top: var(--size-menu-btn);

		transition-property: left;
		transition-duration: var(--transition-duration-menu);
		transition-timing-function: var(--transition-curve-menu);

		img.logo {
			height: 1.75em;
		}

		/* Mobile: vertical list */
		> ul {
			display: flex;
			flex-direction: column;
			align-items: stretch;
			gap: 0.5rem;
			margin: 0;
			padding: 0;

			> li {
				font-family: "Montserrat", sans-serif;
				font-weight: 700;
				text-transform: uppercase;
				list-style: none;
			}
		}

		a {
			white-space: nowrap;
		}

		/* Submenus via details: accordion style */
		li details {
			> summary {
				cursor: pointer;
				list-style: none;
				user-select: none;

				&::-webkit-details-marker {
					display: none;
				}

				&::after {
					position: relative;
					font-family: "Font Awesome 5 Free";
					font-weight: 900;
					font-size: 0.75em;
					padding-left: 0.2em;
					top: -0.1em;
					content: "\f107";
				}
			}

			&[open] > summary::after {
				content: "\f106";
			}

			> ul {
				margin: 0.5rem 0 0;
				padding: 0.75rem;
				list-style: none;
				display: none;
				flex-direction: column;
				gap: 0.5rem;
				background: #eeeeee18;
				border-radius: 0.5rem;
			}

			&[open] > ul {
				display: flex;
			}
		}
	}

	/* Shade */
	.shade {
		background: transparent;
		flex-grow: 1;
		pointer-events: none;

		transition-property: background, -webkit-backdrop-filter, backdrop-filter;
		transition-duration: var(--transition-duration-menu);
		transition-timing-function: var(--transition-curve-default);
	}

	/* Open state */
	&:has(.menu-btn:checked) {
		width: 100vw;
		left: 0;

		nav {
			left: 0;
			box-shadow: 0 0 3rem var(--clr-shadow-content);
		}

		.shade {
			background: var(--clr-shade);
			-webkit-backdrop-filter: blur(0.2rem);
			backdrop-filter: blur(0.2rem);
			pointer-events: auto;
		}
	}
}

/* Prevent scrolling when menu open */
body:has(.menu-btn:checked) {
	overflow: hidden;
}

@media screen and (min-width: 651px) {
	menu {
		position: static;
		inset: auto;
		height: auto;
		max-width: none;
		display: flex;
		flex-wrap: wrap;

		.toggle,
		.shade {
			display: none;
		}

		nav {
			position: static;
			width: 100%;
			height: auto;
			overflow: visible;
			border-right: none;

			left: auto;
			top: auto;
			padding: var(--pad-block-nav) var(--pad-inline-nav);
			box-shadow: none;
			transition: none;

			/* Desktop: horizontal list */
			> ul {
				flex-direction: row;
				gap: 1.5rem;
				align-items: center;
			}

			/* Desktop dropdown positioning */
			li details {
				position: relative;
				width: auto;

				> ul {
					position: absolute;
					top: 100%;
					left: 0;
					margin: 0;
					background: var(--clr-brand-gray);
					border-radius: 0.5rem;
					border: var(--border-content);
					box-shadow: 0 0 2rem var(--clr-shadow-content);
					min-width: 14rem;
					padding: 1rem;
				}
			}
		}
	}
}

/* Alerts */
.banner {
	--banner-bg: var(--clr-banner);
	--banner-border: var(--clr-banner-border);
	--banner-text: var(--clr-banner-text);

	font-size: 1rem;
	font-weight: 500;
	padding: var(--pad-block-banner) var(--pad-inline-banner);
	padding-left: calc(var(--pad-inline-banner) + var(--size-menu-btn));
	text-align: center;
	background: var(--banner-bg);
	border-bottom: 0.0625rem solid var(--banner-border);
	color: var(--banner-text);

	@media screen and (min-width: 651px) {
		padding-left: var(--pad-inline-banner);
	}

	&.dark {
		--banner-bg: var(--clr-banner-dark);
		--banner-border: var(--clr-banner-dark-border);
		--banner-text: var(--clr-banner-dark-text);
	}
	&.info {
		--banner-bg: var(--clr-banner-info);
		--banner-border: var(--clr-banner-info-border);
		--banner-text: var(--clr-banner-info-text);
	}
	&.warning {
		--banner-bg: var(--clr-banner-warning);
		--banner-border: var(--clr-banner-warning-border);
		--banner-text: var(--clr-banner-warning-text);
	}
	&.orange {
		--banner-bg: var(--clr-banner-orange);
		--banner-border: var(--clr-banner-orange-border);
		--banner-text: var(--clr-banner-orange-text);
	}
	&.pink {
		--banner-bg: var(--clr-banner-pink);
		--banner-border: var(--clr-banner-pink-border);
		--banner-text: var(--clr-banner-pink-text);
	}
}

/*
 * Hero sectons
 */

.hero {
	color: var(--clr-feature-text);
	display: flex;

	&.img {
		background: no-repeat center 57% / auto 111dvh url('/assets/img/silhouette.jpg');
		flex-direction: column-reverse;
		min-height: 65dvh;

		&.short {
			background-position: center 38.56%;
			height: 43dvh;
			min-height: unset;
		}
	}

	.description {
		background: var(--clr-shade);
		backdrop-filter: blur(0.25rem);
		padding: 2em;
		padding-bottom: calc(2em + var(--wedge-height));
		padding-right: max(2em, calc((100vw - var(--width-content)) / 2 + 2em));
		display: flex;
		flex-direction: column;
		justify-content: center;

		p {
			padding-left: 2em;
			text-indent: -2em;
		}
	}

	/* Add blurred background */
	@media screen and (min-width: 82.58vh) { /* Calculated from image aspect ratio */
			position: relative;

			&.img::before {
				content: "";
				position: absolute;
				inset: 0;
			background: no-repeat center 57% / cover url('/assets/img/silhouette.jpg');
			filter: blur(0.5vw);
			z-index: -1;
			}

			.description {
				width: calc((100vw - 108dvh) / 2 + 38.9dvh);
				padding-right: max(2em, calc((100vw - 108dvh) / 2 + 2em));
			}
		}

	/* Desktop layout */
	@media screen and (min-width: 801px) {
		&.img {
			flex-direction: row-reverse;
		}

		.description {
			width: 36%;
		}
	}

	/* Glass effect */
	&.glass {
			flex-direction: column;
			align-items: center;
			justify-content: center;
			background: var(--clr-glass-dark);
			backdrop-filter: blur(5px);
			padding: 2rem;

			&::before {
				content: '';
				position: absolute;
				inset: 0;
				z-index: -1;
				background: linear-gradient(
					110deg,
					transparent 23%,
					var(--clr-glass-dark-reflection) 42%,
					transparent 58%
				);
			}
		}
}

section.controls {
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 1em;
}

/* Card layout */
section.cards {
	display: grid;
	justify-content: center;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	margin-block: 2em;

	--min-width: 36ch;
	--max-width: 45ch;

	@media screen and (min-width: 40ch) {
		grid-template-columns: repeat(auto-fill, minmax(var(--min-width), var(--max-width)));
	}
	@media screen and (min-width: 800px) {
		grid-template-columns: repeat(2, minmax(var(--min-width), var(--max-width)));

		.card.feature {
			grid-column: span 2;
			padding: 1.5em 2.4em;
		}
	}
	@media screen and (min-width: 1150px) {
		grid-template-columns: repeat(3, minmax(var(--min-width), 1fr));
	}

	.card {
		position: relative;
		isolation: isolate;
		padding: 0.75em 1.2em;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		border: 1px solid var(--clr-glass-border);
		border-radius: 1em;
		background: var(--clr-glass);

		&::before {
			content: '';
			position: absolute;
			inset: 0;
			z-index: -1;
			background: linear-gradient(
				110deg,
				transparent 23%,
				var(--clr-glass-reflection) 42%,
				transparent 58%
			);
		}

		h1 {
			display: inline-flex;
			flex-direction: column;
			font-weight: 400;

			&::before {
				content: "" attr(data-type);
				text-transform: uppercase;
				font-size: 1.25rem;
				color: var(--clr-faded-text);
			}
			&::after {
				content: "" attr(data-releasedate);
				font-size: 1.25rem;
				color: var(--clr-faded-text);
			}
		}
	}
}
.grid-col-span-2 {
	grid-column: span 2;
}

/* Feature dates */
section.dates {
	display: flex;
	flex-direction: row;

	> h1 {
		display: inline-flex;
		flex-direction: column;
		font-weight: 400;
		padding: 0.5em 1em;
		margin-block: 1em;
		text-align: center;

		&::before {
			content: "" attr(data-type);
			text-transform: uppercase;
			font-size: 1.25rem;
			color: var(--clr-faded-text);
		}
		&::after {
			content: "" attr(data-releasedate);
			font-size: 1.25rem;
			color: var(--clr-faded-text);
		}
	}

	> h1 + h1 {
		border-left: 1px solid #fffa;
	}
}
@media screen and (max-width: 650px) {
	section.dates {
		flex-direction: column;

		h1 {
			padding: 1em;
			margin: 0;
		}

		> h1 + h1 {
			border-left: none;
			border-top: 1px solid #fffa;
		}
	}
}

/* Image button container */
section.feature-buttons {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 1em;

	&.compact {
		gap: 0.8em;

		a.btn.img {
			width: 7em;
			height: 7.5em;
		}
	}
}

/*
 * Music stuff
 */

/* Cover art */
.cover {
	position: relative;
	isolation: isolate;
	height: 100vw;
	max-height: 43dvh;

	&::before {
		content: "";
		position: absolute;
		background:
			radial-gradient(
				ellipse at center,
				transparent 55%,
				#00000059 100%
			),
			linear-gradient(#0009, #0009),
			no-repeat center / cover var(--cover);

		filter: blur(0.25vw);
		inset: 0;
		z-index: -5;
	}

	> img {
		max-height: 100%;
		max-width: 100%;
		margin: auto;
		object-fit: contain;
	}
}

/* Track info */
section.tracks {
	display: flex;
	flex-direction: column;

	> .title {
		font-size: 2rem;
		padding-inline: 1em;

		&::after {
			content: " " attr(data-type) " – " attr(data-releasedate);
			text-transform: capitalize;
			font-size: 1rem;
			color: var(--clr-faded-text);
			padding-left: 1ch;
		}
	}

	.track {
		--padding: clamp(1em, 3vw, 2.5em);
		border-top: 0.1em solid var(--clr-text);
		padding-inline: var(--padding);
		display: flex;
		align-items: center;

		&:last-child {
			border-bottom: 0.1em solid var(--clr-text);
		}

		> .title {
			flex: 1;
			padding-inline: var(--padding);
		}

		&::before, &::after {
			flex: 0 0 auto;
			color: var(--clr-faded-text);
		}

		&::before {
			content: attr(data-tracknum) ".";
			font-family: "Fira Code", monospace;
			letter-spacing: -0.05em;
			font-size: 2.25em;
		}
		&::after {
			content: attr(data-length);
		}
	}
}
section.tracks + section.tracks {
	margin-top: 2em;
}

/* Lyrics */
section.lyrics {
	section.stanza {
		&::before {
			content: attr(data-type);
			text-transform: uppercase;
			font-size: 0.85rem;
			color: var(--clr-faded-text);
			display: block;
		}
	}
}

/*
 * Form fields
 */

/* Text input */
input[type="text"] {
	border: 1.5px solid var(--clr-accent);
	border-radius: 0.5rem;

	background-color: var(--clr-brand-gray);
	color: var(--clr-brand-white);
	padding: 0.25rem 0.75rem;
	margin-block: 0.5em;

	&:focus {
		outline: none;

		border-color: var(--clr-accent-light);
		box-shadow: 0 0 0.5rem 0.1rem var(--clr-accent-light);
	}
}