@charset "utf-8";
/*--------------------------------------------------------------
xerographic theme
made by: Heracles Papatheodorou
url: https://github.com/Arty2/xerographic
--------------------------------------------------------------*/

/*--------------------------------------------------------------
syntax highlighting: algol_nu
via https://xyproto.github.io/splash/docs/longer/all.html
loaded in the /layouts/partial/head.html 
--------------------------------------------------------------*/
.highlight { background: none !important; }

/*--------------------------------------------------------------
global CSS variables
--------------------------------------------------------------*/
:root {
	/* font stacks */
	--font-icons: 'icons', 'Fantasque', 'Segoe UI', 'Ubuntu Mono', 'Consolas', monospace;
	--font-mono: 'Fantasque', 'Segoe UI', 'Ubuntu Mono', 'Consolas', monospace;
	--font-serif: 'Alegreya', 'Gentium', 'Georgia', serif;
	--font-sans: 'Alegreya Sans', 'Helvetica', 'Arial', serif;


	/* layout */
	--scrollbar-width: 0px;
	/*--scrollbar-width: 18px;*/
	/*--content-width: 60ch; /* is not same for different fonts */
	--content-width: 30rem;
	/*--content-width: 100%; /* DEBUG */

	--line-height: 1.4em; /* units used implicitely, but could be removed if multiplied with s00 later */
	--gutter-height: 1.4rem;
	--gutter-width: 1.4rem;
	--icon-pad: 0.1rem;
	--icon-size: calc(1.4rem - 2*var(--icon-pad));
	/*--gutter-width: calc(1*var(--line-height));*/
	/*--offset: --gutter-width;*/
	/*--gutter-width: 0px; /* DEBUG */


	/* text scales */
	/*https://blog.envylabs.com/responsive-typographic-scales-in-css-b9f60431d1c4*/
	/*https://24ways.org/2019/a-modern-typographic-scale/#comments*/
	--xheight: 1; /* x-height adjustment */
	--sratio: 1.15;
	--s00: 1em; /* always 1em = 1rem */
	--s-3: calc(var(--s-2) / var(--sratio));
	--s-2: calc(var(--s-1) / var(--sratio));
	--s-1: calc(var(--s00) / var(--sratio));
	--s01: calc(var(--s00) * var(--sratio));
	--s02: calc(var(--s01) * var(--sratio));
	--s03: calc(var(--s02) * var(--sratio));
	--s04: calc(var(--s03) * var(--sratio));

	--page-color-transparency: 0.89;
	--page-color-blur: 2px;

	/* auto-calculated colors */
	--shadow-color: rgba(var(--text-color),0.2);
}



/*--------------------------------------------------------------
themes
--------------------------------------------------------------*/

body, /* default theme */
body.scheme-light {
	--page-color: 221, 238, 255;
	--text-color: 34, 34, 50;
	--hyperlink-color: 34, 34, 50;
	--accent-color: 0, 0, 255;
	--text-color-inverted: 255, 255, 255;

	--blend-mode: multiply;
	--blend-filter: none;
}

body.scheme-dark {
	--page-color: 34, 34, 34;
	--text-color: 204, 204, 204;
	--hyperlink-color: 204, 204, 204;
	--accent-color: 205, 35, 185;
	--text-color-inverted: 20, 20, 20;

	--blend-filter: invert(100);
	--blend-mode: screen;
}

@media (prefers-color-scheme: dark) {
	body {
		--page-color: 34, 34, 34;
		--text-color: 204, 204, 204;
		--hyperlink-color: 204, 204, 204;
		--accent-color: 205, 35, 185;
		--text-color-inverted: 20, 20, 20;

		--blend-filter: invert(100);
		--blend-mode: screen;
	}
}

body.theme-peach,
body.theme-peach.scheme-light {
	/*--page-color: 255, 204, 238;*/
	--page-color: 255, 210, 230;
	--text-color: 0, 0, 0;
	--hyperlink-color: 0, 0, 0;
	--accent-color: 0, 0, 255;
	--text-color-inverted: 255, 255, 255;
}

body.theme-peach,
body.theme-peach.scheme-dark {
	--page-color: 20, 20, 20;
	--text-color: 255, 210, 230;
	--hyperlink-color: 255, 210, 230;
	--accent-color: 248, 128, 120;
	--text-color-inverted: 20, 20, 20;
}

@media (prefers-color-scheme: dark) {
	body.theme-peach {
		--page-color: 20, 20, 20;
		--text-color: 255, 210, 230;
		--hyperlink-color: 255, 210, 230;
		--accent-color: 248, 128, 120;
		--text-color-inverted: 20, 20, 20;
	}
}


body.theme-debtron,
body.theme-debtron.scheme-light {
	--page-color: 227, 222, 219;
	--text-color: 43, 0, 0;
	--hyperlink-color: 43, 0, 0;
	--accent-color: 189, 30, 46;
	--text-color-inverted: 189, 159, 92;
}

body.theme-debtron.scheme-dark {
	--page-color: 43, 0, 0;
	--text-color: 189, 159, 92;
	--hyperlink-color: 189, 159, 92;
	--accent-color: 189, 30, 46;
	--text-color-inverted: 0, 0, 0;
}

@media (prefers-color-scheme: dark) {
	body.theme-debtron {
		--page-color: 43, 0, 0;
		--text-color: 189, 159, 92;
		--hyperlink-color: 189, 159, 92;
		--accent-color: 189, 30, 46;
		--text-color-inverted: 0, 0, 0;
	}
}

body.theme-black {
	--page-color: 0, 0, 0;
	--text-color: 250, 250, 250;
	--hyperlink-color: 250, 250, 250;
	--accent-color: 205, 35, 185;
	--text-color-inverted: 20, 20, 20;
	--theme-toggle: 0;
}

body.theme-white {
	--page-color: 255, 255, 255;
	--text-color: 34, 34, 34;
	--hyperlink-color: 34, 34, 34;
	--accent-color: 0, 0, 255;
	--text-color-inverted: 200, 200, 200;
	--theme-toggle: 0;
}

body.theme-gray,
body.theme-grey {
	--page-color: 204, 204, 204;
	--text-color: 0, 0, 0;
	--hyperlink-color: 0, 0, 0;
	--accent-color: 0, 0, 255;
	--text-color-inverted: 200, 200, 200;
	--theme-toggle: 0;
}

body.theme-blue {
	--page-color: 0, 0, 255;
	--text-color: 255, 255, 255;
	--hyperlink-color: 255, 255, 255;
	--accent-color: 255, 0, 0;
	--text-color-inverted: 0, 0, 255;
	--theme-toggle: 0;
}


/*--------------------------------------------------------------
image filters
--------------------------------------------------------------*/

img.blend {
	filter: var(--blend-filter);
	mix-blend-mode: var(--blend-mode);
}


/*--------------------------------------------------------------
theme styles
--------------------------------------------------------------*/

::selection {
	background: rgb(var(--text-color));
	color: rgb(var(--text-color-inverted));
	text-shadow: none;
}

/*:root {
	scrollbar-color: rgb(var(--accent-color)) transparent !important;
	scrollbar-width: thin !important;
}*/

body {
	background: #fff; /* alternative */
	background: rgb(var(--page-color));
	color: #000; /* alternative */
	color: rgb(var(--text-color));

	/* transition messes with custom styles */
	/*-webkit-transition: background 0.3s;*/
	/*transition        : background 0.3s;*/
}


/*--------------------------------------------------------------
fonts & typography

Alegrya: via https://www.huertatipografica.com/en/fonts/alegreya-ht-pro
FantasqueSan: via https://github.com/belluzj/fantasque-sans;
icon font via https://icomoon.io (Brands iconset)
--------------------------------------------------------------*/

