*, *::before, *::after { box-sizing: border-box; }

:root {
    --font-base: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
    --font-scale: 1;
}

html {
    font-size: calc(var(--font-base) * var(--font-scale));
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

body {
    margin: 0;
    background: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-scripture);
    line-height: var(--leading);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
     
    overflow-wrap: anywhere;
}

:root {
     
    --measure: 38rem;
     
    --gutter: clamp(0.7rem, 3vw, 2rem);

--leading: 1.65;
    --para-gap: 0.85em;
    --indent: 1.25em;

--poetry-step: 1.15em;
    --poetry-hang: 1.15em;

--verse-size: 0.72em;
    --verse-offset: -0.35em;
    --verse-gap: 0.35em;

--tap: 3rem;

    --radius: 0.5rem;
    --focus-ring: 3px;

--bg-color: #fdfcf9;
    --text-color: #1c1b19;
    --primary: #1a4c8b;
    --secondary: #eeeae1;
    --accent: #8b5a1a;
    --link-color: #1a4c8b;
    --shadow: rgba(0, 0, 0, 0.12);

    --wj-color: #9b2226;

--sym-size: 1.6rem;
    --nav-sym: 1.75rem;
}

body {
     
    --note-color: var(--primary);
    --verse-color: color-mix(in srgb, var(--text-color) 45%, var(--bg-color));
    --rule-color: color-mix(in srgb, var(--text-color) 18%, var(--bg-color));
    --muted-color: color-mix(in srgb, var(--text-color) 60%, var(--bg-color));

--control-border: var(--muted-color);

--bar-bg: var(--secondary);
}

@supports not (color: color-mix(in srgb, red 50%, blue)) {
    :root, body {
        --verse-color: #6e6a64;
        --rule-color: #d8d4cc;
        --muted-color: #55524d;
    }
}

[data-script="Latn"], [data-script="Cyrl"], [data-script="Grek"] { --leading: 1.65; }

[data-script="Deva"], [data-script="Beng"], [data-script="Guru"],
[data-script="Gujr"], [data-script="Orya"], [data-script="Taml"],
[data-script="Telu"], [data-script="Knda"], [data-script="Mlym"],
[data-script="Sinh"] { --leading: 1.85; --verse-size: 0.68em; }

[data-script="Thai"], [data-script="Laoo"] {
    --leading: 1.95;
    --verse-size: 0.68em;
    line-break: normal;
    word-break: normal;
}

[data-script="Khmr"], [data-script="Mymr"] { --leading: 2.0; --verse-size: 0.68em; }

[data-script="Tibt"] { --leading: 2.15; --verse-size: 0.66em; }

[data-script="Ethi"] { --leading: 1.8; }

[data-script="Hani"], [data-script="Kana"], [data-script="Hang"] {
    --leading: 1.8;
    --measure: 34rem;
    --indent: 1em;
}
[data-script="Hani"] em, [data-script="Kana"] em,
[data-script="Hani"] .add, [data-script="Kana"] .add,
[data-script="Hani"] .it,  [data-script="Kana"] .it {
    font-style: normal;
     
    -webkit-text-emphasis: dot;
    text-emphasis: dot;
}

[data-script="Arab"] { --leading: 2.0; --verse-size: 0.7em; }
[data-script="Hebr"] { --leading: 1.9; }
[data-script="Thaa"] { --leading: 2.0; }
[data-script="Syrc"] { --leading: 1.95; }

:root {
    --justify: start;
    --hyphens: none;
}

@media (min-width: 34rem) {
    [data-script="Latn"], [data-script="Cyrl"], [data-script="Grek"] {
        --justify: justify;
        --hyphens: auto;
    }
}

.page {
    max-width: var(--measure);
     
    min-width: 0;
     
    inline-size: 100%;
    margin-inline: auto;
    padding-inline: var(--gutter);
     
    padding-block: clamp(0.5rem, 2vw, 1.5rem) 4rem;
}

.chapter { font-size: 1rem; }

