@layer base {
  html {
    font-size: clamp(100%, 1.618vw, 150%);
  }
  body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    padding: 1.618rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  a {
    text-decoration: none;
  }
  a:hover {
    text-decoration: underline;
  }

  hr {
    margin: 1rem 0;
  }

  p,
  ul,
  ol {
    margin-bottom: 1rem;
  }

  p,
  li {
    max-width: 65ch;
  }

  ul,
  ol {
    padding-left: 1.25rem;
  }

  input,
  button,
  textarea,
  select {
    padding: 0.5rem;
    margin-bottom: 1rem;
    display: block;
    min-width: 16ch;
    width: min(100%, 400px);
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-bottom: 1rem;
  }

  h1,
  h2,
  h3 {
    letter-spacing: -0.0168em;
  }
}