:root {
  color-scheme: light;
  --ink: #15221d;
  --muted: #52635c;
  --paper: #f4f1e8;
  --panel: #fffdf7;
  --accent: #d75f36;
  --line: #d8d2c2;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.6;
}

.hero, main, footer {
  width: min(68rem, calc(100% - 2rem));
  margin-inline: auto;
}

.hero { padding: 6rem 0 3rem; }
.eyebrow { color: var(--accent); font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
h1 { max-width: 12ch; margin: .25rem 0; font-family: Georgia, serif; font-size: clamp(3rem, 8vw, 6.6rem); line-height: .95; }
.lede { max-width: 38rem; color: var(--muted); font-size: 1.25rem; }
main { display: grid; gap: 1rem; padding-bottom: 4rem; }
section { padding: clamp(1.3rem, 4vw, 2.5rem); border: 1px solid var(--line); border-radius: 1rem; background: var(--panel); }
h2 { margin-top: 0; font-family: Georgia, serif; font-size: 1.8rem; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-top: 2rem; }
.facts article { padding: 1rem; border-left: .25rem solid var(--accent); background: #f7eadf; }
.facts strong, .facts span { display: block; }
.facts strong { font-size: 2rem; }
button { padding: .75rem 1rem; border: 0; border-radius: .4rem; background: var(--ink); color: white; font: inherit; font-weight: 700; cursor: pointer; }
button:hover, button:focus-visible { background: var(--accent); }
output { display: block; min-height: 1.6em; margin-top: 1rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.object-list { columns: 2; padding-left: 1.25rem; }
a { color: #064f3e; text-underline-offset: .2em; }
footer { padding: 0 0 3rem; color: var(--muted); }

@media (max-width: 40rem) {
  .hero { padding-top: 3rem; }
  .facts { grid-template-columns: 1fr; }
  .object-list { columns: 1; }
}