:root {
	scrollbar-color: var(--accent) var(--background);
}

html.gaea,
:root {
	--background: #ccffddee;
	--masthead: #ccffdd;
	--text: #410;
	--image-border: #410;
	--accent: #032;
	--link-color: var(--accent);
	--accent-weak: #164;

	--table-header-bg: #1644;
	--table-odd-row-bg: #1642;

	--background_image: url("/garden/bg/grass.jpg");
	--sidebar-text: #cfd;
	--sidebar-accent: #fca;
	--sidebar-background: #0003;
}

html.pan {
	--background: #001810cc;
	--masthead: #4ec;
	--text: #fed;
	--image-border: #fed;
	--accent: #8ed;
	--accent-weak: #4ec;

	--table-header-bg: #4ec4;
	--table-odd-row-bg: #4ec2;

	--background_image: url("/garden/bg/grass_dark.jpg");
	--sidebar-text: var(--text);
	--sidebar-accent: var(--accent);
	--sidebar-background: transparent;
}

html.oceanos {
	--background: #ccddffee;
	--masthead: #cdf;
	--text: #023;
	--image-border: #023;
	--accent: #034;
	--accent-weak: #146;

	--table-header-bg: #1464;
	--table-odd-row-bg: #1462;

	--background_image: url("/garden/bg/ocean.jpg");
	--sidebar-text: #cdf;
	--sidebar-accent: #bef;
	--sidebar-background: #0003;
}

html.salmacis {
	--background: #eeddffe8;
	--masthead: #eeddffe8;
	--text: #1e0a33;
	--image-border: #1e0a33;
	--accent: #351159;
	--accent-weak: #5b2b80;

	--table-header-bg: #5b2b8044;
	--table-odd-row-bg: #5b2b8022;

	--background_image: url("/shrines/hermaphroditos/hermaphroditusbg.gif");
	--sidebar-text: #edf;
	--sidebar-accent: #baf;
	--sidebar-background: #0003;
}

html.dionysos {
	--background: #120519;
	--masthead: #ec8;
	--text: #edf;
	--image-border: #edf;
	--accent: #ec8;
	--accent-weak: #ca7;

	--table-header-bg: #ca74;
	--table-odd-row-bg: #ca72;
	--sidebar-text: #edf;
	--sidebar-accent: #ec8;
	--sidebar-background: #12051988;

	--background_image: linear-gradient(to bottom, #20092c, #380f4d);
}

html.demeter {
	--background: #23160d;
	--masthead: #ff6a32;
	--text: #f1d1a7;
	--image-border: #f1d1a7;
	--accent: #ff6a32;
	--accent-weak: #ff6a32;

	--table-header-bg: #ff6a3244;
	--table-odd-row-bg: #ff6a3222;

	--background_image: url("/garden/bg/leaves.png");

	--sidebar-text: var(--text);
	--sidebar-accent: var(--accent);
	--sidebar-background: #150c07;
}

html.demeter #masthead hgroup {
	background: linear-gradient(to right, #23160daa, #150c07aa);
}

html.chaos {
	--background: #100000;
	--masthead: red;
	--text: #c00;
	--image-border: red;
	--accent: red;
	--accent-weak: #a80000;

	--table-header-bg: #f001;
	--table-odd-row-bg: #f002;

	--sidebar-text: #c00;
	--sidebar-accent: #f00;
	--sidebar-background: #080000;

	--background_image: black;
}

html.chaos body {
	box-shadow: 0 0.1em 1em #f004;
}

html.chaos :is(img, video, audio, iframe),
html.chaos a::after {
	filter: url('data:image/svg+xml,  <svg xmlns="http://www.w3.org/2000/svg">  <filter id="red" x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">    <feColorMatrix type="matrix" values=".60 .20 .20 0 0              .60 .20 .20 0 0              .60 .20 .20 0 0              0 0 0 1 0" in="SourceGraphic" result="colormatrix"/>    <feComponentTransfer in="colormatrix" result="componentTransfer">          <feFuncR type="table" tableValues="0 1"/>      <feFuncG type="table" tableValues="0 0"/>      <feFuncB type="table" tableValues="0 0"/>      <feFuncA type="table" tableValues="0 1"/>      </feComponentTransfer>    <feBlend mode="normal" in="componentTransfer" in2="SourceGraphic" result="blend"/>  </filter></svg>#red');
}

html.hemera {
	--background: transparent;
	--masthead: #04a;
	--text: #012;
	--image-border: #04a;
	--accent: #04a;
	--link-color: var(--accent);
	--accent-weak: #04ab;
	--table-header-bg: transparent;
	--table-odd-row-bg: transparent;
	--background_image: linear-gradient(to bottom, #fffff8, #ffeeef);
	--sidebar-text: var(--text);
	--sidebar-accent: var(--accent);
	--sidebar-background: transparent;
}

html.hemera #masthead hgroup,
html.jason #masthead hgroup {
	text-shadow: none;
}

html.hemera body,
html.jason body {
	box-shadow: none;
}

html.jason {
	--background: yellow;
	--masthead: black;
	--text: black;
	--image-border: black;
	--accent: black;
	--accent-weak: black;
	--table-header-bg: yellow;
	--table-odd-row-bg: yellow;
	--background_image: yellow;
	--sidebar-text: black;
	--sidebar-accent: black;

	--serif: Verdana, "Verdana Pro", "Bitstream Vera Sans", "Bitstream Vera",
		var(--system);
	--cormorant: Georgia, Charter, Times, serif;
	font-size: 0.9rem;
}

html.jason #body-container {
	max-inline-size: 65rem;
}

