/* Two-column tile row for resources/social */
.tile-row {
	display: flex;
	gap: 2rem;
	max-width: 720px;
	margin: 2rem auto;
	justify-content: center;
}
.half-tile {
	flex: 1 1 0;
	background: var(--card-bg);
	border-radius: 12px;
	box-shadow: var(--card-shadow);
	padding: 2rem 1.5rem;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.half-tile h2 {
	margin-top: 0;
}
.half-tile ul {
	list-style: none;
	padding: 0;
	margin: 0;
	width: 100%;
}
.half-tile li {
	margin: 0.5rem 0;
	text-align: center;
}
.half-tile a {
	font-weight: 600;
	word-break: break-word;
}

@media (max-width: 900px) {
	.tile-row {
		flex-direction: column;
		gap: 1.2rem;
	}
	.half-tile {
		padding: 1.2rem 0.7rem;
	}
}
/* Central tile for resource/social sections */
.central-tile-section {
	max-width: 720px;
	margin: 2rem auto;
	background: var(--card-bg);
	border-radius: 12px;
	box-shadow: var(--card-shadow);
	padding: 2rem 1.5rem;
}

/* Responsive list for resource/social links */
.central-tile-section ul {
	list-style: none;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	justify-content: center;
	max-width: 600px;
	margin: 0 auto;
}
.central-tile-section li {
	flex: 1 1 180px;
	min-width: 120px;
	text-align: center;
}
.central-tile-section a {
	font-weight: 600;
	word-break: break-word;
}

@media (max-width: 600px) {
	.central-tile-section {
		padding: 1.2rem 0.5rem;
	}
	.central-tile-section ul {
		gap: 0.5rem 0.5rem;
		max-width: 100%;
	}
	.central-tile-section li {
		min-width: 90px;
		font-size: 0.98em;
	}
}
:root { color-scheme: light dark; }
* { box-sizing: border-box; }

body {
	margin: 0;
	font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	padding: 1rem;
	background: var(--background, #fff);
	color: var(--foreground, #222);
}

header, main, footer {
	max-width: 720px;
	margin: 0 auto;
	width: 100%;
	padding: 0 1rem;
}

nav {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
	margin-bottom: 1.5rem;
}

nav a {

	/* Default to light theme, override for dark below */
	:root {
		color-scheme: light dark;
		--primary: #2a5298;
		--primary-light: #4f8cff;
		--accent: #f7b32b;
		--background: #f4f7fa;
		--foreground: #222;
		--card-bg: #fff;
		--card-shadow: 0 2px 16px 0 rgba(42,82,152,0.08);
		--nav-bg: #fff;
		--nav-link: #2a5298;
		--nav-link-active: #fff;
		--nav-link-bg-active: #2a5298;
		--footer-bg: #e9eef3;
	}

	@media (prefers-color-scheme: dark) {
		:root {
			--background: #181f2a;
			--foreground: #f4f7fa;
			--card-bg: #232c3d;
			--card-shadow: 0 2px 16px 0 rgba(42,82,152,0.18);
			--nav-bg: #232c3d;
			--nav-link: #90b4fa;
			--nav-link-active: #232c3d;
			--nav-link-bg-active: #4f8cff;
			--footer-bg: #181f2a;
		}
	}

	* {
		box-sizing: border-box;
	}

	body {
		margin: 0;
		font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
		padding: 0;
		min-height: 100vh;
		background: linear-gradient(135deg, var(--footer-bg) 0%, var(--background) 100%);
		color: var(--foreground);
		transition: background 0.3s, color 0.3s;
	}

		background: var(--nav-bg);
		box-shadow: 0 2px 8px 0 rgba(42,82,152,0.04);
		padding: 1.5rem 0 1rem 0;
		margin-bottom: 2rem;
		transition: background 0.3s;
	}

	nav {
		display: flex;
		flex-wrap: wrap;
		gap: 1rem;
		justify-content: center;
		align-items: center;
		margin-bottom: 1rem;
	}

	nav a {
		color: var(--nav-link);
		text-decoration: none;
		font-weight: 600;
		padding: 0.5em 1.2em;
		border-radius: 6px;
		transition: background 0.2s, color 0.2s;
		font-size: 1.05em;
		letter-spacing: 0.01em;
		background: transparent;
	}

	nav a:hover, nav a:focus {
		background: var(--primary-light);
		color: var(--nav-link-active);
	}


	main {
		max-width: 720px;
		margin: 0 auto;
		width: 100%;
		padding: 0 1.5rem;
	}

	section {
		background: var(--card-bg);
		border-radius: 12px;
		box-shadow: var(--card-shadow);
		margin-bottom: 2rem;
		padding: 2rem 1.5rem;
		transition: box-shadow 0.2s, background 0.3s, color 0.3s;
	}

	section:hover {
		box-shadow: 0 4px 24px 0 rgba(42,82,152,0.13);
	}

	h1, h2, h3 {
		margin-top: 0;
		margin-bottom: .5rem;
		line-height: 1.2;
		color: var(--primary);
	}

	h1 {
		font-size: 2.2rem;
		font-weight: 700;
	}

	h2 {
		font-size: 1.4rem;
		font-weight: 600;
	}

	h3 {
		font-size: 1.1rem;
		font-weight: 500;
	}

	p, label, input, textarea, button {
		font-size: 1em;
	}

		footer {
			background: var(--footer-bg);
			text-align: center;
			margin-top: 2rem;
			font-size: 0.98em;
			color: #666;
			padding: 1.5rem 0 1rem 0;
			border-top: 1px solid #dde3ea;
			transition: background 0.3s, color 0.3s;
		}

	input, textarea {
		width: 100%;
		padding: 0.7em;
		margin-bottom: 1em;
		border: 1px solid #cfd8dc;
		border-radius: 6px;
		background: #f9fbfd;
		font-family: inherit;
		transition: border 0.2s;
	}

	input:focus, textarea:focus {
		border: 1.5px solid var(--primary);
		outline: none;
	}

	button {
		background: var(--primary);
		color: #fff;
		border: none;
		border-radius: 6px;
		padding: 0.7em 1.5em;
		font-weight: 600;
		cursor: pointer;
		transition: background 0.2s;
	}

	button:hover, button:focus {
		background: var(--accent);
		color: #222;
	}

	@media (max-width: 600px) {
		body {
			font-size: 15px;
			padding: 0;
		}
		header, main, footer {
			padding: 0 0.5rem;
		}
		nav {
			gap: 0.5rem;
			flex-direction: column;
			align-items: center;
		}
		nav a {
			width: 100%;
			text-align: center;
			padding: 0.75em 0;
		}
		section {
			padding: 1.2rem 0.7rem;
		}
		h1 {
			font-size: 1.5rem;
		}
		h2 {
			font-size: 1.1rem;
		}
	}