:root {
    --canvas: #f6f5f1;
    --surface: #fffefa;
    --sidebar: #fbfaf7;
    --line: #e5e2db;
    --line-strong: #d3d0c8;
    --ink: #201f1d;
    --muted: #605e58;
    --accent: #181818;
    --accent-strong: #121212;
    --accent-soft: #ebe9e3;
    --button-bg: #181818;
    --button-ink: #fffef5;
    --hover: #f0eee9;
    --gold: #775729;
    --gold-soft: #f3ecda;
    --target: #f8f0dc;
    --serif: Georgia, "Times New Roman", serif;
    --header-height: 4.5rem;
    --sidebar-width: 19.5rem;
    --bs-body-font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

:root[data-bs-theme="dark"] {
    --canvas: #121212;
    --surface: #1f1f1f;
    --sidebar: #191919;
    --line: #373737;
    --line-strong: #515151;
    --ink: #eeede9;
    --muted: #b8b7b1;
    --accent: #dedcd6;
    --accent-strong: #f2f1ee;
    --accent-soft: #303030;
    --button-bg: #efeee9;
    --button-ink: #171717;
    --hover: #292929;
    --gold: #dcc28b;
    --gold-soft: #3a3527;
    --target: #3b3626;
}

body {
    color: var(--ink);
    background: var(--canvas);
}

a {
    color: inherit;
    text-decoration: none;
}

[hidden] {
    display: none !important;
}

:is(a, button, summary, input):focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.ui-icon {
    width: 1.125rem;
    height: 1.125rem;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.skip-link {
    position: fixed;
    z-index: 5;
    inset: .7rem auto auto .7rem;
    padding: .55rem .85rem;
    transform: translateY(-200%);
    border-radius: .5rem;
    background: var(--button-bg);
    color: var(--button-ink);
}

.skip-link:focus {
    transform: translateY(0);
}

.site-header {
    position: sticky;
    z-index: 3;
    top: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}

.header-grid {
    display: grid;
    grid-template: "brand search actions" / calc(var(--sidebar-width) - 2.5rem) minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.25rem;
    min-height: var(--header-height);
    padding-inline: 1.625rem;
}

.brand {
    grid-area: brand;
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: .65rem;
    white-space: nowrap;
}

.brand-name {
    font: 700 1.62rem/1 var(--serif);
    letter-spacing: -.05em;
}

.search-form {
    position: relative;
    grid-area: search;
    display: flex;
    align-items: stretch;
    gap: .45rem;
    justify-self: center;
    width: min(100%, 39rem);
}

.search-dropdown {
    position: absolute;
    z-index: 1;
    inset: calc(100% + .4rem) 0 auto;
    max-height: min(25rem, 60dvh);
    overflow-y: auto;
    border: 1px solid var(--line-strong);
    border-radius: .55rem;
    background: var(--surface);
    box-shadow: 0 .5rem 1.5rem #0002;
}

.search-status {
    margin: 0;
    padding: .6rem .8rem;
    color: var(--muted);
    font-size: .8rem;
}

.search-matches {
    margin: 0;
    padding: 0;
    list-style: none;
}

.search-matches a {
    display: grid;
    gap: .18rem;
    padding: .55rem .8rem;
    border-top: 1px solid var(--line);
    font-size: .875rem;
}

.search-matches a:is(:hover, :focus-visible) {
    background: var(--hover);
    outline-offset: -3px;
}

.search-matches span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--muted);
}

.search-field {
    position: relative;
    flex: 1;
    min-width: 0;
}

.search-field > .ui-icon {
    position: absolute;
    inset: 50% auto auto .78rem;
    transform: translateY(-50%);
    color: var(--muted);
    pointer-events: none;
}

.search-field .form-control {
    min-height: 2.625rem;
    padding-inline-start: 2.4rem;
    border: 1px solid var(--line-strong);
    border-radius: .55rem;
    background: var(--canvas);
    color: var(--ink);
    font-size: .875rem;
}