@font-face {
	font-family: 'Alegreya';
	src: url('../fonts/Alegreya-Regular.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Alegreya';
	src: url('../fonts/Alegreya-Italic.woff2') format('woff2');
	font-weight: normal;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Alegreya';
	src: url('../fonts/Alegreya-Bold.woff2') format('woff2');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Alegreya Sans';
	src: url('../fonts/AlegreyaSans-Regular.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Alegreya Sans';
	src: url('../fonts/AlegreyaSans-Italic.woff2') format('woff2');
	font-weight: normal;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Alegreya Sans';
	src: url('../fonts/AlegreyaSans-Bold.woff2') format('woff2');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Fantasque';
	src: url('../fonts/FantasqueSansMono-Regular.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

/*@font-face {
	font-family: 'Fantasque';
	src: url('../fonts/FantasqueSansMono-Italic.woff2') format('woff2');
	font-weight: bold;
	font-style: italic;
	font-display: swap;
}*/

@font-face {
	font-family: 'Fantasque';
	src: url('../fonts/FantasqueSansMono-Bold.woff2') format('woff2');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'icons';
	src: url('../fonts/icomoon.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

html {
	font-size: 112%; /* alternative */
	font-size: calc(112% + 0.5vw);
}

body {
	font-size: var(--s00);
	line-height: var(--line-height);
	
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body * {
	line-height: inherit;
}

body,
.font-serif {
	font-family: serif; /* alternative */
	font-family: var(--font-serif);
}

.font-sans {
	font-family: sans-serif; /* alternative */
	font-family: var(--font-sans);
}

.font-mono, .font-monospace,
pre, code, kbd,
input[type=submit], input[type=reset],
.menu, .sharing, .languages,
.tag, .more {
	--xheight: 0.92;
	font-family: monospace; /* alternative */
	font-family: var(--font-mono);
	font-size: calc(var(--s-1)*var(--xheight));
}

pre, input, textarea {
	font-family: inherit;
}

input[type=submit], input[type=reset],
.menu, .sharing, .languages,
.tag, .more,
.meta details summary,
.meta dt {
	/*--xheight: 0.92;*/
	font-variant: small-caps;
	text-transform: uppercase;
	font-size: calc(var(--s-2)*var(--xheight));
}

figcaption, small, table,
.entry-content blockquote {
	font-size: var(--s-2);
}

.katex,
article.preformatted > *,
article.ephemera > * {
	font-size: var(--s-1);
}

body > footer .author-card,
body > footer .social {
	font-size: var(--s-2);
	line-height: 1.3;
}

body > footer .copyright {
	font-size: var(--s-3);
	line-height: 1.3;
}

.meta,
.marginalia, .entry-content aside,
.footnotes {
	font-size: var(--s-2);
}

.menu > ul > li:after,
.tag:after,
.icon,
.marginalia:before,
article .summary:after,
.meta summary:after,
.rating,
.sl-wrapper button,
abbr:not(:hover):before,
ins[datetime]:not(:hover):before,
del[datetime]:not(:hover):before,
a[title*=' ']:not(:hover):before,
span[title*=' ']:not(:hover):before {
	font-family: var(--font-icons) !important;
	font-size: var(--s-2);
	/*line-height: calc(var(--line-height)/1.2);*/
	/*line-height: 1.4;*/
}

.sl-wrapper button {
	font-size: var(--s-1) !important;
}

h1 { font-size: var(--s04); }
h2 { font-size: var(--s03); }
h3 { font-size: var(--s02); }
h4 { font-size: var(--s01); }
h5 { font-size: var(--s00); }
h6 { font-size: var(--s-1); font-style: italic; }


/*--------------------------------------------------------------
reset styles
--------------------------------------------------------------*/

html {
	position: relative;
	box-sizing: border-box;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

* {
	margin: 0;
	padding: 0;
}

svg {
	stroke: currentColor;
	fill: currentColor;
}

img {
	display: block;
	margin: auto;
	max-width: 100%;
	height: auto;

	-webkit-user-select: none !important;
	user-select: none !important;
}

figure {
	page-break-inside: avoid;
	break-inside: avoid;
}

figure img {
	display: block;
	margin: 0 auto;
}

figcaption {
	margin-top: calc(var(--line-height)/4);
	text-align: center;
}

ul { list-style: none; }

ol { list-style: decimal; }

ol ol { list-style: lower-alpha; }

:lang(el) ol ol { list-style: lower-greek; }

li ul, li ol {
	margin: 0;
}

article, aside, figure, figcaption, 
footer, header, main, nav, section {
	display: block;
}

body {
	font-kerning: normal;
	font-variant: common-ligatures oldstyle-nums proportional-nums;
	font-feature-settings: "kern", "liga", "clig", "onum", "pnum";
}

h1, h2, h3, h4, h5, h6 {
	padding-top: calc(var(--line-height)/4);
	margin-bottom: calc(var(--line-height)/4);

	font-variant: common-ligatures lining-nums proportional-nums;
	font-feature-settings: "kern", "liga", "clig", "lnum", "pnum";
	font-weight: normal;
}

code, kbd {
	font-variant: no-common-ligatures lining-nums;
	font-feature-settings: "kern" 0, "liga" 0, "clig" 0, "lnum";
}

table {
	font-variant-numeric: lining-nums tabular-nums;
	font-feature-settings: "kern", "lnum", "tnum";
}

hr {
	margin: var(--gutter-height) 0;
	overflow: hidden;

	border: 0;
}
	hr:before {
		content: '* * *'; /* ⁂ ✻ 〜 */
		display: block;
		height: 1.2rem;

		color: rgba(var(--text-color),1);
		font-size: var(--s04);
		line-height: 2rem;
		text-align: center;
	}

p, li {
	font-variant-ligatures: normal;

	-webkit-hyphens	: auto;
	hyphens			: auto;	
	white-space: normal;
	/*text-align: justify;*/
}

pre {
	margin: var(--gutter-height) 0;
	padding: 0;
	overflow: hidden;

	white-space: pre;
}


code {
	display: inline-block;
	padding: 0.2em 0.25em 0.15em 0.25em;

	background: var(--shadow-color);
	border-radius: 1.5px;
	line-height: 1.1;
	overflow-wrap: break-word;
	word-wrap: break-word;
	word-break: break-all;
	word-break: break-word;
}

pre > code {
	display: block;
	position: relative;
	margin: 0;
	padding: 1.4rem 0.7rem;
	width: 100%;
	overflow: hidden;

	text-overflow: ellipsis;
}
	pre > code:hover {
		overflow-x: auto;
		text-overflow: initial;
	}
	pre > code:before {
		content: attr(data-lang);
		position: absolute;
		top: 0.4rem;
		left: 0.7rem;

		color: rgb(var(--page-color));
		font-size: var(--s-2);
	}

mark {
	background: rgba(var(--accent-color),0.1);
	color: rgb(var(--text-color));
}
	mark:hover {
		background: rgba(var(--accent-color),1);
		color: rgb(var(--text-color-inverted));
	}
	mark:before, mark:after {
		content: '\00A0';
	}

abbr {
	/*position: relative;*/
	font-variant: small-caps;
	text-decoration: none;
	text-transform: lowercase;
}
	span[title*=' '],
	abbr[title*=' '] {
		cursor: help;
	}
	span[title*=' ']:after,
	abbr[title*=' ']:after {
		display: inline-block;
		margin-left: -0.1em;
		line-height: 1.3;

		font-variant: initial;
		text-transform: initial;
	}
	span[title*=' ']:after,
	abbr[title*=' ']:after {
		content: '*';
		top: -0.2em;
	}

kbd {
	display: inline-block;
	padding: 0.2em;
	min-width: 1.5em;
	min-height: 1.5em;
	
	border: 1px solid;
	border-radius: 3px;
	cursor: grab;
	line-height: 1;
	text-align: center;

	-webkit-box-shadow: 2px 2px 0px 0px var(--shadow-color);
	box-shadow:         2px 2px 0px 0px var(--shadow-color);
}
	kbd:hover {
		-webkit-box-shadow: 1px 1px 0px 0px var(--shadow-color);
		box-shadow:         1px 1px 0px 0px var(--shadow-color);
	}

kbd kbd {
	border: none;
	box-shadow: none;
}
	kbd kbd:hover {
		-webkit-box-shadow: none;
		box-shadow: none;
	}

sub, sup {
	font-size: 0.7em;
	line-height: calc(var(--line-height)/2);
}

sub {
	vertical-align: sub;
	vertical-align: -30%;
}

sup {
	vertical-align: super;
	vertical-align: 50%;
}


ins, del, s {
	text-decoration-thickness: 0.5px;
}


/*--------------------------------------------------------------
article styles / content elements
.entry-content
--------------------------------------------------------------*/

main ul li:before {
	content: '-';
	/*display: inline-block;*/
	position: absolute;
	margin-left: calc(-1*var(--gutter-width));
	/*outline: 1px solid red;*/
}

main ul li>input[type=checkbox] {
	position: absolute;
	margin-top: calc(var(--line-height)/3);
	margin-left: calc(-1*var(--gutter-width));
}

main ul,
main ol {
	padding-left: calc(var(--gutter-width));

}

/*restore margin to block level elements*/
main p,
main img,
main ul,
main ol,
main figure,
main aside {
	/*margin-top: var(--gutter-width);*/
	margin-bottom: 2rem; /* alternative */
	margin-bottom: var(--gutter-height);
}

main blockquote {
	margin-top: var(--gutter-height);
	margin-bottom: var(--gutter-height);
	padding-left: var(--gutter-width);

	quotes: none;
	text-align: left;
}

main blockquote::before {
	content: '“';
	float: left;
	margin-left: -0.8em;

	font-size: 200%;
	line-height: 1;
}
	main blockquote:lang(el)::before {
		content: '»';
		margin-top: -0.5em;
	}

main blockquote + figcaption {
	text-align: right;
}

.entry-content dd {
	margin-left: var(--gutter-width);
}


/*--------------------------------------------------------------
helper / common classes
--------------------------------------------------------------*/

.center {
	display: block;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.left {
	display: block;
	float: left;
}

.right {
	display: block;
	float: right;
}

.group .left,
.group .right {
	float: none;
}

.group {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	margin: calc(-1*var(--gutter-width)/2);
}

.half {
	flex-basis: calc((var(--content-width)/2 - 0.5*var(--gutter-width)));
	flex-grow: 1;
	margin: calc(var(--gutter-width)/2);
}

.hidden, .secret {
	display: none;
}

.callout {
	margin: var(--gutter-height) auto;
	color: rgb(var(--accent-color));
	font-size: var(--s03);
	line-height: 1.3;
}


/*--------------------------------------------------------------
animations
--------------------------------------------------------------*/

@keyframes sweep-right {
	0%    { opacity: 0; margin-left: -1rem; }
	100%  { opacity: 1; }
}

@keyframes sweep-bottom {
	0%    { opacity: 0; margin-top: -1rem; }
	100%  { opacity: 1; }
}

@keyframes slidey {
	from { transform: translate(0, 100%); }
	to   { transform: translate(0, 0); }
}

@keyframes slidex {
	from { transform: translate(100%, 0); }
	to   { transform: translate(0, 0); }
}

@keyframes bounce {
	0%   { transform: translateY(0); }
	10%  { transform: translateY(0); }
	30%  { transform: translateY(-0.3em); }
	50%  { transform: translateY(0); }
	57%  { transform: translateY(-0.05em); }
	64%  { transform: translateY(0); }
	100% { transform: translateY(0); }
}


/*--------------------------------------------------------------
form styles
--------------------------------------------------------------*/

form {
	margin: var(--gutter-height) 0;
}

input,
textarea,
label {
	font: inherit;
	color: inherit;
	font-size: var(--s-2);
}

input:focus {
	outline: none;
}

input::placeholder {
	color: rgb(var(--text-color));
	opacity: 1;
	transition: all .3s;
}
input:focus::placeholder {
	color: var(--shadow-color);
}

input[type="text"],
input[type="email"],
textarea {
	background: none;
	border: 1.5px solid rgb(var(--text-color));
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
	border-color: rgb(var(--accent-color));
	-webkit-tap-highlight-color: transparent;
}

input[type="text"],
input[type="email"] {
	border-top: none;
	border-left: none;
	border-right: none;
}

input[type="submit"],
input[type="reset"] {
	display: block;
	/*margin: 0.5rem auto;*/
	padding: 0.6rem 0.6rem 0.5rem 0.6rem;

	background: rgb(var(--page-color));
	border: 1.5px solid;
	border-bottom: 3px solid;
	border-radius: 2rem;
	color: rgb(var(--text-color));
	/*letter-spacing: 1px;*/
	line-height: 0.5;	
	font-weight: bold;
	text-decoration: none;

	cursor: pointer;
	pointer-events: auto;

	box-shadow: 0px 5px 0px 0px var(--shadow-color);

	-webkit-appearance: button; /* iOS and Safari fix */
}

input[type="submit"]:hover,
input[type="reset"]:hover {
	box-shadow: inset 0 2rem 0 var(--shadow-color), 0px 3px 0px 0px var(--shadow-color);
	color: rgb(var(--text-color));
	text-decoration: none;
	transform: translate(0, 1px);
}

input[type="submit"]:focus,
input[type="reset"]:focus {
	border-top: 3px solid;
	border-bottom: 1.5px solid;
	box-shadow: inset 0 2rem 0 var(--shadow-color), 0px 3px 0px 0px var(--shadow-color);
	color: rgb(var(--accent-color));
	outline: none;
	/*text-decoration: underline;*/
	-webkit-tap-highlight-color: transparent;
}

input[type="submit"]::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner { border: 0; }

input[type=checkbox] {
	appearance: none;
}
	input[type=checkbox]:before {
		content: '';
		display: inline-block;
		position: absolute;

		width:  0.9em;
		height: 0.9em;

		background: rgb(var(--page-color));
		border: 1.5px solid;
		border-radius: 2px;
	}
	input[type=checkbox]:disabled:before {
		border-style: dotted;
	}
	input[type=checkbox]:checked:after {
		content: '';
		display: inline-block;
		position: absolute;
		
		width:  0.4em;
		height: 1em;
		margin-top: -0.3em;

		border: 3px solid;
		border-top:  none;
		border-left: none;
		box-shadow: 2px 1px 0px rgb(var(--page-color));

		transform: rotate(45deg);
		transform-origin: bottom right;
	}
	input[type=checkbox]:focus {
		outline: none;
	}
	input[type=checkbox]:focus:before,
	input[type=checkbox]:focus:after {
		border-color: rgb(var(--accent-color));
	}

/*--------------------------------------------------------------
table styles
--------------------------------------------------------------*/

table {
	/*display: block;*/
	margin: var(--gutter-height) auto;
	width: 100%;
	/*table-layout: fixed;*/
	overflow-x: scroll;
	
	border-top:    1.5px solid rgb(var(--text-color));
	border-bottom: 1.5px solid rgb(var(--text-color));
	border-spacing: 0.15rem;
	text-align: left;
}

table caption {
	padding-right: var(--gutter-width);

	caption-side: bottom;
	text-align: right;
}

thead, tbody, tr {
	width: 100%;
}

th, td {
	padding: 0.25em;

	border-top: 0.5px dashed transparent;
	border-bottom: 0.5px dashed transparent;

	/*-webkit-transition: all 0.3s;*/
	/*transition        : all 0.3s;*/
}

th {
	border-bottom: 0.5px solid rgb(var(--text-color));
}

th:empty {
	display: none;
}

tr:hover td {
	border-color: rgb(var(--text-color));
}



/*--------------------------------------------------------------
structural styles
--------------------------------------------------------------*/

html {
	/*text-align: center;*/
}

body {
	position: relative;
	max-width: 100%;
	overflow-x: hidden;
	overflow-y: scroll;
}

body > header,
body > footer {
	padding: var(--gutter-height) var(--gutter-width);
	/*width: calc(100vw - var(--scrollbar-width));*/
	/*border: 1px dashed yellow; /* DEBUG */
}

body > header > *,
body > footer > *,
body > main > * {
	margin-left: auto;
	margin-right: auto;
	max-width: var(--content-width,40em);
	/*outline: 1px dashed red; /* DEBUG */
}

body > header {
	position: fixed;
	position: sticky;
	/*position: relative;*/
	top: 0;
	width: 100%;
	z-index: 100;
	padding-bottom: 0;

	background: inherit;
}

body > header:hover,
body > header:focus-within {
	z-index: 103;
}

body > header > * {
	left: var(--gutter-width);
	right: var(--gutter-width);
	height: var(--line-height);
	display: flex;

	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}

body > header h1 {
	display: inline-block;
	margin: 0 0 var(--gutter-height) 0;
	margin: 0;
	padding: 0;
	line-height: 0.5;

	font-size: 100%;
}

body > header h1 > a {
	display: inline-block;
	line-height: 0.5;
}

body > header .description {
	display: inline-block;
	margin-left: 1rem;
	/*color: red;*/
}

body > main {
	position: relative;
	/*margin-top: calc(2*var(--gutter-height) + 3*var(--line-height));*/
	margin-top: calc(3*var(--line-height));
	margin-bottom: calc(100vh + 3*var(--line-height));
	padding: 0 var(--gutter-width);
	min-height: 100vh;

	background: inherit;
	border-bottom: 1px solid transparent; /* to make sure no margin escapes */
	z-index: 100;

	/*background: cyan;*/
}

body > footer {
	position: fixed;
	bottom: 0;
	clear: both;
	height: 100vh;
	width: 100%;
	z-index: 1;

	text-align: center;
	/*background: red;*/
}

body > footer > * {
	position: fixed;
	bottom: var(--gutter-height);
	left: var(--gutter-width);
	right: var(--gutter-width);
}


/*body > footer * {
	outline: 1px dashed red;
}*/

/*body > footer .author-card {
	float: left;
	width: 45%;
	margin-right: var(--gutter-width);

	text-align: left;
}*/

body > footer .author-image {
	margin-bottom: var(--line-height);
}

body > footer .author-image img {
	max-height: calc(3*var(--line-height));
	width: auto;
	border-radius: 50%;
}

body > footer .author-name {
	padding: 0;
}

body > footer .copyright {
	clear: both;
	padding-top: var(--line-height);
}



/*--------------------------------------------------------------
menu styles
--------------------------------------------------------------*/

.menu {
	/*flex-grow: 3;
	display: flex;
	flex-direction: row;*/
	text-align: left;
}

.menu * {
	/*outline: 1px dashed red;*/
}

.menu > ul {
	display: flex;
	flex-basis: 100%;
	flex-wrap: wrap;
	/*padding-top: 0.1rem;*/
	/*outline: 1px dashed red;*/
}

.menu > ul > li {
	display: block;
	padding: 0 0 0 1rem;
}

.menu > ul > li:first-child {
	padding-left: 0;
}

body > header .menu > ul > li.has-children:after {
	content: '⌄';
	display: inline-block; 
	padding-left: 0.5rem;
	/*outline: 1px dashed red;*/
}

body > header .menu li > ul {
	display: none;
	padding: 0 1rem 1rem;
	margin-left: -1rem;
}

body > header .menu li:hover > ul,
body > header .menu li:focus-within > ul {
	position: absolute;
	display: block;
	background: rgba(var(--page-color),0.9);
	backdrop-filter: blur(var(--page-color-blur));
}

body > header .menu ul {
	justify-content: end;
	/*justify-content: space-between;*/
}

body > footer .menu ul {
	/*justify-content: space-between;*/
	justify-content: center;
}



/*--------------------------------------------------------------
panel styles
--------------------------------------------------------------*/

.sticky {
	position: sticky !important;
	top: 0;
}

.panel {
	display: flex;
	position: relative;
	top: 0;
	flex-direction: column;
	padding: var(--gutter-width);
	min-height: 100vh;
	max-width: 100vw;

	margin-left: calc(-1*var(--gutter-width));
	margin-right: calc(-1*var(--gutter-width));

	align-items: center;
	/*backdrop-filter: blur(var(--page-color-blur));*/
	/* too heavy on rendering, doesn't apply well to :before and :after */
	background-color: rgba(var(--page-color), var(--page-color-transparency));
	justify-content: center;
	/*background: red;*/
}
	.panel:first-child {
		/*--page-color-transparency: 1;*/
		/*background: red;*/
		min-height: calc(100vh - var(--gutter-height) - 3*var(--line-height));
	}

body > main:after,
body > main:before,
.panel:before,
.footnotes li[id^="fn:"]:target:before {
	display: block;
	content: '';
	position: absolute;
	left: 0;
	height: calc(3*var(--line-height));
	width: 100%;

	background: inherit;
	white-space: nowrap;
	pointer-events: none;
}	
	body > main:before,
	.panel:before,
	.footnotes li[id^="fn:"]:target:before {
		top: calc(-3*var(--line-height));
		-webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,1) 0, 90%, rgba(0,0,0,0) 100%);
		/*display: none;*/
		/*background: cyan;*/
	}
		.panel:first-child:before {
			display: none;
		}
	body > main:after {
		bottom: calc(-3*var(--line-height));
		-webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0, 90%, rgba(0,0,0,0) 100%);
		/*display: none;*/
		/*background: green;*/
	}

.panel > * {
	display: block;
	flex-shrink: 0;
	margin-left: auto;
	margin-right: auto;
	max-width: var(--content-width);
}


/*--------------------------------------------------------------
hero & fullwidth styles
--------------------------------------------------------------*/

.fullwidth,
.cover {
	display: block;
	max-width: calc(100vw - var(--scrollbar-width));
	width: calc(100vw - var(--scrollbar-width));

	margin-left: calc(50% - 50vw + var(--scrollbar-width)/2) !important;
	margin-right: calc(50% - 50vw + var(--scrollbar-width)/2) !important;

	text-align: center;
	/*grid-column: full;*/
}

.fullwidth img,
.cover img {
		width: 100%;
		height: auto;
		object-fit: cover;
	}

.cover {
	margin-bottom: var(--gutter-height);
	/*font-size: 0;*/
}


/*--------------------------------------------------------------
hyperlink styles
--------------------------------------------------------------*/

a, a:visited {
	vertical-align: baseline;

	background: transparent;
	color: rgb(var(--hyperlink-color));
	text-decoration: underline;
	text-decoration-thickness: 0.5px;
	text-decoration-color: inherit;
	/*text-decoration-skip-ink: auto;*/

	outline: none;
}

a:not([href^="http"]),
a:visited:not([href^="http"]) {
	text-decoration-style: dashed;
}

a[href^="mailto"] {
	text-decoration-style: solid;
	text-decoration-color: inherit;
}

/*a:not([href]) {
	text-decoration-style: dashed;
}*/

.menu a,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
	color: rgb(var(--text-color));
	text-decoration: none;
}

a:focus {
	text-decoration: underline;
	text-decoration-style: dotted;
	text-decoration-thickness: 2px;
	text-decoration-color: inherit;
}

a:hover,
a:focus,
a:active {
	color: rgb(var(--accent-color));
	-webkit-tap-highlight-color: transparent;

	-webkit-transition: color .3s;
	transition        : color .3s;
}

.cta a {
	padding: 0.3rem 0.5rem;

	background: rgb(var(--page-color));
	border: 1.5px solid;
	border-radius: 2rem;
	white-space: nowrap;
}

.cta a:hover,
.cta a:focus,
.cta a:active {
	background: rgb(var(--text-color));
	border-color: rgb(var(--text-color));
	color: rgb(var(--page-color));
}


/*--------------------------------------------------------------
tags styles
--------------------------------------------------------------*/

.tag {
	display: inline-block;
	padding: 0.6em 0.6em 0.5em 0.6em;
	margin: 0 0.4rem 0.4rem 0;

	background: rgb(var(--page-color));
	border: 1.5px solid rgb(var(--text-color));
	border-radius: 2px;
	color: rgb(var(--text-color));
	font-weight: bold;
	letter-spacing: 1px;
	line-height: 0.5;
	text-decoration: none;

	cursor: pointer;
	pointer-events: auto;
	transition: none;

	-webkit-user-select: none !important;
	user-select        : none !important;
}

.tag:first-child {
	margin-left: 0;
}

.tag:hover,
.tag[data-active='true'] {
	background: rgb(var(--text-color));
	border-color: rgb(var(--text-color));
	/*color: rgb(var(--text-color-inverted));*/
	color: rgb(var(--page-color));
}

.tag:focus {
	border-color: rgb(var(--text-color));
	color: rgb(var(--text-color));
	text-decoration: underline;
	text-decoration-style: dotted;
	text-decoration-thickness: 2px;
	outline: none;
	-webkit-tap-highlight-color: transparent;
}

.tag:hover {
	color: rgb(var(--page-color));
}

.tag[data-active='true']:focus {
	color: rgb(var(--page-color));
}

.tag:active {
	background-color: rgb(var(--accent-color));
	border-color: rgb(var(--accent-color));
	color: rgb(var(--page-color));
}


/*--------------------------------------------------------------
link tooltip styles

Provide tooltips in the gutter for links (if they have a title)
and abbr tags
--------------------------------------------------------------*/

a[title*=' ']:not([href*='.jpg']):not([href*='.png']):hover,
ins[datetime]:hover,
del[datetime]:hover,
abbr[title*=' ']:hover,
span[title*=' ']:hover {
	text-decoration: underline;
	text-decoration-style: wavy;
	text-decoration-skip-ink: none;
	text-decoration-thickness: 0.5px;
}

a[title*=' ']:not([href*='.jpg']):not([href*='.png']):before,
ins[datetime]:before,
del[datetime]:before,
abbr[title*=' ']:before,
span[title*=' ']:before {
	/*--tooltip-mark: '↬';*/
	--tooltip-mark: '🔗';
	content: var(--tooltip-mark); 
	display: inline-block;
	position: absolute;
	/*right: calc(-1*var(--gutter-width));*/
	right: 0;
	width: var(--gutter-width);

	/*backdrop-filter: blur(var(--page-color-blur));*/
	color: rgba(var(--text-color),0.33);
	cursor: help;
	font-variant: initial;
	text-align: center;
	text-overflow: ellipsis;
	text-transform: initial;

	-webkit-transition: color 0.3s;
	transition        : color 0.3s;
	/*outline: 1px dashed red;*/
}

a[title*=' ']:not([href*='.jpg']):not([href*='.png']):hover:before,
ins[datetime]:hover:before,
del[datetime]:hover:before,
abbr[title*=' ']:hover:before,
span[title*=' ']:hover:before {
	--page-color-transparency: 1;
	content: attr(title);
	padding: calc(var(--gutter-height)/4) calc(var(--gutter-width)/4) calc(var(--gutter-height)/4) calc(2*var(--gutter-width));
	margin: calc(-1*var(--gutter-height)/4) 2px;
	width: auto;
	max-width: calc(var(--content-width));
	z-index: 100;

	background-color: rgba(var(--page-color),var(--page-color-transparency));
	color: rgb(var(--text-color));
	text-align: right;

	-webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0, 10%, rgba(0,0,0,var(--page-color-transparency)) calc(2*var(--gutter-width)));
	/*background: red;*/
}
	/* wikipedia links icon */
	a[title*=' '][href*='wikipedia.org']:before {
		--tooltip-mark: 'Ꮤ';
	}
	/* PDF links icon */
	a[title*=' '][href*='.txt']:before,
	a[title*=' '][href*='.pdf']:before {
		--tooltip-mark: '🗎';
		--tooltip-mark: '↯';
	}
	/* abbr and other notes icon */
	abbr[title*=' ']:before,
	span[title*=' ']:before {
		--tooltip-mark: '*';
	}
	/* ins and del tags icon and content */
	ins[datetime]:before,
	del[datetime]:before {
		--tooltip-mark: '🕓';
	}
	ins[datetime]:hover:before,
	del[datetime]:hover:before {
		content: attr(datetime);
	}

/* disable click on link tooltips */
a[title*=' ']:active:before {
	pointer-events: none;
}

@media only screen and ( min-width: 1200px ) {
	a[title*=' ']:hover:before,
	ins[datetime]:hover:before,
	del[datetime]:hover:before,
	abbr[title*=' ']:hover:before,
	span[title*=' ']:hover:before {
		width: calc((100vw - var(--content-width))/2 - var(--gutter-width));
	}
}

/*	
@media (pointer: coarse) {
	abbr[title*=' ']:hover:after {
		content: attr(title);
		display: inline-block;
		position: absolute;
		top: 2em;
		left: 0;
		padding: 0.3em 0.5em;

		background: rgba(var(--page-color),var(--page-color-transparency));
		backdrop-filter: blur(var(--page-color-blur));
		border: 1px solid;
	}
}*/

/*--------------------------------------------------------------
social sharing menu
--------------------------------------------------------------*/

.sharing {
	margin-bottom: var(--gutter-height);

	user-select: none;
}

.sharing summary {
	display: inline-block;
	list-style: none;
}
	.sharing summary::-webkit-details-marker {
		display: none;
	}
	.sharing details summary:focus {
		outline: none;
		-webkit-tap-highlight-color: transparent;
	}
	.sharing details:not(:hover) summary:focus {
		text-decoration: underline;
		text-decoration-style: dotted;
		text-decoration-thickness: 2px;
	}
	.sharing details[open] summary::after {
		content: ':';
		text-decoration: none;
	}

.sharing details[open] summary ~ * {
	animation: sweep-right .3s ease-in;
}

.sharing a {
	display: inline-block;
	margin: 0 0.5em;
	/*text-decoration: none;*/
}
	.sharing a:first-of-type {
		margin-left: 0;
	}
	.sharing a:last-child {
		margin-right: 0;
	}


/*--------------------------------------------------------------
social menu & icons
--------------------------------------------------------------*/

.social {
	margin: 0 auto;
	z-index: 104;

	text-align: center;

	-webkit-user-select: none !important;
	user-select : none !important;
}

.social a {
	display: inline-block;
	padding: 0.4em 0.25rem 0.25rem;

	background: none !important;
	text-decoration: none;
	text-shadow: none;
}

.social a:before {
	font-family: var(--font-icons);
}

.social a span {
	display: none;
}

.icon-email:before      { content: '📧'; }
.icon-gitlab:before     { content: '🦊'; }
.icon-github:before     { content: '🐙'; }
.icon-instagram:before  { content: '📷'; }
.icon-twitter:before    { content: '🐦'; }
.icon-facebook:before   { content: '👍'; }
.icon-mastodon:before   { content: '🐘'; }
.icon-webring:before    { content: '🕸'; }
.icon-soundcloud:before { content: '☁'; }
.icon-youtube:before    { content: '📺'; }
.icon-keybase:before    { content: '🔑'; }

/*.icon-email:hover:before { color: #168de2; }*/ /* same color as links */
.icon-gitlab:hover     { color: #e24329; }
.icon-github:hover     { color: #2188ff; }
.icon-instagram:hover  { color: #e4405f; }
.icon-twitter:hover    { color: #1da1f2; }
.icon-facebook:hover   { color: #3b5998; }
.icon-mastodon:hover   { color: #3088d4; }
.icon-soundcloud:hover { color: #ff3300; }
.icon-youtube:hover    { color: #ff0000; }
.icon-keybase:hover    { color: #1da1f2; }

.icon {
	border-width: 0 !important;
	box-shadow: none !important;
	text-align: center !important;
	transform: none !important;
}

/*--------------------------------------------------------------
language selector
--------------------------------------------------------------*/

.languages {
	display: block;
	z-index: 101;
	margin-top: calc(-1*var(--line-height));

	line-height: var(--line-height);
	text-align: right;

	-webkit-user-select: none !important;
	user-select        : none !important;

	/*outline: 1px dashed red;*/

}
	.languages ul {
		display: inline-block;
		list-style: none;
	}

	.languages ul li {
		display: inline-block;
		margin: 0;
		padding-left: 0.5rem;

		/*font-weight: bold;*/
		text-align: right;
	}

	.languages a {
		display: inline;

		text-align: center;
		text-decoration: none;
	}

	.languages .active {
		text-decoration: underline;
	}


/*--------------------------------------------------------------
gadgets

theme toggle, return to top
--------------------------------------------------------------*/

.gadgets {
	position: fixed;
	top: 0;
	bottom: 0;
	right: 0;
	width: var(--gutter-width);
	height: 100%;
	z-index: 104;

	text-align: center;
	pointer-events: none;
	-webkit-user-select: none !important;
	user-select: none !important;
	/*text-shadow: 1px 1px 0 rgb(var(--page-color));*/

	/*outline: 1px dashed cyan;*/
}

.gadgets > * {
	display: block;
	left: 0;
	right: 0;

	margin-left: auto;
	margin-right: auto;
	width: var(--icon-size);
	height: var(--icon-size);
	line-height: var(--icon-size);

	cursor: pointer;
	/*text-align: center;*/
	text-decoration: none;
	pointer-events: auto;

	transition: opacity 0.3s, color 0.3s;

	/*background: rgb(var(--page-color));*/
	/*border-radius: 50%;*/

	/*outline: 1px dashed red;*/
}

.gadgets #theme-toggle {
	position: absolute;
	top: var(--gutter-width);
	/*top: calc(var(--gutter-width) + var(--icon-pad));*/

	cursor: pointer;
	opacity: var(--theme-toggle,1);
}

.gadgets a[title]:not(:hover):before {
	display: none;
}

.gadgets #next {
	position: absolute;
	top: calc(var(--gutter-width) + 3*var(--line-height) - var(--gutter-width)/2);
}

.gadgets #prev {
	position: absolute;
	top: calc(var(--gutter-width) + 3*var(--line-height) + var(--gutter-width)/2);
}

.gadgets #scroller {
	position: absolute;
	bottom: var(--gutter-width);
}

.gadgets #scroller.up {
	animation: bounce 2s ease 1;
}
	.gadgets #scroller.up:hover {
	animation-iteration-count: infinite;
	}

.gadgets #scroller.hide {
	opacity: 0;
}

.gadgets #scroller.down {
	transform: scaleY(-1);
}
	.gadgets #scroller.down span {
		display: inline-block;
		animation: bounce 2s ease 3;
	}


/*--------------------------------------------------------------
article filter styles
--------------------------------------------------------------*/


#articles-filter {
	position: relative;
	padding-top: 0.4rem;
	line-height: 0;
	z-index: 103;

	text-align: center;
	pointer-events: none;
}

#articles-filter .tag:after {
	display: inline-block;
	content: '⨯';
	margin-left: 0.3em;

	color: rgba(var(--text-color),0);
	text-decoration: none !important;
	text-align: center;
	/*vertical-align: 15%;*/
}

#articles-filter .tag[data-active='true']:after {
	/*content: '◆';*/
	/*content: '⨯';*/

	color: rgb(var(--page-color));
}

#articles-filter__reset:after {
	content: '👁' !important;
}

