/* Minimal global base. Consumers get sensible defaults without a reset library. */
:root { color-scheme: light }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth }
}
body { margin: 0; font-family: var(--font-ui); font-size: var(--text-regular); line-height: var(--leading-body); color: var(--text-primary); -webkit-font-smoothing: antialiased }
a { color: var(--text-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px }
/* Excludes .bv-btn: buttons fully own their hover colour (see
   .bv-btn--*:hover in components.css) - without this exclusion this
   generic inline-text-link rule was clobbering every button's hover
   text colour with a dark navy, which on a still-dark button background
   (or transparent on a dark page bg) produced dark-on-dark text with
   almost no contrast. */
a:not(.bv-btn):hover { color: var(--color-pickled-bluewood); text-decoration-thickness: 2px }
*, *::before, *::after { box-sizing: border-box }
img { max-width: 100% }
/* <picture> wraps most photography site-wide now (WebP source + jpg
   <img> fallback, see the SEO spec's performance section) - without
   this, <picture> itself (unstyled, unsized) becomes the actual flex/
   grid item in layouts like .split/.cta__inner/.vault-grid, not the
   <img> carrying all the real sizing classes, silently breaking every
   one of them the same way the .split__media flex bug did earlier.
   display:contents removes <picture> from the box tree entirely so
   its <img> child behaves exactly as if it were the direct flex/grid
   item, same as before <picture> was introduced. */
picture { display: contents }
::selection { background: var(--color-pickled-bluewood-light); color: #fff }
/* Visually hidden but still in the accessibility tree and in a link's
   text content - unlike aria-label, which Lighthouse's SEO link-text
   audit ignores (it reads the rendered text, not the accessible name).
   Use this to extend a short visible link label ("Learn more") into a
   distinct one without changing its on-page appearance. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}