/* Wikimedia brand tokens, from unfairly.ai/brand-guidelines/wikimedia (checked 2026-10-31).
   Sizes, spacing and components were measured on https://wikimediafoundation.org/ (Playwright computed styles at 1440 and 390 on 2026-10-31, plus the theme CSS and the brand pages on Meta-Wiki).
   Fonts: --font-* use the open stand-ins (load them from Google Fonts); --font-*-original name Wikimedia's own faces, which you may only use if you have a licence. */
:root {
  --color-paper: #FFFFFF;
  --color-surface: #F9F7FF;
  --color-ink: #000000;
  --color-ink-muted: #202122;
  --color-accent: #0C57A8;
  --color-on-accent: #FFFFFF;
  --color-accent-secondary: #246342;
  --color-night: #404040;
  --color-on-night: #FFFFFF;
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-black-75: #404040;
  --color-black-50: #7F7F7F;
  --color-black-25: #BFBFBF;
  --color-green: #339966;
  --color-blue: #0063BF;
  --color-red: #990000;
  --color-green-aaa: #246342;
  --color-blue-aaa: #0C57A8;
  --color-red-aaa-creative-red: #970302;
  --color-pink: #E679A6;
  --color-orange: #EE8019;
  --color-yellow: #F0BC00;
  --color-purple: #5748B5;
  --color-dark-green: #305D70;
  --color-creative-blue: #0E65C0;
  --color-bright-blue: #049DFF;
  --color-bright-yellow: #E9E7C4;
  --color-creative-green: #308557;
  --color-bright-green: #71D1B3;
  --color-light-red: #E5C0C0;
  --color-light-pink: #F9DDE9;
  --color-light-orange: #FBDFC5;
  --color-light-yellow: #FBEEBF;
  --color-light-purple: #D5D1EC;
  --color-light-dark-green: #CBD6DB;
  --color-light-blue: #C3D8EF;
  --color-light-bright-blue: #C0E6FF;
  --color-light-bright-yellow: #F9F9F0;
  --color-light-green: #CBE0D5;
  --color-light-bright-green: #DBF3EC;
  --color-lightest-purple: #F9F7FF;
  --color-text-grey: #202122;
  --color-border-light: #E5E5E5;
  --color-black-05: #F2F2F2;
  --color-credit-thumb-border: #EAECF0;
  --color-map-orange: #FF7800;
  --color-map-land: #DCDBDC;
  --color-footer-rule: #808080;
  --color-footer-divider: #666666;
  --color-map-control-border: #DDDDDD;
  --color-carousel-nav-ring: #AAAAAA;
  --color-button-donate-fill: #246342;
  --color-button-donate-text: #FFFFFF;
  --color-button-outline-on-blue-text: #FFFFFF;
  --color-button-outline-on-blue-ring: #FFFFFF;
  --color-button-black-fill: #000000;
  --color-button-black-text: #FFFFFF;
  --color-link-arrow-text: #0C57A8;
  --color-language-button-fill: #FFFFFF;
  --color-carousel-button-white-fill: #FFFFFF;
  --color-email-input-fill: #FFFFFF;
  --color-highlight-chip-fill: #F9DDE9 (rotates through #E9E7C4, #D5D1EC, #C0E6FF);
  --color-button-primary-fill: #246342;
  --color-button-primary-text: #FFFFFF;
  --color-button-secondary-fill: #000000;
  --color-button-secondary-text: #FFFFFF;
  --font-display: Montserrat, Montserrat, Inter, sans-serif;
  --font-body: Inter, Inter, sans-serif;
  --page-margin: 120px;
  --section-padding: 80px;
  --container-max: 1200px;
  --hero-text-max: 580px;
  --card-gap: 16px;
  --nav-height: 76px;
  --grid-gutter: 40px;
  --grid-columns: 3;
  --text-display-xl-size: 48px;
  --text-display-xl-line: 1.333;
  --text-display-xl-weight: 700;
  --text-display-stat-size: 48px;
  --text-display-stat-line: 1.333;
  --text-display-stat-weight: 600;
  --text-display-l-size: 32px;
  --text-display-l-line: 1.25;
  --text-display-l-weight: 700;
  --text-display-m-size: 24px;
  --text-display-m-line: 1.4;
  --text-display-m-weight: 600;
  --text-lead-size: 24px;
  --text-lead-line: 1.333;
  --text-lead-weight: 400;
  --text-display-s-size: 24px;
  --text-display-s-line: 1.333;
  --text-display-s-weight: 600;
  --text-appeal-size: 20px;
  --text-appeal-line: 1.4;
  --text-appeal-weight: 700;
  --text-body-l-size: 20px;
  --text-body-l-line: 1.4;
  --text-body-l-weight: 400;
  --text-button-size: 20px;
  --text-button-line: 1.25;
  --text-button-weight: 700;
  --text-nav-size: 16px;
  --text-nav-line: 1.5;
  --text-nav-weight: 600;
  --text-body-size: 16px;
  --text-body-line: 1.5;
  --text-body-weight: 400;
  --text-link-s-size: 16px;
  --text-link-s-line: 1.4;
  --text-link-s-weight: 400;
  --text-meta-size: 14px;
  --text-meta-line: 1.4;
  --text-meta-weight: 400;
  --radius-button-donate: 4px;
  --radius-button-outline-on-blue: 4px;
  --radius-button-black: 4px;
  --radius-language-button: 4px;
  --radius-action-card: 4px;
  --radius-amount-field: 4px;
  --radius-email-input: 4px;
  --radius-highlight-chip: 0px;
  --radius-button-primary: 4px;
  --radius-button-secondary: 4px;
  --ease-codex-base: ease;
  --duration-codex-base: 100ms;
  --ease-codex-medium: ease-out;
  --duration-codex-medium: 250ms;
  --ease-link-underline: ease;
  --duration-link-underline: 300ms;
  --ease-card-reveal: ease;
  --duration-card-reveal: 350ms;
  --ease-card-arrow: ease-in-out;
  --duration-card-arrow: 250ms;
  --duration-sound-logo: 4000ms;
  --icon-default: 20px;
  --icon-medium: 16px;
  --icon-small: 12px;
  --icon-site: 24px;
}
/* Phone values measured at 390px; Wikimedia's CSS switches at 781px. */
@media (max-width: 781px) {
  :root {
    --page-margin: 17px;
    --section-padding: 43px;
    --text-display-xl-size: 33.27px;
    --text-display-stat-size: 33.27px;
    --text-display-l-size: 24.64px;
    --text-display-m-size: 20.32px;
    --text-lead-size: 20.32px;
    --text-display-s-size: 20.32px;
    --text-appeal-size: 18.16px;
    --text-body-l-size: 18.16px;
    --text-button-size: 18.16px;
    --text-nav-size: 18.16px;
    --text-body-size: 14.16px;
    --text-link-s-size: 14.16px;
  }
}
.button-donate {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 49px; padding: 0 16px; border-radius: 4px;
  background: #246342; color: #FFFFFF;
  font: 700 20px/1 var(--font-body);
}
.button-donate:hover { background-color: #DBF3EC; color: #246342; box-shadow: inset 0 0 0 2px #246342; text-decoration: underline 2px; text-underline-offset: 3px; } /* observed */
.button-outline-on-blue {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 50px; padding: 0 11px; border-radius: 4px;
  background: transparent; color: #FFFFFF;
  box-shadow: inset 0 0 0 2px #FFFFFF;
  font: 700 20px/1 var(--font-body);
}
.button-outline-on-blue:hover { text-decoration: underline 2px; text-underline-offset: 3px; } /* observed */
.button-black {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 49px; padding: 0 16px; border-radius: 4px;
  background: #000000; color: #FFFFFF;
  font: 700 20px/1 var(--font-body);
}
.button-black:hover { background-color: #E5E5E5; color: #000000; box-shadow: inset 0 0 0 2px #000000; text-decoration: underline; } /* observed */
.button-primary {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 49px; padding: 0 16px; border-radius: 4px;
  background: #246342; color: #FFFFFF;
  font: 700 20px/1 var(--font-body);
}
.button-primary:hover { background-color: #DBF3EC; color: #246342; box-shadow: inset 0 0 0 2px #246342; text-decoration: underline 2px; text-underline-offset: 3px; } /* observed */
.button-secondary {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 49px; padding: 0 16px; border-radius: 4px;
  background: #000000; color: #FFFFFF;
  font: 700 20px/1 var(--font-body);
}
.button-secondary:hover { background-color: #E5E5E5; color: #000000; box-shadow: inset 0 0 0 2px #000000; text-decoration: underline; } /* observed */