@charset "utf-8";
@import url("https://anduin.jrrt.me/fonts/cormorant-infant/cormorant-infant.css") layer;
@import url("https://anduin.jrrt.me/fonts/avenir-next/avenir-next.css") layer;
@import url("https://anduin.jrrt.me/fonts/cormorant-unicase/cormorant-unicase.css") layer;
@import url("https://anduin.jrrt.me/fonts/cormorant-sc/cormorant-sc.css") layer;
@import url("https://anduin.jrrt.me/fonts/cormorant-garamond/cormorant-garamond.css") layer;
@import url("https://anduin.jrrt.me/fonts/sf-pro/sf-pro.css") layer;

@view-transition {
  navigation: auto;
}


:root {
	--serifFont: "Cormorant Garamond", Cormorant, Garamond, "EB Garamond", "Big Caslon", Georgia, Baskerville, Times, "Times New Roman", serif;
	--sansFont: "Avenir Next", "Trebuchet MS", Futura, Avenir, Helvetica, Arial, Tahoma, Verdana, sans-serif;
	--uniFont: "Cormorant Unicase", "Cormorant Infant", Palatino, Charter, serif;
	--scFont: "Cormorant SC", "Cormorant Unicase", "Cormorant Infant", "Bodoni 72 Smallcaps", Cochin, Palatino, serif;
	--numFont: "Cormorant Garamond", Cormorant, "Cormorant Infant", "Cormorant SC", "Cormorant Unicase", Garamond, "EB Garamond", Palatino, serif;
	--utilFont: "SF Pro Display", "SF Pro", "San Francisco", system-ui, "Helvetica Neue", "Lucida Grande", "Oxygen Sans", "Cantarell", "Segoe UI", "Roboto", "Droid Sans", "Ubuntu", sans-serif;
	--monoFont: "Everson Mono", "JetBrains Mono", "SF Mono", "Courier New", monospace;

/*	---------------
	COLOR variables

	Anduin red is officially `oklch(48.96% 0.177 25.33)`, but that’s a bit too light;
	for ease, we’ve darkened it and rounded values a bit — but everything is based on
	the hue of `25`

	As of 2023-07-08, we’re up to 85% of browsers supporting oklch(), including current
	Edge (which the reading room uses), but that’s only 85%; when it gets higher, we
	could replace the HSL definitions with the true underlying OKLCH.  Note that the
	OKLCH hues advance by exactly 30 (out of 360), giving 12 hues equally spaced according
	to human perception; the HSL hues *seem in code* to be irregularly spaced, but are
	equivalent to the OKLCH values.

	---------------
*/

--cOpacityFull:		1.0;
--cOpacityHigh:		0.8;
--cOpacityMid:		0.5;
--cOpacityLite:		0.3;
--cOpacityPale:		0.2;
--cOpacityGhost:	0.1;
--cOpacityEther:	0.0333;
--cOpacityGone:		0.0;

--cJRRT:	351.7 100% 29%; 		/* oklch(42% 0.18 025)	redx		JRRT; passages; transcriptions	*/
--cPass:	351.5 100% 29%;
--cComm:	 29.5 100% 23%;			/* oklch(42% 0.18 055)	orangex		comments			*/
--cLeg:		 44.2 100% 19%;			/* oklch(42% 0.18 085)	brownx		legend; default		*/
--cDef:		 44.2 100% 19%;
--cTag:		 64.8 100% 16%;			/* oklch(42% 0.18 115)	olivex		tags				*/
--cSM:		133.4 100% 19%;			/* oklch(42% 0.18 145)	greenx		shelfmarks			*/
--cXXX1:	169.3 100% 18%;			/* oklch(42% 0.18 175)	limex		placeholder		👈🏼  */
--cCJRT:	184.8 100% 19%;			/* oklch(42% 0.18 205)	tealx		Christopher	Tolkien	*/
--cMF:		197.6 100% 23%;			/* oklch(42% 0.18 235)	cyanx		main flow; pages	*/
--cPage:	197.6 100% 23%;
--cCit:		225.0  73% 39%;			/* oklch(42% 0.18 265)	bluex		citations			*/
--cTS:		263.1  59% 40%;			/* oklch(42% 0.18 295)	violetx		Taum Santoski		*/
--cJDR:		295.9  73% 29%;			/* oklch(42% 0.18 325)	magentax	John D. Rateliff	*/
--cLink:	325.2 100% 28%;			/* oklch(42% 0.18 355)	pinkx		hovered links		*/
--cCream:	 45.0  38% 94%;			/* oklch(96.28% 0.012 91.52)		creamx				*/
--cBlack:	 44.2   0%  0%;
}

* {
    box-sizing: inherit;
	font-variant-numeric: oldstyle-nums proportional-nums slashed-zero;
}

html {
	background-image: url(https://jrrt.me/cdn-cgi/imagedelivery/AcWRpdqoElPPSyUZeUvfpQ/f828adb2-45e5-4fe5-85f2-59867bfa2300/public);
	background-repeat: repeat;
	background-color: hsl(var(--cCream) / var(--cOpacityMid));
	background-size: 150px;
	color: hsl(var(--cDef) / var(--cOpacityFull));
	font-family: var(--serifFont);
	font-style: normal;
	line-height: 1.6;
	font-size: 133%;
	min-height: 100%;
	text-rendering: optimizeLegibility;
	box-sizing: border-box;
	max-width: 100lvw;
	opacity: 1;
}

body {
	width: 100%;
	max-width: 100lvw;
	margin: 0;
	padding: 0;
	border: none;
	outline: none;
	column-gap: 0;
	text-rendering: optimizeLegibility;
	box-sizing: border-box;
	mix-blend-mode: multiply;
}

a {
	text-decoration-thickness: .03em;
	text-decoration-color: hsl(var(--cLink) / var(--cOpacityPale));
	text-underline-offset: 1.5px;
	color: inherit;
	outline-color: hsl(var(--cDef) / 0);
}

a:hover {
	transition: all 150ms ease-in-out;
	transition-delay: 10ms;
	color: hsl(var(--cLink) / var(--cOpacityFull));
	text-decoration-color: hsl(var(--cLink) / var(--cOpacityFull));
	background-color: hsl(var(--cDef) / var(--cOpacityGhost));
	outline-color: hsl(var(--cDef) / var(--cOpacityGhost));
	outline-width: 1ex;
	outline-style: solid;
}

header {
	vertical-align: bottom;
	padding-top: 1ex;
	margin-bottom: -1.075em;
	width: 100%;
	color: hsl(var(--cDef) / var(--cOpacityFull));
}

header hr {
	margin-top: -1.2ex;
	border-color: hsl(var(--cDef) / var(--cOpacityFull));
	max-width: 100%;
}

header .txt {
	padding-top: 0.49em;
	display: inline-block;
}

main {
	display: grid;
	align-items: start;
	grid-template:
		"paneCards paneThumb";
	grid-template-columns: (1fr, fit-content(33lvw));
}

#paneThumb {
	grid-area: paneThumb;
	max-width: 33.33lvw;
	min-width: 33.33lvw;
}

