:root {
    color-scheme: light dark;
	--color: light-dark(hsl(289, 77%, 46%), hsl(289, 77%, 65%));
    --font-size: 14pt;
    --lh-ratio: 1.28;
    --lh: calc(var(--font-size) * var(--lh-ratio));
    --lh2: calc(var(--lh) * 2);

    --bg0: light-dark(hsl(38, 100%, 79%), hsl(38, 0%, 10%));
    --bg1: light-dark(hsl(38, 100%, 90%), hsl(38, 0%, 15%));
    --bg2: light-dark(hsl(38, 100%, 93%), hsl(38, 0%, 20%));

    --text: light-dark(black, hsl(0, 0%, 96%));
}

body {
	display: grid;
	grid-template-columns: 1fr 2fr 6fr;
    margin: 0;

}

html {
	font-family: "Andale Mono", monospace;
    font-weight: 400;
	font-size: var(--font-size);
    line-height: var(--lh-ratio);
}

header {
	padding: var(--lh) 1rem var(--lh) 1rem;
    background-color: var(--bg0);
    grid-row: 1/3;

	& .brand {

		& span.name {
			font-weight: 700;
		}

		& span.dot {
			color: var(--color);
		}
	}
}

#related {
    padding-top: calc(5 * var(--lh));
    background-color: var(--bg1);
    grid-row: 1/3;
}

#main {
	padding: calc(var(--lh) * 2) 1rem var(--lh) 1rem;
    background-color: var(--bg2);
    min-height: 100vh;
}

footer {
	grid-column: 3/4;
    padding: var(--lh) 1rem var(--lh) 1rem;
    background-color: var(--bg2);
}



img {
	max-width: 100%
}

a {
    color: var(--text);
    text-decoration-thickness: 1px;
}

a.active {
    color: var(--color);
}

a:hover {
    text-decoration-style: wavy;
    text-decoration-thickness: 1px;
}

img[src$="#pixelate"] {
	image-rendering: pixelated
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "Andale Mono", monospace;
	padding: 0; margin: 0;
	font-size: 14pt;
}

h1 {
	font-weight: 800;
	color: var(--color);
    margin-bottom: var(--lh);
}

h2 {
	font-weight: 600;
    margin-top: var(--lh);
}

h3 {
	text-decoration: wavy;
    margin-top: var(--lh);
}

p {
	text-align: justify;
    max-width: 40rem;
}

p,
ul,
ol,
article>footer,
article>header {
	margin: 0	
}

pre,
blockquote {
	padding: var(--lh) 1rem var(--lh) 1rem;
	margin: var(--lh) 0 var(--lh);
}

pre {
	overflow-x: auto;
}

pre code {
	background: 0 !important;
	padding: 0;
	font-size: inherit
}

code {

}

blockquote>*:last-child {
	margin-bottom: 0
}

article>img,
article>p>img,
article>div {
	display: block;
	width: 100%
}

nav {
    padding: 0 1rem 0 1rem;
}

nav a {
	display: block;
}

nav img,
nav svg {
	display: none
}



.p {
	list-style: none;
	padding: 0;
	margin: 0 0 1.5rem
}

.p li {
	display: flex;
	gap: 1rem;
	align-items: baseline
}

.p li:last-child {
	margin-bottom: 0
}

.p time {
	opacity: .7;
	flex-shrink: 0
}

.lb {
	position: fixed;
	inset: 0;
	background: #000d;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 999;
	cursor: pointer
}

.lb img {
	max-width: 95vw;
	max-height: 95vh
}

.meta {
    padding-left: 2rem;
}


hr {
    margin-top: calc(2 * var(--lh));
	height: var(--lh);
    border: none;
    &::after {
        content:"────────────────";
        color: var(--text);
    }
}

hr.invisible {

    margin: 0;

    &::after {
        content:"";
    }
}

blockquote {
	padding-left: 1.25rem;
	font-style: italic
}

.skip-link {
	position: absolute;
	top: -100%;
	left: 0;
	padding: .5rem 1rem;
	color: #fff;
	z-index: 1000
}

.skip-link:focus {
	top: 0
}

.footnote-definition {
    display: grid; 
    grid-template-columns: auto 8fr;
    gap: 1em;
}

.under {
	margin-top: 20px;
	text-align: center;
}

nav a.active::after {
    content: "→";
    color: var(--color);
    margin-left: 0;
}

article ul li {
    max-width: 40rem;
}

#search-input {
    width:32rem;
    padding:0 1rem;
    background:transparent;
    border:1px solid;
    color:inherit;
    font:inherit;
    margin: var(--lh) 1rem;
    box-sizing: border-box;

}