<!DOCTYPE html>
<html lang="{{ book.language }}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ book.title }}{% if book.subtitle %} — {{ book.subtitle }}{% endif %}</title>
    <meta name="author" content="{{ book.author }}">
    {% if book.description %}
    <meta name="description" content="{{ book.description }}">
    {% endif %}
    <script src="https://unpkg.com/pagedjs@0.4.3/dist/paged.polyfill.js"></script>
    <style>
        /* === Page rules === */
        @page {
            size: {{ book.style.page.size }};
            margin: {{ book.style.page.margin_top }} {{ book.style.page.margin_outer }} {{ book.style.page.margin_bottom }} {{ book.style.page.margin_inner }};
            @bottom-center {
                content: counter(page);
                font-family: {{ book.style.font.body_family }};
                font-size: 9pt;
                color: #666;
            }
        }

        @page:first {
            margin: 0;
            @bottom-center {
                content: none;
            }
        }

        @page cover {
            margin: 0;
            @bottom-center {
                content: none;
            }
        }

        @page title {
            @bottom-center {
                content: none;
            }
        }

        @page legal {
            @bottom-center {
                content: none;
            }
        }

        @page dedication {
            @bottom-center {
                content: none;
            }
        }

        @page epigraph {
            @bottom-center {
                content: none;
            }
        }

        @page toc {
            @bottom-center {
                content: none;
            }
        }

        @page colophon {
            @bottom-center {
                content: none;
            }
        }

        @page chapter {
            @top-center {
                content: string(chapter-title);
                font-family: {{ book.style.font.heading_family }};
                font-size: 8pt;
                font-style: italic;
                color: #999;
                letter-spacing: 0.5px;
            }
        }

        @page chapter:first {
            @top-center {
                content: none;
            }
            @bottom-center {
                content: none;
            }
        }

        /* === Reset === */
        * { box-sizing: border-box; }
        *::before { box-sizing: border-box; }
        *::after { box-sizing: border-box; }

        /* === Base === */
        body {
            font-family: {{ book.style.font.body_family }};
            font-size: {{ book.style.font.body_size }};
            line-height: {{ book.style.font.line_height }};
            color: #1a1a1a;
            text-rendering: optimizeLegibility;
            margin: 0;
            padding: 0;
        }

        /* === Cover === */
        .cover {
            break-after: page;
            page: cover;
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background-color: {{ book.cover.background_color }};
        }

        .cover-full-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .cover-fallback {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            text-align: center;
            padding: 40px;
        }

        .cover-title {
            font-family: {{ book.style.font.heading_family }};
            font-size: 32pt;
            font-weight: 700;
            color: {{ book.cover.title_color }};
            margin: 0 0 8px;
            text-transform: uppercase;
        }

        .cover-subtitle {
            font-family: {{ book.style.font.body_family }};
            font-size: 14pt;
            font-style: italic;
            color: {{ book.cover.subtitle_color }};
            margin: 0 0 16px;
        }

        .cover-author {
            font-family: {{ book.style.font.heading_family }};
            font-size: 13pt;
            font-weight: 300;
            color: {{ book.cover.title_color }};
            letter-spacing: 3px;
            text-transform: uppercase;
            margin: 0;
        }

        /* === Title page === */
        .title-page {
            break-before: page;
            break-after: page;
            page: title;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100%;
            text-align: center;
        }

        .title-page-content h1 {
            font-family: {{ book.style.font.heading_family }};
            font-size: 26pt;
            font-weight: 700;
            margin: 0 0 8px;
            color: #1a1a1a;
        }

        .title-subtitle { font-size: 14pt; font-style: italic; color: #555; margin: 0 0 20px; }
        .title-separator { color: #999; font-size: 14pt; letter-spacing: 6px; margin: 20px 0; }
        .title-author { font-family: {{ book.style.font.heading_family }}; font-size: 14pt; font-weight: 300; letter-spacing: 2px; text-transform: uppercase; color: #333; margin: 0 0 30px; }
        .title-publisher { font-size: 10pt; color: #777; margin: 0 0 4px; }
        .title-year { font-size: 10pt; color: #999; margin: 0; }

        /* === Legal === */
        .legal-page {
            break-after: page;
            page: legal;
            display: flex;
            align-items: flex-end;
            min-height: 100%;
        }

        .legal-content { font-size: 8pt; color: #666; line-height: 1.5; padding-bottom: 40px; }
        .legal-content p { margin: 2px 0; }
        .legal-rights { margin-top: 12px !important; font-style: italic; }

        /* === Dedication === */
        .dedication-page {
            break-before: page;
            break-after: page;
            page: dedication;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100%;
            text-align: center;
        }

        .dedication-content { font-size: 13pt; font-style: italic; color: #444; max-width: 70%; line-height: 1.8; }

        /* === Epigraph === */
        .epigraph-page {
            break-before: page;
            break-after: page;
            page: epigraph;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100%;
        }

        .epigraph-content blockquote { font-size: 12pt; font-style: italic; color: #444; border: none; padding: 0; margin: 0; max-width: 75%; text-align: center; margin-left: auto; margin-right: auto; }
        .epigraph-content cite { display: block; margin-top: 16px; font-size: 10pt; font-style: normal; color: #777; letter-spacing: 1px; }

        /* === TOC === */
        .toc-page {
            break-before: page;
            break-after: page;
            page: toc;
        }

        .toc-heading { font-family: {{ book.style.font.heading_family }}; font-size: 20pt; text-align: center; margin-bottom: 30px; font-weight: 700; color: #1a1a1a; }
        .toc ol { list-style: none; padding: 0; margin: 0; }
        .toc li { margin: 0; padding: 0; }
        .toc a { display: flex; align-items: baseline; text-decoration: none; color: #1a1a1a; padding: 6px 0; font-size: 11pt; }
        .toc-title { white-space: nowrap; }
        .toc-page-ref { flex: 1; overflow: hidden; margin-left: 8px; }
        .toc-dots { display: block; border-bottom: 1px dotted #ccc; height: 0.7em; }

        /* === Chapters === */
        .chapter {
            break-before: page;
            page: chapter;
        }

        .chapter-header { text-align: center; padding-top: 80px; padding-bottom: 40px; }
        .chapter-number { display: block; font-family: {{ book.style.font.heading_family }}; font-size: 48pt; font-weight: 200; color: #ddd; line-height: 1; margin-bottom: 12px; }

        .chapter-title {
            font-family: {{ book.style.font.heading_family }};
            font-size: {{ book.style.font.chapter_title_size }};
            font-weight: 700;
            color: #1a1a1a;
            margin: 0;
            line-height: 1.2;
            string-set: chapter-title content();
        }

        .chapter-body { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
        .chapter-body > h1:first-child { display: none; }
        .chapter-body p { margin: 0 0 0.8em; text-indent: 1.5em; orphans: 3; widows: 3; }
        /* Each selector in its own rule — PagedJS bug with multi-selector + combinator */
        .chapter-body > p:first-of-type { text-indent: 0; }
        .chapter-body > h1 + p { text-indent: 0; }
        .chapter-body > h2 + p { text-indent: 0; }
        .chapter-body > h3 + p { text-indent: 0; }
        .chapter-body > blockquote + p { text-indent: 0; }
        .chapter-body > hr + p { text-indent: 0; }

        .chapter-body > p:first-of-type::first-letter {
            font-size: 3.2em;
            float: left;
            line-height: 0.8;
            padding-right: 6px;
            padding-top: 4px;
            font-weight: 700;
            color: #1a1a1a;
            font-family: {{ book.style.font.heading_family }};
        }

        .chapter-body h2 { font-family: {{ book.style.font.heading_family }}; font-size: 16pt; font-weight: 600; margin: 2em 0 0.8em; color: #1a1a1a; text-align: left; }
        .chapter-body h3 { font-family: {{ book.style.font.heading_family }}; font-size: 13pt; font-weight: 600; margin: 1.5em 0 0.6em; color: #333; text-align: left; }

        .chapter-body hr { border: none; text-align: center; margin: 2em 0; }
        .chapter-body hr::after { content: "* * *"; font-size: 14pt; letter-spacing: 12px; color: #999; }

        .chapter-body blockquote { margin: 1.5em 2em; padding: 0; border-left: 2px solid #ddd; padding-left: 16px; font-style: italic; color: #444; }
        .chapter-body blockquote p { text-indent: 0; margin-bottom: 0.5em; }
        .chapter-body strong { font-weight: 700; }
        .chapter-body em { font-style: italic; }

        .chapter-body code { font-family: 'Courier New', Courier, monospace; font-size: 0.9em; background: #f5f5f5; padding: 2px 4px; border-radius: 2px; }
        .chapter-body pre { background: #f8f8f8; border: 1px solid #e0e0e0; padding: 12px 16px; overflow-x: auto; font-size: 9pt; line-height: 1.4; border-radius: 3px; margin: 1.2em 0; }
        .chapter-body pre code { background: none; padding: 0; }

        .chapter-body ul { margin: 0.8em 0; padding-left: 2em; }
        .chapter-body ol { margin: 0.8em 0; padding-left: 2em; }
        .chapter-body li { margin-bottom: 0.3em; }
        .chapter-body li p { text-indent: 0; margin-bottom: 0.3em; }
        .chapter-body img { max-width: 100%; height: auto; display: block; margin: 1.5em auto; }

        .footnote-ref { font-size: 0.75em; vertical-align: super; text-decoration: none; color: #0066cc; }
        .footnotes { margin-top: 3em; padding-top: 1em; border-top: 1px solid #ddd; font-size: 9pt; color: #555; }
        .footnotes ol { padding-left: 1.5em; }
        .footnotes li { margin-bottom: 0.5em; }

        /* === Colophon === */
        .colophon {
            break-before: page;
            page: colophon;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100%;
            text-align: center;
        }

        .colophon-content { color: #888; font-size: 9pt; line-height: 1.8; }
        .colophon-title { font-family: {{ book.style.font.heading_family }}; font-size: 12pt; font-weight: 600; color: #555; margin-bottom: 4px; }
        .colophon-ornament { font-size: 10pt; margin: 16px 0; color: #ccc; }
        .colophon-tech { font-size: 8pt; color: #aaa; margin-top: 20px; }
    </style>
</head>
<body>

    <!-- COVER -->
    <section class="cover" id="cover">
        {% if cover_image_uri %}
        <img class="cover-full-image" src="{{ cover_image_uri }}" alt="Cover of {{ book.title }}">
        {% else %}
        <div class="cover-fallback">
            <h1 class="cover-title">{{ book.title }}</h1>
            {% if book.subtitle %}
            <p class="cover-subtitle">{{ book.subtitle }}</p>
            {% endif %}
            <p class="cover-author">{{ book.author }}</p>
        </div>
        {% endif %}
    </section>

    <!-- TITLE PAGE -->
    <section class="title-page">
        <div class="title-page-content">
            <h1>{{ book.title }}</h1>
            {% if book.subtitle %}
            <p class="title-subtitle">{{ book.subtitle }}</p>
            {% endif %}
            <div class="title-separator">───</div>
            <p class="title-author">{{ book.author }}</p>
            {% if book.publisher %}
            <p class="title-publisher">{{ book.publisher }}</p>
            {% endif %}
            {% if book.year %}
            <p class="title-year">{{ book.year }}</p>
            {% endif %}
        </div>
    </section>

    <!-- LEGAL -->
    <section class="legal-page">
        <div class="legal-content">
            <p><strong>{{ book.title }}</strong></p>
            <p>&copy; {{ book.year }} {{ book.author }}</p>
            {% if book.publisher %}<p>{{ book.publisher }}</p>{% endif %}
            {% if book.isbn %}<p>ISBN: {{ book.isbn }}</p>{% endif %}
            <p class="legal-rights">All rights reserved.</p>
        </div>
    </section>

    <!-- DEDICATION -->
    {% if book.dedication %}
    <section class="dedication-page">
        <div class="dedication-content">
            <p>{{ book.dedication }}</p>
        </div>
    </section>
    {% endif %}

    <!-- EPIGRAPH -->
    {% if book.epigraph %}
    <section class="epigraph-page">
        <div class="epigraph-content">
            <blockquote>
                <p>{{ book.epigraph }}</p>
                {% if book.epigraph_author %}
                <cite>&mdash; {{ book.epigraph_author }}</cite>
                {% endif %}
            </blockquote>
        </div>
    </section>
    {% endif %}

    <!-- TOC -->
    {% if chapters|length > 1 %}
    <section class="toc-page" id="toc">
        <h2 class="toc-heading">Table of Contents</h2>
        <nav class="toc">
            <ol>
                {% for chapter in chapters %}
                <li>
                    <a href="#chapter-{{ chapter.number }}">
                        <span class="toc-title">{{ chapter.title }}</span>
                        <span class="toc-page-ref"><span class="toc-dots"></span></span>
                    </a>
                </li>
                {% endfor %}
            </ol>
        </nav>
    </section>
    {% endif %}

    <!-- CHAPTERS -->
    {% for chapter in chapters %}
    <section class="chapter" id="chapter-{{ chapter.number }}">
        <div class="chapter-header">
            <span class="chapter-number">{{ chapter.number }}</span>
            <h1 class="chapter-title">{{ chapter.title }}</h1>
        </div>
        <div class="chapter-body">
            {{ chapter.html | safe }}
        </div>
    </section>
    {% endfor %}

    <!-- COLOPHON -->
    <section class="colophon">
        <div class="colophon-content">
            <p class="colophon-title">{{ book.title }}</p>
            <p>{{ book.author }}</p>
            {% if book.year %}<p>{{ book.year }}</p>{% endif %}
            <div class="colophon-ornament">&#9670;</div>
            <p class="colophon-tech">Built with MkBooks;</p>
        </div>
    </section>

</body>
</html>
