.blogPage {
	--footer-gutter: 15px;
	--side-gutter: 40px;
	--line: 1px solid var(--text);
	--content-line: 1px solid #ccc;
	
	--panel-text: var(--text);
	--panel: url("/images/blog/panel.jpg");
}

.blogPage.postPage {
	--post-max-width: 750px;
	--post-left-margin: 1fr;
}

.blogPage.listingPage {
	--main-margin: auto;
	--listing-max-width: minmax(auto, 650px);
	--info-margin: 52px;
	--sidebar-gap: 40px;
	--sidebar-area: 95px;
	--sidebar-right: calc( var(--sidebar-area) * 0.5);

	background-image: url("/images/blog/lakes.png");
	background-size: 100%;
	background-position: bottom left;
	background-repeat: no-repeat;
}

.blogPage .ancillary .icon {
	width: 13px;
	height: 13px;
	display: inline-block;
	vertical-align: baseline;
	top: 0;
}

.blogPage:before {
	position: absolute;
	image-rendering: pixelated;
	content: "";
	width: 100%;
	height: 400px;
	background-image: url("/images/blog/leaves_right.png"), url("/images/blog/leaves.png");
	background-position: top right, top 0 left -50px;
	background-repeat: no-repeat;
	top: 0;
	left: 0;
	pointer-events: none;
}

.blogPage.listingPage main {
	display: grid;
	grid-template-columns: var(--sidebar-area) var(--listing-max-width) var(--sidebar-right);
	gap: var(--sidebar-gap);
	flex-grow: 1;
}

.blogPage.postPage main {
	z-index: 10;
}

.blogPage.listingPage #tagsList ul {
	list-style-type: none;
	text-align: right;
	margin: 0;
	padding: 0;
} 

.blogPage.listingPage #tagsList li:first-child {
	padding-top: 0;
}

.blogPage.listingPage #tagsList a {
	color: inherit;
}

.blogPage.listingPage #tagsList #selected a {
	font-weight: bold;
}

.blogPage .postData {
	display: grid;
	margin-top: 0;
}

.blogPage.postPage .postData {
	margin: 20px auto 0;
	grid-template-columns: var(--post-left-margin) var(--post-max-width) 1fr; 
}

.blogPage.listingPage .postData {
	margin: 0 0 30px;
	color: inherit;
	grid-template-columns: var(--info-margin) 1fr; 		
}

.blogPage h2, .blogPage .postData .summary {
	grid-column: 2;
}

.blogPage h2.title {
	margin-bottom: 0;
	font-size: 2.4em;
	line-height: 0.9em;
	letter-spacing: -0.02em;
	font-weight: 700;
}

.blogPage.listingPage .postData h2.title {
	font-size: 1.8em;
}

.blogPage.listingPage .postData:hover, .blogPage.listingPage .postData:active { text-decoration: none; }
.blogPage.listingPage .postData:hover h2, .blogPage.listingPage .postData:active h2 { text-decoration: underline; }

.blogPage .summary {
	line-height: 1.4em;
	margin: 0 0 5px;
}

.blogPage .info {
	font-size: var(--tiny-text-size);
	font-family: var(--serif);
	letter-spacing: 0;
	margin: 6px 25px 0 0;
	justify-self: end;
	text-align: right;
	grid-column: 1;
	grid-row: 1 / 3;
}

.blogPage.listingPage .info {
	margin-right: 15px;	
}

.blogPage.listingPage .year:first-child {
	margin-top: 2px;
}

.blogPage.listingPage .year {
	display: block;
	font-size: var(--tiny-text-size);
	margin: 80px 0 10px var(--info-margin);
}

.markdown {
	margin-top: 30px;
	display: grid;
	grid-template-columns: var(--post-left-margin) var(--post-max-width) 1fr;
	font-size: var(--prose-text-size);
	line-height: 28px;
	font-family: var(--sans);
	letter-spacing: -0.01em;
	word-spacing: -0.05em;
	line-height: 1.8em;	
	text-rendering: optimizeLegibility;
}

.markdown > * {
	grid-column: 2;
}

.markdown > h3, .markdown > h4 { 
	margin: 20px 0 -5px; 
	font-family: var(--sans);
	letter-spacing: -0.02em;
}

