:root {
  color-scheme: light dark;
  --paper: #FBF6EA;
  --accent: #7A1F2B;
  --text: rgba(0, 0, 0, .85);
  --text-2: rgba(0, 0, 0, .55);
  --reading: ui-serif, "New York", "Iowan Old Style", Georgia, serif;
  --chrome: system-ui, -apple-system, "Helvetica Neue", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #24211B;
    --accent: #CD6F81;
    --text: rgba(255, 255, 255, .85);
    --text-2: rgba(255, 255, 255, .55);
  }
}
@media (prefers-contrast: more) {
  :root { --accent: #621922; }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root { --accent: #D78C9A; }
}
html { font-size: 100%; background: var(--paper); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--reading);
  font-size: 1rem;
  line-height: 1.5;
}
header, main, footer {
  box-sizing: border-box;
  max-width: 40rem;
  margin: 0 auto;
  padding-left: max(24px, env(safe-area-inset-left));
  padding-right: max(24px, env(safe-area-inset-right));
}
header, footer { font-family: var(--chrome); font-size: .875rem; color: var(--text-2); padding-top: 1.5rem; padding-bottom: 1.5rem; }
header a.wordmark { font-weight: 600; text-decoration: none; }
footer a { margin-right: .5rem; }
main { padding-top: 1rem; padding-bottom: 1rem; }
h1, h2, p { margin: 0 0 .625rem; }
h1 { font-size: 2rem; line-height: 1.2; }
h2 { font-family: var(--chrome); font-size: 1.125rem; margin-top: 1.5rem; }
.lede { font-size: 1.125rem; }
.day { color: var(--accent); font-size: 1.125em; }
.close { color: var(--text-2); margin-top: 1.5rem; }
a { color: var(--accent); text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.meta { color: var(--text-2); }