html { background: #f4f1ea; }
body {
  max-width: 36em; margin: 0 auto; padding: 1.5em 1.25em 3em;
  font: 1.1em/1.6 Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
  color: #2b2b2b;
}
a { color: #7a2e2e; text-decoration: none; }
a:hover { text-decoration: underline; }

header { text-align: center; margin-bottom: 2.5em; }
header h1 { font-size: 1.6em; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 0.5em; }
header h1 a { color: #111; }
header img { display: block; width: 100%; max-width: 320px; margin: 0 auto 0.75em; }
header .subtitle { font-style: italic; color: #666; margin: 0; }

.meta { display: block; font-size: 0.85em; color: #777; }

.colophon { font-size: 0.95em; color: #666; font-style: italic; }
.colophon p { margin: 0 0 1.25em; }
main > .colophon:first-child { margin-bottom: 2.5em; }
nav + .colophon { margin-top: 2.5em; padding-top: 1.5em; border-top: 1px solid #d8d3c6; }

ul.stories { list-style: none; margin: 0; padding: 0; text-align: center; }
ul.stories li { margin: 0 0 1.25em; }
ul.stories li a { font-size: 1.1em; }

article h2 { font-size: 1.5em; font-weight: normal; margin: 0 0 0.1em; }
article audio { display: block; width: 100%; margin: 1.25em 0 2em; }

.transcription p { font-style: italic; color: #6b6b6b; }
.transcription p em { font-style: normal; }
.transcription blockquote { margin: 1.5em 0 1.5em 2em; padding: 0; }
.transcription blockquote p { font-style: normal; color: #111; margin: 0 0 1.25em; }
.transcription blockquote p em { font-style: italic; }

nav { display: flex; flex-wrap: wrap; gap: 1em; justify-content: space-between; margin-top: 3em; padding-top: 1em; border-top: 1px solid #d8d3c6; font-size: 0.9em; }
footer { margin-top: 3em; font-size: 0.8em; color: #888; text-align: center; }

@media (max-width: 480px) {
  body { font-size: 1em; }
  .transcription blockquote { margin-left: 1em; }
}