:root {
	--text: #1f2328;
	--muted: #59636e;
	--line: #d8dee4;
	--surface: #f6f8fa;
	--link: #0b62c4;
	--banner: #fff8e1;
	--banner-line: #e8c96a;
	--staff: #eef5ff;
	color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
	:root {
		--text: #e6edf3;
		--muted: #9198a1;
		--line: #3d444d;
		--surface: #161b22;
		--link: #58a6ff;
		--banner: #2b2414;
		--banner-line: #6b5520;
		--staff: #132235;
	}
}

* { box-sizing: border-box; }

body {
	margin: 0;
	background: Canvas;
	color: var(--text);
	font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

a { color: var(--link); }

header.site, main, footer.site {
	max-width: 800px;
	margin: 0 auto;
	padding: 0 16px;
}

header.site { padding-top: 20px; padding-bottom: 12px; }
header.site .home { font-weight: 600; text-decoration: none; color: var(--text); }

aside.banner {
	max-width: 768px;
	margin: 0 auto 24px;
	padding: 10px 14px;
	background: var(--banner);
	border: 1px solid var(--banner-line);
	border-radius: 8px;
	font-size: 15px;
}

h1 { font-size: 26px; line-height: 1.25; margin: 8px 0 16px; overflow-wrap: anywhere; }
h2 { font-size: 19px; margin: 28px 0 8px; }

.lead { color: var(--muted); }
.crumbs { font-size: 14px; color: var(--muted); }
.meta { display: block; font-size: 14px; color: var(--muted); }

ul.forums, ol.threads { list-style: none; padding: 0; margin: 0; }
ul.forums li, ol.threads li { padding: 10px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }

article.post {
	border: 1px solid var(--line);
	border-radius: 8px;
	margin: 0 0 16px;
	overflow: hidden;
}
article.post.staff { background: var(--staff); }
article.post > header {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	align-items: baseline;
	padding: 8px 14px;
	border-bottom: 1px solid var(--line);
	background: var(--surface);
	font-size: 14px;
}
article.post .author { font-weight: 600; }
article.post .tag { color: var(--muted); }
article.post .date { margin-left: auto; color: var(--muted); text-decoration: none; }
article.post .body, article.post .attachments { padding: 12px 14px; overflow-wrap: anywhere; }
article.post .body p { margin: 0 0 0.6em; }
article.post img { max-width: 100%; height: auto; }
.attachments { display: flex; flex-wrap: wrap; gap: 8px; border-top: 1px dashed var(--line); }
.attachments img { max-height: 240px; }

blockquote {
	margin: 0 0 0.8em;
	padding: 6px 12px;
	border-left: 3px solid var(--line);
	color: var(--muted);
}
blockquote cite { display: block; font-style: normal; font-weight: 600; font-size: 14px; }

pre {
	overflow-x: auto;
	padding: 10px;
	background: var(--surface);
	border-radius: 6px;
	font-size: 13px;
}
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

table { border-collapse: collapse; display: block; overflow-x: auto; }
td, th { border: 1px solid var(--line); padding: 4px 8px; }

.missing { color: var(--muted); font-style: italic; }

footer.site {
	display: flex;
	gap: 20px;
	margin-top: 40px;
	padding-top: 16px;
	padding-bottom: 40px;
	border-top: 1px solid var(--line);
	font-size: 14px;
}

@media (max-width: 800px) {
	aside.banner { margin-left: 16px; margin-right: 16px; }
}