@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Zilla+Slab:wght@600;700&display=swap");

:root {
  --ink: #24251f;
  --orange: #b84b30;
  --cream: #fbf7ef;
  --sand: #d8c2a3;
  --sage: #5f695a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "DM Sans", "Segoe UI", sans-serif;
  line-height: 1.7;
}

header {
  padding: 22px;
  background: var(--sage);
  color: white;
}

header a {
  color: white;
  text-decoration: none;
  font-weight: 700;
}

main {
  width: min(780px, calc(100% - 40px));
  margin: 55px auto 80px;
  padding: clamp(24px, 6vw, 55px);
  background: white;
  border-top: 6px solid var(--orange);
  border-radius: 18px;
  box-shadow: 10px 10px var(--sand);
}

h1 {
  margin: 0 0 8px;
  font-family: "Zilla Slab", Georgia, serif;
  font-size: clamp(42px, 7vw, 68px);
  font-weight: 700;
  line-height: 1;
}

h2 {
  margin-top: 32px;
  font-family: "Zilla Slab", Georgia, serif;
}

a { color: #a33f28; }
small { color: #66675f; }