/* Buffalo City: Coastal urban style (page-scoped) */
body.buffalocity {
	background:
		radial-gradient(circle at 10% 12%, rgba(37, 99, 235, 0.16), transparent 34%),
		radial-gradient(circle at 86% 20%, rgba(16, 185, 129, 0.14), transparent 36%),
		linear-gradient(180deg, #0d1b2a 0%, #1b263b 100%);
	color: #e8eef5;
}

body.buffalocity .hero {
	position: relative;
	padding: 24px 14px 0;
	background:
		linear-gradient(90deg, rgba(10, 30, 58, 0.95), rgba(6, 78, 120, 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 #38bdf8;
}

body.buffalocity .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.buffalocity .navbar {
	background: rgba(9, 16, 26, 0.9);
	border-top: 1px solid rgba(92, 122, 164, 0.35);
}

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

body.buffalocity .navbar a:hover {
	background: #1d4ed8;
	color: #d1fae5;
}

body.buffalocity 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.buffalocity .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.buffalocity .province-content h2::after {
	content: '';
	display: block;
	width: 88px;
	height: 4px;
	margin-top: 8px;
	border-radius: 999px;
	background: linear-gradient(90deg, #38bdf8, #34d399);
}

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

body.buffalocity .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.buffalocity .province-content li::before,
body.buffalocity .province-content li::after {
	content: '';
	position: absolute;
	top: 12px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
}

body.buffalocity .province-content li::before {
	left: 12px;
	background: #38bdf8;
}

body.buffalocity .province-content li::after {
	left: 24px;
	background: #34d399;
}

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

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

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

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

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

body.buffalocity footer a:hover {
	color: #d1fae5;
}

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

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

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