/* ============================================================
   chapter-ornaments.css — The Mammoth Steppes
   ------------------------------------------------------------
   Typographic ornaments used inside chapter HTML:
   drop caps, section breaks, dividers, text ornaments and
   responsive inline illustrations.

   ⚠ TWO IDENTICAL COPIES EXIST — keep them in sync:
       book/chapter-ornaments.css   (the live reader)
       dev/chapter-ornaments.css    (the uploader's live preview)
   If you change one, copy it over the other so the preview
   always matches what readers see.

   Loaded AFTER styles.css, so these rules win where they overlap.
   Colours/fonts fall back to hard values when the book's
   CSS variables aren't present (e.g. on the dev site).
   ============================================================ */

.chapter-body {
    --orn-gold: var(--warm-gold, #D4AF37);
    --orn-gold-dark: var(--warm-gold-dark, #B8941F);
    --orn-muted: var(--medium-text, #555555);
    --orn-parchment: var(--pale-gold-bg, #F9F3E3);
    --orn-font: var(--heading-font, 'Libre Bodoni', Georgia, serif);
    /* Lets images and floats respond to the width of the TEXT COLUMN,
       not the whole window — so the dev preview pane behaves like a phone
       when it is narrow. */
    container-type: inline-size;
    container-name: chapter;
}

/* Anything that visually "resets" the page must sit below floated images */
.chapter-body h2,
.chapter-body h3,
.scene-break,
.section-break,
.divider,
.text-ornament,
.chapter-end-ornament {
    clear: both;
}

/* No first-line indent after headings, breaks, ornaments and images */
.chapter-body h2 + p,
.chapter-body h3 + p,
.section-break + p,
.divider + p,
.text-ornament + p,
.chapter-image + p {
    text-indent: 0;
}

/* ── Drop caps ─────────────────────────────────────────────
   Any paragraph with class="drop-cap". Sized in em so it scales
   with the body text on phones automatically. */
.chapter-body p.drop-cap {
    text-indent: 0;
}

.chapter-body p.drop-cap::first-letter {
    float: left;
    font-family: var(--orn-font);
    font-size: 3.9em;
    line-height: 0.8;
    font-weight: 400;
    margin: 0.06em 0.1em 0 0;
    color: var(--orn-gold);
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.15);
}

/* Illuminated variant: letter set in a small gilded frame */
.chapter-body p.drop-cap--illuminated::first-letter {
    font-size: 3.2em;
    line-height: 1;
    padding: 0.08em 0.14em 0.02em;
    margin: 0.12em 0.16em 0 0;
    color: var(--orn-gold-dark);
    background: var(--orn-parchment);
    border: 1px solid var(--orn-gold);
    box-shadow: inset 0 0 0 3px var(--orn-parchment), inset 0 0 0 4px var(--orn-gold);
    text-shadow: none;
}

/* ── Section break: heavier untitled break ─────────────────
   <div class="section-break" role="separator"><span>❦</span></div> */
.section-break {
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 420px;
    margin: 3.5rem auto 2.75rem;
    color: var(--orn-gold);
    user-select: none;
}

.section-break::before,
.section-break::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--orn-gold));
}

.section-break::after {
    background: linear-gradient(to left, transparent, var(--orn-gold));
}

.section-break > span {
    font-size: 1.7rem;
    line-height: 1;
}

/* ── Dividers: purely decorative, no drop-cap reset ────────── */
.divider {
    margin: 2.25rem auto;
    text-align: center;
    color: var(--orn-gold);
    user-select: none;
    line-height: 1;
}

.divider--line {
    height: 1px;
    max-width: 300px;
    background: linear-gradient(to right, transparent, var(--orn-gold), transparent);
}

.divider--double {
    height: 4px;
    max-width: 260px;
    border-top: 1px solid var(--orn-gold);
    border-bottom: 1px solid var(--orn-gold);
    opacity: 0.8;
}

.divider--dots::before {
    content: "·  ·  ·  ·  ·";
    white-space: pre;
    font-size: 1.4rem;
    letter-spacing: 0.15em;
}

.divider--stars::before {
    content: "⁂";
    font-size: 1.5rem;
}

.divider--flourish::before {
    content: "☙  ✦  ❧";
    white-space: pre;
    font-size: 1.4rem;
}

/* ── Stand-alone text ornament (fleuron etc.) ─────────────── */
.text-ornament {
    text-align: center;
    color: var(--orn-gold);
    font-size: 1.6rem;
    line-height: 1;
    margin: 2rem auto;
    user-select: none;
}

/* ── Inline illustrations ─────────────────────────────────
   Default: centred, up to 560px. Layout modifiers:
     --full   fills the text column
     --small  centred, up to 300px
     --left / --right  floated beside the text (becomes
                       full-width on narrow screens)        */
.chapter-body .chapter-image {
    margin: 2.25rem auto;
    max-width: 560px;
    text-align: center;
}

.chapter-body .chapter-image img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

.chapter-body .chapter-image--full {
    max-width: 100%;
}

.chapter-body .chapter-image--small {
    max-width: 300px;
}

.chapter-body .chapter-image--left,
.chapter-body .chapter-image--right {
    width: 44%;
    max-width: 320px;
    margin-top: 0.4rem;
    margin-bottom: 1rem;
}

.chapter-body .chapter-image--left {
    float: left;
    margin-right: 1.5rem;
    margin-left: 0;
}

.chapter-body .chapter-image--right {
    float: right;
    margin-left: 1.5rem;
    margin-right: 0;
}

.chapter-body .chapter-image--left figcaption,
.chapter-body .chapter-image--right figcaption {
    font-size: 0.8rem;
}

/* Narrow text column (phones, or a narrow preview pane): unfloat */
@container chapter (max-width: 560px) {
    .chapter-body .chapter-image--left,
    .chapter-body .chapter-image--right {
        float: none;
        width: auto;
        max-width: 100%;
        margin: 2rem auto;
    }

    .section-break {
        margin: 2.5rem auto 2rem;
    }
}