:root {
	color-scheme: light dark;
	background-color: var(--background-accent);
	--sans: 'Open Sans',Tahoma,Arial,sans-serif;
	--serif: Baskervville-subset,Baskervville,Georgia,serif;
	--dyslexic-friendly: OpenDyslexic,'Comic Sans MS',sans-serif;
	--side-margins: min(60px, 4vw);
}

[data-disable-ligatures] main > p,
[data-disable-ligatures] .description > p {
	font-variant-ligatures: none;
}

[data-full-justify] main > p {
	text-align: justify;
}

@supports(initial-letter: 2) {
	[data-no-para-gap] main > p:first-child {
		text-indent: 0;
	}
	[data-no-para-gap] main > p:first-child::first-letter {
		initial-letter: 2;
		margin-right: 6px;
		font-weight: normal;
	}
}

@supports not (initial-letter: 2) {
	[data-no-para-gap] main > p:first-child {
		text-indent: 0;
	}
	[data-no-para-gap] main > p:first-child:first-letter {
		font-size: calc(18px * 1.6 * 2);
		line-height: calc(18px * 1.6 * 2);
		float: left;
		margin-right: 6px;
		padding-top: 6px;
		font-weight: normal;
	}
}

[data-no-para-gap] main > p {
	text-indent: 2em;
	margin-bottom: 0;
}

[data-no-para-gap] main > p+p {
	margin-top: 0;
}

:root:not([data-font]) main > p,
[data-font="serif"] main > p,
:root:not([data-font]) .description > p,
[data-font="serif"] .description > p,
[data-font="serif"] .footnote p,
.meta time {
	text-shadow: 0.2px 0.2px 0 currentColor;
	font-weight: normal;
}

[data-font="opendyslexic"] main > p,
[data-font="opendyslexic"] .description > p {
	font-family: var(--dyslexic-friendly);
}

[data-font="sans-serif"] main > p,
[data-font="sans-serif"] .description > p {
	font-family: var(--sans);
}

main {
	hyphens: auto;
}

main > p em {
	margin-right: 1.5px;
}

body {
	color: var(--color);
	background-color: var(--background-color);
	font-family: var(--serif);
	font-size: 18px;
	line-height: 1.6;
	margin: auto;
	max-width: 650px;
	padding: 10px var(--side-margins);
	min-height: calc(100vh - 20px);
	font-variant-numeric: lining-nums;
	box-shadow: 0 0 20px var(--background-color);
}

header summary {
	cursor: pointer;
	font-size: 16px;
	padding: 5px 0;
	text-align: center;
	list-style: none;
	min-height: 3rem;
	line-height: 3rem;
}

header details {
	font-size: small;
	font-family: var(--sans);
	background-color: var(--background-accent);
	padding: 0 1rem 0 1rem;
}

header details[open] > summary > * {
	background-color: rgba(128, 128, 128, 25%);
	width: fit-content;
	margin: auto;
	padding: 0 8px;
	border-radius: 1.5rem;
	height: 3rem;
	line-height: 3rem;
}

#theme-buttons {
	padding-bottom: 5px;
	border-bottom: 1px solid var(--color);
}

#theme-buttons, #text-buttons {
	padding-bottom: 5px;
	margin-bottom: 5px;
	display: flex;
	flex-wrap: wrap;
	column-gap: 10px;
	row-gap: 5px;
	justify-content: space-around;
}

#theme-buttons *, #text-buttons * {
	font-size: 16px;
}

#theme-buttons select, #text-buttons select {
	height: 32px;
	margin: 0;
}

.labeled-control {
	column-gap: 5px;
	height: 3rem;
	line-height: 3rem;
	display: flex;
	align-items: center;
}

.labeled-control input {
	display: none;
}

.labeled-control label {
	border-radius: 32px;
	line-height: 3rem;
	padding: 0 8px;
}

.labeled-control input:checked+label {
	background-color: var(--accent);
}

#site-header {
	margin: 0 calc(-1 * var(--side-margins));
}

#site-header .menubar {
	display: flex;
	justify-content: space-between;
	padding: 2px 10px;
	background-color: var(--accent);
	background: linear-gradient(180deg, transparent, transparent calc(3rem + 4px), var(--background-color) calc(3rem + 4px), var(--background-color)), linear-gradient(to right, var(--accent-highlight), var(--accent) 60px, var(--accent) calc(100% - 60px), var(--accent-highlight));
	align-content: center;
	column-gap: 1rem;
	row-gap: 4px;
	flex-wrap: wrap;
	justify-content: space-around;
}

