:root {
  --dough-accent: #5c4033;
  --dough-cream: #faf5eb;
  --dough-beige: #ede0cc;
  --dough-warm-white: #fcf7f0;
  --dough-text: #38291f;
  --dough-text-secondary: #736152;
  --dough-gold: #cc9e4d;
  --dough-line: #d9c5a7;
  --font-head: "New York", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, serif;
  --font-body: "SF Pro Rounded", "SF Pro Text", "Avenir Next", "Nunito Sans", "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--dough-text);
  background:
    radial-gradient(680px 340px at 0% 0%, rgba(204, 158, 77, 0.35), transparent 65%),
    linear-gradient(140deg, #3a291f, #59402f);
  min-height: 100vh;
}

main {
  width: min(900px, calc(100% - 30px));
  margin: 24px auto 36px;
  padding: 24px;
  border: 1px solid var(--dough-line);
  border-radius: 18px;
  background: linear-gradient(140deg, var(--dough-cream), #f5ebdb);
  box-shadow: 0 22px 38px rgba(24, 12, 4, 0.18);
  line-height: 1.65;
}

h1,
h2 {
  font-family: var(--font-head);
  color: var(--dough-accent);
}

h1 {
  margin-top: 0;
  font-size: clamp(1.8rem, 4.8vw, 2.7rem);
}

h2 {
  margin-top: 1.4rem;
}

a {
  color: #74461a;
  font-weight: 700;
}

ul {
  padding-left: 1.1rem;
}

@media (max-width: 640px) {
  main {
    margin-top: 14px;
    padding: 18px;
    border-radius: 14px;
  }
}