:root {
	--text: #3a260e;
	--accent: #a32000;
	--accent-seethrough: transparent;
	--background: #eedeb1;

	font-size: clamp(1.225rem, 4vw, 1.325rem);
}

body {
	font-family: var(--serif);
	background-image: url(/misrule/viggochristmas.webp);
	background-size: cover;
	background-position: center;

	text-shadow: -0.5px -0.5px #221e1711, 1px 1px #fff8;
}

#body-container {
	display: grid;
	grid-template-columns: min(60px, 8vw) 1fr min(60px, 8vw);
	margin: auto;
	max-inline-size: 80ch;
}

@media screen and (min-width: 800px) {
	#body-container:has(#sidenotes) {
		grid-template-columns: min(60px, 8vw) 1fr min(60px, 8vw) 25ch;
		max-inline-size: 105ch;

		& #right-garland {
			order: 3;
		}
		& #sidenotes {
			order: 4;

			& aside.note {
				padding-block: 1em;
				padding-inline: 0.5em;

				background-color: var(--background);
				box-shadow: 0 0 5px black;
			}
		}
	}
}

#left-garland {
	background-image: url("/misrule/leftgarland.png");
	background-size: contain;
}

#right-garland {
	background-image: url("/misrule/rightgarland.png");
	background-size: contain;
}

main {
	padding-inline: clamp(1rem, 5vw, 2rem);
	background-color: var(--background);
	background-image: url("/index/paper-test.png");
}

h1 {
	padding-block-end: 0.67rem;

	font-size: 1em;
	text-align: left;

	border-block-end: 1px solid var(--accent);

	& > strong {
		display: block;

		margin-block-end: 0.67rem;

		color: var(--text);
		font-family: "BeowulfOT", serif;
		font-feature-settings: "swsh" 0;
		font-size: 2.5em;
		font-weight: normal;
		line-height: 1;

		& s {
			text-decoration: none;
			background-image: linear-gradient(to bottom, transparent 0%, transparent 50%, var(--text) 50%, var(--text) 60%, transparent 60%);
		}
	}

	& > span.credit {
		display: block;

		font-feature-settings: "dlig";
		font-size: 0.9em;
		font-weight: normal;

		&:first-of-type {
			margin-block-end: 0.67rem;
		}
	}
}

h2,
h3 {
	font-weight: normal;
	font-family: var(--cormorant);
}

ol.submissions li {
	margin-block-end: 1em;
}

ol.submissions li::marker {
	font-variant-numeric: oldstyle-nums;
	color: #a32000c0;
	margin-inline-end: -1em;
}

ol.submissions li strong {
	font-family: BeowulfOT, var(--serif);
	font-size: 2.2em;
	font-weight: normal;
	hyphens: none;
	line-height: 1.1;
	display: block;
	margin-block-end: 0.333em;
}

ol.submissions li strong.locked {
	opacity: 0.5;
	font-style: italic;
}

ol.submissions li strong a {
	color: var(--text);
	text-decoration: none;
}

ol.submissions li small {
	display: block;
	margin-block-start: -0.5em;

	color: var(--accent);
	font-size: 1em;
	font-style: italic;
	hyphens: none;
	line-height: 1.1;
	text-align: end;
}

hr {
	border-block-end: none;
}

.dropcap::first-letter, .has-drop-cap::first-letter {
	float: left;

	margin: 0.12em 0.05em 0 0;

	color: var(--accent);
	font-family: var(--cormorant);
	font-size: 5em;
	font-style: normal;
	font-variant-caps: normal;
	line-height: 0.67;
}

.dropcap::first-line, .has-drop-cap::first-line {
	font-variant-caps: all-small-caps;
	letter-spacing: var(--caps-spacing);
	color: var(--accent);
}

@font-face {
	font-family: "BeowulfOT";
	font-style: normal;
	font-weight: 400;
	src: local(""), url("/fonts/BeowulfOT.woff") format("woff");
}

@font-face {
	font-family: "Cormorant Garamond";
	font-style: normal;
	font-weight: 400;
	src: local("Cormorant Garamond Regular"), local("CormorantGaramond-Regular"),
		url("/fonts/cormorant-regular.woff2") format("woff2");
	font-display: fallback;
}