html.jason #primary,
html.jason #secondary {
	box-shadow: none;
	background-color: transparent;
}

html.jason #primary {
	background-color: white;
	border: 1px solid black;
}

html.jason h1 {
	font-family: var(--cormorant);
	font-weight: normal;
}

html.jason .sidenotes aside.note {
	padding: 0.2em;
	background: white;
	border: 1px solid black;
}

body {
	background: var(--background_image);
	background-attachment: fixed;
	background-repeat: repeating;

	color: var(--text);
	font-family: var(--serif);
	line-height: 1.45;
	hyphens: auto;

	max-inline-size: 52rem;
	margin: auto;
	margin-block: 1rem;
	-webkit-backdrop-filter: blur(0.75rem);
	backdrop-filter: blur(0.75rem);
	border-radius: 1.5rem;
	box-shadow: 0 0.1em 1em black;
}

#body-container {
	display: grid;
	grid-template-rows: auto auto;
	grid-template-columns: minmax(0, 16fr) minmax(0, 7fr);
	grid-template-areas: "masthead masthead" "articles sidebar";
}

@media only screen and (max-width: 799px) {
	#body-container {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto auto auto;
		grid-template-areas: "masthead" "articles" "sidebar";
		margin: auto;
	}

	#secondary aside.note {
		display: none !important;
	}
}

#recent-comments {
	font-size: 0.85rem;
	padding: 0;
}
#recent-comments li {
	margin-block-end: 0.5em;
	display: block;
}

#masthead {
	grid-area: masthead;
	text-shadow: 0 0 0.25rem rgb(0, 0, 0);
	padding: 1.5rem;
}

#masthead hgroup * {
	font-weight: normal;
	display: inline-block;
	margin: 0;
}

#masthead h1 {
	margin: 0;
	color: var(--masthead);
	font-weight: normal;
	text-align: start;
}

#masthead h1 strong {
	display: inline-block;

	color: inherit;
	font-size: 3.75rem;
	font-family: var(--cormorant);
	font-style: italic;
	font-weight: 600;
}

#masthead h1 a {
	text-decoration: none;
	color: inherit;
}

#masthead h1 small {
	display: inline-block;
	margin-inline-start: 2rem;
	font-size: 1.5rem;
	color: var(--masthead);
}

@media only screen and (max-width: 500px) {
	#masthead h1 strong {
		font-size: 3rem;
	}

	#masthead h1 small {
		font-size: 1.25rem;
	}
}

#site-navigation {
	display: none;
}

#primary {
	grid-area: articles;
	z-index: 20;

	max-inline-size: none;
	padding: 2rem;

	border-radius: 0 0 0 1.5rem;
	background-color: var(--background);
}

h2#collation {
	margin-block: 0 1.5rem;

	text-align: center;

	font-variant-caps: small-caps;
	letter-spacing: var(--caps-spacing);
}

h2#collation strong {
	display: block;
	font-size: 1.6rem;
	font-weight: normal;
}

h2#collation small {
	display: block;
	font-variant-caps: all-small-caps;
}

#secondary {
	grid-area: sidebar;
	background: var(--sidebar-background);
	border-radius: 0 0 1.5rem 0;
	padding: 0;
}

aside.note {
	display: grid;
	grid-template-columns: auto 1fr;
	margin-inline-start: 0;
	padding-block-end: 1em;
	font-size: 0.8em;
	text-align: justify;
}

sup.note,
.note-number {
	margin: 0 0.2em;

	color: var(--accent);
	text-align: center;
	text-decoration: none;
	white-space: nowrap;

	background-color: transparent;
	border: none;
}

.note-number {
	margin: 0;
	padding-inline: 0.5rem;
	margin-inline-end: 0.5rem;
	font-style: normal;
	font-weight: normal;
	color: var(--accent-weak);
	display: inline-block;
	font-size: 2em;
}

#secondary aside.note {
	margin-block: 0.5rem;
	padding-block-end: 0;
	padding-inline-start: 0;
}

#secondary .note-number {
	color: var(--text);
	background-color: var(--background);
}

#secondary > * {
	--accent: var(--sidebar-accent);
	--accent-weak: var(--sidebar-accent);
	color: var(--sidebar-text);
}

