@charset "UTF-8";

:root {
	/* Primitive palette */
	--white: #ffffff;
	--black: #000000;
	--transparent: #ffffff00;
	--ink: #2a2a2a;
	--ink-muted: #555555;
	--gray: #888888;
	--red: #850000;
	--red-bright: #d90115;
	--blue: #1313ff;
	--blue-bright: #1289ff;
	--orange: #ffae00;
	--purple: #bc3cc1;
	--purple-bright: #f23cff;

	/* Font families and weights */
	--serif-defaults: Georgia, serif;
	--sans-serif-defaults: Calibri, sans-serif;
	--mono-defaults: Menlo, Courier, monospace;
	--serif-font: "Lora V", var(--serif-defaults);
	--sans-serif-font: "Fira Sans", var(--sans-serif-defaults);
	--alt-sans-serif-font: "IBM Plex Sans", var(--sans-serif-defaults);
	--condensed-font: "Fira Sans Condensed", var(--sans-serif-defaults);
	--mono-font: "Fira Code", var(--mono-defaults);
	--font-weight-light: 300;
	--font-weight-main: 400;
	--font-weight-semibold: 500;
	--font-weight-bold: 600;

	/* Semantic typography */
	--primary-font: var(--serif-font);
	--secondary-font: var(--sans-serif-font);
	--sans-font: var(--sans-serif-font);
	--code-font: var(--mono-font);
	--table-font: var(--secondary-font);
	--main-line-height: 1.6em;
	--text-color: var(--ink);
	--link-color: var(--blue);
	--link-hover-color: var(--blue-bright);
	--highlight-color: var(--red);

	/* Structural tokens, defined here so style loads first */
	--header-height: 2em;
	--header-font-size: 1.2rem;
	--content-width: var(--bodycol-width, 50%);
	--content-left: var(--left-col-width, 25%);
	--content-right: var(--right-col-width, 25%);
	--toc-width: 14%;
	--toc-width-wide: 18%;
	--toc-row-height: 1.5em;
	--toc-indent-step: 4%;
	--sidenote-width: 17vw;
	--sidenote-offset: -25vw;
	--sidenote-wide-width: 25vw;
	--dropdown-width: calc(100% + 2px);
	--dropdown-wide-width: 250%;
	--tooltip-width: 240px;

	/* Header */
	--header-font: var(--primary-font);
	--header-left-font: var(--serif-font);
	--header-background-color: #2c2c2c;
	--header-background-image: none;
	--header-color: var(--white);
	--header-text-shadow: none;
	--header-mid-text-shadow: 1px 1px 1px #0008;
	--header-link-color: var(--purple);
	--header-link-hover-color: var(--purple-bright);
	--header-link-background-color: var(--header-background-color);
	--header-block-background: rgba(255, 255, 255, 0.4);
	--header-block-hover-background: rgba(255, 255, 255, 0.6666666667);
	--header-block-hover-color: var(--red-bright);
	--header-border: 1px solid #00000033;
	--title-font: var(--serif-font);
	--title-text-shadow: 1px 1px 1px rgba(255, 0, 170, 0.3333333333);
	--title-hover-text-shadow: -4px 0 5px #f003, -2px 0 1px #f008, -1px 0 1px #0f06, 1px 0 1px #0f06, 2px 0 1px #00f8, 4px 0 5px #00f8;

	/* TOC */
	--toc-font: var(--alt-sans-serif-font);
	--toc-font-size: 1.4rem;
	--toc-title-size: 0.8079rem;
	--toc-h1-size: 1.2em;
	--toc-h2-size: 1.1em;
	--toc-h3-size: 1em;
	--toc-h4-size: 1em;
	--toc-h1-link-size: 1em;
	--toc-h2-link-size: 0.9em;
	--toc-h3-link-size: 0.8em;
	--toc-h4-link-size: 0.7em;
	--toc-hover-background: rgba(0, 0, 0, 0.0666666667);
	--toc-current-hover-background: rgba(255, 0, 0, 0.1333333333);
	--toc-current-color: var(--red-bright);

	/* Content */
	--quote-font: var(--serif-font);
	--block-font: var(--primary-font);
	--code-color: var(--red-bright);
	--code-border: 1px solid rgba(0, 0, 0, 0.0784313725);
	--h0-color: var(--ink);
	--h0-text-shadow: 0.05em 0.05em 1px #af9f5d00;
	--h0-text-transform: none;
	--h0-letter-spacing: 0em;
	--h1-size: 3.4rem;
	--h2-size: 2.3rem;
	--h3-size: 1.9rem;
	--h4-size: 1.5rem;
	--h5-size: 1.2rem;
	--h6-size: 1rem;

	/* Text features */
	--footnote-number-color: var(--red);
	--footnote-B-number-color: var(--orange);
	--sidenote-background-color: var(--white);
	--sidenote-color: #5b5b5b;
	--sidenote-hover-color: #555555;
	--sidenote-number-color: #ff3ce8;
	--sidenote-link-color: #7788dd;
	--contextual-color: #229944;
	--contextual-hover-color: #115511;
	--context-background: var(--white);
	--context-color: #337733;
	--context-border: 1px solid #227722;
	--tooltip-background: var(--ink);
	--tooltip-color: var(--white);
	--debug-panel-background: linear-gradient(315deg, rgba(255, 255, 255, 0.938), rgba(231, 231, 231, 0.867));

	/* Compatibility aliases */
	--light-black: var(--ink);
	--dark-gray: var(--ink-muted);
	--canon-red: var(--red);
	--sweet-red: var(--red-bright);
	--dark-red: var(--red);
	--canon-blue: var(--blue);
	--sweet-blue: var(--blue-bright);
	--mid-purple: var(--purple);
	--bright-purple: var(--purple-bright);
	--card-font: var(--serif-font);
}