#articles-filter.noscript #articles-filter__reset {
	display: none;
}

#articles-filter.noscript .tag:after {
	content: '(' attr(data-count) ')';
	color: inherit;
}

[data-visibility='on'] {
	opacity: 1;
	z-index: 100;

	-webkit-transition: all 0.3s linear;
	transition        : all 0.3s linear;
}

[data-visibility='off'] {
	position: relative;
	height: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	opacity: 0.05 !important;

	pointer-events: none !important;
	-webkit-user-select: none !important;
	user-select        : none !important;

	transform-origin: center center;

	-webkit-transition: all 0.3s linear;
	transition        : all 0.3s linear;
}

[data-visibility='off'] > * {
	height: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;

	transition: transform 0.6s;
}

[data-visibility='off'] img {
	opacity: 0;
}

/*add some placement randomness*/

[data-visibility='off']:nth-child(odd) {
	transform: scale(0.9);
}

[data-visibility='off']:nth-child(3n) {
	transform: translateZ(80px), scale(0.6);
}

[data-visibility='off']:nth-child(even) {
	transform: translateZ(60px), scale(0.7);
}

[data-visibility='off']:nth-child(4n) {
	transform: translateZ(90px), scale(0.4);
}


/*--------------------------------------------------------------
articles-list styles
--------------------------------------------------------------*/


