/*
typeset.css

Styling for a page that is 'typeset'. This CSS sets the general typographic styling, flow, and visual prose
of nearly all written works on my COGNATIO. This tinkers with core elements like p, h1, body, et. al. Other
CSS can be used in conjunction with this file to 'add on' capability, but this CSS should be considered
mutually exclusive with any page that does something that's not primarily based around displaying text
for reading purposes (such as a web-app).

Many decisions here refer back to good styling practices as explored in "Elements of Typographic Style v3.1",
an excellent book which all creators, designers, and engineers working with text should read.

Classes here should note what lessons they have taken and **why** styling is as it is, so future changes don't
fiddle with the carefully crafted symphony here.

## OTHER CSS FILES ##
Other CSS files written to perform in conjunction with this and perhaps other 'core' css styles would be
best to use CSS nesting practices to bind behaviors within the space of a tag-with-class or, better yet,
a uniquely named tag. This will prevent collisions and make code easier to read and understand later.

Josh Reed 2025
*/


/* ########################
   ######## COLORS ########
   ########################

Colors are defined here at a top level, both for bookkeeping purposes and to ensure that it's easy to switch
to 'dark mode'.
*/

:root {
	--bg: #f8f7f2;
	--bg-emph: #e7e6e0;
	--text: #333333;
	--text-unemph: #6A6A6A;
	--hyperlink: #0000EE;
	--red: #984B43;
	--yellow: #EAC67A;

	/* This is the main text font size */
	--size-text-font: 16px;
	/* This is the line-to-line spacing, the standard unit of the page.*/
	--size-line-space: 24px;
	/* This is the tab-width used to inset certain list elements and (if used) paragraph starts. */
	--indent-width: 1.75em;
}

.dark-mode {
	--bg: #1f1f1f;
	--bg-emph: #383838;
	--text: #FAFAFA;
	--text-unemph: #555555;
	--hyperlink: #0000EE;
}

/* ###################################
   ######## STANDARD ELEMENTS ########
   ###################################
*/

body {
	/*
	Default body should never have margins/border/padding, and should provide base colors to all descendants. 
	Slapping a 'dark-mode' onto the body tag will make the whole page run in dark mode. All 'global' styling
	should be placed here.
	*/
	background-color: var(--bg);
	color: var(--text);
	margin: 0; padding: 0;
	/* This is the base text size of the whole page. It should only ever be defined once in this document
	here. Everything else scales (in a typographically sound way) with em. */
	font-size: var(--size-text-font);
	/* All is centered left to right */
	display: flex; flex-direction: column; align-items: center;

	counter-reset: h1;
}
textcol {
	/* Text is the inner column of the page on which all non-margin text should go. It is defined at a fixed,
	unchanging width. There shall also be, at very least, margins between the the left, right, top, and bottom
	of the text column and the edges of the screen. Most of the time, these margins will not come into play.

	On change: Update the .text workhorse class.
	*/

	/* Using the typographic table on p29 of "Elements", we can see how many times wider the line should be
	than the width of the unique 26 letters of the alphabet when measured for a given average character
	count per line.

	Font Name		font-size	measured 26 width	
	IMBPlexSans		16px		205px

	Now, for IBMPlexSans, 205px -> 147pts (which are the units of the table). This implies 2.48x 26-width
	line widths, for an average character count of 70 / line. That's 508px, or 31.75em. It should be noted
	that this is substantially less (maybe 75% the width of) just slapping width: 70ch. 644px corresponds to
	89 / line, if the book is used.

	90 is mentioned as the upper limit, but I personally really prefer widths of 100 or greater. 
	*/
	max-width: 644px;

	/* TODO update these to have correct cadence. */
	margin-top: var(--size-line-space);
	margin-bottom: var(--size-line-space);
	/* Width is set like this to ensure that the column is always full-width (if sparse text), does not exceed
	page width (in case of narrow screen), and has margins in case of narrow screen. */
	width: calc(100% - 2em);

	font-family: "IBMPlexSans";
	font-weight: 300;
	line-height: var(--size-line-space);
	
	text-align: justify;
	text-justify: inter-word;
}
/* Ragged may be applied to a whole textcol or an individual paragraph to switch away from block justification. */
textcol.ragged {
	text-align: left !important;
	text-justify: none !important;
}
/* A wider version that maximizes space rather than readability. */
textcol.wide {
	max-width: 90ch;
}

