@font-face {
  font-family: "Mona Sans";
  src: url("/fonts/MonaSans-Variable.woff2") format("woff2");
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  --esc-bg-parchment: #f3e7cd;
  --esc-bg-cream: #ead8b8;
  --esc-bg-panel: #f8efd9;
  --esc-ink: #2b1712;
  --esc-wine: #74293a;
  --esc-brick: #9b594a;
  --esc-copper: #c89563;
  --esc-line: #d8b88e;
  --esc-footer: #32120f;
  --esc-footer-ink: #ecd9bd;

  --esc-font-display: "Mona Sans", "Segoe UI", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial,
    sans-serif;
  --esc-font-body: "Mona Sans", "Segoe UI", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial,
    sans-serif;

  --esc-space-2xs: clamp(0.5rem, 0.4rem + 0.3vw, 0.75rem);
  --esc-space-xs: clamp(0.75rem, 0.6rem + 0.5vw, 1.125rem);
  --esc-space-s: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  --esc-space-m: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
  --esc-space-l: clamp(2.5rem, 1.9rem + 2vw, 4rem);
  --esc-space-xl: clamp(3.5rem, 2.6rem + 3vw, 6rem);
  --esc-space-2xl: clamp(5rem, 3.5rem + 4.5vw, 8.5rem);

  --esc-step--1: clamp(0.85rem, 0.82rem + 0.15vw, 0.95rem);
  --esc-step-0: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --esc-step-1: clamp(1.2rem, 1.1rem + 0.45vw, 1.4rem);
  --esc-step-2: clamp(1.5rem, 1.3rem + 0.8vw, 1.9rem);
  --esc-step-3: clamp(1.9rem, 1.55rem + 1.4vw, 2.6rem);
  --esc-step-4: clamp(2.4rem, 1.8rem + 2.4vw, 3.6rem);
  --esc-step-5: clamp(3rem, 2.1rem + 3.6vw, 4.8rem);

  --esc-content-max: 84.5rem;
  --esc-radius-soft: 1.25rem;
  --esc-radius-pill: 999px;
  --esc-border-hair: 1px solid var(--esc-copper);
  --esc-motion-duration: 500ms;
  --esc-motion-distance: 22px;
}

[data-theme="dark"] {
  --esc-bg-parchment: #181412;
  --esc-bg-cream: #231c17;
  --esc-bg-panel: #2c241e;
  --esc-ink: #f5ebe0;
  --esc-wine: #c4566f;
  --esc-brick: #dd7c69;
  --esc-copper: #d99f6d;
  --esc-line: #45372d;
  --esc-footer: #100c0a;
  --esc-footer-ink: #ebdccb;
  color-scheme: dark;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

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

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--esc-bg-parchment);
  color: var(--esc-ink);
  font-family: var(--esc-font-body);
  font-size: var(--esc-step-0);
  line-height: 1.6;
  overflow-x: hidden;
}

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

h1,
h2,
h3,
h4 {
  font-family: var(--esc-font-display);
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

input,
textarea,
select {
  font-family: inherit;
  font-size: var(--esc-step-0);
}

:focus-visible {
  outline: 2px solid var(--esc-wine);
  outline-offset: 3px;
  border-radius: 4px;
}

.esc-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.esc-skip-link {
  position: absolute;
  left: var(--esc-space-s);
  top: -60px;
  z-index: 200;
  background: var(--esc-wine);
  color: var(--esc-bg-panel);
  padding: 0.7em 1.2em;
  border-radius: var(--esc-radius-pill);
  font-size: var(--esc-step--1);
  transition: top 200ms ease;
}

.esc-skip-link:focus {
  top: var(--esc-space-s);
}

.esc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-size: var(--esc-step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--esc-wine);
}

.esc-eyebrow::before {
  content: "";
  width: 1.4em;
  height: 2px;
  background: var(--esc-wine);
}

.esc-lede {
  color: color-mix(in srgb, var(--esc-ink) 78%, transparent);
  font-size: var(--esc-step-1);
}