:root {
  color: #223047;
  background: #f6ecd4;
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.6;
}

* { box-sizing: border-box; }

body { margin: 0; padding: 3rem 1.25rem; }

.page {
  width: min(100%, 48rem);
  margin: 0 auto;
  padding: clamp(1.5rem, 5vw, 3.5rem);
  background: #fffdf9;
  border: 1px solid #e7dcc5;
  border-radius: 1.5rem;
  box-shadow: 0 1.5rem 4rem rgb(74 54 19 / 10%);
}

.back, .choice { color: #8b6319; font-weight: 700; text-decoration: none; }
.back:hover, .choice:hover { text-decoration: underline; }
.eyebrow { margin: 2rem 0 .25rem; color: #50647d; font-size: 1.05rem; }
h1 { margin: 0; font-size: clamp(2.5rem, 7vw, 4.4rem); line-height: 1.05; }
h2 { margin: 2.4rem 0 .7rem; font-size: 1.45rem; line-height: 1.2; }
.lead { max-width: 38rem; margin: 1.35rem 0 0; font-size: 1.2rem; }
.updated { color: #667085; }
.prose p, .prose li { font-size: 1.08rem; }
.prose ul { padding-left: 1.35rem; }
.choices { display: grid; gap: 1rem; margin-top: 2rem; }
.choice { display: block; padding: 1.25rem; border: 1px solid #e1d4bb; border-radius: 1rem; background: #fff6dc; }
.choice h2 { margin: 0; }
.choice p { margin: .35rem 0 0; color: #3d4a5c; font-weight: 400; }

@media (max-width: 34rem) { body { padding: 1rem; } .page { border-radius: 1rem; } }