/* Blog layout, loaded after //istumbler.net/istumbler.css */

:root {
	color-scheme: light dark;
	--page: #EEE;
	--text: #000;
	--text-muted: #444;
	--link: #000;
	--accent: #9A4D00;
	--rule: #BBB;
	--well: #E0E0E0;
}

@media (prefers-color-scheme: dark) {
	:root {
		--page: #1C1C1C;
		--text: #F2F2F2;
		--text-muted: #BBB;
		--link: #FFF;
		--accent: #F93;
		--rule: #555;
		--well: #2C2C2C;
	}
}

body {
	background: var(--page);
	color: var(--text);
}

.content {
	max-width: 512pt;
	margin: 0 auto;
	padding: 1em 16px 3em;
}

/* the site stylesheet centres each block at 512pt; let the column do that here */
.content h1, .content h2, .content h3, .content h4, .content h5,
.content p, .content ul, .content ol, .content dl, .content pre, .content hr {
	max-width: none;
}

.content a:link, .content a:visited, .content a:active {
	color: var(--link);
}

.content a:hover {
	color: var(--accent);
}

.footer {
	border-top-color: var(--rule);
	background: var(--page);
	color: var(--text-muted);
}

.footer a:link, .footer a:visited, .footer a:active {
	color: var(--text-muted);
}

/* MARK: - Shared */

.post-meta {
	margin: 0.25em 0 0;
	color: var(--text-muted);
	font-size: 0.85em;
}

/* MARK: - Article List */

.post-year {
	margin-bottom: 2.5em;
}

.post-year-title {
	margin: 0 0 1em;
	padding-bottom: 0.25em;
	color: var(--text-muted);
	font-size: 1em;
	letter-spacing: 0.1em;
	border-bottom: 1px solid var(--rule);
}

.post-item {
	margin-bottom: 1.75em;
}

.post-item-title {
	margin: 0;
	border: none;
	font-size: 1.3em;
	line-height: 1.3;
}

.post-item-title a {
	text-decoration: none;
}

.post-item-summary {
	margin: 0.5em 0 0;
	color: var(--text);
	line-height: 1.5;
}

/* MARK: - Article */

.post-header {
	margin-bottom: 2em;
	padding-bottom: 1em;
	border-bottom: 1px solid var(--rule);
}

.post-title {
	margin: 0;
	font-size: 2.2em;
	line-height: 1.15;
}

.post-tags {
	margin: 0.75em 0 0;
	padding: 0;
	list-style: none;
}

.post-tags li {
	display: inline-block;
	margin: 0 0.4em 0.4em 0;
	padding: 0.1em 0.6em;
	border-radius: 1em;
	background: var(--well);
	color: var(--text);
	font-size: 0.75em;
}

.post-body {
	font-size: 1.07em;
	line-height: 1.6;
	overflow-wrap: break-word;
}

.post-body p, .post-body ul, .post-body ol {
	margin: 0 0 1em;
}

.post-body li {
	margin-left: 0;
	margin-right: 0;
}

.post-body h2 {
	margin: 1.75em 0 0.5em;
	font-size: 1.4em;
	border-bottom: 1px solid var(--rule);
}

.post-body h3, .post-body h4 {
	margin: 1.5em 0 0.5em;
	font-size: 1.1em;
	border-bottom: none;
}

.post-body img, .post-body video, .post-body iframe {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 1.5em auto;
}

.post-body blockquote {
	margin: 1.5em 0;
	padding: 0.25em 1em;
	border-left: 3px solid var(--rule);
	color: var(--text);
	background: var(--well);
}

.post-body code {
	font-size: 0.88em;
	padding: 0.1em 0.3em;
	border-radius: 3px;
	color: var(--text);
	background: var(--well);
}

.post-body pre {
	margin: 1.5em 0;
	overflow-x: auto;
	font-size: 0.8em;
	line-height: 1.45;
	border-color: var(--rule);
	color: var(--text);
	background: var(--well);
}

.post-body pre code {
	padding: 0;
	font-size: 1em;
	background: none;
}

.post-body table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	margin: 1.5em 0;
	border-collapse: collapse;
}

.post-body th, .post-body td {
	padding: 0.4em 0.75em;
	border: 1px solid var(--rule);
	text-align: left;
}

.post-nav {
	display: flex;
	justify-content: space-between;
	gap: 1em;
	margin-top: 3em;
	padding-top: 1em;
	border-top: 1px solid var(--rule);
}

.post-nav a {
	max-width: 48%;
	text-decoration: none;
	font-weight: bold;
}

.post-nav span {
	display: block;
	color: var(--text-muted);
	font-size: 0.8em;
	font-weight: normal;
}

.post-nav-next {
	text-align: right;
}

/* MARK: - Narrow Screens */

@media (max-width: 600px) {
	.banner { height: auto; padding-bottom: 0.5em; }
	.logo { width: 64px; height: 64px; margin-bottom: 0.5em; }
	.headline { font-size: 2em; }
	.tagline { font-size: 1.1em; }
	.post-title { font-size: 1.7em; }
	.post-nav { flex-direction: column; }
	.post-nav a { max-width: none; }
}