:root {
  --linen: #f3eee4;
  --linen-2: #e7dfd1;
  --card: #faf7f1;
  --ink: #24182c;
  --ink-soft: #5e5168;
  --line: #ddd2c2;
  --teal: #0f766e;
  --teal-deep: #115e59;
  --clay: #a24b3c;
  --clay-deep: #86392d;
  --plum: #24182c;
  --plum-2: #32243c;
  --mist: #f6f3ec;
  --max: 1100px;
  --sans: "Outfit", sans-serif;
  --serif: "Fraunces", "Iowan Old Style", serif;
  --shadow: 0 18px 40px rgba(36, 24, 44, 0.08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(1200px 420px at 80% -10%, rgba(15, 118, 110, 0.08), transparent 60%),
    var(--linen);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.05rem;
  line-height: 1.65;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--teal-deep); }
button, input, textarea { font: inherit; }
h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 560;
  letter-spacing: -0.03em;
  line-height: 1.12;
  scroll-margin-top: 5.5rem;
}
h1 { font-size: clamp(2.6rem, 5.4vw, 4.6rem); margin: 0 0 0.35em; }
h2 { font-size: clamp(1.85rem, 3vw, 2.7rem); margin: 0 0 0.4em; }
h3 { font-size: 1.35rem; margin: 0 0 0.35em; }
p { margin: 0 0 0.9em; }
.skip {
  position: absolute; left: 1rem; top: -4rem;
  background: var(--teal); color: white; padding: 0.5rem 0.8rem; z-index: 30;
}
.skip:focus { top: 0.6rem; }