/*

Screen width transition sizes:

- 640px for small screens
- 932px for medium screens
- 1200px for medium-large screens

*/

@font-face {
	font-family: "Source Serif 4";
	src: url("../fonts/SourceSerif4.ttf") format(truetype);
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Source Serif 4";
	src: url("../fonts/SourceSerif4-Italic.ttf") format(truetype);
	font-weight: normal;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Source Serif 4";
	src: url("../fonts/SourceSerif4.ttf") format(truetype);
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Source Serif 4";
	src: url("../fonts/SourceSerif4-Italic.ttf") format(truetype);
	font-style: italic;
	font-weight: bold;
	font-display: swap;
}

@font-face {
	font-family: "Google Sans Code";
	src: url("../fonts/GoogleSansCode.ttf") format(truetype);
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Google Sans Code";
	src: url("../fonts/GoogleSansCode-Italic.ttf") format(truetype);
	font-weight: normal;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Google Sans Code";
	src: url("../fonts/GoogleSansCode.ttf") format(truetype);
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Google Sans Code";
	src: url("../fonts/GoogleSansCode-Italic.ttf") format(truetype);
	font-style: italic;
	font-weight: bold;
	font-display: swap;
}

:not(html) {
	all: unset;
	box-sizing: border-box;
	line-height: 1.25;
}

:root {
	font-size: 18px;
	font-family: "Source Serif 4", serif;

	--swatch-cream: oklch(0.98 0.04 105.26);
	--swatch-cream-dent: oklch(0.86 0.05 93.51);
	--swatch-cream-dent-light: oklch(0.96 0.05 93.51);
	--swatch-cream-dent-dark: oklch(0.8 0.08 93.51);
	--swatch-cream-dent-darker: oklch(0.69 0.07 85.19);
	--swatch-cream-stain: oklch(0.55 0.08 84.9);
	--swatch-cream-stain-light: oklch(0.65 0.08 84.9);
	--swatch-cream-mark: oklch(0.76 0.08 64.71);
	--swatch-ink: oklch(0.2478 0 0);
	--swatch-ink-unrefined: oklch(0.3301 0 0);
	--swatch-ink-aged: oklch(0.45 0.05 48.91);
	--swatch-royal-red: oklch(0.71 0.17 29.12);
	--swatch-royal-red-on-cream: oklch(0.55 0.2 30.46);
	--swatch-royal-blue-on-cream: oklch(0.55 0.2 230.46);
	--swatch-royal-coffee-on-cream: oklch(0.55 0.2 448.46);
	--swatch-royal-purple-on-cream: oklch(0.55 0.2 648.46);

	--color-reading-bg: var(--swatch-cream);
	--color-reading-fg: var(--swatch-ink);
	--color-reading-fg2: var(--swatch-ink-aged);
	--color-accent: var(--swatch-royal-red);
	--color-accent-text: var(--swatch-royal-red-on-cream);
	--color-reading-divisor: var(--swatch-ink-unrefined);
	--color-reading-marking: var(--swatch-cream-dent);
	--color-reading-marking-light: var(--swatch-cream-dent-light);
	--color-reading-marking-dark: var(--swatch-cream-dent-dark);
	--color-reading-marking-darker: var(--swatch-cream-dent-darker);
	--color-reading-stain: var(--swatch-cream-stain);
	--color-reading-stain-light: var(--swatch-cream-stain-light);
	--color-reading-dip: var(--swatch-cream-mark);
	--color-note: var(--swatch-royal-blue-on-cream);
	--color-coffee: var(--swatch-royal-coffee-on-cream);
	--color-warning: var(--swatch-royal-purple-on-cream);

	--font-reading: "Source Serif 4", serif;
	--font-code: "Google Sans Code", monospace;

	background: var(--color-reading-bg);
	color: var(--color-reading-fg);
}

title { display: none; }
script { display: none; }
style { display: none; }
h1, h2, h3, h4, h5, h6 { display: block; }
nav { display: block; }
div { display: block; }
article { display: block; }
p { display: block; }
header { display: block; }
ul { display: block; }
ol { display: block; }
li { display: list-item; }
pre { display: block; }
table { display: table; }
tbody { display: table-row-group; }
tr { display: table-row; }
td { display: table-cell; }

html {
	max-height: 100%;
	min-height: 100%;
	display: block;
}

body {
	width: 100%;
	min-height: 100%;
	display: block;
}