body {
	font-size: 1rem;
	font-family: var(--primary-font);
	background: var(--white);
	color: var(--text-color);
	counter-reset: sidenote-counter level1 level2 level3;
}

:where(a) {
	color: var(--link-color);
	text-decoration: none;

	&.plain {
		color: unset;
	}

	&:hover {
		color: var(--link-hover-color);
		text-decoration: underline;
	}
}

:where(b, strong) {
	font-weight: var(--font-weight-bold);
}

em {
	text-shadow: 0 0 1px rgba(50, 50, 50, 0.3666666667);
}

:where(sub, sup) {
	position: relative;
	font-size: 0.75em;
	line-height: 0;
	vertical-align: baseline;
}
sub { bottom: -0.25em; }
sup { top: -0.5em; }

code {
	font-family: var(--code-font);
	font-size: 1rem;
	line-height: 1.42;
	color: var(--code-color);
	border: var(--code-border);
	border-radius: 5px;
	padding-inline: 2px;
}

pre {
	white-space: pre-wrap;
}

img, svg {
	vertical-align: middle;
}

:where(p, ol, ul, dl, body > div.paragraph, body > blockquote) {
	font-size: 1em;
	line-height: var(--main-line-height);
}

figure, figcaption {
	text-align: center;
}

/* Header */
:where(#header-left, #header-mid, #header-right) {
	background-color: var(--header-background-color);
	background-image: var(--header-background-image);
	color: var(--header-color);
	text-shadow: var(--header-text-shadow);
	font-family: var(--header-font);
	font-weight: var(--font-weight-main);
	font-size: var(--header-font-size);
	border: none;

	& .links-dropdown {
		background-color: var(--header-background-color);
		text-shadow: none;
	}
}

#header-mid {
	text-shadow: var(--header-mid-text-shadow);
}

#header-right {
	& .header-block {
		background-color: var(--header-background-color);
	}

	& .contextual {
		color: #75bf75;
	}
}

.header-column {
	& > a:hover {
		text-decoration: none;
	}

	& > a > .header-block,
	& > .header-block {
		background-color: var(--header-block-background);
		font-weight: var(--font-weight-light);
		border-left: var(--header-border);
		transition: color 0.15s ease-out, text-shadow 0.2s ease-out, background-color 0.15s ease-out;

		&:hover {
			color: var(--custom-hover-color, var(--header-block-hover-color));
			background-color: var(--header-block-hover-background);
			font-weight: var(--font-weight-main);
			text-decoration: none;
			text-shadow: none;
		}

		&:not(.links-dropdown) {
			overflow: hidden;
			white-space: nowrap;
			font-size: clamp(0.6em, 0.25em + 0.9vw, 1em);
			font-weight: var(--font-weight-main);
			background-color: transparent;
		}
	}
}