/*
.lightbox, .lightbox .hide {						# unopened
	display: none;
	overflow: clip;
}
*/

.lightbox {											/* opened */
	isolation: isolate;
	display: flex;
	position: absolute;
	top: 0;
	left: 0;
	min-height: 100lvh;
	min-width: 100lvw;
	height: 100lvh;
	width: 100lvw;
	background-color: hsl(var(--cBlack) / var(--cOpacityHigh));
/*	contain-intrinsic-width: 500dvw;
	contain-intrinsic-height: 500dvh;
	height: fit-content;
	width: fit-content; */
	align-items: center;
	justify-content: center;
	overflow: scroll;
}

.lightbox * {
	font-family: var(--utilFont);
	font-size: 90%;
}

.fogSlate	{ background-color: hsl(var(--cBlack)	/ var(--cOpacityHigh)); }
.fogCream	{ background-color: hsl(var(--cCream)	/ var(--cOpacityHigh)); }
.fogRed		{ background-color: hsl(var(--cJRRT)	/ var(--cOpacityHigh)); }
.fogOrange	{ background-color: hsl(var(--cComm)	/ var(--cOpacityHigh)); }
.fogBrown	{ background-color: hsl(var(--cDef)		/ var(--cOpacityHigh)); }
.fogOlive	{ background-color: hsl(var(--cTag)		/ var(--cOpacityHigh)); }
.fogGreen	{ background-color: hsl(var(--cSM)		/ var(--cOpacityHigh)); }
.fogLime	{ background-color: hsl(var(--cXXX1)	/ var(--cOpacityHigh)); }
.fogTeal	{ background-color: hsl(var(--cCJRT)	/ var(--cOpacityHigh)); }
.fogCyan	{ background-color: hsl(var(--cMF)		/ var(--cOpacityHigh)); }
.fogBlue	{ background-color: hsl(var(--cCit)		/ var(--cOpacityHigh)); }
.fogViolet	{ background-color: hsl(var(--cTS)		/ var(--cOpacityHigh)); }
.fogMagenta	{ background-color: hsl(var(--cJDR)		/ var(--cOpacityHigh)); }
.fogPink	{ background-color: hsl(var(--cLink)	/ var(--cOpacityHigh)); }

.lightbox .rotator, .lightbox .lozenge {
	position: absolute;
	display: block;
	top: -100px;
	left: -100px;
}

.lightbox .rotator::after {
  width: 2rem;
  height: 2rem;
  position: fixed;
  display: flex;
  z-index: 1;
  align-items: center;
  justify-content: center;
  background-color: black;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  font-size: 80%;
}

.lightbox .lozenge::after {
	font-size: 80%;
  width: 6rem;
  height: 1.7rem;
  position: fixed;
  display: flex;
  z-index: 1;
  align-items: center;
  justify-content: center;
  background-color: black;
  border-radius: 0%;
  color: white;
  cursor: pointer;
}

#LBclose::after {
  top: 3dvh;
  right: 3dvw;
  content: "X";
}

#LBRot270::after {
	top: 6dvh;
	left: 2dvw;
	content: "270º";
	rotate: 270deg;
}
.rot270 #LBRot270::after { border: solid #fe0 1px; }

#LBRot0::after {
	top: 3dvh;
	left: 5dvw;
	content: "0º";
}
.rot0 #LBRot0::after { border: solid #fe0 1px; }

#LBRot90::after {
	top: 6dvh;
	left: 8dvw;
	content: "90º";
	rotate: 90deg;
}
.rot90 #LBRot90::after { border: solid #fe0 1px; }

#LBRot180::after {
	top: 9dvh;
	left: 5dvw;
	content: "180º";
	rotate: 180deg;
}
.rot180 #LBRot180::after { border: solid #fe0 1px; }

#LBZoomMinus::after {
	top: 12dvh;
	left: 2dvw;
	content: "-";
}

#LBZoom0::after {
	top: 12dvh;
	left: 5dvw;
	content: "0";
}

#LBZoomPlus::after {
	top: 12dvh;
	left: 8dvw;
	content: "+";
}

#LBFogSlate::after {
	top: 12dvh;
	right: 12dvw;
	content: "slate";
	background-color: hsl(var(--cBlack) / var(--cOpacityFull));
}
.fogSlate #LBFogSlate::after { border: solid #fe0 1px; }

#LBFogCream::after {
	top: 17dvh;
	right: 12dvw;
	content: "cream";
	color: var(--cDef);
	background-color: hsl(var(--cCream) / var(--cOpacityFull));
}
.fogCream #LBFogCream::after { border: solid #fe0 1px; }

#LBFogRed::after {
	top: 22dvh;
	right: 12dvw;
	content: "red";
	background-color: hsl(var(--cJRRT) / var(--cOpacityFull));
}
.fogRed #LBFogRed::after { border: solid #fe0 1px; }

#LBFogOrange::after {
	top: 27dvh;
	right: 12dvw;
	content: "orange";
	background-color: hsl(var(--cComm) / var(--cOpacityFull));
}
.fogOrange #LBFogOrange::after { border: solid #fe0 1px; }

#LBFogBrown::after {
	top: 32dvh;
	right: 12dvw;
	content: "brown";
	background-color: hsl(var(--cDef) / var(--cOpacityFull));
}
.fogBrown #LBFogBrown::after { border: solid #fe0 1px; }

#LBFogOlive::after {
	top: 37dvh;
	right: 12dvw;
	content: "olive";
	background-color: hsl(var(--cTag) / var(--cOpacityFull));
}
.fogOlive #LBFogOlive::after { border: solid #fe0 1px; }

#LBFogGreen::after {
	top: 42dvh;
	right: 12dvw;
	content: "green";
	background-color: hsl(var(--cSM) / var(--cOpacityFull));
}
.fogGreen #LBFogGreen::after { border: solid #fe0 1px; }

#LBFogLime::after {
	top: 47dvh;
	right: 12dvw;
	content: "lime";
	background-color: hsl(var(--cXXX1) / var(--cOpacityFull));
}
.fogLime #LBFogLime::after { border: solid #fe0 1px; }

