*, *::before, *::after { box-sizing: border-box; }
html, body {
  overflow-x: clip;
}
html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  background: linear-gradient(var(--su-cream) 0%, var(--su-cream) 50%, var(--su-ink) 50%, var(--su-ink) 100%);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  background: var(--bg-page);
  color: var(--fg-1);
  font: var(--text-body-md);
  letter-spacing: var(--ls-body);
}
h1, h2, h3, h4 { font-weight: var(--weight-regular); }
img, svg { max-width: 100%; }
a {
  color: var(--fg-1);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--su-violet-700); }
:focus-visible {
  outline: var(--border-w) solid var(--focus-ring);
  outline-offset: 0;
  box-shadow: 0 0 0 3px var(--su-violet-200);
}
::selection { background: var(--su-lime); color: var(--su-ink); }
@keyframes su-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
  html.js .ds-io { opacity: 0; }
  html.js .ds-io.is-in {
    animation: su-fade-up var(--dur-slow) var(--ease-out) both;
    animation-delay: var(--stagger, 0ms);
  }
}