#page-size {
  font-family: monospace;
  color: black;
  position: fixed;
  bottom: 5px;
  left: 1rem;
  font-size: 1rem;
}

#back-to-top {
  font-family: monospace;
  color: black;
  position: fixed;
  bottom: 5px;
  right: 1.5rem;
  font-size: 2.3rem;
} 

    :root {
      --bg: #FFCA85;         /* background color */
      --title: #603600;      /* main title color */
      --text: #341d00;       /* main text color */
      --accent: #198F51;     /* link color */
      --max-width: 58rem;    /* limits how wide content can be */
    }

    * {
      box-sizing: border-box;
    }

    html {
      font-size: 12px;
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      min-height: 100vh;
      display: flex;
      flex-direction: column;

      background: var(--bg);
      color: var(--text);

      font-family: sans-serif;
      line-height: 1.2;

      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    main {
      flex: 1;
      max-width: none; /* var(--max-width); */
      padding: 1rem 1rem 4rem;
    }

    .site-title {
      display: inline-block;
      margin: 0 0 1.25rem;

      font-size: clamp(3rem, 8vw, 5.5rem);
      line-height: 0.95;

      color: var(--title);
      text-decoration: none;
      font-weight: 400;
    }

    .page-title {
      margin: 0 0 1.5rem;
      font-size: clamp(1.7rem, 3.8vw, 2.25rem);
      line-height: 1.1;
      color: var(--accent);
      font-weight: 400;
    }

    .micro {
      margin: 0;
      max-width: none;
      font-size: 1.25rem;
      line-height: 1.4;
    }

      .intro {
    margin-bottom: 2rem;
  }

  .intro p {
    margin: 0 0 1rem;

    font-size: clamp(1.65rem, 4.3vw, 2.15rem);

    line-height: 1.14;
    letter-spacing: -0.02em;
  }

  .intro a {
    text-decoration: none;
    color: var(--text);
  }

    a {
      color: var(--accent);
      text-decoration-thickness: 0.08em;
      text-underline-offset: 0.08em;
    }

    a:hover,
    a:focus-visible {
      text-decoration-thickness: 0.12em;
    }

    p {
      margin: 0 0 1.2rem;
      font-size: 1.25rem;
      line-height: 1.4;
      max-width: none; /* 42rem */
    }

    img.portrait {
      display: block;
      width: 24rem;
      max-width: 100%;
      height: auto;
      margin: 0 0 1.5rem;
    }

    img.image {
      display: block;
      width: 100%;
      max-width: 500px;
      height: auto;
      margin: 0 0 1.5rem;
    }

    .doc-links {
      margin: 1.5rem 0 2rem;
    font-size: 1.25rem;
    }

    .doc-links a {
      display: inline-block;
      margin-bottom: 1rem;
    }

    blockquote {
      margin: 2.5rem 0 0;
      padding-left: 1rem;
      border-left: 2px solid rgba(17, 17, 17, 0.25);
      max-width: 42rem;
    }

    blockquote p {
      margin-bottom: 1rem;
      font-size: 1.25rem;
      line-height: 1.4;
    }

    cite {
      font-style: normal;
    }


    footer {
      margin-top: 0;
      padding: 1rem 1rem 1.5rem;
      border-top: 1px solid rgba(17, 17, 17, 0.18);
    }
   

    @media (min-width: 760px) {
      main {
        padding: 1rem 1.2rem 5rem;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }
    }
    @media (max-width: 700px) {
 
}

button.click-load-button {
  appearance: none !important;
  -webkit-appearance: none !important;

  border: none !important;
  background: none !important;

  font: inherit !important;
  color: inherit !important;

  padding: 0 !important;
  margin: 0 !important;

  display: inline !important;

  font-family: monospace;
  background: none;
  border: none;
  padding: 0;
  text-align: center;
  cursor: pointer;
  color: black;
  width: 10rem;
  height: auto;
}

.caption[hidden] {
  display: none;
}