:root {
  --bg: #f3efe6;
  --surface: #fffdf8;
  --ink: #1c2b24;
  --muted-ink: #44554c;
  --muted: #66756d;
  --accent: #3d6b5a;
  --accent-2: #2f5245;
  --on-accent: #f7f3ea;
  --line: #d9d3c4;
  --radius: 1rem;
  --shadow: 0 18px 40px rgba(28, 43, 36, 0.08);
  --cta-bg: #1c2b24;
  --cta-ink: #f7f3ea;
  --cta-muted: #c7d3cc;
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Source Sans 3", "Segoe UI", sans-serif;
}

body.theme-family-med {
  background-image:
    radial-gradient(1200px 420px at 90% -10%, rgba(61, 107, 90, 0.14), transparent 60%),
    linear-gradient(#f3efe6, #f3efe6);
}

.theme-family-med .hero-art {
  background:
    linear-gradient(160deg, #dce8e1 0%, #c4a574 120%);
  border-radius: 1.4rem;
  position: relative;
  overflow: hidden;
}

.theme-family-med .hero-art::after {
  content: "";
  position: absolute;
  inset: 18% 16%;
  border: 1px solid rgba(28, 43, 36, 0.18);
  border-radius: 999px 999px 1.2rem 1.2rem;
}