.markdown > p, .markdown > ul, .markdown > ol { 
	margin: 15px 0; 
}

.markdown figure, .markdown blockquote, .markdown pre { 
	margin: 20px 0; 
}

.markdown blockquote {
	grid-column: 2;
	margin-left: 0;
	padding: 0 0 0 12px;
	box-sizing: border-box;
	border-left: 2px solid var(--text);
	overflow: auto;
	line-height: 1.6em;
	word-spacing: 0;
	font-style: italic;
	font-size: var(--medium-text-size)
}

.markdown aside {
	grid-column: 3;
	font-family: var(--serif);
	font-size: var(--tiny-text-size);
	line-height: 1.3em;
	letter-spacing: 0.01em;
	margin: 10px 0 0 var(--side-gutter);
	max-width: 250px;
}

.markdown aside .asideRef {
	position: relative;
}

.markdown aside .duprefs {
	display: none;
}

.markdown aside .number {
	position: absolute;
	left: -25px;
	top: -1px;
	text-align: right;
	width: 20px;
	font-family: var(--sans);
	font-size: 0.8em;
}

.markdown sup, .markdown sub { line-height: 1em; }

.markdown sup.ref {
	font-size: var(--tiny-text-size);
	margin-left: 0.1em;
	scroll-margin-top: 20px;
}

.markdown sup.ref a {
	color: inherit;
}

.markdown blockquote p:first-of-type { margin-top: 0; }
.markdown blockquote p:last-of-type { margin-bottom: 0; }
.markdown p > img, .markdown figure img, .markdown .gallery img { width: 100%; }

.markdown img.light, .markdown figure.light img {
	box-sizing: border-box;
	border: var(--content-line);
}

.markdown :first-child { margin-top: 0; }
.markdown figure.small { max-width: 500px; }

.markdown figure figcaption {
	margin: -3px 0 0;
	line-height: 1em;
	font-size: var(--tiny-text-size);
	letter-spacing: 0.01em;
	font-family: var(--serif);
}

.markdown code {
	font-family: var(--monospace);
	font-size: 0.9em;
	font-variation-settings: "wdth" 90, "wght" 600;
	letter-spacing: 0;
}

.markdown pre {
	tab-size: 4;
	line-height: 1em;
	white-space: pre-wrap;
	padding: 0.5em 0.6em;
	border: var(--content-line);
	overflow-x: scroll;
}

.blogPage .markdown pre code { 
	font-variation-settings: "wdth" 95, "wght" 500; 
	letter-spacing: 0.01em;
	word-break: keep-all;
	overflow-x: auto;
	text-wrap-mode: nowrap;
}

.markdown .warning {
	color: var(--red);
	margin: 0 5px 0 -3px;
	font-size: var(--medium-text-size);
	font-weight: bold;
	display: inline-block;
	margin-left: 2px;
}

.markdown .highlight {
	text-align: center;
	font-size: 2em;
	line-height: 1em;
}

.markdown hr {
	margin: 60px 0;
	height: 0;
	border: none;
	border-top: var(--line);
	overflow: visible;
	text-align: center;
	grid-column: 1 / 4;
}

.markdown hr + h3 {
	margin-top: 10px;
}

.markdown table {
	width: 100%;
	margin: 0 0 35px;
	border-collapse: collapse;
	font-size: var(--medium-text-size);
}

.markdown td {
	border-top: var(--line);
	padding: 0;
	margin: 5px 0 0;
}

.markdown td, .markdown th {
	text-align: left;
}

.markdown ul, .markdown ol { padding-left: 1.2em; }
.markdown ul ul, .markdown ul ul ul { list-style-type: disc; }

#rating {
	margin: 60px 0 10px;
	position: relative;
	display: flex;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 10px 4px;
	max-width: 400px;
}

#rating.best {
	margin-left: 80px;
	margin-bottom: 60px;
}

#rating.best img {
	position: absolute;
	top: -30px;
	left: -110px;	
	width: 120px;
	image-rendering: pixelated;
}

#rating .icon { 
	height: 8px;
	width: 8px;
	margin: 0 0 4px 0;
}

#rating .score {
	letter-spacing: -0.02em;
	font-weight: 800;
	font-size: 2em;
}

