/* Reset and Base Styles */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        a {
            display: inline;
        }
        
        body {
            font-family: 'Helvetica Neue', Arial, sans-serif;
            line-height: 1.6;
            color: #4a443f; /* Subtle Dark Clay Brown */
            background-color: #faf8f5; /* Delicate Parchment White */
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        /* Top Header Stack: Elements line up cleanly in a single column */
        .banner-stack {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            background-color: #e6dfd7; 
            border-bottom: 2px solid #dcd4cb;
        }
        
        /* Forces the banner image to always scale to 100% of the screen width */
        .banner-image-wrapper {
            width: 100%;
            max-width: 100vw;
            overflow: hidden;
            max-width: 1000px;
        }
        .banner-image-wrapper img {
            width: 100%;
            height: auto;
            display: block;
            margin: 10px; 
            margin-bottom: 10px;          /* Strict 10px layout margin */
     }

        /* Centered text container positioned directly under the responsive image banner */
        .banner-text-block {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            padding: 35px 20px;
            padding-top: 0px;
            width: 100%;
            max-width: 1000px;
        }
        .banner-text-block h1 {
            font-size: 2.2rem;
            /* margin-bottom: 10px; */
            color: #423d38;
            font-weight: 500;
        }

        .banner-text-block h2 {
            margin-bottom: 5px;
            color: #423d38;
            font-size: 1.4rem;
            font-weight: 500;
            margin-top: 10px;
       }

        .banner-text-block p {
            font-size: 1.1rem;
            color: #615a52;
            font-weight: 300;
            margin-bottom: 10px;    
        }

        /* Master Center Content Layout */
        .main-container {
            max-width: 1000px;
            width: 100%;
            margin: 40px auto;
            background: #ffffff;
            border: 1px solid #ebdcd0; 
            border-radius: 4px;
            padding: 25px;
        }

        /* Content Row: Links a specific group of images strictly to its text block */
        .content-row {
            display: flex;
            width: 100%;
            /* margin-bottom: 35px; */
            align-items: flex-start; /* Aligns the tops of images and text */
            /* border-bottom: 1px solid #f2ece6;  */
            /*padding-bottom: 30px;*/
        }
        .content-row:last-child {
            margin-bottom: 0;
            border-bottom: none;
            padding-bottom: 0;
        }

        /* Left Column: Dedicated image zone */
        .left-column {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;       /* Smoothly wraps images horizontally if space fills up */
            gap: 12px;             
            flex: 0 0 auto;        
            margin: 10px;          /* Strict 10px layout margin */
            justify-content: flex-start; /* Guarantees images are left-justified */
        }

        /* Enforces strict 150px constraint on all images */
        .image-box {
            width: 150px;          
            flex: 0 0 150px;
        }
        .image-box img {
            width: 100%;
            height: auto;
            display: block;
            border-radius: 2px;
            border: 1px solid #e3ded8; 
            filter: sepia(15%); /* Muted organic filter overlay */
        }

        /* Invisible placeholder keeps paragraph text perfectly aligned when no image exists */
        .image-placeholder {
            width: 150px;
            flex: 0 0 150px;
            visibility: hidden;    
        }

        /* Right Column: Dedicated multi-paragraph text zone */
        .right-column {
            display: flex;
            flex-direction: column; /* Organises paragraphs straight down */
            flex: 1;                
            margin: 11px;           /* Strict 11px layout margin */
        }
        .right-column h2 {
            margin-bottom: 0px;
            color: #5c534c;        /* Soft Umber Gray */
            font-size: 1.4rem;
            font-weight: 500;
        }
        .right-column p {
            margin-bottom: 15px;    
            color: #615a52;        /* Readable dark earth body copy */
        }
        .right-column p:last-child {
            margin-bottom: 0;       
        }

        /* Bottom Footer Styles: Single Column Text */
        .footer {
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            background-color: #423d38; /* Compost/Deep Soil Dirt */
            color: #dcd7d2;
            padding: 20px;
            margin-top: auto;
            width: 100%;
            font-size: 0.85rem;
            letter-spacing: 0.5px;
        }

        /* Navigation Menu */
        .main-nav {
            background-color: #6e6153; /* Muted slate brown */
            width: 100%;
        }

        .main-nav ul {
            display: flex;
            justify-content: center;
            list-style: none;
            margin: 0;
            padding: 0;
            flex-wrap: wrap;
        }

        .main-nav a {
            display: block;
            color: #f7f5f0;
            text-decoration: none;
            padding: 15px 25px;
            font-weight: bold;
            transition: background-color 0.3s;
        }

        .main-nav a:hover {
            background-color: #8c7b6b;
        }

        /* Responsive Settings for Mobile Viewports */
        @media (max-width: 768px) {
            .content-row {
                flex-direction: column;
                align-items: center;
            }
            .left-column {
                margin: 10px auto 15px auto;
                justify-content: center;
            }
            .image-placeholder {
                display: none;       
            }
            .right-column {
                text-align: center;
                margin: 11px 0;
            }
        }