@layer base {
  :root {
    --white: hsl(0 0% 100%);
    --ink: hsl(216 12.2% 8%);
    --petrol: hsl(184.9 76.8% 22%);
    --petrol-deep: hsl(185.4 77% 17.1%);
    --grey: hsl(207.3 6.7% 32%);
    --hairline: hsl(150 3.7% 89.4%);
    --font-display: "Unbounded", "Jost", sans-serif;
    --font-text: "Manrope", "PT Serif", serif;
  }

  @font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/manrope-latin.woff2") format("woff2");
  }

  @font-face {
    font-family: "Unbounded";
    font-style: normal;
    font-weight: 500 700;
    font-display: optional;
    src: url("../fonts/unbounded-latin.woff2") format("woff2");
  }

  html {
    background: var(--white);
    color: var(--ink);
    font-family: var(--font-text);
    font-size: 100%;
    line-height: 1.5;
  }

  body {
    font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  }

  h1,
  h2,
  h3 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.08;
    text-wrap: balance;
    overflow-wrap: break-word;
    hyphens: auto;
  }

  h1 {
    font-size: clamp(2.75rem, 1.7rem + 3.2vw, 5rem);
  }

  h2 {
    font-size: clamp(2rem, 1.5rem + 2.2vw, 3.5rem);
  }

  h3 {
    font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  }

  p {
    max-width: 62ch;
  }

  p + p {
    margin-top: 1rem;
  }

  a {
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
  }

  strong {
    font-weight: 600;
  }

  .eyebrow {
    display: inline-block;
    color: var(--petrol);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .lede {
    max-width: 46ch;
    color: var(--grey);
    font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
    line-height: 1.5;
  }

  .figure-number {
    color: var(--petrol);
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 2rem + 2vw, 4rem);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }

  .text-fine {
    color: var(--grey);
    font-size: 0.875rem;
  }
}

@layer utilities {
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}