.articles-list {
	/*position: relative;*/
	margin-bottom: var(--gutter-height);
	width: 100%;
	/*outline: 1px dashed cyan;*/
	/*will-change: opacity;*/
}

.articles-list > summary {
	display: flex;
	align-items: stretch;
	justify-content: end;
	flex-wrap: wrap;
	padding-top: calc(var(--line-height)/2);
	margin-bottom: calc(var(--line-height)/2);

	list-style: none;
	transform: translateZ(0);
}
	.articles-list > summary::-webkit-details-marker {
		display: none;
	}
	.articles-list > summary:focus {
		outline: none;
		-webkit-tap-highlight-color: transparent;
	}

/*.articles-list > summary,
.articles-list > summary > * {
	outline: 1px dashed red;
}*/

.articles-list[open] summary ~ * {
	animation: sweep-bottom .1s ease;
}

.articles-list > summary:focus h2 {
	text-decoration: underline;
	text-decoration-style: dotted;
	text-decoration-thickness: 2px;
}

.articles-list > summary h2 {
	display: inline-block;
	flex-grow: 1;
	margin: 0;
	padding: 0;
	line-height: 0.7;

	cursor: pointer;
}
	.articles-list > summary h2::after {
		display: inline-block;
		content: '[…]';
		margin-left: 0.5em;
	}
		.articles-list[open] > summary h2::after {
			content: '';
		}

