/* C. The manuscript: plain, typeset, quiet. */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  padding: 3em 16px 4em;
  background: #fff;
  color: #000;
  font: 19px/1.5 "Times New Roman", Times, serif;
  animation: fade 200ms ease-out;
}
@keyframes fade { from { opacity: 0; } }
main { max-width: 34em; margin: 0 auto; }

a { color: #000; text-decoration: underline; text-decoration-color: #999;
    text-underline-offset: 2px; transition: text-decoration-color 150ms; }
a:hover { text-decoration-color: #000; }

h1, h2, h3 { font-weight: normal; }
.front > header, .chapter > header { text-align: center; }
h1 { font-size: 1.6em; margin: 0; line-height: 1.25; }
.front h1 { font-variant: small-caps; letter-spacing: .06em; }
.tagline, .date { font-style: italic; margin: .3em 0 0; }

.about { margin: 2.5em 0; }
.about p { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }

/* Contents, with dotted leaders that wrap instead of overflowing */
.contents h2 { text-align: center; font-variant: small-caps; letter-spacing: .06em;
  font-size: 1.15em; margin: 0 0 1em; }
.contents h3 { font-size: 1em; margin: 1.6em 0 .4em; font-variant: small-caps; letter-spacing: .03em; }
.contents .num { display: inline-block; min-width: 2.2em; font-variant: normal; }
.contents ol { list-style: none; margin: 0; padding: 0 0 0 2.2em; }
.contents li { margin: .15em 0; }
.contents li a { display: flex; align-items: flex-end; text-decoration: none; }
.contents .t { flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; }
.contents li a:hover .t { text-decoration: underline; text-underline-offset: 2px; }
.contents .dots { flex: 1 1 1.5em; min-width: 1.5em; margin: 0 .4em .35em;
  border-bottom: 1px dotted #000; }
.contents .y { flex: none; font-variant-numeric: oldstyle-nums; }

footer { margin-top: 4em; text-align: center; font-size: .85em; }
footer p { margin: .2em 0; }

/* Chapter (post) pages */
.chapter nav { font-size: .9em; margin-bottom: 3em; }
.chapter nav a { text-decoration: none; }
.chapter nav a:hover { text-decoration: underline; }
.section { font-variant: small-caps; letter-spacing: .06em; margin: 0 0 .6em; }
.chapter > header { margin-bottom: 2.5em; }
article { text-align: justify; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
article h3 { font-style: italic; font-size: 1em; margin: 1.8em 0 .4em; text-align: left; }
article blockquote { margin: 1em 2em; font-style: italic; }
article ul, article ol { padding-left: 1.5em; text-align: left; }
article img { display: block; max-width: 100%; max-height: 26em; height: auto;
  margin: 1.5em auto; }
.verse article { text-align: left; hyphens: manual; -webkit-hyphens: manual;
  width: fit-content; max-width: 100%; margin: 0 auto; }
.verse article p { margin: 0; }
.verse article p:has(br) { margin-bottom: 1em; }
.ornament { text-align: center; margin: 2.5em 0 0; }

@media (max-width: 480px) {
  body { font-size: 18px; padding-top: 2em; }
  .contents ol { padding-left: 0; }
  article blockquote { margin: 1em 1em; }
}