/* Shared "Book Home" front-matter styles — used by the reader (reader_v2)
   and the public book page (public_book.html) so they render identically.
   Vars live on .bh so the block is self-contained. */
.bh {
    --bh-paper: #f7f2e7;
    --bh-paper-raised: #fffdf6;
    --bh-ink: #262118;
    --bh-muted: #6f6754;
    --bh-accent: #8a2d1c;
    --bh-line: #e2d8c2;
    --bh-line-strong: #c9bc9d;
}
    /* ---------- The typeset page ---------- */
    .bh {
        font-family: 'Newsreader', Georgia, serif;
        color: var(--bh-ink);
        padding: 56px 44px 72px;
        max-width: 680px;
        margin: 0 auto;
    }

    @keyframes bhRise {
        from { opacity: 0; transform: translateY(14px); }
        to   { opacity: 1; transform: none; }
    }

    .bh-reveal {
        opacity: 0;
        animation: bhRise 0.55s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
    }

    .bh-rule {
        height: 5px;
        border-top: 2px solid var(--bh-ink);
        border-bottom: 1px solid var(--bh-ink);
        margin-bottom: 22px;
    }

    .bh-overline {
        font-family: 'Fraunces', Georgia, serif;
        font-size: 11px;
        font-weight: 560;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--bh-accent);
        margin-bottom: 10px;
    }

    .bh-title {
        font-family: 'Fraunces', Georgia, serif;
        font-size: clamp(27px, 3.2vw, 36px);
        font-weight: 640;
        line-height: 1.1;
        letter-spacing: -0.01em;
        margin: 0 0 22px;
        text-wrap: balance;
    }

    .bh-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 28px;
    }

    .bh-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 11px 22px;
        font-family: 'Fraunces', Georgia, serif;
        font-size: 13px;
        font-weight: 560;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        text-decoration: none;
        border-radius: 2px;
        cursor: pointer;
        transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    }

    /* Solid = primary action, outline = secondary. (.bh-btn-read is the
       behavior hook for the stage flip, styling lives on these two.) */
    .bh-btn-solid {
        background: var(--bh-accent);
        color: #f9f3e6;
        border: 1px solid var(--bh-accent);
        box-shadow: 2.5px 2.5px 0 rgba(38, 33, 24, 0.85);
    }

    .bh-btn-solid:hover {
        color: #fff;
        transform: translate(-1px, -1px);
        box-shadow: 3.5px 3.5px 0 rgba(38, 33, 24, 0.85);
    }

    .bh-btn-outline {
        background: transparent;
        color: var(--bh-ink);
        border: 1px solid var(--bh-ink);
    }

    .bh-btn-outline:hover {
        background: var(--bh-ink);
        color: var(--bh-paper);
        text-decoration: none;
    }

    .bh-overview {
        font-size: 16px;
        line-height: 1.65;
        margin: 0 0 8px;
    }

    .bh-overview::first-letter {
        font-family: 'Fraunces', Georgia, serif;
        font-weight: 640;
        font-size: 52px;
        line-height: 0.82;
        float: left;
        padding: 6px 10px 0 0;
        color: var(--bh-accent);
    }

    .bh-takeaway {
        font-style: italic;
        font-size: 15px;
        line-height: 1.6;
        color: var(--bh-muted);
        border-left: 2px solid var(--bh-accent);
        padding-left: 14px;
        margin: 18px 0 4px;
    }

    .bh-sec-label {
        display: flex;
        align-items: center;
        gap: 12px;
        font-family: 'Fraunces', Georgia, serif;
        font-size: 12px;
        font-weight: 560;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--bh-accent);
        margin: 34px 0 12px;
    }

    .bh-sec-label::after {
        content: '';
        flex: 1;
        height: 1px;
        background: var(--bh-line-strong);
    }

    /* One-line affordance hint under the Contents label */
    .bh-hint {
        font-family: 'Newsreader', Georgia, serif;
        font-style: italic;
        font-size: 13px;
        color: var(--bh-muted);
        margin: -6px 0 10px;
    }

    /* Contents — dot leaders like a real book */
    .bh .toc-item-wrapper {
        padding: 0;
    }

    .bh .toc-item {
        display: flex;
        align-items: baseline;
        gap: 8px;
        padding: 6px 0;
        cursor: pointer;
        background: transparent;
    }

    /* Expand chevron — signals "summary inside"; rotates when open */
    .bh .toc-chevron {
        flex-shrink: 0;
        color: var(--bh-accent);
        font-size: 11px;
        transition: transform 0.15s ease;
        align-self: center;
    }

    .bh .toc-item-wrapper.expanded .toc-chevron {
        transform: rotate(90deg);
    }

    .bh .toc-chevron-spacer {
        flex-shrink: 0;
        width: 11px;
    }

    .bh .toc-title {
        font-size: 15px;
        line-height: 1.35;
        color: var(--bh-ink);
    }

    .bh .toc-item:hover .toc-title {
        color: var(--bh-accent);
    }

    .bh .bh-leader {
        flex: 1;
        min-width: 24px;
        border-bottom: 1px dotted var(--bh-line-strong);
        transform: translateY(-4px);
    }

    .bh .toc-page {
        font-size: 13px;
        font-variant-numeric: tabular-nums;
        color: var(--bh-accent);
    }

    /* Collapsed by default; the expand chevron / row click reveals it.
       (In the reader these live in its own stylesheet; included here so the
       public page collapses identically.) */
    .bh .section-details {
        display: none;
        border-left: 2px solid var(--bh-line);
        margin: 2px 0 10px 2px;
        padding: 4px 0 4px 14px;
    }

    .bh .toc-item-wrapper.expanded .section-details {
        display: block;
    }

    .bh .section-summary {
        font-size: 14px;
        line-height: 1.6;
        color: var(--bh-ink);
    }

    .bh .section-key-points {
        margin: 8px 0 0;
        padding-left: 18px;
        font-size: 13.5px;
        line-height: 1.55;
        color: var(--bh-muted);
    }

    .bh .walkthrough-actions {
        margin-top: 8px;
        display: flex;
        gap: 14px;
    }

    .bh .explain-section-btn {
        background: none;
        border: none;
        padding: 0;
        font-family: 'Newsreader', Georgia, serif;
        font-style: italic;
        font-size: 13px;
        color: var(--bh-accent);
        text-decoration: underline;
        text-underline-offset: 3px;
        cursor: pointer;
    }

    /* Key concepts as a glossary */
    .bh .concept-item {
        margin: 0 0 12px;
        background: transparent;
        border: none;
        padding: 0;
    }

    .bh .concept-term {
        font-family: 'Fraunces', Georgia, serif;
        font-size: 15px;
        font-weight: 560;
        color: var(--bh-ink);
    }

    .bh .concept-page {
        font-family: 'Newsreader', Georgia, serif;
        font-weight: 400;
        font-size: 12.5px;
        color: var(--bh-accent);
        cursor: pointer;
        margin-left: 4px;
    }

    .bh .concept-def {
        font-size: 14px;
        line-height: 1.55;
        color: var(--bh-muted);
        margin-top: 2px;
    }

    /* Themes as stamps */
    .bh .summary-themes {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .bh .theme-tag {
        background: transparent;
        border: 1px solid var(--bh-line-strong);
        border-radius: 2px;
        padding: 4px 12px;
        font-size: 13px;
        color: var(--bh-ink);
        cursor: pointer;
        transition: all 0.15s ease;
    }

    .bh .theme-tag:hover {
        border-color: var(--bh-accent);
        color: var(--bh-accent);
        background: transparent;
    }

    /* Pull quotes with hanging quotation mark */
    .bh .quote-card {
        position: relative;
        background: transparent;
        border: none;
        border-radius: 0;
        padding: 2px 0 2px 26px;
        margin: 0 0 18px;
        cursor: pointer;
    }

    .bh .quote-card::before {
        content: '\201C';
        position: absolute;
        left: -2px;
        top: -6px;
        font-family: 'Fraunces', Georgia, serif;
        font-size: 38px;
        font-weight: 640;
        color: var(--bh-accent);
    }

    .bh .quote-text {
        font-style: italic;
        font-size: 15.5px;
        line-height: 1.55;
        color: var(--bh-ink);
    }

    .bh .quote-card:hover .quote-text {
        color: var(--bh-accent);
    }

    .bh .quote-meta {
        margin-top: 4px;
        font-size: 12.5px;
        color: var(--bh-muted);
    }

    .bh .quote-page {
        color: var(--bh-accent);
    }

    .bh-advice {
        font-size: 14px;
        font-style: italic;
        line-height: 1.6;
        color: var(--bh-muted);
    }

    .bh-colophon {
        margin-top: 36px;
        padding-top: 14px;
        border-top: 1px solid var(--bh-line);
        font-size: 12.5px;
        font-style: italic;
        color: var(--bh-muted);
        text-align: center;
    }

    @media (max-width: 768px) {
        .bh {
            padding: 22px 18px 24px;
        }
    }