.search-field .form-control::placeholder {
    color: var(--muted);
    opacity: 1;
}

.search-field .form-control:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 .18rem var(--accent-soft);
}

.header-actions {
    grid-area: actions;
    display: flex;
    align-items: center;
    gap: .45rem;
}

.theme-toggle,
.browse-toggle,
.search-button,
.chapter-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 2.5rem;
    padding-inline: .75rem;
    border: 1px solid var(--line-strong);
    border-radius: .55rem;
    background: var(--surface);
    color: var(--ink);
    font-size: .82rem;
    font-weight: 620;
    white-space: nowrap;
}

:is(.theme-toggle, .browse-toggle, .search-button, .chapter-button):is(:hover, :active, :focus-visible),
.browse-toggle[aria-expanded="true"] {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent-strong);
}

.theme-moon,
[data-bs-theme="dark"] .theme-sun {
    display: inline-flex;
}

.theme-sun,
[data-bs-theme="dark"] .theme-moon,
.browse-toggle {
    display: none;
}

.reader-shell {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    min-height: calc(100dvh - var(--header-height));
}

.reader-shell-full {
    grid-template-columns: minmax(0, 1fr);
}

.book-sidebar {
    position: sticky;
    top: calc(var(--header-height) + 1px);
    display: flex;
    flex-direction: column;
    align-self: start;
    height: calc(100dvh - var(--header-height) - 1px);
    border-inline-end: 1px solid var(--line);
    background: var(--sidebar);
}

.library-controls {
    padding: 1.55rem 1.25rem .7rem 1.375rem;
}

.library-title {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-block-end: 1.1rem;
}

.library-title > .ui-icon {
    color: var(--accent);
}

.library-title h2 {
    margin: 0;
    font-size: 1.045rem;
    font-weight: 720;
}

.testament-switch {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: .2rem;
    margin: 0 0 .85rem;
    padding: .22rem;
    border: 1px solid var(--line);
    border-radius: .625rem;
    background: var(--canvas);
}

.testament-switch span {
    display: block;
    padding: .42rem .2rem;
    border-radius: .42rem;
    color: var(--muted);
    font-size: .81rem;
    font-weight: 650;
    text-align: center;
    cursor: pointer;
}

.testament-switch input:checked + span {
    background: var(--accent-soft);
    color: var(--accent-strong);
}

.testament-switch input:focus-visible + span {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.book-filter .form-control {
    min-height: 2.4rem;
    background: var(--surface);
    font-size: .81rem;
}

.book-filter > .ui-icon {
    width: 1rem;
    height: 1rem;
}

.library-nav {
    flex: 1;
    min-height: 0;
    padding: 0 1rem 1.5rem 1.375rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
}

.testament-caption {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    margin-block: .7rem .5rem;
    padding-inline: .35rem;
    color: var(--muted);
    font-size: .73rem;
}

.testament-caption h3,
.chapter-grid-label,
.book-entry {
    border: 1px solid transparent;
    border-radius: .55rem;
}

.book-entry[open] {
    margin-block-end: .25rem;
    border-color: var(--line);
    background: var(--surface);
}

.book-summary {
    display: grid;
    grid-template-columns: 1rem minmax(0, 1fr) 1rem;
    align-items: center;
    gap: .55rem;
    min-height: 2.5rem;
    padding: .48rem .65rem;
    border-radius: .5rem;
    font-size: .84rem;
    font-weight: 540;
    list-style: none;
    cursor: pointer;
}

.book-summary::-webkit-details-marker {
    display: none;
}

.book-summary:hover {
    background: var(--hover);
}

.book-summary .ui-icon {
    width: 1rem;
    height: 1rem;
    color: var(--muted);
}

.book-entry[open] > .book-summary > .ui-icon:last-child {
    transform: rotate(90deg);
}

.book-entry.is-current > .book-summary {
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-weight: 700;
}

.book-entry.is-current > .book-summary .ui-icon {
    color: var(--accent);
}

.book-chapters {
    padding: .65rem .62rem .7rem;
}

.chapter-grid-label {
    margin-block-end: .45rem;
    padding-inline-start: .12rem;
    color: var(--muted);
    font-size: .62rem;
}

.chapter-grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: .27rem;
}

