:root {
	color-scheme: light;
	--ink: #382a21;
	--muted: #745f50;
	--paper: #fffaf0;
	--sand: #eee3cf;
	--wood: #4b3123;
	--line: #b99a70;
	--green: #2f7d50;
	--red: #a43c35;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	background: radial-gradient(circle at top, #fff8e9 0, var(--sand) 72%);
	color: var(--ink);
	font: 18px/1.65 system-ui, -apple-system, "Segoe UI", sans-serif;
}

header {
	background: linear-gradient(135deg, #352117, var(--wood));
	color: white;
	border-bottom: 4px solid #9f754c;
}

nav {
	max-width: 1040px;
	min-height: 74px;
	margin: auto;
	padding: 14px 24px;
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}

nav strong { margin-right: auto; font-size: 21px; letter-spacing: .02em; }
nav a { color: white; text-decoration: none; font-weight: 650; }
nav a:hover, nav a:focus-visible { text-decoration: underline; }

main { max-width: 920px; margin: 48px auto; padding: 0 24px 70px; }
h1 { margin: 0 0 22px; font-size: clamp(34px, 6vw, 54px); line-height: 1.15; }
h2 { margin-top: 1.65em; line-height: 1.25; color: #67452f; }
h3 { color: #67452f; }
a { color: #17653b; }

.lead { color: var(--muted); font-size: 21px; max-width: 760px; }
.card {
	background: var(--paper);
	border: 2px solid var(--line);
	border-radius: 20px;
	padding: clamp(22px, 4vw, 34px);
	margin: 24px 0;
	box-shadow: 0 10px 32px #3b27151c;
}

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.grid .card { margin: 0; }
.button {
	display: inline-block;
	padding: 13px 20px;
	border-radius: 11px;
	background: var(--green);
	color: white;
	text-decoration: none;
	font-weight: 750;
}

.button.secondary { background: var(--wood); }
.notice { padding: 16px 18px; border-left: 5px solid var(--green); background: #e5f2e8; border-radius: 8px; }
.warning { padding: 16px 18px; border: 2px solid var(--red); background: #fff0e9; border-radius: 12px; }
code { padding: 2px 6px; border-radius: 5px; background: #efe4d2; }
footer { margin-top: 42px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted); }

@media (max-width: 680px) {
	body { font-size: 17px; }
	main { margin-top: 30px; padding-inline: 16px; }
	nav { gap: 12px 16px; }
	nav strong { width: 100%; }
}