:root {
	--background: color(display-p3 0 0 0);
	--foreground: color(display-p3 1 1 1);
	--foreground75: color(display-p3 1 1 1 / 0.75);
	--foreground50: color(display-p3 1 1 1 / 0.5);
	--foreground25: color(display-p3 1 1 1 / 0.25);
	--gold: color(display-p3 0.9 0.75 0);
	--gold75: color(display-p3 0.7 0.548 0);
	--gold50: color(display-p3 0.5 0.375 0);
	--red: color(display-p3 0.8 0.16 0.16);
	--red75: color(display-p3 0.647 0.129 0.129);
	--red50: color(display-p3 0.5 0.06 0.06);
	--max-width: 64rem;
	--margin: 1rem;
}
@font-face {
	font-family: "MDUI";
	src: url("/MDUI-VF.woff2") format('woff2-variations');
	font-style: normal oblique;
	font-weight: 100 900;
}
@font-face {
	font-family: "Womprat";
	src: url("/Womprat.woff2") format('woff2');
}
.womprat {
	font-family: "Womprat";
}
* {
	box-sizing: border-box;
}
body {
	font-family: "MDUI", system-ui, tbudgothic-std, sans-serif;
	font-size: 16px;
	background: var(--background);
	color: var(--foreground75);
	line-height: 1.75em;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
	padding: var(--margin);
}
body::after {
	content: "";
	background: linear-gradient(var(--foreground25), var(--background));
	position: fixed;
	inset: 0;
	z-index: -2;
	min-height: 32rem;
}
em {
	font-style: oblique;
}
header, main, footer {
	max-width: var(--max-width);
	width: 100%;
}
.narrow header, .narrow main, .narrow footer {
	--max-width: 40rem;
}
header {
	margin: var(--margin);
	padding-bottom: var(--margin);
	border-bottom: 1.5px solid var(--foreground25);
}
main {
	margin: var(--margin);
}
footer {
	font-size: 0.75em;
	font-weight: 500;
	letter-spacing: 0.03125em;
}
hr {
	border: none;
	border: 0.5px solid var(--foreground25);
	margin: calc(var(--margin) * 2) 0;
}
a, a:visited {
	color: var(--foreground);
	text-decoration-color: var(--foreground75);
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}
a:hover {
	color: var(--foreground75);
	text-decoration-color: var(--foreground50);
}
a:active {
	color: var(--foreground50);
	text-decoration-color: var(--foreground25);
}
a[href=""], a[href=""]:visited {
	color: var(--red);
	text-decoration-style: dotted;
	text-decoration-thickness: 1px;
}
a[href=""]:hover {
	color: var(--red75);
}
a[href=""]:active {
	color: var(--red50);
}
h1, h2, h3 {
	font-family: "trajan-pro-3", serif;
	font-weight: 400;
	font-style: normal;
	text-transform: uppercase;
}
h2, h3 {
	font-weight: 600;
}
header h1 {
	font-size: 1.5rem;
	text-align: center;
}
h1 .womprat {
	font-size: 1.5em;
	margin: 0.25em;
}
@media (max-width: 600px) {
	header .womprat {
		display: block;
		margin-top: 0.125em;
	}
}
h1 a {
	text-decoration: none;
}
ul, ol {
	padding-left: var(--margin);
}
li {
	color: var(--foreground50);
}
ol.roman {
	list-style: none;
	counter-reset: roman;
	padding-left: 0;
}
ol.roman li {
	counter-increment: roman;
}
ol.roman li::before {
	content: counter(roman, upper-roman);
	font-family: "trajan-pro-3", serif;
	font-size: 0.75em;
	font-weight: bold;
	width: 1.75em;
	height: 1.75em;
	border: 1.5px solid var(--foreground25);
	color: var(--foreground75);
	border-radius: 50%;
	padding: 0.0625em 0.0625em 0 0;
	margin-right: 0.75em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
ol.roman li:nth-child(2)::before,
ol.roman li:nth-child(3)::before {
	letter-spacing: -0.09375em;
}
ol.roman li:nth-child(4)::before,
ol.roman li:nth-child(6)::before,
ol.roman li:nth-child(7)::before,
ol.roman li:nth-child(9)::before {
	letter-spacing: -0.0625em;
}
ol.roman li:nth-child(8)::before {
	letter-spacing: -0.125em;
}
img {
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
	-khtml-user-drag: none;
	-moz-user-drag: none;
	-o-user-drag: none;
	user-drag: none;
	pointer-events: none;
}
.grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(224px, 1fr));
	gap: var(--margin);
}
.grid figure {
	margin: 0;
}
.grid img {
	width: 100%;
	aspect-ratio: 5 / 3;
	object-fit: contain;
	display: block;
	border: 1.5px solid var(--foreground25);
	border-radius: calc(var(--margin) / 2);
	box-shadow: 0 8px 12px color(display-p3 0 0 0 / 0.25);
	background: color(display-p3 0 0 0 / 0.5);
}
.grid img.white {
	background: white;
}
.grid figcaption {
	padding: calc(var(--margin) / 2);
	color: var(--foreground50);
}
.grid figcaption span, .grid figcaption em {
	display: block;
	line-height: 1.5em;
}
.grid figcaption em {
	font-size: 0.75em;
	font-weight: 500;
}
.grid figure:hover img {
	border: 1.5px solid var(--foreground50);
}
.grid figure:hover figcaption {
	color: var(--foreground);
}