/*
style sheet for The Visible Spectrum
created by Electric Keet https://electrickeet.com/
*/

/* these are all converted; look to the original foundry for proper fonts */
@font-face {
	font-family: 'Ysabeau';
	src: url('/res/Ysabeau-Bold-subset.woff') format('woff');
	font-weight: bold;
	font-style: normal;
	size-adjust: 125%;
	font-display: block;
}
@font-face {
	font-family: 'Ysabeau';
	src: url('/res/Ysabeau-BoldItalic-subset.woff') format('woff');
	font-weight: bold;
	font-style: italic;
	size-adjust: 125%;
}
@font-face {
	font-family: 'Ysabeau';
	src: url('/res/Ysabeau-Italic-subset.woff') format('woff');
	font-weight: normal;
	font-style: italic;
	size-adjust: 125%;
	font-display: block;
}
@font-face {
	font-family: 'Ysabeau';
	src: url('/res/Ysabeau-Regular-subset.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	size-adjust: 125%;
	font-display: block;
}
@font-face {
	font-family: 'AUdimat Mono';
	src: url('/res/AUdimatMono-Bold-subset.woff') format('woff');
	font-weight: bold;
	font-style: normal;
	size-adjust: 107.5%;
}
@font-face {
	font-family: 'AUdimat Mono';
	src: url('/res/AUdimatMono-Light-subset.woff') format('woff');
	font-weight: lighter;
	font-style: normal;
	size-adjust: 107.5%;
}
/* and custom font work by me, Electric Keet! */
@font-face {
	font-family: 'Orrery Golden';
	src: url('/res/Orrery Golden.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	size-adjust: 125%;
}



:root {
	--c-patt: #002060;
	--c-back: #004f80;
	--c-cont: #bf5b13;
	--c-fore: #f2ca00;
	--c-text: #e5fff6;
	--c-sigil: #f2ca00;
	color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
	:root {
		color-scheme: dark;
	}
}
@media (prefers-color-scheme: light) {
	:root {
		--c-patt: #ffffff;
		--c-back: #cef2e6;
		--c-cont: #eec700;
		--c-fore: #bf5b13;
		--c-text: #004f80;
		--c-sigil: #eec700;
		color-scheme: light;
	}
}
@media print {
	:root {
		--c-patt: #ffffff;
		--c-back: #ffffff;
		--c-cont: #eec700;
		--c-fore: #bf5b13;
		--c-text: #004f80;
		--c-sigil: #eec700;
		color-scheme: light;
	}
}

:focus {
	outline: 0.1rem solid var(--c-fore);
	outline-offset:  0.1rem;
}

html {
	min-height: 100%;
	/* font size will scale with viewport size! For mobile users! */
	font-size: clamp(0.75em, calc(0.75em + (1 - 0.75) * ((100vw - 12em) / (48 - 12))), 1em);
	box-decoration-break: clone;
}

body {
	font-family: "Ysabeau", sans-serif;
	background-color: var(--c-back);
	background-image: url("/res/pattern.svg");
	/* hate to give explicit pixel sizes but otherwise we get tile seams */
	background-size: 125px 300px;
	background-position: center top;
	color: var(--c-text);
	padding: 0;
	margin: 0;
	line-height: 1.75;
	min-height: 100%;
}
@media print {
	body {
		background-image: none;
	}
}
.body {
	padding: 2.5rem clamp(1rem, calc((100% - 24em) / 6), 4.5rem) 2.5rem clamp(1rem, calc((100% - 24em) / 6), 4.5rem);
	margin: 0 auto;
	max-width: 48em;
	background: var(--c-back);
	/* hate to calculate this, but it keeps the solid page background at max height */
	/* full height - padding - borders */
	min-height: calc(100vh - 5rem - 2rem);
	border-top: 1rem solid var(--c-patt);
	border-bottom: 1rem solid var(--c-patt);
}

h1,
h2,
h3 {
	margin-top: 2rem;
	font-variant-numeric: lining-nums;
}

p {
	margin-top: 0.75rem;
	margin-bottom: 0.75rem;
}
p.glossary-nav {
	margin-top: 3rem;
	margin-bottom: 3rem;
}
p,
li {
	hyphens: auto;
}

dt {
	font-weight: bold;
	margin-top: 1rem;
}
dd {
	margin-bottom: 1rem;
}

header {
	display: contents;
	grid-template-rows: 1fr 1fr;
}
header a,
header a:visited
 {
	text-decoration: none;
	color: var(--c-text);
}
div.banner {
	display: grid;
	direction: rtl;
	grid-template-columns: min-content 1fr;
	grid-template-rows: auto;
	grid-column-gap: 1rem;
	grid-row-gap: 0;
	justify-items: stretch;
	align-items: flex-end;
	margin: 0;
	padding: 0 0 0.5rem 0;
	width: 100%;
	border-bottom: solid 0.2rem var(--c-cont);
}
div.banner * {
	direction: initial;
}
div.banner h1 {
	margin: 0;
	font-size: 2.5rem;
	line-height: 133.333%;
}
header svg {
	display: grid;
	grid-row-end: span 2;
	align-self: center;
}
@media only screen and (max-width: 27em) {
	header  {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
		display: unset;
	}
	header svg {
		grid-row-end: auto;
		display: block;
	}
	div.banner {
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	}
}

nav ul {
	list-style-type: none;
	list-style-position: outside;
	padding-left: 1em;
}
nav li {
/*
	margin-left: 2rem;
	text-indent: -2rem;
*/
}
nav li p {
	margin: 0;
}
nav li::marker {
  list-style-type: disc;
  padding-right: 0.2em;
  color: var(--c-cont);
}
nav li.current {
	font-weight: bold;
}

dt {
	font-size: 1.2rem;
	margin-top: 0.2rem;
}
dd {
	margin-left: 1rem;
}

hr {
	width: 25%;
	height: 0.1em;
	text-align: center;
	color: var(--c-cont);
	border: none;
	background-color: var(--c-cont);
	clear: both;
	margin-top: 2rem;
	margin-bottom: 2rem;
}
header hr,
footer hr {
	height: 0.2rem;
}

main {
	margin-top: 4rem;
	margin-bottom: 4rem;
}

nav {
	font-variant-numeric: lining-nums;
}

.banner nav h1 {
	margin-top: 0;
}
.banner nav ul,
.banner nav menu {
	padding-left: 0;
	width: 100%;
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}
.banner nav li {
	display: inline list-item;
	font-size: 1.3333rem;
	margin-left: 0;
	margin-bottom: 0;
	margin-right: 0.5rem;
	text-indent: 0;
	padding-bottom: 0.25em;
}
.banner nav > menu > li:first-child::marker {
	content: "";
}

/* magical CSS dropdown menus that no longer impress anyone */
.banner nav li {
  position: relative;
	white-space: nowrap;
}
.banner nav ul ul,
.banner nav menu menu {
  visibility: hidden;
  position: absolute;
  outline: solid 0.2rem var(--c-cont);
	background: var(--c-back);
  top: 2rem;
	left: 1.3rem;
	width: auto;
	padding: 0 0.25em 0.25em 0.25em;
}
.banner nav menu li:first-child menu {
	left: 0;
}
.banner nav ul ul li,
.banner nav menu menu li {
	margin: 0.2em;
	padding-bottom: 0;
	width: 100%;
	white-space: nowrap;
	list-style-type: none;
	display: block;
}
.banner nav li:hover ul,
.banner nav li ul:hover,
.banner nav li:hover menu,
.banner nav li menu:hover {
  display: block;
	z-index: 10;
	visibility: visible;
}
.banner nav li:hover menu.empty,
.banner nav li menu.empty:hover {
  display: none;
}
details {
	margin-left: 2em;
	margin-top: 0.75em;
}
div.writing-tree > details {
	margin-left: 0em;
	clear: both;
	margin-bottom: 0.5em;
}
details details {
	margin-top: 0.5rem;
}
details p {
	margin-top: 0;
	padding-left: 2.25rem;
}
summary {
  list-style-type: " ▷ ";
}
details[open] > summary {
  list-style-type: " ▼ ";
}
summary:hover a {
	text-decoration-color: var(--c-fore);
}
summary::marker {
  color: var(--c-fore);
}
div.writing-tree a {
	font-variant-numeric: lining-nums;
}
div.writing-tree dt {
	font-size: unset;
	font-weight: normal;
	margin-left: 2.75em;
}
div.writing-tree dd {
	margin-left: 3.25em;
}

footer {
	margin-top: 4rem;
	padding-top: 1rem;
	border-top: solid 0.2rem var(--c-cont);
	clear: both;
}
footer p {
	font-size: 0.8rem;
	margin-top: 0.4em;
	margin-bottom: 0.4em; 
}

.about img {
	max-width: 100%;
}
.cover img {
	max-width: 50%;
	margin: 0 0 1.5rem 1.5rem;
	float: right;
}
@media only screen and (max-width: 30em) {
	.cover {
		text-align: center;
	}
	.cover img {
		max-width: 80%;
		margin: 0;
		float: none;
	}
}



a {
	color: var(--c-fore);
	text-decoration-color: var(--c-cont);
	cursor: pointer;
}
a:visited {
	color: var(--c-text);
	text-decoration-color: var(--c-cont);
}
a:hover {
	background: var(--c-cont);
	outline: 0.2rem solid var(--c-cont);
	text-decoration-color: var(--c-fore);
}

blockquote {
	font-style: italic;
	margin-left: clamp(1.5rem, calc((100% - 24em) / 6), 3rem);
	margin-right: clamp(1.5rem, calc((100% - 24em) / 6), 3rem);
}
blockquote em {
	font-style: normal;
}
blockquote cite {
	font-style: normal;
}
blockquote cite em {
	font-style: italic;
}

cite {
/*	white-space: nowrap; */
}
code {
	font-family: "AUdimat Mono", monospace;
}
span.smallcaps {
	font-variant-caps: all-small-caps;
	font-synthesis: none;
	font-variant-numeric: oldstyle-nums;
}
span.title {
	font-variant-numeric: lining-nums;
}
span.nobreak {
	white-space: nowrap;
}
span.arrow {
	color: var(--c-cont);
}

.writing-tree em {
	font-size: 80%;
}
.writing-tree summary a {
	font-variant-numeric: lining-nums;
}
.writing-tree summary a::after {
	font-family: "Orrery Golden";
	content: " 🔗";
}
.writing-tree summary a:active {
	outline: none;
}
.writing-tree summary:hover {
	background-color: var(--c-cont);
	outline: 0.3rem solid var(--c-cont);
	outline-offset:  -0.1rem;
}

.breadcrumbs {
	font-size: 80%;
	font-variant-numeric: lining-nums;
}
.breadcrumbs ul {
	padding-left: 0;
}
.breadcrumbs li {
	display: inline-block;
	margin-left: 0;
	margin-bottom: 0;
	text-indent: 0;
}
.breadcrumbs li::before {
  content: none;
  padding-right: 0;
}
.breadcrumbs li::after {
	color: var(--c-cont);
	content: "  » ";
}
.breadcrumbs li:last-child::after {
	content: "";
}

.dedication{
	font-style: italic;
}

.blog-nav,
.glossary-nav {
	margin-top: 2em;
	margin-bottom: 2em;
}

div.breadcrumbs {
	margin-bottom: 0;
}
div.prevnext {
	margin-top: 0;
}
div.breadcrumbs + div.prevnext {
	margin-top: 0;
}
div.prevnext + div.breadcrumbs {
	margin-bottom: 3em;
}
.pieceNav hr,
.blogNav hr {
	width: 100%;
	height: 0.1em;
}

div.blog > p:last-child:after {
  content: "⁂"; 
  margin-left: 0.3333em; 
  display: inline-block;
  position: relative;
	font-family: "Orrery Golden", "Ysabeau", sans-serif;
}

/* weirdness to get commissions to flow well */
div.comm h2 {
	margin-top: 0;
}
div.comm p:first-of-type {
	clear: both;
	height: 0;
	margin: 0;
	padding-top: 1.5em;
	padding-bottom: 0;
}
div.comm img {
	max-width: 50%;
	margin: 0 0 1.5rem 1.5rem;
	float: right;
}
@media only screen and (max-width: 30em) {
	div.comm h2 {
		margin-top: 0.5em;
	}
	div.comm p:first-of-type {
		text-align: center;
		height: initial;
	}
	div.comm img {
		max-width: 80%;
		margin: 0;
		float: none;
	}
	div.comm p:last-of-type {
		margin-bottom: 2em;
	}
}
/* end weirdness */

span.cc::after {
	font-family: "Orrery Golden";
	/* Creative Commons icons in Unicode PUA */
	/*  */
	content: " \F010\F011\F012\F013";
}
.feed::after {
	font-family: "Orrery Golden";
	/*  */
	content: " \F020";
}

aside {
	margin-bottom: 2rem;
}
.blog li p {
	text-indent: 0rem;
}

.empty {
	display: none;
}