:root {
  --ink: #262c2b;
  --muted: #4d4d4d;
  --cream: #fffeee;
  --sage: #f1f6ef;
  --warm: #f7f4ed;
  --on-dark: #e5ded2;
  --dark: #2c2a27;
  --mint: #cbedda;
  --font-body: "Poppins", Arial, sans-serif;
  --font-display: "Berkshire Swash", Georgia, serif;
}
* {
  box-sizing: border-box;
}
html {
  font-size: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6.875rem;
}
body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font: 500 1rem/1.504 var(--font-body);
}
body.is-locked {
  overflow: hidden;
}
img {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
button,
a,
input {
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
}
h1,
h2,
h3,
p {
  margin: 0 0 1.375rem;
}
h1 {
  font: 400 4rem/1.14 var(--font-display);
}
h2 {
  font: 800 1.75rem/1.3 var(--font-body);
}
h3 {
  font: 700 1.25rem/1.3 var(--font-body);
}
p:last-child {
  margin-bottom: 0;
}
a:hover {
  text-decoration: underline;
}
button:disabled {
  cursor: wait;
  opacity: 0.65;
}
:focus-visible {
  outline: 3px solid #639d86;
  outline-offset: 0.25rem;
}
.container {
  width: calc(100% - 5rem);
  max-width: 101.25rem;
  margin-inline: auto;
}
.narrow {
  width: calc(100% - 5rem);
  max-width: 75rem;
  margin-inline: auto;
}
.section {
  padding: 6.9375rem 0;
}
.sage {
  background: var(--sage);
}
.cream {
  background: var(--cream);
}
.warm {
  background: var(--warm);
}
.dark {
  background: var(--dark);
  color: var(--on-dark);
}
/* Reference desktop is 1920px. Rem-based dimensions keep text, spacing and
   imagery in proportion at laptop widths without zooming or transforming DOM.
   Below 1200px, the tablet/mobile layouts use normal readable type sizes. */
@media (min-width: 1201px) {
  html {
    font-size: clamp(0.75rem, 0.833333vw, 1rem);
  }
  .container {
    width: 84.375%;
  }
  .narrow {
    width: 62.5%;
  }
}
.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;
}
.skip-link {
  position: fixed;
  left: 1rem;
  top: -6.25rem;
  z-index: 9999;
  padding: 0.75rem;
  background: white;
}
.skip-link:focus {
  top: 0.75rem;
}
[hidden] {
  display: none !important;
}
.center {
  text-align: center;
}
.text-link {
  text-decoration: underline;
}
.stack-gap {
  margin-top: 3.4375rem;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}
