/* Dark is the default here; light is the override. Colours live in these
   variables so the two modes stay in step. */
:root {
	--bg: #14161a;
	--surface: #1c1f26;
	--rule: #2b303a;
	--text: #c8d0d8;
	--muted: #8b95a1;
	--heading: #dce3ea;
	--link: #8fb6d6;
	--accent: #e8703a;
	--accent-contrast: #e15119;
	--mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: light) {
	:root {
		--bg: #ffffff;
		--surface: #ebeef1;
		--rule: #cbd3db;
		--text: #1c1c1c;
		--muted: #637893;
		--heading: #28425e;
		--link: #28425e;
		--accent: #e15119;
		--accent-contrast: #e8703a;
	}
}

* {
	margin:0;
	padding:0;
}

body {
	font-family: Helvetica Now Variable,Helvetica Neue,Helvetica,ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
	background:var(--bg);
	color:var(--text);
}
a, a:link {
	color: var(--link);
}
a:hover, a:active {
	color:var(--accent);
}
h1, h2, h3, h4, h5, h6 {
	font-weight:normal;
	color:var(--heading);
}
/* Body copy is 1.25rem, so unstyled headings came out smaller than the text
   they introduce. Give in-post headings their own scale. */
.entry-content h1, .entry-content h2, .entry-content h3,
.entry-content h4, .entry-content h5, .entry-content h6 {
	font-weight:600;
	line-height:1.3;
	margin:1.8em 0 0.4em;
}
.entry-content h1 { font-size:2rem; }
.entry-content h2 { font-size:1.65rem; }
.entry-content h3 { font-size:1.4rem; }
.entry-content h4 { font-size:1.2rem; }
.entry-content h5, .entry-content h6 {
	font-size:1.05rem;
	font-family:var(--mono);
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
	text-decoration:none;
}
p {
	margin:1em 0;
}
p, li {
	font-size:1.25rem;
	line-height:1.8;
}

ul, ol {
	padding-left:2em;
}

dl dd {
	padding-left:2em;
	padding-bottom:1ex;
}

blockquote {
	border-left: 3px solid var(--rule);
	padding-left: 1em;
}

hr {
	border:0;
	border-top:1px solid var(--rule);
	margin:2em 0;
}

code, pre, kbd, samp {
	font-family:var(--mono);
}
/* Inline code only; block code is styled by syntax.css. */
code {
	font-size:0.9em;
	background:var(--surface);
	padding:0.1em 0.35em;
	border-radius:2px;
}
pre code {
	background:none;
	padding:0;
}

/* Text meant only for screen readers */
.screen-reader-text,
.assistive-text {
	position: absolute !important;
	width:1px;
	height:1px;
	overflow:hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space:nowrap;
}
/* A skip link nobody can see is a trap for keyboard users, so show it while
   it holds focus. */
.skip-link:focus-within {
	position:static !important;
	width:auto;
	height:auto;
	overflow:visible;
	clip:auto;
	clip-path:none;
	white-space:normal;
	text-align:center;
	padding:0.5em;
}
/* The skip target takes focus, but should not draw an outline for mouse users. */
#content:focus {
	outline:none;
}
.skip-link:focus-within a {
	display:inline-block;
	padding:0.4em 1em;
	background:var(--surface);
	color:var(--link);
	text-decoration:none;
	border:2px solid var(--accent);
}

nav {
	display:block;
	height:2em;
}
.nav-older {
	float:left;
}
.nav-newer {
	float:right;
}

/* Header! */

/* Column flex with a full-height floor keeps the footer at the bottom of the
   window on short pages, and directly after the content on long ones. */
#page {
	position:relative;
	display:flex;
	flex-direction:column;
	min-height:100vh;
	min-height:100svh; /* stable while mobile browser chrome hides and shows */
}

#branding {
	text-align:center;
	margin-bottom:2em;
}
#branding h1, body.post .entry-header .entry-title {
	font-size:2.7em;
	font-weight:bold;
	margin:1em 0 0;
	text-align: center;
}
#branding h1 {
	font-family:var(--mono);
	letter-spacing:-0.02em;
}
#branding h1::before {
	content: ">";
	color: var(--accent);
	padding-right:0.2ex;
}
#branding h1::after {
	content: "_";
	color: var(--text);
}
#site-description {
	color:var(--muted);
	font-weight:normal;
	font-family:var(--mono);
	font-size:1rem;
	line-height:1.4;
	margin:0;
}

/* Heading naming what a tag or list page actually contains. */
.page-title {
	font-size:1.5rem;
	font-weight:600;
	margin:0 0 1em;
}

#access {
	position:relative;
	background:var(--surface);
	border-top:6px solid var(--accent);
	height:auto;
}

#site-mark {
	position:absolute;
	left:14px;
	top:50%;
	transform:translateY(-50%);
	font-family:var(--mono);
	font-weight:bold;
}
#site-mark a {
	text-decoration:none;
}
#site-mark::before {
	content:">";
	color:var(--accent);
	padding-right:0.2ex;
}
#site-mark::after {
	content:"_";
	color:var(--text);
}
/* Same as the narrow-screen display below: */
.default #site-mark a {
	display:none;
}
.default #site-mark::after {
	margin-left: -3px;
}

