html {
        scroll-behavior: smooth;
        scroll-padding-top: 6rem;
      }
      body {
        font-family: "Source Sans 3", system-ui, sans-serif;
        color: #1c2430;
        background: #fbfaf6;
        -webkit-font-smoothing: antialiased;
      }
      :focus-visible {
        outline: 3px solid #c9a227;
        outline-offset: 3px;
        border-radius: 4px;
      }
      .bg-stripes {
        background-image: repeating-linear-gradient(
          135deg,
          rgba(255, 255, 255, 0.04) 0,
          rgba(255, 255, 255, 0.04) 2px,
          transparent 2px,
          transparent 14px
        );
      }
      .paper-texture {
        background-color: #f6f3ec;
        background-image: radial-gradient(
          rgba(15, 42, 74, 0.05) 1px,
          transparent 1px
        );
        background-size: 22px 22px;
      }
      .font-serif {
        font-family: "Merriweather", Georgia, serif;
      }
      .icon {
        width: 1.1em;
        height: 1.1em;
        stroke-width: 1.8;
        display: inline-block;
        vertical-align: middle;
      }
      @media (prefers-reduced-motion: reduce) {
        *,
        *:before,
        *:after {
          scroll-behavior: auto !important;
          animation: none !important;
          transition: none !important;
        }
      }