/* Most phones have 9/16 or taller ratios. This block is for mobile. */
@media (max-aspect-ratio: 9/15) {
	textcol {
		/* Set text ragged for mobile. It tends not to look so good with the smaller line widths. */
		text-align: left !important;
		text-justify: none !important;
	}
}

/* Used to place two textcols side-by-side into two-column mode. Please note that this is currently
not intended for text wrap between columns. */
div.cols-two {
	display: flex;
	flex-direction: row;
	width: 100%;

	& textcol {
		width: 50%;
		margin-top: 0;
		text-align: left;
		text-justify: none;
	}
	& textcol:last-of-type {
		margin-left: var(--indent-width);
	}

	/* Everything below to do with sidenotes merely changes the 100% width from the original calculation to
	200% width to adjust for column widths at 50%. */
	& sidenote, sidenote.right {
		width: calc(((100vw - 200%) / 2) - (2 * var(--size-line-space)));
		/* Making the right margin -width will position this floating element just to the right of the body text.
		Subtracting more shifts it further. The below equation is miserable, but works. The min() is necessary
		to choose correct width.
		
		This equation differs from the default one, in that it adjusts the width calculation to use that of the
		parent. */
		margin-right: calc(
			-1 * var(--size-line-space) - 
			min(
				(((100vw - 200%) / 2) - (2 * var(--size-line-space))),
				(644px / 3)
			)
		);
	}
	& sidenote.left {
		margin-left: calc(
			-1 * var(--size-line-space) - 
			min(
				(((100vw - 200%) / 2) - (2 * var(--size-line-space))),
				(644px / 3)
			)
		);
	}
}
/* Most phones have 9/16 or taller ratios. This block is for mobile. */
@media (max-aspect-ratio: 9/15) {
	div.cols-two {
		/* Mobile is too narrow for two-column text. */
		flex-direction: column;
	}
	& textcol:last-of-type {
		margin-left: 0em !important;
	}
}

p {
	/* The standard vertical gap is equal to one line height, defined cross-page. */
	margin-top: var(--size-line-space);
	margin-bottom: 0;
}
p.ragged {
	text-align: left;
	text-justify: none;
}
p.indented {
	padding-left: var(--indent-width);
}

/* In the grand design, the h1 header is intended to be used as a page title, or very-master-section title.
It shouldn't appear very often at all in a page, and often should be followed up by an <hr> line.
*/
h1 {
	font-weight: 500;
	font-size: 30px;
	font-variant-caps: all-small-caps;
	letter-spacing: 0.035em;
	line-height: calc(30px * 1.5);
	margin-top: calc(((var(--size-line-space) * 3) - (30px * 1.5)) / 2);
	margin-bottom: calc(((var(--size-line-space) * 3) - (30px * 1.5)) / 2);
	
	counter-increment: h1;
	counter-reset: h2 h3 h4;
}
hr {
	margin-top: var(--size-line-space);
	margin-bottom: var(--size-line-space);
	box-sizing: border-box;
}
hr.thin {
	border-bottom: 0px;
}
h1 + hr {
	margin-top: 0;
}
h2 {
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.045em;
	text-decoration: underline;
	font-size: var(--size-text-font);
	margin-top: var(--size-line-space);
	margin-bottom: 0;
	
	counter-increment: h2;
	counter-reset: h3 h4;
}
h2 + h3 {
	margin-top: 0;
}
h2 + h4 {
	margin-top: 0;
}
h3 {
	font-weight: 400;
	font-style: italic;
	text-decoration: underline;
	font-size: var(--size-text-font);
	margin-top: var(--size-line-space);
	margin-bottom: 0;
	
	counter-increment: h3;
	counter-reset: h4;
}
h3 + h4 {
	margin-top: 0;
}
h4 {
	font-weight: 300;
	font-style: italic;
	content: counter(h1)"."counter(h2)"."counter(h3)"."counter(h4)" ";
	font-size: var(--size-text-font);
	margin-top: var(--size-line-space);
	margin-bottom: 0;

	counter-increment: h4;
}