#LBFogTeal::after {
	top: 52dvh;
	right: 12dvw;
	content: "teal";
	background-color: hsl(var(--cCJRT) / var(--cOpacityFull));
}
.fogTeal #LBFogTeal::after { border: solid #fe0 1px; }

#LBFogCyan::after {
	top: 57dvh;
	right: 12dvw;
	content: "cyan";
	background-color: hsl(var(--cMF) / var(--cOpacityFull));
}
.fogCyan #LBFogCyan::after { border: solid #fe0 1px; }

#LBFogBlue::after {
	top: 62dvh;
	right: 12dvw;
	content: "blue";
	background-color: hsl(var(--cCit) / var(--cOpacityFull));
}
.fogBlue #LBFogBlue::after { border: solid #fe0 1px; }

#LBFogViolet::after {
	top: 67dvh;
	right: 12dvw;
	content: "violet";
	background-color: hsl(var(--cTS) / var(--cOpacityFull));
}
.fogViolet #LBFogViolet::after { border: solid #fe0 1px; }

#LBFogMagenta::after {
	top: 72dvh;
	right: 12dvw;
	content: "magenta";
	background-color: hsl(var(--cJDR) / var(--cOpacityFull));
}
.fogMagenta #LBFogMagenta::after { border: solid #fe0 1px; }

#LBFogPink::after {
	top: 77dvh;
	right: 12dvw;
	content: "pink";
	background-color: hsl(var(--cLink) / var(--cOpacityFull));
}
.fogPink #LBFogPink::after { border: solid #fe0 1px; }

#LBBlendNormal::after {
	top: 12dvh;
	right: 3dvw;
	content: "normal";
}
.blendNormal #LBBlendNormal::after { border: solid #fe0 1px; }

#LBBlendMultiply::after {
	top: 17dvh;
	right: 3dvw;
	content: "multiply";
}
.blendMultiply #LBBlendMultiply::after { border: solid #fe0 1px; }

#LBBlendScreen::after {
	top: 22dvh;
	right: 3dvw;
	content: "screen";
}
.blendScreen #LBBlendScreen::after { border: solid #fe0 1px; }

#LBBlendOverlay::after {
	top: 27dvh;
	right: 3dvw;
	content: "overlay";
}
.blendOverlay #LBBlendOverlay::after { border: solid #fe0 1px; }

#LBBlendDarken::after {
	top: 32dvh;
	right: 3dvw;
	content: "darken";
}
.blendDarken #LBBlendDarken::after { border: solid #fe0 1px; }

#LBBlendLighten::after {
	top: 37dvh;
	right: 3dvw;
	content: "lighten";
}
.blendLighten #LBBlendLighten::after { border: solid #fe0 1px; }

#LBBlendColorDodge::after {
	top: 42dvh;
	right: 3dvw;
	content: "color dodge";
}
.blendColorDodge #LBBlendColorDodge::after { border: solid #fe0 1px; }

#LBBlendColorBurn::after {
	top: 47dvh;
	right: 3dvw;
	content: "color burn";
}
.blendColorBurn #LBBlendColorBurn::after { border: solid #fe0 1px; }

#LBBlendHardLight::after {
	top: 52dvh;
	right: 3dvw;
	content: "hard light";
}
.blendHardLight #LBBlendHardLight::after { border: solid #fe0 1px; }

#LBBlendSoftLight::after {
	top: 57dvh;
	right: 3dvw;
	content: "soft light";
}
.blendSoftLight #LBBlendSoftLight::after { border: solid #fe0 1px; }

#LBBlendDifference::after {
	top: 62dvh;
	right: 3dvw;
	content: "difference";
}
.blendDifference #LBBlendDifference::after { border: solid #fe0 1px; }

#LBBlendExclusion::after {
	top: 67dvh;
	right: 3dvw;
	content: "exclusion";
}
.blendExclusion #LBBlendExclusion::after { border: solid #fe0 1px; }

#LBBlendHue::after {
	top: 72dvh;
	right: 3dvw;
	content: "hue";
}
.blendHue #LBBlendHue::after { border: solid #fe0 1px; }

#LBBlendSaturation::after {
	top: 77dvh;
	right: 3dvw;
	content: "saturation";
}
.blendSaturation #LBBlendSaturation::after { border: solid #fe0 1px; }

#LBBlendColor::after {
	top: 82dvh;
	right: 3dvw;
	content: "color";
}
.blendColor #LBBlendColor::after { border: solid #fe0 1px; }

#LBBlendLuminosity::after {
	top: 102dvh;
	right: 3dvw;
	content: "luminosity";
}
.blendLuminosity #LBBlendLuminosity::after { border: solid #fe0 1px; }

#paneCards {
	grid-area: paneCards;
}

main.welcome {
	display: block;
}

h1 a {
	display: inline-block;
}

main p, h2 {
	padding: 1dvh 5lvw;
}

main .card h2 {
	padding: 1dvh 0 0 0;
	margin: 0;
}

main .card p {
	padding: 1dvh 0 1dvh 1.5lvw;
	margin: 0;
}

main .card nav {
	padding: 0.5dvh 0 0.7dvh 1.5lvw;
	margin: 0;
}

main .card p.alt {
	padding: 0 0 1dvh 1.2lvw;
	margin: 0;
}

main .card p.alt {
	font-size: 67%;
	font-weight: 400;
}


code {
	font-size: inherit;
	font-family: var(--monoFont);
	font-weight: 600;
	padding-inline: 0.67ex;
}

article.slide {
	display: none;
	isolation: isolate;
	position: absolute;
	z-index: 99999;
	mix-blend-mode: normal;
	background: var(--cDef);
	opacity: 1;
}

nav {
	padding-top: 1ex;
}

nav.bc {
	display: flex;
	font-size: 70%;
    align-items: flex-end;
}

nav.bc a {
	padding: 0;
}

nav.bc div {
	padding: 1ex 1em 0 1em;
}

nav.bc div:before {
	content: "⚟     ";
}

nav.entrance {
	font-size: 167%;
	text-align: center;
	font-weight: 700;
	padding: 0;
}

nav.entrance p:before {
	content: "☞";
	padding-right: 1.5em;
}

nav.entrance p:after {
	content: "☜";
	padding-left: 1.5em;
}

/* the tracks */


div#tcNav {
	clear: both;
	position: relative;
	box-sizing: content-box;
}

sub, sup {
	vertical-align: baseline;
	position: relative;
	font-size: 70%;  /* 70% size of its parent element font-size which is good. */
}

sub {
	bottom: -0.45em; /* use em becasue they adapt to parent font-size */
}

sup {
	top: -0.45em;  /* use em becasue they adapt to parent font-size */
}

#theThumb {
	align-self: start;
	position: sticky;
}

