:root {
  --paper: #efe4c9;
  --paper-edge: #e4d6b0;
  --ink: #1c1610;
  --ink-soft: #4a3f32;
  --rule: #2a2218;
  --sans-fallback: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--ink);
  background-color: #c9b894;
  background-image:
    radial-gradient(ellipse at 18% 0%, rgba(255, 248, 230, .45), transparent 42%),
    radial-gradient(ellipse at 88% 100%, rgba(90, 60, 20, .18), transparent 50%);
  font-family: var(--sans-fallback);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-underline-offset: .18em;
}

.sheet {
  width: min(52rem, calc(100% - 2rem));
  margin: 2rem auto 3rem;
  padding: clamp(1.4rem, 4vw, 2.6rem) clamp(1.2rem, 4vw, 2.4rem) 1.8rem;
  background: var(--paper);
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .22), transparent 18%),
    radial-gradient(ellipse at 10% 90%, rgba(140, 90, 30, .07), transparent 40%);
  border: 2px solid var(--rule);
  box-shadow:
    0 0 0 6px var(--paper),
    0 0 0 8px var(--rule),
    0 18px 40px rgba(40, 28, 12, .28);
}

.short-sheet {
  margin-top: 12vh;
  text-align: center;
}

.masthead {
  text-align: center;
  border-bottom: 3px double var(--rule);
  padding-bottom: 1.15rem;
  margin-bottom: 1.35rem;
}

.kicker {
  margin: 0 0 .55rem;
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

h1, h2 { margin: 0; font-weight: 700; line-height: 1; }

h1 {
  font-size: clamp(2.6rem, 9vw, 4.6rem);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-indent: .14em;
}

.subtitle {
  margin: .7rem 0 0;
  color: var(--ink-soft);
  font-size: 1.15rem;
  font-style: italic;
}

.cartoon { margin: 0 0 1.5rem; }

.cartoon img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(28, 22, 16, .35);
  background: #f7f1de;
}

figcaption {
  margin-top: .7rem;
  color: var(--ink-soft);
  font-size: .82rem;
  line-height: 1.45;
  text-align: center;
}

figcaption cite { font-style: italic; }

.facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .85rem 1.5rem;
  margin: 0 0 1.6rem;
  padding: 1rem 0 1.25rem;
  border-top: 1px solid rgba(28, 22, 16, .35);
  border-bottom: 3px double var(--rule);
}

.facts div { margin: 0; }

.facts dt {
  margin: 0 0 .15rem;
  color: var(--ink-soft);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.facts dd {
  margin: 0;
  font-size: .95rem;
}

.facts cite { font-style: italic; }

.notes section + section {
  margin-top: 1.35rem;
}

h2 {
  margin-bottom: .55rem;
  font-size: 1.12rem;
  letter-spacing: .06em;
}

.notes p, .lede {
  margin: 0 0 .85rem;
  font-size: 1.02rem;
}

.notes p:last-child { margin-bottom: 0; }

q { font-style: italic; }

footer {
  margin-top: 1.6rem;
  padding-top: .85rem;
  border-top: 1px solid rgba(28, 22, 16, .35);
  color: var(--ink-soft);
  font-size: .75rem;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
}

footer p { margin: 0; }

@media (max-width: 640px) {
  .facts { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  body { background: var(--paper-edge); }
  .sheet {
    width: 100%;
    margin: 0;
    border: 0;
    box-shadow: none;
    min-height: 100vh;
  }
}

@media print {
  body { background: white; }
  .sheet {
    width: auto;
    margin: 0;
    box-shadow: none;
    border: 0;
  }
}