:root {
  color-scheme: light dark;
  --ink: #261d2a;
  --paper: #fffaf5;
  --coral: #fc7965;
  --sage: #527a65;
  --line: #eadfd8;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 86% 8%, #ffe0d7 0, transparent 30rem),
    radial-gradient(circle at 7% 90%, #e6f1e8 0, transparent 26rem),
    var(--paper);
  font-family: ui-rounded, "SF Pro Rounded", "Avenir Next", system-ui, sans-serif;
  line-height: 1.55;
}

main { width: min(760px, calc(100% - 40px)); margin: 0 auto; padding: 72px 0; }
nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 64px; }
.brand { color: inherit; font-weight: 800; letter-spacing: .08em; text-decoration: none; }
.links { display: flex; flex-wrap: wrap; gap: 16px; }
a { color: inherit; text-underline-offset: 3px; }
.links a { color: #5a4d5e; font-size: .9rem; }
.hero, article { background: color-mix(in srgb, var(--paper) 88%, transparent); border: 1px solid var(--line); border-radius: 32px; padding: clamp(28px, 7vw, 58px); box-shadow: 0 20px 70px rgba(63, 39, 47, .08); }
.eyebrow { color: var(--sage); font-size: .75rem; font-weight: 800; letter-spacing: .17em; }
h1 { font-size: clamp(2.4rem, 8vw, 4.8rem); line-height: .98; letter-spacing: -.065em; margin: 14px 0 24px; }
h2 { font-size: 1.45rem; margin-top: 2.1em; letter-spacing: -.025em; }
p, li { font-size: 1.03rem; }
.cta { display: inline-block; margin-top: 14px; padding: 13px 21px; border-radius: 999px; background: linear-gradient(110deg, var(--coral), #ffb16f); color: #211a23; font-weight: 750; text-decoration: none; }
.note { color: #665c68; font-size: .9rem; }
footer { margin-top: 34px; color: #665c68; font-size: .85rem; }

@media (prefers-color-scheme: dark) {
  :root { --ink: #f8edf0; --paper: #211b22; --line: #4b404b; }
  .links a, .note, footer { color: #d5c6ce; }
  .hero, article { background: color-mix(in srgb, var(--paper) 86%, transparent); }
}