/* ==========================================================================
   POST / ARTICLE READER — typography defaults for real post content.
   The demo template hand-writes Tailwind classes on every paragraph;
   real posts from the CMS's rich-text editor output plain HTML
   (<p>, <h2>, <img>, <a>...), so this file gives that plain content
   the same reading style the template's design intends.
   ========================================================================== */

/* Body copy uses Source Serif 4, an optical-size serif designed for extended
   on-screen reading. Playfair Display is a display face — excellent for
   headlines, tiring for full articles — so it stays on headings only. */
#reader-content, .reader-content-page {
    font-family: 'Source Serif 4', 'Iowan Old Style', Georgia, serif;
    font-size: 1.1875rem;
    line-height: 1.75;
    color: #1a1a1a;
    max-width: 68ch;          /* ~66 characters per line, the readable range */
    letter-spacing: 0.003em;
}

#reader-content p, .reader-content-page p {
    margin-bottom: 1.4rem;
    line-height: 1.78;
}

@media (max-width: 640px) {
    #reader-content, .reader-content-page {
        font-size: 1.0625rem;
        line-height: 1.7;
    }
}

#reader-content p:first-of-type::first-letter,
.reader-content-page p:first-of-type::first-letter {
    font-size: 3rem;
    font-weight: 900;
    font-family: 'Playfair Display', serif;
    margin-right: 0.75rem;
    float: left;
    line-height: 1;
    color: #D92323;
}

#reader-content h2, .reader-content-page h2 {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-size: clamp(1.45rem, 3vw, 1.85rem);
    text-transform: uppercase;
    letter-spacing: -0.01em;
    margin: 2.5rem 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #111111;
}

#reader-content h3, .reader-content-page h3 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 1.4rem;
    margin: 1.75rem 0 0.75rem;
}

#reader-content img, .reader-content-page img {
    width: 100%;
    border: 2px solid #111111;
    box-shadow: 4px 4px 0px 0px #111111;
    margin: 1.5rem 0;
}

#reader-content a, .reader-content-page a {
    color: #D92323;
    text-decoration: underline;
    font-weight: 600;
}

#reader-content ul, #reader-content ol,
.reader-content-page ul, .reader-content-page ol {
    margin: 1rem 0 1rem 1.5rem;
}

#reader-content li, .reader-content-page li {
    margin-bottom: 0.5rem;
}

#reader-content blockquote, .reader-content-page blockquote {
    border-left: 4px solid #B8860B;
    padding-left: 1.25rem;
    margin: 1.5rem 0;
    font-style: italic;
    font-size: 1.2rem;
    color: #333;
}

/* Print styles — hide chrome, keep only the article itself readable on paper */
@media print {
    .cookie-banner, .top-teletype, nav, .primary-nav-wrap,
    #reader-next-prev-container, .dispatch-action-bar,
    .newsletter-box-print-hide, footer {
        display: none !important;
    }
}