.articles-list > summary .more {
	display: inline-block;
	opacity: 0;

	font-weight: bold;
	text-align: right;
	white-space: nowrap;

	transition: opacity 0.3s;

	-webkit-user-select: none !important;
	user-select: none !important;
}
	.articles-list[open] > summary .more {
		opacity: 1;
	}
	.articles-list > summary:hover .more,
	.articles-list > summary:focus .more {
		opacity: 1;
	}

.articles-list > summary .more a {
	text-decoration: none;
}

.articles-list > .wrapper {
	text-align: center;
}

.articles-list article {
	max-width: var(--content-width);
	vertical-align: top;
	text-align: left;
	z-index: 1;
}

.articles-list article + article {
	margin-top: var(--gutter-height);
}

.articles-list article > a {
	display: block;
	text-decoration: none !important;
}

/*.articles-list article > a > * { outline: 1px dashed red; }*/

.articles-list article > a:focus h3 {
	text-decoration: underline;
	text-decoration-style: dotted;
	text-decoration-thickness: 2px;
}

.articles-list article .thumbnail {
	margin: 0;
	overflow: hidden;
}

.articles-list article > a:hover .thumbnail img {
	transform: scale(1.05);
	transition-delay: 0s;
}

.articles-list article .thumbnail img {
	margin: 0;

	font-size: 0;

	transition: transform .3s .6s;
}