img.thumb {
	top: 0;
	float: right;
	max-height: 85dvh;
	max-width: 33lvw;
	object-fit: contain;
	mix-blend-mode: normal;
	background: var(--cDef);
	opacity: 1;
/**
	box-shadow: inset 0 -3em 3em hsl(var(--cDef) / var(--cOpacityFull)), 0.3em 0.3em 1em hsl(var(--cDef) / var(--cOpacityLite));
**/
}

.navbar {  /* Navbar container */
	overflow: hidden;
	position: relative;
	width: 100%;
	background-image: url(https://anduin.jrrt.me/img/noisytexture.png);
	background-repeat: repeat;
	background-color: hsl(var(--cCream) / var(--cOpacityFull));
	background-size: 150px;
	font-family: var(--sansFont);
	font-size: 80%;
}

/* Links inside the navbar */
.nav a { text-align: center; }

.breadCrumb {
	font-size: 85%;
}

hr {
	display: block;
	clear: both;
	max-width: 100%;
	height: 1px;
	border: 0;
	border-top: 0.5px solid hsl(var(--cDef) / var(--cOpacityFull));
	margin: 1em 0;
	padding: 0;
}

hr.inter {
	width: 50%;
	margin-left: 25%;
}

.card {
	clear: none;
	width: 100%;
	max-width: 1340px;
	padding: 0 0.5em 1.5ex 0.5em;
	border-width: 0;
	border-left: 11px solid;
	outline: none;
	box-shadow: rgb(0 0 0 / 10%) 1px 1px 6px 0px;
}

.card.cit {
	border-image: linear-gradient(to right, hsl(var(--cCit) / var(--cOpacityMid)), hsl(var(--cCit) / var(--cOpacityGone))) 0 100%;
	box-shadow: hsl(var(--cCit) / var(--cOpacityGhost)) 1px 1px 6px 0px;
}

.card.comm {
	border-image: linear-gradient(to right, hsl(var(--cComm) / var(--cOpacityMid)), hsl(var(--cComm) / var(--cOpacityGone))) 0 100%;
	box-shadow: hsl(var(--cComm) / var(--cOpacityGhost)) 1px 1px 6px 0px;
}

.card.legend {
	border-image: linear-gradient(to right, hsl(var(--cDef) / var(--cOpacityMid)), hsl(var(--cDef) / var(--cOpacityGone))) 0 100%;
	box-shadow: hsl(var(--cDef) / var(--cOpacityGhost)) 1px 1px 6px 0px;
}

.card.md {
	border-image: linear-gradient(to right, hsl(var(--cDef) / var(--cOpacityMid)), hsl(var(--cDef) / var(--cOpacityGone))) 0 100%;
	box-shadow: hsl(var(--cDef) / var(--cOpacityGhost)) 1px 1px 6px 0px;
}

.card.mf {
	border-image: linear-gradient(to right, hsl(var(--cMF) / var(--cOpacityMid)), hsl(var(--cMF) / var(--cOpacityGone))) 0 100%;
	box-shadow: hsl(var(--cMF) / var(--cOpacityGhost)) 1px 1px 6px 0px;
}

.card.page {
	border-image: linear-gradient(to right, hsl(var(--cPage) / var(--cOpacityMid)), hsl(var(--cPage) / var(--cOpacityGone))) 0 100%;
	box-shadow: hsl(var(--cPage) / var(--cOpacityGhost)) 1px 1px 6px 0px;
}

.card.parent {
	border-image: linear-gradient(to right, hsl(var(--cDef) / var(--cOpacityMid)), hsl(var(--cDef) / var(--cOpacityGone))) 0 100%;
	box-shadow: hsl(var(--cDef) / var(--cOpacityGhost)) 1px 1px 6px 0px;
}

.card.pass {
	border-image: linear-gradient(to right, hsl(var(--cJRRT) / var(--cOpacityMid)), hsl(var(--cJRRT) / var(--cOpacityGone))) 0 100%;
	box-shadow: hsl(var(--cJRRT) / var(--cOpacityGhost)) 1px 1px 6px 0px;
}

.card.shelfmark, .card.sm {
	border-image: linear-gradient(to right, hsl(var(--cSM) / var(--cOpacityMid)), hsl(var(--cSM) / var(--cOpacityGone))) 0 100%;
	box-shadow: hsl(var(--cSM) / var(--cOpacityGhost)) 1px 1px 6px 0px;
}

div.hidden span.htmx::before {
	content: "⏵";
	font-size: 67%;
	padding-right: 0.67em;
	cursor: zoom-in;
}

div.shown span.htmx::before {
	content: "⏷";
	font-size: 67%;
	padding-right: 0.67em;
	cursor: zoom-out;
}

div.stat h2::before {
	content: "∿";
	font-size: 67%;
	padding-right: 0.67em;
}

div.hidden span.htmx:hover { cursor: zoom-in; }
div.shown span.htmx:hover { cursor: zoom-out; }

.em {
	font-style: italic;
}

hr.footer {
	border-color: hsl(var(--cDef) / var(--cOpacityFull));
	width: 100%;
	margin: 0;
	max-width: 100%;
	padding-bottom: 1ex;
	clear: both;
}

li.pass a {
	text-decoration: none;
	color: inherit;
}

footer {
	width: 100%;
	max-width: 100%;
	font-family: var(--sansFont);
	font-weight: 400;
	padding: 0;
	color: hsl(var(--cDef) / var(--cOpacityFull));
	font-size: 57.6%;
}

#Boot div.left {
	padding-left: 1lvw;
}

td {
	white-space: nowrap;
}

div.colorLegend {
    display: grid;
    margin-left: 1.5lvw;
    grid-gap: 0.7rem;
    grid-template-columns: repeat(3, 1rem 12rem);
	grid-auto-flow: row;
	}

div.colorLegend div {
	height: 1rem;
	vertical-align: text-bottom;
	}

div.colorLegend div.colorChip {
	width: 1rem;
	height: 1rem;
	}

div.colorLegend div.note {
	width: 17rem;
	height: 1rem;
	}


/* ↓↓↓	TABLE-LIKE PORTALS ↓↓↓
		Note that these are named for the data they show (detail), not the template of the page they’re on;
		e.g., a “drafts” portal lists drafts but is in the context of a “chapter” template. */

div.portal {
	width: auto;
	margin-left: 1.5lvw;
	margin-top: 2dvh;
	text-align: left;
	font-size: 64%;
	font-weight: 400;
	font-family: var(--sansFont);
	border: none;
}

div.portal,
div.portal * {
	border-collapse: collapse;
	border: none;
}

div.portal > div {
	width: 100%;
	display: grid;
}

