/* ============================================
   ARTICLE PAGE STYLES
   Complete styling for individual article pages
   
   SECTIONS IN THIS FILE:
   1. Article Container & Layout
   2. Article Header (title, meta, breadcrumb)
   3. Article Body Typography
   4. Images (single, grid layouts, frames)
   5. Pull Quotes
   6. Info Boxes
   7. Section Headings
   8. Article Footer (tags, navigation, share)
   9. Responsive Breakpoints
   ============================================ */

/* ============================================
   1. ARTICLE CONTAINER & LAYOUT
   ============================================ */

/* MAIN ARTICLE WRAPPER
   - Centers content
   - Sets max-width for readability
   - Adds vertical spacing
*/
.article-page {
    max-width: 900px;                    /* Optimal reading width */
    margin: 0 auto;                       /* Center on page */
    padding: 4rem 2rem;                   /* Space around content */
    background-color: var(--bg-primary);  /* Matches theme colors */
}

/* ============================================
   2. ARTICLE HEADER SECTION
   ============================================ */

/* HEADER CONTAINER
   - Contains breadcrumb, title, meta info
   - Bottom border separates from content
*/
.article-header {
    border-bottom: 2px solid var(--border-medium);
    padding-bottom: 3rem;
    margin-bottom: 3rem;
}

/* BREADCRUMB NAVIGATION
   - Shows: Home / Articles / Current Article
   - Helps user understand location in site
*/
.breadcrumb {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 0.875rem;                 /* Slightly smaller text */
    color: var(--text-tertiary);
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Breadcrumb links */
.breadcrumb a {
    color: var(--accent-sepia);
    text-decoration: none;
    transition: color 0.3s ease;
}

.breadcrumb a:hover {
    color: var(--accent-rust);
    text-decoration: underline;
}

/* Current page (not clickable) */
.breadcrumb .current {
    color: var(--text-primary);
    font-weight: 600;
}

/* Separator between breadcrumb items */
.breadcrumb .separator {
    color: var(--text-muted);
    opacity: 0.5;
}

/* ARTICLE META INFO
   - Category and date displayed horizontally
   - Appears above title
*/
.article-meta {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Article category badge */
.article-category {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--accent-gold);
    font-weight: 700;
    padding: 0.375rem 1rem;
    background-color: var(--bg-tertiary);
    border-radius: 3px;
}

/* Article date/time period */
.article-date {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 1rem;
    font-style: italic;
    color: var(--text-tertiary);
}

/* MAIN ARTICLE TITLE
   - Large, elegant display font
   - Decorative flourishes above and below
*/
.article-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(2.5rem, 5vw, 3.5rem);  /* Responsive size */
    font-weight: 700;
    color: var(--text-primary);
    text-align: center;
    line-height: 1.2;
    margin: 2rem 0;
    letter-spacing: -0.02em;
}

/* Decorative flourishes (❦ symbols) */
.title-flourish-top,
.title-flourish-bottom {
    display: block;
    font-size: 1.5rem;
    color: var(--accent-gold);
    opacity: 0.7;
    margin: 0.5rem 0;
}

/* ARTICLE SUBTITLE
   - Secondary description under title
   - Larger than body text, italic style
*/
.article-subtitle {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.375rem;
    font-style: italic;
    line-height: 1.6;
    color: var(--text-secondary);
    text-align: center;
    max-width: 700px;
    margin: 1.5rem auto;
}

/* READING TIME INDICATOR
   - Shows clock icon and estimated read time
   - Centered below title
*/
.article-reading-time {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    color: var(--text-muted);
    margin: 1.5rem 0;
    font-style: italic;
}

/* Clock icon color */
.article-reading-time svg {
    color: var(--accent-sepia);
}

/* DECORATIVE RULE
   - Thin line with gradient effect
   - Separates header from body
*/
.decorative-rule {
    width: 100px;
    height: 2px;
    background: linear-gradient(
        to right,
        transparent,
        var(--accent-gold),
        transparent
    );
    margin: 2rem auto;
    opacity: 0.6;
}

/* ============================================
   3. ARTICLE BODY TYPOGRAPHY
   ============================================ */

/* MAIN CONTENT CONTAINER
   - Contains all article text and images
   - Sets consistent vertical rhythm
*/
.article-body {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 1.1875rem;                /* 19px base size */
    line-height: 1.8;                     /* Generous line height for readability */
    color: var(--text-primary);
}

/* REGULAR PARAGRAPHS
   - Standard body text spacing
*/
.article-body p {
    margin-bottom: 1.75rem;
}

