:root {
  --bg: #8bfba5;
  --surface: #fffdf8;
  --surface-strong: #f8f2e2;
  --text: #1a1814;
  --muted: #4d4b49;
  --border: #d7ccb7;
  --accent: #02735E;
  --accent-strong: #014040;
  --accent-bright: #03A678;
  --accent-highlight: #F27405;
  --accent-warm: #731702;
  --accent-warm-strong: #5c1201;
  --shadow: 0 18px 50px rgba(1, 64, 64, 0.14);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
  background: var(--bg);
  color: var(--text);
}
a { color: inherit; }
.page-shell { max-width: 1180px; margin: 0 auto; padding: 24px; }
.site-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 32px; }
.site-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 16px; flex-wrap: wrap; }
.site-brand { font-size: 1.15rem; font-weight: 700; text-decoration: none; }
nav { display: flex; gap: 16px; }
.site-nav-link, .text-link, .back-link { color: var(--accent-strong); text-decoration: none; }
.site-nav-link:hover, .text-link:hover, .back-link:hover, .community-link:hover { color: var(--accent-warm); text-decoration: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.country-search { min-width: min(100%, 320px); }
.country-search-field { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.82); border: 1px solid rgba(1, 64, 64, 0.12); box-shadow: 0 10px 24px rgba(1, 64, 64, 0.08); }
.country-search input { width: min(100%, 220px); border: 0; background: transparent; padding: 8px 12px; font: inherit; color: var(--text); }
.country-search input::placeholder { color: var(--muted); }
.country-search input:focus { outline: none; }
.country-search-field:focus-within { border-color: var(--accent-bright); box-shadow: 0 12px 28px rgba(1, 64, 64, 0.12); }
.country-search-button { padding: 10px 14px; border-radius: 999px; background: var(--accent-strong); color: #ffffff; font-weight: 700; transition: background-color 140ms ease, transform 140ms ease, box-shadow 140ms ease; }
.country-search-button:hover, .country-search-button:focus-visible { background: var(--accent-warm); transform: translateY(-1px); box-shadow: 0 10px 18px rgba(115, 23, 2, 0.18); }
.country-search-button:focus-visible { outline: 3px solid rgba(242, 116, 5, 0.35); outline-offset: 2px; }
.main-content { display: grid; gap: 28px; }
.site-footer { margin-top: 28px; padding: 18px 0 8px; color: var(--accent-strong); font-size: 0.95rem; text-align: center; }
.hero, .country-hero, .contribution-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 28px;
  box-shadow: var(--shadow);
}
.hero { padding: 40px 28px; }
.eyebrow { margin: 0 0 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent-strong); font-size: 0.8rem; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(2.1rem, 5vw, 4.6rem); line-height: 0.95; max-width: 24ch; margin-bottom: 16px; }
h2 { font-size: 1.7rem; margin-bottom: 10px; }
h3 { font-size: 1.2rem; margin-bottom: 10px; }
.hero-copy, .section-heading p, .summary-panel p, .country-status, .community-description, .community-meta { color: var(--muted); }
.status-note { color: var(--muted); font-size: 0.95rem; margin-top: -6px; margin-bottom: 0; }
.status-note a { color: var(--accent-warm); }
.listing-count { display: block; margin-top: 10px; margin-bottom: 0; color: var(--accent-warm); font-weight: 700; font-size: 1.15rem; letter-spacing: 0.01em; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0; }
.stat { min-width: 140px; padding: 14px 16px; border-radius: 16px; background: #ddf3ee; border: 1px solid #8ecabf; transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background-color 160ms ease; }
.stat:hover { transform: translateY(-2px); background: #ffffff; border-color: var(--accent-bright); box-shadow: 0 14px 28px rgba(1, 64, 64, 0.14); }
.stat strong { display: block; font-size: 1.7rem; color: var(--accent-strong); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.top-countries-panel { background: linear-gradient(135deg, #d65e00, #f27405 58%, #ea7b1e); border: 1px solid rgba(115, 23, 2, 0.24); border-radius: 24px; padding: 16px 20px; box-shadow: 0 20px 40px rgba(115, 23, 2, 0.18); display: grid; gap: 12px; }
.top-countries-heading { max-width: 70ch; text-align: center; justify-self: center; }
.top-countries-heading h2 { margin-bottom: 4px; font-size: 1.25rem; }
.top-countries-panel .eyebrow { color: #fff6ea; }
.top-countries-heading h2, .top-countries-heading p { color: #ffffff; }
.top-countries-heading p:last-child { margin-bottom: 0; color: rgba(255, 246, 234, 0.92); }
.top-country-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; }
.top-country-item { min-width: 0; position: relative; }
.top-country-link { position: relative; width: 72px; aspect-ratio: 1; display: grid; place-items: center; gap: 5px; padding: 8px; border-radius: 999px; text-decoration: none; background: radial-gradient(circle at 30% 30%, #fbf1e8, #f4e5d7 72%); border: 1px solid rgba(115, 23, 2, 0.12); box-shadow: 0 10px 20px rgba(115, 23, 2, 0.12); transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease, background-color 140ms ease; }
.top-country-link:hover, .top-country-link:focus-visible { transform: translateY(-3px) scale(1.02); border-color: rgba(255, 255, 255, 0.72); background: radial-gradient(circle at 30% 30%, #fff6ee, #f7eadf 72%); box-shadow: 0 18px 30px rgba(115, 23, 2, 0.18); text-decoration: none; }
.top-country-link:focus-visible { outline: 3px solid rgba(255, 246, 234, 0.8); outline-offset: 3px; }
.top-country-link::after { content: attr(data-tooltip); position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translateX(-50%) translateY(6px); min-width: max-content; max-width: 180px; padding: 8px 10px; border-radius: 12px; background: rgba(26, 24, 20, 0.92); color: #ffffff; font-size: 0.86rem; line-height: 1.35; text-align: center; box-shadow: 0 12px 24px rgba(26, 24, 20, 0.2); opacity: 0; pointer-events: none; transition: opacity 140ms ease, transform 140ms ease; z-index: 2; }
.top-country-link:hover::after, .top-country-link:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.top-country-rank { display: inline-flex; align-items: center; justify-content: center; min-width: 0; padding: 2px 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: var(--accent-strong); font-weight: 700; font-size: 0.78rem; line-height: 1; box-shadow: 0 6px 14px rgba(115, 23, 2, 0.1); }
.top-country-flag-wrap { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; }
.top-country-flag { width: 32px !important; height: 24px !important; border-radius: 4px; }
.button-reset { border: 0; cursor: pointer; font: inherit; }
.button, .country-card-cta { display: inline-flex; align-items: center; justify-content: center; width: fit-content; padding: 12px 18px; border-radius: 999px; background: var(--accent); color: #fff; text-decoration: none; font-weight: 700; transition: transform 140ms ease, box-shadow 140ms ease, background-color 140ms ease; }
.button:hover, .button:focus-visible, .country-card-cta:hover, .country-card-cta:focus-visible { background: var(--accent-strong); color: #fff; text-decoration: none; box-shadow: 0 14px 28px rgba(1, 64, 64, 0.22); transform: translateY(-1px); }
.button:focus-visible, .country-card-cta:focus-visible { outline: 3px solid rgba(242, 116, 5, 0.45); outline-offset: 3px; }
.button-update { background: var(--accent-warm); }
.button-update:hover, .button-update:focus-visible { background: var(--accent-warm-strong); color: #fff; text-decoration: none; box-shadow: 0 14px 28px rgba(115, 23, 2, 0.24); }
.contribution-panel {
  border-color: rgba(115, 23, 2, 0.42);
  border-radius: 30px;
  box-shadow: 0 10px 24px rgba(1, 64, 64, 0.08), 0 3px 10px rgba(115, 23, 2, 0.08);
}
.contribution-panel p { color: var(--muted); max-width: 96ch; }
.contribution-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.section-stack { display: grid; gap: 20px; }
.directory-section { display: grid; gap: 16px; }
.section-heading { max-width: 96ch; }
.country-count, .country-status { padding-bottom: 20px; }
.country-grid, .community-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.country-card, .community-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 20px;
  box-shadow: var(--shadow);
}
.country-card-active { background: #ddf3ee; border-color: #8ecabf; }
.country-card-empty { background: #f4e6e1; border-color: #c8a096; }
.country-card { transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease, background-color 140ms ease; }
.country-card-link { display: grid; gap: 0px; color: inherit; text-decoration: none; min-height: 100%; }
.country-card h3 { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 0; }
.country-card-cta { margin-top: 8px; }
.country-card:hover, .country-card:focus-within { transform: translateY(-3px); box-shadow: 0 18px 36px rgba(1, 64, 64, 0.14); }
.country-card-active:hover, .country-card-active:focus-within { background: #d3eee7; border-color: var(--accent); }
.country-card-empty:hover, .country-card-empty:focus-within { background: #efddd7; border-color: var(--accent-warm); }
.country-card-link:focus-visible { outline: 3px solid rgba(242, 116, 5, 0.45); outline-offset: 6px; border-radius: 14px; }
.country-hero h1 { display: flex; align-items: flex-start; gap: 14px; }
.country-flag { width: 26px; height: 18px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(1, 64, 64, 0.16); flex: 0 0 auto; }
.country-card-empty .country-flag, .country-card-empty .country-flag-fallback { filter: grayscale(1); opacity: 0.6; }
.country-flag-hero { width: 34px; height: 24px; border-radius: 4px; margin-top: 0.18em; }
.country-flag-fallback { display: inline-flex; align-items: center; justify-content: center; color: var(--accent-strong); background: rgba(255, 255, 255, 0.55); }
.country-flag-fallback svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.back-link { display: inline-block; margin-top: 10px; }
.community-meta { padding-left: 18px; margin-bottom: 16px; }
.community-links { display: flex; flex-wrap: wrap; gap: 10px; }
.community-link {
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--surface-strong);
  border: 1px solid var(--border);
  transition: transform 140ms ease, background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}
.community-link:hover, .community-link:focus-visible { background: #ffffff; border-color: var(--accent-bright); box-shadow: 0 10px 20px rgba(1, 64, 64, 0.1); transform: translateY(-1px); text-decoration: none; }
.community-link:focus-visible { outline: 3px solid rgba(242, 116, 5, 0.35); outline-offset: 2px; }
.empty-state { padding: 24px; border-radius: 18px; background: var(--surface); border: 1px dashed var(--border); box-shadow: var(--shadow); }
.empty-state h2 { margin-bottom: 10px; }
.empty-state p { margin-bottom: 18px; color: var(--muted); max-width: 88ch; }
.print-shell { display: grid; gap: 28px; }
.print-intro { margin: -4px 0 8px; color: var(--muted); font-size: 1rem; }
.print-section { display: grid; gap: 18px; }
.print-country-group { display: grid; gap: 12px; padding: 0 0 18px; border-bottom: 1px solid var(--border); }
.print-country-group h3 { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 0; }
.print-community-list { display: grid; gap: 18px; }
.print-community-card { display: grid; gap: 8px; padding-left: 0; }
.print-community-card h4 { margin: 0; font-size: 1.1rem; }
.print-community-card .community-description { margin-bottom: 0; }
.print-community-card .community-meta { margin: 0; }
.print-link-list { margin: 0; padding-left: 18px; }
.print-link-list li { margin-bottom: 6px; overflow-wrap: anywhere; }
.print-link-label { font-weight: 700; }
.map-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 22px; }
.map-legend-item { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-weight: 600; }
.map-dot { width: 14px; height: 14px; border-radius: 999px; border: 2px solid var(--accent-strong); display: inline-block; }
.map-dot-active { background: var(--accent-bright); border-color: var(--accent-strong); }
.map-dot-empty { background: var(--accent-highlight); border-color: var(--accent-warm); }
.map-section { display: grid; gap: 20px; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.9fr); align-items: start; }
.directory-map { min-height: 620px; border-radius: 24px; overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow); }
.map-sidepanel { background: var(--surface); border: 1px solid var(--border); border-radius: 24px; padding: 24px; box-shadow: var(--shadow); display: grid; gap: 18px; }
.map-list-section { display: grid; gap: 10px; padding-bottom: 16px; border-bottom: 1px solid rgba(1, 64, 64, 0.12); }
.map-list-section:last-child { border-bottom: 0; padding-bottom: 0; }
.map-country-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.map-country-list li { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); }
.map-country-list strong { color: var(--accent-strong); font-size: 0.95rem; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { box-shadow: 0 12px 24px rgba(1, 64, 64, 0.18); }
.leaflet-popup-content { margin: 14px 16px; color: var(--text); }
.leaflet-popup-content a { color: var(--accent-strong); text-decoration: none; }
.leaflet-popup-content a:hover { color: var(--accent-warm); text-decoration: none; }
@media (max-width: 720px) {
  .page-shell { padding: 16px; }
  .site-header { align-items: flex-start; flex-direction: column; }
  .site-header-actions { width: 100%; justify-content: flex-start; }
  nav { flex-wrap: wrap; }
  .country-search { width: 100%; }
  .country-search-field { width: 100%; }
  .country-search input { width: 100%; min-width: 0; }
  .hero, .summary-panel, .country-hero { padding: 20px; }
  .map-section { grid-template-columns: 1fr; }
  .directory-map { min-height: 460px; }
}
@media print {
  @page { margin: 0.5in; }
  body { background: #ffffff; }
  .page-shell { max-width: none; padding: 0; }
  .site-header, .site-footer, .print-actions, .back-link, .print-hero { display: none !important; }
  .print-intro { display: block; margin: 0 0 14px; color: #333333; font-size: 0.95rem; }
  .hero, .country-hero, .contribution-panel, .community-card, .empty-state { box-shadow: none; }
  .hero, .country-hero, .contribution-panel, .community-card, .empty-state { border-color: #999999; }
  .main-content, .print-shell, .print-section, .print-community-list, .print-community-card { display: block; }
  .main-content { gap: 0; }
  .print-shell { margin: 0; }
  .print-section { margin-bottom: 18px; }
  .print-section .section-heading { margin-bottom: 10px; }
  .print-section .section-heading h2 { font-size: 1.3rem; margin-bottom: 4px; }
  .print-section .section-heading p { margin-bottom: 0; }
  .print-country-group { display: block; padding: 0 0 12px; margin-bottom: 12px; break-inside: auto; page-break-inside: auto; }
  .print-country-group h3 { display: flex; margin-bottom: 2px; }
  .print-country-group .listing-count { margin: 0 0 8px; font-size: 1rem; }
  .print-community-card { margin-bottom: 12px; break-inside: avoid; page-break-inside: avoid; }
  .print-community-card h4 { font-size: 1rem; }
  .print-community-card .community-meta { padding-left: 16px; margin-bottom: 8px; }
  .print-link-list { padding-left: 16px; }
  .print-link-list li { margin-bottom: 4px; }
  .print-link-list a { overflow-wrap: anywhere; word-break: break-word; }
}