#header-title {
	text-shadow: var(--title-text-shadow);
	font-family: var(--title-font);
	font-weight: var(--font-weight-main);
	letter-spacing: 1px;
	font-size: clamp(1rem, 0.25rem + 1.5vw, 1.7em);

	&:hover {
		color: rgba(255, 255, 255, 0.8666666667);
		text-shadow: var(--title-hover-text-shadow);
	}
}

/* Dropdowns */
.links-dropdown {
	color: var(--header-link-color);
	font-weight: var(--font-weight-main);

	&:hover {
		color: var(--header-link-hover-color);
		background-color: var(--header-link-background-color);
	}

	& .links-dropdown-label {
		background-color: var(--header-background-color);
		color: var(--header-link-color);
		line-height: var(--header-height);
		text-align: center;
		text-shadow: none;

		&:hover {
			color: var(--header-link-hover-color);
		}
	}

	& .links-dropdown-content {
		background-color: rgba(51, 51, 51, 0.9333333333);
		color: var(--white);
		font-size: 1rem;
		text-shadow: none;
		border-bottom-right-radius: 3px;
		border-bottom-left-radius: 3px;
		transition: transform 0s ease-in-out, z-index 1s;

		&:not(.text-dropdown-content) {
			border: 2px solid rgb(54, 54, 54);

			& a {
				color: var(--white);
				border-bottom: 1px solid rgba(0, 0, 0, 0.2666666667);
				transition: color 0.15s ease-in-out;

				&:hover {
					color: red;
					text-decoration: none;
				}
			}
		}

		&.text-dropdown-content {
			border: 1.5px solid #666666;

			& div {
				background-color: #f5f5f5;
				color: #444444;
				border-bottom: 1px solid rgba(0, 0, 0, 0.1333333333);
				transition: border-bottom 0.15s ease-in-out, background-color 0.15s ease-in-out;

				&:hover {
					background-color: var(--white);
					border-bottom: none;
				}
			}
		}
	}
}

/* TOC */
#tocdiv {
	& div a {
		color: inherit;
	}

	& .h0 {
		font-size: 1.1vw;
	}
}

#toccont {
	font-family: var(--toc-font);
	font-size: 1rem;
	font-weight: var(--font-weight-main);
	background-color: #fffdfd;
	border-bottom: 1px solid #333333;
}

#toc {
	font-family: var(--toc-font);
	font-size: var(--toc-font-size);

	& > div {
		letter-spacing: -0.03em;
		border-bottom: none;
		color: var(--toc-row-color, var(--ink));

		&:not(:hover) {
			text-shadow: none;
		}

		&:not(.currentloc):hover {
			background-color: var(--toc-hover-background);
		}

		&.currentloc:hover {
			background-color: var(--toc-current-hover-background);
		}

		& a:hover {
			text-decoration: none;
		}

		&.h0 {
			font-size: var(--toc-title-size);
			border-bottom: 1px solid gray;
		}

		&.h1 {
			--toc-row-color: var(--black);
			--toc-link-size: var(--toc-h1-link-size);
			font-size: var(--toc-h1-size);
		}

		&.h2 {
			--toc-row-color: #111111;
			--toc-link-size: var(--toc-h2-link-size);
			font-size: var(--toc-h2-size);
		}

		&.h3 {
			--toc-row-color: #333333;
			--toc-link-size: var(--toc-h3-link-size);
			font-size: var(--toc-h3-size);
		}

		&.h4 {
			--toc-row-color: #666666;
			--toc-link-size: var(--toc-h4-link-size);
			font-size: var(--toc-h4-size);
		}

		& > .toclinkdiv {
			font-size: var(--toc-link-size, 1em);
		}
	}
}

.currentloc {
	& > .toclinkdiv {
		color: var(--toc-current-color);

		&::before {
			content: "\25B6";  /* ▶ */
			display: none;
			position: absolute;
			width: 1em;
			margin-left: -1.2em;
			margin-bottom: 0.2em;
			color: var(--highlight-color);
			font-style: normal;
			font-size: 1em;
			font-weight: var(--font-weight-bold);
		}
	}

	&.h0 > .toclinkdiv::before {
		content: none;
	}
}

