* { box-sizing: border-box; }

:root {
	--box-color: #f0f0f0;
	--fg-color: #222;
	--alert-color: #ffa;
}
@media(prefers-color-scheme: dark) {
	:root {
	--box-color: #222526;
	--fg-color: #e8e6e3;
	--alert-color: #4d4d00;
	}
}

body {
	font-family: 'Source Serif 4', serif;
	font-size: 14pt;
	color: var(--fg-color);
	margin: 0;
}

.wrap, .outer { margin: 2em auto; max-width: 40em; }
@media (max-width: 50em) { .wrap, .outer { width: 90%; } }

p { margin: 1.5ex 0; }

/* PARAGRAPH STYLES */
.justify { text-align: justify; hyphens: auto; }
.indentpars p { text-indent: 2em; margin: 0; }
.indentpars p:nth-of-type(1) { text-indent: 0; }
.indentpars h2 + p, .indentpars h3 + p { text-indent: 0; }
.indentpars { margin-bottom: 1ex; }
.center { text-align: center; }
.centering { width: fit-content; margin: 0 auto; }
.skip { margin-top: 1em; }
.indent { margin-left: 2em; }
.hangindent p { padding-left: 2em; text-indent: -2em; margin: 0; }
/* END */

hgroup.maintitle { padding-top: 2em; }
.maintitle h1 { font-size: 28pt; }

h1 { font-weight: 900; font-size: 24pt; margin: 0; }
h2 { font-weight: 600; font-size: 16pt; margin-bottom: 0; }
h3 { font-weight: 600; font-size: 15pt; }
h1 + p { margin-bottom: 0;  }
h1 + p.info, h1 + p.signature, h2 + p.info, h2 + p.signature, h1 + p.subtitle { margin-top: 0; }
p.subtitle { font-style: normal; }

/* Underline */
a { color: var(--fg-color); text-underline-offset: 10%; }
abbr { text-underline-offset: 10%; }

/* NAVIGATION */
.crumbs li:not(:first-child):before { content: " » "; }
.crumbs li, .pagenav li { display: inline; }
.crumbs, .pagenav { padding-left: 0; margin: 0; }
.pagenav li:nth-child(2) { float: right; }
.pagenav li, .crumbs li { font-size: smaller; text-transform: uppercase; font-weight: 900; }
.pagenav a, .crumbs a { text-decoration: none; }
.pagenav a:hover, .crumbs a:hover { text-decoration: underline; }
.pagenav li:nth-child(1):before { content: "« "; }
.pagenav li:nth-child(2):after  { content: " »"; }
.pagenav { clear: both; }
/* END */


/* EDITORIAL APPARATUS */

/* Footnotes */
.footnotelist { padding: 0; }
h2 + .footnotelist { margin-top: 0; }
a.fn-mark::before, a.fn-back::before { content: "["; }
a.fn-mark::after, a.fn-back::after { content: "]"; }

/* Parentheses & brackets */
.paren::before { font-style: normal; content: "("; }
.paren::after  { font-style: normal; content: ")"; }
.brack::before { font-style: normal; content: "["; }
.brack::after  { font-style: normal; content: "]"; }
a.paren::before, a.paren::after, a.brack::before, a.brack::after {
	display: inline-block;
	text-decoration: none;
}
/* END */

/* Font Sizes */
.smaller { font-size: smaller; }
.larger { font-size: larger; }

/* Blackletter */
.frak { font-family: "UnifrakturMaguntia"; font-size: larger; }
.frak i, .frak em { font-style: normal; letter-spacing: 5pt; }
.frak q::before { content: "„"; }
.frak q::after  { content: "“"; }

hr {
	border: none;
	height: 1px;
	background-color: var(--fg-color);
}

summary:hover {
	text-decoration: underline;
	text-underline-offset: 10%;
	cursor: pointer;
}

/* Drop Cap */
.lettrine:first-letter {
	float: left;
	font-size: 5.8rem;
	font-variation-settings: "opsz" 60;
	line-height: .5;
	margin: 0.1em 0.05em 0 0;
}
.lettrine.fix:first-letter {
	margin-bottom: -.1ex;
}

/* COLLAPSIBLE (ex-Apicius) */
details.collapsible {
	background-color: var(--box-color);
	padding: 1em;
	margin: 0 -1em;
}
details.collapsible summary {
	font-size: 14pt;
	text-transform: uppercase;
	font-weight: 900;
	line-height: 1;
}
details[open].collapsible summary { margin-bottom: 1ex; }
details.collapsible + details.collapsible { padding-top: 0em; }
.collapsible strong {
	font-weight: 900;
	font-size: smaller;
	text-transform: uppercase;
	margin-right: 1em;
}
.collapsible h2 { display: none; }
.collapsible summary .note {
	font-weight: 400;
	text-transform: none;
	display: inline-block;
	float: right;
}
/* END */

.border-bottom { border-bottom: solid var(--fg-color) 1px; padding-bottom: 1em; }
.border-top { border-top: solid var(--fg-color) 1px; padding-top: 1em; }

@media (prefers-color-scheme: dark) {
	body { background-color: #181a1b; }
}
@media print {
	.wrap { width: 100%; }
	.noprint { display: none; }
	nav { display: none; }
}