/* FIRST PARAGRAPH WITH DROP CAP
   - Creates dramatic opening with large first letter
   - Only apply to paragraphs with class="drop-cap-first"
*/
.article-body .drop-cap-first::first-letter {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 4.5rem;                   /* Large decorative letter */
    font-weight: 700;
    line-height: 0.8;
    float: left;                          /* Text wraps around it */
    margin: 0.1em 0.1em 0 0;
    color: var(--accent-sepia);
}

/* LINKS WITHIN ARTICLE TEXT
   - Subtle underline, changes on hover
*/
.article-body a {
    color: var(--accent-sepia);
    text-decoration: underline;
    text-decoration-color: rgba(155, 118, 83, 0.3);
    text-decoration-thickness: 1px;
    transition: all 0.3s ease;
}

.article-body a:hover {
    color: var(--accent-rust);
    text-decoration-color: var(--accent-rust);
}

/* EMPHASIS AND STRONG TEXT */
.article-body em {
    font-style: italic;
}

.article-body strong {
    font-weight: 600;
    color: var(--text-primary);
}

/* ============================================
   4. IMAGES
   ============================================ */

/* BASE IMAGE STYLES
   - All images share these properties
*/
.article-image {
    margin: 3rem 0;                      /* Vertical spacing */
    position: relative;
}

/* IMAGE FRAME
   - Creates vintage photo frame effect
   - Adds border and shadow
*/
.image-frame {
    position: relative;
    background: linear-gradient(135deg,
        var(--bg-tertiary) 0%,
        var(--bg-accent) 100%);
    padding: 12px;                        /* Frame thickness */
    box-shadow:
        0 10px 40px var(--shadow-deep),
        inset 0 0 0 1px var(--border-dark);
    transition: transform 0.3s ease;
}

/* Subtle lift on hover */
.image-frame:hover {
    transform: translateY(-4px);
}

/* Actual image element */
.image-frame img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* IMAGE CAPTION
   - Text below image explaining it
   - Italic, centered, smaller font
*/
figcaption {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 0.9375rem;
    font-style: italic;
    color: var(--text-tertiary);
    text-align: center;
    margin-top: 1rem;
    line-height: 1.6;
}

/* IMAGE SIZE VARIATIONS */

/* LARGE IMAGE
   - Constrained width so it doesn't overwhelm the page
   - Centred with auto margins
*/
.article-image.large {
    margin: 4rem auto;
    max-width: 680px;
}

.article-image.large .image-frame {
    padding: 14px;
}

/* MEDIUM IMAGE
   - Can be centered or floated
   - Good for portraits or documents
*/
.article-image.medium {
    max-width: 500px;
    margin: 2rem auto;                   /* Center by default */
}

/* Float medium images left on desktop */
.article-image.medium.float-left {
    float: left;
    margin: 1rem 2rem 1rem 0;           /* Space on right for text wrap */
}

/* Float medium images right on desktop */
.article-image.medium.float-right {
    float: right;
    margin: 1rem 0 1rem 2rem;           /* Space on left for text wrap */
}

/* SMALL IMAGE
   - For thumbnails or small details
   - Used in grid layouts
*/
.article-image.small {
    max-width: 300px;
}

/* CENTER ALIGNMENT
   - Force center alignment regardless of size
*/
.article-image.center {
    margin-left: auto;
    margin-right: auto;
    float: none;
}

/* IMAGE GRID LAYOUTS */

/* BASE GRID
   - Container for multiple images
   - Creates equal spacing between images
*/
.image-grid {
    display: grid;
    gap: 2rem;                           /* Space between images */
    margin: 3rem 0;
    clear: both;                         /* Always breaks out of any active float */
}

/* TWO-COLUMN GRID
   - Side-by-side images on desktop
   - Stacks on mobile (handled in responsive section)
*/
.image-grid.two-column {
    grid-template-columns: 1fr 1fr;      /* Equal width columns */
}

/* THREE-COLUMN GRID
   - Three images in a row on desktop
   - Stacks on mobile
*/
.image-grid.three-column {
    grid-template-columns: repeat(3, 1fr);
}

/* Remove bottom margin from images in grids */
.image-grid .article-image {
    margin: 0;
    display: flex;
    flex-direction: column;             /* Stack frame + caption vertically */
}

/* ── UNIFORM HEIGHT FOR IMAGES IN A ROW ───────────────────────────────────
   When images sit side-by-side in a grid, lock every frame to the same
   height so the row looks intentional rather than ragged.
   object-fit: cover crops to fill without stretching.
──────────────────────────────────────────────────────────────────────────── */

