* { box-sizing: border-box; }
body {
  margin: 0;
  background: #fbf8ef;
  color: #25231f;
  font: 1rem/1.65 system-ui, sans-serif;
}
.shell { width: min(100% - 2.5rem, 64rem); margin-inline: auto; }
header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-block: 1.25rem;
  border-bottom: 1px solid #c9bcab;
}
a { color: #834325; text-underline-offset: .2em; }
a:hover { color: #572b19; }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.brand { color: inherit; font: bold 1.55rem Georgia, serif; }
.heading {
  padding-block: clamp(2rem, 8vw, 6rem);
  border-bottom: 2px solid #25231f;
}
.heading p { margin: 0 0 1rem; color: #834325; font-weight: 600; }
h1, h2 { font-family: Georgia, serif; }
h1 { max-width: 16ch; margin: 0; font-size: clamp(2.25rem, 8vw, 5.75rem); line-height: 1.05; }
h2 { margin: 2rem 0 .75rem; font-size: 1.6rem; }
.content { max-width: 45rem; padding-block: 1rem 3rem; }
.list { border-top: 1px solid #c9bcab; }
.list a { display: block; padding: 1rem 0; border-bottom: 1px solid #c9bcab; }
.list small { display: block; color: #4f4a42; }
footer { padding-block: 1.25rem; border-top: 1px solid #c9bcab; color: #4f4a42; font-size: .875rem; }