#access h1 { display:none; }
#access .menu ul {
	margin:0;
	padding:0.6em 0;
	font-family:var(--mono);
	font-size:0.8em;
	letter-spacing:1px;
	list-style:none;
	text-align:center;
}
#access .menu li {
	display:inline-block;
	margin:0 1ex;
	vertical-align:top;
	line-height: 1;
}
#access .menu li.current_page_item a {
	font-weight:bold;
}
#access .menu li a {
	text-decoration:none;
	font-weight:normal;
}

#access .menu li > ul {
	display:none;
}
#access .menu li:hover > ul {
	display:block;
}

#main {
	flex:1 0 auto; /* takes the slack, so the footer is pushed down */
	width:100%;
	margin:0 auto;
	max-width:720px;
	padding:0 20px 20px;
	box-sizing:border-box;
}

/* Entry! */

.post {
	margin:0 0 3em;
}

.entry-title {
	font-size:2rem; /* pinned, so the h1 -> h2 demotion changed nothing visually */
	font-family:var(--mono);
}

.entry-meta {
	font-family:var(--mono);
	font-size:0.85em;
	color:var(--muted);
}
.entry-header .entry-meta {
	text-indent:2em;
}
.entry-meta a {
	color:var(--muted);
	text-decoration:none;
}
.entry-header .entry-meta .sep, header .entry-meta .byline {
	display:none;
}

.entry-content {
	margin:0.8em 0;
}
.entry-content li {
	margin-bottom:0.5ex;
}
.entry-content img {
	max-width: 100%;
}
.entry-content div.highlight {
	border-left: var(--accent) 3px solid;
	padding: 0.6em 0.8em;
	margin-bottom: 1em;
	overflow-x: auto;
}

.post footer {
	border-top:1px solid var(--rule);
	padding-top:2px;
}
body.post #branding > hgroup {
	display: none;
}
body.post .entry-header .entry-title {
	margin: 0;
}
body.post .entry-header .entry-meta {
	text-align: center;
	text-indent: 0;
	font-size: 1rem;
}

/* Post and tag listings */

.post-list, .tag-list {
	padding:0;
	list-style:none;
}
.post-list li {
	margin:0.4em 0;
}
.post-list time {
	font-family:var(--mono);
	font-size:0.85em;
	color:var(--muted);
	margin-right:0.5em;
}
.tag-list li {
	display:inline-block;
	margin:0 0.5em 0.5em 0;
	font-family:var(--mono);
	font-size:1rem;
}

/* Widgets! */

.widget-area {
	width:45%;
	margin-bottom:1em;
}
#secondary.widget-area {
	float:left;
}
#tertiary.widget-area {
	float:right;
}
.widget-title {
	margin: 1em 0 0;
	color:var(--heading);
	border-bottom:2px solid var(--rule);
	line-height:133%;
	font-family:var(--mono);
	font-size:0.9em;
	font-weight:bold;
	text-transform:lowercase;
}
.widget-area ul {
	padding:0;
	list-style:none;
}
.widget-area li {
	background:var(--surface);
	color:var(--text);
	margin:0.5em 0;
	padding:0.5em;
	font-size:1em;
}

/* Footer! */

#colophon {
	flex:none;
	width:100%;
	margin:2em auto 0;
	max-width:720px;
	box-sizing:border-box;
	padding:1.2em 20px 2em;
	border-top:1px solid var(--rule);
	font-family:var(--mono);
	font-size:0.85em;
	text-align:center;
}
#colophon p {
	margin:0;
	font-size:inherit; /* the site-wide p rule is too big for a colophon */
	line-height:1.6;
}
#colophon a {
	color:var(--muted);
	text-decoration:none;
}
#colophon a:hover {
	color:var(--accent);
}

/* Narrow screens: the two sidebars stack instead of sitting side by side. */
@media (max-width: 600px) {
	.widget-area {
		width:100%;
		float:none;
	}
	#branding h1, body.post .entry-header .entry-title {
		font-size:2em;
	}
	#site-mark a {
		display:none;
	}
	#site-mark::after {
		margin-left:-3px;
	}
	.entry-content :not(pre) > code {
		overflow-wrap: break-word;
	}
}

/* A few things from toolbox's CSS that help with in-post alignments */

.alignleft {
	display: inline;
	float: left;
}
.alignright {
	display: inline;
	float: right;
}
.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* Images */
a img {
	border: none;
}
p img {
	margin-bottom: 0.5em; /* a small bottom margin prevents content floating under images */
}
/*
Resize images to fit the main content area.
- Applies only to images uploaded via WordPress by targeting size-* classes.
- Other images will be left alone. Use "size-auto" class to apply to other images.
*/
img.size-auto,
img.size-full,
img.size-large,
img.size-medium,
.attachment img,
.widget-area img {
	max-width: 100%; /* When images are too wide for containing element, force them to fit. */
	height: auto; /* Override height to match resized width for correct aspect ratio. */
}
img.alignleft {
	margin-right: 1em;
}
img.alignright {
	margin-left: 1em;
}
.wp-caption {
	padding: .5em;
	text-align: center;
}
.wp-caption img {
	margin: .25em;
}
.wp-caption .wp-caption-text {
	margin: .5em;
}
.wp-smiley {
	margin: 0;
}