.chapter-grid a {
    display: grid;
    min-height: 1.75rem;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: .3rem;
    color: var(--muted);
    font-size: .73rem;
    font-weight: 610;
    font-variant-numeric: tabular-nums;
}

.chapter-grid a:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent-strong);
}

.chapter-grid a[aria-current="page"] {
    border-color: var(--button-bg);
    background: var(--button-bg);
    color: var(--button-ink);
}

.filter-empty {
    margin: .65rem .35rem;
    color: var(--muted);
    font-size: .84rem;
}

.reader-main {
    min-width: 0;
    padding: 1.5rem clamp(1.4rem, 3.6vw, 3.75rem) 0;
    scroll-margin-top: var(--header-height);
}

.reader-footer {
    padding-block: 50px;
}

.reader-content {
    max-width: 65rem;
    margin-inline: auto;
}

.breadcrumbs {
    margin-block-end: 1rem;
}

.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .32rem .6rem;
    margin: 0;
    padding: 0;
    color: var(--muted);
    font-size: .8rem;
    list-style: none;
}

.breadcrumbs li {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
}

.breadcrumbs li + li::before {
    content: "";
    width: .36rem;
    height: .36rem;
    transform: rotate(45deg);
    border-top: 1px solid var(--muted);
    border-right: 1px solid var(--muted);
    opacity: .75;
}

.breadcrumbs a {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.breadcrumbs a:hover,
.back-link:hover {
    text-decoration: underline;
    text-underline-offset: .18em;
}

.breadcrumbs [aria-current] {
    color: var(--ink);
    font-weight: 660;
}

.search-heading h1,
.empty-state h1,
.empty-state h2 {
    margin-block: .6rem .58rem;
    font: 400 clamp(2.3rem, 4.2vw, 3.65rem)/1.06 var(--serif);
    letter-spacing: -.045em;
    text-wrap: balance;
}

.chapter-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    min-height: 4.25rem;
}

.chapter-toolbar p,
.search-pagination span {
    margin: 0;
    color: var(--muted);
    font-size: .83rem;
}

.chapter-toolbar strong {
    color: var(--ink);
}

.chapter-navigation {
    display: flex;
    align-items: center;
    gap: .45rem;
}

.chapter-navigation > :last-child > .ui-icon {
    order: 1;
}

.chapter-button .ui-icon {
    width: 1rem;
    height: 1rem;
}

.chapter-button.is-disabled {
    border-color: var(--line);
    background: var(--canvas);
    color: var(--muted);
    opacity: .6;
    pointer-events: none;
}

.chapter-end {
    display: flex;
    justify-content: flex-end;
    margin-block: 1rem 0;
}

.reading-paper,
.result-list,
.empty-state {
    border: 1px solid var(--line);
    border-radius: .85rem;
    background: var(--surface);
}

.reading-paper {
    padding: 1.4rem clamp(1rem, 3.9vw, 3.1rem) 1.25rem;
}

.verse-list {
    max-width: 52rem;
    margin: 0 auto;
    padding: .38rem 0 0;
    list-style: none;
}

.verse-list li {
    display: grid;
    grid-template-columns: 1.8rem minmax(0, 1fr);
    align-items: baseline;
    gap: .8rem;
    padding: .62rem .3rem;
    font: 400 clamp(1.12rem, 1.75vw, 1.29rem)/1.72 var(--serif);
    overflow-wrap: anywhere;
    scroll-margin-top: calc(var(--header-height) + 1.25rem);
}

.verse-list li + li {
    border-top: 1px solid var(--line);
}

.verse-list li:target {
    border-radius: .32rem;
    background: var(--target);
    box-shadow: inset 3px 0 var(--gold);
}

