/*
 * Reset and element defaults. Replaces normalize.css plus the element-level
 * cascade the Webflow stylesheets provided.
 *
 * Only loaded on pages that have been migrated off Webflow — see the `legacy`
 * prop on BaseLayout. While a page still ships the Webflow stylesheets, those
 * supply this layer instead, and loading both would mean two sets of
 * element rules at equal specificity fighting over source order.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/*
 * The browser hides [hidden] with `display: none`, but that comes from the UA
 * stylesheet, so any author rule setting `display` beats it however weak the
 * selector — a `display: grid` on a component silently unhides it. This makes
 * the attribute mean what it says.
 */
[hidden] {
  display: none !important;
}

/*
 * Fluid root font size, carried over from the Webflow export unchanged.
 *
 * DO NOT ADJUST. Every spacing, size and radius in the design is expressed in
 * rem, so this ladder is what makes the layout scale between breakpoints —
 * altering any value here rescales the entire site. The base is 14.4px
 * (16px x 0.9), and the original's inline comments are kept for that reason.
 */
html {
  font-size: 14.4px; /* 16px * 0.9 */
}

@media (min-width: 240px) {
  html {
    font-size: calc(7.2px + 7.2 * ((100vw - 240px) / 239)); /* 8px * 0.9 */
  }
}

@media (min-width: 560px) {
  html {
    font-size: calc(3.6px + 7.2 * ((100vw - 240px) / 239)); /* 4px * 0.9 and 8px * 0.9 */
  }
}

@media (min-width: 768px) {
  html {
    font-size: calc(10.8px + 3.6 * ((100vw - 768px) / 223)); /* 12px * 0.9 and 4px * 0.9 */
  }
}

@media (min-width: 992px) {
  html {
    font-size: calc(9.5px + 4.05 * ((100vw - 992px) / 448)); /* 11.67px * 0.9 and 4.5px * 0.9 */
  }
}

@media (min-width: 1600px) {
  html {
    font-size: 14.4px; /* 16px * 0.9 */
  }
}

/*
 * The export applied `filter: saturate(1.08) contrast(1.03)` to <html>, which
 * lifted every colour AND every photograph. The colour half is now baked into
 * tokens.css, so the filter only needs to cover raster content: images, video,
 * and the one section that carries a photographic CSS background.
 */
img,
video,
.compliants {
  filter: saturate(1.08) contrast(1.03);
}

body {
  margin: 0;
  min-height: 100%;
  color: var(--color-ink);
  background-color: var(--color-paper);
  font-family: Inter, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-weight: 700;
}

h1 {
  font-size: 4rem;
  line-height: 1.1;
}
h2 {
  font-size: 3rem;
  line-height: 1.2;
}
h3 {
  font-size: 2rem;
  line-height: 1.2;
}
h4 {
  font-size: 1.5rem;
  line-height: 1.4;
}
h5 {
  font-size: 1.25rem;
  line-height: 1.5;
}
h6 {
  font-size: 1rem;
  line-height: 1.5;
}

p {
  /* margin-top too: the UA default is 1em top and bottom, and leaving the top
     unset leaks an extra line of space above every paragraph. */
  margin-top: 0;
  margin-bottom: 0;
  letter-spacing: 0.2px;
  line-height: 1.6;
}

a {
  color: inherit;
}

ul,
ol {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 1.5rem;
}

li {
  margin-bottom: var(--space-2xs);
}

img {
  max-width: 100%;
  display: inline-block;
}

label {
  margin-bottom: var(--space-3xs);
  font-weight: 500;
}

blockquote {
  margin-bottom: 0;
  padding: 0 1.25rem;
  border-left: var(--space-3xs) solid var(--color-rule);
  font-size: 1.25rem;
  line-height: 1.5;
}

figure {
  margin: var(--space-lg) 0;
}

figcaption {
  margin-top: var(--space-3xs);
  text-align: center;
}

/* Keyboard focus. The export used a Webflow-blue ring on [tabindex] only. */
:focus-visible {
  outline: 0.125rem solid var(--color-green-focus);
  outline-offset: 0.125rem;
}

.page-wrapper,
.main-wrapper {
  position: relative;
}

/* Headings step down together below the landscape breakpoint. */
@media screen and (max-width: 767px) {
  h1 {
    font-size: 2.5rem;
  }
  h2 {
    font-size: 2rem;
  }
  h3 {
    font-size: 1.5rem;
  }
  h4 {
    font-size: 1.25rem;
  }
  h5 {
    font-size: 1rem;
  }
  h6 {
    font-size: 0.875rem;
  }
}

/* Body copy tightens on the narrowest screens. */
@media screen and (max-width: 479px) {
  p {
    line-height: 1.3;
  }
}