@charset 'utf-8';

/* basic text formatting */
* { box-sizing: border-box; }
body {
	margin: 0;
	background-color: #fff;
	color: #000;
	font: normal 12pt/1.5 "Noto Serif", serif;
	hyphens: auto;
}
p, ul, ol { margin: 8pt 0; }
a {
	color: #07a;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
	text-decoration-skip: ink;
}

/* lists */
@media (min-width: 40rem) {
	#content ul, #content ol { padding-right: 2rem; }
}
@media (max-width: 40rem) {
	#content ul, #content ol { padding-left: 1.2rem; }
}
li, li ul, li ol { margin: 2pt 0; }
li p:first-child { margin-top: 2pt; }
li p:last-child { margin-bottom: 2pt; }
li ul li { list-style-type: disc; }
li ol li { list-style-type: lower-alpha; }

/* headings and separators */
h1, h2, h3 {
	font: bold 22pt/1.3 "Cabin", sans-serif;
	hyphens: none;
}
h1 {
	font-size: 22pt;
	margin: 8pt 0 2pt 0;
}
h2 {
	font-size: 18pt;
	margin: 18pt 0 0 0;
}
h3 {
	font-size: 14pt;
	margin: 18pt 0 0 0;
}
@media (max-width: 40rem) {
	h1 { font-size: 18pt; }
	h2 { font-size: 16pt; }
	h3 { font-size: 13pt; }
}
h1 + p, h2 + p, h3 + p,
h1 + ul, h2 + ul, h3 + ul,
h1 + ol, h2 + ol, h3 + ol,
h1 + table, h2 + table, h3 + table {
	margin-top: 2pt;
}
article header p {
	margin-top: 0;
	color: #058;
}

/* links in headers */
article h1 a {
	color: #048;
}
article h1 a:hover {
	color: #3af;
	text-decoration: none;
}
/* section permalinks in headers */
article h2 a,
article h3 a {
	color: #000;
}
article h2 a:hover,
article h3 a:hover {
	color: #000;
	text-decoration: underline #bbb;
}

/* horizontal separators */
hr {
	border: 1px solid #ddd;
	width: 90%;
	margin: 20pt auto;
}
article + hr {
	margin-top: 20pt;
	margin-bottom: 16pt;
}
article footer {
	margin-top: 18pt;
}
article footer > hr {
	margin-top: 18pt;
	margin-bottom: 15pt;
}
article footer > h2 {
	margin-top: 10pt;
}

/* main page layout - wide screen
   content and sidebar are side-by-side; everything's centered */
#content, #sidebar, #site-header-aligner, #site-footer-aligner {
	display: inline-block;
	text-align: left;
}
@media (min-width: 52.1rem) {
	body { text-align: center; }
	#content {
		vertical-align: top;
		width: 45rem;
		margin-right: 2rem;
	}
	#sidebar {
		vertical-align: top;
		width: 20rem;
		margin-left: 2rem;
	}
	#site-header-aligner, #site-footer-aligner {
		text-align: left;
		width: 69rem;	/* 45+2+2+20 */
	}
}
/* medium screen - sidebar goes below content */
@media (min-width: 52.1rem) and (max-width: 75rem) {
	#content { margin-right: 0; }
	#sidebar {
		width: 45rem;
		margin-left: 0;
		padding-right: 25rem;	/* maintain 20rem width for contents */
	}
	#site-header-aligner, #site-footer-aligner {
		width: 45rem;
	}
}
/* narrow screen - everything's full-width with 3rem side margins */
@media (min-width: 40rem) and (max-width: 52.1rem) {
	#content, #sidebar, #site-header-aligner, #site-footer-aligner {
		margin: 0 3rem;
	}
}
/* mobile - side margins reduce to 0.5rem */
@media (max-width: 40rem) {
	#content, #sidebar, #site-header-aligner, #site-footer-aligner {
		margin: 0 .5rem;
	}
}