.articles-list article.overflow .thumbnail {
	overflow: initial;
}

.articles-list article.overflow .thumbnail img {
	background-size: 0 0;
}

.articles-list article .thumbnail:empty {
	display: none !important;
}

.articles-list article .thumbnail img {
	margin: 0;
	width: 100%;
}

.articles-list article .title {
	order: 1;
	display: inline-block;
	margin: 0 calc(var(--line-height)/3) 0 0;
	padding: 0;

	font-size: inherit;
}

.articles-list article .time {
	order: 4;
	display: block;

	color: rgb(var(--text-color));
}

.articles-list article .author {
	order: 3;
	margin: 0;
}

.articles-list article .summary {
	order: 3;
	display: inline;
	margin: 0;
	/*outline: 1px dashed red;*/
}
	.articles-list article .summary:after {
		content: ' →';
		/*content: ' ›';*/
		display: inline-block;
		color: rgb(var(--accent-color));
		transition: padding 0.3s 0.6s;
	}
	.articles-list article:hover .summary:after {
		padding-left: 0.25rem;
		transition-delay: 0s;
	}

.articles-list article .rating {
	order: 2;
	margin: 0;

	color: inherit;
}


.articles-list article .tags {
	/*display: none;*/
	margin: 0;
}

.articles-list article .tags .tag {
	border-color: var(--shadow-color);
}

.articles-list article.preformatted,
.articles-list article.preformatted pre {
	display: inline-block;
	margin-left: auto;
	margin-right: auto;
}

.articles-list article.preformatted {
	width: 100%;
	overflow-x: auto;
	text-overflow: ellipsis;
	text-align: center;
}

.articles-list article.preformatted pre {
	width: auto;
	text-align: left;
}

.articles-list article.ephemera {
	margin-left: var(--gutter-width);
	margin-right: var(--gutter-width);
}



/*--------------------------------------------------------------
articles oddities classes
--------------------------------------------------------------*/

article.draft:before {
	content: 'DRAFT';
	display: inline-block;
	/*float: left;*/
	margin: 0 0 0.5em 0;
	padding: 0.3em 0.5em;
	line-height: 1;

	border: 2px solid;
	color: rgb(var(--text-color));
	font-size: 60%;
	font-weight: bold;
}



/*--------------------------------------------------------------
articles cross-language display
--------------------------------------------------------------*/

.articles-list:lang(en) article:lang(el) a > *,
.articles-list:lang(el) article:lang(en) a > *
{
	opacity: 0.5;
	filter: blur(1px);

	transition: opacity 0.2s, transform 1s;
}
	.articles-list:lang(en) article:lang(el):hover a > *,
	.articles-list:lang(el) article:lang(en):hover a > *
	{
		opacity: 1 !important;
		filter: blur(0px);

		transition: opacity 0.3s, transform 1s;
	}



/*--------------------------------------------------------------
articles-list - side
--------------------------------------------------------------*/

.articles-list.side article a {
	display: grid;
	grid-template-columns: 40% 1fr;
	grid-column-gap: var(--gutter-width);
}

.articles-list.side article .thumbnail {
	grid-column: 1;
	grid-row: 1 / span 4;
}

.articles-list.side article .thumbnail img {
	height: 100%;
	object-fit: cover;
}

.articles-list.side article .time,
.articles-list.side article .title,
.articles-list.side article .summary {
	grid-column: 2;
}

.articles-list.side.alternate article:nth-child(2n) a {
	grid-template-columns: 60% 1fr;
}

.articles-list.side.alternate article:nth-child(2n) .thumbnail {
	grid-column: 2;
}

.articles-list.side.alternate article:nth-child(2n) .time,
.articles-list.side.alternate article:nth-child(2n) .title,
.articles-list.side.alternate article:nth-child(2n) .summary {
	grid-column: 1;
}



/*--------------------------------------------------------------
articles-list - stack
--------------------------------------------------------------*/

.articles-list.stack > .wrapper {
	display: flex;
	flex-direction: column;
}

.articles-list.stack article + article {
	margin-top: var(--line-height);
}

.articles-list.stack article > a {
	display: flex;
	flex-wrap: wrap;
}

.articles-list.stack article > a > * {
	vertical-align: middle;
}

.articles-list.stack .thumbnail {
	display: none;
}

.articles-list.stack .time {
	display: inline-block;
	flex-shrink: 0;
	flex-grow: 0;
	flex-basis: 9ch;
	margin-left: 1ch;
	order: 3;
	/*outline: 1px dashed red;*/
}

.articles-list.stack .title {
	order: 1;
	flex-basis: 100%;
	overflow: hidden;

	text-overflow: ellipsis;
	white-space: nowrap;
}

.articles-list.stack .summary {
	display: inline-block;
	order: 2;
	flex-grow: 1;
	flex-basis: 50%;
	overflow: hidden;

	text-overflow: ellipsis;
	white-space: nowrap;
}



/*--------------------------------------------------------------
articles-list - cluster
--------------------------------------------------------------*/

.articles-list.cluster {
	/*padding: calc(var(--gutter-width)/2);*/
}
.articles-list.cluster > .wrapper {
	display: flex;
	flex-direction: columns;
	flex-wrap: wrap;
	justify-content: flex-start;
	margin: calc(-1*var(--gutter-height)/2) calc(-1*var(--gutter-width)/2);
}

.articles-list.cluster article {
	display: inline-block;
	/*flex-basis: calc((var(--content-width)/2 - var(--gutter-width)));*/
	flex-basis: calc((var(--content-width)/4 - var(--gutter-width)));
	flex-grow: 1;
	flex-shrink: 0;
	margin: calc(var(--gutter-height)/2) calc(var(--gutter-width)/2);
	min-width: 14rem;
	/*outline: 2px dashed red;*/
}