h2.numbered, h3.numbered, h4.numbered {
	margin-left: calc(2 * var(--size-line-space));
	position: relative;
}
h2.numbered::before, h3.numbered::before, h4.numbered::before {
	font-family: "Arsenal";
	position: absolute;
	left: calc(-2 * var(--size-line-space));
}
h2.numbered::before {
	content: counter(h1)"."counter(h2)" ";
}
h3.numbered::before {
	content: counter(h1)"."counter(h2)"."counter(h3)" ";
	font-style: normal;
}
h4.numbered::before {
	content: "";
	border-bottom: solid 1px var(--text);
	top: 50%;
	width: calc(1.5 * var(--size-line-space));

	font-style: normal;
}

strong {
	font-weight: 500;
}
sup {
	line-height: 0; /* Prevents line height from changing when superscript is present. */
	font-size: 0.6em;
}
abbr {
	letter-spacing: 0.05em;
	font-variant-caps: all-small-caps;
}


/* ##############################
   ######## AUX ELEMENTS ########
   ##############################
*/

/* LISTS */
li {
	/* List blocks tend to look better and more distinct when they are ragged. */
	text-align: left;
	text-justify: none;
}
ul {
	/* An unordered list. The implicit assumption made here is that unordered and ordered lists won't often
	be mixed, as the padding for the unordered list centers the bullet in the little margin.

	Vertically, the list is offset between half-spaces. This ties it closer to the previous paragraph
	without making it totally adjacent, which is what I find I usually want.
	*/

	margin-top: calc(var(--size-line-space) / 2);
	/* This centers the x between both sides. Obnoxious, but this equation should scale with font size,
	so long as the font family is not changed.*/
	padding-left: calc((var(--size-text-font) / 16) * (9.6 + 3.784 + 3.784));
	/* This is the multiplication X. When measured, it's 9.6px in SansPlex 16pt font. A space is 3.784px*/
	list-style-type: "\00D7  ";
}
ul + p, ol + p, dl + p {
	/* This forces following <p> tags not to have full top-margins to preserve spacing. */
	margin-top: calc(var(--size-line-space) / 2);
}
ol {
	/* The left-margin here is a sort of compromise between 1 and 2-character number leaders. I'm not entirely
	happy with it, but it works sufficiently well for now.

	Vertically, the list is offset between half-spaces. This ties it closer to the previous paragraph
	without making it totally adjacent, which is what I find I usually want.
	*/
	margin-top: calc(var(--size-line-space) / 2);
	padding-left: var(--indent-width);
}
dl {
	margin-top: calc(var(--size-line-space) / 2);
}
dt  {
	text-decoration: underline;
}
dd {
	margin-left: var(--indent-width);
}

ol > ol {margin-top: 0;}
ol > ul {margin-top: 0;}
ol > dl {margin-top: 0;}
li > ol {margin-top: 0;}
li > ul {margin-top: 0;}
li > dl {margin-top: 0;}
ul > ul {margin-top: 0;}
ul > ol {margin-top: 0;}
ul > dl {margin-top: 0;}


ol.outline {
	/* Special class for ordered list that indicates children follow successive differing criteria, like
	an outline. */
	list-style-type: upper-roman;
}
ol.outline > ol {
	list-style-type: lower-greek;
}
ol.outline > ol > ol {
	list-style-type: lower-roman;
}
ol.outline > ol > ol > ol {
	list-style-type: lower-latin;
}

/* Little bonus for striking-through a completed TODO list entry. */
li.done {text-decoration: line-through;}
ul.done > li {text-decoration: line-through;}
ol.done > li {text-decoration: line-through;}
li.done + ul > li {text-decoration: line-through;}
li.done + ol > li {text-decoration: line-through;}

/* TABLES */

