:root {
	--base-fontsize: clamp(1.2rem, 4vw, 1.6rem);
	--base-v-margin: 1.3em;
	--base-h-margin: 1em;
	--text-font:
		"Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, serif;
	font-weight: normal;
	--code-font:
		ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas,
		"DejaVu Sans Mono", monospace;
	--deco-font:
		"Segoe Print", "Bradley Hand", Chilanka, TSCu_Comic, casual, cursive;
	font-weight: normal;

	--link-color: #6fafb2;
	/* #c0c0ac; */
	--text-color: #e9efec;
	--code-color: #b9bfbc;
	--fill-color: #211e20;
	--altf-color: #322f31;
}

:target:before {
	margin-top: 4rem;
}

*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
}

::target-text,
::selection {
	color: var(--text-color);
	background-color: var(--link-color);
}

html {
	box-sizing: border-box;
	scroll-behavior: smooth;
	text-wrap: pretty;
	-webkit-font-smoothing: antialiased;
}

body {
	font-size: var(--base-fontsize);
	font-family: var(--text-font);
	overflow-x: hidden;
	text-wrap: pretty;
	margin: 0;
	background-color: var(--fill-color);
	color: var(--text-color);
}

a {
	color: var(--link-color);
}

figure {
	margin: 0;
}

figcaption {
	margin-top: var(--base-v-margin);
}

hr {
	height: 0.0125rem;
	border: 0;
	border-bottom: 0.0125rem solid var(--text-color);
}

mark {
	background-color: var(--link-color);
	color: var(--fill-color);
}

strong {
	font-weight: 800;
}

aside {
	position: sticky;
	top: 0;
	background-color: var(--altf-color);
	border: 0 none;
	z-index: 1;

}

aside::after {
	content: "";
	display: block;
	box-shadow: 0 0 1rem red;
}

nav {
	max-width: 60rem;
	margin-left: auto;
	margin-right: auto;
	padding: 1rem var(--base-h-margin);
	text-align: left;
}

nav a {
	font-size: smaller;
	margin-right: var(--base-h-margin);
	text-decoration: none;
	font-weight: 700;
}

article>*+*,
footer>*+*,
{
margin-top: var(--base-v-margin);
margin-bottom: 0;
}

h2,
h3,
h4,
h5,
h6,
.meta,
.footnotes,
#cover-image-notes,
footer {
	margin-top: calc(1.5 * var(--base-v-margin));
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: normal;
	line-height: 112.5%;
	scroll-margin-top: 5rem;
}

h1 {
	margin-top: 1rem;
	font-size: 212.5%;
	font-weight: 600;
}

h2 {
	font-size: 187.5%;
}

h3,
h4 {
	font-style: italic;
	font-size: 150%;
}

h5,
h6 {
	font-size: 112.5%;
}

p {
	line-height: calc(1ex / 0.32);
}

article>p:first-of-type {
	font-size: 125%;
}

@supports (initial-letter: 2 2) or (-webkit-initial-letter: 2 2) {
	article>p:first-of-type+p::first-letter {
		-webkit-initial-letter: 2 2;
		initial-letter: 2 2;
		margin-right: 0.5rem;
		font-weight: 200;
	}
}

code {
	font-size: smaller;
	color: var(--code-color);
}

p>code {
	margin-left: 0.5em;
	margin-right: 0.5em;
}

img,
video {
	height: auto;
	width: 100%;
}

iframe {
	border: 0;
}

sup {
	vertical-align: top;
}

table {
	display: table;
	border-collapse: collapse;
	border-spacing: 0;
	overflow-x: auto;
	page-break-inside: auto;
	min-width: 100%;
}

@media only screen and (max-width: 400px) {
	table {
		display: block;
	}
}

td,
th {
	padding: 0.125rem 0.5rem;
	font-family: var(--spot-font);
}

th {
	background: var(--altf-color);
	color: var(--text-color);
	font-weight: 800;
}

tr {
	page-break-inside: avoid;
	page-break-after: auto;
}

tr:nth-child(odd) {
	background-color: var(--altf-color);
}

article {
	max-width: 60rem;
	margin-left: auto;
	margin-right: auto;
	padding: var(--base-h-margin);
	hyphens: auto;
}

header {
	padding: 0;
}

header img {
	display: block;
	height: 66vh;
	object-position: center;
	object-fit: cover;
}

