/* One stylesheet, referenced root-relative as /style.css so it resolves the
   same from `/` and from `/privacy/`. A relative path would need to differ
   between the two, which is exactly the kind of thing that breaks when the
   directory is copied to another repository verbatim.

   No webfont, no script, no third-party request of any kind. A privacy policy
   that loads a font from someone else's server is making a claim its own page
   contradicts. */

:root {
	color-scheme: light dark;

	--bg: #fbfaf8;
	--surface: #ffffff;
	--text: #1b1a17;
	--muted: #55514a;
	--rule: #e2ded6;
	--accent: #1f5f5b;
	--note-bg: #fdf6e3;
	--note-rule: #d9c79a;
	--note-text: #4a3c18;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #15171a;
		--surface: #1c1f23;
		--text: #e8e6e1;
		--muted: #a8a49c;
		--rule: #32363c;
		--accent: #7fc9c2;
		--note-bg: #24201a;
		--note-rule: #5d4f33;
		--note-text: #e5d7b4;
	}
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 2rem 1rem 4rem;
	background: var(--bg);
	color: var(--text);
	font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	-webkit-text-size-adjust: 100%;
}

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

h1 {
	font-size: 1.9rem;
	line-height: 1.2;
	margin: 0 0 0.25rem;
	letter-spacing: -0.01em;
}

h2 {
	font-size: 1.25rem;
	line-height: 1.3;
	margin: 2.5rem 0 0.75rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--rule);
}

h3 {
	font-size: 1rem;
	margin: 1.5rem 0 0.5rem;
}

p,
li {
	color: var(--text);
}

.lede {
	font-size: 1.15rem;
	color: var(--muted);
	margin: 0 0 2rem;
}

a {
	color: var(--accent);
	text-underline-offset: 2px;
}

a:hover {
	text-decoration-thickness: 2px;
}

ul,
ol {
	padding-left: 1.25rem;
}

li {
	margin: 0.4rem 0;
}

dt {
	font-weight: 600;
	margin-top: 1rem;
}

dd {
	margin: 0.25rem 0 0;
	color: var(--muted);
}

code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.9em;
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: 4px;
	padding: 0.1em 0.35em;
	/* Scope strings are long and unbreakable; without this they widen the page
	   past a 400px viewport and the whole document scrolls sideways. */
	overflow-wrap: anywhere;
}

.note {
	background: var(--note-bg);
	border: 1px solid var(--note-rule);
	border-left-width: 4px;
	border-radius: 4px;
	padding: 0.9rem 1rem;
	margin: 1.5rem 0;
	color: var(--note-text);
}

.note p {
	color: inherit;
	margin: 0.5rem 0 0;
}

.note p:first-child {
	margin-top: 0;
}

.note strong {
	color: inherit;
}

footer {
	margin-top: 3rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--rule);
	color: var(--muted);
	font-size: 0.9rem;
}

footer p {
	color: inherit;
	margin: 0.4rem 0;
}

.meta {
	color: var(--muted);
	font-size: 0.9rem;
	margin: 0 0 2rem;
}

.steps {
	padding-left: 1.25rem;
}

.steps li {
	margin: 0.9rem 0;
}