/* Default table styling */
table {
	border-collapse: collapse;
	margin-top: var(--size-line-space);
	margin-bottom: var(--size-line-space);
	/* Tables are centered. */
	margin-left: auto;
	margin-right: auto;

	/* Prevent overhang into margin */
	display: block;
	max-width: -moz-fit-content;
	max-width: fit-content;
	overflow-x: auto;
	white-space: nowrap;
}
table.wrap {
	/* This form of table will allow cell text to wrap and place the table at 100% width. */
	max-width: 100%;
	white-space: wrap !important;
}
tbody {
	text-align: left
}
thead {
	text-align: left;
	text-decoration: underline;
}
td, th {
	/* The trick for vertical and horizontal spacing is to keep line height as a component of the table,
	but ultimately make margins even multiples of the line-space. */
	/* Use of a slightly smaller font creates good margins around the rows without requiring badness
	like 1.5 x linespace rows or something. */
	font-size: 14px;
	/* Line height must still be linespace, however, even for the smaller font. 1px is subtracted to account
	for borders. */
	line-height: calc(var(--size-line-space) - 1px);
	/* No vertical padding - that's done exclusively by linespace */
	padding-top: 0;
	padding-bottom: 0;
	border: 1px solid var(--bg-emph);
	
	padding-left: calc(((var(--size-line-space) - 1em) / 2) - 1px);
	padding-right: calc(((var(--size-line-space) - 1em) / 2) - 1px);
}
tr:last-child > td, th {
	/* To account for that one, singular double border, the last line height must drop 2px. */
	line-height: calc(var(--size-line-space) - 2px);;
}
td {font-weight: 300;}
th {font-weight: 500;}

td.right-note {
	border: 1px solid transparent;
	font-style: italic;
	overflow: visible;
}

table + p.caption {
	font-size: 14px;
	line-height: var(--size-line-space);
	font-style: italic;
	text-align: center;
}

/* IMAGES */

img.inline, img.left, img.right {
	margin-top: var(--size-line-space);
	border-radius: 3px;
}
img + p.caption, div.img-row + p.caption {
	/* Captions for images and image rows are currently, but might not always be, identical to those for
	tables. */
	font-size: 14px;
	line-height: var(--size-line-space);
	font-style: italic;
	text-align: center;
}
div.img-row {
	margin-top: var(--size-line-space);
}
div > img {
	border-radius: 3px;
}
/* The img col stays a col, but gets 100% width on mobile. */
div.img-col {
	margin-left: auto;
	margin-right: auto;
	display: flex;
	flex-direction: column;
}
div.img-col > img {
	width: 100%;
	margin-top: 1.5em;
}

/* Most phones have 9/16 or taller ratios. This block is for desktop, the latter for mobile. */
@media (min-aspect-ratio: 9/15) {

	/* All to do with images */
	img.inline {
		/* Place an image inline, between two paragraphs or other elements. Takes up maximum of full width.
		Will be centered. Can specify width=X.*/
		max-width: 100%;
		display: block;
		margin-left: auto; margin-right: auto;
	}
	img.left {
		/* Place an image on the left side of some text, floating. Width should be applied. */
		float: left;
		margin-right: var(--size-line-space);
	}
	img.right {
		/* Place an image on the right side of some text, floating. Width should be applied. */
		float: right;
		margin-left: var(--size-line-space);
	}
	/* The img row becomes a column on mobile. */
	div.img-row {
		display: flex;
		flex-direction: row;
	}
	div.img-row > img {
		flex: 1 1 0;
		width: 0;
		margin-left: var(--size-line-space);
	}
	div.img-row > img:first-child {
		margin-left: 0em;
	}
}
@media (max-aspect-ratio: 9/15) {
	/* When sufficiently aggressive portrait mode (like mobile) images need to just be inline and max width.*/
	img.inline, img.left, img.right {
		/* Place an image inline, between two paragraphs or other elements. Takes up maximum of full width.
		Will be centered. Can specify width=X.*/
		max-width: 100%;
		display: block;
		margin-left: auto; margin-right: auto;
		width: 100% !important;
	}
	div.img-row {
		display: flex;
		flex-direction: column;
	}
	div.img-row > img {
		width: 100%;
		margin-top: 1.5em;
	}
	div.img-row > img:first-child {
		margin-top: 0em;
	}
	div.img-col {
		width: 100% !important;
	}
}