/* Shared fixed height for all grid images */
.image-grid .image-frame {
    flex: 1;                    /* Frame grows to fill available space above caption */
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.image-grid .image-frame img {
    flex: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    min-height: 0;
}

/* Two-column row: consistent height across both cells */
.image-grid.two-column {
    grid-template-rows: 1fr;
    align-items: stretch;
}

.image-grid.two-column .article-image,
.image-grid.two-column figure {
    height: 380px;
}

/* Three-column row: slightly shorter to keep images manageable */
.image-grid.three-column {
    grid-template-rows: 1fr;
    align-items: stretch;
}

.image-grid.three-column .article-image,
.image-grid.three-column figure {
    height: 320px;
}

/* figcaption inside grids: always sits outside and below the frame */
.image-grid figcaption {
    margin-top: 0.75rem;
    flex-shrink: 0;
    font-size: 0.875rem;
    padding: 0 0.25rem;
}

/* ============================================
   5. PULL QUOTES
   ============================================ */

/* PULL QUOTE CONTAINER
   - Large emphasized quotes from the text
   - Breaks up long text sections
   - Draws attention to key points
*/
.article-quote {
    position: relative;
    margin: 3rem 0;
    padding: 2.5rem 2rem;
    background: linear-gradient(135deg,
        var(--bg-highlight) 0%,
        var(--bg-secondary) 100%);
    border-left: 4px solid var(--accent-gold);
    box-shadow: 0 4px 20px var(--shadow-vintage);
    clear: both;                         /* Always breaks out of any active float */
}

/* LARGE DECORATIVE QUOTATION MARK
   - Appears in top-left of quote box
   - Purely decorative
*/
.quote-mark {
    position: absolute;
    top: 1rem;
    left: 1rem;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 6rem;                     /* Very large */
    line-height: 1;
    color: var(--accent-gold);
    opacity: 0.2;                         /* Subtle background effect */
    pointer-events: none;                 /* Don't interfere with text selection */
}

/* QUOTE TEXT
   - Larger than body text
   - Italic for emphasis
   - Indented to clear quotation mark
*/
.quote-text {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.5rem;
    font-style: italic;
    line-height: 1.6;
    color: var(--text-primary);
    padding-left: 2rem;                  /* Clear the quotation mark */
    position: relative;
    z-index: 1;
    margin: 0;
}

/* ============================================
   6. INFO BOXES
   ============================================ */

/* INFO BOX CONTAINER
   - Highlighted boxes for definitions, facts, context
   - Visually distinct from main text
   - Great for historical context or explanations
*/
.info-box {
    background-color: var(--bg-tertiary);
    border: 2px solid var(--border-medium);
    border-radius: 8px;
    padding: 2rem;
    margin: 3rem 0;
    box-shadow: 0 4px 20px var(--shadow-vintage);
    clear: both;                         /* Always breaks out of any active float */
}

/* INFO BOX TITLE
   - Heading at top of info box
   - Smaller than main headings
*/
.info-box-title {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--accent-sepia);
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* INFO BOX PARAGRAPHS
   - Slightly smaller than body text
   - Tighter line spacing
*/
.info-box p {
    font-size: 1.0625rem;
    line-height: 1.7;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.info-box p:last-child {
    margin-bottom: 0;
}

/* ============================================
   7. SECTION HEADINGS
   ============================================ */

/* SECTION HEADING (h2)
   - Breaks article into major sections
   - Decorative ornament before text
*/
.section-heading {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 3rem 0 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    clear: both;                         /* Always breaks out of any active float */
}

/* Decorative ornament (❦ symbol) */
.heading-ornament {
    color: var(--accent-gold);
    font-size: 1.25rem;
    opacity: 0.7;
}

/* SUBSECTION HEADING (h3)
   - Smaller divisions within sections
*/
.article-body h3 {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 2rem 0 1rem;
}

/* ============================================
   8. ARTICLE FOOTER
   ============================================ */

/* FOOTER CONTAINER
   - Contains tags, navigation, sharing
   - Top border separates from content
*/
.article-footer {
    border-top: 2px solid var(--border-medium);
    padding-top: 3rem;
    margin-top: 4rem;
}

/* ARTICLE TAGS
   - Keywords/categories for the article
   - Displayed as clickable badges
*/
.article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 3rem;
}

/* "Tags:" label */
.tag-label {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-tertiary);
}

/* Individual tag badge */
.tag {
    display: inline-block;
    padding: 0.375rem 0.875rem;
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.875rem;
    border-radius: 4px;
    border: 1px solid var(--border-light);
    transition: all 0.3s ease;
}