.articles-list.cluster article:nth-last-child(1):nth-child(odd) {
	flex-grow: 0;
	/*outline: 2px solid red;*/
}



/*--------------------------------------------------------------
articles-list - no-tags
--------------------------------------------------------------*/
.articles-list.no-tags .tags {
	display: none;
}

/*--------------------------------------------------------------
articles-list - no-summary
--------------------------------------------------------------*/
.articles-list.no-summary > .summary,
.articles-list.no-summary > .summary:after {
	display: none;
}


/*--------------------------------------------------------------
articles-list - no-gap
--------------------------------------------------------------*/
.articles-list.no-gap {
	--gutter-width: 0px;
}


/*--------------------------------------------------------------
articles-list - no-text
--------------------------------------------------------------*/

.articles-list.no-text article .time,
.articles-list.no-text article .title,
.articles-list.no-text article .tags,
.articles-list.no-text article .summary,
.articles-list.no-text article .summary:after {
	display: none;
}

.articles-list.no-text article .thumbnail{
	display: block;
}



/*--------------------------------------------------------------
articles-list - no-time
--------------------------------------------------------------*/
.articles-list.no-time article .time {
	display: none;
}



/*--------------------------------------------------------------
articles-list - no-thumbnail
--------------------------------------------------------------*/
@supports (pointer-events: none) {
	.articles-list.no-thumbnail article .thumbnail {
		display: block;
		position: fixed;
		top: -0.5vh;
		left: -0.5vw;
		margin: 0;
		z-index: 103;

		pointer-events: none;
		transition: transform 1s;
	}

	.articles-list.no-thumbnail article .thumbnail img {
		position: relative;
		width: 101vw;
		height: 101vh;

		object-fit: cover;

		filter: blur(3px);
		opacity: 0;

		transform: translateZ(0); /* force GPU rendering */

		transition: all 1s;
	}
		.articles-list.no-thumbnail article:hover .thumbnail img {
			opacity: 0.2;
		}
}



/*--------------------------------------------------------------
articles-list - thumb ratio
--------------------------------------------------------------*/
.articles-list[class*="thumbnail-"] article .thumbnail {
	position: relative;
	overflow: hidden;
	/*outline: 1px solid red;*/
}

.articles-list[class*="thumbnail-"] article .thumbnail img {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	height: 100%;
	object-fit: cover;
}

.articles-list.thumbnail-4\:3 article .thumbnail {
	padding-top: 75%;
}

.articles-list.thumbnail-3\:4 article .thumbnail {
	padding-top: 133%;
}

.articles-list.thumbnail-16\:9 article .thumbnail {
	padding-top: 56%;
}

.articles-list.thumbnail-9\:16 article .thumbnail {
	padding-top: 178%;
}

.articles-list.thumbnail-2\:1 article .thumbnail {
	padding-top: 50%;
}

.articles-list.thumbnail-1\:1 article .thumbnail {
	padding-top: 100%;
}

.articles-list.thumbnail-circle article .thumbnail {
	padding-top: 100%;
	border-radius: 50%;
}




/*--------------------------------------------------------------
single article meta styles
--------------------------------------------------------------*/

.h-entry .title {
	/*padding-top: var(--gutter-height);*/
}

.h-entry .title,
.h-entry .summary {
	margin-bottom: var(--gutter-height);
}

.meta {
	margin-top: calc(-1*var(--line-height)/4) !important;
	margin-bottom: var(--line-height);
	/*TODO: align to baseline, but need to get rid of important*/
	/*outline: 1px solid red;*/
}

.meta details {
	padding: calc(var(--gutter-height)/4) calc(var(--gutter-height)/2);
	border-top: 0.5px dashed;
	/*outline: 1px dashed red;*/
	transition: color 0.3s, border 0.3s;
}
	.meta details:last-child {
		border-bottom: 0.5px dashed;
	}
	.meta details:not([open]) {
		color: rgba(var(--text-color),.3);
	}
	.meta details:hover {
		color: rgb(var(--text-color));
	}	
	.meta details:hover + details,
	.meta details[open] + details {
		border-top-color: rgb(var(--text-color));
	}
	.meta details[open] {
		padding-bottom: var(--line-height);
	}


.meta details summary {
	list-style: none;
	cursor: pointer;
	/*cursor: zoom-in;*/
}
	.meta details summary::-webkit-details-marker {
		display: none;
	}
	.meta details summary:focus {
		outline: none;
		-webkit-tap-highlight-color: transparent;
	}
	.meta details:not(:hover) summary:focus {
		text-decoration: underline;
		text-decoration-style: dotted;
		text-decoration-thickness: 2px;
	}
	.meta details summary::after {
		display: inline-block;
		content: '[…]';
		margin-left: 0.5em;
		font-size: initial;
	}
	.meta details summary {
		/*cursor: zoom-out;*/
	}
	.meta details[open] summary::after {
		content: '⌃';
		float: right;
	}

.meta details[open] summary ~ * {
	animation: sweep-bottom .1s ease-in;
}

@media only screen and ( max-width: 1200px ) {
	.meta dl {
		display: grid;
		grid-template-columns: minmax(34%, max-content) 1fr;
	}
}

.meta dt {
	grid-column: 1;
	margin-right: 0.5rem;
	/*margin-bottom: calc(-0.6*var(--line-height));*/
}
	.meta dt:after {
		content: ':';
	}

.meta dd {
	grid-column: 2;
}

#TableOfContents ul {
	padding: 0;
	margin: 0;
	/*counter-reset: item;*/
}

#TableOfContents ul li:blank {
	background: red;
}

#TableOfContents li:before {
	position: relative;
	margin: 0;
}

#TableOfContents ul > li {
	counter-increment: item;
}

#TableOfContents ul > li:before {
	padding-right: 0.1rem;
	content: counters(item, '.') '. ';
}

/*#TableOfContents > ul > li:first-child + li {
	counter-reset: item;
}

#TableOfContents > ul > li:first-child:before {
	content: '';
	margin: 0;
	padding: 0;
}*/

#TableOfContents ul ul {
	counter-reset: item;
}

/*--------------------------------------------------------------
sidenote & marginalia styles
--------------------------------------------------------------*/

.marginalia:before,
.entry-content aside:before {
	/*content: '⊕';*/
	content: '⥊';
	display: block;
	position: absolute;
	right: 0;
	width: var(--gutter-width);
	overflow: visible;

	color: rgba(var(--text-color),0.33);
	cursor: n-resize;
	line-height: 1.2rem;
	text-align: center;

	transition: all .3s;

	/*outline: 1px dashed red;*/
}
	.marginalia:hover:before,
	.entry-content aside:hover:before {
		color: rgba(var(--text-color),1);
	}

.marginalia,
.entry-content aside {
	margin: var(--gutter-height) 0;
	padding: calc(var(--gutter-width)/2);
	max-height: calc(2.1*var(--line-height));
	overflow: hidden;

	background-clip: border-box;
	border: 0.5 dashed;
	border-right: none;
	border-left: none;
	text-overflow: ellipsis;
	transition: max-height 1s 1s;

	/*-webkit-mask-image: linear-gradient(top, rgba(0,0,0,1) 1rem, rgba(0,0,0,0) 90%);*/
}

.marginalia:hover,
.entry-content aside:hover {
	max-height: 100vh;
	z-index: 101;
	transition-delay: 0s;

	/*-webkit-mask-image: none;*/
}

/*.marginalia:after,
.entry-content aside:after {
	content: attr(title);
	outline: 2px dashed red;
}*/


@media only screen and ( min-width: 1200px ) {
	/*.meta,*/
	header aside,
	.marginalia,
	.entry-content aside {
		position: absolute;
		float: left;
		margin: 0 0 0 calc(-1*var(--gutter-width));
		padding: 0;
		max-width: calc(var(--content-width)/1.61);
		width: calc((100vw - var(--content-width))/2 - 2*var(--gutter-width));
		max-height: 100%;
		transform: translate(-100%, 0);

		border: none;

		-webkit-mask-image: none;
	}
	.marginalia:before,
	.entry-content aside:before {
		display: none;
	}
}


/*--------------------------------------------------------------
footnotes and targeting
--------------------------------------------------------------*/

.footnote-ref, .footnote-backref {
	display: inline-block;
	color: inherit;
	font-family: var(--font-icons);
	text-decoration: none;
}

.footnote-backref {
	margin-left: 0.5em;
}


.footnote-ref + .footnote-ref::before {
	/*content: ', ';*/
}

.footnotes ol {
	padding: var(--gutter-width) 0;
	list-style-position: inside;
	/*outline: 1px solid green;*/
}

.footnotes li p {
	display: inline;
}

