:root {
  --ink:#142f3c;
  --muted:#71818a;
  --line:#e2e9e9;
  --paper:#f7f9f9;
  --teal:#087e85;
  --light:#e5f3f1;
  --orange:#de9550}
* {
  box-sizing:border-box}
body {
  margin:0;
  color:var(--ink);
  background:var(--paper);
  font:16px 'DM Sans',sans-serif}
button,input,select {
  font:inherit}
button,a,input,select {
  -webkit-tap-highlight-color:transparent}
a {
  color:inherit;
  text-decoration:none}
button {
  cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible {
  outline:3px solid #dc9c42;
  outline-offset:4px}
button {
  border:0;
  background:none;
  color:inherit}
header {
  background:white;
  border-bottom:1px solid var(--line)}
.header-inner {
  max-width:1440px;
  margin:auto;
  padding:23px 48px;
  display:flex;
  align-items:center;
  gap:45px}
.brand {
  display:flex;
  align-items:center;
  gap:10px;
  font:800 28px Manrope,sans-serif;
  letter-spacing:-1.2px}
.brand-icon {
  color:var(--teal);
  font:46px serif;
  line-height:1}
.brand-dot {
  color:var(--teal)}
.brand small {
  display:block;
  font:600 9px 'DM Sans',sans-serif;
  letter-spacing:2px;
  margin-top:2px}
.header-inner nav {
  display:flex;
  align-self:stretch;
  align-items:center;
  gap:31px;
  margin-left:auto}
.header-inner nav a {
  font-size:14px;
  font-weight:550;
  position:relative;
  padding:12px 0}
.header-inner nav a.active {
  color:var(--teal)}
.header-inner nav a.active:after {
  content:'';
  position:absolute;
  bottom:-24px;
  left:0;
  right:0;
  height:3px;
  background:var(--teal)}
.language {
  font-size:13px;
  font-weight:650;
  border-left:1px solid var(--line);
  padding-left:23px}
.language span {
  color:var(--muted);
  padding-left:6px}
main {
  max-width:1440px;
  margin:auto;
  padding:46px 48px 65px;
  min-height:80vh}
h1,h2,h3,p {
  margin:0}
h1,h2,h3 {
  font-family:Manrope,sans-serif}
h1 {
  font-size:42px;
  line-height:1.2;
  letter-spacing:-1.8px;
  font-weight:750}
h1 em {
  color:var(--teal);
  font-style:normal}
h2 {
  font-size:23px;
  letter-spacing:-.7px}
h3 {
  font-size:17px;
  letter-spacing:-.3px}
p {
  line-height:1.6;
  color:var(--muted)}
.eyebrow {
  font-size:11px;
  letter-spacing:1.8px;
  font-weight:700;
  color:var(--teal);
  margin-bottom:12px}
.intro {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  margin-bottom:33px}
.intro p {
  font-size:15px;
  margin-top:12px}
.search {
  display:flex;
  align-items:center;
  gap:12px;
  background:white;
  border:1px solid #dce4e6;
  border-radius:9px;
  padding:15px 17px;
  width:340px;
  box-shadow:0 3px 7px #142f3c03;
  color:var(--muted)}
.search input {
  border:0;
  background:none;
  outline:0;
  width:100%;
  min-width:0;
  color:var(--ink);
  font-size:14px}
.search kbd {
  font:12px 'DM Sans';
  border:1px solid var(--line);
  padding:2px 6px;
  border-radius:4px}
.icon {
  width:19px;
  height:19px;
  vertical-align:middle;
  flex-shrink:0;
  stroke:currentColor;
  fill:none;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round}
.home-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) 302px;
  gap:23px}
.panel {
  background:white;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden}
.panel-head {
  padding:21px 23px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px}
.panel-head h2 {
  font-size:17px;
  letter-spacing:-.3px}
.subtle {
  color:var(--muted);
  font-size:13px}
.segmented {
  display:flex;
  padding:3px;
  background:#f0f4f4;
  border-radius:6px;
  gap:3px}
.segmented button {
  padding:7px 11px;
  border-radius:4px;
  font-size:12px;
  display:flex;
  align-items:center;
  gap:6px}
.segmented button.active {
  background:white;
  box-shadow:0 1px 4px #102d3912;
  color:var(--teal)}
.segmented .icon {
  width:14px;
  height:14px}
.continents {
  display:flex;
  gap:5px;
  padding:0 22px 16px;
  flex-wrap:wrap}
.continents button,.chip {
  font-size:12px;
  padding:7px 12px;
  border:1px solid var(--line);
  border-radius:5px;
  background:white}
.continents button.active {
  background:var(--ink);
  border-color:var(--ink);
  color:white}
