/* Gold on black, from the title art in the game. */
:root {
	--gold: #b8913a;
	--bright: #dcbc5c; /* bright: the award type, over the darker laurels */
	--ink: #d8d0c0;
	--dim: #8a8070;
	/* edge: the space above the wordmark and below the footer */
	--edge: 12svh;
	color-scheme: dark;
}

/* EB Garamond, Latin subset, from Google Fonts: see /fonts/OFL.txt */
@font-face {
	font-family: "EB Garamond";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url(/fonts/eb-garamond.woff2) format("woff2");
}

@font-face {
	font-family: "EB Garamond";
	font-style: italic;
	font-weight: 400 800;
	font-display: swap;
	src: url(/fonts/eb-garamond-italic.woff2) format("woff2");
}

/* size: Garamond sets small, so 20px reads as 18px did in Georgia */
html {
	background: #000;
	color: var(--ink);
	font: 20px/1.5 "EB Garamond", ui-serif, Georgia, serif;
}

body {
	margin: 0;
}

/* position: paints the text over the key art, which runs on below the hero */
main,
body > footer {
	position: relative;
	max-width: 36rem;
	margin: 0 auto;
	padding: 0 1rem;
}

main {
	text-shadow: 0 0.05rem 0.4rem #000, 0 0 1rem #000;
}

/* padding: starts the home page text below most of the ring of orbs */
.hero.home + main {
	padding-top: 15svh;
}

a {
	color: var(--gold);
	text-decoration: none;
	transition: filter 0.15s;
}

a:hover {
	filter: brightness(1.25);
}

/* The hero: the 1994 key art, full width, with the wordmark at the top,
   above the ring of orbs in the art. The art runs on below the hero, under
   the first of the page text, and fades out there. It also moves down a
   little as the page scrolls. */
.hero {
	position: relative;
	isolation: isolate;
	display: grid;
	place-items: center;
	align-content: start;
	padding-top: var(--edge);
	box-sizing: border-box;
	height: 40svh;
	overflow: clip visible;
}

.hero.home {
	height: 85svh;
}

.backdrop {
	position: absolute;
	inset: 0 0 -35% 0;
	z-index: -1;
	/* position: keeps the ring of orbs in the key art below the wordmark */
	background: center 30% / cover;
	mask-image: linear-gradient(to bottom, #000 55%, transparent);
	animation: parallax linear both;
	animation-timeline: scroll(root);
	animation-range: 0 100svh;
}

/* parallax: 12%, so the face in the art stays above the page text */
@keyframes parallax {
	to {
		transform: translateY(12%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.backdrop {
		animation: none;
	}
}

/* filter: the gold 10% brighter and more saturated than the title art, then
   a wide feathered halo, a softer offset shadow, and a tight one for the
   edges */
.wordmark {
	width: min(80vw, 36rem);
	height: auto;
	filter: brightness(1.1) saturate(1.1) drop-shadow(0 0 2rem #000) drop-shadow(0 0.4rem 1rem rgb(0 0 0 / 0.9)) drop-shadow(0 0.1rem 0.15rem rgb(0 0 0 / 0.8));
}

h1 {
	color: var(--gold);
	font-weight: normal;
}

.video div {
	position: relative;
	aspect-ratio: 16 / 9;
}

.video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

figure {
	margin: 2rem 0;
}

.lead,
.store {
	text-align: center;
}

.lead {
	font-size: 1.25em;
	text-wrap: balance;
}

.award {
	display: flex;
	margin: 2rem 0;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	color: var(--bright);
	text-align: center;
}

/* laurels: one branch drawn for the left, mirrored on the right */
.award > img {
	height: 4.2em;
}

.award > img:last-child {
	transform: scaleX(-1);
}

.award cite,
blockquote footer {
	margin-top: 0.25em;
}

.mice img {
	height: 1lh;
	vertical-align: top;
}

cite {
	display: block;
	color: var(--dim);
	font-size: 0.8em;
	font-style: normal;
}

blockquote {
	margin: 2rem 0;
	text-align: center;
	font-style: italic;
}

blockquote p {
	margin: 0;
}

blockquote footer {
	color: var(--dim);
	font-size: 0.8em;
	font-style: normal;
}

cite a {
	color: inherit;
}

blockquote cite {
	display: inline;
	font-size: 1em;
}

body > footer {
	margin-top: 4rem;
	padding-bottom: var(--edge);
	color: var(--dim);
	font-size: 0.8em;
	text-align: center;
}

body > footer p {
	margin: 0.25rem 0;
}

body > footer p:last-child {
	margin-bottom: 0;
}