:root {
	--ink: #1c1f24;
	--slate: #2b3038;
	--muted: #5f6670;
	--line: #e6e1d7;
	--cream: #f7f4ee;
	--paper: #fffdf9;
	--brick: #b5532f;
	--brick-dark: #8f3f22;
	--copper: #d08a4a;
	--sage: #5f7a63;
	--radius: 14px;
	--shadow: 0 1px 2px rgba(28, 31, 36, .06), 0 8px 24px rgba(28, 31, 36, .06);
	--head: "Archivo", system-ui, sans-serif;
	--body: "Inter", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--cream);
	color: var(--ink);
	font: 16px/1.6 var(--body);
	-webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }
a { color: inherit; }

h1, h2, h3 { font-family: var(--head); line-height: 1.12; margin: 0; letter-spacing: -.015em; }

.wrap { max-width: 1120px; margin-inline: auto; padding-inline: 16px; }
@media (min-width: 720px) { .wrap { padding-inline: 32px; } }

/* concept switcher shared by all three pages */
.concept-bar {
	background: var(--ink);
	color: #e9e4da;
	font-size: .8rem;
}
.concept-bar .wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	flex-wrap: wrap;
	padding-block: .55rem;
}
.concept-bar strong { color: var(--copper); font-weight: 600; letter-spacing: .02em; }
.concept-bar nav { display: flex; gap: .3rem; flex-wrap: wrap; }
.concept-bar nav a {
	text-decoration: none;
	padding: .2rem .65rem;
	border-radius: 99px;
	color: #c9c3b8;
	border: 1px solid transparent;
}
.concept-bar nav a:hover { color: #fff; border-color: rgba(255, 255, 255, .2); }
.concept-bar nav a[aria-current="page"] { background: rgba(255, 255, 255, .1); color: #fff; }

.btn {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font: 600 .95rem var(--body);
	padding: .8rem 1.25rem;
	border-radius: 10px;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform .15s ease, background .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--brick); color: #fff; }
.btn-primary:hover { background: var(--brick-dark); }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { background: var(--paper); }

.eyebrow {
	display: inline-block;
	font: 600 .75rem var(--body);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--brick);
	margin-bottom: .75rem;
}

.note {
	font-size: .8rem;
	color: var(--muted);
}

:focus-visible { outline: 3px solid var(--copper); outline-offset: 2px; }