.p, .m, .nb, .pc, .pi, .pi1, .pi2, .pi3, .pm, .pmo, .pmc, .pmr, .pr,
.ph, .ph1, .ph2, .ph3, .li, .li1, .li2, .li3, .cls, .mi, .ps, .psi {
    margin-block: 0 var(--para-gap);
    text-indent: var(--indent);
}

.chapter > .p:first-of-type,
.m, .nb, .mi, .ps { text-indent: 0; }

.pc { text-indent: 0; text-align: center; }

.pi, .pi1 { margin-inline-start: var(--poetry-step); }
.pi2      { margin-inline-start: calc(var(--poetry-step) * 2); }
.pi3      { margin-inline-start: calc(var(--poetry-step) * 3); }

.pm, .pmo, .pmc, .pmr, .pr { margin-inline: var(--poetry-step); }

.li, .li1, .ph, .ph1 { text-indent: 0; margin-inline-start: var(--poetry-step); }
.li2, .ph2, .phi     { text-indent: 0; margin-inline-start: calc(var(--poetry-step) * 2); }
.li3, .ph3           { text-indent: 0; margin-inline-start: calc(var(--poetry-step) * 3); }

.qc, .cov, .mr, .ms2, .ms3 { text-indent: 0; text-align: center; }
.qr, .qs { text-indent: 0; text-align: end; font-style: italic; }

.cd, .conc { display: block; margin-block: var(--para-gap); color: var(--muted-color); }
.d { display: block; font-weight: 600; font-style: italic; margin-block: 1em 0.4em; }

.q, .q1, .q2, .q3, .q4, .qm, .qm1, .qm2, .qm3, .qa, .b {
    margin-block: 0 0.15em;
    text-indent: calc(var(--poetry-hang) * -1);
    padding-inline-start: var(--poetry-hang);
}

.q, .q1, .qm, .qm1 { margin-inline-start: 0; }
.q2, .qm2 { margin-inline-start: var(--poetry-step); }
.q3, .qm3 { margin-inline-start: calc(var(--poetry-step) * 2); }
.q4       { margin-inline-start: calc(var(--poetry-step) * 3); }

.b { min-height: 0.7em; padding: 0; text-indent: 0; }

.q + .p, .q1 + .p, .q2 + .p, .q3 + .p { margin-block-start: var(--para-gap); }

.qa {
    font-weight: 600;
    font-style: italic;
    color: var(--muted-color);
    margin-block: 1.2em 0.4em;
    text-indent: 0;
    padding-inline-start: 0;
}

.v {
    font-size: var(--verse-size);
    font-weight: 600;
    color: var(--verse-color);
    font-feature-settings: "onum" 0, "lnum" 1;
    font-variant-numeric: lining-nums;
    line-height: 0;                  
    vertical-align: var(--verse-offset);
    margin-inline-end: var(--verse-gap);
    text-indent: 0;
    unicode-bidi: isolate;
    user-select: none;
    scroll-margin-block-start: 30vh;    
}

.v bdi { unicode-bidi: isolate; }

.chapter-number {
    font-size: 2.4em;
    font-weight: 700;
    line-height: 1;
    color: var(--primary);
    unicode-bidi: isolate;
}

.chapter-empty {
    --sym-size: 2.6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-block-size: 7rem;
    margin-block: 0.75rem 2rem;
    padding: 1rem;
     
    border: 2px dashed var(--control-border);
    border-radius: var(--radius);
    line-height: 1;
}

.chapter-empty [data-sym]::before {
    font-size: var(--sym-size);
    color: var(--muted-color);
    line-height: 1;
    white-space: nowrap;
}

.chapter-empty .p {
    margin: 0;
    text-indent: 0;
    text-align: center;
    max-inline-size: 100%;
}

.wj { color: var(--wj-color); }

.add, .it, .em, .qt, .sls, .rq, .fq, .fqa { font-style: italic; }

.nd {
    font-variant-caps: small-caps;
    letter-spacing: 0.02em;
}
 