/* Debug panel */
#debugPanel {
	opacity: 0.001;
	transition: opacity 0.2s ease-in-out;

	&:hover {
		opacity: 1;
	}

	& > div {
		color: var(--black);
		font-family: var(--secondary-font);
		font-weight: var(--font-weight-light);
		font-size: 1.4em;
		text-shadow: 2px 2px 2px rgba(51, 51, 51, 0.2666666667);
		background-image: var(--debug-panel-background);
		border-top: 1px solid var(--ink-muted);
		border-left: 1px solid var(--gray);

		& > :where(:last-child, :empty) {
			border-right: none;
		}
	}
}

/* Blocks and headings */
blockquote {
	font-family: var(--quote-font);
	font-style: italic;
	font-weight: var(--font-weight-light);
	color: var(--ink);
	border-left: 0.25rem solid var(--black);
	padding-left: 1.5rem;
	padding-right: 4rem;
	text-shadow: 1px 1px 0 rgba(85, 85, 85, 0.2);

	& > hl {
		color: var(--red);
		text-shadow: 1px 1px 1px rgba(150, 0, 0, 0.15);
		font-weight: var(--font-weight-main);
	}
}

body > blockquote {
	font-size: 1.2rem;
	line-height: 1.7rem;
}

blockquotesource {
	font-family: var(--secondary-font);
	color: var(--gray);
	font-size: 0.9em;
	font-weight: var(--font-weight-light);
	line-height: 1.4em;
	padding-left: 1rem;

	& > hl {
		font-style: normal;
		color: var(--red);
		text-shadow: 1px 1px 1px rgba(85, 85, 85, 0.3);
	}
}

block {
	font-family: var(--block-font);
	font-size: 1.05em;
	line-height: 1.4em;
	border: 0.2rem solid var(--red);
	border-radius: 3px;
	padding: 1rem;
}

