@import "/reset.css";

:root {
	color-scheme: light dark;

	--width: 80rem;
	--text-width: 60rem;
	--left-margin: 2.5rem;
	--right-margin: 1rem;
	--article-footer-margin: 3rem;

	--mono-face: ui-monospace, Menlo, Consolas, monospace;
	--text-face: -apple-system, system-ui, Input, Helvetica, sans-serif;

	--bg: #fff; --fg: #111; --fg-faint: #777;
	--target-bg: #f0f0f0;
	--a: #005aff; --a-hov: #005aff; --a-act: #666;
	--a-hov-feed: #f97900;
	--time: #555;
	--code-fg: #000; --code-bg: #f0f0f0;
	--figcaption: #444;
	--q-border: #ccc;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #181818; --fg: #eee; --fg-faint: #bbb;
		--target-bg: #141414;
		--a: #42b5ff; --a-hov: #62b3ff; --a-vis: #ca76ff; --a-act: white;
		--code-fg: #ddd; --code-bg: #282828;
		--figcaption: #bbb;
		--time: #bbb;
	}
}

/* Crest Conditional */
#crest-dark {
	display: none;
}
@media (prefers-color-scheme: dark) {
	#crest-light {
		display: none;
	}
	#crest-dark {
		display: block;
	}
}

/* Layout */
body {
	background: var(--bg);
	color: var(--fg);
	line-height: 1.45;
	font-family: var(--text-face);
	text-rendering: optimizeLegibility;
	font-variant-ligatures: common-ligatures;
	hanging-punctuation: first last;
}
body > header nav, body > footer {
	max-width: var(--text-width);
	margin-left: var(--left-margin);
	margin-right: var(--right-margin);
}
article { margin-bottom: 1rem; }
main > article > *:not(header), main > section > *:not(header) {
	max-width: var(--text-width);
}
main > article > *, main > section > *:not(article) {
	margin-left: var(--left-margin);
	margin-right: var(--right-margin);
}
body > footer > aside { padding-bottom: 1rem; }
article > pre, section > pre {
	max-width: 100%;
	padding-left: var(--left-margin);
	margin: 0;
	margin-top: 1rem;
}
main > nav ul {
	padding-left: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
}
body > header nav li { display: inline-block; padding: 0; margin: 0; }
body > header nav li.next { text-align: right; }
body > header nav a:link:first-child { margin-left: 0; }
body > header nav a:link {
	text-decoration: none;
	margin-left: 2rem;
	vertical-align: middle;
}
body > footer {
	margin: 3rem var(--right-margin) 3rem var(--left-margin);
	font-size: 0.9rem;
}
body > footer > p { margin-top: 0; }
body > footer address { display: inline; font-style: normal; }