/* Fonts are self-hosted from the public undp/design-system repository.
   Söhne Breit ships only in fett/dreiviertelfett (+ kursiv): no regular or light. */
@font-face {
  font-family: 'Soehne Breit';
  src: url('../fonts/soehne-breit-web-fett.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Proxima Nova';
  src: url('../fonts/proximanova-regular-webfont.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Proxima Nova';
  src: url('../fonts/proximanova-medium-webfont.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
/* The package ships two semibold cuts. The system's own stylesheet and its
   Storybook set 600 in the -2 file, the heavier of the two, and the client
   checks the language switcher against them. That file has no narrow no-break
   space, the one both languages put before "%": the other cut lends it, and
   is fetched only by a page that sets one in semibold. */
@font-face {
  font-family: 'Proxima Nova';
  src: url('../fonts/proximanova-semibold-webfont-2.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Proxima Nova';
  src: url('../fonts/proximanova-semibold-webfont.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+202F;
}
@font-face {
  font-family: 'Proxima Nova';
  src: url('../fonts/proximanova-bold-webfont.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Proxima Nova';
  src: url('../fonts/proximanova-extrabold-webfont.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  background: var(--color-bg);
  /* `clip`, not `hidden`: `hidden` makes the body a scroll container, and a
     scroll container that never scrolls is a scrollport every `position:
     sticky` element on the page resolves against — which is why the impact
     stage computed as sticky and behaved as static. `clip` holds back the same
     sideways overflow without creating one. */
  overflow-x: clip;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--sp-2); line-height: 1.1; font-weight: 700; }
p { margin: 0 0 var(--sp-2); }
ul[role='list'] { list-style: none; margin: 0; padding: 0; }
a { color: inherit; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--color-navy); color: #fff; padding: var(--sp-1) var(--sp-2);
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 3px solid var(--color-blue); outline-offset: 3px; }

.btn {
  display: inline-block; font-size: var(--fs-small); font-weight: 600;
  text-decoration: none; padding: 0.75em 1.5em; border: 1px solid currentColor;
  border-radius: var(--radius); transition: background var(--motion-fast) var(--ease);
}
.btn--primary { background: var(--color-navy); color: #fff; border-color: var(--color-navy); }
.btn--primary:hover { background: var(--color-blue); border-color: var(--color-blue); }
.btn--ghost:hover { background: var(--color-overlay); }

/* "learn more" — the TCA component of the design system, at the file's own
   values: Proxima Nova Bold 16px, leading 0.8, navy letters, a clay chevron
   after them. No rule under the words: the component does not draw one.

   The words run in capitals, as the design system draws them: `.cta__link` in
   @undp/design-system 2.0.2 (docs/css/components/cta-link.min.css) is 16px,
   weight 700, `text-transform: uppercase`, `letter-spacing: .03em`. The Figma
   file sets the same component in lowercase over 90px; where the two disagree
   the system wins, and its tracking comes with it — the 0.0744em that used to
   sit here only existed to stretch those ten lowercase letters to the file's
   90px, a measure capitals no longer have.

   Block-level rather than inline, so the gap a block sets above it is a block
   margin and collapses with what comes before, as the file's 50px does. */
.tca {
  display: block; width: fit-content; white-space: nowrap;
  background: none; border: 0; padding: 0;
  font-family: var(--font-body); font-size: var(--fs-small);
  font-weight: 700; line-height: 0.8; letter-spacing: 0.03em;
  text-transform: uppercase; color: inherit; cursor: pointer;
}
/* The chevron is the file's `Rectangle 8`, drawn as the vector it is rather
   than as two borders: an open path over two sides of a 9.53835px square,
   stroke 1.48224, turned -135° so the corner points at the reader. Turned and
   stroked it inks 8.3168 x 14.5374, and its foot falls 2.77px under the
   baseline of the word. As a mask the stroke keeps its 1.48224 on a retina
   screen and on a single-density monitor alike; as a border it became 1.5 on
   one and 1 on the other. */
.tca::after {
  content: ''; display: inline-block;
  width: 0.5198em; height: 0.9086em;
  /* 9.72px from the right edge of the 90px word to the chevron's first ink,
     and a foot 2.77px under the baseline of that word. */
  margin-inline-start: 0.6078em; vertical-align: -0.1728em;
  background: var(--color-clay);
  -webkit-mask: var(--tca-chevron) no-repeat center / 100% 100%;
  mask: var(--tca-chevron) no-repeat center / 100% 100%;
  transition: transform var(--motion-fast) var(--ease);
}
/* The shift is written before the turn so it reads as rightwards on screen, in
   the page's axis rather than the chevron's own. */
.tca:hover::after { transform: translateX(4px); }


@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}