/*
This CSS file provides general typographic rules for all pages on the site. Among other things, it seeks to define:
+ Consistent colors for background, text, etc. for light and dark modes.
+ Styling for common elements with consistent and typographically sound text and margins.
+ Addition and subtraction of various quirks from basic elements to suit my tastes.

Josh Reed 2024

2025 - OFFICIALLY MOTHBALLED!
*/

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

:root {
	--bg: #f8f7f2;
	--bg-emph: #e7e6e0;
	--text: #333333;
	--red: #984B43;
	--yellow: #EAC67A;
}

.dark-mode {
	--bg: #1f1f1f;
	--bg-emph: #383838;
	--text: #FAFAFA;
}

/* ###################################
   ######## 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: 16px;
}

h1 {
	/* Remember, margins and line height need to be multiples of base line height, which is 1.5 "base" em */
	font-size: 2em;
	line-height: 1.5em;
	margin-top: 1.5em; margin-bottom: 1.5em;
}
h2 {
	/* Remember, margins and line height need to be multiples of base line height, which is 1.5 "base" em */
	font-size: 1.5em;
	line-height: 1em;
	margin-top: 1em; margin-bottom: 1em;
}
h3 {
	/* Same size as base level, but more weight and underlined. */
	font-weight: 500;
	line-height: 150%;
	text-decoration: underline;
}
h4 {
	/* Merely underlined, but preferable to <p><u> as it will have correct connotation as a header. */
	margin-top: 1.5em; margin-bottom: 1.5em;
	text-decoration: underline;
	font-weight: 300;
	line-height: 150%;
}
p {
	margin-top: 1.5em; margin-bottom: 1.5em;
}
/*p + p { Disabled for now - this will indent paragraphs that are adjacent.
	text-indent: 1em;
}*/


ul {
	list-style-type: "+  ";
	padding-left: 2em;
	margin-top: 1.5em; margin-bottom: 1.5em;
}
ol {
	padding-left: 2em;
	margin-top: 1.5em; margin-bottom: 1.5em;
}
/* Lists containing lists don't get margins that break the flow */
ul > ul {
	margin-top: 0em;
	margin-bottom: 0em;
}
ul > ol {
	margin-top: 0em;
	margin-bottom: 0em;
}
ol > ol {
	margin-top: 0em;
	margin-bottom: 0em;
}
ol > ul {
	margin-top: 0em;
	margin-bottom: 0em;
}
li > ul {
	margin-top: 0em;
	margin-bottom: 0em;
}
li > ol {
	margin-top: 0em;
	margin-bottom: 0em;
}
/* Add no-indent class to lists that takes the indent down as much as possible. */
ol.no-indent {
	padding-left: 1.2em;
}
ul.no-indent {
	padding-left: 1.2em;
}
/* Special class for ordered list that indicates children follow successive differing criteria, like
an outline. */
ol.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;
}

dd {
	margin-left: 1.5em;
}


.done {
	text-decoration: line-through;
}

/* Default table styling */
table {
	border-collapse: collapse;
	margin-top: 1.5em;
	margin-bottom: 1.5em;
}
tbody {
	text-align: left
}
thead {
	text-align: left;
	text-decoration: underline;
}
td, th {
	border: 1px solid var(--bg-emph);
	padding: 0.25em;
}


/* Setup our 'code block' classes. */
pre {
	padding: 0.75em;
	border-radius: 0.375em;
	background-color: var(--bg-emph);
}
code {
	font-family: "IBMPlexMono";
	background-color: var(--bg-emph);
	white-space: pre;
	font-size: 0.875em;
	padding: 0.214em;
	border-radius: 3px;
}
enc {
	font-family: "IBMPlexMono";
	overflow-wrap: break-word;
	
	background-color: var(--bg-emph);
	font-size: 0.875em;
	padding: 0.214em;
	border-radius: 3px;
	display: block;
}


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;
}


blockquote {
	quotes: initial;
}
blockquote:before {
	margin-left: -0.6em;
	position: absolute;
	content: open-quote;
}
blockquote:after {
	content: close-quote;
}
.attribution {
	text-align: end;
	font-style: italic;
}

/* The 'transcript' class should apply to a <div> and gives it transcripted text vibes */
.transcript {
	padding: 0.75em;
	border-radius: 0.375em;
	background-color: var(--bg-emph);
	margin-top: 1.5em;
	margin-bottom: 1.5em;
	font-family: "Vollkorn";
}
/* 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;
}
div.img-col > img:first-child {
	margin-top: 0em;
}

/* 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: 0 auto;
	}
	img.left {
		/* Place an image on the left side of some text, floating. Width should be applied. Transfers to*/
		float: left;
		margin-right: 1.5em;
		margin-bottom: 1.5em;
	}
	img.right {
		/* Place an image on the right side of some text, floating. Width should be applied. */
		float: right;
		margin-left: 1.5em;
		margin-bottom: 1.5em;
	}
	/* 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: 1.5em;
	}
	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 {
		/* 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: 0 auto;
		width: 100% !important;
	}
	img.left {
		max-width: 100%;
		display: block;
		margin: 0 auto;
		width: 100% !important;
	}
	img.right {
		max-width: 100%;
		display: block;
		margin: 0 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%;
	}
}

button {
	all: unset;
	/* A nice re-skin of the classic button. */
	font-family: "IBMPlexSans";
	font-weight: 300;
	line-height: 150%;
	font-size: 1em;

	border: 1px solid var(--text);
	height: 1.5em;
	padding-left: 0.3em;
	padding-right: 0.3em;
	border-radius: 5px;

	display: flex; justify-content: center; align-items: center;

	cursor: pointer;
	box-sizing: border-box;

	background-color: var(--bg-emph);
}
button:hover {
	box-shadow: 1px 1px var(--text);
}


