:root {
  --paper: #f6f1e7;
  --ink: #2b2620;
  --muted: #6d6456;
  --stone: #b9ab92;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1c1a17;
    --ink: #f2ebdd;
    --muted: #a99f8d;
    --stone: #6f6554;
  }
}

* {
  box-sizing: border-box;
  margin: 0;
}

body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  background: var(--paper);
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  text-align: center;
}

main {
  width: min(100%, 560px);
}

.colonnade {
  height: 96px;
  margin-bottom: 32px;
  border-top: 8px solid var(--stone);
  border-bottom: 8px solid var(--stone);
  background: repeating-linear-gradient(
    to right,
    transparent 0 16px,
    var(--stone) 16px 32px,
    transparent 32px 48px
  );
}

h1 {
  font-size: clamp(2.5rem, 11vw, 4.5rem);
  font-weight: 400;
  letter-spacing: 0.02em;
}

p {
  margin-top: 12px;
  color: var(--muted);
  font-size: 1.125rem;
}