/* Terminal block green on galvanised DIN rail; dark mode is solder mask and silkscreen. */
:root {
	--rail: #e6e8e6;
	--ink: #1f2421;
	--muted: #4d5650;
	--green: #2d6e46;
	--green-deep: #1e4d31;
	--tag: #f7f8f5;
	--steel: #c9cdcb;
	--link: #1e5c37;
	color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
	:root {
		--rail: #0f1f17;
		--ink: #e8ede6;
		--muted: #a9b5ad;
		--green: #2f7a4c;
		--green-deep: #173a26;
		--tag: #eef1ec;
		--steel: #b4bab6;
		--link: #8fd3a8;
	}
}

* { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--rail);
	color: var(--ink);
	font-family: Bahnschrift, "DIN Alternate", "DIN 2014", "Roboto Condensed", "Arial Narrow", sans-serif;
	font-size: 1.125rem;
	line-height: 1.55;
}

main, footer {
	max-width: 40rem;
	margin: 0 auto;
	padding: 0 1rem;
}

.hero { padding: 4rem 0 2.5rem; }

.strip {
	display: block;
	width: 100%;
	max-width: 28rem;
	height: auto;
}
.housing { fill: var(--green); }
.ridge { fill: var(--green-deep); }
.screw { fill: var(--steel); stroke: var(--green-deep); stroke-width: 2; }
.slot { stroke: var(--green-deep); stroke-width: 3; stroke-linecap: round; }
.tag { fill: var(--tag); }
.entry { fill: var(--green-deep); }
.letters text {
	fill: #1f2421;
	font-family: inherit;
	font-size: 22px;
	font-weight: 600;
	text-anchor: middle;
}

h1 {
	margin: 1.5rem 0 0.25rem;
	font-size: 3.5rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.01em;
}

.lede {
	margin: 0;
	font-size: 1.375rem;
	line-height: 1.4;
	color: var(--muted);
}

section {
	padding: 1.75rem 0;
	border-top: 2px solid var(--green);
}

h2 {
	margin: 0 0 0.5rem;
	font-size: 1.375rem;
	font-weight: 600;
}

p { margin: 0 0 0.75rem; }
ul { margin: 0; padding-left: 1.25rem; }
li { margin-bottom: 0.5rem; }

a { color: var(--link); text-underline-offset: 0.15em; }
a:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; border-radius: 2px; }

footer {
	padding-top: 2rem;
	padding-bottom: 3rem;
	font-size: 0.9375rem;
	color: var(--muted);
}
footer p { margin-bottom: 0.4rem; }

.legal h1 { font-size: 2.5rem; }
.legal .hero { padding-bottom: 1.5rem; }