.footnotes li[id^="fn:"]:target {
	position: fixed;
	bottom: 0;
	padding: var(--gutter-width) 0;
	margin-left: calc(-1*var(--page-color-blur)/2);
	width: calc(100% - 2*var(--gutter-width) + var(--page-color-blur));
	max-width: calc(var(--content-width) + var(--page-color-blur));
	z-index: 100;

	background-color: rgba(var(--page-color),var(--page-color-transparency));
	/*backdrop-filter: blur(var(--page-color-blur));*/

	animation: slidey .3s;
}

.footnotes li[id^="fn:"]:target .footnote-backref {
	visibility: hidden;
}
	.footnotes li[id^="fn:"]:target .footnote-backref:after {
		content: '⨯';
		visibility: visible;
		position: absolute;
		top: -0.1rem;
		right: 0.5rem;

		cursor: pointer;
	}

sup[id^="fnref:"] a {
	padding-right: 0.3rem;
}

/*h2:target, h3:target,*/
sup[id^="fnref:"]:target a {
	color: rgb(var(--accent-color));
}
h2:target:after, h3:target:after, h4:target:after,
sup[id^="fnref:"]:target:after {
	content: '◄';
	position: absolute;
	right: 0;
	width: var(--gutter-width);
	line-height: calc(1*var(--line-height));

	color: rgb(var(--accent-color));
	font-family: var(--font-icons);
	font-size: initial;
	text-align: center;

	animation: slidex .3s;
}

[id^="fn:"],
[id^="fnref:"],
[id^="fn:"] a,
[id^="fnref:"] a {
	text-decoration: none;
}


/*--------------------------------------------------------------
embeds
--------------------------------------------------------------*/

.video {
	position: relative;
	padding-bottom: 56.25%;
	margin-bottom: var(--gutter-height);
	height: 0;
	overflow: hidden;
}

.video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	border:0;
}

/*--------------------------------------------------------------
gallery
--------------------------------------------------------------*/

/*.gallery {
	position: relative;
	height: 50vh;
	margin: 6rem 3rem;

	counter-reset: items;
}

.gallery:after {
	content: attr(data-current) ' / ' counter(items);

	position:absolute;
	bottom: 0;
	right: 0;

	font-size: var(--s-3);
}

.gallery figure {
	position: absolute;
	top: 0;
	left: 0;

	counter-increment: items;

	transition: transform .3s;
	transform: var(--gallery-transform);
}

.gallery figure:first-child {
	z-index: 1;
}

.gallery figcaption {
	visibility: hidden;
	margin-top: 1.5rem;
}

.gallery.no-caption figcaption {
	display: none;
}

.gallery .top figcaption {
	visibility: visible;
}

.gallery img {
	max-height: 50vh;
	width: auto;
	margin: 0 auto;

	cursor: pointer;
	mix-blend-mode: normal;
	box-shadow: 0 4px 8px rgba(var(--text-color),0.07),
				0 8px 16px rgba(var(--text-color),0.07),
				0 16px 32px rgba(var(--text-color),0.07),
				0 32px 64px rgba(var(--text-color),0.07);
	outline: 1px solid rgba(var(--text-color),0.1);

	transform-origin: center;
	transition: transform .3s 1s;
}

.gallery img:hover {
	transform: scale(1.2);
	transition-delay: 0s;
}

.gallery .top img {
	box-shadow: 0 4px 12px 4px rgba(var(--text-color),0.5);

	transform: scale(1.2);
	transition-delay: 0s;
}

.gallery .top img {
	cursor: e-resize;
	background: rgb(var(--page-color));
}*/



/*.gallery figure,*/
.gallery {	
	/*outline: 2px dashed red;*/
}


.gallery {
	position: relative;
	margin: var(--gutter-height) auto;

	column-count: 2;
	column-gap: var(--gutter-width);
	counter-reset: items;
}

.gallery figure {
	counter-increment: items;

	transition: transform .3s;
}

.gallery figure:first-child {
	z-index: 1;
}

.gallery figcaption {
	/*transition: all .3s .3s;*/
}

.gallery img {
	width: 100%;
	margin: 0 auto;

	cursor: pointer;
	mix-blend-mode: normal;

	transform-origin: center;
	transition: transform .3s 1s;
}

.gallery img:hover {
	transition-delay: 0s;
}

.gallery {
	column-count: 2;
	column-gap: var(--gutter-width);
}

.gallery.spread,
.gallery.shuffled {
	position: relative;
	margin: calc(2*var(--gutter-height)) auto;
	columns: initial;
}

.gallery.shuffled {
	--gallery-height: 70vh;

	height: var(--gallery-height);
}

.gallery.spread:after,
.gallery.shuffled:after {
	content: attr(data-current) '/' counter(items);
	display: block;
	position: absolute;
	top: calc(-1.5 * var(--gutter-height));
	right: 0;

	font-size: var(--s-2);
}

.gallery.shuffled figure {
	position: absolute;
	top: 0;
	margin: 0;

	transform-origin: top left;
	transform: translate(calc(1.33rem * var(--rand-x)), calc(1.33rem * var(--rand-y))) rotate(calc(1deg * var(--rand-deg)));
}

.gallery.spread figure img,
.gallery.shuffled figure img {
	max-height: var(--gallery-height);
	width: auto;

	outline: 1px solid rgba(var(--text-color), 0.2);
}

.gallery.spread figure:hover img,
.gallery.shuffled figure:hover img {
	outline: 1px solid rgba(var(--text-color), 0.3);
}

.gallery.spread figure.top img,
.gallery.shuffled figure.top img {
	background: rgb(var(--page-color));
	cursor: e-resize;
	transition-delay: 0s;

	box-shadow: 0 4px 12px 4px rgba(var(--text-color), 0.5);
}

.gallery.spread figcaption,
.gallery.shuffled figcaption {
	position: absolute;
	top: calc(-1.5 * var(--gutter-height));
	left: 0;
	margin: 0;

	opacity: 0;
	transform: translate(calc(-1.33rem * var(--rand-x)), calc(-1.33rem * var(--rand-y))) rotate(calc(-1deg * var(--rand-deg)));
	transition: all .3s;
}

.gallery.spread figure.top figcaption,
.gallery.shuffled figure.top figcaption {
	opacity: 1;
}

.gallery.spread {
	width: calc(100% - 10%);
}

.gallery.spread figure {
	position: relative;
	display: inline-block;
	width: 30%;
	margin-right: -10%;
	/*transform: rotate(calc(-1deg * var(--rand-deg)));*/
	transform: rotate(2deg);
}

.gallery.spread figure:hover,
.gallery.spread figure.top {
	transform: scale(1.1);
	z-index: 100;
}

.gallery.spread figcaption {
	/*transform: rotate(calc(1deg * var(--rand-deg)));*/
}

.gallery.no-caption figcaption {
	visibility: hidden;
}



/*--------------------------------------------------------------
simple-signup form shortcode
--------------------------------------------------------------*/

.simple-signup form {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: end;
	margin: var(--gutter-height) auto;
	max-width: 15rem;

	background: rgba(var(--page-color), 0);
	border: 1.5px solid;
	border-radius: 1rem;

	transition: all .3s;
}

.simple-signup form:focus-within {
	background: rgb(var(--page-color));
	border-color: rgb(var(--accent-color));
}

.simple-signup input {
	margin: 2px;
}

.simple-signup label {
	position: absolute;
	margin: 0 0.8em;
	padding-bottom: calc(var(--line-height)/2);
	width: calc(100% - 2*0.8em);
	line-height: 1.2;

	text-align: left;

	transform: translate(0,-100%);
}

.simple-signup input[type="email"] {
	flex-grow: 1;
	flex-shrink: 0;
	flex-basis: 0;
	margin-left: 0.8em;

	border-color: transparent;
}

.simple-signup input[type="submit"] {
	box-shadow: none;
}


/*--------------------------------------------------------------
DEBUG
testing baseline
--------------------------------------------------------------*/

/*:root {
	--baseline: var(--line-height);
	--baseline-offset: 0px;
	--color: hsla(204, 80%, 72%, 0.25);
}

:root {
	--background-baseline: repeating-linear-gradient(
		to bottom,
		var(--color),
		var(--color) 1px,
		transparent 1px,
		transparent var(--baseline)
	);
}

html::before {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	margin-right: auto;
	margin-left: auto;
	width: 100%;
	max-width: var(--max_width);
	min-height: 100vh;
	height: 100%;
	content: '';
	background-image: var(--background-baseline);
	background-size: 100%;
	background-position: 0 var(--baseline-offset);
	z-index: 1000;
	pointer-events: none;
}*/


/*--------------------------------------------------------------
EXPERIMENTAL
Snap scroll
--------------------------------------------------------------*/

html {
	/*scroll-snap-type: y proximity;*/
	/*scroll-snap-stop: always;*/
}

body {
	scroll-snap-type: y proximity;
	scroll-snap-stop: always;
}

.snap {
	scroll-snap-align: start;
	/*border: 1px solid red;*/
}