#rating .after {
	font-size: var(--small-text-size);
	font-family: var(--serif);
	line-height: 1em;
	letter-spacing: 0;
	font-weight: 400;
}

#rating .after + .after {
	display: block;
	line-height: 0;
}

#footnotes {
	list-style-type: none;
	margin-left: var(--footer-gutter);
	padding: 20px 0 0;
	font-size: var(--small-text-size);
	line-height: 1.2em;
	font-family: var(--serif);
	letter-spacing: 0;
}

#footnotes li {
	padding: 0;
	margin: 0;
	position: relative;
}

#footnotes li .duprefs { 
	margin-right: 3px;
	font-size: 0.75em;
}

#footnotes li .duprefs:before { content: "("; }
#footnotes li .duprefs:after { content: ")"; }

#footnotes li .backref {
	position: absolute;
	left: calc(var(--footer-gutter) * -1);
	width: var(--footer-gutter);
	font-family: var(--sans);
	font-size: 0.7em;
	top: -1.2px;
	color: inherit;
}

#footnotes li p { margin-left: 5px; }

.markdown pre .highlighted {
	--code-highlight: #ffd100;
	--code-error: #ffb3ab;
	--code-comment: #8e8e8e;
	--code-whitespace: #d6d6d6;
	
	--code-keyword: #4935ab;
	--code-declaration: #4935ab;
	--code-type: #2d7b00;
	--code-constant: #5e31b3;
	
	--code-operator: #808080;
	--code-operator-word: #38398c;
	
	--code-variable: #0b8189;
	--code-class: #17a5c2;
	--code-function: #0d8c85;
	--code-function-magic: #0c6f8a;
	--code-builtin: #0d447e;
	--code-attribute: #b663a8;
	--code-label: #087897;
	
	--code-number: #d30c27;
	--code-string: #bc5400;
	--code-escape: #b42828;
	--code-namespace: #003f06;
	
	--code-deleted: #6f0000;
	--code-console: #8d8d8d;
}

.highlighted .hll { background-color: var(--code-highlight) }
.highlighted .err, .highlighted .gr { background-color: var(--code-error); } 
.highlighted .c, .highlighted .ch, .highlighted .cm, .highlighted .cp, .highlighted .cpf, .highlighted .c1, .highlighted .cs { color: var(--code-comment); font-style: italic } 
.highlighted .w { color: var(--code-whitespace) } 
.highlighted .k, .highlighted .kn, .highlighted .kp, .highlighted .kr, .highlighted .kn, .highlighted .kd { color: var(--code-keyword); }
.highlighted .kt { color: var(--code-type); }
.highlighted .kc { color: var(--code-constant); } 
.highlighted .o { color: var(--code-operator); }  
.highlighted .ow { color: var(--code-operator-word); } 
.highlighted .vc, .highlighted .vg, .highlighted .vi, .highlighted .vm  { color: var(--code-variable); } 
.highlighted .nc, .highlighted .ne { color: var(--code-class); font-weight: bold } 
.highlighted .nf, .highlighted .nd { color: var(--code-function); } 
.highlighted .nd { font-style: italic; }
.highlighted .fm { color: var(--code-function-magic); font-style: italic; }
.highlighted .bp, .highlighted .nb { color: var(--code-builtin) } 
.highlighted .na, .highlighted .no { color: var(--code-attribute) }
.highlighted .nt, .highlighted .nl { color: var(--code-label); }
.highlighted .m, .highlighted .mb, .highlighted .mf, .highlighted .mh, .highlighted .mi, .highlighted .mo, .highlighted .il { color: var(--code-number) } 
.highlighted .s, .highlighted .sa, .highlighted .sb, .highlighted .sc, .highlighted .dl, .highlighted .sd, .highlighted .s2, 
.highlighted .sh, .highlighted .si, .highlighted .sx, .highlighted .sr, .highlighted .s1, .highlighted .ss { color: var(--code-string); } 
.highlighted .se { color: var(--code-escape); }
.highlighted .nn { color: var(--code-namespace); } 
.highlighted .gd { text-decoration: line-through; color: var(--code-deleted); } 
.highlighted .ge { font-style: italic } 
.highlighted .gh, .highlighted .gs, .highlighted .gu { font-weight: bold } 
.highlighted .go, .highlighted .gt { color: var(--code-console) } 
.highlighted .gp { font-weight: bold } 

