/*
style sheet for the Electric Keet site
created by Electric Keet https://electrickeet.com/
*/

/*
These are all subsetted and converted;
look to the original foundries for proper fonts.
 */
@font-face {
    font-family: 'Alegreya Sans';
    src: url('/AlegreyaSans-Bold-subset.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    size-adjust: 111.111%;
		font-display: block;
	}
@font-face {
    font-family: 'Alegreya Sans';
    src: url('/AlegreyaSans-BoldItalic-subset.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    size-adjust: 111.111%;
		font-display: block;
}
@font-face {
    font-family: 'Alegreya Sans';
    src: url('/AlegreyaSans-Italic-subset.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    size-adjust: 111.111%;
		font-display: block;
	}
@font-face {
    font-family: 'Alegreya Sans';
    src: url('/AlegreyaSans-Regular-subset.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    size-adjust: 111.111%;
		font-display: block;
	}
@font-face {
    font-family: 'Inconsolata';
    src: url('/Inconsolata-SemiCondensedRegular-subset.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    size-adjust: 111.111%;
}
@font-face {
    font-family: 'Electric Keet';
    src: url('/Electric Keet.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    size-adjust: 111.111%;
}


:root {
	--c-back: #3e134c;
	--c-cont: #b2246b;
	--c-fore: #ffb726;
	--c-text: #ffffff;
	color-scheme: dark;
	--c-logo: #b2246b;
}
@media (prefers-color-scheme: dark) {
	:root {
		color-scheme: dark;
	}
}
@media (prefers-color-scheme: light) {
	:root {
		--c-back: #ffffff;
		--c-cont: #ffb726;
		--c-fore: #b2246b;
		--c-text: #3e134c;
		color-scheme: light;
	}
}
@media print {
	:root {
		--c-back: #ffffff;
		--c-cont: #ffb726;
		--c-fore: #b2246b;
		--c-text: #3e134c;
		color-scheme: light;
	}
}

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

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

body {
	font-family: "Alegreya Sans", "Candara", sans-serif;
	background: var(--c-back);
	color: var(--c-text);
	padding: 1.2rem clamp(0.6rem, calc((100% - 30em) / 5), 3.6rem) 1.2rem clamp(0.6rem, calc((100% - 30em) / 5), 3.6rem);
	max-width: 48rem;
	margin: 1rem auto 0 auto;
	line-height: 1.5;
}
hr {
	visibility: hidden;
	margin-top: 2rem;
	margin-bottom: 2rem;
}

h1,
h2,
h3 {
	margin-top: 2em;
	font-variant-numeric: lining-nums;
}
p {
	margin-left: 1em;
	text-indent: -1em;
}
p,
li,
.desc {
	hyphens: auto;
}


header {
	display: contents;
	grid-template-rows: 1fr 0.2rem 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: 1fr 0.2rem 1fr;
	grid-column-gap: 0;
	grid-row-gap: 0;
	justify-items: stretch;
	align-items: stretch;
	margin: 0;
	padding: 0;
	width: 100%;
}
div.banner * {
	direction: initial;
}
header svg {
	display: grid;
	grid-row-end: span 3;
	align-self: center;
}
@media only screen and (max-width: 24em) {
	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;
	}
}
div.banner h1 {
	margin: 0;
	font-size: 3em;
}
div.line {
	background-color: var(--c-logo);
	min-height: 0.2rem;
}

/*
ul {
	list-style-position: inside;
	padding-left: 1em;
}
li {
	margin-bottom: 0.4em;
}
li::marker {
  padding-right: 0.3333em;
  color: var(--c-cont);
}
*/

ul {
	list-style-type: disc;
	list-style-position: inside;
	padding-left: 1em;
}
li {
	margin-left: 2rem;
	text-indent: -2rem;
	margin-bottom: 0.4em;
}
li p {
	margin: 0;
}
li::marker {
  padding-right: 0.3333em;
  color: var(--c-cont);
}
li.current {
	font-weight: bold;
}

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

/*
nav h1 {
	margin-top: 0;
}
nav ul {
	padding-left: 0;
	width: 100%;
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
	list-style: disc;
}
nav li {
	display: inline list-item;
	font-size: 1.4rem;
	margin-left: 0.3333em;
	text-indent: 0;
}
nav li:first-child {
	list-style: none;
}
*/

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

.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.6666em;
}
.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: 1.6666rem;
/* without space */
	left: 1.28rem;
/* with space */
/*	left: 1.52rem; */
	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 {
	z-index: 10;
	visibility: visible;
}
.banner nav li:hover menu.empty,
.banner nav li menu.empty:hover {
  display: none;
}



/* magic grid – puts the second column before the first! */
/* uses text direction shenanigans, avert thine eyes */
div.grid {
	display: grid;
	direction: rtl;
	grid-template-columns: 1fr min-content;
	grid-gap: 0;
	grid-row-gap: 0.2rem;
	justify-items: stretch;
	align-items: top;
	margin: 0;
	padding: 0;
	width: 100%;
}
div.grid > * {
	direction: initial;
}
div.grid h3 {
	margin-top: 0;
	margin-bottom: 0.2rem;
}
div.grid p {
	margin-top: 0.2rem;
	margin-bottom: 0;
	/*margin-left: 0.6em;*/
}
div.gridrow {
	display: contents;
}
div.gridrow > div {
		padding: 0.2rem;
}
div.gridrow:hover > div {
	background: var(--c-cont);
}
@media only screen and (max-width: 600px) {
	div.grid {
		grid-template-columns: 1fr;
		grid-row-gap: 1rem;
	}
	div.gridrow {
		display: block;
	}
}


/* CSS hijinx to match font sample with site colors */
div.fontsamp {
	padding: 0;
	margin: 0;
}
div.fontsamp svg,
div.fontsamp img {
	display: block;
}
div.fontsamp svg {
	max-width: 100%;
}
div.fontsamp img {
	mix-blend-mode: screen;
	max-width: 100%;
}
@media only screen and (min-width: 600px) {
	div.fontsamp img {
		max-width: initial;
	}
}
div.fontsamp a:hover {
	outline: none;
}
div.fontvec > div:hover {
	background: var(--c-cont);
}
@media (prefers-color-scheme: light) {
	div.fontsamp img {
		filter: invert(1);
		mix-blend-mode: multiply;
	}
}

audio {
	display: block;
	margin: 0;
	padding: 0.2rem;
	background: none;
	box-shadow: none;
	border-radius: 0;
/* would love to style the <audio> more but cross-platform and such... */
}
audio:focus {
	outline-offset:  0;

}
img.thumb {
	display: block;
	padding: 0.2rem;
	margin-right: 0.2rem;
	max-width: 15rem;
	max-height: 15rem;
}
img.image {
	display: block;
	padding: 0.2rem;
	margin-right: 0.2rem;
}
/*
svg path {
	fill: var(--c-text);
}
*/


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

cite {
	white-space: nowrap;
}
code {
	margin-left: 0.2em;
	margin-right: 0.2em;
	font-family: "Inconsolata", "Noto Sans Mono", "Consolas", monospace;
}
span.smallcaps {
	font-variant-caps: all-small-caps;
	font-synthesis: none;
	font-variant-numeric: oldstyle-nums;
	/* I'd love to letterspace the smallcaps, but there's no ::last-letter */
/* and I'm not adding markup just to reset spacing on the last letter */
/*
	letter-spacing: 0.025em;
*/
}

span.name,
span.summary {
	font-variant-numeric: lining-nums;
}

.downlink {
	white-space: nowrap;
}
.downlink a {
	text-decoration: none;
}

tr td.download {
	padding-right: 0 !important;
}

.feed::after {
	font-family: "Electric Keet";
	content: " \F010";
}