/* VIDEO */
video {
	width: 100%;
	margin-top: var(--size-line-space);
}

/* INNER BLOCK TEXT */

blockquote {
	width: calc(100% - 2 * var(--indent-width));
	margin-left: auto;
	margin-right: auto;
	margin-top: var(--size-line-space);
	margin-bottom: 0;
	quotes: initial;
	
	text-align: left;
	text-justify: none;
}
blockquote.justify {
	text-justify: inter-word;
	text-align: justify;
}
blockquote:before {
	margin-left: -0.6em;
	position: absolute;
	content: open-quote;
}
blockquote:after {
	content: close-quote;
}
blockquote.prose {
	white-space: pre-line;
}
blockquote.prose.strict {
	white-space: pre !important;
}
p.attribution {
	/* The attribution goes right after a blockquote or other inner block text form. It is aligned to the
	right of the inner block of text and only a half-space down. It's entire height is twice the usual line
	height, which positions the attribution text at the center. It is assumed that the attribution will not
	take more than one line.
	*/
	text-align: end;
	font-style: italic;
	margin: 0 auto;
	width: calc(100% - 2 * var(--indent-width));
	line-height: calc(var(--size-line-space) * 2);
}

code, pre.code {
	font-family: "IBMPlexMono";
	background-color: var(--bg-emph);
	font-size: 14px;
	line-height: var(--size-line-space);
	tab-size: 4ch; /* must be in ch for this monospace font */
}

code {
	/* Code is expected to be used inline with text, something like a span. */
	white-space: pre;
	padding: 0.1em;
	border-radius: 3px;
}

pre.code {
	/* Best method for displaying code blocks. */
	padding: calc(var(--size-line-space) / 2);
	margin: calc(var(--size-line-space) / 2) 0;
	border-radius: 0.375em;

	overflow-x: scroll;
}

pre.code + p {
	/* This forces following <p> tags not to have full top-margins to preserve spacing. */
	margin-top: calc(var(--size-line-space) / 2);
}

pre.code.enc {
	/* A pre with the enc class indicates that this code block contains a very long string of encrypted text.
	*/
	overflow-wrap: break-word;
}

pre.transcript {
	font-family: "Vollkorn";
	width: calc(100% - 2 * var(--indent-width));
	margin-left: auto;
	margin-right: auto;
	margin-top: var(--size-line-space);
	margin-bottom: 0;

	white-space: pre-line;

	text-align: left;
	text-justify: none;
}
pre.transcript > sidenote {
	/* Ensure transcripts don't change font. */
	font-family: "IBMPlexSans";
}

raw {
	/* Raw is a convenience object which is used to allow the writer to place or write text with newlines
	directly in one single element, rather than having to properly format <p> tags. It's a rougher form
	of writing well-suited to things like log files.
	*/
	white-space: pre-line;
	margin-top: var(--size-line-space);
	margin-bottom: var(--size-line-space);
}

/* Table of contents */
toc {
	display: inline-block; /* Required to enable margin */
	margin-top: var(--size-line-space);
	counter-reset: toc_l1;
}
toc > li {
	display: block; /* Required to remove ::marker, which is shown by default */
	counter-increment: toc_l1;
	line-height: var(--size-line-space);
	height: var(--size-line-space);
}
toc > li::before {
	font-family: "Arsenal";
	display: inline-block;
	width: calc(3 * var(--indent-width));
	text-align: right;
	padding-right: 0.25em;
	line-height: var(--size-line-space);

	content: counter(toc_l1)":"
}
toc > toc {
	margin-top: 0;
	padding-left: 0;
	counter-reset: toc_l2;
}
toc > toc > li {
	counter-increment: toc_l2;
}
toc > toc > li::before {
	padding-right: 0.75em;
	content: counter(toc_l1)"."counter(toc_l2)":"
}
toc > toc > toc {
	margin-top: 0;
	padding-left: 0;
	counter-reset: toc_l3;
}
toc > toc > toc > li {
	counter-increment: toc_l3;
}
toc > toc > toc > li::before {
	padding-right: 1.25em;
	content: counter(toc_l1)"."counter(toc_l2)"."counter(toc_l3)":"
}
toc > li > a {
	text-decoration: none;
	color: var(--color);
}
toc > li > a::after {
	padding-left: 1ch;
	content: "*";
	text-decoration: underline;
	color: var(--hyperlink);
}
toc > li > a:hover {
	color: var(--hyperlink) !important;
	text-decoration: underline !important;
}