[data-script="Arab"] .nd, [data-script="Hebr"] .nd, [data-script="Thaa"] .nd,
[data-script="Hani"] .nd, [data-script="Kana"] .nd, [data-script="Hang"] .nd,
[data-script="Deva"] .nd, [data-script="Thai"] .nd, [data-script="Ethi"] .nd,
[data-script="Tibt"] .nd, [data-script="Mymr"] .nd, [data-script="Khmr"] .nd {
    font-variant-caps: normal;
    letter-spacing: normal;
    font-weight: 600;
}

.bd, .bdit, .k, .k1, .fw, .ior, .qac { font-weight: 600; }
.bdit { font-style: italic; }
.no, .ndx, .ft { font-weight: 400; font-style: normal; }
.ord { vertical-align: super; font-size: 0.7em; }
.fv { color: var(--accent); }

.s, .s1, .s2, .s3, .ms, .ms1 {
    font-weight: 600;
    line-height: 1.3;
    text-indent: 0;
    text-align: start;
    color: var(--primary);
    margin-block: 1.6em 0.5em;
}
.s, .s1  { font-size: 1.08em; }
.s2      { font-size: 1em; font-style: italic; }
.s3      { font-size: 0.95em; font-style: italic; color: var(--muted-color); }
.ms, .ms1 { font-size: 1.2em; text-align: center; margin-block: 2em 0.8em; }

.r, .sr {
    font-size: 0.85em;
    font-style: italic;
    font-weight: 400;
    color: var(--muted-color);
    text-indent: 0;
    margin-block: -0.3em 0.6em;
}

.mt, .mt1, .mte, .mte1, .mt2, .mte2, .mt3, .mte3, .imt, .imt1, .imt2, .imt3 {
    font-weight: 700;
    text-align: center;
    text-indent: 0;
    line-height: 1.25;
    margin-block: 0.6em;
}
.mt, .mt1, .mte, .mte1 { font-size: 1.6em; }
.mt2, .mte2, .imt2     { font-size: 1.2em; font-weight: 600; }
.mt3, .mte3            { font-size: 1em; font-weight: 600; color: var(--muted-color); }

.note-ref {
    display: inline-block;
    font-size: 0.7em;
    line-height: 0;
    vertical-align: super;
    margin-inline: 0.1em;
    padding: 0.35em;               
    margin-block: -0.35em;
    color: var(--note-color);
    background: none;
    border: 0;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
    unicode-bidi: isolate;
}
.note-ref:hover, .note-ref:focus-visible { text-decoration: underline; }

.note-body {
    display: block;
    font-size: 0.88em;
    line-height: 1.5;
    color: var(--muted-color);
    text-indent: 0;
    margin-block: 0.5em;
    padding-inline-start: 0.9em;
    border-inline-start: 2px solid var(--rule-color);
}

.notes {
    margin-block-start: 2.5rem;
    padding-block-start: 1rem;
    border-block-start: 1px solid var(--rule-color);
    font-size: 0.9em;
    color: var(--muted-color);
}
.notes h2 {
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    margin-block: 0 0.6em;
    color: var(--muted-color);
}
 
.xt a, .x a, .notes a, .note-body a {
    color: var(--link-color);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.xt, .x { font-size: 0.9em; color: var(--muted-color); }

.site-header {
    text-align: center;
    justify-content: center;
}

.site-header .translation-name {
    flex: 1 1 100%;
    text-align: center;
}

.nav, .toolbar {
    display: flex;
    align-items: center;
    justify-content: center;    
    flex-wrap: wrap;
    gap: 0.4rem;
}

.nav a, .nav button, .nav summary,
.nav .prev, .nav .next, .nav .here, .nav .home,
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
     
    position: relative;
    min-height: var(--tap);
    min-width: var(--tap);
    padding-inline: 0.9rem;
    border: 1px solid var(--control-border);
    border-radius: var(--radius);
    background: var(--secondary);
    color: var(--text-color);
    font: inherit;
    font-size: 1rem;
    text-decoration: none;
    cursor: pointer;
}
.nav a:hover, .nav button:hover, .nav summary:hover, .btn:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--bg-color);
}

