/* Readable hierarchy across the portal, catalog and map. */
@font-face {
  font-family: 'Inter';
  src: url('assets/InterVariable.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --ink: #202532;
  --muted: #646d79;
  --border: #e0e6e5;
}

body {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-optical-sizing: auto;
  font-size: 15px;
  line-height: 1.6;
  font-weight: 400;
}

h1, h2, h3 {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-weight: 700;
  color: var(--ink);
}
h1, .hero h1 { font-size: 34px; line-height: 1.22; letter-spacing: -0.9px; }
h2 { font-size: 24px; line-height: 1.3; letter-spacing: -0.35px; }
h3 { font-size: 20px; line-height: 1.35; }
h4 { font-size: 13px; font-weight: 650; line-height: 1.45; }
small { font-size: 12px; }
.muted { color: var(--muted); font-size: 13px; }
.lead { color: #606b76; font-size: 16px; line-height: 1.65; }

.brand { font-size: 17px; font-weight: 700; }
.brand small { font-size: 12px; }
.sidebar nav a { font-size: 14px; font-weight: 500; }
.sidebar nav a.active { font-weight: 650; }
.language, .language b, .quote p { font-size: 12px; }
.search input { font-size: 14px; }
.search input::placeholder { color: #737d88; }
.search kbd { font-family: inherit; font-size: 12px; }
.primary, .outline, .soft, .map-link {
  font-size: 13px;
  font-weight: 600;
}
.primary { box-shadow: 0 2px 5px #204f4620; }
.popular small, .popular button { font-size: 12px; }
.popular button { font-weight: 500; padding: 4px 9px; }

.stats strong { font-size: 23px; font-weight: 650; line-height: 1.3; }
.stats small { display: block; font-size: 12px; margin-top: 4px; }
.panel-heading { font-size: 14px; font-weight: 650; }
.panel-heading a { font-size: 12px; font-weight: 500; }
.tag, .tags span { font-size: 11px; font-weight: 500; }
.metadata { font-size: 12px; line-height: 1.55; }
.metadata small { font-size: 11px; }
.chips span { font-size: 11px; font-weight: 500; }
.legend-row { padding: 11px 0; }
.legend-row b { font-size: 13px; font-weight: 600; }
.legend-row small { font-size: 12px; line-height: 1.45; }
.gallery > small { font-size: 11px; }
.about-strip { font-size: 13px; line-height: 1.55; }
.demo-note { font-size: 11px; }
.panel { box-shadow: 0 2px 8px #223c3210; }

.breadcrumb { font-size: 13px; }
.small-stats b { font-size: 22px; font-weight: 650; }
.small-stats small { font-size: 11px; }
.filters select, .filters button, .saved-filter { font-size: 12px; font-weight: 500; }
th { font-size: 12px; font-weight: 600; }
td { font-size: 12px; color: #596371; }
td:first-child { font-size: 14px; font-weight: 500; }
.table-footer { font-size: 12px; }
.tabs button { font-size: 12px; font-weight: 500; }
.tabs button.active { font-weight: 650; }
.detail-body p { font-size: 13px; color: var(--muted); }
.detail-panel .detail-title h2 { font-size: 23px; }

.mini-layers, .layer-panel { font-size: 13px; }
.mini-layers b, .layer-panel > b { font-weight: 650; }
.layer-legend, .map-breadcrumb { font-size: 12px; }
.map-detail p, .map-description { font-size: 13px; }
.map-detail .outline { font-size: 12px; }
#map-status { font-size: 11px; }

@media (max-width: 1250px) {
  h1, .hero h1 { font-size: 30px; }
  .sidebar nav a { font-size: 13px; }
  .stats > div { gap: 14px; }
}
@media (max-width: 950px) {
  .brand { font-size: 14px; }
  .sidebar nav a { font-size: 12px; gap: 9px; }
  .sidebar nav a .ui-icon { width: 18px; height: 18px; }
}
@media (max-width: 650px) {
  h1, .hero h1 { font-size: 28px; letter-spacing: -0.65px; }
  .brand { font-size: 17px; }
  .sidebar nav a { font-size: 13px; }
  .lead { font-size: 15px; }
  .stats strong { font-size: 21px; }
  .stats small { font-size: 11px; }
  .layer-panel { font-size: 12px; }
  .layer-legend { font-size: 11px; }
  .map-breadcrumb { font-size: 11px; }
  .map-detail .detail-title h2 { font-size: 20px; }
  .map-detail p { font-size: 12px; }
  .map-detail .outline { font-size: 11px; }
  .map-filters .tag { font-size: 10px; }
}

.basemap-controls{margin-top:16px;padding-bottom:16px;border-bottom:1px solid var(--border)}.basemap-controls select{width:100%;font-size:13px}.basemap-controls label{font-size:12px;margin:10px 0 6px}.basemap-controls input[type=range]{width:100%;margin:5px 0}.layer-panel{max-height:calc(100% - 45px);overflow:auto}