/* site header */
#site-header {
	background: linear-gradient(#0cf, #06b 95%, #09c);
	overflow: hidden;
}
#site-header h1 {
	font-size: 36pt;
	text-shadow: .05em .05em .2em rgba(0,0,0,.3);
	margin: .3rem 0 0 0;
}
@media (max-width: 40rem) {
	#site-header h1 { font-size: 30pt; }
}
#site-header h1 a {
	color: #fff;
}
#site-header h1 a:hover {
	color: #fff;
	text-decoration: none;
	text-shadow: .05em .05em .2em rgba(0,0,0,.5);
}

/* site footer */
#site-footer {
	height: 20pt;
	background: linear-gradient(#09c, #06b 20%, #09d);
	font: normal 9pt "Cabin", sans-serif;
	color: #cdf;
	white-space: nowrap;
}
#site-footer-aligner {
	padding-top: 5pt;
}
#site-footer a {
	color: #fff;
}
#footer-pusher {
	/* push footer to bottom of if page height is less than viewport */
	min-height: calc(100vh - 20pt);
}

/* main nav bar */
#site-header nav { white-space: nowrap; }
#site-header nav a {
	display: inline-block;
	border-radius: .3em .3em 0 0;
	padding: .1em .7em;
	margin: .4em 0 0 0;
	color: #fff;
	font: normal 14pt/1.3 "Cabin", sans-serif;
	text-shadow: .05em .05em .1em rgba(0,0,0,.3);
}
@media (max-width: 40rem) {
	#site-header nav a {
		padding: .1em .4em;
		margin-top: .3em;
		font-size: 12pt;
	}
}
#site-header nav a:first-of-type { margin-left: 0; }
#site-header nav a:hover {
	text-decoration: none;
	background-color: #4bf;
	box-shadow: .1em .1em .3em rgba(0,0,0,.3);
}
#site-header nav a.active {
	background-color: #fff;
	color: #000;
	text-shadow: none;
	box-shadow: .1em .1em .3em rgba(0,0,0,.3);
}
#site-header nav a.active:hover {
	text-shadow: .05em .05em .05em rgba(0,102,187,.4);
}

/* svg arrows for "left" and "right" buttons */
.page-left::before {
	content: url(/img/chevron-left.svg);
	display: inline-block;
	width: 9pt;
	margin-right: 2pt;
	vertical-align: middle;
}
.page-right::after {
	content: url(/img/chevron-right.svg);
	display: inline-block;
	width: 9pt;
	margin-left: 2pt;
	vertical-align: middle;
}

/* pagination nav bar */
.pagination {
	margin: 4pt 0;
	font-size: 11pt;
}
.pagination::after {
	content: "";
	display: block;
	clear: both;
}
.pagination a {
	color: #48b;
}
.pagination .page-left {
	float: left;
	text-align: left;
}
.pagination .page-right {
	float: right;
	text-align: right;
}

/* social media buttons */
#social {
	margin: 8pt 0;
}
/* crappy hack to fix twitter's alignment */
.twitter-share-button {
	vertical-align: bottom;
}

/* sidebar */
#sidebar h1 {
	margin: 12pt 0 0 0;
	font-size: 16pt;
	font-weight: normal;
	color: #058;
}
#sidebar ul {
	padding-left: 1.5em;
	list-style: none;
	font-size: 11pt;
	line-height: 1.4;
}
#sidebar li {
	margin: 3pt 0;
}
#sidebar a {
	color: #48b;
}
.catnum {
	font-size: 9pt;
	margin-left: 4pt;
}
.feed-button {
	display: inline;
	vertical-align: middle;
	height: auto;
	width: 1.4rem;
	margin: 0;
}

/* images and various ways of displaying them */
img, video {
	display: block;
	margin: 10pt auto;
	max-width: 100%;
	height: auto;
}
audio {
	vertical-align: middle;
	min-width: 26rem;
}
.align-center { text-align: center; }
figure {
	display: inline-block;
	margin: 2pt;
}
figure img { margin: 0 auto; }
.float-left {
	float: left;
	margin: 0 1.5rem 0 0;
}
.float-right {
	float: right;
	margin: 0 0 0 1.5rem;
}
.not-too-wide {
	max-width: 70%;
}
@media (max-width: 40rem) {
	figure { display: block; }
	figure img { margin: 0 auto; }
	.float-left, .float-right {
		float: none;
		margin: 10pt auto;
	}
	.not-too-wide {
		max-width: 100%;
	}
}
.image-array {
	text-align: center;
	margin: 0;
}
.image-array img {
	display: inline-block;
	margin: 5pt;
}
.profile-pic {
	float: right;
	width: 30%;
	margin: 0 0 0 1rem;
	border-radius: .3rem;
}
@media (max-width: 40rem) {
	.profile-pic {
		width: 40%;
		margin: 0 0 0 .5rem;
	}
}

