/* ===== Typography ===== */
body {
  position: relative;               /* containing block for the full-height .dot-grid */
  overflow-x: hidden;                /* shy cards/pills can shove themselves a few px
                                         past the edge on narrow viewports; clip that
                                         instead of letting the page scroll sideways */
  font-family: var(--font-body);
  font-size: var(--fs-200);
  color: var(--c-ink);
  background: var(--c-bg);          /* one continuous themed background, whole site */
  transition: background var(--theme-dur) var(--ease-out),
              color var(--theme-dur) var(--ease-out);
}

h1, h2, h3 { font-family: var(--font-display); }

/* lowercase + italic, matching the logo wordmark ("cristina") — used for every
   section heading (Projects/Adventures/Blog) and reused by .footer__title and
   .about-panel__title so all the section names read as one family of labels */
.section__title {
  font-size: var(--fs-500);
  margin-bottom: var(--sp-4);
  font-style: italic;
  text-transform: lowercase;
}