@media only screen and (max-width: 400px) {
	header img {
		height: 50vh;
	}
}

header blockquote {
	padding: 0.125em 0.5em;
	margin: 0 0 0 auto;
	font-size: small;
	font-style: italic;
	width: max-content;
	opacity: 50%;
	position: relative;
}

footer ul {
	list-style: none;
	padding: 0;
}

footer p {
	font-size: smaller;
}

ul.info li:first-child {
	display: block;
	float: left;
	width: 4rem;
	height: 4rem;
	margin-right: 0.5em;
	border-radius: 50%;
	overflow: hidden;
}

.photo_single ul {
	list-style: none;
	padding: 0;
}

/**
 * display only one image full-width
 */
.photo_single img {
	display: block;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.photo_uncropped img {
  display: block;
  aspect-ratio: auto;
  object-fit: fill;
}

/**
 * display any number of images within a gallery
 */
.photo_gallery ul {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(30vh, 100%), 1fr));
	gap: 3rem 1.5rem;
	list-style: none;
	padding: 0;
}

.photo_gallery hr {
	margin-left: 0;
	width: 4ch;
}

.photo_gallery a,
.photo_single a {
	text-decoration: none;
}

.footnotes ol {
	/* border-top: 0.0125rem solid var(--text-color); */
	counter-reset: item;
	list-style-type: none;
	padding-left: 0;
	padding-right: 0;
	margin-left: 0;
}

.footnotes ol li:before {
	content: counter(customlistcounter) "\00a0";
	vertical-align: super;
	font-weight: 800;
	font-size: 0.83em;
	font-variant-numeric: oldstyle-nums;
	float: left;
}

.footnotes ol li {
	counter-increment: customlistcounter;
	font-variant-numeric: oldstyle-nums;
	/* break-inside: avoid-column; */
}

a.footnote-ref sup {
	position: relative;
	top: -0.5em;
	font-weight: 800;
	font-size: 0.83em;
	font-variant-numeric: oldstyle-nums;
}

.photo_gallery img {
	display: block;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.photo_gallery h4 {
	font-size: 100%;
	font-weight: 800;
	font-style: normal;
	line-height: inherit;
	margin-top: 0;
	margin-bottom: 0;
}

#cover-image-notes,
.footnotes,
figure>figcaption {
	font-size: smaller;
	font-style: italic;
}

/**
 * somehow, AppleScript is not recognized properly by Pandoc and therefore
 * rendered without a parent div.
 */
div.sourceCode,
pre.applescript {
  box-sizing: border-box;
	max-width: 100%;
	width: 100%;
	border: 1px solid var(--code-color);
	border-radius: 0.5rem;
	padding: 1rem 1rem;
	display: inline-block;
	overflow-x: auto;
	overflow-wrap: anywhere;
}

div.sourceCode>pre {
	margin-top: 0;
	margin-bottom: 0;
}

div.sourceCode>pre::before,
pre.applescript>code::before {
	content: "";
	font-size: small;
	display: block;
	color: inherit;
}

div.sourceCode>pre.bash::before {
	content: "BASH";
}

div.sourceCode>pre.c::before {
	content: "C";
}

div.sourceCode>pre.javascript::before {
	content: "JAVASCRIPT";
}

div.sourceCode>pre.lua::before {
	content: "LUA";
}

div.sourceCode>pre.xml::before {
	content: "XML";
}

div.sourceCode>pre.yaml::before {
	content: "YAML";
}

pre.applescript>code::before {
	content: "AppleScript";
}

dd {
	margin-left: 1em;
}

dd>p {
	margin-top: 0;
}

ul.follow>li {
	display: inline-block;
	padding: 0;
	margin-bottom: 0.5rem;
	border-radius: 12%;
	background: var(--text-color);
	cursor: pointer;
}

ul.follow>li:not(:last-child) {
	margin-right: 0.5rem;
}

ul.follow svg {
	width: 2.5rem;
	height: 2.5rem;
	vertical-align: top;
}

ul.follow svg g {
	fill: var(--fill-color);
}

ul.follow svg g#Codepen path {
	stroke: var(--fill-color);
}

@view-transition {
	navigation: auto;
}

.button {
	display: inline-block;
	text-decoration: none;
	color: var(--text-color);
	background: var(--link-color);
	border-radius: .5rem;
	padding: 1rem 2rem;
}