/* 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, .series summary span { display: block; }
.title { font-size: 1.3rem; color: var(--link); }
.books li > a:hover .title, .series summary: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); }
/* A series reads like a book. Its arrow and title open the list, whose rule drops from
   the arrow so the books line up under the title. While the series is open, the byline
   inside it replaces the one after it. */
.series details { padding: 1.25rem 0; }
.series details[open] { padding-bottom: 0.5rem; }
.series details:not([open]):has(+ .author) { padding-bottom: 0; }
.series details[open] + .author { display: none; }
.series details > .author { padding-bottom: 0; }
.series .author { padding-left: 1.75rem; }
.series summary { position: relative; width: fit-content; padding-left: 1.75rem; cursor: pointer; list-style: none; }
.series summary::-webkit-details-marker { display: none; }
.series summary::before { content: ''; position: absolute; top: 0.82rem; left: 0.375rem; width: 0.5rem; height: 0.5rem; border: solid var(--muted); border-width: 0 1.5px 1.5px 0; transform: translateX(-25%) rotate(-45deg); }
.series [open] > summary::before { transform: translateY(-25%) rotate(45deg); }
.series summary:hover::before { border-color: var(--link-hover); }
.series summary:focus-visible { outline: 2px solid var(--link); outline-offset: 4px; }
.series ul { list-style: none; margin: 0.75rem 0 0 calc(0.625rem - 1px); padding: 0 0 0 calc(1.125rem - 1px); border-left: 2px solid var(--rule); }
.series ul a { padding: 0.6rem 0; }
/* Books beside a series start where its title does, past the arrow. */
.books:has(> .series) > li:not(.series) > :is(a, .author) { padding-left: 1.75rem; }
.status { display: inline-block; padding: 0.1rem 0.55rem; border: 1px solid var(--rule); border-radius: 999px; font-size: 0.8rem; color: var(--muted); }
.books li > a .status { display: inline-block; margin-top: 0.5rem; }

/* Contents */
h1 [lang='ko'] { display: block; margin-top: 0.5rem; font-size: 0.55em; }
.byline { margin: 0 0 3rem; color: var(--muted); }
.byline:has(+ p > .status) { margin-bottom: 0.75rem; }
header > p:has(> .status) { margin: 0 0 3rem; }
.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 */
/* The mode bar stays at the top of the screen; links to a paragraph stop below it. */
:root[data-page='bilingual-book-chapter'] { scroll-padding-top: 3rem; }
.modes { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: center; height: 3rem; padding: 0 1rem; border-bottom: 1px solid var(--rule); background: var(--page); }
.modes [role='radiogroup'] { display: flex; border: 1px solid var(--rule); border-radius: 999px; font-size: 0.85rem; line-height: 1.5; }
.modes label { position: relative; padding: 0.25rem clamp(0.5rem, 2.4vw, 0.9rem); border-radius: 999px; color: var(--muted); white-space: nowrap; cursor: pointer; }
.modes label:hover { color: var(--link-hover); }
.modes label:has(:checked) { background: var(--current); color: var(--ink); }
.modes label:has(:focus-visible) { outline: 2px solid var(--link); outline-offset: 2px; }
.modes input { position: absolute; opacity: 0; pointer-events: none; }
.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; }
:is(.notes, .card) dl { margin: 0; color: var(--muted); }
:is(.notes, .card) dt { font-size: 1.0625em; }
.notes dt a { text-decoration: none; }
.notes dt a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
:is(.notes, .card) dd { margin: 0.25rem 0 0; font-size: 0.9375em; word-break: keep-all; overflow-wrap: anywhere; }
:is(.notes, .card) 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; }

/* Hide Korean: each translation is covered, keeping its place, until it is tapped. */
:root[data-mode='hidden'] :is(#chapter-heading, .s) > [lang='ko'] { width: fit-content; border-radius: 4px; cursor: pointer; }
:root[data-mode='hidden'] :is(#chapter-heading, .front .s, .section .s) > [lang='ko'] { margin-inline: auto; }
:root[data-mode='hidden'] :is(#chapter-heading, .s) > [lang='ko']:not([aria-pressed='true']) { color: transparent; background: var(--current); user-select: none; }
:root[data-mode='hidden'] :is(#chapter-heading, .s) > [lang='ko']:not([aria-pressed='true']):hover { background: var(--rule); }
:root[data-mode='hidden'] :is(#chapter-heading, .s) > [lang='ko']:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

/* English only: the original text set like a printed book, with sentences run together
   and paragraphs indented rather than spaced. Letters, verse and lists keep their lines. */
:root[data-mode='english'] :is(.book, #chapter-heading, .s) [lang='ko'], :root[data-mode='english'] .notes { display: none; }
:root[data-mode='english'] :is(p, aside).para:not(.signature) :is(.s, .s > [lang]) { display: inline; }
:root[data-mode='english'] .para:not(.section) { margin-block: 1.25rem; }
:root[data-mode='english'] p.para:not(.front, .verse, .signature) { margin-block: 0; }
:root[data-mode='english'] p.para:not(.front, .verse, .signature) + p.para:not(.front, .verse, .signature) { text-indent: 1.5em; }
:root[data-mode='english'] p.para > .s:first-child > [lang='en']::before { content: none; }

/* Full screen: one sentence at a time below the bar, in place of the page. Each sentence
   starts at the same height, and its translation and notes are added beneath it. */
:root[data-mode='full'] :is(main, footer) { display: none; }
.card { display: none; position: fixed; inset: 3rem 0 0; overflow-y: auto; padding: clamp(2rem, 12vh, 6rem) max(1rem, 50% - 21rem) 3rem; outline: none; overscroll-behavior: contain; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
:root[data-mode='full'] .card { display: block; }
.card > p { margin: 0; }
.card > [lang='en'] { font-size: clamp(1.25rem, 1rem + 1.25vw, 1.6rem); line-height: 1.5; }
.card > [lang='ko'] { margin-top: 1.25rem; font-size: 1.0625rem; }
.card dl { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); }
.card.opens > [lang='en']::before { content: '¶'; content: '¶' / ''; margin-right: 0.4em; color: var(--faint); }
.card.heading > p { text-align: center; }
.card small { display: block; margin-bottom: 0.5rem; font-size: 0.85em; }