/* Element defaults and global behaviour. Tokens only, no literals. */

/* Border-box everywhere. Without this, a component that sets width: 100% on an
   element with its own padding (the drawer CTA button, the footer's stacked
   CTA button) overflows its container by that padding, because content-box
   sizing adds padding on top of the declared width instead of inside it. */
*, *::before, *::after {
  box-sizing: border-box;
}

/* One variable font file covers every weight the system uses. */
@font-face {
  font-family: "Inter Tight";
  src: url("../fonts/inter-tight-var-latin.woff2") format("woff2-variations"),
       url("../fonts/inter-tight-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* clip, never hidden: overflow-x: hidden on html/body silently kills sticky. */
html, body {
  overflow-x: clip;
}

/* A heading that is present for the document, not for the eye.
   See inc/document-title.php. Eight pages show their title at display size in a
   banner without marking it as a heading of any level, so what they are missing
   is the semantic h1 rather than the words, and printing a second visible copy
   would be a duplicate on the screen.
   The clip-rect pair rather than display:none or visibility:hidden, both of
   which remove the element from the accessibility tree and would defeat the
   entire point. clip is the legacy form and clip-path the current one; both are
   kept because they cost one line and the failure mode of dropping the wrong one
   is a paragraph of text appearing in the top-left corner of a page.
   Not `width/height: 0`, which some screen readers skip. */
.sr-doc-title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

body {
  margin: 0;
  background: var(--sr-canvas);
  color: var(--sr-ink);
  font-family: var(--font-ui);
  font-size: var(--type-body);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-ui);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--weight-semibold);
  margin: 0 0 var(--space-4);
}
h1 { font-size: var(--type-h1); }
h2 { font-size: var(--type-h2); }
h3 { font-size: var(--type-h3); font-weight: var(--weight-medium); }

p { margin: 0 0 var(--space-4); }

/* The measure belongs to prose the theme itself renders (the fallback article
   body in page.php, single.php and the archives). It is deliberately NOT on the
   bare `p` selector: nearly every page on this site has its body supplied by
   Elementor, and a bare `p { max-width: 68ch }` clamped every paragraph inside
   every one of those layouts, which is a page-content change the chrome has no
   business making. Elementor keeps full control of <main>; the measure applies
   only where the theme is the one doing the typesetting. */
.sr-entry__content p { max-width: var(--measure); }

/* The width container for markup the THEME renders: the native fallback loops
   in page.php, single.php, index.php, archive.php, search.php and 404.php.
   `.sr-main` itself carries no container on purpose, because an Elementor page
   body is full-bleed by design and containing it would mean the chrome silently
   reformatting the page content. That leaves theme-rendered markup with no
   container at all, running to the viewport edge with no gutter, which is what
   this class fixes. It is applied per fallback block, never to `.sr-main` and
   never to an `.sr-entry__content` that holds an Elementor body (see
   sharering_fallback_wants_container() in inc/fallback.php). */
.sr-fallback {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

a { color: var(--sr-brand); text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* One focus rule sitewide. It resolves to --sr-focus-ring, which the root binds
   to the brand blue (10.6:1 on white) and .sr-footer rebinds to the lifted blue
   (5.0:1 on the dark ground). So the ring follows the surface it lands on
   without any component needing a focus rule of its own. */
:focus-visible {
  outline: 2px solid var(--sr-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

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