:root {
  color-scheme: light;
  --paper: #f6f3eb;
  --ink: #263b39;
  --accent: #bd7956;
  --muted: #53635d;
  --rule: #d7d9ce;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }
body { margin: 0; }
.page {
  width: min(100% - 128px, 1152px);
  min-height: 100svh;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
}
header { padding-block: 48px; border-bottom: 1px solid var(--rule); }
.brand {
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.3;
  letter-spacing: -.025em;
}
main { flex: 1; padding-block: clamp(80px, 12vh, 144px) 96px; }
.accent { width: 48px; height: 3px; background: var(--accent); margin-bottom: 36px; }
h1 {
  max-width: 850px;
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(44px, 7.5vw, 96px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.description {
  max-width: 420px;
  margin: 32px 0 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.7;
  text-wrap: pretty;
}
footer { border-top: 1px solid var(--rule); padding-block: 24px 32px; }
footer p { margin: 0; font-size: 12px; line-height: 1.6; color: var(--muted); }

@media (max-width: 600px) {
  .page { width: calc(100% - 48px); }
  header { padding-block: 30px; }
  main { padding-block: 76px 80px; }
  h1 { font-size: clamp(42px, 11.3vw, 66px); }
  .accent { margin-bottom: 28px; }
  .description { margin-top: 28px; font-size: 16px; }
  footer { padding-block: 20px 26px; }
}