/* Funding identity keeps its approved aspect ratio. Reserve the strip's height
   at the end of every page, including the device's bottom safe area. */
.has-funding-banner {
  --funding-image-width: min(36rem, calc(100vw - var(--space-sm) * 2 - env(safe-area-inset-left) - env(safe-area-inset-right)));
  --funding-strip-height: calc(var(--funding-image-width) * 109 / 471 + var(--space-xs) * 2 + env(safe-area-inset-bottom) + var(--border-width-thin));
  padding-bottom: var(--funding-strip-height);
}

/* Keep below the global navigation and lightbox layers. */
.funding-banner {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 997;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--funding-strip-height);
  padding: var(--space-xs) max(var(--space-sm), env(safe-area-inset-right)) calc(var(--space-xs) + env(safe-area-inset-bottom)) max(var(--space-sm), env(safe-area-inset-left));
  border-top: var(--border-width-thin) solid var(--border-color);
  background: var(--color-white);
}

.funding-banner a,
.funding-banner > img {
  display: block;
  width: var(--funding-image-width);
  max-width: 100%;
}

.funding-banner a:focus-visible {
  outline: var(--border-width-medium) solid var(--accent);
  outline-offset: var(--border-width-medium);
}

.funding-banner img {
  display: block;
  width: 100%;
  height: auto;
}