@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/design-system/fonts/AtkinsonHyperlegibleNext-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/design-system/fonts/IBMPlexMono-variable-latin1.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
}

/*
 * Openly Useful brand-lockup contract.
 *
 * Each approved composition is one outlined SVG master. Surfaces may choose a
 * documented composition and size, but they cannot redefine weight, tracking,
 * proportions, or internal spacing because those relationships are paths.
 */
.ou-lockup {
  display: block;
  flex: none;
  max-width: 100%;
  height: auto;
}

.ou-lockup--horizontal {
  width: auto;
  height: var(--ou-brand-horizontal-height);
}

.ou-lockup--stacked {
  --ou-lockup-unit: var(--ou-brand-board-unit);
  width: calc(var(--ou-lockup-unit) * var(--ou-brand-stacked-width));
}

.ou-lockup--display {
  --ou-lockup-unit: var(--ou-brand-display-unit);
}

.ou-lockup--board {
  --ou-lockup-unit: var(--ou-brand-board-unit);
}

.ou-lockup--social {
  --ou-lockup-unit: var(--ou-brand-social-unit);
}

.ou-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (forced-colors: active) {
  .ou-lockup { forced-color-adjust: none; }
}