.nav .prev, .nav .next, .nav .home {
    padding-inline: 1.1rem;
    line-height: 1;
}
.nav .prev::before, .nav .next::before { font-size: var(--nav-sym); }

.nav .home [data-sym] { display: inline-flex; align-items: center; line-height: 1; }
.nav .home [data-sym]::before { font-size: var(--sym-size); }
.nav .prev::before { content: "\25C0 \FE0E "; }
.nav .next::before { content: "\25B6 \FE0E "; }
[dir="rtl"] .nav .prev::before { content: "\25B6 \FE0E "; }
[dir="rtl"] .nav .next::before { content: "\25C0 \FE0E "; }

[dir="rtl"] [data-sym="prev"]::before { content: "\25B6 \FE0E "; }
[dir="rtl"] [data-sym="next"]::before { content: "\25C0 \FE0E "; }

.nav .here {
    padding-inline: 1rem;
    gap: 0.45em;
    min-width: 0;
    max-width: 100%;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.nav, .toolbar { max-width: 100%; min-width: 0; }

.chapter-panel { min-width: 0; max-width: 100%; }
 
.chapter-panel > summary { inline-size: 100%; list-style: none; }
.chapter-panel > summary::-webkit-details-marker { display: none; }

.here-caret {
    display: inline-block;
    flex: 0 0 auto;
    font-size: 0.9em;
}
 
.chapter-panel[open] > summary .here-caret { transform: none; }

.site-header, .thumbbar { position: relative; }

.chapter-panel-body {
    position: absolute;
    inset-inline: 0;
    inset-block-start: calc(100% + 0.4rem);
    z-index: 40;
    max-block-size: min(60vh, 26rem);
    overflow-y: auto;
    padding: 0.5rem;
    background: var(--bg-color);
    border: 1px solid var(--control-border);
    border-radius: var(--radius);
    box-shadow: 0 6px 20px var(--shadow);
    text-align: start;
}
 
.thumbbar .chapter-panel-body,
.nav-bottom .chapter-panel-body {
    inset-block-start: auto;
    inset-block-end: calc(100% + 0.4rem);
}
.chapter-panel-body .chapter-grid { padding: 0; }

.panel-home {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3em;
    min-block-size: var(--tap);
     
    padding: 0.3rem 0.9rem;
    border: 2px solid var(--accent);
    border-radius: var(--radius);
    background: var(--secondary);
    color: var(--text-color);
    font-family: var(--font-ui);
    text-decoration: none;
}
 
.panel-home [data-sym] {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}
.panel-home::before, .panel-home [data-sym]::before {
    font-size: var(--sym-size);
    line-height: 1;
}
.panel-home:hover { background: var(--accent); color: var(--bg-color); }
 
.chapter-panel-body .panel-home { margin-block-end: 0.4rem; }

.nav-top { gap: 0.3rem; }
.nav-top .btn-sym { padding-inline: 0.5rem; }

.btn-sym {
    line-height: 1;
    padding-inline: 0.75rem;
     
    font-family: var(--font-ui);
}

.btn-sym::before { font-size: var(--sym-size); }

[data-sym="notes"]::before {
    font-size: calc(var(--sym-size) * 1.2);
}

.btn-notes::before {
    display: block;
    border-block-end: 1px solid currentColor;
    padding-block-end: 0.08em;
    line-height: 0.85;
}

.btn[aria-pressed="false"]::after {
    content: "";
    position: absolute;
    inset: 24% 20%;
    background: linear-gradient(to bottom right,
        transparent calc(50% - 1px), currentColor calc(50% - 1px),
        currentColor calc(50% + 1px), transparent calc(50% + 1px));
    pointer-events: none;
}

.btn-sym::before,
[data-sym]::before,
.nav .prev::before,
.nav .next::before,
.toast-pill {
    direction: ltr;
    unicode-bidi: isolate;
     
    white-space: nowrap;
}

.btn[aria-pressed="false"] { border-style: dashed; opacity: 0.72; }

body.no-emoji .btn-theme::before {
    content: "" !important;
    display: block;
     
    inline-size: 1.45rem;
    block-size: 1.45rem;
    border-radius: 3px;
    border: 1px solid var(--rule-color);
    background:
        linear-gradient(135deg,
            var(--primary) 0 50%, var(--accent) 50% 100%);
    box-shadow: inset 0 -0.45rem 0 0 var(--link-color);
}

.btn-theme::before, [data-sym="theme"]::before { content: "\1F3A8 " }    
.btn-font::before, [data-sym="font"]::before { content: "\41 \2195 \FE0E " }    
[data-sym="notes"]::before { content: "\2020 " }    
[data-sym="prev"]::before { content: "\25C0 \FE0E " }    
[data-sym="next"]::before { content: "\25B6 \FE0E " }    
[data-sym="zip"]::before { content: "\1F5DC \FE0F " }    
[data-sym="download"]::before { content: "\2B07 \FE0E " }    
[data-sym="books"]::before { content: "\25A6 " }    
[data-sym="home"]::before { content: "\1F3E0 " }    
[data-sym="expand"]::before { content: "\25B8 " }    
[data-sym="empty"]::before { content: "\2014 " }    
[data-sym="epub"]::before { content: "\1F4D6 " }    
[data-sym="mobi"]::before { content: "\1F4D5 " }    
[data-sym="pdf"]::before { content: "\1F4C4 " }    
[data-sym="audio"]::before { content: "\1F509 " }    
[data-sym="app"]::before { content: "\1F4F1 " }    
[data-sym="web"]::before { content: "\1F310 " }    
[data-sym="more"]::before { content: "\22EF " }    
[data-sym="info"]::before { content: "\2139 \FE0E " }    
[data-sym="on"]::before { content: "\2713 " }    
[data-sym="off"]::before { content: "\2717 " }    

body.no-emoji [data-sym="zip"]::before { content: "\2913 " }    
body.no-emoji [data-sym="home"]::before { content: "\2302 " }    
body.no-emoji [data-sym="epub"]::before { content: "\25A4 " }    
body.no-emoji [data-sym="mobi"]::before { content: "\25A4 " }    
body.no-emoji [data-sym="pdf"]::before { content: "\25A4 " }    
body.no-emoji [data-sym="audio"]::before { content: "\266A " }    
body.no-emoji [data-sym="app"]::before { content: "\25AF " }    
body.no-emoji [data-sym="web"]::before { content: "\2295 " }    

a { color: var(--link-color); }
a:hover { color: var(--accent); }

.toast {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    justify-content: center;
    align-items: center;
     
    pointer-events: none;
}

.toast-pill {
    max-inline-size: min(90vw, 22rem);
    padding: 0.6rem 1.25rem;
    border-radius: 999px;
    border: 3px solid var(--bg-color);
    background: var(--primary);
    color: var(--bg-color);
    box-shadow: 0 0 0 2px var(--text-color), 0 6px 24px var(--shadow);
    font-family: var(--font-ui);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
     
    transform: scale(0.8);
    transition: opacity 130ms ease-out,
                transform 260ms cubic-bezier(0.2, 1.5, 0.4, 1);
}
.toast[data-show="1"] .toast-pill { opacity: 1; transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
    .toast-pill { transition: none; transform: none; }
}

.ip, .im, .imi, .imq, .ipi, .ipq, .ipr, .iex, .intro, .ib, .idx, .ie {
    margin-block: 0 var(--para-gap);
    text-indent: var(--indent);
}
.io, .io1, .io2, .io3, .io4, .ili, .ili1, .ili2 {
    display: block;
    text-indent: 0;
    margin-block: 0.25em;
}
.io2, .ili2 { margin-inline-start: var(--poetry-step); }
.io3        { margin-inline-start: calc(var(--poetry-step) * 2); }
.io4        { margin-inline-start: calc(var(--poetry-step) * 3); }

.iq, .iq1, .iq2, .iq3 {
    text-indent: calc(var(--poetry-hang) * -1);
    padding-inline-start: var(--poetry-hang);
    margin-block: 0 0.15em;
}
.iq2 { margin-inline-start: var(--poetry-step); }
.iq3 { margin-inline-start: calc(var(--poetry-step) * 2); }

.is, .is1, .is2, .is3, .iot {
    font-weight: 600;
    color: var(--primary);
    text-indent: 0;
    margin-block: 1.4em 0.4em;
}

.glo { display: block; margin-block: var(--para-gap); }
.keyword, .keyword1, .keyword2, .keyword3 {
    display: block;
    font-weight: 600;
    text-indent: 0;
    margin-block: 0.6em 0.2em;
}

table { border-collapse: collapse; width: 100%; }
th, td { padding: 0.4em 0.6em; text-align: start; border-block-end: 1px solid var(--rule-color); }

.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.index-title {
    font-size: 1.5em;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    margin-block: 0.4em 0.2em;
}

.index-title [data-sym]::before {
    font-size: 1.6em;
    line-height: 1;
    white-space: nowrap;
}
.index-subtitle {
    text-align: center;
    color: var(--muted-color);
    font-size: 0.9em;
    margin-block: 0 1.75em;
}

.index-section-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    font-family: var(--font-ui);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted-color);
    margin-block: 2rem 0.85rem;
}
 
