:root {
  color-scheme: only light;
  --ink: #14242c;
  --ink-muted: rgba(20, 36, 44, 0.68);
  --ink-faint: rgba(20, 36, 44, 0.45);
  --tide: #1c6b6a;
  --tide-deep: #145251;
  --tide-soft: rgba(28, 107, 106, 0.12);
  --sand: #f3efe6;
  --sand-bright: #faf7f1;
  --surface: #ffffff;
  --line: rgba(20, 36, 44, 0.12);
  --line-strong: rgba(20, 36, 44, 0.18);
  --on-tide: #ffffff;
  --amber: #b8893d;
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Source Sans 3", "Helvetica Neue", sans-serif;
  --wrap: min(1120px, calc(100% - 2.5rem));
  --header-h: 3.65rem;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --radius: 4px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--sand);
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 550;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 200;
  background: var(--tide);
  color: #fff;
  padding: 0.6rem 1rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius);
}

.skip:focus {
  top: 1rem;
}

[data-reveal] {
  opacity: 0;
  transform: translateY(0.85rem);
  transition:
    opacity 0.65s var(--ease),
    transform 0.65s var(--ease);
}

[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

.demo-banner {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.82rem;
  text-align: center;
  padding: 0.45rem 1rem;
}

.demo-banner a {
  color: #9fd4d2;
  font-weight: 600;
}