div.portal div.header {
	scrollbar-gutter: stable;
	overflow: hidden;
	width: 100%;
	display: grid;
	position: sticky;
	font-weight: 600;
	line-height: 95%;
    align-items: flex-end;
	padding-bottom: 0.5ex;
}

div.portal div.header div {
	padding-left: 0.5ch;
	white-space: wrap;
	vertical-align: bottom;
}

div.portal div.main {
	scrollbar-gutter: stable;
	overflow-y: auto;
	max-height: 11em;
	top: 0;
}

div.portal div.main div {
	border-left: 1px solid hsl(var(--cDef) / var(--cOpacityGhost));
	padding: 0 0.5ch;
}

div.portal div.main > * {
	width: 100%;
	display: grid;
	text-decoration: none;
}

div.portal div.main > * {
	transition: background-color 15ms;
	transition-delay: 5ms;
}

div.portal div.main a:hover {
	outline: none;
}


/* ALL CITATION TEMPLATES: SECTION, CHAPTER, DRAFT */

.cit div.portal > div > div.main {
	border: 1px solid hsl(var(--cCit) / var(--cOpacityPale));
	border-top: none;
}

.cit div.portal > div > div.main a:hover {
	color: hsl(var(--cLink) / var(--cOpacityFull)) !important;
	background-color: hsl(var(--cCit) / var(--cOpacityGhost)) !important;
}

.cit div.portal a div {border-left: 1px solid hsl(var(--cCit) / var(--cOpacityGhost)); }
.cit div.portal div.main a:nth-child(odd) { background-color: hsl(var(--cCit) / var(--cOpacityEther)); }


/* CITATION: Chapters in a section
	chapter #
	chapter title
	chapter alt titles
	# of comments
	# of PDFS
	# of drafts
	total # of draft pages
*/
div.portal > div.chapter > div.header { grid-template-columns:     22fr 22fr 7fr 7fr 7fr 7fr; }
div.portal > div.chapter > div.header div:nth-child(-n+5) { border-bottom: 1px solid hsl(var(--cCit) / var(--cOpacityMid)); }
div.portal > div.chapter > div.main a { grid-template-columns: 4fr 18fr 22fr 7fr 7fr 7fr 7fr; }


/* CITATION: Drafts in a chapter
	draft ID
	draft title
	phase
	constituent parts
	# of comments
	# of PDFs
	total # of folios
*/
div.portal > div.draft > div.header { grid-template-columns: 14fr      7fr 24fr 7fr 7fr 7fr; }
div.portal > div.draft > div.header div:nth-child(-n+6) { border-bottom: 1px solid hsl(var(--cCit) / var(--cOpacityMid)); }
div.portal > div.draft > div.main a { grid-template-columns:  3fr 11fr 7fr 24fr 7fr 7fr 7fr; }


/* CITATION: Folios in a chapter
	LR #
	shelfmark
	phase
	# of comments
	# of PDFs
	content
*/
div.portal > div.folio > div.header { grid-template-columns: 7fr 7fr 7fr 7fr 28fr; }
div.portal > div.folio > div.header div:nth-child(-n+5) { border-bottom: 1px solid hsl(var(--cCit) / var(--cOpacityMid)); }
div.portal > div.folio > div.main a { grid-template-columns:  7fr 7fr 7fr 7fr 28fr; }


/*	CITATION: Pages (folios) in a draft
	LR #
	shelfmark
	folio format
	# of comments in folio
	# of passages (for draft) in folio
	passage start … stop
*/
div.portal > div.page > div.header { grid-template-columns: 5fr 8fr 7fr 7fr 7fr     34fr; }
div.portal > div.page > div.header div:nth-child(-n+6) { border-bottom: 1px solid hsl(var(--cCit) / var(--cOpacityMid)); }
div.portal > div.page > div.main a { grid-template-columns: 5fr 8fr 7fr 7fr 7fr 3fr 31fr; }


/*	CITATION: Passages
	passage ID
	draft
	passage sequence w/in draft
	passage
	# of comments in passage
	more info
*/
div.portal > div.passageCit { width: auto; }
div.portal > div.passageCit > div.header { grid-template-columns: 5fr 9fr 30fr 6fr; }
div.portal > div.passageCit > div.main a { grid-template-columns: 5fr 9fr 30fr 6fr; }


/* CITATION: Sections in a work
	section name
	# of chapters
	# of chapter drafts
	# of pages
	section comments
	section contents
*/

div.portal > div.section > div.header { grid-template-columns: 10fr 20fr 7fr 7fr 7fr 7fr 7fr; }
div.portal > div.section > div.header div:nth-child(-n+5) { border-bottom: 1px solid hsl(var(--cCit) / var(--cOpacityMid)); }
div.portal > div.section > div.main a { grid-template-columns: 10fr 20fr 7fr 7fr 7fr 7fr 7fr; }


/* ALL SHELFMARK TEMPLATES: FOLDER, BOX, SERIES */

.sm div.portal > div > div.main {
	border: 1px solid hsl(var(--cSM) / var(--cOpacityPale));
	mix-blend-mode: multiply;
	border-top: none;
}

.sm div.portal > div > div.main a:hover {
	color: hsl(var(--cLink) / var(--cOpacityFull)) !important;
	background-color: hsl(var(--cSM) / var(--cOpacityGhost)) !important;
}

.sm div.portal a div {border-left: 1px solid hsl(var(--cSM) / var(--cOpacityGhost)); }
.sm div.portal div.main a:nth-child(odd) { background-color: hsl(var(--cSM) / var(--cOpacityEther)); }


/* SHELFMARK: Boxes in a series
	box shelfmark
	box contents
	# of folders
	# of comments
	# of PDFs
	total pages
*/
div.portal > div.box > div.header { grid-template-columns: 7fr 24fr 7fr 7fr 7fr 7fr; }
div.portal > div.box > div.header div:nth-child(-n+5) { border-bottom: 1px solid hsl(var(--cSM) / var(--cOpacityMid)); }
div.portal > div.box > div.main a { grid-template-columns: 7fr 24fr 7fr 7fr 7fr 7fr; }


/* SHELFMARK: Folders in a box
	folder shelfmark
	# of pages
	folder comments
	folder PDFs
	folder contents
*/
div.portal > div.folder > div.header { grid-template-columns: 7fr 34fr 7fr 7fr 7fr; }
div.portal > div.folder > div.header div:nth-child(-n+5) { border-bottom: 1px solid hsl(var(--cSM) / var(--cOpacityMid)); }
div.portal > div.folder > div.main a { grid-template-columns: 7fr 34fr 7fr 7fr 7fr; }