.index-section-title::before, .index-section-title::after {
    content: "";
    flex: 1 1 auto;
    block-size: 1px;
    background: var(--rule-color);
}
 
.index-section-title [data-sym]::before { font-size: 1.15rem; }

.book-grid {
    --book-min: 7.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(var(--book-min), 100%), 1fr));
    grid-auto-flow: row dense;
    gap: 0.4rem;
    margin-block-end: 1.5rem;
}

@media (min-width: 26rem) {
    .book-grid { --book-min: 9.5rem; }
}

.book {
    border: 1px solid var(--control-border);
    border-radius: var(--radius);
    background: var(--secondary);
    overflow: hidden;
}

.book > summary, .book-direct, .book.is-unavailable {
    display: flex;
    align-items: center;
    gap: 0.35em;
    min-block-size: var(--tap);
    padding: 0.5rem 0.55rem;
    font-size: 0.9rem;
    line-height: 1.3;
    color: var(--text-color);
    text-decoration: none;
}

.book > summary {
    cursor: pointer;
     
    list-style: none;
}
.book > summary::-webkit-details-marker { display: none; }
 
.book > summary::before { content: none; }
.book[open] > summary::before {
    content: "\25BE ";
    flex: 0 0 auto;
    color: var(--muted-color);
}

.book > summary:hover { background: var(--bg-color); }
.book[open] { background: var(--bg-color); }
 