.menubar menu {
	display: flex;
	padding: 0;
	margin: 0;
	column-gap: 1rem;
	justify-content: space-evenly;
}

.menubar li {
	list-style: none;
	border-radius: 1.5rem;
	background-color: var(--accent);
}

.menubar li:hover {
	background-color: var(--accent-highlight);
	transition: background-color 300ms ease-in;
}

.menubar a {
	display: inline-block;
	text-decoration: none;
	color: var(--color);
	font-family: var(--sans);
	font-size: 16px;
	line-height: 3rem;
	padding: 0 20px;
}

h1,
h2,
h3 {
	line-height: 1.2;
	text-wrap-style: pretty;
}

h1 {
	text-align: center;
}

h2#title {
	margin-bottom: auto;
}

h2#title+.meta {
	margin-top: 0.5em;
}

h3, h4 {
	margin: auto;
}

.meta {
	border: 1px solid;
	padding: 2px 7px;
	margin: 0px 2px;
	background-color: var(--background-accent);
	box-shadow: 2px 2px var(--color);
}

hgroup .series-title {
	margin: 0 1rem;
	font-family: var(--sans);
	font-weight: 300;
}

hgroup .series-title::before {
	content: "➥";
	margin-right: 5px;
}

.series-title a {
	color: var(--color);
}

h1 a,
h2 a,
h3 a,
h4 a {
	color: var(--color);
	text-decoration: none;
}

h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover {
	text-decoration: underline;
}

ul.tags {
	list-style: none;
	padding: 0px;
	margin: auto 0.5rem;
	font-weight: bold;
	font-style: italic;
	font-size: smaller;
	font-family: var(--sans);
}

ul.tags li.tag {
	display: inline;
	font-weight: normal;
}

ul.tags li.tag:not(:last-child)::after {
	content: ", "
}

li.tag a {
	color: var(--color);
	text-decoration: none;
}

li.tag a:hover, li.tag a:focus {
	text-decoration: underline;
}

.rose {
	color: var(--rose);
}

form#searchbar {
	margin: 0;
	/* padding: 0; */
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	flex: 1;
	background2px solid var(--accent);:;
	/* border: 2px solid var(--accent); */
	/* box-sizing: border-box; */
	/* height: 3rem; */
}

input#query {
	flex: 1;
	font-size: 16px;
	padding: 0rem 1.5rem 0rem 1.5rem;
	border-radius: 1.5rem 0 0 1.5rem;
	border: 0px;
	background-color: var(--background-accent);
}

button#search {
	border-radius: 0 1.5rem 1.5rem 0;
	border: none;
	padding-right: 1rem;
	padding-left: 0.75rem;
	padding-top: 0;
	padding-bottom: 0;
	font-size: 16px;
	line-height: calc(3rem - 4px);
	background-color: var(--accent);
	box-sizing: border-box;
	height: 3rem;
}

button#search:hover {
	background-color: var(--accent-highlight);
	transition: background-color 300ms ease-in;
}

nav ul.links {
	list-style: none;
	padding: 0 10px 0 10px;
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	flex-direction: row;
	margin-top: 0;
}

nav ul.links li {
	margin-top: 10px;
}

nav ul.links a {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	color: var(--color);
	text-decoration: none;
	background-color: var(--accent);
	border-radius: 18px;
	height: 36px;
	padding-left: 16px;
	padding-right: 16px;
	margin: 0 5px;
	font-family: var(--sans);
	font-size: 14px;
	font-weight: 500;
	border-width: 2px;
	box-shadow: 3px 3px var(--background-accent);
}

p {
	text-wrap: pretty;
}

hr {
	width: 50px;
	height: 0;
	border-bottom: none;
	border-left: none;
	border-right: none;
	border-top: 10px dotted var(--styling-color);
	box-sizing: border-box;
}

hr.end, .footnote hr {
	width: 100%;
	border: none;
	height: 1px;
	margin-block-start: 7.5px;
	margin-block-end: 7.5px;
	background: linear-gradient(to right, var(--background-color), var(--color) 50px, var(--color) calc(100% - 50px), var(--background-color));
}

h3, h4, strong {
	letter-spacing:1px;
	font-weight: normal;
	text-shadow:1px 0 0 currentColor;
}