.verse-number {
    padding: .12rem .1rem;
    color: var(--gold);
    font: 720 .76rem/1.4 var(--bs-body-font-family);
    text-align: center;
}

.verse-number:hover {
    text-decoration: underline;
}

.paper-empty {
    margin: 1rem 0;
    color: var(--muted);
}

.search-heading {
    padding-block: .5rem 1.5rem;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    color: var(--accent);
    font-size: .85rem;
    font-weight: 670;
}

.search-heading h1 {
    margin-block-start: .8rem;
    font-size: clamp(2.2rem, 4vw, 3.2rem);
}

.search-heading p {
    margin: 0;
    color: var(--muted);
    overflow-wrap: anywhere;
}

.search-heading strong {
    color: var(--ink);
}

.result-section + .result-section {
    margin-block-start: 1.5rem;
}

.result-section h2 {
    margin: 0 0 .6rem;
    color: var(--accent);
    font-size: .82rem;
    font-weight: 730;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.result-list {
    margin: 0;
    padding: .22rem;
    list-style: none;
}

.result-list li + li {
    border-top: 1px solid var(--line);
}

.result-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .85rem clamp(.75rem, 3vw, 1.45rem);
    border-radius: .6rem;
}

.result-item:hover {
    background: var(--hover);
}

.result-title,
.result-item .ui-icon {
    color: var(--accent);
}

.result-title {
    font-weight: 700;
}

.result-meta {
    display: block;
    color: var(--muted);
    font-size: .8rem;
}

.result-item p {
    margin: .25rem 0 0;
    font: 400 1.12rem/1.6 var(--serif);
    overflow-wrap: anywhere;
}

.result-item mark {
    padding: 0 .06em;
    border-radius: .12rem;
    background: var(--gold-soft);
    color: var(--ink);
}

.empty-state {
    padding: clamp(1.35rem, 4vw, 2.5rem);
}

.empty-state h1,
.empty-state h2 {
    font-size: clamp(1.9rem, 3.5vw, 2.65rem);
}

.empty-state p {
    max-width: 42rem;
    margin: 0;
    color: var(--muted);
}

.empty-state .chapter-button {
    margin-block-start: 1rem;
}

.state-icon {
    display: grid;
    width: 2.6rem;
    height: 2.6rem;
    place-items: center;
    border-radius: .55rem;
    background: var(--accent-soft);
    color: var(--accent);
}

.search-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    margin-block-start: 1rem;
}

@media (max-width: 991.98px) {
    .header-grid {
        grid-template-columns: auto minmax(0, 1fr) auto;
        padding-inline: 1.125rem;
    }

    .js .browse-toggle {
        display: inline-flex;
    }

    .theme-label,
    .js .book-sidebar:not(.is-open) {
        display: none;
    }

    .reader-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    .book-sidebar {
        position: static;
        height: min(32rem, 62dvh);
        border-inline-end: 0;
        border-block-end: 1px solid var(--line);
    }

    .library-controls,
    .library-nav {
        width: min(100%, 37rem);
        margin-inline: auto;
    }

    .chapter-grid a {
        min-height: 2.15rem;
    }
}

@media (max-width: 640px) {
    :root {
        --header-height: 7rem;
    }

    .header-grid {
        grid-template: "brand actions" "search search" / minmax(0, 1fr) auto;
        gap: .55rem;
        padding: .7rem .9rem;
    }

    .brand-name {
        font-size: 1.5rem;
    }

    .search-form {
        width: 100%;
    }

    .reader-main {
        padding: 1rem .9rem 0;
    }

    .breadcrumbs {
        margin-block-end: .8rem;
    }

    .chapter-toolbar {
        min-height: 3.8rem;
    }

    .chapter-navigation .chapter-button {
        padding-inline: .48rem;
        gap: .25rem;
        font-size: .75rem;
    }

    .reading-paper {
        padding: 1rem .8rem .9rem;
    }

    .verse-list li {
        grid-template-columns: 1.35rem minmax(0, 1fr);
        gap: .45rem;
        padding: .55rem .1rem;
    }
}