#secondary > *:not(.note),
#secondary aside.note > div {
	--text: var(--sidebar-text);
}

#secondary > * {
	padding-inline: 1rem;
}

article.post:not(.single .post) {
	padding-block-end: 3rem;
}

article.format-note .entry-content {
	font-size: 1.167em;
}

article.format-note .entry-content p:last-child {
	margin-block-end: 0;
}

article.post h1 {
	margin-block-end: 0;

	font-size: 2rem;
	hyphens: initial;
}

article.post h1:first-child {
	margin-block-start: 0;
}

header .entry-metadata {
	margin-block-end: 1rem;
}

.entry-header a,
.entry-metadata a {
	text-decoration: none;
}

.entry-header a:hover,
.entry-header a:focus,
.entry-metadata a:hover,
.entry-metadata a:focus {
	text-decoration: underline;
}

h3.widget-title,
.widget-link-thru {
	font-size: 1em;
	color: var(--accent);
	font-variant-caps: all-small-caps;
	letter-spacing: var(--caps-spacing);
	margin-block-end: 0.5rem;
}

h3.widget-title + ul,
h3.widget-title + * ul {
	margin-block-start: 0;
	padding-inline-start: 1em;
}

.widget > p {
	margin-block-start: 0;
}

.blogroll {
	margin-block-start: 0;
	margin-block-end: 0;
	padding-inline-start: 1em;
}

.blogroll li::marker {
	content: "✨\FE0E\00A0";
	color: var(--accent);
}

.widget img {
	max-inline-size: 128px;
	border: 3px double var(--accent);
}

#archives > ul {
	padding-inline-start: 0;
}

#archives *::marker {
	color: var(--accent);
}

#archives details {
	border: none;
}

#archives summary {
	padding: 0;
	color: inherit;
	font-weight: normal;
	text-align: start;
}

#archives li:not(details details li)::marker {
	content: "";
}

#archives details details li {
	font-size: 0.85em;
}

#archives details details li::marker {
	content: "❧ ";
	padding-inline-end: 1em;
}

#archives details details li a {
	text-decoration: none;
}

#archives details details li a:hover {
	text-decoration: 1px dotted underline;
}

#archives li.foreign {
	font-size: 0.75em;
	font-style: italic;

	opacity: 0.9;
}

#language-archive {
	display: flex;
	flex-wrap: wrap;

	padding: 0;
}

#language-archive li::marker {
	content: "";
	display: none;
}

#language-archive li {
	margin: 0;
	margin-inline-end: 1em;
	padding: 0;
	font-size: 0.8em;
}

#language-archive li a {
	text-decoration: solid underline;
}

summary {
	cursor: pointer;
}

#secondary button {
	font-family: inherit;
	background-color: transparent;
	border: none;
	color: var(--text);
	text-decoration: underline;
	padding: 0.125rem;
	cursor: pointer;
	font-size: 0.8em;
}

#secondary button.enabled {
	color: var(--accent);
	font-weight: bold;
}

nav.previous-next ul {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	gap: 1em;

	padding: 0;
	margin: 0;

	align-items: center;

	color: var(--accent-weak);
	line-height: 1.125;
}

nav.previous-next ul li::marker {
	content: "";
}

nav.previous-next ul li:nth-child(1) {
	text-align: end;
}

nav.previous-next ul li:nth-child(2) {
	text-align: center;
}

nav.previous-next a {
	display: block;

	inline-size: 100%;

	color: var(--accent-weak);
	text-decoration: none;
}

nav.previous-next a:is(:hover, :focus) {
	text-decoration: 1px solid underline;
}

/* Generic stuff */

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: normal;
	text-align: start;
}

img,
video,
iframe {
	max-inline-size: 100%;
	margin-inline: auto;
	max-block-size: 66.667vh;
	border: 1px solid var(--image-border);
}

:is(figure, img, video, iframe, audio):is(.align-start, .align-end) {
	max-inline-size: 33%;
}

.align-start {
	margin-inline-end: 1em;
}

.align-end {
	margin-inline-start: 1em;
}

iframe {
	inline-size: 100%;
	aspect-ratio: 16 / 9;
}

:is(img, video, iframe):not(figure > *) {
	display: block;
}

img.flag {
	border: 1px solid var(--accent);
}

figure {
	margin-block-end: 1em;
}

figcaption {
	color: var(--accent-weak);
	font-size: 0.9em;
	line-height: 1.1;
	text-align: center;
	text-wrap: balance;
}

p.has-drop-cap::first-letter {
	float: left;

	margin: 0.167em 0.083em 0 0;

	color: var(--accent);
	font-size: 3em;
	font-style: normal;
	font-variant-caps: normal;
	font-weight: normal;
	line-height: 0.67;
	text-transform: uppercase;
}

p.has-drop-cap::first-line {
	font-variant-caps: all-small-caps;
	letter-spacing: var(--caps-spacing);
	color: var(--accent);
}