@font-face {
	font-family: 'maxeville-mono';
	src: url('fonts/maxeville-mono-regular.woff2') format('woff2');
}

@font-face {
	font-family: 'maxeville-mono';
	font-weight: bold;
	src: url('fonts/maxeville-mono-bold.woff2') format('woff2');
}

:root {
	--color-1: #d8ebec;
	--color-2: #a7c4c8;
	--color-3: #1c1c1c;
	--cols: 6;
	--count: 1;
	--gap: .5;
	--line: .78;
	--margin: 0;
	--top: 1;
	--col: calc(100vw / (var(--gap) * (var(--count) + 1) + var(--margin) + var(--cols) * var(--count)));
	--h1: calc((100vw - var(--col) * var(--gap) * 2) / 12 / .65);
	--h2: calc(1em / .75);

	background: var(--color-1);
	color: var(--color-3);
	cursor: default;
	font-family: 'maxeville-mono', monospace;
	font-size: calc(var(--col) / 4 / .65);
	font-variant-ligatures: no-common-ligatures;
	line-height: .9;
	scroll-behavior: smooth;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
}

@media (min-width: 480px) {
	:root {
		--margin: 2;
	}
}

@media (min-width: 600px) {
	:root {
		--count: 2;
		--margin: 0;
		--h1: calc(var(--col) * var(--cols) / 6 / .65);
	}
}

@media (min-width: 960px) {
	:root {
		--margin: 3;
		--top: .5;
	}
}

@media (min-width: 1320px) {
	:root {
		--margin: calc(var(--cols) + var(--gap));
	}
}

@keyframes show {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

body {
	margin: calc(var(--col) * var(--gap));
	margin-bottom: calc(var(--col) * (1 + var(--gap)) + var(--h2) * var(--line));
}

a,
span {
	animation: show 600ms ease-in-out forwards;
	animation-delay: 600ms;
	color: inherit;
	display: block;
	opacity: 0;
	text-decoration: inherit;
	transform: translateY(.1em);
}

a:hover {
	font-weight: bold;
}

section a {
	color: transparent;
	transform: translateY(.4em);
}

header {
	position: sticky;
	top: calc(var(--col) * var(--gap));
	z-index: 1;
}

h1 {
	font-size: var(--h1);
	line-height: var(--line);
	margin: 0;
	text-transform: uppercase;
}

h1 span:first-child {
	position: absolute;
}

h1 span:last-child {
	text-align: right;
}

h2 {
	font-size: var(--h2);
	font-weight: inherit;
	grid-column: 1 / -1;
	line-height: var(--line);
	margin: 0;
	text-transform: uppercase;
}

section {
	display: grid;
	gap: calc(var(--col) * var(--gap));
	grid-template-columns: repeat(var(--count), 1fr);
}

section:first-of-type {
	margin-top: var(--col);
	margin-left: calc(var(--col) * var(--margin));
}

section:last-of-type {
	margin-top: calc(var(--col) * var(--top));
	margin-right: calc(var(--col) * var(--margin));
}

figure {
	margin: 0;
	position: relative;
}

img {
	aspect-ratio: 12/7.5;
	display: block;
	height: auto;
	object-fit: cover;
	position: relative;
	transition: transform 150ms ease-in-out;
	width: 100%;
	z-index: 1;
}

figcaption {
	aspect-ratio: 12/7.5;
	background: var(--color-2);
	position: absolute;
	top: 0;
	transition: transform 150ms ease-in-out;
	width: 100%;
	z-index: -1;
}

a:hover img {
	transform: translate(calc(var(--col) * var(--gap) / -3), calc(var(--col) * var(--gap) / -3));
}

a:hover figcaption {
	transform: translate(calc(var(--col) * var(--gap) / 3), calc(var(--col) * var(--gap) / 3));
}

footer {
	bottom: calc(var(--col) * var(--gap));
	position: fixed;
	right: calc(var(--col) * var(--gap));
	text-align: right;
	text-transform: lowercase;
}

::selection {
	background: unset;
}