/* ##################################
   ######## CRITICAL CLASSES ########
   ##################################

   These are the classes that will be used very frequently.
*/

/* For a slightly larger text size, just change the base font-size. Preferably this should be done to the whole
page so that typographic rules still hold true. */
.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: 150%;
}
.text-mono {
	/* Gives contained text basic properties of standard, bulk-readable text but in standard monospace font. */
	font-family: "IBMPlexMono";
	font-weight: 300;
	line-height: 150%;
}
.text-blackletter {
	/* Casts into the 'blackletter' font I've chosen. */
	font-family: "GrenzeGotisch";
	font-weight: 300;
	line-height: 150%;
}
.text-margins {
	/* The standard above-and-below margins that separate paragraphs of bulk-text from each other and from
	things like images. */
	margin-top: 1.5em; margin-bottom: 1.5em;
}
.adjacent {
	/* Adding this class to anything will cause it and the next (presumably directly below) element to become
	vertically directly adjacent. */
	margin-bottom: 0;
}
.adjacent + * {
	margin-top: 0;
}
.centered {
	/* Will center any standard element within the flow of a manuscript */
	width: 100%; text-align: center;
}
.caption {
	/* Expected class for <p> tags under images. Centeres and italicizes */
	width: 100%; text-align: center;
	font-style: italic;
}
/*
A 'manuscript' is a long, single-column tract of page that primarily holds bulk text for reading. It may also
contain images, notes, etc. It ensures that contained text views well on both desktop and mobile and that
proper overall typographic rules apply to things like column-width and margins to edge of page.
*/
.manuscript-outer {
	padding-left: 5vw;
	padding-right: 5vw;
}
.manuscript-inner {
	max-width: 100ch;
	margin-inline-start: auto;
	margin-inline-end: auto;
	padding-bottom: 3em;
}



/* ########################
   ######## ADDONS ########
   ########################

   Some less critical but fun little addon elements and classes.
*/
maxim {
	font-family: "GrenzeGotisch";
	font-size: 150%;
	border-left: 5px solid var(--red);
	padding-left: 1em;
}
note {
	/* Specifically, margins are NOT included here. */
	padding: 0.5em;
	padding-left: 1em; padding-right: 1em;
	display: block;
	border: 1px solid var(--red);
}
note + note {
	margin-top: 0;
	border-top: none;
}
.book-ref {
	/* Signifies an <a>-style reference, but to a physical book (e.g. no hyperlink). */
	color: var(--red);
	text-decoration: underline;
}
/* 
The partition is a region of the page that has borders, margins, and headers that sets it apart from the rest of
the flow. By default it will take the full width of the page, but it can be given a width and even a float value.

It's intended to be part of the regular manuscript general flow.
*/
partition {
	border: 1px solid grey;
	border-radius: 0.5em;
	padding: 1em;
	display: block;
	position: relative;

	margin-top: 1.5em; margin-bottom: 1.5em;

	& ul {
		margin: 0;
	}
	& ol {
		margin: 0;
	}
	& h1 {
		background-color: var(--bg);
		padding-left: 0.5em; padding-right: 0.5em;
		border: 1px solid grey;
		border-radius: 0.25em;

		font-weight: 500;
		font-size: 1em;

		margin-top: 0;
		margin-bottom: 0;

		position: absolute;
		left: 1em;
		top: -1em;
		width: fit-content;
	}
	& * {
		margin-top: 0;
	}
	& *:last-child {
		margin-bottom: 0;
	}
}
/* Used to balance the column layouts below. */
partition.counterweight {
	border: none;
}

/*
A class which can be applied to a div that contains partitions, in order to ensure they all fit their
content and are the same width.
*/
.partition-col {
	width: fit-content;
}
.partition-col > partition {
	width: 100%;
}
/*
This containing class should be used when it is desired that partitions stack in two columns side by side
for desktop, but only one column (of course) on mobile.
*/
.partition-stack-two {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	width: 100%;
}
.partition-stack-two > partition {
	width: calc(50% - 1em);
	box-sizing: border-box;
	margin-left: 0.5em;
	margin-right: 0.5em;
}

/* Most phones have 9/16 or taller ratios. This block is for desktop, the latter for mobile. */
@media (min-aspect-ratio: 9/15) {
	.partition-stack-two {
		flex-wrap: wrap;
	}
}
@media (max-aspect-ratio: 9/15) {
	.partition-stack-two {
		flex-wrap: nowrap !important;
		flex-direction: column;
		align-items: center;
	}
	.partition-stack-two > partition {
		width: calc(100% - 1em);
	}
}

div.title-centered {
	& h1 {
		width: 100%; text-align: center;
		text-decoration: underline;
		margin-bottom: 0;
	}
	& p {
		margin-top: 0;
		width: 100%; text-align: center;
		font-style: italic;
	}
}

/* #############################
   ######## ORG CLASSES ########
   #############################

   These are flex-based organizational classes that apply to a div. Brevity is the key.
*/

.row {
	display: flex; flex-direction: row;
}
.col {
	display: flex; flex-direction: column;
}
.wraplist{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
}
.wraplist > * {
	margin-left: 0.5em; margin-right: 0.5em;
}