sup, sub {
	/* Do not nudge line when using these. */
	line-height: 1;
}
.footnote {
	display: contents;
	--button-size: calc(1.6 * 18px + 15px);
}

.footnote-ref {
	text-decoration: none;
	font-size: smaller;
	font-family: var(--sans);
	font-weight: bold;
	color: var(--color);
	background-color: var(--accent);
	padding: 1px 4px;
	text-align: center;
	border-radius: 100%;
}

/* Pain in the ass to do this with pure CSS, but when the popup is not
 * expanded, this selector targets the first paragraph containing a visible
 * footnote-ref, then the first superscript containing the visible
 * footnote-ref, then the visible footnote-ref itself.
 *
 * When the popup is expanded, this selects all visible footnote-ref elements.
 */
main:has(.popup):not(:has(#popup-expand:checked))
	p:nth-child(-n + 1 of :has(.footnote-ref.visible))
	sup:nth-child(-n + 1 of :has(.footnote-ref.visible))
	.footnote-ref.visible,
main:has(#popup-expand:checked) .footnote-ref.visible {
	box-shadow: 1px 1px 1px var(--color);
}

.footnote p {
	margin: 0;
}

.footnote p {
	margin-top: 1em;
}

.footnote p:first-child {
	margin-top: 0;
}

.footnote li {
	padding-top: 7.5px;
}

.footnote:has(#popup-expand:checked) li.popup + li.popup,
.footnote.in-view li + li {
	padding-top: 1em;
}

.footnote ol {
	transition: height 150ms ease-in-out;
	display: block;
	margin: -7.5px calc(-1 * var(--side-margins));
	padding: 0 var(--button-size) 7.5px 40px;
	background-color: var(--accent-highlight);
	max-width: 100vw;
	overflow-x: clip;
	box-sizing: content-box;
}

.footnote.multi-line:not(.in-view) ol {
	padding-right: calc(var(--button-size) + 5px);
}

.footnote:not(.in-view) ol {
	max-height: calc(100vh - var(--button-size));
	height: calc(var(--button-size) - 5px);
}

.footnote:not(.in-view) ol:has(.popup) {
	position: sticky;
	bottom: 0;
}

.footnote .popup .footnote-backref {
	display: none;
}

.footnote:not(.in-view):has(.popup) li:not(.popup),
.footnote:not(.in-view):has(.popup) li:not(.popup) p {
	visibility: hidden;
	height: 0;
	padding: 0;
	margin: 0;
	overflow-y: clip;
}

.footnote:not(.in-view) ol:has(.popup):not(:has(#popup-expand:checked)) li.abbr.popup p {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.footnote:not(.in-view) ol:has(.popup) #popup-expand {
	max-height: var(--button-size);
	top: 0;
	right: 0;
}

.footnote:not(.in-view) #popup-expand:before {
	content: '⌃';
	display: block;
	width: 100%;
	height: 100%;
	overflow-y: hidden;
	text-align: center;
	/* Nudge the chevron to look a bit more centered. */
	line-height: calc(var(--button-size) + 7.5px);
	box-sizing: border-box;
	transition: transform 150ms ease-in-out;
}

.footnote:not(.in-view) #popup-expand:checked:before {
	transform: rotate(180deg);
}

.footnote:not(.in-view) ol:has(.popup) #popup-expand:checked {
	top: calc(-0.5 * var(--button-size));
}

.footnote.in-view ol {
	height: fit-content !important;
}

#popup-expand {
	pointer-events: none;
	display: block;
	font-size: calc(0.6 * var(--button-size));
	transition: all 150ms ease-in-out,
		opacity 200ms ease-out,
		border 500ms cubic-bezier(0.68, -0.55, 0.27, 1.55),
		color 500ms cubic-bezier(0.68, -0.55, 0.27, 1.55),
		background-color 500ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
	position: absolute;
	top: 0;
	right: 0;
	appearance: none;
	margin: 2.5px;
	border-radius: calc(0.5 * var(--button-size));
	width: var(--button-size);
	height: var(--button-size);
	box-sizing: border-box;
	cursor: pointer;

	border: calc(0.5 * var(--button-size)) solid var(--color);
	opacity: 0%;
	background-color: transparent;
	color: transparent;
}

.multi-line #popup-expand,
#popup-expand:checked {
	pointer-events: auto;

	border: 2px solid var(--accent);
	opacity: 100%;
	background-color: var(--accent);
	color: var(--color);
}