/* The Quiet Part — shared styles for the capture page and the book page.
   Monochromatic, warm, serif. No accent colors. Mobile-first. */

:root {
    --bg: #F0EDEB;        /* warm off-white */
    --ink: #1A1A1A;       /* near-black */
    --muted: #6B6560;     /* warm gray */
    --error: #8B2E1F;     /* muted warm red */
    --line: #1A1A1A;      /* borders match the ink */
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: "Libre Baskerville", Georgia, "Times New Roman", serif;
    font-size: 19px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); }

.page {
    max-width: 720px;
    margin: 0 auto;
    padding: 8vh 24px 6vh;
}

/* --- Hero --- */
.hero { text-align: center; }

.cover {
    width: 60vw;
    max-width: 320px;
    height: auto;
    border-radius: 2px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.title {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-weight: 500;
    font-size: 64px;
    letter-spacing: 0.02em;
    line-height: 1.05;
    margin: 0.6em 0 0.1em;
}

.subtitle {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-style: italic;
    font-size: 22px;
    color: var(--ink);
    margin: 0 auto 0.4em;
    max-width: 28ch;
}

.free {
    font-style: italic;
    color: var(--muted);
    margin: 0;
}

/* --- Pitch --- */
.pitch {
    max-width: 560px;
    margin: 9vh auto;
    text-align: center;
}

/* --- Capture form --- */
.capture {
    max-width: 480px;
    margin: 0 auto 8vh;
}

.field { margin-bottom: 28px; }

.field label {
    display: block;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 22px;
    margin-bottom: 8px;
}

.field input {
    width: 100%;
    min-height: 48px;            /* >= 44px touch target */
    padding: 12px 14px;
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 0;
    font-family: "Libre Baskerville", Georgia, serif;
    font-size: 18px;
}

.field input:focus {
    outline: 2px solid var(--ink);
    outline-offset: -1px;
}

.field input::placeholder { color: var(--muted); }

/* Buttons: thin dark border, no fill, no shadow. Used by both pages. */
.btn,
.download-btn,
.book-link {
    display: inline-block;
    width: 100%;
    min-height: 48px;
    padding: 14px 24px;
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 0;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 22px;
    letter-spacing: 0.02em;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.btn:hover,
.download-btn:hover,
.book-link:hover {
    background: var(--ink);
    color: var(--bg);
}

.fine-print {
    color: var(--muted);
    font-size: 15px;
    text-align: center;
    margin-top: 18px;
}

/* Error messaging */
.form-error,
.js-error {
    color: var(--error);
    text-align: center;
    font-size: 17px;
    margin: 0 0 24px;
}
.js-error { margin: 0 0 18px; }

/* --- Footer --- */
.footer {
    text-align: center;
    color: var(--muted);
    font-size: 15px;
    margin-top: 10vh;
}
.footer a { color: var(--muted); }
.footer-line { font-style: italic; margin-top: 4px; }

/* ============ Book page ============ */
.book-page {
    max-width: 1000px;
    margin: 0 auto;
    padding: 6vh 24px 6vh;
}

.book-header { text-align: center; margin-bottom: 5vh; }
.book-header .title { font-size: 44px; margin-bottom: 0.1em; }
/* Book-page subtitle uses Libre Baskerville italic (the body face) to set it
   apart from the larger Cormorant Garamond italic on the capture page. */
.book-header .subtitle {
    font-family: "Libre Baskerville", Georgia, "Times New Roman", serif;
    font-style: italic;
    font-size: 20px;
}

/* FlipHTML5 flipbook frame. The inline wrapper inside this div carries the
   aspect-ratio padding trick; we just provide the dark frame + max width. */
.flipbook-wrapper {
    max-width: 1000px;
    margin: 0 auto 2.5rem;
    border: 1px solid #1A1A1A;
}

.pdf-frame {
    width: 100%;
    height: 85vh;
    border: 1px solid var(--ink);
    display: block;
}

/* Mobile fallback link, hidden until JS or CSS reveals it. */
.pdf-fallback {
    display: none;
    text-align: center;
    margin: 4vh 0;
}
.pdf-fallback .book-link { max-width: 420px; margin: 0 auto; }

.download-wrap {
    text-align: center;
    margin: 6vh auto 0;
    max-width: 420px;
}

.closing-line {
    text-align: center;
    color: var(--muted);
    font-style: italic;
    margin-top: 4vh;
}

/* --- Responsive --- */
@media (max-width: 600px) {
    body { font-size: 18px; }
    .title { font-size: 44px; }
    .subtitle { font-size: 18px; }
    .book-header .title { font-size: 32px; }
    .page { padding: 6vh 20px 5vh; }
    .pdf-frame { height: 75vh; }
}