/* image captions */
figcaption {
	max-width: 30rem;
	margin: 0 auto;
	font-size: 10pt;
	text-align: center;
}
figcaption p { margin: 0; }
.attribution {
	font-style: italic;
	font-size: 8pt;
}
.attribution a {
	color: #bbb;
}
.attribution a:hover {
	color: #999;
}

/* iframe embeds - needs *two* wrapper divs to control overall width and aspect ratio;
   see https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php */
.embed-wrapper-outer {
	margin: 10pt auto;
	max-width: 85%;
}
.embed-wrapper-inner {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	height: 0;
}
.embed {
	border: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
@media (max-width: 40rem) {
	.embed-wrapper-outer {
		max-width: 100%;
	}
}

/* "Read more" buttons */
.read-more {
	color: #48b;
	font-size: 120%;
	display: inline-block;
}
.read-more::after {
	content: url(/img/chevron-right.svg);
	display: inline-block;
	width: 11pt;
	margin-left: 2pt;
	vertical-align: middle;
}


/* big prominent link e.g. for downloading */
.biglink {
	font-size: 120%;
	font-weight: bold;
}

/* small caps */
.smallcaps { font-variant: small-caps; }

/* color swatch */
.swatch {
	display: inline-block;
	width: 0.8em;
	height: 0.8em;
	margin: 0 1pt;
	vertical-align: baseline;
}

/* block quotes */
blockquote {
	margin: 12pt 2rem;
	padding: .5rem;
	background: linear-gradient(#e8f8ff, #d8f2ff);
	box-shadow: .2rem .2rem .3rem rgba(0,102,187,.4);
	border-radius: .3rem;
}
blockquote p:first-child,
blockquote ul:first-child,
blockquote ol:first-child {
	margin-top: 0;
}
blockquote p:last-child,
blockquote ul:last-child,
blockquote ol:last-child {
	margin-bottom: 0;
}
@media (max-width: 40rem) {
	blockquote { margin-left: 1rem; margin-right: 1rem; }
}

/* table of contents */
.toc {
	display: inline-block;
	margin: 2pt 0;
	padding: .4rem 1.8rem .6rem .8rem;
	background: linear-gradient(#f8faff, #e8f8ff);
	box-shadow: .15rem .15rem .3rem rgba(0,102,187,.4);
	border-radius: .3rem
}
.toc::before {
	display: block;
	content: "Contents";
	margin-bottom: 4pt;
	font: normal 18pt/1.3 "Cabin", sans-serif;
	color: #058;
}
#content .toc ul {
	margin: 0;
	padding-left: 1rem;
	padding-right: 0;
	list-style: none;
	line-height: 1.4;
}
#content .toc ul li ul li {
	list-style: none;
	font-size: 10pt;
}

/* embedded tables */
table {
	margin: 10pt auto;
	border-collapse: collapse;
}
th, td {
	border: 1px solid black;
	padding: .3rem .5rem;
	text-align: left;
}
th:empty, td:empty {
	border: none;
}
thead th {
	text-align: center;
}
table.borderless { margin: 8pt 0; }
table.borderless th, table.borderless td { border: none; padding: .1rem .5rem; }
table.borderless th:first-of-type, table.borderless td:first-of-type { padding-left: 0; }
table.borderless th:last-of-type, table.borderless td:last-of-type { padding-right: 0; }

/* post-list tables, as seen on all-posts and category pages */
.post-list {
	margin-left: 0; margin-right: 0;
}
.post-list td {
	border: none;
	vertical-align: top;
}
.post-list td:first-child {
	min-width: 4.2rem;
	white-space: nowrap;
}

/* embedded code */
code, tt, pre, .mono {
	font: normal 11pt/1.3 "Roboto Mono", monospace;
}
code, tt {
	background-color: #ececec;
	padding: 0 0.2rem;
	border-radius: 0.2rem;
	mix-blend-mode: multiply;
}
.codehilite {
	max-width: 100%;
	overflow-x: auto;
	white-space: nowrap;
	margin: 2pt 0;
	padding: .2rem .4rem;
	background-color: #f8f8f8;
	border: 1px solid #ccc;
	border-radius: .3rem;
}
.codehilite pre {
	margin: 0;
}

/* pygments code highlighting styles */
.codehilite .c,		/* Comment */
.codehilite .cm,	/* Comment.Multiline */
.codehilite .ch,	/* Comment.Hashbang */
.codehilite .c1,	/* Comment.Single */
.codehilite .cs		/* Comment.Special */
{ color: #008000; font-style: italic; }

.codehilite .cp { color: #888880 } /* Comment.Preproc */
.codehilite .cpf { color: #a31515 } /* Comment.PreprocFile */

.codehilite .k,		/* Keyword */
.codehilite .kc,	/* Keyword.Constant */
.codehilite .kd,	/* Keyword.Declaration */
.codehilite .kn,	/* Keyword.Namespace */
.codehilite .kp,	/* Keyword.Pseudo */
.codehilite .kr,	/* Keyword.Reserved */
.codehilite .ow		/* Operator.Word */
{ color: #0000ff }

.codehilite .kt,	/* Keyword.Type */
.codehilite .nc,	/* Name.Class */
.codehilite .ni,	/* Name.Entity */
.codehilite .ne		/* Name.Exception */
{ color: #2b91af }

.codehilite .nb,	/* Name.Builtin */
.codehilite .bp,	/* Name.Builtin.Pseudo */
.codehilite .nd,	/* Name.Decorator */
.codehilite .nf,	/* Name.Function */
.codehilite .nl,	/* Name.Label */
.codehilite .nn,	/* Name.Namespace */
.codehilite .nt		/* Name.Tag */
{ color: #8000c0 }

.codehilite .no,	/* Name.Constant */
.codehilite .na,	/* Name.Attribute */
.codehilite .nv,	/* Name.Variable */
.codehilite .vc,	/* Name.Variable.Class */
.codehilite .vg,	/* Name.Variable.Global */
.codehilite .vi		/* Name.Variable.Instance */
{ color: #000080 }

.codehilite .o,		/* Operator */
.codehilite .p		/* Punctuation */
{ color: #666666 }

.codehilite .m,		/* Literal.Number */
.codehilite .mb,	/* Literal.Number.Bin */
.codehilite .mf,	/* Literal.Number.Float */
.codehilite .mh,	/* Literal.Number.Hex */
.codehilite .mi,	/* Literal.Number.Integer */
.codehilite .mo,	/* Literal.Number.Oct */
.codehilite .il		/* Literal.Number.Integer.Long */
{ color: #d31515 }

.codehilite .s,		/* Literal.String */
.codehilite .sc,	/* Literal.String.Char */
.codehilite .sd,	/* Literal.String.Doc */
.codehilite .s2,	/* Literal.String.Double */
.codehilite .sh,	/* Literal.String.Heredoc */
.codehilite .sx,	/* Literal.String.Other */
.codehilite .s1,	/* Literal.String.Single */
.codehilite .ss		/* Literal.String.Symbol */
{ color: #a31515 }

.codehilite .se { color: #DD5515 } /* Literal.String.Escape */

.codehilite .sb,	/* Literal.String.Backtick */
.codehilite .si,	/* Literal.String.Interpol */
.codehilite .sr		/* Literal.String.Regex */
{ color: #BB6688 }

.codehilite .w { color: #bbbbbb } /* Text.Whitespace */

.codehilite .gd { color: #A00000 } /* Generic.Deleted */
.codehilite .ge { font-style: italic } /* Generic.Emph */
.codehilite .gr { color: #FF0000 } /* Generic.Error */
.codehilite .gs { font-weight: bold } /* Generic.Strong */

.codehilite .hll { background-color: #ffffcc }
.codehilite .err { border: 1px solid #FF0000 } /* Error */

/* KaTeX tweak to make math symbols auto-bold in headers */
h1 .katex, h2 .katex, h3 .katex {
	font-weight: bold;
}