/*	SHELFMARK: Folios in a folder
	shelfmark
	LR #
	folio format
	# of comments in folio
	# of passages (for draft) in folio
	passage start … stop
*/
div.portal > div.folio > div.header { grid-template-columns: 8fr 7fr 8fr 7fr 7fr     33fr; }
div.portal > div.folio > div.header div:nth-child(-n+6) { border-bottom: 1px solid hsl(var(--cSM) / var(--cOpacityMid)); }
div.portal > div.folio > div.main a { grid-template-columns: 8fr 7fr 8fr 7fr 7fr 3fr 30fr; }


/*	SHELFMARK: Passages on a folio (shelfmark-oriented)
	passage ID
	draft
	passage sequence w/in draft
	passage
	# of comments in passage
	more info
*/
div.portal > div.passageSM { width: auto; }
div.portal > div.passageSM > div.header { grid-template-columns: 5fr 9fr 30fr 6fr; }
div.portal > div.passageSM > div.main a { grid-template-columns: 5fr 9fr 30fr 6fr; }


/* SHELFMARK: Series for a work
	series name
	series contents
	series comments
	series PDFs
	# of boxes
	total folders
	total folios
*/
div.portal > div.series > div.header { grid-template-columns: 7fr 25fr 7fr 7fr 7fr 7fr 7fr; }
div.portal > div.series > div.header div:nth-child(-n+5) { border-bottom: 1px solid hsl(var(--cSM) / var(--cOpacityMid)); }
div.portal > div.series > div.main a { grid-template-columns: 7fr 25fr 7fr 7fr 7fr 7fr 7fr; }


/* COMMENT portals */

.comm div.portal > div > div.main {
	border: 1px solid hsl(var(--cComm) / var(--cOpacityPale));
	border-top: none;
	max-height: 15em;
}

.comm div.portal > div > div.main a:hover {
	color: hsl(var(--cLink) / var(--cOpacityFull)) !important;
	background-color: hsl(var(--cComm) / var(--cOpacityGhost)) !important;
}

.comm div.portal div.main {border-left: 1px solid hsl(var(--cComm) / var(--cOpacityGhost)); }
.comm div.portal div.main div:nth-child(odd of .fullLine),
.comm div.portal div.main div:nth-child(odd of .metaLine)
 { background-color: hsl(var(--cComm) / var(--cOpacityEther)); }


/* Comments / Scholia:
	date
	status (empty to all but admin & superusers)
	author
	subject
*/
div.portal > div.comment > div.header { grid-template-columns: 7fr 2fr 14fr 20fr; }
div.portal > div.comment > div.header div:nth-child(-n+4) { border-bottom: 1px solid hsl(var(--cComm) / var(--cOpacityMid)); }
div.portal > div.comment > div.main .metaLine {
	grid-template-columns: 7fr 2fr 14fr 20fr;
	padding: 0;
}

div.portal >div.comment > div.main > * > div {
	width: 100%;
	display: grid;
	text-decoration: none;
}

div.portal > div.comment > div.main .metaLine { display: grid; }
div.portal > div.comment > div.main .fullLine { grid-column: span 4; }

div.portal > div.comment > div.main div {
	padding: 0;
	margin: 0 -0.7ch 0 0;
}

div.portal > div.comment > div.main div.fullLine p:first-child {
	padding-top: 0;
}

div.portal > div.comment > div.main div.fullLine p:last-child {
	padding-bottom: 2ex;
}

/* DETAIL portals */

.page div.portal > div > div.main {
	border: 1px solid hsl(var(--cPage) / var(--cOpacityPale));
	border-top: none;
}

.page div.portal > div > div.main a:hover {
	color: hsl(var(--cLink) / var(--cOpacityFull)) !important;
	background-color: hsl(var(--cPage) / var(--cOpacityGhost)) !important;
}

.page div.portal > * > * > div {border-left: 1px solid hsl(var(--cPage) / var(--cOpacityGhost)); }
.page div.portal div.main > *:nth-child(odd) { background-color: hsl(var(--cPage) / var(--cOpacityEther)); }


/*	DETAIL: Passages
	passage ID
	draft
	passage sequence w/in draft
	passage
	# of comments in passage
	more info
*/
div.portal > div.passagePage { width: auto; }
div.portal > div.passagePage > div.header { grid-template-columns: 5fr 9fr 30fr 6fr; }
div.portal > div.passagePage > div.main a {
	grid-template-columns: 5fr 9fr 30fr 6fr;
	padding: 0;
}


/*	DETAIL: Labels
	author
	context
	content
*/
div.portal > div.labelPage { width: auto; }
div.portal > div.labelPage > div.header { grid-template-columns: 20fr 20fr 20fr; }
div.portal > div.labelPage > div.main > div { grid-template-columns: 20fr 20fr 20fr; }


/* portal column justification and borders */
div.portal div.noLeft { border-left: none !important; }
div.portal div.noRight { border-right: none !important; }
div.portal div.justLeft { text-align: left; }
div.portal div.justRight { text-align: right; }
div.portal div.truncate {
	overflow: hidden;
	white-space: nowrap;
}

div.portal div.disclosed::after {
	content: "⏷";
	padding-right: 0.67em;
	cursor: pointer;
	text-align: right;
	display: block;
	float: right;
}

div.portal div.closed::after {
	content: "⏴";
	padding-right: 0.67em;
	cursor: pointer;
	text-align: right;
	display: block;
	float: right;
}


/* OVERRIDE: Far left (first) column *always* has no left border */
div.portal > div > div.main a div:nth-child(1) { border-left: none; }


/* ↑↑↑ END OF TABLE-LIKE PORTALS ↑↑↑ */

table.labels {
	padding-left: 2em;
	margin-top: 1ex;
	border-spacing: 0.67em 0.1em;
	width: 100%;
}

table.labels th, table.labels td {
	font-size: 75%;
	font-weight: 400;
	vertical-align: top;
	min-width: 7em;
	text-align: left;
	font-family: var(--sansFont);
}

table.labels th { color: hsl(var(--cDef) / var(--cOpacityFull)); }
table.labels th { border-bottom: 0.2px hsl(var(--cDef) / var(--cOpacityFull)) solid; }

table.labels td.content {
	font-family: var(--serifFont);
	font-size: 85%;
}

ul {
	margin: 0;
	padding: 1ex 1em 0 4em;
	font-size: 75%;
	font-weight: 400;
	font-family: var(--sansFont);
	list-style: none;
}

.note {
	font-size: 67%;
	font-weight: 400;
	font-family: var(--sansFont);
}

div.note {
	padding-bottom: 0;
}

div.note p {
	padding-top: 0.33dvh !important;
	padding-bottom: 0.33dvh !important;
}