:where(h0, h1, h2, h3, h4, h5, h6) {
	font-family: var(--heading-font, var(--primary-font));
	font-size: var(--heading-size, 1rem);
	font-weight: var(--heading-weight, var(--font-weight-main));
	font-style: var(--heading-style, normal);
	color: var(--heading-color, var(--h0-color));
	text-transform: var(--h0-text-transform);
	letter-spacing: var(--h0-letter-spacing);
	border-bottom: var(--heading-border, 1px solid #bbbbbb);
	text-shadow: var(--heading-shadow, none);
}

h0 {
	--heading-font: var(--title-font);
	--heading-size: 4rem;
	--heading-weight: 500;
	--heading-border: none;
	--heading-shadow: var(--h0-text-shadow);
}

h1 {
	--heading-size: var(--h1-size);
	--heading-weight: 400;
	--heading-border: 3px solid var(--black);
	--heading-shadow: 1px 1px 0 hsl(0deg, 0%, 80%);
}

h2 {
	--heading-size: var(--h2-size);
	--heading-weight: 400;
	background-color: #fefefe;
	text-shadow: 0.1em 0.1em 1px rgba(159, 159, 93, 0.0666666667);
}

h3 {
	--heading-size: var(--h3-size);
	--heading-weight: var(--font-weight-semibold);
	--heading-color: #333333;
	background-color: var(--white);
}

h4 {
	--heading-size: var(--h4-size);
	--heading-weight: var(--font-weight-semibold);
	--heading-style: italic;
	--heading-border: none;
	line-height: 77%;
}

h5 { --heading-size: var(--h5-size); }
h6 { --heading-size: var(--h6-size); }

/* Contextual inline notes */
.contextual {
	font-weight: var(--font-weight-semibold);
	color: var(--contextual-color);
	outline: none;
	border-radius: 8px;
	transition: color 0.1s ease-out, text-shadow 0.1s ease-out;

	& > em {
		font-weight: var(--font-weight-main);
	}

	& > b {
		font-weight: var(--font-weight-bold);
	}

	& > .context {
		background-color: var(--context-background);
		color: var(--context-color);
		border: var(--context-border);
		border-radius: 5px;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s ease-in-out, visibility 0.3s;
		font-family: var(--secondary-font);
		font-size: 0.8em;
		text-shadow: none;
	}

	&:hover {
		color: var(--contextual-hover-color);
		text-shadow: 0 0 1px rgb(255, 255, 0);

		& > :where(em, b) {
			color: var(--contextual-hover-color);
			text-shadow: 0 0 1px rgb(255, 255, 0);
		}

		& > .context {
			display: block;
			opacity: 1;
			visibility: visible;
			transition: opacity 0.15s ease-in-out;
		}
	}
}

.hovertiptext .contextual {
	color: #ccffcc;
	text-shadow: none;

	& > :where(em, b) {
		color: #ccffcc;
		text-shadow: none;
	}
}

/* Hovertips */
.hovertip {
	border-bottom: 2px dotted red;
	transition: text-shadow 0.15s ease-in-out, background-color 0.3s ease-in-out;

	& .hovertiptext {
		color: var(--tooltip-color);
		font-size: 0.9em;
		line-height: 1.3em;
		background-color: var(--tooltip-background);
		border: 1px solid var(--black);
		border-radius: 6px;
		font-weight: var(--font-weight-semibold);
		opacity: 0.01;
		transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out, opacity 0.15s ease-in-out, visibility 0.3s;

		& a {
			color: #9999ff;

			&:hover {
				color: #bbbbff;
			}
		}
	}

	&:hover .hovertiptext,
	& .hovertiptext:hover {
		opacity: 1;
	}
}

/* Footnotes */
span[class^=footnote] {
	display: none;
}

:where(.fnnotenum, .fnExtranotenum, .fnrefnum, .fnExtrarefnum, .fnrefnum > a, .fnExtrarefnum > a) {
	cursor: pointer;
	color: var(--footnote-number-color);
}

:where(.fnBnotenum, .fnBrefnum, .fnBrefnum > a) {
	cursor: pointer;
	color: var(--footnote-B-number-color);
	font-weight: var(--font-weight-bold);
}

:where(.fnnote, .fnExtranote, .fnBnote, .fnnotenum, .fnExtranotenum, .fnBnotenum) {
	font-size: 1em;
}

.fnnotenum {
	display: inline-block;
	font-family: var(--code-font);
	text-shadow: 1px 1px 0 rgba(131, 138, 116, 0.2352941176);
	opacity: 0.9;
	padding-right: 0.5em;

	& .fnnotenumup {
		opacity: 0.7;
		font-family: var(--secondary-font);
		display: none;
	}
}

:where(#Footnotes, #FootnotesExtra) > p:not(:first-child) {
	border-top: 1px solid rgba(0, 0, 0, 0.2666666667);
}

/* Sidenotes */
:where(.sn-counter, .sn-note-counter) {
	font-family: var(--code-font);
	transition: color 0.2s ease-in-out, text-shadow 0.2s ease-in-out, font-size 0.2s ease-in-out, font-weight 0.05s ease-in-out, line-height 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

.sn-counter {
	counter-increment: sidenote-counter;
	color: var(--sidenote-number-color);

	&::before {
		content: counter(sidenote-counter, lower-alpha);
		font-size: 0.8em;
	}

	&.highlighted {
		text-shadow: 0 0 5px yellow, 0 0 10px yellow, 0 0 1px yellow, 0 0 20px yellow;
		font-size: 100%;
		font-weight: var(--font-weight-main);
	}
}

:where(.sidenote, .sidenote2) {
	background-color: var(--sidenote-background-color);
	color: var(--sidenote-color);
	font-family: var(--secondary-font);
	font-size: 0.9rem;
	font-style: initial;
	font-weight: initial;
	line-height: 1.35em;
	text-shadow: initial;
	border: none;
	border-radius: 5px 0 0 5px;
	box-shadow: none;
	transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.2s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.2s ease-out, background-color 0.2s ease-out;

	& a {
		color: var(--sidenote-link-color);
	}

	&:is(:hover, .highlighted) {
		transform: translateY(-3px);
		box-shadow: 1.3px 3px 4.6px #aaaaaa;
		color: var(--sidenote-hover-color);
		background-color: #fffff5;
	}

	& :where(.context, .hovertip .hovertiptext) {
		left: auto;
		right: 0;
	}

	& .contextual {
		font-size: 1em;
	}

	& .sn-note-counter {
		position: relative;
		display: inline-block;
		left: 0;
		top: 0.25em;
		padding-right: 0.25em;
		color: var(--sidenote-number-color);
		font-size: 110%;
		opacity: 0.7;

		&::before {
			content: counter(sidenote-counter, lower-alpha) " ";
			vertical-align: super;
		}
	}

	&.highlighted > .sn-note-counter {
		font-weight: var(--font-weight-bold);
	}
}

mjx-math {
	font-size: 90% !important;
}