:root {
  color-scheme: light;
  --cream: #fff7e8;
  --card: #fffcf6;
  --ink: #3e342f;
  --terracotta: #c96f52;
  --sage: #7fa486;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 15% 0%, rgba(201, 111, 82, .18), transparent 30rem),
    radial-gradient(circle at 85% 20%, rgba(127, 164, 134, .18), transparent 28rem),
    var(--cream);
  font-family: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, sans-serif;
  line-height: 1.6;
}

main {
  width: min(46rem, calc(100% - 2rem));
  margin: 4rem auto;
  padding: clamp(1.5rem, 5vw, 3rem);
  background: rgba(255, 252, 246, .92);
  border: 1px solid rgba(62, 52, 47, .08);
  border-radius: 2rem;
  box-shadow: 0 1.5rem 4rem rgba(62, 52, 47, .12);
}

.otto { font-size: 4rem; }
.eyebrow { color: var(--terracotta); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
h1 { margin: .2rem 0; font-size: clamp(2.8rem, 9vw, 5rem); line-height: 1; }
h2 { margin-top: 2rem; }
.lead { font-size: 1.25rem; }
nav { display: flex; flex-wrap: wrap; gap: .75rem; margin: 2rem 0; }
a { color: #87503f; font-weight: 700; }
nav a { padding: .7rem 1rem; border-radius: 999px; background: #f7e4d8; text-decoration: none; }
li + li { margin-top: .35rem; }