/* Glosa's public pages: the app's paper, ink and rubric, nothing else. */
:root {
	--paper: #fbfaf7;
	--ink: #1b1814;
	--ink-2: #5d564d;
	--ink-3: #8a8378;
	--rule: #e6e2da;
	--rubric: #a8321f;
	--serif: "Alegreya", Georgia, "Times New Roman", serif;
	--sans: "Alegreya Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color-scheme: light;
}

@media (prefers-color-scheme: dark) {
	:root {
		--paper: #141210;
		--ink: #f1ede6;
		--ink-2: #c7c0b5;
		--ink-3: #968f84;
		--rule: #2e2a25;
		--rubric: #e7735c;
		color-scheme: dark;
	}
}

* { box-sizing: border-box; }

body {
	margin: 0;
	padding: 2.5rem 1.25rem 4rem;
	background: var(--paper);
	color: var(--ink);
	font: 1.0625rem/1.65 var(--sans);
}

main { max-width: 40rem; margin: 0 auto; }

header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 2rem; }
header img { width: 2.5rem; height: 2.5rem; border-radius: 0.6rem; }
header a { color: var(--ink); font: italic 700 1.6rem var(--serif); text-decoration: none; }

h1 { margin: 0 0 0.25rem; font: 700 2rem/1.2 var(--serif); text-wrap: balance; }
h2 { margin: 2.25rem 0 0.5rem; font: 700 1.25rem/1.3 var(--serif); }
p, li { color: var(--ink); }
.updated { color: var(--ink-3); font-size: 0.9375rem; margin: 0 0 2rem; }
a { color: var(--rubric); }
ul { padding-left: 1.25rem; }
li + li { margin-top: 0.35rem; }

nav { margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 1.25rem; font-size: 0.9375rem; }
nav a { color: var(--ink-2); }