/* Base (Roboto @font-face + preload are printed by inc/seo-performance.php): page ground, focus, screen-reader text, scrollbar, smooth scroll. */
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
/* Body copy is the kit's body, 18px / 1.6 (kit.css body); Hello's reset left it at 16px / 1.5 (30 Sept layout pass). */
body { background: var(--ground); color: var(--body); font: 400 var(--fs-body)/1.6 var(--font); -webkit-font-smoothing: antialiased; }

:focus-visible { outline: var(--mark-w) solid var(--white); outline-offset: var(--focus-offset); }

.sr-only {
  position: absolute; width: var(--hair); height: var(--hair); padding: 0; margin: calc(var(--hair) * -1);
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Custom scrollbar (not in the mock - Richard, 29 Sept). Chromium and Safari take the webkit
   pseudo-elements (rounded thumb); Firefox takes the standard properties. */
::-webkit-scrollbar { width: var(--gap-10); height: var(--gap-10); }
::-webkit-scrollbar-track { background: var(--ground); }
::-webkit-scrollbar-thumb {
  background: var(--ddc-purple); border-radius: var(--r-pill);
  border: var(--mark-w) solid var(--ground);
}
::-webkit-scrollbar-thumb:hover { background: var(--ddc-green); }
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-color: var(--ddc-purple) var(--ground); scrollbar-width: thin; }
}

/* Lenis smooth scroll (assets/js/smooth-scroll.js). These are Lenis's own required rules. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* The main landmark (inc/theme-a11y.php) is a skip-link target, not a visible box. */
main#content { display: block; outline: none; }