@media (prefers-color-scheme: dark) {
	.blogPage.light {
		--panel: url("/images/blog/panel_dark.jpg");
		--content-line: 1px solid #333;
	}
	
	.blogPage:before {
		filter: invert()
	}
	
	.blogPage.listingPage {
		background-image: url("/images/blog/lakes_dark.png");
	}
	
	.markdown pre .highlighted {
		/*filter: invert() hue-rotate(180deg) saturate(3) brightness(0.8);*/
		--code-highlight: #932300;
		--code-error: #c00a00;
		--code-comment: #595959;
		--code-whitespace: #555555;
		
		--code-keyword: #ab7ccb;
		--code-declaration: #ab7ccb;
		--code-type: #69b269;
		--code-constant: #cb6bcc;
		
		--code-operator: #a1a1a1;
		--code-operator-word: #7d7fc7;
		
		--code-variable: #00b3c5;
		--code-class: #01a0cc;
		--code-function: #00b3a2;
		--code-function-magic: #02b0cb;
		--code-builtin: #2aadcb;
		--code-attribute: #ca69ca;
		--code-label: #02b0cb;
		
		--code-number: #cc5596;
		--code-string: #cb7132;
		--code-escape: #cb5959;
		--code-namespace: #71c179;
		
		--code-deleted: #cb9595;
		--code-console: #5b5b5b;
		
		color: #eee;
	}
}

@media screen and (min-width: 1400px) {
	@supports (grid-template-columns: subgrid) {
		.markdown figure.leftCaption {
			grid-column-start: 1;
			grid-column-end: 3;
			display: grid;
			grid-template-columns: subgrid;
			justify-items: flex-end;
		}
		
		.markdown figure.leftCaption img {
			grid-column: 2;
		}
		
		.markdown figure.leftCaption figcaption {
			margin-right: var(--side-gutter);
			grid-column: 1;
			grid-row: 1;
			margin-top: 10px;
			text-align: right;
			max-width: 200px; 
		}
	}
}

@media screen and (max-width: 1400px) {
	.blogPage.postPage {
		--post-left-margin: 20px;
	}
	
	.blogPage.listingPage {
		--sidebar-right: 0;
	}
	
	.blogPage .postData {
		display: flex;
		flex-direction: column;
	}
		
	.blogPage.postPage .postData {
		margin-left: var(--post-left-margin);
	}
	
	.blogPage .postData .info {
		order: -1;
		text-align: left;
		margin: 8px 0 5px;
	}
	
	.blogPage.listingPage .postData {
		margin-bottom: 18px;
	}

	.blogPage.listingPage .year {
		margin: 60px 0 15px;
	}
}

@media screen and (max-width: 1050px) {	
	.blogPage:before {
		background-image: url("/images/blog/leaves_right.png");
	}
	
	.blogPage.postPage {
		--post-left-margin: 0;
	}

	.markdown {
		display: flex;
		flex-direction: column;
	}

	.markdown aside {
		max-width: none;
		margin: 0 0 0 15px;
	}
	
	#footnotes {
		display: none;
	}
}

@media screen and (max-width: 650px) {
	.blogPage.listingPage {
		--root-margin: 20px;
		
		background-size: 1500px;
	}
	
	.blogPage.listingPage main {
		display: flex;
		flex-direction: column;
		gap: 30px;
	}
	
	.blogPage.listingPage #tagsList ul {
		text-align: left;
		padding: 0;
		display: flex;
		flex-wrap: wrap;
		gap: 0 10px;
		font-size: var(--small-text-size);
	}
		
	.blogPage.listingPage #tagsList li:first-child {
		padding-top: 5px;
	}
	
	.blogPage.listingPage .postData .summary {
		margin-top: 5px;
		line-height: 1.2em;
	}
	
	.blogPage .summary, .markdown {
		font-size: 0.95em;
		line-height: 1.6em;
	}
	
	.markdown hr {
		margin: 30px 0 20px;
	}
	
	#rating.best {
		margin-left: 50px;
	}
	
	#rating.best img {
		top: -22px;
		left: -95px;
		width: 100px;
	}

}