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

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: var(--header-h);
    background: var(--ink-0);
  }

  /* Past 1920px the whole site grows with the screen, like a zoom, so a
     27-inch display does not show laptop-sized text in a sea of black. */
  @media (min-width: 1921px) {
    html {
      font-size: min(0.8334vw, 22px);
    }
  }

  body {
    margin: 0;
    min-height: 100svh;
    background: transparent;
    color: var(--bone);
    font-family: var(--sans);
    font-size: var(--fs-body);
    font-weight: 400;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  img,
  picture,
  svg {
    display: block;
    max-width: 100%;
  }

  img {
    height: auto;
  }

  h1,
  h2,
  h3,
  h4,
  p,
  figure,
  blockquote,
  ul,
  ol,
  dl,
  dd {
    margin: 0;
  }

  ul,
  ol {
    padding: 0;
    list-style: none;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  button,
  input,
  select,
  textarea {
    font: inherit;
    color: inherit;
  }

  button {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
  }

  ::selection {
    background: var(--light);
    color: var(--ink-0);
  }

  :focus-visible {
    outline: 2px solid var(--light);
    outline-offset: 4px;
  }

  .paper :focus-visible {
    outline-color: var(--paper-ink);
  }

  /* ---------- Type roles ---------- */

  .serif {
    font-family: var(--serif);
    font-weight: 400;
    letter-spacing: -0.01em;
  }

  .t-hero {
    font-family: var(--serif);
    font-size: var(--fs-hero);
    font-weight: 400;
    line-height: 0.84;
    letter-spacing: -0.035em;
  }

  .t-mega {
    font-family: var(--serif);
    font-size: var(--fs-mega);
    font-weight: 400;
    line-height: 0.88;
    letter-spacing: -0.03em;
  }

  .t-h1 {
    font-family: var(--serif);
    font-size: var(--fs-h1);
    font-weight: 400;
    line-height: 0.9;
    letter-spacing: -0.03em;
  }

  .t-h2 {
    font-family: var(--serif);
    font-size: var(--fs-h2);
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: -0.025em;
  }

  .t-h3 {
    font-family: var(--serif);
    font-size: var(--fs-h3);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.015em;
  }

  .t-statement {
    font-family: var(--serif);
    font-size: var(--fs-statement);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -0.015em;
  }

  .t-lead {
    font-family: var(--serif);
    font-size: var(--fs-lead);
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: -0.005em;
  }

  .t-body {
    color: var(--mute);
    max-width: 34rem;
  }

  .t-body + .t-body {
    margin-top: 1em;
  }

  .t-small {
    font-size: var(--fs-small);
    line-height: 1.55;
    color: var(--mute);
  }

  /* The one label style, used for facts and section names only. */
  .t-label {
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: 0.14em;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--mute);
  }

  .t-num {
    font-family: var(--sans);
    font-size: var(--fs-small);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    color: var(--mute);
  }

  em,
  .italic {
    font-style: italic;
  }

  .paper {
    background: var(--paper);
    color: var(--paper-ink);
  }

  .paper .t-body,
  .paper .t-small,
  .paper .t-label,
  .paper .t-num {
    color: var(--paper-mute);
  }

  .visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .skip-link {
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 200;
    padding: 0.75rem 1rem;
    background: var(--bone);
    color: var(--ink-0);
    font-size: var(--fs-small);
    font-weight: 500;
    transform: translateY(-200%);
  }

  .skip-link:focus {
    transform: none;
  }
}