.map-wrap {
  height:350px;
  background:#eef5f5;
  position:relative;
  overflow:hidden;
  border-top:1px solid #eaf0f0}
.map-svg {
  width:100%;
  height:100%}
.map-svg path {
  fill:#c7dcd8;
  stroke:#f5f9f8;
  stroke-width:.7;
  transition:fill .2s;
  cursor:pointer}
.map-svg path:hover,.map-svg path:focus {
  fill:#238e89;
  outline:0}
.map-svg path.selected {
  fill:#309992}
.map-svg path.faded {
  fill:#e2ebeb}
.map-grid line {
  stroke:#e1ecec;
  stroke-width:.5}
.map-label {
  fill:#6f8f92;
  font:9px 'DM Sans';
  letter-spacing:1.8px;
  pointer-events:none}
.map-controls {
  position:absolute;
  right:16px;
  bottom:18px;
  display:flex;
  flex-direction:column;
  background:white;
  border:1px solid var(--line);
  border-radius:5px;
  box-shadow:0 2px 6px #00000005}
.map-controls button {
  font-size:20px;
  width:32px;
  height:31px}
.map-controls button+button {
  border-top:1px solid var(--line)}
.map-tooltip {
  position:absolute;
  background:var(--ink);
  color:white;
  padding:9px 13px;
  border-radius:6px;
  font-size:13px;
  pointer-events:none;
  display:none;
  z-index:2}
.map-caption {
  position:absolute;
  left:20px;
  bottom:19px;
  background:#ffffffdf;
  padding:8px 11px;
  border-radius:5px;
  font-size:11px;
  color:#61757c}
.map-caption span {
  display:inline-block;
  width:7px;
  height:7px;
  background:#268d85;
  border-radius:50%;
  margin-right:6px}
.map-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 23px;
  font-size:12px;
  color:var(--muted)}
.text-link {
  color:var(--teal);
  font-size:13px;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:9px}
.text-link .icon {
  width:15px;
  height:15px}
.spotlight {
  position:relative}
.spotlight-image {
  height:181px;
  position:relative;
  background:var(--ink);
  overflow:hidden}
.spotlight-image img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 43%}
.spotlight-image:after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(transparent,#09273490)}
.photo-tag {
  position:absolute;
  top:16px;
  left:17px;
  z-index:1;
  background:#ffffffed;
  padding:6px 9px;
  border-radius:4px;
  font-size:10px;
  font-weight:700;
  letter-spacing:1px}
.photo-loc {
  position:absolute;
  bottom:15px;
  left:18px;
  z-index:1;
  color:white;
  font-size:11px}
.spotlight-content {
  padding:21px}
.country-name {
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:7px}
.country-name h2 {
  font-size:23px}
.flag {
  font-family:system-ui;
  font-size:25px;
  line-height:1.2}
.spotlight-content>p {
  font-size:12px;
  margin-bottom:14px}
.fact-row {
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;
  border-bottom:1px solid #edf1f1;
  font-size:13px}
.fact-row span {
  color:var(--muted)}
.fact-row strong {
  font-weight:550}
.primary {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:13px;
  background:var(--teal);
  color:white;
  border-radius:6px;
  padding:12px 18px;
  font-size:13px;
  font-weight:600}
.spotlight .primary {
  width:100%;
  margin-top:18px}
.stats-band {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin-top:23px;
  border:1px solid var(--line);
  border-radius:10px;
  background:white;
  padding:22px 0}
.stat {
  display:flex;
  align-items:center;
  gap:15px;
  padding:0 25px;
  border-right:1px solid var(--line)}
.stat:last-child {
  border:0}
.stat-icon {
  width:41px;
  height:41px;
  background:#eff6f5;
  border-radius:9px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--teal)}
.stat strong {
  font:700 21px Manrope}
.stat p {
  font-size:12px;
  margin-top:3px}
.section-head {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:20px;
  margin:36px 0 19px}
.section-head p {
  font-size:13px;
  margin-top:6px}
.list-cards {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px}
.list-card {
  border:1px solid var(--line);
  border-radius:10px;
  padding:22px;
  background:white;
  transition:transform .2s,box-shadow .2s;
  display:block}
.list-card:hover {
  transform:translateY(-3px);
  box-shadow:0 6px 20px #15344009}
.list-card-top {
  display:flex;
  justify-content:space-between;
  color:var(--teal);
  margin-bottom:18px}
.list-card-top>span {
  background:#ecf5f3;
  padding:10px;
  border-radius:8px}
.list-card:nth-child(2) .list-card-top>span {
  color:#a77c37;
  background:#faf3e8}
.list-card:nth-child(3) .list-card-top>span {
  color:#657caa;
  background:#eff2f9}
.list-card p {
  font-size:13px;
  margin-top:7px}
.mini-ranking {
  margin-top:19px;
  border-top:1px solid var(--line);
  padding-top:13px;
  display:flex;
  justify-content:space-between;
  font-size:12px;
  color:var(--muted)}
.mini-ranking b {
  color:var(--ink);
  font-weight:500}
.demo-note {
  font-size:12px;
  color:#7f898d;
  margin-top:23px;
  display:flex;
  align-items:center;
  gap:7px}
.demo-note .icon {
  width:14px;
  height:14px}
footer {
  max-width:1344px;
  margin:auto;
  padding:27px 0;
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  gap:24px;
  font-size:12px;
  color:var(--muted)}
footer button {
  font-size:12px;
  margin-left:auto}
.footer-brand {
  font:800 19px Manrope;
  color:var(--ink)}
footer>span:last-child {
  font-size:11px}
.breadcrumb {
  display:flex;
  gap:10px;
  font-size:12px;
  color:var(--muted);
  margin-bottom:24px}
.breadcrumb a:hover {
  color:var(--teal)}
.toolbar {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
  padding:19px 21px;
  border-bottom:1px solid var(--line)}
.toolbar .search {
  padding:10px 13px;
  box-shadow:none;
  width:280px}
.select-label {
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--muted);
  font-size:13px}
.select-label select,select.control {
  color:var(--ink);
  background:white;
  border:1px solid var(--line);
  padding:10px 30px 10px 12px;
  border-radius:6px;
  font-size:13px;
  max-width:100%}
.toolbar .count {
  margin-left:auto;
  font-size:12px;
  color:var(--muted)}
.table-scroll {
  overflow:auto}
table {
  width:100%;
  border-collapse:collapse;
  text-align:left;
  white-space:nowrap;
  font-size:14px}
th {
  background:#f7f9fa;
  color:var(--muted);
  font-weight:500;
  font-size:12px;
  padding:14px 21px}
td {
  padding:16px 21px;
  border-top:1px solid #edf1f1}
td:first-child a {
  display:flex;
  gap:12px;
  align-items:center;
  font-weight:600}
tbody tr:hover {
  background:#f5faf9}
td .flag {
  font-size:22px}
.num {
  font-variant-numeric:tabular-nums;
  text-align:right}
.muted {
  color:var(--muted)}
.pill {
  display:inline-flex;
  padding:5px 9px;
  background:#eaf4f0;
  border-radius:4px;
  font-size:11px;
  color:#377967}
.empty {
  padding:45px;
  text-align:center;
  color:var(--muted)}
.country-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  padding:22px}
.country-card {
  border:1px solid var(--line);
  border-radius:8px;
  padding:18px;
  transition:border-color .2s}
.country-card:hover {
  border-color:var(--teal)}
.country-card .flag {
  font-size:31px}
.country-card h3 {
  margin:15px 0 4px;
  font-size:15px}
.country-card p {
  font-size:12px}
.country-card .mini-ranking {
  font-size:11px}
.page-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:28px}
.page-heading p {
  margin-top:9px;
  font-size:14px}
.page-heading h1 .flag {
  font-size:37px;
  margin-right:12px}
.status-tag {
  font-size:12px;
  color:var(--teal);
  background:var(--light);
  padding:8px 12px;
  border-radius:5px}
.tabs {
  display:flex;
  gap:27px;
  border-bottom:1px solid var(--line);
  margin-bottom:24px;
  overflow:auto;
  white-space:nowrap}
.tabs button {
  padding:0 1px 15px;
  font-size:14px;
  color:var(--muted);
  border-bottom:2px solid transparent}
.tabs button.active {
  color:var(--teal);
  border-color:var(--teal)}
.detail-grid {
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:23px}
.detail-map .map-wrap {
  height:277px}
.geo-facts {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  padding:20px 15px}
.geo-facts>div {
  text-align:center;
  border-right:1px solid var(--line)}
.geo-facts>div:last-child {
  border:0}
.geo-facts span {
  font-size:11px;
  color:var(--muted);
  display:block;
  margin-bottom:6px}
.geo-facts strong {
  font-size:15px;
  font-weight:600}
.kpis {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px}
.kpi {
  border:1px solid var(--line);
  background:white;
  padding:20px;
  border-radius:10px}
.kpi label {
  font-size:12px;
  color:var(--muted);
  display:flex;
  align-items:center;
  justify-content:space-between}
.kpi label .icon {
  width:16px;
  height:16px;
  color:var(--teal)}
.kpi strong {
  display:block;
  font:650 29px Manrope;
  letter-spacing:-1px;
  margin:14px 0 8px}
.kpi small {
  font-size:11px;
  color:var(--teal)}
.detail-bottom {
  display:grid;
  grid-template-columns:1.15fr 1fr 1fr;
  gap:20px;
  margin-top:23px}
.card-body {
  padding:0 22px 22px}
.stacked {
  display:flex;
  height:31px;
  border-radius:5px;
  overflow:hidden;
  margin:21px 0 13px}
.stacked span {
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  color:white}
.legend {
  display:flex;
  gap:15px;
  font-size:11px;
  color:var(--muted);
  flex-wrap:wrap}
.legend i {
  width:7px;
  height:7px;
  display:inline-block;
  border-radius:2px;
  margin-right:5px}
.energy {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px;
  height:108px;
  margin:5px 0 14px}
.energy>div {
  padding:10px;
  border-radius:3px;
  font-size:11px;
  color:white;
  display:flex;
  justify-content:space-between;
  flex-direction:column}
.energy b {
  font-size:18px;
  font-weight:550}
.chart {
  width:100%;
  height:auto;
  display:block}
.chart text {
  fill:#7a8990;
  font:11px 'DM Sans'}
.chart line {
  stroke:#e7eeee;
  stroke-width:1}
.chart .chart-line {
  fill:none;
  stroke:#12888a;
  stroke-width:3;
  stroke-linejoin:round}
.chart .area {
  fill:#10888712}
.chart-footer {
  font-size:11px;
  color:var(--muted);
  margin-top:9px}
.weather-layout {
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:23px}
.weather-controls {
  padding:24px}
.weather-controls label {
  display:block;
  font-size:13px;
  margin:22px 0 8px}
.weather-controls select {
  width:100%}
.weather-controls .primary {
  width:100%;
  margin-top:24px}
.climate-summary {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-bottom:1px solid var(--line);
  padding:24px}
.climate-summary>div {
  border-right:1px solid var(--line);
  padding:0 21px}
.climate-summary>div:first-child {
  padding-left:0}
.climate-summary>div:last-child {
  border:0}
.climate-summary strong {
  font:650 29px Manrope;
  display:block;
  margin:8px 0 4px}
.climate-summary span {
  font-size:12px;
  color:var(--muted)}
.chart-panel {
  padding:26px}
.months {
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:5px;
  margin:20px 0}
.months button {
  padding:12px 0;
  border-radius:4px;
  background:#f0f4f4;
  font-size:11px}
.months button.good {
  background:#dfefea;
  color:#24786f}
.months button.chosen {
  outline:2px solid var(--teal)}
.compare-period {
  display:flex;
  gap:14px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:22px}
.compare-period input {
  border:1px solid var(--line);
  border-radius:5px;
  padding:10px;
  background:white;
  color:var(--ink);
  font-size:13px}
.ranking-banner {
  padding:26px;
  background:#eaf3f1;
  border-radius:10px;
  margin-bottom:23px;
  display:flex;
  align-items:center;
  justify-content:space-between}
.ranking-banner p {
  font-size:13px;
  margin-top:7px}
.rank-bar {
  width:150px;
  height:5px;
  background:#ebf1f0;
  border-radius:4px;
  overflow:hidden}
.rank-bar span {
  display:block;
  background:#43a298;
  height:100%}
.mobile-list {
  max-height:350px;
  overflow:auto;
  background:#fafdfe;
  padding:5px 20px}
.mobile-list a {
  display:flex;
  justify-content:space-between;
  padding:12px;
  border-bottom:1px solid var(--line);
  font-size:13px}
.skip {
  position:fixed;
  top:-80px;
  left:10px;
  z-index:10;
  background:white;
  padding:15px}
.skip:focus {
  top:10px}
.loading {
  padding:60px;
  text-align:center}
dialog {
  border:1px solid var(--line);
  border-radius:14px;
  max-width:610px;
  width:calc(100% - 36px);
  padding:36px;
  box-shadow:0 20px 100px #0f303330}
dialog::backdrop {
  background:#102d3960;
  backdrop-filter:blur(3px)}
dialog p {
  font-size:14px;
  margin:17px 0}
dialog a {
  font-size:13px;
  color:var(--teal)}
.close {
  float:right;
  font-size:26px;
  padding:0 0 10px 20px}
.no-data {
  padding:40px 24px}
.no-data p {
  font-size:14px;
  margin-top:12px}
.period-note {
  padding:12px 20px;
  background:#fff8eb;
  color:#927241;
  font-size:12px;
  border-radius:7px;
  margin-bottom:20px}
@media(min-width:1500px) {
  main {
  padding-top:54px}
.map-wrap {
  height:384px}
.spotlight-image {
  height:200px}
}
@media(max-width:1100px) {
  .header-inner {
  padding:20px 28px;
  gap:25px}
.header-inner nav {
  gap:19px}
.header-inner nav a {
  font-size:12px}
main {
  padding:35px 28px 50px}
.home-grid {
  grid-template-columns:minmax(0,1fr) 270px}
.intro h1 {
  font-size:35px}
.search {
  width:290px}
.stat {
  padding:0 16px;
  gap:10px}
.stat-icon {
  width:34px;
  height:34px}
.stat strong {
  font-size:18px}
footer {
  margin:0 28px}
.detail-bottom {
  grid-template-columns:1fr 1fr}
.detail-bottom>.panel:last-child {
  grid-column:1/-1}
.country-grid {
  grid-template-columns:repeat(3,1fr)}
}
@media(max-width:800px) {
  .header-inner {
  flex-wrap:wrap;
  gap:18px;
  padding:17px 22px}
.brand {
  font-size:25px}
.brand-icon {
  font-size:38px}
.header-inner nav {
  order:3;
  width:100%;
  gap:26px;
  overflow:auto;
  white-space:nowrap;
  margin:0}
.header-inner nav a {
  font-size:13px;
  padding:6px 0}
.header-inner nav a.active:after {
  bottom:-9px}
.language {
  margin-left:auto}
main {
  padding:30px 20px}
.intro {
  display:block}
.intro .search {
  width:100%;
  margin-top:23px}
.intro h1 {
  font-size:34px}
.home-grid {
  grid-template-columns:1fr}
.spotlight {
  display:grid;
  grid-template-columns:1fr 1fr}
.spotlight-image {
  height:100%;
  min-height:270px}
.spotlight-content {
  padding:20px}
.stats-band {
  grid-template-columns:1fr 1fr;
  row-gap:25px}
.stat:nth-child(2) {
  border:0}
.list-cards {
  grid-template-columns:1fr}
.list-card {
  padding:20px}
.list-card-top {
  float:left;
  margin:0 18px 0 0}
.list-card-top>.icon {
  display:none}
.mini-ranking {
  clear:both}
.section-head {
  align-items:center}
.section-head h2 {
  font-size:21px}
.section-head>.text-link {
  font-size:12px}
.map-wrap {
  height:330px}
.map-bottom {
  gap:10px;
  padding:16px}
.map-bottom>span {
  font-size:11px}
.page-heading {
  align-items:start}
.page-heading h1 {
  font-size:32px}
.detail-grid,.weather-layout {
  grid-template-columns:1fr}
.detail-bottom {
  grid-template-columns:1fr}
.detail-bottom>.panel:last-child {
  grid-column:auto}
.country-grid {
  grid-template-columns:1fr 1fr}
.toolbar {
  padding:15px;
  gap:10px}
.toolbar .search {
  width:100%}
.toolbar .count {
  margin:0}
.tabs {
  gap:24px}
.climate-summary {
  padding:18px}
.climate-summary>div {
  padding:0 15px}
.climate-summary strong {
  font-size:25px}
.chart-panel {
  padding:20px}
.months {
  gap:3px}
.months button {
  font-size:10px}
.ranking-banner {
  display:block}
.ranking-banner select {
  margin-top:18px}
footer {
  flex-wrap:wrap;
  margin:0 20px;
  gap:15px}
footer>span:nth-child(2) {
  width:100%;
  order:3}
footer button {
  margin-left:auto}
footer>span:last-child {
  display:none}
}
@media(prefers-reduced-motion:reduce) {
  * {
  transition:none!important;
  scroll-behavior:auto!important}
}

/* Shared SVG icon system: Tabler outline, 4:3 flags, static Meteocons. */
.icon {
  stroke-width:1.8;
  overflow:visible}
.header-inner nav a {
  display:inline-flex;
  align-items:center;
  gap:7px}
.header-inner nav .icon {
  width:17px;
  height:17px}
.header-inner nav {
  gap:23px}
.header-inner {
  gap:30px}
.language {
  display:inline-flex;
  align-items:center;
  gap:7px;
  white-space:nowrap}
.language>.icon {
  width:16px;
  height:16px}
.language span {
  padding:0}
.language span .icon {
  width:12px;
  height:12px}
.panel-head h2,.section-head h2,.weather-controls h2 {
  display:flex;
  align-items:center;
  gap:9px}
.panel-head h2>.icon,.section-head h2>.icon {
  color:var(--teal);
  width:20px;
  height:20px}
.flag {
  display:inline-flex;
  align-items:center;
  flex-shrink:0;
  vertical-align:middle;
  line-height:1}
.flag-svg {
  width:32px;
  height:24px;
  object-fit:contain;
  display:inline-block;
  vertical-align:middle;
  border-radius:3px;
  box-shadow:0 0 0 1px #142f3c0c;
  flex-shrink:0}
.page-heading h1 .flag-svg {
  width:48px;
  height:36px}
.country-card .flag-svg {
  width:40px;
  height:30px}
.country-name .flag-svg {
  width:36px;
  height:27px}
.fact-label {
  display:inline-flex;
  align-items:center;
  gap:8px}
.fact-label>.icon {
  width:16px;
  height:16px;
  color:#829b9e}
.fact-label>span {
  color:inherit}
.fact-label small {
  font-size:10px}
.geo-facts .fact-label {
  justify-content:center}
.geo-facts .fact-label>span {
  margin:0}
.tabs button {
  display:inline-flex;
  align-items:center;
  gap:7px}
.tabs .icon {
  width:17px;
  height:17px}
th>.icon {
  width:15px;
  height:15px;
  margin-right:5px;
  color:#789496}
footer button {
  display:inline-flex;
  align-items:center;
  gap:6px}
footer .icon {
  width:15px;
  height:15px}
.close .icon {
  width:23px;
  height:23px}
.map-controls button {
  display:flex;
  align-items:center;
  justify-content:center}
.map-controls .icon {
  width:17px;
  height:17px}
.photo-loc {
  display:flex;
  align-items:center;
  gap:5px}
.photo-loc .icon {
  width:13px;
  height:13px}
.energy {
  height:138px}
.energy>div {
  display:grid;
  grid-template-columns:18px 1fr;
  align-content:space-between;
  align-items:center;
  gap:4px}
.energy .icon {
  width:15px;
  height:15px}
.energy b {
  grid-column:1/-1}
.weather-icon {
  width:56px;
  height:56px;
  display:block;
  object-fit:contain;
  margin-bottom:8px}
.period-icon {
  height:56px;
  width:56px;
  margin-bottom:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--teal);
  background:#eff7f5;
  border-radius:12px}
.period-icon .icon {
  width:30px;
  height:30px}
.weather-controls label .icon {
  width:17px;
  height:17px;
  margin-right:6px;
  color:var(--teal)}
.climate-summary strong {
  margin-top:8px}
.mobile-list a>span:first-child {
  display:inline-flex;
  align-items:center;
  gap:8px}
.mobile-list .flag-svg {
  width:24px;
  height:18px}
@media(max-width:1100px) {
  .header-inner {
  gap:18px}
.header-inner nav {
  gap:14px}
.language {
  padding-left:14px}
.header-inner nav .icon {
  width:15px;
  height:15px}
.fact-row {
  font-size:12px}
}
@media(max-width:800px) {
  .header-inner nav {
  gap:23px}
.language {
  padding-left:15px}
.panel-head h2 {
  font-size:16px}
.tabs {
  gap:20px}
.weather-icon,.period-icon {
  width:44px;
  height:44px}
.period-icon .icon {
  width:26px;
  height:26px}
.fact-row {
  font-size:13px}
.climate-summary span {
  font-size:11px}
}
@media(max-width:420px) {
  .spotlight {
  grid-template-columns:1fr}
.spotlight-image {
  height:190px;
  min-height:0}
.geo-facts {
  padding:18px 7px}
.geo-facts strong {
  font-size:13px}
.geo-facts .fact-label {
  gap:4px}
.geo-facts .fact-label .icon {
  width:13px;
  height:13px}
.climate-summary>div {
  padding:0 10px}
.climate-summary strong {
  font-size:23px}
}

/* Mobile navigation and content accessibility */
.menu-toggle {
  display:none}
main>*,.home-grid>*,.detail-grid>*,.weather-layout>* {
  min-width:0}
h1 {
  overflow-wrap:anywhere}
.fact-row strong {
  text-align:right;
  overflow-wrap:anywhere}
.table-scroll:focus-visible {
  outline:2px solid var(--teal);
  outline-offset:-2px}
.no-js .menu-toggle {
  display:none}
.no-js #main-nav {
  display:flex}
.no-js .map-controls,.no-js .segmented,.no-js .tabs,.no-js .toolbar .search,.no-js .weather-controls select {
  display:none}
.search:focus-within {
  border-color:var(--teal);
  box-shadow:0 0 0 3px #087e8520}
.primary {
  min-height:44px}
.table-scroll a {
  min-height:32px}
.tabs button {
  min-height:44px}

@media(max-width:900px) {
  header {
  position:relative;
  z-index:10}
.header-inner {
  padding:16px 20px;
  gap:12px;
  flex-wrap:wrap}
.header-inner nav {
  display:none;
  order:4;
  width:100%;
  flex-direction:column;
  align-items:stretch;
  gap:0;
  white-space:normal;
  border-top:1px solid var(--line);
  margin:4px 0 0;
  padding-top:8px}
.header-inner nav.is-open {
  display:flex}
.header-inner nav a {
  padding:14px 12px;
  font-size:16px;
  border-radius:6px;
  min-height:48px}
.header-inner nav a.active {
  background:var(--light)}
.header-inner nav a.active:after {
  display:none}
.header-inner nav .icon {
  width:20px;
  height:20px}
.language {
  margin-left:auto;
  order:1}
.menu-toggle {
  display:inline-flex;
  align-items:center;
  gap:7px;
  order:2;
  padding:10px;
  border:1px solid var(--line);
  border-radius:7px;
  min-width:44px;
  min-height:44px;
  font-size:14px}
.menu-toggle[aria-expanded=true] {
  background:var(--light);
  color:var(--teal)}
.intro {
  display:block}
.intro .search {
  width:100%;
  margin-top:20px}
.home-grid {
  grid-template-columns:1fr}
.spotlight {
  display:grid;
  grid-template-columns:1fr 1fr}
.spotlight-image {
  height:100%;
  min-height:260px}
.header-inner .brand {
  font-size:24px}
.brand small {
  font-size:8px;
  letter-spacing:1.5px}
}

@media(max-width:600px) {
  main {
  padding:25px 16px 40px}
.language {
  display:none}
.menu-toggle {
  margin-left:auto}
.header-inner {
  padding:12px 16px}
.intro h1,h1 {
  font-size:31px;
  letter-spacing:-1px}
.intro p,.page-heading p {
  font-size:16px}
.page-heading {
  flex-wrap:wrap;
  gap:14px}
.page-heading h1 {
  font-size:30px}
.page-heading h1 .flag-svg {
  width:36px;
  height:27px}
.continents {
  padding:0 12px 12px;
  gap:6px}
.continents button {
  min-height:40px;
  padding:8px 11px;
  font-size:13px}
.panel-head {
  padding:17px 15px;
  flex-wrap:wrap}
.map-wrap {
  height:240px}
.map-controls button {
  width:44px;
  height:44px}
.map-caption {
  max-width:calc(100% - 85px);
  font-size:12px;
  left:12px;
  bottom:12px}
.map-bottom {
  flex-wrap:wrap;
  font-size:13px}
.map-bottom>span {
  font-size:12px}
.map-bottom a {
  min-height:35px}
.spotlight {
  display:block}
.spotlight-image {
  height:200px;
  min-height:0}
.spotlight-content>p,.fact-row {
  font-size:14px}
.stats-band {
  padding:20px 0;
  gap:20px 0}
.stat {
  padding:0 12px;
  gap:9px;
  align-items:flex-start}
.stat strong {
  font-size:17px}
.stat p {
  font-size:12px}
.stat-icon {
  width:28px;
  height:28px;
  flex-shrink:0}
.section-head {
  flex-wrap:wrap}
.section-head p,.list-card p {
  font-size:14px}
.country-grid {
  padding:12px;
  gap:10px}
.country-card {
  padding:13px}
.country-card h3 {
  font-size:15px;
  overflow-wrap:anywhere}
.country-card p {
  font-size:12px}
.country-card .mini-ranking {
  display:block}
.country-card .mini-ranking span {
  display:block;
  margin-top:6px}
.toolbar .search {
  width:100%}
.toolbar .select-label {
  flex:1;
  min-width:135px}
.toolbar select {
  width:100%}
.search input,.select-label select,select.control,.compare-period input {
  font-size:16px;
  min-height:40px}
.toolbar .segmented button {
  min-width:44px;
  min-height:40px}
.tabs {
  gap:16px}
.tabs button {
  font-size:14px;
  padding-top:4px}
.kpi {
  padding:15px}
.kpi label {
  font-size:13px}
.kpi strong {
  font-size:25px}
.kpi small {
  font-size:12px}
.geo-facts {
  grid-template-columns:1fr;
  gap:12px;
  padding:17px}
.geo-facts>div {
  border:0;
  border-bottom:1px solid var(--line);
  padding-bottom:10px;
  text-align:left;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px}
.geo-facts span {
  margin:0}
.geo-facts strong {
  font-size:14px}
.months {
  grid-template-columns:repeat(6,1fr);
  gap:7px}
.months button {
  font-size:13px;
  min-height:44px}
.weather-controls {
  padding:20px}
.climate-summary {
  padding:16px 12px}
.climate-summary>div {
  padding:0 9px}
.climate-summary strong {
  font-size:23px}
.climate-summary span {
  font-size:12px}
.chart-panel {
  padding:18px 12px}
.chart-footer {
  font-size:12px}
.legend {
  font-size:12px}
th,td {
  padding:13px 14px}
.demo-note {
  align-items:flex-start;
  line-height:1.5}
.demo-note .icon {
  margin-top:2px}
footer {
  margin:0 16px}
footer button {
  min-height:44px}
.breadcrumb {
  flex-wrap:wrap;
  font-size:13px}
dialog {
  padding:23px}
.close {
  min-width:44px;
  min-height:44px}
}

/* Colour edition: topic colours remain consistent across views. */
:root {
  --teal:#087e85;
  --light:#e1f4f0;
  --paper:#f5f8fb;
  --geo:#087e85;
  --population:#416bbb;
  --climate:#a56b16;
  --energy:#33845b}

header {
  border-bottom:3px solid #cfeae5}
.brand-icon {
  background:#def3ed;
  border-radius:12px;
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center}
.brand-dot {
  color:#e6a746}
.intro .eyebrow {
  color:#558a80}
.intro h1 em {
  color:#087e85}
.intro {
  padding-bottom:6px}
.panel {
  box-shadow:0 3px 13px #193c5004}
.home-grid>.panel:first-child>.panel-head {
  background:#eaf5f2;
  border-bottom:1px solid #d7eae5;
  margin-bottom:17px}
.home-grid>.panel:first-child>.panel-head h2>.icon {
  background:#d2ece4;
  box-sizing:content-box;
  padding:7px;
  border-radius:9px}
.home-grid>.panel:first-child>.panel-head .segmented {
  background:#dcebe6}
.map-wrap {
  background:#e9f3f8}
.map-grid line {
  stroke:#d5e6ee}
.map-svg path {
  fill:#bfded5;
  stroke:#fff;
  stroke-width:.8}
.map-svg path[data-region="Europa"] {
  fill:#7cbeb3}
.map-svg path[data-region="Afrika"] {
  fill:#e6c987}
.map-svg path[data-region="Azië"] {
  fill:#c3b8d8}
.map-svg path[data-region="Amerika"] {
  fill:#9fbfd9}
.map-svg path[data-region="Oceanië"] {
  fill:#e5b49e}
.map-svg path.faded {
  fill:#dce7ea}
.map-svg path.selected,.map-svg path:hover,.map-svg path:focus {
  fill:#138c88;
  stroke:#fff}
.map-label {
  fill:#466c80}
.map-caption {
  border:1px solid #dbe9ed;
  color:#496b7b}
.map-bottom {
  background:#fbfdfd}
.spotlight {
  border-color:#e9dcca}
.spotlight-image {
  height:211px}
.photo-tag {
  background:#fff5df;
  color:#725123}
.spotlight-content {
  background:#fffdf8}
.spotlight-content .primary {
  background:#107f7c}
.spotlight-content .country-name h2 {
  color:#23515a}
.stats-band {
  border-color:#e0e7ee}
.stat:nth-child(1) .stat-icon {
  background:#def1eb;
  color:#167f73}
.stat:nth-child(2) .stat-icon {
  background:#e6edf9;
  color:#4a70b0}
.stat:nth-child(3) .stat-icon {
  background:#ede8f6;
  color:#8461ac}
.stat:nth-child(4) .stat-icon {
  background:#fff0d8;
  color:#a77622}
.list-card {
  border-top:1px solid var(--line);
  background:#fff}
.list-card:nth-child(2) {
  border-top-color:var(--line);
  background:#fff}
.list-card:nth-child(3) {
  border-top-color:var(--line);
  background:#fff}
.list-card:nth-child(2) .list-card-top>span {
  background:#dfeafa;
  color:#416bbb}
.list-card:nth-child(3) .list-card-top>span {
  background:#ece0f6;
  color:#8456a4}
.list-card:hover {
  box-shadow:0 7px 22px #15344010}
.country-card:hover {
  background:#f2faf7}
.kpi {
  position:relative;
  border-top:1px solid var(--line);
  background:#fff}
.kpi:nth-child(2) {
  border-top-color:var(--line);
  background:#fff}
.kpi:nth-child(3) {
  border-top-color:var(--line);
  background:#fff}
.kpi:nth-child(4) {
  border-top-color:var(--line);
  background:#fff}
.kpi label .icon {
  width:20px;
  height:20px;
  padding:7px;
  box-sizing:content-box;
  border-radius:9px;
  background:#e1ebfa;
  color:#416bbb}
.kpi:nth-child(2) label .icon {
  background:#eee2f6;
  color:#875aa5}
.kpi:nth-child(3) label .icon {
  background:#faebc9;
  color:#9c711f}
.kpi:nth-child(4) label .icon {
  background:#daf0e1;
  color:#33845b}
.detail-map>.panel-head {
  background:#eaf5f2}
.detail-bottom>.panel:nth-child(1)>.panel-head {
  background:#eef3fc;
  margin-bottom:19px}
.detail-bottom>.panel:nth-child(1)>.panel-head h2>.icon {
  color:#416bbb}
.detail-bottom>.panel:nth-child(2)>.panel-head {
  background:#ecf7f0;
  margin-bottom:19px}
.detail-bottom>.panel:nth-child(2)>.panel-head h2>.icon {
  color:#33845b}
.detail-bottom>.panel:nth-child(3)>.panel-head {
  background:#fff6e5;
  margin-bottom:19px}
.detail-bottom>.panel:nth-child(3)>.panel-head h2>.icon {
  color:#a56b16}
.fact-label>.icon[data-icon="capital"],th>.icon[data-icon="capital"] {
  color:#a77d39}
.fact-label>.icon[data-icon="people"],.fact-label>.icon[data-icon="health"],th>.icon[data-icon="flag"] {
  color:#577ebe}
.fact-label>.icon[data-icon="globe"],.fact-label>.icon[data-icon="area"] {
  color:#309186}
.fact-label>.icon[data-icon="currency"],.fact-label>.icon[data-icon="language"] {
  color:#9471b2}
.tabs button:nth-child(2) .icon {
  color:#29968d}
.tabs button:nth-child(3) .icon {
  color:#577ebe}
.tabs button:nth-child(4) .icon {
  color:#9471b2}
.tabs button:nth-child(5) .icon {
  color:#b38326}
.weather-controls {
  background:#fff;
  border-top:1px solid var(--line)}
.weather-controls .eyebrow {
  color:#986c25}
.weather-controls h2>.icon,.weather-controls label>.icon {
  color:#ac7d2b}
.weather-layout>.panel:last-child>.panel-head {
  background:#fff8eb}
.climate-summary>div:first-child {
  background:#fffaf0;
  border-radius:9px 0 0 9px;
  padding-left:12px}
.climate-summary>div:nth-child(2) {
  background:#eff7fc}
.climate-summary>div:last-child {
  background:#f1f8f4;
  border-radius:0 9px 9px 0}
.climate-summary>div {
  padding-top:12px;
  padding-bottom:12px}
.climate-summary>div:first-child strong {
  color:#95691e}
.climate-summary>div:nth-child(2) strong {
  color:#327497}
.climate-summary>div:last-child strong {
  color:#348266}
.period-icon {
  background:#dfefe4;
  color:#348266}
.months button.good {
  background:#e1f1e7;
  color:#28794f}
.ranking-banner {
  background:#eaf3f1;
  border:1px solid #d5e7df}
.pill {
  background:#e3f3eb;
  color:#33765d}
.header-inner nav [data-nav="klimaat"] .icon {
  color:#b38326}
.header-inner nav [data-nav="lijsten"] .icon {
  color:#7c65a5}
.header-inner nav [data-nav="landen"] .icon {
  color:#3a87aa}

@media(min-width:1500px) {
  .spotlight-image {
  height:232px}
}
@media(max-width:900px) {
  .spotlight-image {
  height:100%}
.brand-icon {
  width:42px;
  height:42px;
  font-size:38px}
}
@media(max-width:600px) {
  .spotlight-image {
  height:210px}
.home-grid>.panel:first-child>.panel-head h2>.icon {
  padding:5px}
.kpi label .icon {
  width:17px;
  height:17px;
  padding:5px}
.climate-summary>div:first-child {
  padding-left:8px}
.climate-summary>div {
  padding-right:8px;
  padding-left:8px}
.brand-icon {
  width:38px;
  height:38px}
.intro {
  padding-bottom:0}
}

/* Fixed-width figures for comparing numerical values at a glance. */
:root {
  --font-numbers:"Cascadia Mono","SFMono-Regular",Consolas,"Liberation Mono",monospace}

td.num,.kpi strong,.climate-summary strong {
  font-family:var(--font-numbers);
  font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:"lnum" 1,"tnum" 1;
  letter-spacing:0}

td.num {
  text-align:right;
  white-space:nowrap}

.kpi strong,.climate-summary strong {
  font-weight:600}

.climate-summary strong small {
  font-family:'DM Sans',sans-serif;
  font-weight:500}

.chart text {
  font-variant-numeric:tabular-nums}


.tabs a  {
   display:inline-flex;
  align-items:center;
  gap:7px;
  padding:0 1px 15px;
  min-height:44px;
  font-size:14px;
  color:var(--muted);
   }

.tabs a.active  {
  color:var(--teal);
  border-bottom:2px solid var(--teal);
  }

section[id],div[id] {
  scroll-margin-top:20px;
  }

/* Indicator explanations (publisher v1.6, backlog FDC8F5B5): a disclosure in the row
   header instead of a title attribute. It opens in the flow, not as a floating popover,
   because .panel clips overflow. */
.metrics th[scope=row] {
  white-space:normal;
  vertical-align:top}
.ind {
  display:inline-flex;
  align-items:center;
  gap:4px}
.info {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  margin:-6px 0;
  border-radius:50%;
  flex-shrink:0}
.info .icon {
  width:16px;
  height:16px;
  opacity:.55}
.info:hover .icon,.info[aria-expanded=true] .icon {
  opacity:1}
.info[aria-expanded=true] {
  background:var(--light)}
.ind-note {
  margin:6px 0 2px;
  max-width:44ch;
  font-size:13px;
  line-height:1.5;
  color:#4f6168;
  font-weight:400}
/* html.js is set inline in head.html, so the collapse holds from the first paint.
   Only notes with an id have a button; one without stays open. */
.js .ind-note[id]:not(.is-open) {
  display:none}

/* Energy tiles carry their label again (v1.6); the tile height follows the content.
   Text colour is set per tile inline, chosen for 4.5:1. */
.energy {
  height:auto}
.energy>div {
  min-height:62px}
.energy>div>span {
  font-size:12px;
  line-height:1.2}

/* Overview and static pages (publisher v1.7, backlogs CF6D1D00 / C67929AA).
   The overviews reuse .country-grid/.country-card and .list-cards/.list-card from the
   design export; a card is a link here, so it needs a block box. .stack spaces the
   panels of an overview; .prose sets running text on the static pages in ink, since
   the muted paragraph colour is meant for captions, not for a privacy statement. */
.stack {
  display:grid;
  gap:23px;
  margin-bottom:23px}
a.country-card {
  display:block}
.country-card h3 {
  overflow-wrap:anywhere}
.list-card h3 {
  font-size:15px}
.list-cards {
  padding-top:4px}
.prose {
  max-width:72ch;
  padding-top:22px}
.prose h2 {
  margin:28px 0 10px;
  font-size:20px}
.prose h3 {
  margin:22px 0 8px}
.prose p,.prose li {
  color:var(--ink);
  line-height:1.7;
  font-size:15px}
.prose p {
  margin:0 0 14px}
.prose ul,.prose ol {
  padding-left:22px;
  margin:0 0 14px}
.prose a {
  color:var(--teal);
  text-decoration:underline}
.footer-links a:hover {
  color:var(--teal)}


/* =====================================================================
   Layout round 2026-10-05 (venture step 1, backlog 35C7FEE6)
   ---------------------------------------------------------------------
   Back to the calm of the design reference: the two typefaces actually
   load (self-hosted, OFL - until now every page fell back to Arial and a
   monospace), figures are set in Manrope instead of a fixed-width face,
   and the colour accents on headers, panel heads and KPI icons are
   toned down to line and teal. Applies to every page type.
   ===================================================================== */
@font-face {
  font-family:'DM Sans';
  font-style:normal;
  font-display:swap;
  font-weight:100 1000;
  src:url(/assets/fonts/dm-sans-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face {
  font-family:'DM Sans';
  font-style:normal;
  font-display:swap;
  font-weight:100 1000;
  src:url(/assets/fonts/dm-sans-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face {
  font-family:Manrope;
  font-style:normal;
  font-display:swap;
  font-weight:200 800;
  src:url(/assets/fonts/manrope-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face {
  font-family:Manrope;
  font-style:normal;
  font-display:swap;
  font-weight:200 800;
  src:url(/assets/fonts/manrope-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

body {
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility}
.brand,.footer-brand {
  font-family:Manrope,sans-serif}

/* figures: proportional typeface, aligned digits */
:root {
  --font-numbers:Manrope,'DM Sans',sans-serif}
td.num {
  font-family:'DM Sans',sans-serif;
  font-weight:500}
.kpi strong,.climate-summary strong {
  font-weight:650;
  letter-spacing:-.8px}

/* header and panel heads: line and white instead of mint */
header {
  border-bottom:1px solid var(--line)}
.detail-map>.panel-head,
.detail-bottom>.panel>.panel-head {
  background:#fff}

/* KPI tiles: quiet icon, last tile of an odd set spans the row */
.kpi {
  padding:22px}
.kpi label {
  font-size:13px}
.kpi label .icon,
.kpi:nth-child(n) label .icon {
  width:18px;
  height:18px;
  padding:0;
  border-radius:0;
  background:none;
  opacity:.75}
.kpi small {
  font-size:12px}
.kpis>.kpi:last-child:nth-child(odd) {
  grid-column:1/-1}

/* geography panel: label and icon on one line, rows inside the panel padding */
.geo-facts {
  border-top:1px solid var(--line)}
.geo-facts .fact-label {
  display:flex;
  margin-bottom:6px}
.geo-facts .fact-label>.icon {
  width:14px;
  height:14px}
.detail-map>.fact-row {
  padding:13px 23px;
  border-bottom:0;
  border-top:1px solid #edf1f1;
  align-items:center}
.detail-map>.fact-row strong a {
  color:var(--teal)}
.detail-map>.fact-row strong a:hover {
  text-decoration:underline}

/* sources: own space below the content, a quiet list instead of browser bullets */
#bronnen {
  margin-top:23px}
.sources {
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:6px 22px;
  font-size:13px;
  line-height:1.5;
  color:var(--muted)}
.sources li {
  position:relative;
  padding-left:13px}
.sources li::before {
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#b9cfcc}
.kpi strong {
  white-space:nowrap}
@media(max-width:600px) {
  .kpis {
    grid-template-columns:1fr}
}

/* Country tables on list and continent pages (publisher v1.9, layout round 05-10).
   The country cell is a row header on white, in ink; the rank column is narrow; the
   country link is stretched over the row, so the whole row is the click target and
   still one link for keyboard and screen reader. */
.list-table {
  font-size:15px}
.list-table thead th {
  background:#fff;
  border-bottom:1px solid var(--line);
  font-size:12px;
  letter-spacing:.3px}
.list-table tbody th {
  background:none;
  color:var(--ink);
  font-size:15px;
  font-weight:550;
  white-space:nowrap;
  vertical-align:middle;
  border-top:1px solid #edf1f1;
  width:100%}
.list-table tbody tr:first-child th,
.list-table tbody tr:first-child td {
  border-top:0}
.list-table th.rank,
.list-table td.rank {
  width:1%;
  padding-right:6px;
  text-align:right;
  color:var(--muted);
  font-variant-numeric:tabular-nums}
.list-table th.num,
.list-table td.num {
  text-align:right;
  white-space:nowrap;
  width:1%;
  padding-left:28px}
.list-table td.num {
  color:var(--ink)}
.list-table .flag-svg {
  width:28px;
  height:21px;
  margin-right:12px;
  border-radius:3px;
  box-shadow:0 0 0 1px #142f3c1f}
.list-table tbody tr {
  position:relative;
  transition:background .12s}
.list-table tbody tr:hover {
  background:#f2faf7}
.list-table .row-link::after {
  content:"";
  position:absolute;
  inset:0}
.list-table tbody tr:hover .row-link {
  color:var(--teal)}
.list-table .row-link:focus-visible {
  outline:0}
.list-table tbody tr:focus-within {
  outline:3px solid #dc9c42;
  outline-offset:-3px}
@media(max-width:600px) {
  .list-table,.list-table tbody th {
    font-size:14px}
  .list-table tbody th {
    white-space:normal}
  .list-table th,.list-table td,
  .list-table th.num,.list-table td.num {
    padding-left:8px;
    padding-right:8px}
  .list-table .flag-svg {
    width:22px;
    height:16px;
    margin-right:8px}
}

/* A panel that follows the KPI strip directly (continent page) keeps the grid gap. */
.kpis+.panel {
  margin-top:23px}

/* Flag overview /vlaggen/ (publisher v1.10): one card per country, flag over name. */
.flag-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(132px,1fr));
  gap:14px;
  padding:22px}
.flag-card {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:11px;
  padding:16px 10px 14px;
  border:1px solid var(--line);
  border-radius:8px;
  text-align:center;
  font-size:13px;
  font-weight:550;
  line-height:1.3;
  transition:border-color .2s,background .12s}
.flag-card:hover {
  border-color:var(--teal);
  background:#f2faf7;
  color:var(--teal)}
.flag-card img {
  width:96px;
  height:72px;
  object-fit:contain;
  border-radius:4px;
  box-shadow:0 0 0 1px #142f3c1f}
.flag-card span {
  overflow-wrap:anywhere}
@media(max-width:600px) {
  .flag-grid {
    grid-template-columns:repeat(auto-fill,minmax(104px,1fr));
    gap:10px;
    padding:14px}
  .flag-card img {
    width:72px;
    height:54px}
}