ul li::before {
	content: "⟡";
	display: inline-block;
	width: 1em;
	margin-left: -1em;
}

h1 {
	font-size: 115%;
	font-weight: 400;
	font-family: var(--scFont);
	margin-block: 0;
	vertical-align: bottom;
	text-transform: lowercase;
}

h2 { clear: none; }

h2, .h2 {
	font-size: 115%;
	font-weight: 600;
	line-height: 1;
	margin-bottom: 0;
	padding-top: 1ex;
}

h2.comm { padding-bottom: 1ex; }

h3 {
	font-family: var(--uniFont);
	margin: 0;
	padding: 2ex 0 0 2em;
	font-size: 90%;
	font-weight: 500;
}

.bold {
	font-weight: 700;
}

.sc {
	font-family: var(--scFont);
	text-transform: lowercase;
}

.semibold {
	font-weight: 500;
}

.uni {
	font-family: var(--uniFont);
	font-variant-caps: petite-caps;
	font-size: 95%;
}

.num {
	font-family: var(--sansFont);
	font-size: 90%;
}

dl {
	padding: 0;
	width: 100%;
}

dl.fn dt {
	float: left;
	clear: left;
	width: 6ch;
	padding-left: 1.5lvw;
	text-align: right;
}

dl.fn dt::after { content: ": "; }
dl.fn dd { padding: 0 0 0 1em; }

.indent { padding-left: 2em; }
table.nav * { white-space: nowrap; }

table.nav td {
	vertical-align: top;
	padding: 0 0.7em;
	text-align: left;
}

td p { margin: 0; }

.left {
	float: left;
	width: auto;
}

.right {
	float: right;
	width: auto;
}

.fullLeft {
	float: left;
	clear: left;
	text-align: left;
	padding: 0;
	margin: 0;
	margin-block: 0 1ex;
}

.fullRight {
	float: right;
	clear: right;
	text-align: right;
	padding: 0 2em 0 0;
	margin: 0;
	margin-block: 0 1ex;
}

#commentButtonContainer {
	text-align: left;
}

/* Comments */
#commentDiv { margin-left: 25px; }

#commentModal .modal-header, #commentModal .modal-body, #commentModal .modal-footer {
	background-color: #FEF8EF;
	background-repeat: repeat;
	background-image: url(https://anduin.jrrt.me/img/noisytexture.png);
}

.imagePanel {
	text-align: center;
	display: block;
	float: right;
	margin-left: 2em;
	margin-right: 0;
}

.tp { width: 1.5lvw; }
.tp1 {float: left; }
.tp2 {float: right; }

.mb {
	height: auto;
}

#paneThumb {
	clear: both;
	text-align: center;
	display: block;
	float: right;
	margin-left: 2em;
	margin-right: 0;
}

button.pane, label.pane {
	float: right;
	display: block;
	clear: none;
	border: none;
	width: 100%;
}

#commentModal .modal-body {
	border-bottom-left-radius: calc(0.3rem - 1px);
	border-bottom-right-radius: calc(0.3rem - 1px);
}

button.tcComms {
	appearance: button;
	display: block;
	margin: 1ex 0;
	padding: 0.67ex 0.85em;
	font-family: var(--utilFont);
	font-size: 75%;
	font-weight: 500;
	border: 1.33px solid hsl(var(--cComm) / var(--cOpacityMid));
	border-radius: 3px;
	background: linear-gradient(hsl(var(--cComm) / var(--cOpacityEther)), hsl(var(--cComm) / var(--cOpacityPale)));
	box-shadow:	inset	-5px -5px 5px -4px #FFFBF8, 
				inset	 1px 1px 5px -3px #3A1C00, 
						-5px -5px 5px -3px #FFFBF8, 
						 5px 5px 5px -4px rgba(58, 28, 0, 0.28);
	user-select: none;
	cursor: pointer;
	margin-right: 0;
	margin-left: auto;
}

button.tcComms:hover { cursor: pointer !important; }
.comFormBtns { float: right; }

h5.commentInfo {
	font-weight: 500;
	margin: 0;
	padding: 1ex 0 0 0;
	font-family: var(--sansFont);
	font-size: 67%;
}

.commentText {
	margin: 0;
	padding: 0.33ex 1.5em;
	font-size: 85%;
	font-family: var(--serifFont);
}

/* Image popup/viewer styles */
#imageModal .modal-dialog { max-width: 95%; }

#imageModal .modal-body {
	overflow: hidden;
	background: #000000;
}

#manuscript-cont { z-index: -1; }

#imageModal #manuscript {
	height: 88dvh;
	position: relative;
	box-sizing: content-box;
	cursor: move;
}

.openseadragon-canvas { background: #000000; }
#toolbar { z-index: 1000; }

.modal-close-btn#closeBtn {
	position: fixed;
	width: 30px;
	left: calc(100lvw - 130px);
	z-index: 10000;
	padding: 5px;
	background: #00000088;
}

/* Places backdrop behind the popup */
.modal-backdrop{
	z-index: 1040 !important;
}
.modal-content{
	z-index: 1100 !important;
}

@media screen and (max-width: 680px) {
	.modal-close-btn#closeBtn { left: calc(100lvw - 80px); }
}

#manuscript > #toolbar > div > div > div > div > div:nth-child(4){
	display: none !important; /* temporarily hide full screen button */
}

/* 2022-07-08 • ErikMH for Anduin 0.7.1 - Added new logo */
.logo {
	width: 6em;
	height: auto;
	float: left;
	padding: 0;
	margin: 0 0 0 0.5em;
}

.diamond {
	height: 1.2em;
	width: auto;
	float: left;
	padding: 0.88em 0 0 0;
	margin: .08em 0.5em 0 0.5em;
}

.heavy {
	font-weight: 700 !important;
}

.prev, .next {
	font-weight: 200 !important;
	font-size: 80%;
	text-decoration: none !important;
}

.prev:after {
	content: "☜";
	padding-right: 1.5em;
	padding-left: 1ex;
}

.next:before {
	content: "☞";
	padding-left: 1.5em;
	padding-right: 1ex;
}

a span.prev, a span.next {
	padding: 0 0.5em;
}

span.util {
	font-family: var(--utilFont);
	font-weight: 400;
	font-size: 50%;
}