.book[open] > summary:hover { background: var(--secondary); }
.book[open] > summary { border-block-end: 1px solid var(--rule-color); }

.book[open] { grid-column: 1 / -1; }

.book-name { flex: 1 1 auto; min-inline-size: 0; }
.book-direct:hover, .book > summary:hover .book-name { color: inherit; }

.book-number {
    flex: 0 0 auto;
    min-inline-size: 1.35em;
    font-family: var(--font-ui);
    font-size: 0.72em;
    font-variant-numeric: tabular-nums;
    text-align: end;
    color: var(--muted-color);
}

.chapter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(2.75rem, 100%), 1fr));
    gap: 0.3rem;
    padding: 0.6rem;
}

.chapter-grid a,
.chapter-grid .is-unavailable {
    display: flex;
    align-items: center;
    justify-content: center;
    min-block-size: var(--tap);
    padding: 0.2rem;
    border: 1px solid var(--rule-color);
    border-radius: var(--radius);
    background: var(--bg-color);
    color: var(--text-color);
    font-size: 0.9rem;
    text-decoration: none;
     
    unicode-bidi: isolate;
}
.chapter-grid a:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--bg-color);
}
.chapter-grid a[aria-current="true"] {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--bg-color);
    font-weight: 700;
}

.dl-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr));
    gap: 0.4rem;
    margin-block-end: 1.5rem;
}

