:root {
	--bg-w: 18px;
	--bg-h: var(--wh); /*438px;*/
	--color-text: rgba(0, 0, 0, 0.75);
	--font-size: 1.8rem;
	--line-height: 1.3;
	--margin: calc(var(--font-size) * var(--line-height));
	--margin-double: calc(2 * var(--margin));
	--margin-half: calc(0.5 * var(--margin));
	--max-width: calc(33 * var(--font-size));
	--vh: 1svh;
	--wh: calc(100 * var(--vh, 1vh));
}

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
}

body {
	position: relative;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	color: var(--color-text);
	background-color: var(--color-primary);
	font-family: "Vevey Text";
	font-size: var(--font-size);
	line-height: var(--line-height);
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
}

a {
	color: var(--color-primary);
	font-family: "Vevey";
	text-decoration: none;
}

a:hover {
	color: var(--color-text) !important;
}

body::before {
	content: "";
	display: block;
	width: 100%;
	height: var(--height, 100%);
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
	background: center top / var(--bg-w) var(--bg-h) repeat
		var(--background-image);
	transform: translateY(var(--offset, 0px));
}

header {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: var(--wh);
	position: fixed;
	top: 0;
	color: var(--color-primary);
	background: center top / var(--bg-w) var(--bg-h) repeat
		var(--foreground-image);
	background-clip: text;
}

header > h1 {
	margin-top: -0.1em;
	font-size: 18vw;
	letter-spacing: -0.05em;
	line-height: 0.9;
	text-align: center;
	text-transform: uppercase;
	cursor: pointer;
}

header > h1 > a {
	display: flex;
	align-items: center;
	flex-direction: column;
}

header > h1 > a,
header > h1 > a:hover {
	color: transparent !important;
}

header > a {
	padding: 1em;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	background-color: var(--color-primary);
	backdrop-filter: blur(2px);
	border-radius: 10px 10px 0 0;
	color: var(--color-secondary);
	font-family: "Vevey";
	font-size: 1rem;
	text-transform: uppercase;
	line-height: 0.7;
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
}

main {
	height: var(--height, auto);
	padding: var(--margin);
	position: relative;
	z-index: 1;
	pointer-events: none;
	/* filter: drop-shadow(0px 0px 20px var(--color-secondary)); */
}

main::before {
	content: "";
	display: block;
	width: 100%;
	height: calc(1.25 * var(--wh));
}

article {
	scroll-margin-top: calc(var(--wh) - 3 * var(--margin));
	max-width: var(--max-width);
	margin-right: auto;
	margin-left: auto;
	padding: calc(var(--margin) - 0.2em) var(--margin);
	background-color: var(--color-secondary);
	border-radius: var(--margin) var(--margin) 0 0;
	pointer-events: all;
}

article > p + p {
	margin-top: var(--margin);
}

.footnotes {
	margin-top: var(--margin);
	font-size: 1rem;
}

.footnotes > ol {
	list-style-position: inside;
}

footer {
	display: flex;
	flex-direction: column;
	max-width: var(--max-width);
	margin: -1px auto 0;
	padding: var(--margin);
	position: relative;
	line-height: 0.7;
	background-color: var(--color-secondary);
	border-radius: 0 0 var(--margin) var(--margin);
	pointer-events: all;
}

footer > ul {
	display: flex;
	justify-content: center;
	gap: var(--margin);
	position: relative;
	z-index: 10;
	list-style: none;
}

footer > ul:last-of-type {
	justify-content: space-between;
	margin-top: var(--margin-double);
	font-size: 1rem;
}

footer > img + ul:last-of-type {
	margin-top: auto;
}

/* footer > ul:last-of-type > li > a {
	color: var(--color-secondary);
} */

footer > img {
	width: auto;
	max-width: 100%;
	max-height: calc(100% - var(--margin-double) - 0.7 * var(--font-size));
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	object-fit: contain;
	object-position: center bottom;
}

@media (max-width: 58.8rem) {
	:root {
		--bg-w: 14px;
		--font-size: 3vw;
		--max-width: none;
	}

	.footnotes {
		font-size: 0.625rem;
	}

	footer {
		align-items: center;
		flex-direction: column;
		padding: var(--margin) var(--margin) 1rem;
	}

	footer > ul {
		width: 100%;
	}

	header > a,
	footer > ul:last-of-type {
		font-size: 0.625rem;
	}
}

@media (max-width: 480px) {
	:root {
		--bg-w: 10px;
		--font-size: 0.875rem;
	}

	footer {
		padding: var(--margin);
	}
}

@media (min-width: 1800px) and (max-height: 700px) {
	header > h1 {
		font-size: 50vmin;
	}
}

@media (max-height: 640px) {
	header > a {
		font-size: 0.625rem;
	}
}

@media (orientation: portrait) {
	header > h1 {
		font-size: 14vmax;
		line-height: 0.8;
	}

	header > h1 > a {
		flex-direction: row;
	}

	header > h1 > a > span {
		width: 1.65ch;
		word-break: break-all;
	}
}