@font-face {
  font-family: 'Zum Grotesk';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/global/fonts/ZumGrotesk-Variable.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Zum Grotesk';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(/global/fonts/ZumGrotesk-VariableItalic.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Metric-matched stand-in for Zum Grotesk (ascent 1.0, descent 0.303, no line
   gap) so the swap on load reflows nothing. Every local() named here is
   Arial-metric-compatible, so one set of overrides covers all of them; the
   overrides are multiplied by size-adjust, hence the >100% ascent on bold. */
@font-face {
  font-family: 'Sans Fallback';
  src: local('Arial'), local('Helvetica');
  font-weight: 400;
  size-adjust: 100.7%;
  ascent-override: 99.3%;
  descent-override: 30.1%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Sans Fallback';
  src: local('Arial Bold'), local('Helvetica Bold');
  font-weight: 700;
  size-adjust: 95.3%;
  ascent-override: 104.9%;
  descent-override: 31.8%;
  line-gap-override: 0%;
}

:root {
  color-scheme: light dark;

  --body-font: 'Zum Grotesk', 'Sans Fallback', sans-serif;

  /* Page surface. The body gradient runs -surface -> -surface-far. */
  --surface: light-dark(rgb(255 255 255), rgb(20 20 22));
  --surface-far: light-dark(rgb(226 226 226), rgb(38 38 42));

  --text: light-dark(rgb(0 0 0), rgb(237 237 237));
  --text-muted: light-dark(rgb(103 103 103), rgb(160 160 160));

  /* Deliberately low contrast so the numbers recede from the heading. */
  --text-number: light-dark(rgb(189 189 189), rgb(92 92 96));

  /* Reversed out of a photographic backdrop, so it stays light in both schemes. */
  --text-on-media: rgb(255 255 255);

  --text-size-80: 0.563rem;
  --text-size-90: 0.75rem;
  --text-size-100: 1rem;
  --text-size-200: 1.333rem;
  --text-size-300: 1.777rem;
  --text-size-400: 2.369rem;
  --text-size-500: 3.157rem;
  --text-size-600: 4.209rem;
  --text-size-700: 5.61rem;
}

body {
  --article-max-width: 600px;
  --page-heading: var(--text-size-500);

  margin: 0;
  background: linear-gradient(120deg, var(--surface), var(--surface-far));
  color: var(--text);
  font-size: var(--text-size-100);
  font-family: var(--body-font);

  h1, h2, h3, h4, h5, h6 {
    margin-top: 2.25rem;
    margin-bottom: 1rem;
    font-weight: 800;
    line-height: 1.15;
  }

  h1, .h1 {
    font-size: var(--text-size-700);
  }

  h2, .h2 {
    font-size: var(--text-size-600);
  }

  h3, .h3 {
    font-size: var(--text-size-500);
  }

  h4, .h4 {
    font-size: var(--text-size-400);
  }

  h5, .h5 {
    font-size: var(--text-size-300);
  }

  h6, .h6 {
    font-size: var(--text-size-200);
  }

  small {
    font-size: var(--text-size-90);
  }

  img, svg {
    max-width: 100%;
    height: auto;
  }

  pre {
    overflow: hidden;
  }

  code {
    word-break: break-word;
  }

  table {
    border-collapse: collapse;

    :is(th, td) {
      padding: 12px;
      border: 1px solid;
    }

    th {
      text-align: start;
    }
  }
}

.zum-whitepaper-heading-wrapper {
  margin: 48px;

  .eyebrow {
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
  }
}

.zum-whitepaper-heading {
  display: grid;
  grid-template-rows: auto auto;
  gap: 24px;

  img {
    display: block;
    width: 96px;
    height: 159.52px;
  }

  h1 {
    max-width: 600px;
    font-size: var(--page-heading);
    text-box: trim-both cap alphabetic;
    margin: 0;
  }
}

.zum-whitepaper-meta {
  position: relative;
  overflow: hidden;
  padding: 48px;
  color: var(--text-on-media);
  line-height: 1.4;

  .zum-whitepaper-meta-bg-filter {
    position: absolute;
    inset: 0;
    backdrop-filter: blur(24px);
  }

  .zum-whitepaper-meta-fg {
    position: relative;
  }

  img {
    position: absolute;
    inset: 0;
    object-fit: cover;
    z-index: -1;
  }

  p {
    width: 100%;

    &:first-of-type {
      margin-block-start: 0;
    }

    &:last-child {
      margin-block-end: 0;
    }
  }
}

article {
  line-height: 1.7;
  margin: 48px;
  counter-reset: h2;

  /* Scales with each heading: `em` resolves against the ::before's own size. */
  --heading-number-gap: 0.5em;

  :is(h2, h3, h4) {
    position: relative;

    &::before {
      color: var(--text-number);
      font-weight: 900;
    }
  }

  h2 {
    font-size: var(--text-size-300);
    counter-increment: h2;
    counter-reset: h3;

    &::before {
      content: counter(h2) ''. '';
    }
  }

  h3 {
    font-size: var(--text-size-200);
    counter-increment: h3;
    counter-reset: h4;

    &::before {
      content: counter(h2) ''.'' counter(h3) '' '';
    }
  }

  h4 {
    font-size: var(--text-size-100);
    counter-increment: h4;

    &::before {
      content: counter(h2) ''.'' counter(h3) ''.'' counter(h4) '' '';
    }
  }

  /* Front and back matter sit outside the numbering sequence: the opening h2 is
     the abstract, the closing h2 is the appendix, and any subheading trailing
     the appendix belongs to it. */
  h2:first-of-type,
  h2:last-of-type,
  h2:last-of-type ~ :is(h3, h4) {
    counter-increment: none;

    &::before {
      content: none;
    }
  }

  ul, ol {
    padding-inline-start: 1.5rem;
  }

  .whitepaper-table {
    max-width: 100%;
    margin-block: 1em;
    overflow-x: auto;
  }
}

/* @media (width >= 600px) {} */

/* @media (width >= 900px) {} */

@media (width >= 900px) {
  body {
    --article-max-width: 600px;
    --page-heading: var(--text-size-700);
  }

  .zum-whitepaper-heading-wrapper {
    margin: 120px 0;

    .eyebrow {
      margin-left: 200px;
      text-transform: uppercase;
    }
  }

  .zum-whitepaper-heading {
    grid-template-columns: 200px 1fr;
    align-items: end;
    gap: 0;

    picture {
      justify-self: center;
    }

    h1 {
      font-size: 76px;
    }
  }

  .zum-whitepaper-meta {
    padding: 172px 0 48px 200px;

    .zum-whitepaper-meta-fg {
      max-width: var(--article-max-width);
    }
  }

  article {
    max-width: 600px;
    margin: 0 0 0 200px;

    /* Hang numbers in gutter. */
    :is(h2, h3, h4)::before {
      position: absolute;
      top: 0;
      inset-inline-end: calc(100% + var(--heading-number-gap));
    }
  }
}

/* @media (width >= 1440px) {} */