@layer base {

      /* fallback faces */
      @font-face {
        font-family: "Host Grotesk Fallback";
        src: local("Arial"), local("ArialMT"), local("Helvetica");
        font-weight: 100 549;
        size-adjust: 101.7%;
        ascent-override: 100.3%;
        descent-override: 31.5%;
        line-gap-override: 0%;
      }

      @font-face {
        font-family: "Host Grotesk Fallback";
        src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold");
        font-weight: 550 799;
        size-adjust: 96.5%;
        ascent-override: 105.7%;
        descent-override: 33.2%;
        line-gap-override: 0%;
      }

      /* end fallback faces */
      *,
      *::before,
      *::after {
        box-sizing: border-box;
      }

      html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
      }

      body {
        margin: 0;
        background: var(--color-1);
        color: var(--color-2);
        font-family: var(--font-1);
        font-size: 15px;
        font-weight: 400;
        line-height: 1.45;
        letter-spacing: -0.005em;
        -webkit-font-smoothing: antialiased;
      }

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

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

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

      a {
        color: inherit;
      }

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

      :focus-visible {
        outline: 2px solid var(--color-6);
        outline-offset: 3px;
      }

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

      main {
        position: relative;
        z-index: 1;
        display: block;
      }
    }