/* ============================================
   ARTICLES ANNOTATION PANEL  (ap-)
   articles.njk — hover/tap [data-span] → panel
   Desktop (≥1200px): fixed right sidebar slides in
   Mobile/tablet (<1200px): bottom drawer slides up
   ============================================

   Z-index:
     Panel   1200  (above FAB ≈1001, header 1000;
                    below TOC 1600, mobile menu 1800)
     Backdrop 1199
   ============================================ */

/* ── Span interactive indicator ──────────────────────────────── */

[data-span] {
    cursor: pointer;
    border-radius: 2px;
    transition: background-color 0.15s ease, outline-color 0.15s ease;
    /* Slightly warmer underline to hint interactivity */
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-color: rgba(196, 148, 58, 0.35);
    text-underline-offset: 2px;
}

[data-span]:hover {
    background-color: rgba(196, 148, 58, 0.25);
    text-decoration-color: rgba(196, 148, 58, 0.7);
}

[data-span].ap-active {
    background-color: rgba(196, 148, 58, 0.22);
    outline: 1px solid rgba(196, 148, 58, 0.4);
    outline-offset: 1px;
    text-decoration-color: transparent;
}

[data-span]:focus-visible {
    outline: 2px solid var(--gold-primary, #C4943A);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Named-concept spans get a slightly stronger treatment */
[data-named="true"] {
    text-decoration-color: rgba(196, 148, 58, 0.55);
}

[data-named="true"]:hover,
[data-named="true"].ap-active {
    text-decoration-style: solid;
    text-decoration-color: var(--gold-primary, #C4943A);
}


/* ── Backdrop (mobile / tablet only) ─────────────────────────── */

.ap-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(26, 21, 16, 0.62);
    z-index: 1199;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
}

.ap-backdrop.ap-open {
    opacity: 1;
    pointer-events: auto;
}

@media (min-width: 1200px) {
    /* no backdrop needed when panel is a sidebar alongside content */
    .ap-backdrop {
        display: none;
    }
}


/* ── Panel ──────────────────────────────────────────────────────── */

.ap-panel {
    position: fixed;
    z-index: 1200;
    background: var(--brown-rich, #1F1012);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ── Desktop: right sidebar ─────────────────────────────────── */
@media (min-width: 1200px) {
    .ap-panel {
        top: 0;
        right: 0;
        width: 380px;
        height: 100vh;
        border-left: 1px solid rgba(196, 148, 58, 0.22);
        transform: translateX(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                    box-shadow 0.3s ease;
        box-shadow: none;
    }

    .ap-panel.ap-open {
        transform: translateX(0);
        box-shadow: -6px 0 32px rgba(0, 0, 0, 0.55),
                    -1px 0 0 rgba(196, 148, 58, 0.08);
    }
}

/* ── Mobile / tablet: bottom drawer ─────────────────────────── */
@media (max-width: 1199px) {
    .ap-panel {
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-height: 78vh;
        border-top: 1px solid rgba(196, 148, 58, 0.28);
        border-radius: 16px 16px 0 0;
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 -6px 32px rgba(0, 0, 0, 0.55);
    }

    .ap-panel.ap-open {
        transform: translateY(0);
    }
}


/* ── Panel header ────────────────────────────────────────────── */

.ap-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid rgba(196, 148, 58, 0.15);
    flex-shrink: 0;
    background: rgba(26, 21, 16, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Drag handle for mobile drawer */
@media (max-width: 1199px) {
    .ap-header {
        position: relative;
        padding-top: 1.375rem;
    }

    .ap-header::before {
        content: '';
        position: absolute;
        top: 0.55rem;
        left: 50%;
        transform: translateX(-50%);
        width: 34px;
        height: 4px;
        background: rgba(196, 148, 58, 0.32);
        border-radius: 2px;
    }
}

.ap-header-left {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    min-width: 0;
}

/* ── Close button ────────────────────────────────────────────── */

.ap-close {
    flex-shrink: 0;
    background: none;
    border: 1px solid rgba(196, 148, 58, 0.22);
    border-radius: var(--radius-sm, 4px);
    color: var(--cream-dark, #D4C8B0);
    padding: 0.3rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    line-height: 1;
}

.ap-close:hover {
    border-color: var(--gold-primary, #C4943A);
    color: var(--gold-primary, #C4943A);
    background: rgba(196, 148, 58, 0.08);
}

.ap-close:focus-visible {
    outline: 2px solid var(--gold-primary, #C4943A);
    outline-offset: 2px;
}


/* ── Type badges ──────────────────────────────────────────────── */

.ap-type-badge {
    display: inline-block;
    font-family: var(--font-sans, sans-serif);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.2rem 0.55rem;
    border-radius: 20px;
    white-space: nowrap;
    line-height: 1.5;
}

.ap-type-badge[data-type="direct"] {
    background: rgba(122, 48, 64, 0.28);
    color: #e0a0b0;
    border: 1px solid rgba(122, 48, 64, 0.45);
}

.ap-type-badge[data-type="concept"] {
    background: rgba(196, 148, 58, 0.18);
    color: var(--gold-light, #D4A84A);
    border: 1px solid rgba(196, 148, 58, 0.38);
}

.ap-type-badge[data-type="paraphrase"] {
    background: rgba(74, 107, 107, 0.22);
    color: var(--teal-light, #6A8B8B);
    border: 1px solid rgba(74, 107, 107, 0.38);
}

.ap-type-badge[data-type="xref"] {
    background: rgba(139, 90, 90, 0.2);
    color: var(--burgundy-light, #8B5A5A);
    border: 1px solid rgba(139, 90, 90, 0.32);
}

.ap-type-badge:empty {
    display: none;
}

/* Named-concept indicator */
.ap-named-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--gold-primary, #C4943A);
    border: 1px solid rgba(196, 148, 58, 0.32);
    border-radius: 20px;
    padding: 0.2rem 0.5rem;
    white-space: nowrap;
}

/* Article label (e.g. "Article 8: Of Fellow Believers") */
.ap-article-label {
    font-size: 0.7rem;
    color: var(--cream, #E8DCC4);
    opacity: 0.45;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}


/* ── Scrollable body ──────────────────────────────────────────── */

.ap-body {
    overflow-y: auto;
    flex: 1;
    padding: 1.25rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(196, 148, 58, 0.28) transparent;
}

.ap-body::-webkit-scrollbar {
    width: 4px;
}

.ap-body::-webkit-scrollbar-track {
    background: transparent;
}

.ap-body::-webkit-scrollbar-thumb {
    background: rgba(196, 148, 58, 0.28);
    border-radius: 2px;
}


/* ── Span text (quoted excerpt) ──────────────────────────────── */

.ap-span-text {
    font-family: var(--font-serif, Georgia, serif);
    font-style: italic;
    font-size: 0.975rem;
    color: var(--cream-soft, #F5EFE4);
    line-height: 1.65;
    padding: 0.875rem 1rem;
    background: rgba(196, 148, 58, 0.07);
    border-left: 3px solid var(--gold-primary, #C4943A);
    border-radius: 0 var(--radius-sm, 4px) var(--radius-sm, 4px) 0;
    margin-bottom: 1.25rem;
}


/* ── Section headings ────────────────────────────────────────── */

.ap-section-title {
    font-family: var(--font-sans, sans-serif);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--cream-dark, #D4C8B0);
    opacity: 0.55;
    margin: 0 0 0.5rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid rgba(196, 148, 58, 0.1);
    line-height: 1.4;
}

.ap-section-title--biblical {
    color: var(--gold-light, #D4A84A);
    opacity: 0.82;
}

.ap-section-title--restoration {
    color: var(--teal-light, #6A8B8B);
    opacity: 0.82;
}


/* ── Definition block ────────────────────────────────────────── */

.ap-definition-block {
    margin-bottom: 1.25rem;
}

.ap-definition {
    font-size: 0.925rem;
    line-height: 1.72;
    color: var(--cream, #E8DCC4);
    margin: 0;
    padding: 0.75rem 1rem;
    background: rgba(196, 148, 58, 0.06);
    border: 1px solid rgba(196, 148, 58, 0.15);
    border-radius: var(--radius-sm, 4px);
}


/* ── Commentary block ────────────────────────────────────────── */

.ap-comment-block {
    margin-bottom: 1.25rem;
}

.ap-comment {
    font-size: 0.9rem;
    line-height: 1.78;
    color: var(--cream, #E8DCC4);
    opacity: 0.88;
    margin: 0;
    white-space: pre-line;
}


/* ── Anchor tabs (Biblical / Restoration) ───────────────────── */

.ap-anchor-tabs-block {
    margin-bottom: 1.25rem;
}

.ap-anchor-tab-bar {
    display: flex;
    gap: 0;
    margin-bottom: 0;
    border-bottom: 1px solid rgba(196, 148, 58, 0.2);
}

.ap-anchor-tab {
    flex: 1;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;    /* overlaps the tab-bar border-bottom */
    padding: 0.55rem 0.75rem;
    font-family: var(--font-sans, sans-serif);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cream-dark, #D4C8B0);
    opacity: 0.5;
    cursor: pointer;
    transition: color 0.15s, opacity 0.15s, border-color 0.15s;
    text-align: center;
    line-height: 1.4;
}

.ap-anchor-tab:hover {
    opacity: 0.8;
    color: var(--cream, #E8DCC4);
}

.ap-anchor-tab--active {
    color: var(--gold-primary, #C4943A);
    border-bottom-color: var(--gold-primary, #C4943A);
    opacity: 1;
}

.ap-anchor-tab:focus-visible {
    outline: 2px solid var(--gold-primary, #C4943A);
    outline-offset: 2px;
}

.ap-anchor-pane {
    padding-top: 0.875rem;
}

.ap-anchor-pane-empty {
    font-style: italic;
    font-size: 0.825rem;
    color: var(--cream, #E8DCC4);
    opacity: 0.3;
    text-align: center;
    padding: 1rem 0;
    margin: 0;
}


/* ── Anchor lists (biblical / restoration) ───────────────────── */

.ap-anchors-block {
    margin-bottom: 1.25rem;
}

.ap-anchor-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.ap-anchor-item {
    background: rgba(31, 16, 18, 0.7);
    border: 1px solid rgba(196, 148, 58, 0.11);
    border-radius: var(--radius-sm, 4px);
    padding: 0.75rem 0.875rem;
    transition: border-color 0.15s;
}

.ap-anchor-item:hover {
    border-color: rgba(196, 148, 58, 0.25);
}

.ap-anchor-ref {
    font-family: var(--font-serif, Georgia, serif);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gold-primary, #C4943A);
    margin-bottom: 0.3rem;
    line-height: 1.3;
}

.ap-anchor-text {
    font-size: 0.825rem;
    line-height: 1.6;
    color: var(--cream, #E8DCC4);
    opacity: 0.82;
    font-style: italic;
    margin: 0 0 0.3rem;
}

.ap-anchor-comment {
    font-size: 0.78rem;
    line-height: 1.55;
    color: var(--cream-dark, #D4C8B0);
    opacity: 0.65;
    margin: 0;
}

/* Restoration anchors: teal accent on ref */
.ap-restoration-ref .ap-anchor-ref {
    color: var(--teal-light, #6A8B8B);
}


/* ── Cross-reference list ────────────────────────────────────── */

.ap-crossref-block {
    margin-bottom: 0.75rem;
}

.ap-crossref-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.ap-crossref-link {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    font-size: 0.875rem;
    color: var(--gold-primary, #C4943A);
    text-decoration: none;
    padding: 0.5rem 0.75rem;
    border: 1px solid rgba(196, 148, 58, 0.18);
    border-radius: var(--radius-sm, 4px);
    transition: background 0.15s, border-color 0.15s;
    line-height: 1.4;
}

.ap-crossref-link:hover {
    background: rgba(196, 148, 58, 0.07);
    border-color: rgba(196, 148, 58, 0.38);
}

.ap-crossref-label {
    font-size: 0.68rem;
    color: var(--cream, #E8DCC4);
    opacity: 0.45;
    white-space: nowrap;
    flex-shrink: 0;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.ap-crossref-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ── Empty / no-data states ──────────────────────────────────── */

.ap-hidden {
    display: none !important;
}

.ap-empty-note {
    font-style: italic;
    font-size: 0.875rem;
    color: var(--cream, #E8DCC4);
    opacity: 0.38;
    text-align: center;
    padding: 1.5rem 1rem;
    margin: 0;
}


/* ── Section spacing ─────────────────────────────────────────── */

.ap-body > *:last-child {
    margin-bottom: 0;
}


/* ── Reduced motion ──────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .ap-panel,
    .ap-backdrop,
    [data-span] {
        transition-duration: 0.01ms !important;
    }
}


/* ══════════════════════════════════════════════════════════════
   ARTICLES NAVIGATION DRAWER  (an-)
   Fixed-left slide-in panel: tab trigger → 13-article nav list
   Fixed position: does not scroll with page content.
   Z-index: 1100 (below ap-backdrop 1199 / ap-panel 1200)
   Width: 260px
   ══════════════════════════════════════════════════════════════ */

/* ── Tab trigger ─────────────────────────────────────────────── */

.an-tab {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1101;

    background: rgba(196, 148, 58, 0.1);
    border: 1px solid rgba(196, 148, 58, 0.48);
    border-left: none;
    border-radius: 0 5px 5px 0;

    padding: 1.2rem 0.48rem;
    cursor: pointer;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;

    /* Left position transitions with drawer */
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                background 0.18s, border-color 0.18s;

    outline: none;
    user-select: none;
}

.an-tab:hover {
    background: rgba(196, 148, 58, 0.18);
    border-color: var(--gold-primary, #C4943A);
}

.an-tab:focus-visible {
    outline: 2px solid var(--gold-primary, #C4943A);
    outline-offset: 2px;
}

/* When drawer is open, tab slides to right edge of drawer */
.an-tab.an-is-open {
    left: 260px;
}

.an-tab-label {
    writing-mode: vertical-rl;
    transform: rotate(180deg); /* bottom-to-top reading direction */

    color: var(--gold-primary, #C4943A);
    font-family: var(--font-sans, sans-serif);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;

    transition: color 0.18s;
}

.an-tab:hover .an-tab-label,
.an-tab.an-is-open .an-tab-label {
    color: var(--gold-primary, #C4943A);
}

.an-tab-chevron {
    color: rgba(196, 148, 58, 0.5);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.18s;
    flex-shrink: 0;
    display: block;
}

.an-tab:hover .an-tab-chevron {
    color: rgba(196, 148, 58, 0.8);
}

.an-tab.an-is-open .an-tab-chevron {
    transform: rotate(180deg);
    color: var(--gold-primary, #C4943A);
}


/* ── Drawer panel ────────────────────────────────────────────── */

.an-drawer {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: 260px;
    z-index: 1100;

    background: var(--brown-rich, #1F1012);
    border-right: 1px solid rgba(196, 148, 58, 0.2);

    display: flex;
    flex-direction: column;
    overflow: hidden;
    pointer-events: none;

    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s ease;
    box-shadow: none;
}

.an-drawer.an-open {
    transform: translateX(0);
    box-shadow: 6px 0 28px rgba(0, 0, 0, 0.6),
                1px 0 0 rgba(196, 148, 58, 0.06);
    pointer-events: auto;
}


/* ── Drawer header ───────────────────────────────────────────── */

.an-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid rgba(196, 148, 58, 0.15);
    flex-shrink: 0;
    background: rgba(26, 21, 16, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.an-drawer-title {
    font-family: var(--font-sans, sans-serif);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold-primary, #C4943A);
}

.an-drawer-close {
    background: none;
    border: 1px solid rgba(196, 148, 58, 0.2);
    border-radius: var(--radius-sm, 4px);
    color: var(--cream-dark, #D4C8B0);
    padding: 0.28rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    line-height: 1;
}

.an-drawer-close:hover {
    border-color: var(--gold-primary, #C4943A);
    color: var(--gold-primary, #C4943A);
    background: rgba(196, 148, 58, 0.07);
}

.an-drawer-close:focus-visible {
    outline: 2px solid var(--gold-primary, #C4943A);
    outline-offset: 2px;
}


/* ── Nav list ────────────────────────────────────────────────── */

.an-drawer-nav {
    overflow-y: auto;
    flex: 1;
    padding: 0.5rem 0 1rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(196, 148, 58, 0.2) transparent;
}

.an-drawer-nav::-webkit-scrollbar { width: 4px; }
.an-drawer-nav::-webkit-scrollbar-track { background: transparent; }
.an-drawer-nav::-webkit-scrollbar-thumb {
    background: rgba(196, 148, 58, 0.2);
    border-radius: 2px;
}

.an-drawer-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.an-link {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    padding: 0.58rem 1rem;
    color: var(--cream, #E8DCC4);
    text-decoration: none;
    font-family: var(--font-serif, Georgia, serif);
    font-size: 0.88rem;
    line-height: 1.4;
    opacity: 0.7;
    border-left: 2px solid transparent;
    transition: background 0.15s, opacity 0.15s, color 0.15s, border-color 0.15s;
}

.an-link:hover {
    background: rgba(196, 148, 58, 0.07);
    opacity: 1;
    color: var(--cream-soft, #F5EFE4);
    border-left-color: rgba(196, 148, 58, 0.32);
}

.an-link.an-active {
    opacity: 1;
    color: var(--gold-primary, #C4943A);
    border-left-color: var(--gold-primary, #C4943A);
    background: rgba(196, 148, 58, 0.08);
}

.an-num {
    font-family: var(--font-sans, sans-serif);
    font-size: 0.63rem;
    font-weight: 700;
    color: var(--gold-primary, #C4943A);
    opacity: 0.5;
    min-width: 1.4rem;
    text-align: right;
    flex-shrink: 0;
    transition: opacity 0.15s;
}

.an-link:hover .an-num,
.an-link.an-active .an-num {
    opacity: 1;
}

/* PDF file icon for the "Take a Copy" edition links (inherits .an-num color) */
.an-num--pdf {
    align-self: center;
    display: inline-flex;
    justify-content: flex-end;
}
.an-num--pdf svg {
    width: 0.95rem;
    height: 0.95rem;
    display: block;
}


/* ── Scroll offset for fixed header ──────────────────────────── */

/* chapter.css sets scroll-margin-top: 100px; articles-panel.css loads after
   it and overrides to 130px — clears the ~102px fixed header with ~28px
   of breathing room so the article title appears just below the header. */
.article-section {
    scroll-margin-top: 130px;

    /* Each article is a self-contained "packet": thin gold border,
       padding, and clear separation from its neighbors. The inter-article
       divider lines are removed (see .articles-divider rule below). */
    border: 1px solid rgba(196, 148, 58, 0.4);
    border-radius: 10px;
    padding: 1.5rem clamp(1.25rem, 4vw, 2.25rem) 1.75rem;
    margin: 0 0 2.5rem;
}

.article-section:first-of-type {
    margin-top: 1rem;
}

/* ── Alternating packet fills ────────────────────────────────
   Pure visual rhythm: every other article carries a subtly
   different warm-dark tint so boundaries are obvious when
   scrolling. No thematic grouping is implied. Same gold border
   on every packet. Palette draws from /volume-1/'s
   .content-section / .content-section.alt pair, softened so
   the page background breathes through.
   ─────────────────────────────────────────────────────────── */

.article-section:nth-of-type(odd) {
    background: rgba(45, 26, 28, 0.55);
}

.article-section:nth-of-type(even) {
    background: rgb(31, 16, 18);
}

/* Remove the thin gold rule between article packets — spacing is now
   carried by each packet's margin. The closing divider before the
   John 17 prayer is preserved. */
.articles-divider:not(.articles-divider-closing) {
    display: none;
}


/* ── Reduced motion (nav drawer) ─────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .an-tab,
    .an-drawer {
        transition-duration: 0.01ms !important;
    }
}


/* ── Per-Article Read Aloud Button ───────────────────────────── */

.article-read-aloud-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    padding: 0.28rem 0.75rem;
    background: rgba(196, 148, 58, 0.06);
    border: 1px solid rgba(196, 148, 58, 0.2);
    border-radius: 20px;
    color: rgba(196, 148, 58, 0.7);
    font-family: var(--font-sans, sans-serif);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease,
                box-shadow 0.18s ease;
    margin-bottom: 0.9rem;
    line-height: 1;
}

.article-read-aloud-btn svg {
    flex-shrink: 0;
    opacity: 0.7;
    transition: opacity 0.18s ease;
}

.article-read-aloud-btn:hover {
    background: rgba(196, 148, 58, 0.13);
    border-color: rgba(196, 148, 58, 0.42);
    color: var(--gold-primary, #C4943A);
}

.article-read-aloud-btn:hover svg {
    opacity: 1;
}

.article-read-aloud-btn:active {
    transform: scale(0.97);
}

.article-read-aloud-btn.active {
    background: rgba(196, 148, 58, 0.13);
    border-color: var(--gold-primary, #C4943A);
    color: var(--gold-primary, #C4943A);
    animation: articleBtnPulse 2.8s ease-in-out infinite;
}

.article-read-aloud-btn.active svg {
    opacity: 1;
}

@keyframes articleBtnPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(196, 148, 58, 0.18); }
    50%       { box-shadow: 0 0 0 5px rgba(196, 148, 58, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .article-read-aloud-btn {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }
}


/* ── RJW Reflection Block ──────────────────────────────────── */

.article-rjw {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(196, 148, 58, 0.1);
}

.rjw-prompt {
    font-family: var(--font-serif, Georgia, serif);
    font-style: italic;
    font-size: 0.95rem;
    line-height: 1.72;
    color: var(--cream, #E8DCC4);
    opacity: 0.72;
    margin: 0 0 0.7rem;
}

.rjw-textarea {
    width: 100%;
    min-height: 78px;
    background: rgba(196, 148, 58, 0.04);
    border: 1px solid rgba(196, 148, 58, 0.14);
    border-radius: 4px;
    color: var(--cream, #E8DCC4);
    font-family: var(--font-serif, Georgia, serif);
    font-size: 0.875rem;
    line-height: 1.65;
    padding: 0.6rem 0.8rem;
    resize: vertical;
    box-sizing: border-box;
    transition: border-color 0.18s ease, background 0.18s ease;
}

.rjw-textarea::placeholder {
    color: rgba(232, 220, 196, 0.28);
    font-style: italic;
}

.rjw-textarea:focus {
    outline: none;
    border-color: rgba(196, 148, 58, 0.32);
    background: rgba(196, 148, 58, 0.07);
}

/* RJW save status / sign-in nudge */
.rjw-status {
    margin: 0.4rem 0 0; min-height: 1em;
    font-family: var(--font-sans, sans-serif);
    font-size: 0.72rem; letter-spacing: 0.02em;
    color: var(--cream, #E8DCC4); opacity: 0.55;
    transition: opacity 0.2s ease, color 0.2s ease;
}
.rjw-status:empty { opacity: 0; }
.rjw-status--saving { opacity: 0.45; font-style: italic; }
.rjw-status--synced { color: var(--gold-primary, #C4943A); opacity: 0.85; }
.rjw-status--local, .rjw-status--error { color: var(--cream-dark, #D4C8B0); opacity: 0.7; }
.rjw-signin-link {
    background: none; border: none; padding: 0; font: inherit;
    color: var(--gold-primary, #C4943A);
    text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.rjw-signin-link:hover { color: var(--gold-light, #D4A84A); }


/* ── Companion Essay Footnote (gold callout box) ─────────────── */

.article-footnote {
    margin-top: 1.5rem;
    padding: 0.7rem 1rem;
    background: rgba(196, 148, 58, 0.05);
    border: 1px solid rgba(196, 148, 58, 0.45);
    border-radius: 8px;
    font-family: var(--font-serif, Georgia, serif);
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--cream-dark, #D4C8B0);
    transition: border-color 0.18s ease, background 0.18s ease;
}

.article-footnote:hover {
    border-color: var(--gold-primary, #C4943A);
    background: rgba(196, 148, 58, 0.08);
}

.article-footnote .article-companion-link {
    color: var(--gold-primary, #C4943A);
    text-decoration: none;
    border-bottom: 1px solid rgba(196, 148, 58, 0.4);
    transition: border-color 0.15s ease;
}

.article-footnote .article-companion-link:hover {
    border-bottom-color: var(--gold-primary, #C4943A);
}


/* ── Numbered Article Headings (match nav drawer) ────────────── */

.chapter-content {
    counter-reset: article-counter;
}

.article-title {
    counter-increment: article-counter;
}

.article-title::before {
    content: counter(article-counter);
    font-family: var(--font-sans, sans-serif);
    font-size: 0.5em;
    font-weight: 700;
    color: var(--gold-primary, #C4943A);
    opacity: 0.6;
    margin-right: 0.6rem;
    vertical-align: 0.35em;
}


/* ── Companion Essays in nav drawer ──────────────────────────── */

.an-companions {
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(196, 148, 58, 0.15);
}

.an-companions-heading {
    font-family: var(--font-sans, sans-serif);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold-primary, #C4943A);
    opacity: 0.7;
    margin: 0 0 0.35rem;
    padding: 0 1rem;
}

.an-companion-link {
    font-style: italic;
}

.an-companion-link .an-num {
    font-size: 0.95rem;
    opacity: 0.6;
}


/* ═════════════════════════════════════════════════════
   GOLD CONTENTS TAB + DRAWER  (Option C — June 2026)
   Tab: solid gold fill, dark text, larger "Click for Contents:
   13 Articles" label, clearer chevron. Drawer: gold fill matching
   the tab (the tab reads as the drawer's lip), with all inner
   text / links / dividers re-darkened for contrast on gold.
   Overrides the an- rules above by source order.
   ═════════════════════════════════════════════════════ */

/* Tab — solid gold, dark text, larger */
.an-tab {
    background: var(--gold-primary, #C4943A);
    border-color: #8a6722;
    padding: 1.2rem 0.85rem;
}
.an-tab:hover {
    background: var(--gold-light, #D4A84A);
    border-color: #8a6722;
}
.an-tab-label {
    color: var(--brown-rich, #1F1012);
    font-size: 0.82rem;
    letter-spacing: 0.1em;
}
.an-tab:hover .an-tab-label,
.an-tab.an-is-open .an-tab-label {
    color: var(--brown-rich, #1F1012);
}
.an-tab-chevron { color: rgba(31, 16, 18, 0.75); }
.an-tab:hover .an-tab-chevron,
.an-tab.an-is-open .an-tab-chevron { color: var(--brown-rich, #1F1012); }

/* Drawer — gold fill to match the tab */
.an-drawer {
    background: var(--gold-primary, #C4943A);
    border-right-color: rgba(31, 16, 18, 0.32);
}
.an-drawer-header {
    background: transparent;
    border-bottom-color: rgba(31, 16, 18, 0.22);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.an-drawer-title { color: var(--brown-rich, #1F1012); }
.an-drawer-close {
    color: var(--brown-rich, #1F1012);
    border-color: rgba(31, 16, 18, 0.3);
}
.an-drawer-close:hover {
    color: var(--brown-rich, #1F1012);
    border-color: var(--brown-rich, #1F1012);
    background: rgba(31, 16, 18, 0.08);
}
.an-drawer-nav { scrollbar-color: rgba(31, 16, 18, 0.35) transparent; }
.an-drawer-nav::-webkit-scrollbar-thumb { background: rgba(31, 16, 18, 0.35); }

/* Drawer links — dark on gold */
.an-link {
    color: var(--brown-rich, #1F1012);
    opacity: 0.82;
}
.an-link:hover {
    background: rgba(31, 16, 18, 0.10);
    color: var(--brown-rich, #1F1012);
    opacity: 1;
    border-left-color: rgba(31, 16, 18, 0.5);
}
.an-link.an-active {
    color: var(--brown-rich, #1F1012);
    opacity: 1;
    border-left-color: var(--brown-rich, #1F1012);
    background: rgba(31, 16, 18, 0.13);
    font-weight: 600;
}
.an-num { color: var(--brown-rich, #1F1012); opacity: 0.55; }

/* Companion essays section */
.an-companions { border-top-color: rgba(31, 16, 18, 0.22); }
.an-companions-heading { color: var(--brown-rich, #1F1012); opacity: 0.85; }

/* "Download the Articles" — a darker-gold band that sets the download
   editions apart from the rest of the gold drawer and gives a clear
   visual break between sections. Full-bleed fill; brown-rich text and
   PDF icons (currentColor) stay legible. */
.an-companions.an-downloads {
    background: #A87E32;                 /* darker shade of --gold-primary #C4943A */
    margin-top: 0.75rem;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
    border-top: 1px solid rgba(31, 16, 18, 0.32);
    border-bottom: 1px solid rgba(31, 16, 18, 0.32);
}


/* ============================================
   PATHWAYS BAND  (pw-)
   articles.njk — "how do you want to begin?" wayfinding band.
   Two labeled groups (Start with the whole / Go deep on one),
   two cards each. 2×2 on desktop, single column on mobile.
   ============================================ */

.pw-heading {
    text-align: center;
    font-family: 'Cinzel', serif;
    font-size: clamp(1.25rem, 3vw, 1.6rem);
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--gold-primary, #C4943A);
    margin: 8px 0 18px;
}

.pw-band {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    margin: 4px 0 16px;
    position: relative;
}

/* Thin gold rule dividing the two halves (hidden when stacked on mobile) */
.pw-band::before {
    content: '';
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 50%;
    width: 1px;
    transform: translateX(-50%);
    background: rgba(196, 148, 58, 0.4);
    pointer-events: none;
}

.pw-group {
    display: flex;
    flex-direction: column;
}

.pw-group-label {
    margin: 0 0 10px;
    min-height: 1.5em;
    text-align: center;
    font-family: 'Crimson Pro', Georgia, serif;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-primary, #C4943A);
}

.pw-cards {
    flex: 1;
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 12px;
}

.pw-card {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-content: center;
    column-gap: 13px;
    row-gap: 3px;
    width: 100%;
    text-align: left;
    background: rgba(196, 148, 58, 0.06);
    border: 1px solid rgba(196, 148, 58, 0.22);
    border-radius: 12px;
    padding: 15px 17px;
    color: var(--cream, #E8DCC4);
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease;
}

.pw-card:hover {
    background: rgba(196, 148, 58, 0.12);
    border-color: rgba(196, 148, 58, 0.5);
}

.pw-card:focus-visible {
    outline: 2px solid var(--gold-primary, #C4943A);
    outline-offset: 2px;
}

.pw-card-icon {
    grid-row: 1 / 3;
    align-self: center;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(196, 148, 58, 0.12);
    color: var(--gold-light, #D4A84A);
}

.pw-card-icon svg { width: 19px; height: 19px; }

.pw-card-title {
    font-family: 'Cinzel', serif;
    font-size: 1.02rem;
    line-height: 1.2;
    color: #fff;
}

.pw-card-desc {
    font-family: 'Crimson Pro', Georgia, serif;
    font-size: 0.92rem;
    line-height: 1.4;
    color: var(--cream, #E8DCC4);
    opacity: 0.82;
}

@media (max-width: 720px) {
    .pw-band {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .pw-band::before {
        display: none;
    }
    .pw-cards {
        display: flex;
        flex-direction: column;
    }
}


/* ============================================
   GO-DEEPER PANEL  (gd-)
   articles.njk — per-article inline disclosure injected by
   articles-godeeper.js, reading window.WOP_GODEEPER. Three tabs:
   Related chapters / Musical testimonies / Search this theme.
   Collapsed by default; "Go deeper" toggle expands the body.
   ============================================ */

.gd-block {
    margin-top: 24px;
    border-top: 1px solid rgba(196, 148, 58, 0.22);
    padding-top: 14px;
}

.gd-toggle {
    display: flex;
    align-items: center;
    gap: 13px;
    width: 100%;
    text-align: left;
    padding: 13px 16px;
    cursor: pointer;
    border: 1px solid rgba(196, 148, 58, 0.30);
    border-radius: 12px;
    background: rgba(196, 148, 58, 0.07);
    color: var(--gold-primary, #C4943A);
    font-family: inherit;
    transition: background 0.18s ease, border-color 0.18s ease;
}
.gd-toggle:hover {
    background: rgba(196, 148, 58, 0.13);
    border-color: rgba(196, 148, 58, 0.55);
}
.gd-toggle:focus-visible {
    outline: 2px solid var(--gold-primary, #C4943A);
    outline-offset: 3px;
}
.gd-toggle-icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(196, 148, 58, 0.14);
    color: var(--gold-light, #D4A84A);
}
.gd-toggle-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.gd-toggle-label {
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    line-height: 1.2;
    color: var(--gold-primary, #C4943A);
}
.gd-toggle-scent {
    font-family: 'Crimson Pro', Georgia, serif;
    font-size: 0.8rem;
    color: var(--cream, #E8DCC4);
    opacity: 0.7;
}
.gd-toggle-chevron {
    flex: 0 0 auto;
    margin-left: auto;
    color: var(--gold-light, #D4A84A);
    transition: transform 0.2s ease;
}
.gd-block.gd-open .gd-toggle-chevron { transform: rotate(180deg); }

.gd-body { margin-top: 12px; }

.gd-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border-bottom: 1px solid rgba(196, 148, 58, 0.22);
    margin-bottom: 14px;
}
.gd-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    padding: 7px 12px;
    cursor: pointer;
    color: var(--cream, #E8DCC4);
    opacity: 0.72;
    font-family: 'Crimson Pro', Georgia, serif;
    font-size: 0.92rem;
    transition: color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}
.gd-tab:hover { opacity: 1; color: var(--gold-light, #D4A84A); }
.gd-tab--active {
    opacity: 1;
    color: var(--gold-primary, #C4943A);
    border-bottom-color: var(--gold-primary, #C4943A);
}
.gd-tab:focus-visible { outline: 2px solid var(--gold-primary, #C4943A); outline-offset: 2px; }

.gd-pane.gd-hidden { display: none; }

.gd-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 13px;
}
.gd-item-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}
.gd-item-title {
    font-family: 'Cinzel', serif;
    font-size: 0.98rem;
    line-height: 1.25;
    color: var(--gold-primary, #C4943A);
}
.gd-item-num {
    color: var(--gold-light, #D4A84A);
    opacity: 0.7;
    font-weight: 600;
    margin-right: 8px;
}
.gd-item-link:hover .gd-item-title {
    color: var(--gold-light, #D4A84A);
    text-decoration: underline;
}
.gd-item-meta {
    font-family: 'Crimson Pro', Georgia, serif;
    font-size: 0.8rem;
    color: var(--cream, #E8DCC4);
    opacity: 0.7;
    margin-top: 1px;
}
.gd-item-desc {
    margin: 3px 0 0;
    font-family: 'Crimson Pro', Georgia, serif;
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--cream, #E8DCC4);
    opacity: 0.82;
}

.gd-item--music .gd-item-link { flex-direction: row; align-items: center; gap: 10px; }
.gd-music-icon {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(196, 148, 58, 0.12);
    color: var(--gold-light, #D4A84A);
}
.gd-music-body { display: flex; flex-direction: column; }
.gd-music-foot { margin: 14px 0 0; font-size: 0.85rem; }
.gd-music-foot a { color: var(--gold-primary, #C4943A); text-decoration: none; }
.gd-music-foot a:hover { color: var(--gold-light, #D4A84A); text-decoration: underline; }

.gd-search-lead {
    margin: 0 0 12px;
    font-family: 'Crimson Pro', Georgia, serif;
    font-size: 0.92rem;
    line-height: 1.4;
    color: var(--cream, #E8DCC4);
    opacity: 0.82;
}
.gd-search-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--gold-primary, #C4943A);
    font-family: 'Crimson Pro', Georgia, serif;
    font-size: 0.95rem;
    font-weight: 600;
    padding: 9px 16px;
    border: 1px solid rgba(196, 148, 58, 0.5);
    border-radius: 999px;
    background: rgba(196, 148, 58, 0.06);
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.gd-search-btn:hover {
    background: rgba(196, 148, 58, 0.14);
    border-color: var(--gold-light, #D4A84A);
    color: var(--gold-light, #D4A84A);
}
.gd-search-btn:focus-visible { outline: 2px solid var(--gold-primary, #C4943A); outline-offset: 2px; }
.gd-search-ext { margin-left: 2px; opacity: 0.85; }

.gd-empty {
    margin: 0;
    font-family: 'Crimson Pro', Georgia, serif;
    font-size: 0.9rem;
    font-style: italic;
    color: var(--cream, #E8DCC4);
    opacity: 0.6;
}

/* ============================================
   Keep the floating reader toolbar (.bottom-toolbar) clear of the
   Pathways band (.pw-band). The band only occupies the top of the page;
   while it is on-screen we stow the toolbar so its opaque pill never sits
   over the wayfinding tiles (which it otherwise does on phone widths at
   load, killing the Listen tile). Toggled by the IntersectionObserver in
   the articles.njk layout. Articles-only: .tb-stowed is never applied
   elsewhere.
   ============================================ */
.bottom-toolbar {
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}
.bottom-toolbar.tb-stowed {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%) translateY(12px);
}


/* ============================================
   OF COMMON GROUND  (ocg-)
   Contents drawer third section + two slide-out panels
   (same overlay pattern as the annotation panel above).
   Drawer entries are dark-on-gold to match the Option C
   gold drawer; panels are the oxblood page with gold accents.
   ============================================ */

/* ── Drawer section (below Companion Essays) ─────────────────── */

.an-commonground {
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(31, 16, 18, 0.22);  /* matches .an-companions divider on gold */
}

/* Section header reuses .an-companions-heading */

.an-ocg-btn {
    width: 100%;
    background: none;
    border: none;
    border-left: 2px solid transparent;
    text-align: left;
    cursor: pointer;
}

.an-ocg-btn .an-num {
    font-size: 0.8rem;
    opacity: 0.6;
}

.an-ocg-btn:hover .an-num {
    opacity: 1;
}

.an-ocg-btn:focus-visible {
    outline: 2px solid var(--brown-rich, #1F1012);
    outline-offset: -2px;
}


/* ── Backdrop (mobile / tablet only, mirrors .ap-backdrop) ───── */

.ocg-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(26, 21, 16, 0.62);
    z-index: 1199;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
}

.ocg-backdrop.ocg-open {
    opacity: 1;
    pointer-events: auto;
}

@media (min-width: 1200px) {
    .ocg-backdrop {
        display: none;
    }
}


/* ── Panel shell (mirrors .ap-panel) ─────────────────────────── */

.ocg-panel {
    position: fixed;
    z-index: 1200;
    background: var(--brown-rich, #1F1012);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    outline: none;
}

@media (min-width: 1200px) {
    .ocg-panel {
        top: 0;
        right: 0;
        width: 420px;
        height: 100vh;
        border-left: 1px solid rgba(196, 148, 58, 0.22);
        transform: translateX(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                    box-shadow 0.3s ease;
        box-shadow: none;
    }

    .ocg-panel.ocg-open {
        transform: translateX(0);
        box-shadow: -6px 0 32px rgba(0, 0, 0, 0.55),
                    -1px 0 0 rgba(196, 148, 58, 0.08);
    }
}

@media (max-width: 1199px) {
    .ocg-panel {
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-height: 82vh;
        border-top: 1px solid rgba(196, 148, 58, 0.28);
        border-radius: 16px 16px 0 0;
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 -6px 32px rgba(0, 0, 0, 0.55);
    }

    .ocg-panel.ocg-open {
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ocg-panel,
    .ocg-backdrop {
        transition-duration: 0.01ms !important;
    }
}


/* ── Panel header ────────────────────────────────────────────── */

.ocg-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid rgba(196, 148, 58, 0.15);
    flex-shrink: 0;
    background: rgba(26, 21, 16, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

@media (max-width: 1199px) {
    .ocg-header {
        position: relative;
        padding-top: 1.375rem;
    }

    .ocg-header::before {
        content: '';
        position: absolute;
        top: 0.55rem;
        left: 50%;
        transform: translateX(-50%);
        width: 34px;
        height: 4px;
        background: rgba(196, 148, 58, 0.32);
        border-radius: 2px;
    }
}

.ocg-kicker {
    font-family: var(--font-sans, sans-serif);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold-primary, #C4943A);
}

.ocg-close {
    flex-shrink: 0;
    background: none;
    border: 1px solid rgba(196, 148, 58, 0.22);
    border-radius: var(--radius-sm, 4px);
    color: var(--cream-dark, #D4C8B0);
    padding: 0.3rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    line-height: 1;
}

.ocg-close:hover {
    border-color: var(--gold-primary, #C4943A);
    color: var(--gold-primary, #C4943A);
    background: rgba(196, 148, 58, 0.08);
}

.ocg-close:focus-visible {
    outline: 2px solid var(--gold-primary, #C4943A);
    outline-offset: 2px;
}


/* ── Panel body ──────────────────────────────────────────────── */

.ocg-body {
    overflow-y: auto;
    flex: 1;
    padding: 1.4rem 1.5rem 1.75rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(196, 148, 58, 0.28) transparent;
}

.ocg-body::-webkit-scrollbar { width: 4px; }
.ocg-body::-webkit-scrollbar-track { background: transparent; }
.ocg-body::-webkit-scrollbar-thumb {
    background: rgba(196, 148, 58, 0.28);
    border-radius: 2px;
}

.ocg-title {
    font-family: 'Cinzel', serif;
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 1.25;
    color: #fff;
    margin: 0 0 0.35rem;
}

.ocg-subtitle {
    font-family: 'Crimson Pro', Georgia, serif;
    font-style: italic;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--cream, #E8DCC4);
    opacity: 0.72;
    margin: 0 0 1.1rem;
}

.ocg-text {
    font-family: 'Crimson Pro', Georgia, serif;
    font-size: 0.97rem;
    line-height: 1.7;
    color: var(--cream, #E8DCC4);
    margin: 0 0 1rem;
}

.ocg-list-heading {
    font-family: var(--font-sans, sans-serif);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gold-light, #D4A84A);
    opacity: 0.82;
    margin: 1.2rem 0 0.5rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid rgba(196, 148, 58, 0.1);
}

.ocg-nineteen {
    margin: 0 0 1.2rem;
    padding: 0 0 0 1.5rem;
    font-family: 'Crimson Pro', Georgia, serif;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--cream, #E8DCC4);
}

.ocg-nineteen li {
    margin-bottom: 0.3rem;
    padding-left: 0.2rem;
}

.ocg-nineteen li::marker {
    font-family: var(--font-sans, sans-serif);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--gold-primary, #C4943A);
}

.ocg-pull {
    font-family: 'Crimson Pro', Georgia, serif;
    font-style: italic;
    font-size: 0.97rem;
    line-height: 1.65;
    color: var(--cream-soft, #F5EFE4);
    padding: 0.875rem 1rem;
    background: rgba(196, 148, 58, 0.07);
    border-left: 3px solid var(--gold-primary, #C4943A);
    border-radius: 0 var(--radius-sm, 4px) var(--radius-sm, 4px) 0;
    margin: 0 0 1rem;
}

.ocg-fineprint {
    font-family: 'Crimson Pro', Georgia, serif;
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--cream-dark, #D4C8B0);
    opacity: 0.65;
    margin: 0 0 1.2rem;
}

.ocg-links {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 0.2rem;
}

.ocg-edition-link {
    display: block;
    font-family: 'Crimson Pro', Georgia, serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--gold-primary, #C4943A);
    text-decoration: none;
    padding: 0.7rem 1rem;
    border: 1px solid rgba(196, 148, 58, 0.35);
    border-radius: 8px;
    background: rgba(196, 148, 58, 0.06);
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ocg-edition-link:hover {
    background: rgba(196, 148, 58, 0.13);
    border-color: var(--gold-primary, #C4943A);
    color: var(--gold-light, #D4A84A);
}

.ocg-edition-link:focus-visible {
    outline: 2px solid var(--gold-primary, #C4943A);
    outline-offset: 2px;
}

.ocg-closing {
    font-family: 'Crimson Pro', Georgia, serif;
    font-style: italic;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--gold-light, #D4A84A);
    text-align: center;
    margin: 1.4rem 0 0;
    padding-top: 1.1rem;
    border-top: 1px solid rgba(196, 148, 58, 0.15);
}

.ocg-closing-cite {
    display: block;
    font-style: normal;
    font-size: 0.8rem;
    color: var(--cream-dark, #D4C8B0);
    opacity: 0.7;
    margin-top: 0.25rem;
}