:root {
	--ink: #1a1a1a;
	--muted: #5c5c5c;
	--line: #e0ddd8;
	--link: #1b6ac9;
	--paper: #faf9f7;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
	font: 17px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif;
	color: var(--ink);
	background: var(--paper);
}
.wrap { display: grid; grid-template-columns: minmax(0, 30rem) 1fr; min-height: 100vh; }
.content { padding: 2rem 2.5rem 3rem; overflow-y: auto; max-height: 100vh; }
#map { position: sticky; top: 0; height: 100vh; }

nav.langs { margin: 0 0 1.75rem; font-size: .875rem; color: var(--muted); }
nav.langs a { margin-right: .5rem; }
nav.langs [aria-current] { color: var(--ink); font-weight: 600; text-decoration: none; }

h1 { font-size: 1.9rem; line-height: 1.2; margin: 0 0 .25rem; }
.tagline { color: var(--muted); margin: 0 0 2rem; }
h2, summary { font-size: 1.15rem; font-weight: 600; margin: 2.25rem 0 .6rem; }
h3 { font-size: 1rem; margin: 1.5rem 0 .5rem; }
p { margin: 0 0 .9rem; }
a { color: var(--link); }

details { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: .25rem 0 .75rem; }
summary { cursor: pointer; list-style-position: outside; margin: .75rem 0 .25rem; }
summary::marker { color: var(--muted); }
details[open] summary { margin-bottom: .75rem; }

ul.instances { list-style: none; padding: 0; margin: 0; }
ul.instances li { padding: .7rem 0; border-bottom: 1px solid var(--line); }
ul.instances li:first-child { border-top: 1px solid var(--line); }
.where { color: var(--muted); font-size: .9rem; }
.dead { color: #a33; font-size: .85rem; }

code { background: #efece7; padding: .1em .35em; border-radius: 3px; font-size: .9em; }
footer { margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: .875rem; color: var(--muted); }

#onward {
	position: fixed; right: 1rem; bottom: 1rem; z-index: 2;
	background: rgba(255, 255, 255, .95); border: 1px solid var(--line);
	border-radius: .5rem; padding: .6rem .9rem; font-size: .875rem;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
}
#onward button {
	font: inherit; color: var(--link); background: none;
	border: 0; padding: 0 0 0 .5rem; cursor: pointer; text-decoration: underline;
}
#onward[hidden] { display: none; }

@media (max-width: 900px) {
	.wrap { grid-template-columns: 1fr; }
	#map { height: 60vh; position: static; order: -1; }
	.content { padding: 1.5rem 1.25rem 2rem; max-height: none; overflow: visible; }
}