.dl {
    display: flex;
    align-items: center;
    gap: 0.65em;
    min-block-size: var(--tap);
    padding: 0.55rem 0.85rem;
    border: 1px solid var(--control-border);
    border-radius: var(--radius);
    background: var(--secondary);
    color: var(--text-color);
    text-decoration: none;
    font-size: 0.9rem;
    line-height: 1.35;
}
.dl:hover { background: var(--primary); border-color: var(--primary); color: var(--bg-color); }

.dl-sym {
    flex: 0 0 2.25em;
    display: inline-flex;
    justify-content: center;
    font-family: var(--font-ui);
    font-size: 1.15em;
    line-height: 1;
}
 
.dl-text {
    flex: 1 1 auto;
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.dl-format {
    font-family: var(--font-ui);
    font-weight: 700;
    letter-spacing: 0.04em;
}
 
.dl-meta {
    display: block;
    font-family: var(--font-ui);
    font-size: 0.78em;
    font-variant-numeric: tabular-nums;
    color: var(--muted-color);
    direction: ltr;
    unicode-bidi: isolate;
    text-align: start;
}
.dl:hover .dl-meta { color: inherit; }

.dl-zip {
    grid-column: 1 / -1;
    border-color: var(--accent);
    border-width: 2px;
}
.dl-zip .dl-sym { font-size: 1.35em; }

body.no-emoji .dl-zip .dl-sym { font-size: 1.15em; }

.is-unavailable {
    cursor: default;
    opacity: 0.4;
    text-decoration: none;
     
    border-style: dashed !important;
}
 
.nav .is-unavailable, .book.is-unavailable { color: var(--muted-color); }

.nav .prev.is-unavailable,
.nav .next.is-unavailable,
.nav .here.is-unavailable,
.nav .home.is-unavailable {
    border-color: transparent !important;
    background: none;
    opacity: 0.32;
}
 
.xref.is-unavailable {
    opacity: 1;
    color: var(--muted-color);
    border: 0 !important;
}

.index-footnote {
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--muted-color);
    text-align: center;
    margin-block-start: 2rem;
}

:focus-visible {
    outline: var(--focus-ring) solid var(--accent);
    outline-offset: 2px;
    border-radius: 2px;
}

.skip-link {
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: -100%;
    z-index: 100;
    padding: 0.75rem 1rem;
    background: var(--primary);
    color: var(--bg-color);
    text-decoration: none;
}
.skip-link:focus { inset-block-start: 0; }
 
.skip-link:hover, .skip-link:focus {
    background: var(--accent);
    color: var(--bg-color);
}

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.v-target {
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    border-radius: 3px;
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .v-target { background: rgba(200, 150, 40, 0.22); }
}

@media (prefers-contrast: more) {
    body {
        --verse-color: var(--text-color) !important;
        --muted-color: var(--text-color) !important;
        --rule-color: var(--text-color) !important;
    }
}

@media print {
    :root { --measure: 100%; --leading: 1.45; }
    body { background: #fff; color: #000; font-size: 11pt; }
    .nav, .toolbar, .skip-link, .site-header, .site-footer,
    .toast { display: none !important; }
    .page { max-width: none; padding: 0; }
     
    .book, .book[open] { display: block; break-inside: avoid; }
    .book:not([open]) > *:not(summary) { display: block; }
    .book > summary { font-weight: 700; }
     
    .book > summary::before,
    .book[open] > summary::before { content: none; }
    .chapter-grid { display: block; padding: 0.2em 0 0.6em; }
    .chapter-grid a { display: inline-block; border: 0; padding: 0 0.4em; }
    .chapter { page-break-after: always; }
    .wj { color: #000; }
    .v { color: #555; }

.chapter-panel { display: none; }
     
    a { color: #000; }
    .nav a, .toolbar a, .dl { text-decoration: none; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #555; }
}