/* Sarah Baartman: Karoo-meets-coast style (page-scoped) */
body.sarahbaartman {
	background:
		radial-gradient(circle at 12% 8%, rgba(245, 158, 11, 0.14), transparent 34%),
		radial-gradient(circle at 86% 24%, rgba(14, 116, 144, 0.13), transparent 36%),
		linear-gradient(180deg, #1a1a1a 0%, #2b2d42 100%);
	color: #e8eef5;
}

body.sarahbaartman .hero {
	position: relative;
	padding: 24px 14px 0;
	background:
		linear-gradient(90deg, rgba(49, 27, 16, 0.95), rgba(30, 58, 138, 0.92)),
		repeating-linear-gradient(
			45deg,
			rgba(255, 255, 255, 0.08) 0,
			rgba(255, 255, 255, 0.08) 8px,
			rgba(0, 0, 0, 0.08) 8px,
			rgba(0, 0, 0, 0.08) 16px
		);
	border-bottom: 3px solid #f59e0b;
}

body.sarahbaartman .hero h1 {
	margin: 0 0 16px;
	color: #f6f9fc;
	font-size: clamp(1.8rem, 2.8vw, 2.5rem);
	text-transform: uppercase;
	letter-spacing: 0.8px;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.24);
}

body.sarahbaartman .navbar {
	background: rgba(9, 16, 26, 0.9);
	border-top: 1px solid rgba(92, 122, 164, 0.35);
}

body.sarahbaartman .navbar a {
	color: #dbebf8;
	border-radius: 8px;
	font-weight: 600;
}

body.sarahbaartman .navbar a:hover {
	background: #92400e;
	color: #fde68a;
}

body.sarahbaartman main {
	width: min(1040px, calc(100% - 22px));
	margin: 20px auto 24px;
	padding: 18px;
	border-radius: 16px;
	border: 1px solid #3c4f66;
	background: linear-gradient(145deg, #1a2533, #131c27);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.33);
}

body.sarahbaartman .province-content h2 {
	margin: 4px 0 14px;
	color: #f3f8fc;
	font-size: clamp(1.1rem, 2.2vw, 1.5rem);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

body.sarahbaartman .province-content h2::after {
	content: '';
	display: block;
	width: 88px;
	height: 4px;
	margin-top: 8px;
	border-radius: 999px;
	background: linear-gradient(90deg, #f59e0b, #0ea5e9);
}

body.sarahbaartman .province-content ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 12px;
}

body.sarahbaartman .province-content li {
	border-radius: 12px;
	border: 1px solid #415b79;
	background: linear-gradient(145deg, #182b3f, #152636);
	box-shadow: 0 7px 16px rgba(0, 0, 0, 0.25);
	position: relative;
	overflow: hidden;
}

body.sarahbaartman .province-content li::before,
body.sarahbaartman .province-content li::after {
	content: '';
	position: absolute;
	top: 12px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
}

body.sarahbaartman .province-content li::before {
	left: 12px;
	background: #f59e0b;
}

body.sarahbaartman .province-content li::after {
	left: 24px;
	background: #0ea5e9;
}

body.sarahbaartman .province-content a {
	display: block;
	padding: 12px 12px 12px 42px;
	color: #e9f2fb;
	text-decoration: none;
	font-weight: 700;
	line-height: 1.3;
}

body.sarahbaartman .province-content a:hover {
	color: #fde68a;
	background: linear-gradient(145deg, #1e364f, #183148);
}

body.sarahbaartman .province-content li.is-highlighted {
	transform: translateY(-2px);
	border-color: #f59e0b;
}

body.sarahbaartman footer {
	background: #0b121c;
	color: #ceddea;
	border-top: 1px solid #2f4259;
}

body.sarahbaartman footer a {
	color: #b6d3e8;
}

body.sarahbaartman footer a:hover {
	color: #fde68a;
}

body.sarahbaartman .footer-bottom {
	color: #8ea9bf;
}

@media (max-width: 640px) {
	body.sarahbaartman main {
		width: calc(100% - 12px);
		margin: 12px auto 14px;
		padding: 12px;
	}

	body.sarahbaartman .province-content ul {
		grid-template-columns: 1fr;
	}
}