a {
	text-decoration: underline;
	text-decoration-thickness: 0.05rem;
	cursor: pointer;
	color: var(--color-reading-stain);
	text-underline-offset: 0.125rem;
}

h1 {
	display: block;
	font-size: 1.75rem;
}

h2 {
	display: block;
	font-size: 1.5rem;
}

em {
	font-style: italic;
	font-variation-settings: "wght" 475;
}

strong {
	font-weight: bold;
	font-variation-settings: "wght" 625;
	color: oklch(0 0 0);
}

.site-header {
	display: block;
	background: var(--color-accent);
	padding: 0.6rem 0.75rem 0.75rem 0.5rem;
	grid-area: header;
	position: sticky;
	bottom: 0;
	z-index: 1;
	border: 0px solid var(--color-reading-fg);
	border-top-width: 0.1rem;
}

@media screen and (min-width: 640px) {
	.site-header {
		top: 0;
		bottom: auto;
		border-top-width: 0;
		border-bottom-width: 0.1rem;
	}
}

.site-header h1 {
	text-align: center;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 1.75rem;
}

.site-header nav {
	margin-block-start: 0.5rem;
}

.site-header nav ul {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0.75rem 0.125rem;
	justify-content: center;
}

.site-header nav ul li {
	display: inline-block;
	padding: 0 1rch;
}

.site-header nav ul li a {
	color: var(--color-reading-fg);
	text-underline-offset: 0.125rem;
}

.reading-wrapper {
	display: grid;
	width: 100%;
	min-width: 0;
	min-height: 100vh;
	grid-template-rows: 1fr auto;
	grid-template-columns: auto;
	grid-template-areas:
		"content"
		"header";
}

@media screen and (min-width: 640px) {
	.reading-wrapper {
		grid-template-rows: auto 1fr;
		grid-template-areas:
			"header"
			"content";
	}
}

main {
	display: block;
	grid-area: content;
	min-width: 0;
}

.reading-content {
	padding: 1rem 1.5rem 1.5rem 1.5rem;
}

@media screen and (min-width: 640px) {
	main {
		padding-left: calc((100% - 70rch) / 2);
		padding-right: calc((100% - 70rch) / 2);
	}

	.reading-content {
		padding-left: 0;
		padding-right: 0;
	}
}

.reading-content .subtitle {
	margin-block-start: 0.5rem;
}

.reading-content p {
	margin-block-start: 0.75rem;
	line-height: 1.5rem;
}

.reading-content .article-info {
	margin-block-start: 0.75rem;
}

.reading-content .article-info > * {
	margin-block-start: 0.125rem;
}

.reading-content .infoline {
	font-size: 0.925rem;
	text-align: right;
}

.reading-content .infoline .author {
	color: var(--color-reading-stain);
}

.reading-content .tagline {
	font-family: var(--font-code);
	font-size: 0.85rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.5rch;
	justify-content: flex-end;
}

.reading-content .tagline a {
	line-height: 1.5;
	border-bottom-width: 0.125rem;
}

.reading-content header {
	border-bottom: 0.0625rem dashed var(--color-reading-marking);
	margin-bottom: 1rem;
	padding-bottom: 1.25rem;
}

.running-text p {
	text-indent: 1.5rem;
	word-break: break-word;
	/* NOTE(volt): consider paragraph hyphenation as an option. */
	/* hyphens: auto; */
}

.running-text h2 {
	margin-block-start: 1.5rem;
}

.running-text :is(ul, ol) {
	margin-block-start: 0.75rem;
	margin-inline-start: 2ric;
	list-style-type: none;
}

.running-text :not(h1, h2, h3, h4, h5, h6) + :is(ul, ol) {
	margin-block-start: 1.25rem;
}

.running-text :is(ul, ol):not(:last-child) {
	margin-block-end: 1.25rem;
}

.running-text :is(ul, ol) :is(ul, ol) {
	margin-block-start: 0.5rem;
	margin-inline-start: 1.25rem;
}

.running-text ul ol {
	margin-inline-start: 1.75ric;
}

.running-text ol ol {
	margin-inline-start: 0.5ric;
}

.running-text ol {
	counter-reset: list-item;
}

.running-text li p {
	display: inline flow-root;
	text-indent: 0;
}

.running-text li p.first {
	display: inline flow;
	margin-block-start: 0;
}

.running-text li:not(:first-child) {
	margin-block-start: 0.4rem;
}