.cit { color: hsl(var(--cCit) / var(--cOpacityFull)); }
.cit .disabled { color: hsl(var(--cCit) / var(--cOpacityMid)); }
.cit .ddNavMenu .ddNavBtn { color: hsl(var(--cCit) / var(--cOpacityFull)); }
.cit .ddNavContent a { color: hsl(var(--cCit) / var(--cOpacityFull)); }
.cit .ddNavContent a:hover { background-color: #D1D2ED; }

.comm { color: hsl(var(--cComm) / var(--cOpacityFull)); }
.ct { color: hsl(var(--cCJRT) / var(--cOpacityFull)); }
.default { color: hsl(var(--cDef) / var(--cOpacityFull)); }

.hybrid { color: hsl(var(--cTag) / var(--cOpacityFull)); }
.hybrid .disabled { color: hsl(var(--cTag) / var(--cOpacityMid)); }
.hybrid .ddNavMenu .ddNavBtn { color: hsl(var(--cTag) / var(--cOpacityFull)); }
.hybrid .ddNavContent a { color: hsl(var(--cTag) / var(--cOpacityFull)); }
.hybrid .ddNavContent a:hover { background-color: #D5D9B8; }

.md { color: hsl(var(--cDef) / var(--cOpacityFull)); }
.md .disabled { color: hsl(var(--cDef) / var(--cOpacityMid)); }

.mf { color: hsl(var(--cMF) / var(--cOpacityFull)); }
.mf .disabled { color: hsl(var(--cMF) / var(--cOpacityMid)); }

.page { color: hsl(var(--cPage) / var(--cOpacityFull)); }
.sm .disabled { color: hsl(var(--cPage) / var(--cOpacityMid)); }

.pass { color: hsl(var(--cJRRT) / var(--cOpacityFull)); }
.pass .disabled { color: hsl(var(--cJRRT) / var(--cOpacityMid)); }

.sm { color: hsl(var(--cSM) / var(--cOpacityFull)); }
.sm .disabled { color: hsl(var(--cSM) / var(--cOpacityMid)); }
.sm .ddNavMenu .ddNavBtn { color: hsl(var(--cSM) / var(--cOpacityFull)); }
.sm .ddNavContent a { color: hsl(var(--cSM) / var(--cOpacityFull)); }
.sm .ddNavContent a:hover { background-color: #D5D9B8; }

.cJRRT, .cPass { color: hsl(var(--cJRRT) / var(--cOpacityFull)); }
.colorChip.cJRRT { background-color: hsl(var(--cJRRT) / var(--cOpacityFull)); }

.cComm { color: hsl(var(--cComm) / var(--cOpacityFull)); }
.colorChip.cComm { background-color: hsl(var(--cComm) / var(--cOpacityFull)); }

.cDef { color: hsl(var(--cDef) / var(--cOpacityFull)); }
.colorChip.cDef { background-color: hsl(var(--cDef) / var(--cOpacityFull)); }

.cTag { color: hsl(var(--cTag) / var(--cOpacityFull)); }
.colorChip.cTag { background-color: hsl(var(--cTag) / var(--cOpacityFull)); }

.cSM { color: hsl(var(--cSM) / var(--cOpacityFull)); }
.colorChip.cSM { background-color: hsl(var(--cSM) / var(--cOpacityFull)); }

.cXXX1 { color: hsl(var(--cXXX1) / var(--cOpacityFull)); }
.colorChip.cXXX1 { background-color: hsl(var(--cXXX1) / var(--cOpacityFull)); }

.cCJRT, .cCT { color: hsl(var(--cCJRT) / var(--cOpacityFull)); }
.colorChip.cCJRT { background-color: hsl(var(--cCJRT) / var(--cOpacityFull)); }

.cMF, .cPage { color: hsl(var(--cMF) / var(--cOpacityFull)); }
.colorChip.cMF { background-color: hsl(var(--cMF) / var(--cOpacityFull)); }

.cCit { color: hsl(var(--cCit) / var(--cOpacityFull)); }
.colorChip.cCit { background-color: hsl(var(--cCit) / var(--cOpacityFull)); }

.cTS { color: hsl(var(--cTS) / var(--cOpacityFull)); }
.colorChip.cTS { background-color: hsl(var(--cTS) / var(--cOpacityFull)); }

.cJDR { color: hsl(var(--cJDR) / var(--cOpacityFull)); }
.colorChip.cJDR { background-color: hsl(var(--cJDR) / var(--cOpacityFull)); }

.cLink { color: hsl(var(--cLink) / var(--cOpacityFull)); }
.colorChip.cLink { background-color: hsl(var(--cLink) / var(--cOpacityFull)); }

.small { font-size: 85% !important; }
.smaller { font-size: 75% !important; }
.smallerer { font-size: 67% !important; }

.fSerif { font-family: var(--serifFont); }
.fSans { font-family: var(--sansFont); }
.fUni { font-family: var(--uniFont); }
.fSC { font-family: var(--scFont); }
.fNum { font-family: var(--numFont); }
.fUtil { font-family: var(--utilFont); }
.fMono { font-family: var(--monoFont); }

img.scan {
	rotate: 0deg;
	height: 100svh;
	overflow: scroll;
	overscroll-behavior: contain;
	position: absolute;
}

img.rot, img.rot0 { rotate: 0deg; }
img.rot270 { rotate: 270deg; }
img.rot180 { rotate: 180deg; }
img.rot90 { rotate: 90deg; }

/*
img.zoom, img.zoom0, img.zoom100 {
	transform: scale(1.00);
	transform-origin: top left;
}
img.zoom162 {
	transform: scale(1.618);
	transform-origin: top left;
}
img.zoom262 {
	transform: scale(2.618);
	transform-origin: top left;
}
img.zoom424 {
	transform: scale(4.236);
	transform-origin: top left;
}
img.zoom685 {
	transform: scale(6.854);
	transform-origin: top left;
}
*/
img.blendNormal { mix-blend-mode: normal; }
img.blendMultiply { mix-blend-mode: multiply; }
img.blendScreen { mix-blend-mode: screen; }
img.blendOverlay { mix-blend-mode: overlay; }
img.blendDarken { mix-blend-mode: darken; }
img.blendLighten { mix-blend-mode: lighten; }
img.blendColorDodge { mix-blend-mode: color-dodge; }
img.blendColorBurn { mix-blend-mode: color-burn; }
img.blendHardLight { mix-blend-mode: hard-light; }
img.blendSoftLight { mix-blend-mode: soft-light; }
img.blendDifference { mix-blend-mode: difference; }
img.blendExclusion { mix-blend-mode: exclusion; }
img.blendHue { mix-blend-mode: hue; }
img.blendSaturation { mix-blend-mode: saturation; }
img.blendColor { mix-blend-mode: color; }
img.blendLuminosity { mix-blend-mode: luminosity; }

/* BEM */

.textblock {
	padding: 1dvh 5lvw;
}

.textblock--centered {
	align-items: center;
	justify-content: center;
	text-align: center;
}