/* MARGINS 
These are going to have to behave rather differently for mobile than for desktop. There will effectively
not be margins on mobile.
*/

sidenote, sidenote.right, sidenote.left {
	/* This enables the sidenote to be placed within text content itself to align with a certain word. */
	display: inline;
	/* Take up full margin space, except for padding of standard line space on left and right. */
	width: calc(((100vw - 100%) / 2) - (2 * var(--size-line-space)));
	max-width: calc(644px / 3);

	/* Set the font of sidenotes */
	font-size: 14px;
	text-justify: none;
	line-height: 150%;

	/* Somewhat subtle colors by default. Can be made same color as text with 'loud' */
	color: var(--text-unemph);
	border-color: var(--text-unemph);
}
sidenote, sidenote.right {
	/* Float prevents this object from changing vertical / horizontal layout of main text column. */
	float: right;
	/* Making the right margin -width will position this floating element just to the right of the body text.
	Subtracting more shifts it further. The below equation is miserable, but works. The min() is neccessary
	to choose correct width. */
	margin-right: calc(
		-1 * var(--size-line-space) - 
		min(
			(((100vw - 100%) / 2) - (2 * var(--size-line-space))),
			(644px / 3)
		)
	);
	/* Text-align is side-dependent */
	text-align: left;
}
sidenote.left {
	/* This class is a mirror of the above. All that changes is float to left and margin to -left and
	text-align to right. */
	float: left;
	margin-left: calc(
		-1 * var(--size-line-space) - 
		min(
			(((100vw - 100%) / 2) - (2 * var(--size-line-space))),
			(644px / 3)
		)
	);
	text-align: right;
}
sidenote.loud {
	/* Makes sidenotes the same color as the main body text. */
	color: var(--text);
	border-color: var(--text);
}
sidenote code {
	/* Give code snippets smaller font and full color for necessary contrast with the emph background. */
	font-size: 12px;
	color: var(--text);
}
sidenote.downlink a {
	text-decoration: none;
	color: var(--color);
}
sidenote.downlink a::before {
	text-decoration: underline;
	color: var(--hyperlink);
	content: "\2930";
	float: left;
	margin-right: 0.25em;
}
sidenote.uplink a {
	text-decoration: none;
	color: var(--color);
}
sidenote.uplink a::before {
	text-decoration: underline;
	color: var(--hyperlink);
	content: "\292F";
	float: right;
	margin-left: 0.25em;
}
sidenote.asterisk > p::before {
	/* Adding an asterisk to a sidenote places a star (*) to the left of the text without breaking alignment.  */
	content: "* ";
	display: block;
	float: left;
	margin-left: -0.75em;
	line-height: var(--size-line-space);
	align-content: center;
}

/* Override for mobile for sidenotes */
@media (max-aspect-ratio: 9/15) {
	sidenote {
		/* Sidenotes are displayed vertically inline with the textcol on mobile as there simply is not
		sufficient space to display them on either side of the screen. Use of !important here is ugly
		but necessary for brevity.
		*/
		float: none !important;
		display: inherit !important;
		
		line-height: var(--size-line-space) !important; /* Ensure vertical cadence is not broken. */

		/* Stylish line to the left of interior text */
		border-left: 1px solid var(--text);
		padding: 0 calc(var(--indent-width) - 1px);
		margin-left: 0 !important;
		margin-right: 0 !important;

		/* Reset width. */
		width: auto !important;
		max-width: none !important;

		/* Always left-align on mobile. Keep the non-justification for distinction. */
		text-align: left !important;
	}
	sidenote.uplink a::before {
		float: left !important;
		margin-right: 0.25em !important;
		margin-left: 0px !important;
	}
	p > sidenote {
		margin-top: var(--size-line-space);
		margin-bottom: var(--size-line-space);
	}
}

