/* Base for all pages: local fonts, CI tokens, reset. The look is defined in site.css. */

@font-face { font-family: "IBM Plex Sans"; font-weight: 300; font-display: swap; src: url("fonts/ibm-plex-sans-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }

:root {
  /* CI (E10) */
  --ci-green: #b7c134;
  --ci-anthracite: #2e3640;
  /* derived: green dark enough for text on white (5.4:1), light tint for surfaces */
  --green-text: #687013;
  --green-tint: #f3f5e1;
  --muted: #5a6470;
  --line: #dde1e5;
  --surface: #f5f6f7;
  --white: #ffffff;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
ul { margin: 0; padding: 0; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
:focus-visible { outline: 3px solid var(--ci-green); outline-offset: 2px; }

.container { width: min(1200px, 100% - 32px); margin-inline: auto; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}