:root {
    --green: #227811;
    --text: #333;
}

body {
    font-family: system-ui, -apple-system, sans-serif;
    line-height: 1.6;
    color: var(--text);

    /* This is the magic combo */
    width: 90%;           /* On small screens, use 90% of the width */
    max-width: 1100px;    /* On big screens, never go wider than 1100px */

    margin: 0 auto;       /* Keep it centered */
    padding: 2rem 0;      /* Top/Bottom padding */
    background: #fff;
}

/* Header & Nav */
header {
    border-bottom: 3px solid var(--green);
    margin-bottom: 2rem;
}

header p a {
    font-size: 1.75rem;
    font-weight: bold;
    color: var(--green);
    text-decoration: none;
}

nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}

nav a {
    text-decoration: none;
    color: var(--text);
    font-weight: 600;
}

nav a:hover {
    color: var(--green);
}

/* Content */
h1, h2, h3, h5 { color: var(--green); }

/* 1. Global Image Wrap (Bio Pages) */
/* This targets every image in your main content area */
main img {
    float: left;
    margin: 0 25px 15px 0;
    max-width: 40%;
    height: auto;
    border: 1px solid #eee;
}

/* 2. Index Page Specifics (The Photo Group) */
/* This overrides the float for the two images on the index page */
.photo-group {
    float: left;
    margin: 0 25px 15px 0;
    display: flex;
    gap: 10px;
}

.photo-group img {
    float: none; /* Prevents individual images from floating away from each other */
    margin: 0;
    max-width: 151px; /* Forces the index thumb size */
}

/* 3. The "Clearfix" - IMPORTANT */
/* This prevents the floated images from "bleeding" into the next section
   or making the footer jump up next to the photo. */
h1, h2, h3, h5, footer, hr {
    clear: both;
}

/* 4. Mobile Responsiveness */
@media (max-width: 600px) {
    main img, .photo-group {
        float: none;
        display: block;
        margin: 0 auto 20px auto;
        max-width: 100%;
    }
    .photo-group {
        display: flex;
        justify-content: center;
    }
}

/* Responsive Menu */
@media (max-width: 600px) {
    body { padding: 1rem; }
    nav ul { flex-direction: column; gap: 0.5rem; }
}

/* 1. Wrap text around images */
/*article img {
/*    float: left;            /* Push image to the left */
/*    margin: 0 20px 10px 0; /* Add space: [Top] [Right] [Bottom] [Left] */
/*    max-width: 40% !important; /* Keep the image from taking over on tablet */
}*/
/* Standard wrap for single bio photos */
article img {
    float: left;
    margin: 0 25px 15px 0;
    border: 1px solid #eee;
}

/* 2. Fix for "Float Overlap" */
/* This ensures that if a section is short, the next heading won't
   accidentally wrap around the photo too. */
article::after {
    content: "";
    display: table;
    clear: both;
}

/* 3. Mobile Responsiveness */
/* On small screens, wrapping text looks "squished."
   This stops the wrapping on phones so the photo stays centered. */
@media (max-width: 600px) {
    article img {
        float: none;
        display: block;
        margin: 0 auto 20px auto; /* Center the image */
        max-width: 80rem;         /* Let it be larger on mobile */
    }
}
/* Keep index photos side-by-side instead of wrapping text */
/*main[role="main"] > p img {
    float: none;
    display: inline-block;
}*/
/* 1. The container for the two photos on the index page */
.photo-group {
    float: left;
    margin: 0 25px 15px 0;
    display: flex;      /* Keeps images side-by-side */
    align-items: flex-start;
    gap: 10px;         /* Space between the two photos */
}

/* 2. Style the images inside that group */
.photo-group img {
    float: none;       /* Override the general float:left we added earlier */
    margin: 0;         /* Use the gap from the container instead */
}

/* 3. Responsive fix for the group */
@media (max-width: 600px) {
    .photo-group {
        float: none;
        display: flex;
        justify-content: center; /* Center them on mobile */
        margin: 0 0 20px 0;
    }
}