:root {
	--bg: #fbf8f3;
	--text: #2b2622;
	--muted: #6f665e;
	--accent: #b5543c;
	--card: #ffffff;
	--border: #e8e0d5;
	color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #1c1a18;
		--text: #ece6de;
		--muted: #a59b90;
		--accent: #e08a6f;
		--card: #262320;
		--border: #3a3530;
	}
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

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

header {
	padding: 4rem 0 2rem;
	text-align: center;
}

.logo {
	display: inline-block;
	margin: 0 0 1rem;
	font: 1.4rem/1.2 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	text-align: left;
	color: var(--accent);
}

h1 {
	margin: 0;
	font-size: 2.4rem;
	letter-spacing: -0.02em;
}

.tagline {
	margin: 0.5rem 0 0;
	color: var(--muted);
}

h2 {
	margin: 2.5rem 0 0.75rem;
	font-size: 1.3rem;
}

h3 {
	margin: 0;
	font-size: 1.15rem;
}

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

.brands {
	display: grid;
	gap: 1rem;
	margin-top: 2rem;
}

@media (min-width: 640px) {
	.brands {
		grid-template-columns: 1fr 1fr;
	}
}

.brands article {
	padding: 1.25rem;
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 0.75rem;
}

.brands p {
	margin: 0.5rem 0 0;
}

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

.contact {
	font-weight: 600;
}

footer {
	padding-top: 3rem;
	padding-bottom: 2rem;
	color: var(--muted);
	font-size: 0.9rem;
	text-align: center;
}