:root {
  --color-page: #f7f1e7;
  --color-surface: #fffaf1;
  --color-surface-raised: #fbf5eb;
  --color-ink: #181510;
  --color-text: #30291f;
  --color-muted-text: #6c5f4f;
  --color-muted: #e6dac8;
  --color-border: rgb(54 43 28 / 16%);
  --color-border-strong: rgb(54 43 28 / 32%);
  --color-accent: #a66212;
  --color-accent-strong: #0d7f78;
  --color-human: #c27a18;
  --color-graphite: #181510;
  --color-accent-contrast: #ffffff;
  --color-focus: #8f520f;
  --shadow-soft: 0 24px 70px rgb(54 43 28 / 14%);
  --shadow-glow: 0 18px 42px rgb(194 122 24 / 24%);
}

::selection {
  background: #e6b86b;
  color: #181510;
}

body {
  background:
    radial-gradient(circle at 10% 6%, rgb(255 255 255 / 64%), transparent 24rem),
    radial-gradient(circle at 88% 14%, rgb(194 122 24 / 10%), transparent 28rem),
    linear-gradient(180deg, #f8f1e7 0%, var(--color-page) 42%, #efe2d1 100%);
}

h1,
h2,
h3 {
  color: var(--color-ink);
  line-height: 1.06;
}

h1 {
  max-width: 820px;
  font-size: clamp(3rem, 7vw, 6.4rem);
  letter-spacing: 0;
}

h2 {
  font-size: clamp(2rem, 4.5vw, 3.6rem);
  letter-spacing: 0;
}

h3 {
  margin-bottom: 10px;
  font-size: 1.12rem;
  letter-spacing: 0;
}

.muted {
  width: 100%;
  max-width: none;
  padding-right: max(20px, calc((100vw - 1120px) / 2));
  padding-left: max(20px, calc((100vw - 1120px) / 2));
  background:
    linear-gradient(135deg, rgb(194 122 24 / 10%), transparent 38%),
    linear-gradient(180deg, rgb(24 21 16 / 4%), transparent),
    #efe4d4;
}