/* SPECIAL LINKS */

a.cl, a.downlink, a.uplink, a.cl, a.crosslink, a.ref {
	text-decoration: none;
	font-style: italic;
	color: var(--color);
}
a.downlink::after, a.uplink::after {
	text-decoration: underline;
	color: var(--hyperlink);
	content: "[\2930]";
	margin-left: 0.125em;
	font-style: normal;
}
a.downlink::after {
	content: "[\2930]";
}
a.uplink::after {
	content: "[\292F]";
}
a.cl::after, a.crosslink::after, a.cl::after {
	text-decoration: underline;
	color: var(--hyperlink);
	content: "\21B4";
	margin-left: 0.125em;
	font-style: normal;
}
a.ref::after {
	text-decoration: underline;
	color: var(--hyperlink);
	content: "*";
	margin-left: 0.125em;
	font-style: normal;
}
a.cl:hover, a.downlink:hover, a.uplink:hover, a.crosslink:hover, a.cl:hover, a.ref:hover, sidenote.uplink a:hover, sidenote a:hover {
	color: var(--hyperlink) !important;
	text-decoration: underline !important;
}
/* An a tag with absolutely no default styling. Indistinguishable from text except for cursor behavior. */
a.stripped {
	text-decoration: none;
	color: var(--color);
	cursor: pointer;
}

maxim {
	/* Maxims break the default flow of the page to draw attention to some short statement that's
	powerful and important.
	*/
	display: inline-block;
	font-family: "GrenzeGotisch";
	font-size: var(--size-line-space);
	line-height: calc(var(--size-line-space) * 1.5);
	margin: calc((3 * var(--size-line-space) - var(--size-line-space) * 1.5) / 2) 0;
	border-left: 5px solid var(--red);
	padding-left:  calc(var(--indent-width) - 5px);
}

note {
	/* Full width element. Has line-space margin above and padding equal (plus border) to another line-space.
	*/
	display: inline-block;
	margin-top: var(--size-line-space);
	border: 1px solid var(--red);
	padding: calc(var(--size-line-space) / 2 - 1px);
	box-sizing: border-box;
	width: calc(100%);
}
note + note {
	/* Enables pretty note stacking. */
	margin-top: 0;
	border-top: none;
}
note > p {
	margin-top: 0;
}

/* Collapsible Menus */

details {
	/* Excellent default way to make a collapsible menu. Just place regular inline HTML inside of the
	details tag below a <summary> tag. */
	margin-top: var(--size-line-space);
	cursor: pointer;
}

details > summary {
	list-style-type: "\2192";
}
details[open] > summary {
	list-style-type: "\2193";
}

/* Contextual aids (extra titles, dinkuses, &c) */
dinkus {
	display: inline-block;
	height: var(--size-line-space);

	width: 100%;
	text-align: center;
}
dinkus::before {
	/*content: "&lowast; &emsp; &lowast; &emsp; &lowast;"*/
	content: "\204E\2003\204E\2003\204E"
}

iframe.youtube {
	width: 100%;
	aspect-ratio: 16 / 9;
	margin-top: var(--size-line-space);
}

/* ###################################
   ######## WORKHORSE CLASSES ########
   ###################################
*/

/* To be added as needed */


.text {
	/* This class gives the contained text the basic properties of standard, bulk-readable text on the site. */
	font-family: "IBMPlexSans";
	font-weight: 300;
	line-height: var(--size-line-space);
}
.text-mono {
	/* Gives contained text basic properties of standard, bulk-readable text but in standard monospace font. */
	font-family: "IBMPlexMono";
	font-weight: 300;
	font-size: 14px;
	line-height: var(--size-line-space);
}
.text-blackletter {
	/* Casts into the 'blackletter' font I've chosen. */
	font-family: "GrenzeGotisch";
	font-weight: 300;
	line-height: 150%;
}
.centered {
	/* Will center any standard element within the flow of a manuscript */
	width: 100%; text-align: center;
}