:root {
	--rl-primary: #0f4b5b;
	--rl-secondary: #c55927;
	--rl-font-body: "Open Sans", system-ui, sans-serif;
	--rl-font-display: "Inter", system-ui, sans-serif;
	--rl-font-size-base: 1rem;
	--rl-teal: var(--rl-primary);
	--rl-teal-dark: #0a3742;
	--rl-cyan: #d9f0f1;
	--rl-sienna: var(--rl-secondary);
	--rl-ink: #1f292b;
	--rl-muted: #667273;
	--rl-border: #d8e0df;
	--rl-bg: #f7f8f6;
	--rl-white: #ffffff;
}

body {
	background: var(--rl-bg);
	color: var(--rl-ink);
	font-family: var(--rl-font-body);
	font-size: var(--rl-font-size-base);
	letter-spacing: 0;
}

a {
	color: var(--rl-teal);
}

.site-shell {
	max-width: 1180px;
	margin: 0 auto;
	padding-left: 20px;
	padding-right: 20px;
}

.site-header {
	background: var(--rl-white);
	border-bottom: 1px solid var(--rl-border);
	position: sticky;
	top: 0;
	z-index: 1200;
}

.navbar {
	min-height: 72px;
}

.navbar-brand {
	display: inline-flex;
	align-items: center;
	font-family: var(--rl-font-display);
	gap: 10px;
	font-weight: 700;
	color: var(--rl-ink);
}

.brand-mark {
	display: inline-grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 8px;
	background: var(--rl-teal);
	color: var(--rl-white);
	font-size: 0.88rem;
}

.brand-logo {
	display: block;
	height: 44px;
	width: auto;
}

.brand-text {
	white-space: nowrap;
}

.nav-link {
	color: var(--rl-muted);
	font-family: var(--rl-font-display);
	font-weight: 600;
}

.nav-link.active,
.nav-link:hover {
	color: var(--rl-teal);
}

.site-main {
	min-height: calc(100vh - 145px);
}

.home-hero,
.content-section,
.members-map-section {
	padding: 56px 0;
}

.home-hero {
	background: linear-gradient(180deg, #ffffff 0%, var(--rl-bg) 100%);
}

.section-kicker {
	color: var(--rl-sienna);
	font-family: var(--rl-font-display);
	font-size: 0.82rem;
	font-weight: 750;
	letter-spacing: 0.08em;
	margin-bottom: 10px;
	text-transform: uppercase;
}

h1 {
	font-family: var(--rl-font-display);
	font-size: clamp(2rem, 4vw, 4rem);
	line-height: 1.05;
	margin-bottom: 20px;
}

h2,
h3,
h4,
h5,
h6 {
	font-family: var(--rl-font-display);
}

.members-map-section h1 {
	color: #225565;
	font-weight: bold;
	margin-bottom: 0.5rem;
	text-transform: uppercase;
}

.members-map-section .lead {
	font-size: 1rem;
}

.lead {
	color: var(--rl-muted);
	max-width: 720px;
}

.btn {
	border-radius: 8px;
	font-family: var(--rl-font-display);
	font-weight: 700;
}

.btn-primary {
	background: var(--rl-teal);
	border-color: var(--rl-teal);
}

.btn-primary:hover {
	background: var(--rl-teal-dark);
	border-color: var(--rl-teal-dark);
}

.status-panel,
.map-panel,
.access-panel {
	background: var(--rl-white);
	border: 1px solid var(--rl-border);
	border-radius: 8px;
	box-shadow: 0 18px 45px rgba(25, 42, 44, 0.08);
}

.status-panel {
	padding: 28px;
}

.status-panel h2 {
	font-family: var(--rl-font-display);
	font-size: 1.25rem;
	margin-bottom: 16px;
}

.status-panel ul {
	color: var(--rl-muted);
	margin: 0;
	padding-left: 1.1rem;
}

.site-footer {
	background: var(--rl-teal-dark);
	color: rgba(255, 255, 255, 0.8);
	padding: 22px 0;
}

.edit-link {
	background: var(--rl-ink);
	border-radius: 8px 0 0 8px;
	bottom: 24px;
	color: var(--rl-white);
	font-size: 0.85rem;
	padding: 8px 12px;
	position: fixed;
	right: 0;
	text-decoration: none;
	z-index: 1100;
}

.members-layout {
	display: grid;
	gap: 20px;
	grid-template-columns: 1fr;
}

.member-list {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.member-card {
	background: var(--rl-white);
	border: 2px solid transparent;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(25, 42, 44, 0.05);
	box-sizing: border-box;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 118px;
	padding: 14px 46px 14px 14px;
	position: relative;
	text-align: left;
	width: 100%;
}

.member-card:hover,
.member-card:focus {
	border-color: #329eb6;
	outline: none;
}

.member-card:focus-visible {
	box-shadow: 0 0 0 3px rgba(15, 75, 91, 0.2);
}

.member-card:not([data-member-id]) {
	cursor: default;
}

.member-name {
	color: var(--rl-ink);
	display: block;
	font-weight: 750;
	line-height: 1.2rem;
	margin-bottom: 0.5rem;
	padding-right: 4px;
}

.member-meta,
.member-country {
	color: var(--rl-muted);
	font-size: 0.92rem;
}

.member-card-main {
	min-width: 0;
}

.member-card-footer {
	margin-top: 14px;
	min-width: 0;
}

.member-email {
	color: var(--rl-primary);
	font-size: 0.8rem;
	overflow-wrap: anywhere;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

.member-email:hover {
	color: var(--rl-sienna);
}

.member-flag {
	font-size: 1rem;
	height: 17px;
	line-height: 0;
	position: absolute;
	right: 12px;
	top: 12px;
	width: 1.45em;
}

.member-popup-card {
	min-width: 180px;
	padding-right: 28px;
	position: relative;
}

.member-popup-name {
	margin-bottom: 4px;
}

.member-popup-flag {
	font-size: 1rem;
	height: 17px;
	line-height: 0;
	position: absolute;
	right: 0;
	top: 0;
	width: 1.45em;
}

.member-coordinate-note {
	color: var(--rl-sienna);
	font-size: 0.82rem;
	margin-top: 6px;
}

.map-panel {
	min-height: 560px;
	overflow: hidden;
	scroll-margin-top: 88px;
}

#members-map {
	height: 560px;
	width: 100%;
}

.access-panel {
	margin: 56px auto;
	max-width: 560px;
	padding: 28px;
}

.empty-state {
	color: var(--rl-muted);
	padding: 24px;
}

@media (max-width: 900px) {
	.member-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.map-panel,
	#members-map {
		max-height: none;
		min-height: 420px;
	}
}

@media (max-width: 560px) {
	.member-list {
		grid-template-columns: 1fr;
	}
}