/* Bilingual books: the shelf, each book's contents, and chapter pages. */
:root {
  color-scheme: light dark;
  --page: #f6f1e7;
  --ink: #32291f;
  --link: #704224;
  --link-hover: #392013;
  --muted: #6b5641;
  --translation: #8d7a64;
  --faint: #b8a386;
  --rule: #ddd1bd;
  --current: #ebe1cf;
  color: var(--ink);
  background: var(--page);
}
@media (prefers-color-scheme: dark) {
  :root {
    --page: #1b1714;
    --ink: #e4dacb;
    --link: #d8a77c;
    --link-hover: #f2cfab;
    --muted: #a8957e;
    --translation: #867560;
    --faint: #5e5243;
    --rule: #3a3129;
    --current: #2f2821;
  }
}
a { color: var(--link); }
a:hover { color: var(--link-hover); }
a:focus-visible { outline-color: var(--link); }
main { width: min(100% - 2rem, 42rem); }
h1, h2, .title, .book, [lang='en'] { font-family: Georgia, 'Times New Roman', serif; font-weight: normal; }
[lang='ko'] { font-family: system-ui, sans-serif; color: var(--translation); }
footer { display: flex; gap: 1.5rem; width: min(100% - 2rem, 42rem); }

/* Shelf */
.intro { margin: 0 0 1.5rem; color: var(--muted); }
.views { display: flex; gap: 1.25rem; }
.views a { color: var(--muted); text-decoration: none; }
.views a:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: 0.2em; }
.views [aria-current='page'] { color: var(--ink); font-weight: 600; }
.books { list-style: none; margin: 2.5rem 0 0; padding: 0; border-top: 1px solid var(--rule); }
.books > li { border-bottom: 1px solid var(--rule); }
.books li > a { display: block; padding: 1.25rem 0; color: inherit; text-decoration: none; }
.books li > a:has(+ .author) { padding-bottom: 0; }
.books li > a span { display: block; }
.title { font-size: 1.3rem; color: var(--link); }
.books li > a:hover .title { color: var(--link-hover); text-decoration: underline; text-underline-offset: 0.2em; }
.author { margin: 0.25rem 0 0; padding-bottom: 1.25rem; font-size: 0.9rem; color: var(--muted); }
.author a, .byline a { color: inherit; }
.author a:hover, .byline a:hover { color: var(--link-hover); }
.series { padding: 1.25rem 0 0.5rem; }
.series h2 { margin: 0; font-family: inherit; font-size: 1rem; font-weight: 600; }
.series h2 [lang] { margin-left: 0.4em; font-weight: normal; }
.series h2 + .author { margin-top: 0; padding-bottom: 0; }
.series ul { list-style: none; margin: 0.75rem 0 0; padding: 0 0 0 1rem; border-left: 2px solid var(--rule); }
.series ul a { padding: 0.6rem 0; }

/* Contents */
h1 [lang='ko'] { display: block; margin-top: 0.5rem; font-size: 0.55em; }
.byline { margin: 0 0 3rem; color: var(--muted); }
.contents section + section { margin-top: 2.5rem; }
.contents h2 { margin: 0 0 1rem; font-size: 1.15rem; }
.contents h2 [lang] { display: block; }
.contents h2 [lang='ko'] { margin-top: 0.25rem; font-size: 0.85em; }
.chapters { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.chapters a, .chapters li > span { display: block; padding: 0.75rem 0.5rem; border-bottom: 1px solid var(--rule); color: inherit; text-decoration: none; }
.chapters [lang] { display: block; }
.chapters a [lang='en'] { color: var(--link); }
.chapters a:hover [lang='en'] { text-decoration: underline; text-underline-offset: 0.2em; }
.numbers { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.numbers a, .numbers span { display: block; min-width: 2.75rem; padding: 0.35rem 0.5rem; border: 1px solid var(--rule); border-radius: 6px; font-family: Georgia, 'Times New Roman', serif; text-align: center; text-decoration: none; }
.numbers span { color: var(--faint); border-style: dashed; }
.contents [aria-current='location'] { background: var(--current); }

/* Chapter */
.book { margin: 0 0 2.5rem; font-size: 0.95rem; }
.book a { color: var(--muted); text-decoration: none; }
.book a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.chapter h1 { margin: 0 0 2.5rem; font-size: 1.15rem; text-align: center; }
.chapter h1 > span { display: block; }
.chapter h1 [lang='ko'] { margin-top: 0.5rem; font-size: 0.85em; }
.chapter h1 small { display: block; margin-bottom: 0.75rem; font-size: 0.85em; }
.para { margin: 0 0 1.75rem; padding: 0; scroll-margin-top: 1rem; }
.para .s, .para .s > [lang] { display: block; }
.para .s > [lang='en'] { font-size: 1.0625em; }
.para .s > [lang='ko'] { margin-bottom: 0.65rem; font-size: 0.9375em; }
.para .s:last-child > [lang]:last-child { margin-bottom: 0; }
p.para:not(.front, .verse, .signature) > .s:first-child > [lang='en']::before { content: '¶'; content: '¶' / ''; margin-right: 0.4em; color: var(--faint); }
@media (min-width: 46rem) {
  p.para:not(.front, .verse, .signature) > .s:first-child > [lang='en'] { position: relative; }
  p.para:not(.front, .verse, .signature) > .s:first-child > [lang='en']::before { position: absolute; right: 100%; margin-right: 0.6em; }
}
ol.para { padding-left: 2rem; }
ol.para .s + .s { margin-top: 0.65rem; }
.front, .footnote { font-size: 0.925rem; }
.front { text-align: center; }
.signature { padding-left: 40%; }
.verse { padding-left: 2rem; }
.verse [lang='en'] { font-style: italic; }
.section { margin-top: 2.5rem; font-size: 1rem; text-align: center; }
.notes { margin: 3rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.notes h2 { margin: 0 0 1.25rem; font-size: 1rem; }
.notes dl { margin: 0; color: var(--muted); }
.notes dt { font-size: 1.0625em; }
.notes dt a { text-decoration: none; }
.notes dt a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.notes dd { margin: 0.25rem 0 0; font-size: 0.9375em; }
.notes dd + dt { margin-top: 1rem; }
.pager { display: flex; margin: 3rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.pager [rel='next'] { margin-left: auto; }