/* Capricorn home page styles (scoped only to this page) */

body.capricorn {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background:
		radial-gradient(circle at 9% 7%, rgba(193, 136, 74, 0.2) 0%, rgba(193, 136, 74, 0) 35%),
		radial-gradient(circle at 87% 5%, rgba(95, 124, 82, 0.16) 0%, rgba(95, 124, 82, 0) 32%),
		linear-gradient(180deg, #f7efe1 0%, #efe2cc 100%);
	color: #3f2d1f;
}

body.capricorn .hero {
	background:
		linear-gradient(135deg, #7d4c2b, #9f6732),
		repeating-linear-gradient(
			45deg,
			rgba(255, 255, 255, 0.08) 0,
			rgba(255, 255, 255, 0.08) 10px,
			rgba(0, 0, 0, 0.06) 10px,
			rgba(0, 0, 0, 0.06) 20px
		);
	color: #fff5e8;
	padding: 28px 14px;
	text-align: center;
	border-bottom: 4px solid #d2a548;
}

body.capricorn .hero h1 {
	margin: 0;
	font-size: 34px;
	letter-spacing: 0.4px;
}

body.capricorn .navbar {
	background: linear-gradient(90deg, #5b3a22 0%, #744a27 100%);
}

body.capricorn .navbar ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
}

body.capricorn .navbar a {
	color: #fff6ea;
	text-decoration: none;
	padding: 12px 18px;
	display: inline-block;
	font-weight: 600;
}

body.capricorn .navbar a:hover {
	background: rgba(255, 255, 255, 0.14);
}

body.capricorn .province-content {
	width: min(980px, calc(100% - 28px));
	margin: 26px auto;
	flex: 1 0 auto;
}

body.capricorn .province-meta {
	background: #fffaf1;
	border: 1px solid #e5cfb1;
	border-radius: 14px;
	box-shadow: 0 10px 28px rgba(66, 44, 25, 0.08);
	padding: 16px;
}

body.capricorn .province-meta ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

body.capricorn .province-meta li a {
	display: block;
	padding: 12px 14px;
	border: 1px solid #e6d3b8;
	border-radius: 10px;
	background: #fff4e5;
	color: #4b6a31;
	text-decoration: none;
	font-weight: 600;
}

body.capricorn .province-meta li a:hover {
	background: #f6ead7;
	border-color: #d4b180;
	color: #7c4f24;
}

body.capricorn footer {
	margin-top: auto;
}

@media (max-width: 640px) {
	body.capricorn .hero h1 {
		font-size: 28px;
	}

	body.capricorn .province-content {
		width: calc(100% - 14px);
		margin: 16px auto;
	}
}