@font-face {
  font-family: "Source Serif 4";
  src: url("/fonts/source-serif-4.005/SourceSerif4-Regular.ttf.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: light;
  --page: #fbfaf7;
  --surface: #ffffff;
  --text: #24272c;
  --muted: #565d66;
  --border: #727984;
  --link: #174f9b;
  --focus: #0b4fae;
  --selection: #f5df9a;
  --selection-text: #292417;
  --gutter: clamp(1rem, 4vw, 2rem);
  --reader-scale: 1;
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-size: calc(1.25rem * var(--reader-scale));
  line-height: 1.7;
  color: var(--text);
  background: var(--page);
}

:root[data-theme="day"] {
  color-scheme: light;
  --page: #fbfaf7;
  --surface: #ffffff;
  --text: #24272c;
  --muted: #565d66;
  --border: #727984;
  --link: #174f9b;
  --focus: #0b4fae;
  --selection: #f5df9a;
  --selection-text: #292417;
}

:root[data-theme="night"] {
  color-scheme: dark;
  --page: #171a1f;
  --surface: #20242b;
  --text: #eff1f4;
  --muted: #c2c8d1;
  --border: #929aa6;
  --link: #a9c8ff;
  --focus: #8ab4ff;
  --selection: #51420d;
  --selection-text: #fff3c0;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="day"]):not([data-theme="night"]) {
    color-scheme: dark;
    --page: #171a1f;
    --surface: #20242b;
    --text: #eff1f4;
    --muted: #c2c8d1;
    --border: #929aa6;
    --link: #a9c8ff;
    --focus: #8ab4ff;
    --selection: #51420d;
    --selection-text: #fff3c0;
  }
}

:root[data-text-scale="1.12"] { --reader-scale: 1.12; }
:root[data-text-scale="1.25"] { --reader-scale: 1.25; }
:root[data-text-scale="1.5"] { --reader-scale: 1.5; }
:root[data-text-scale="1.75"] { --reader-scale: 1.75; }
:root[data-text-scale="2"] { --reader-scale: 2; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-padding-block: 1rem; }

body {
  max-width: 88ch;
  margin: 0 auto;
  padding-inline: var(--gutter);
  color: var(--text);
  background: var(--page);
  overflow-wrap: anywhere;
}

a { color: var(--link); text-underline-offset: 0.16em; }
a:hover { text-decoration-thickness: 0.12em; }

:focus-visible {
  outline: 0.2rem solid var(--focus);
  outline-offset: 0.2rem;
  border-radius: 0.2rem;
}

.skip-link {
  position: absolute;
  z-index: 2;
  inset-block-start: 0.5rem;
  inset-inline-start: var(--gutter);
  transform: translateY(-200%);
  padding: 0.5rem 0.75rem;
  border: 0.1rem solid var(--border);
  border-radius: 0.35rem;
  color: var(--text);
  background: var(--surface);
  font: 1rem/1.4 system-ui, sans-serif;
}
.skip-link:focus { transform: none; }

.site-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 3.5rem;
  padding-block: 0.5rem;
  border-bottom: 0.0625rem solid var(--border);
  font: 1rem/1.4 system-ui, sans-serif;
}
.site-header a { color: var(--text); font-weight: 700; }

.reader-site-header { position: sticky; inset-block-start: 0; z-index: 5; flex-wrap: wrap; background: var(--page); }
.reader-brand { flex: 0 0 auto; }
.reader-chrome-tools { display: grid; grid-template-columns: auto minmax(14rem, 1fr) minmax(14rem, 1fr); align-items: end; gap: .5rem 1rem; width: 100%; padding-block: .5rem; }
.reader-edition { font-weight: 700; }
.reader-reference, .reader-text-search { display: grid; gap: .2rem; font: .85rem/1.3 system-ui, sans-serif; }
.reader-search-row { display: flex; gap: .35rem; min-width: 0; }
.reader-search-row input { min-width: 0; width: 100%; min-height: 2.5rem; padding: .4rem .5rem; border: 1px solid var(--border); border-radius: .3rem; color: var(--text); background: var(--surface); font: inherit; }
.reader-search-row button, .reader-header-toggle { min-height: 2.5rem; padding: .4rem .65rem; border: 1px solid var(--border); border-radius: .3rem; color: var(--text); background: var(--surface); font: .9rem/1.3 system-ui, sans-serif; cursor: pointer; }
.reader-book-directory { flex: 1 0 100%; font: .9rem/1.4 system-ui, sans-serif; }
.reader-book-directory summary { cursor: pointer; }
.reader-book-directory nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: .2rem .6rem; padding: .5rem; background: var(--surface); }
.reader-header-collapsed .reader-site-header { min-height: 2.75rem; }
.reader-header-collapsed .reader-brand, .reader-header-collapsed .reader-chrome-tools, .reader-header-collapsed .reader-book-directory { display: none; }
.reader-header-toggle { margin-inline-start: auto; }
body[data-focus="true"] .reader-site-header { display: none; }
@media (max-width: 42rem) { .reader-chrome-tools { grid-template-columns: 1fr; } }

