/* Define color variables (Consistent with previous pages) */
:root {
    --bg-color: #FDF8F5;
    --text-color: #4A4A4A;
    --heading-color: #8B735B;
    --accent-color: #B58D7B;
    --floral-accent-color: #C8A2A3; /* Can be used for subtle accents */
    --white-color: #ffffff;
    --border-color: #EAE0DC;
}

/* Basic Reset */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* === MOBILE FIRST STYLES === */
body {
    font-family: 'Lato', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.8; /* Slightly more line height for readability */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 16px;
}

.container {
    width: 90%;
    max-width: 900px; /* Max width suitable for reading */
    margin: 0 auto;
    padding: 0 15px;
}

/* Page Heading */
.page-title {
    font-family: 'Playfair Display', serif;
    font-size: 2.8em; /* Mobile size */
    color: var(--heading-color);
    text-align: center;
    margin: 40px 0 30px 0;
    font-weight: 700;
}

/* Story Section Styling */
.story-section {
    margin-bottom: 50px; /* Space between sections */
}

.story-section img {
    display: block;
    width: 100%; /* Full width on mobile */
    max-width: 400px; /* Limit max size */
    height: auto;
    margin: 0 auto 20px auto; /* Center image and add space below */
    border-radius: 8px; /* Slightly rounded corners */
    box-shadow: 0 5px 15px rgba(0,0,0,0.07);
    border: 4px solid var(--white-color);
}

.story-section h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.6em; /* Mobile size */
    color: var(--accent-color);
    margin-bottom: 15px;
    font-weight: 700;
    text-align: center; /* Center headings on mobile */
}

.story-section p {
    font-size: 1em;
    color: var(--text-color);
    margin-bottom: 1em; /* Space between paragraphs */
    text-align: left; /* Justify potentially too ragged */
}

/* Add a subtle separator */
.story-section:not(:last-child)::after {
    content: '';
    display: block;
    width: 80px;
    height: 1px;
    background-color: var(--border-color);
    margin: 60px auto 0 auto; /* Center separator */
}


/* === TABLET & DESKTOP STYLES (min-width: 768px) === */
@media (min-width: 768px) {
    .container {
        width: 85%;
    }

    .page-title {
        font-size: 3.5em;
        margin: 60px 0 50px 0;
    }

    .story-section {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Two equal columns */
        gap: 40px; /* Space between columns */
        align-items: center; /* Vertically align items */
        margin-bottom: 70px;
    }

    /* Text Alignment */
    .story-section .story-text {
        text-align: left; /* Align text left */
    }
    .story-section h3 {
        text-align: left; /* Align headings left */
        font-size: 1.9em;
    }
    .story-section p {
        font-size: 1.05em;
    }


    .story-section img {
        width: 100%; /* Image takes full column width */
        max-width: none; /* Remove mobile max-width */
        margin-bottom: 0; /* Remove bottom margin */
    }

    /* Alternate Layout: Image on the right */
    .story-section.layout-image-right .story-image {
        grid-column: 2 / 3; /* Place image in second column */
        grid-row: 1 / 2;    /* Place image in first row */
    }
    .story-section.layout-image-right .story-text {
        grid-column: 1 / 2; /* Place text in first column */
        grid-row: 1 / 2;    /* Place text in first row */
    }

    /* Default Layout: Image on the left (already handled by default order) */
    /* .story-section.layout-image-left .story-image { grid-column: 1 / 2; } */
    /* .story-section.layout-image-left .story-text { grid-column: 2 / 3; } */

    /* Separator Adjustment */
    .story-section:not(:last-child)::after {
        margin-top: 80px;
    }
}

/* === LARGER DESKTOP STYLES (min-width: 1024px) === */
@media (min-width: 1024px) {
    .container {
        width: 80%;
    }
    .page-title {
        font-size: 3.8em;
    }
    .story-section {
        gap: 60px; /* More gap on large screens */
    }
    .story-section h3 {
        font-size: 2em;
    }
    .story-section p {
        font-size: 1.1em; /* Slightly larger text */
        line-height: 1.8;
    }
}