.running-text ul li::before {
	content: "\2022";
	font-family: "Trebuchet MS";
	margin-right: 0.75rch;
	color: var(--color-reading-stain-light);
	line-height: 1.5rem;
}

.running-text ol li {
	display: grid;
	grid-template-columns: auto 1fr;
	counter-increment: list-item;
}

.running-text ol li * {
	grid-column: 2;
}

.running-text ol li::before {
	grid-column: 1;
	font-family: var(--font-reading);
	content: counter(list-item, lower-roman) ".";
	margin-right: 0.5rch;
	color: var(--color-reading-stain);
	line-height: 1.5rem;
}

.running-text mjx-math * {
	line-height: inherit;
}

.running-text div.math {
	max-width: 100%;
	overflow-x: auto;
}

.running-text code {
	font-family: var(--font-code);
	font-size: 0.85rem;
	color: var(--color-reading-stain);
}

.running-text pre {
	white-space: pre;
	font-family: var(--font-code);
	font-size: 0.85rem;
}

.running-text .highlight {
	margin-block-start: 1rem;
	border: 0.125rem solid var(--color-reading-marking-dark);
	padding-left: 0.5rem;
}

.running-text .highlight td.linenos {
	padding-right: 0.5rem;
	border-right: 0.125rem solid var(--color-reading-marking-dark);
	margin-right: 0.5rem;
	color: var(--color-reading-marking-darker);
}

.running-text .highlight td.code {
	margin-right: 0.5rem;
}

.running-text .highlight tr {
	display: grid;
	grid-template-columns: auto 1fr;
}

.running-text .highlight .highlighttable {
	display: block;
}

.running-text .highlight tbody {
	display: block;
}

.running-text .highlight td.code {
	overflow-x: auto;
}

.running-text .highlight pre {
	margin: 0.25rem 0;
}

.running-text p.snippet-title {
	border: 0.125rem solid var(--color-reading-marking-dark);
	border-bottom: 0;
	text-indent: 0;
	text-align: center;
	padding: 0.5rem 0.75rem;
	margin-block-start: 1rem;
}

.running-text p.snippet-title + .highlight {
	margin-top: 0;
}

.running-text p.narration {
	text-align: center;
	text-indent: 0;
	font-size: 0.95rem;
	color: var(--color-reading-stain);
	padding: 0 1.5ric;
	font-style: italic;
	margin-top: 1.25rem;
	line-height: 1.5em;
}

.running-text p.narration:not(:last-child) {
	margin-bottom: 1.25rem;
}

.running-text .admonition {
	margin-block-start: 1.25rem;
	margin-block-end: 1.25rem;
	padding: 0.65rem 1rch 0.65rem 1.75rch;
	border: 0.1rem solid var(--color-reading-fg);
	border-left-width: 0.5rch;
}

.running-text .admonition.note {
	border-color: var(--color-note);
	background: oklch(from var(--color-note) l c h / 0.1);
}

.running-text .admonition.warning {
	border-color: var(--color-warning);
	background: oklch(from var(--color-warning) l c h / 0.1);
}

.running-text .admonition .admonition-title {
	display: none;
	text-transform: capitalize;
	text-indent: 0;
	font-size: 0.85rem;
	line-height: 1em;
	margin-right: 0.5rch;
	padding: 0 0.5rch;
	background-color: var(--color-reading-fg);
	color: var(--color-reading-bg);
}

.running-text .admonition.show-tag .admonition-title {
	display: inline;
}

.running-text .admonition p:nth-child(2) {
	text-indent: 0;
	margin-block-start: 0;
	font-size: 1.125rem;
	display: inline;
}

.running-text .admonition.note .admonition-title {
	background-color: var(--color-note);
}

.running-text .admonition.note p:nth-child(2) {
	color: var(--color-note);
}

.running-text .admonition.warning .admonition-title {
	background-color: var(--color-warning);
}

.running-text .admonition.warning p:nth-child(2) {
	color: var(--color-warning);
}

.running-text .end-marker {
	text-indent: 0;
	text-align: center;
	margin-block-start: 1.5rem;
}

.running-text img {
	display: block;
	margin-block-start: 2rem;
	margin-block-end: 2rem;
	margin-left: auto;
	margin-right: auto;
	max-width: 100%;
	height: auto;
	max-height: 16rem;
	filter: sepia(.4);
}