main {
  max-width: 68ch;
  margin: 2rem auto;
}

h1, h2 { line-height: 1.25; }
h1 { margin-block: 0 0.75rem; font-size: 1.75rem; }
h2 { margin-block: 1.75rem 0.5rem; font-size: 1.35rem; }
p { margin-block: 0 1rem; }

.edition, .coverage, .notes {
  color: var(--muted);
  font: 1rem/1.55 system-ui, sans-serif;
}
.edition { margin-block-end: 1rem; }

.chapter-picker { display: flex; flex-wrap: wrap; gap: 0.65rem 1rem; margin-block: 0 1.2rem; font: 0.9rem/1.4 system-ui, sans-serif; }
.chapter-picker form { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.4rem; flex: 1 1 16rem; min-width: 0; }
.chapter-picker label { font-weight: 600; }
.chapter-picker select, .chapter-picker button { min-height: 2.5rem; padding: 0.3rem 0.5rem; border: 1px solid var(--border); border-radius: 0.3rem; color: var(--text); background: var(--surface); font: inherit; }
.chapter-picker select { min-width: 0; max-width: 100%; }
.chapter-picker button { cursor: pointer; }
.chapter-picker button:hover { border-color: var(--link); }
.reader-compare { margin-block: 1rem; font: 0.9rem/1.5 system-ui, sans-serif; }
.reader-compare summary { cursor: pointer; width: fit-content; }
.reader-compare fieldset { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: .5rem 0; border: 1px solid var(--border); }
.reader-compare label { display: inline-flex; gap: .3rem; align-items: center; }
.reader-compare button { padding: .4rem .7rem; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: .3rem; font: inherit; cursor: pointer; }

.verse-number {
  margin-inline-end: 0.2rem;
  font: 0.72rem/1 system-ui, sans-serif;
  vertical-align: super;
}
.verse-number a {
  display: inline-block;
  min-width: 1.25rem;
  padding: 0.05rem 0.08rem;
  border-radius: 0.2rem;
  color: var(--muted);
  text-align: center;
  text-decoration: none;
}
.verse-number a:hover { color: var(--link); text-decoration: underline; }
:root[data-verse-numbers="false"] .verse-number a { font-size: 0; }
:root[data-verse-numbers="false"] .verse-number a:focus-visible,
:root[data-verse-numbers="false"] .verse-number:has(a:target) a { font-size: 0.72rem; }
.verse-number:has(a:target) a {
  color: var(--selection-text);
  background: var(--selection);
  box-shadow: 0 0 0 0.12rem var(--selection);
}
.selected {
  color: var(--selection-text);
  background: var(--selection);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  border-radius: 0.12rem;
}
.poetry-line { margin-block: 0.2rem; padding-inline-start: 1.5rem; }

.chapter-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-block-start: 2rem;
  padding-block: 1rem;
  border-block-start: 0.0625rem solid var(--border);
  font: 1rem/1.5 system-ui, sans-serif;
}
.chapter-nav a, .chapter-nav [aria-disabled="true"] {
  max-width: 100%;
  padding: 0.5rem 0.65rem;
  border: 0.0625rem solid var(--border);
  border-radius: 0.4rem;
  overflow-wrap: anywhere;
}
.chapter-nav [aria-disabled="true"] { color: var(--muted); }

.notes { margin-block-start: 2rem; padding-block-start: 1rem; border-block-start: 0.0625rem solid var(--border); }
.note-kind { text-transform: capitalize; }