.tag:hover {
    background-color: var(--bg-accent);
    border-color: var(--accent-gold);
    color: var(--accent-rust);
    transform: translateY(-2px);
}

/* ARTICLE NAVIGATION
   - Links to previous/next articles
   - Two-column layout
*/
.article-navigation {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
}

/* Navigation link container */
.nav-link {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.5rem;
    background-color: var(--bg-secondary);
    border: 2px solid var(--border-medium);
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.nav-link:hover {
    background-color: var(--bg-highlight);
    border-color: var(--accent-gold);
    transform: translateX(4px);
}

/* Previous button aligns left */
.nav-link.prev {
    text-align: left;
}

/* Next button aligns right */
.nav-link.next {
    text-align: right;
}

.nav-link.next:hover {
    transform: translateX(-4px);         /* Opposite direction */
}

/* "Previous" or "Next" label */
.nav-direction {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
}

/* Article title in navigation */
.nav-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* SHARE SECTION
   - Social media sharing buttons
*/
.article-share {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    margin-bottom: 3rem;
    padding: 2rem;
    background-color: var(--bg-highlight);
    border-radius: 8px;
}

/* "Share this article:" label */
.share-label {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Share buttons container */
.share-buttons {
    display: flex;
    gap: 1rem;
}

/* Individual share button */
.share-button {
    width: 44px;
    height: 44px;
    border-radius: 50%;                  /* Circular buttons */
    border: 2px solid var(--border-medium);
    background-color: var(--bg-secondary);
    color: var(--accent-sepia);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;                   /* For tooltip positioning */
    box-shadow: 0 2px 4px var(--shadow-vintage);
}

/* Hover effect - button lifts and changes color */
.share-button:hover {
    background-color: var(--accent-sepia);
    border-color: var(--accent-sepia);
    color: var(--bg-primary);
    transform: translateY(-3px);
    box-shadow: 0 4px 8px var(--shadow-deep);
}

/* Active/pressed effect */
.share-button:active {
    transform: translateY(-1px) scale(0.95);
    box-shadow: 0 2px 4px var(--shadow-vintage);
}

/* Focus state for keyboard navigation */
.share-button:focus {
    outline: 2px solid var(--accent-gold);
    outline-offset: 2px;
}

/* Icon inside button */
.share-button svg {
    transition: transform 0.3s ease;
}

.share-button:hover svg {
    transform: scale(1.1);
}

/* BACK TO ARTICLES LINK
   - Returns to main articles page
   - Centered, button-style link
*/
.back-to-articles {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    background-color: var(--bg-secondary);
    border: 2px solid var(--border-medium);
    border-radius: 8px;
    color: var(--text-primary);
    text-decoration: none;
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 0.9375rem;
    font-weight: 600;
    transition: all 0.3s ease;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

.back-to-articles:hover {
    background-color: var(--bg-highlight);
    border-color: var(--accent-gold);
    transform: translateX(-4px);
}

/* ============================================
   9. RESPONSIVE BREAKPOINTS
   ============================================ */

/* TABLET SCREENS (1024px and below) */
@media (max-width: 1024px) {
    .article-page {
        padding: 3rem 2rem;
    }

    .article-title {
        font-size: 2.5rem;
    }

    .article-subtitle {
        font-size: 1.25rem;
    }

    .article-body {
        font-size: 1.125rem;             /* Slightly smaller on tablets */
    }

    /* Float images don't work well on tablets - stack them */
    .article-image.medium.float-left,
    .article-image.medium.float-right {
        float: none;
        margin: 2rem auto;
        max-width: 600px;
    }

    /* Grid row heights: reduce on standard tablet */
    .image-grid.two-column .article-image,
    .image-grid.two-column figure {
        height: 300px;
    }

    .image-grid.three-column .article-image,
    .image-grid.three-column figure {
        height: 240px;
    }
}

/* ── iPAD / PORTRAIT TABLET (820px and below) ──────────────────────────────
   iPad Pro 11" portrait: 834px
   iPad Air portrait:     820px
   iPad Mini portrait:    768px
   This breakpoint targets portrait orientation before the mobile stack.
──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
    .article-page {
        padding: 2.5rem 1.75rem;
    }

    .article-title {
        font-size: 2.25rem;
    }

    .article-body {
        font-size: 1.1rem;
    }

    /* Three-column → two-column on iPad portrait */
    .image-grid.three-column {
        grid-template-columns: 1fr 1fr;
    }

    /* Third image spans full width so the grid doesn't orphan it */
    .image-grid.three-column .article-image:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    /* Row heights for iPad two-column equivalent */
    .image-grid.two-column .article-image,
    .image-grid.two-column figure,
    .image-grid.three-column .article-image,
    .image-grid.three-column figure {
        height: 280px;
    }

    /* Medium standalone images: constrain width for iPad portrait */
    .article-image.medium {
        max-width: 85%;
    }

    /* Section headings: tighten gap between ornament and text */
    .section-heading {
        font-size: 1.875rem;
        gap: 0.75rem;
    }

    /* Navigation: keep two-column on iPad but tighten spacing */
    .article-navigation {
        gap: 1.25rem;
    }
}

/* MOBILE SCREENS (768px and below) */
@media (max-width: 768px) {
    .article-page {
        padding: 2rem 1.5rem;
    }

    .article-header {
        padding-bottom: 2rem;
        margin-bottom: 2rem;
    }

    /* Breadcrumb wraps on small screens */
    .breadcrumb {
        flex-wrap: wrap;
    }

    .article-title {
        font-size: 2rem;
    }

    .article-subtitle {
        font-size: 1.125rem;
    }

    .article-body {
        font-size: 1.0625rem;
    }

    /* Smaller drop cap on mobile */
    .article-body .drop-cap-first::first-letter {
        font-size: 3.5rem;
    }

    /* Stack ALL image grids on mobile — single column */
    .image-grid.two-column,
    .image-grid.three-column {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        justify-items: center;           /* Centre grid items */
    }

    /* Third-child span reset (not needed in single-column layout) */
    .image-grid.three-column .article-image:last-child:nth-child(odd) {
        grid-column: auto;
    }

    /* Centre each figure and cap its width */
    .image-grid .article-image,
    .image-grid figure {
        width: 100%;
        max-width: 480px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Fixed heights in single-column */
    .image-grid.two-column .article-image,
    .image-grid.two-column figure,
    .image-grid.three-column .article-image,
    .image-grid.three-column figure {
        height: 300px;
    }

    /* Adjust image sizes for mobile */
    .article-image.large .image-frame {
        padding: 10px;
    }

    .article-image.large {
        max-width: 100%;
    }

    .article-image.medium {
        max-width: 100%;
    }

    /* Pull quotes adjust for mobile */
    .article-quote {
        padding: 2rem 1.5rem;
    }

    .quote-mark {
        font-size: 4rem;
    }

    .quote-text {
        font-size: 1.25rem;
        padding-left: 1.5rem;
    }

    /* Info boxes get smaller padding */
    .info-box {
        padding: 1.5rem;
    }

    /* Section headings stack on mobile */
    .section-heading {
        font-size: 1.75rem;
        flex-direction: column;
        align-items: flex-start;
    }

    /* Navigation stacks on mobile */
    .article-navigation {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    /* Share buttons adjust */
    .share-button {
        width: 40px;
        height: 40px;
    }
}

/* SMALL MOBILE (480px and below) */
@media (max-width: 480px) {
    .article-page {
        padding: 1.5rem 1rem;
    }

    .article-title {
        font-size: 1.75rem;
    }

    .article-body {
        font-size: 1rem;
    }

    /* Even smaller drop cap */
    .article-body .drop-cap-first::first-letter {
        font-size: 3rem;
    }

    .article-image.large .image-frame,
    .article-image.medium .image-frame {
        padding: 8px;                    /* Thinner frames on small screens */
    }

    /* Shorter row images on small phones */
    .image-grid.two-column .article-image,
    .image-grid.two-column figure,
    .image-grid.three-column .article-image,
    .image-grid.three-column figure {
        height: 240px;
        max-width: 100%;
    }
}

/* ============================================
   DARK MODE ADJUSTMENTS
   ============================================ */

/* Dark mode is handled by CSS variables
   defined in main.css. When [data-theme="dark"]
   is applied to body, all var(--color-name)
   values automatically update. No additional
   dark mode CSS needed here! */

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    /* Hide navigation and interactive elements when printing */
    .breadcrumb,
    .article-reading-time,
    .article-navigation,
    .article-share,
    .back-to-articles,
    .site-header,
    .site-footer {
        display: none;
    }

    /* Optimize typography for print */
    .article-body {
        font-size: 12pt;
        line-height: 1.6;
    }

    /* Remove backgrounds and shadows for print */
    .article-quote,
    .info-box {
        background: none;
        box-shadow: none;
        border: 1px solid #000;
    }

    /* Ensure images don't break across pages */
    .article-image {
        page-break-inside: avoid;
    }
}