:root {
  color-scheme: dark;
  --bg: #0c0b0a;
  --ink: #c9c2b8;
  --mute: #7a7268;
  --copper: #b08a62;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font: 20px/1.65 "Iowan Old Style", Palatino, "Palatino Linotype", Georgia, serif;
}

header, footer, main {
  width: min(38rem, calc(100% - 3rem));
  margin-inline: auto;
}

header {
  padding: 3.5rem 0 1.5rem;
}

.mark {
  margin: 0;
  font: 11px/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.42em;
  text-transform: lowercase;
  color: var(--copper);
}

figure {
  margin: 0 0 2.5rem;
}

figure img {
  display: block;
  width: 100%;
  height: auto;
  filter: saturate(0.85) contrast(1.05);
}

article p {
  margin: 0 0 1.25rem;
}

.whisper {
  font: 12px/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.28em;
  text-transform: lowercase;
  color: var(--mute);
}

footer {
  padding: 3rem 0 4rem;
}

footer p {
  margin: 0;
  font: 11px/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.28em;
  color: var(--mute);
}

@media (max-width: 640px) {
  body { font-size: 18px; }
  header, footer, main { width: calc(100% - 2rem); }
}