.reader-settings { margin-block: 1rem; font: 1rem/1.5 system-ui, sans-serif; }
.reader-settings summary { width: fit-content; cursor: pointer; }
.reader-settings[hidden] { display: none !important; }
.reader-settings-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 0.75rem;
  margin-block-start: 0.75rem;
  padding: 1rem;
  border: 0.0625rem solid var(--border);
  border-radius: 0.6rem;
  background: var(--surface);
}
.reader-settings label { display: grid; gap: 0.25rem; }
.reader-settings select, .reader-settings button {
  min-height: 2.75rem;
  max-width: 100%;
  padding: 0.5rem 0.75rem;
  border: 0.0625rem solid var(--border);
  border-radius: 0.4rem;
  color: var(--text);
  background: var(--surface);
  font: inherit;
}
.reader-settings button { cursor: pointer; }
#reader-settings-status { color: var(--muted); }
#reader-announcements { min-height: 0; font: 0.95rem/1.4 system-ui, sans-serif; color: var(--muted); }
#reader-announcements:not(:empty) { margin-block: 0.5rem; }
#reader-announcements a { margin-inline-start: 0.25rem; }
main h1:focus { outline: 0.15rem solid var(--focus); outline-offset: 0.2rem; }

#reader-focus-exit {
  min-height: 2.75rem;
  margin-block-start: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 0.0625rem solid var(--border);
  border-radius: 0.4rem;
  color: var(--text);
  background: var(--surface);
  font: 1rem/1.4 system-ui, sans-serif;
  cursor: pointer;
}
#reader-fullscreen {
  min-height: 2.75rem;
  margin-block-start: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 0.0625rem solid var(--border);
  border-radius: 0.4rem;
  color: var(--text);
  background: var(--surface);
  font: 1rem/1.4 system-ui, sans-serif;
  cursor: pointer;
}
.reference-page label, .reference-page input { display: block; }
.reference-page input {
  width: 100%; min-height: 2.75rem; padding: 0.5rem;
  border: 0.0625rem solid var(--border); border-radius: 0.4rem;
  color: var(--text); background: var(--surface); font: inherit;
}
.reference-page button {
  min-height: 2.75rem; margin-block-start: 0.5rem; padding: 0.5rem 1rem;
  border: 0.0625rem solid var(--border); border-radius: 0.4rem;
  color: var(--text); background: var(--surface); font: inherit; cursor: pointer;
}
.passages-page ol { padding-inline-start: 1.5rem; }
.passages-page a { display: inline-block; padding-block: 0.25rem; }

body[data-focus="true"] .site-header,
body[data-focus="true"] .reader-settings,
body[data-focus="true"] .coverage { display: none; }
body[data-focus="true"] main { margin-block: 1rem; }
body[data-focus="true"] .chapter-nav { margin-block-start: 1rem; }

@media (max-width: 40rem) {
  main { margin-block: 1.25rem; }
  .chapter-nav { justify-content: flex-start; }
  .chapter-nav a, .chapter-nav [aria-disabled="true"] { flex: 1 1 9rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
.reading-progress { display: inline-block; min-width: 1.25em; font-weight: 700; text-align: center; }
#reading-progress-status:not(:empty) { padding: .35rem .6rem; border-inline-start: .2rem solid currentColor; }

.home-title-edition { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1rem; min-width:0; }
.home-edition-select { min-width:0; max-width:100%; }
.home-edition-select select { max-width:100%; min-width:0; }
.reading-mode-controls { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; font-size:.85rem; }
.reading-mode-controls summary,.reading-mode-controls button { cursor:pointer; }
.reading-single-form { margin:0; }
.reading-mode-modal[open]::before { content:""; position:fixed; inset:0; background:#13252280; z-index:100; }
.reading-mode-panel { position:fixed; z-index:101; left:50%; top:50%; transform:translate(-50%,-50%); box-sizing:border-box; width:min(32rem,calc(100vw - 2rem)); max-height:calc(100dvh - 2rem); overflow:auto; padding:2.5rem 1.25rem 1.25rem; border:1px solid #cad7d1; border-radius:.65rem; background:var(--reader-background,#fff); color:var(--reader-text,#213f36); box-shadow:0 1rem 3rem #0004; }
.reading-mode-panel fieldset { display:grid; gap:.7rem; border:0; padding:0; margin:0 0 1rem; }
.reading-mode-panel label { display:flex; align-items:start; gap:.5rem; overflow-wrap:anywhere; }
.reading-mode-close { position:absolute; top:.35rem; right:.5rem; font-size:1.5rem; line-height:1; }