<style type="text/css">
    /* Core Layout Styles */
    #wrapper {
        max-width: 1200px;
        margin: 0 auto;
        padding: 15px;
        font-family: Arial, sans-serif;
    }
    
    /* Strict 500px Exact-Width Class for ALL Left-Side Enclosures on Desktop */
    .exact-500 {
        width: 500px;
        box-sizing: border-box; /* Includes padding & border within the width calculation */
    }

    /* 100% Width Double Line Divider */
    .double-divider {
        border: none;
        border-top: 4px double black;
        width: 100%;
        margin: 15px 0 0 0; 
        padding: 0;
    }
    
    header {
        /* border: 2px solid black; */
        /* background-color: #ffcccc; */ /* Soft Red */
        max-height: 100px; /* Guarantees the enclosure is 100 pixels or less */
        height: 100px; 
        margin-bottom: 0;
        
        /* Flexbox setups to push content completely down to the bottom edge */
        display: flex;
        align-items: flex-end; 
        padding: 0 10px 0 10px; /* Sits directly at the absolute floor */
    }

    header h1 {
        margin: 0; 
        margin-bottom: -0.15em; /* Counteracts typographic font descender gaps to flush against the line */
        line-height: 1;
        width: 100%; /* Spans the entire width of the box padding */
        
        /* Spreads the dynamically generated letters evenly across the enclosure */
        display: flex;
        justify-content: space-between; 
    }

    /* Keeps whitespace characters acting as intentional spacing between the words */
    header h1 span.space {
        width: 1.5rem; 
    }

    /* Flex container containing Left Elements (Nav, Content) and Right Column */
    .main-container {
        display: flex;
        gap: 15px;
        margin-top: 1em; /* Pushes the row baseline exactly 1em below the double line */
    }

    /* Left side stacked column wrapper locked strictly to 500px on desktop */
    .left-stack {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 500px;
        box-sizing: border-box;
    }
    
    nav {
        /* border: 2px solid black; */
        /* background-color: #ccffcc; */ /* Soft Green */
        padding: 10px;
        margin: 0; 
    }
    
    .nav {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-wrap: wrap; 
        justify-content: space-between; /* Spreads elements evenly to fill the enclosure width */
    }
    
    #leftcolumn {
        /* border: 2px solid black; */
        /* background-color: #ccccff; */ /* Soft Blue */
        padding: 15px;
    }

    #leftcolumn h3 {
        text-align: center; /* Centers the words artist statement inside its enclosure */
        margin-top: 0;
    }

    /* Standard paragraph style layout, left-justified */
    .statement-line {
        text-align: left; /* Justify text to the left boundary */
        margin: 0.5em 0;
        line-height: 1.4;
    }
    
    .thumbnail-gallery {
        /* border: 2px solid black; */
        /* background-color: #ffffcc; */ /* Soft Yellow */
        padding: 10px;
        display: flex;
        flex-wrap: wrap; 
        gap: 10px;
        margin-top: 15px;
    }
    
    .thumbnail-item {
        /* border: 2px solid black; */
        /* background-color: #ffccff; */ /* Soft Purple */
        padding: 5px;
        margin: 5px;
        height: 100px;
        display: flex;

    }
    
    /* Right Column sits naturally at the top of the main container (exactly 1em below the double line) */
    .Around {
        flex: 0 0 400px; /* Fixed width for the large image container on desktop */
         border: 2px solid black; 
         background-color: #ccffff;  /* Soft Cyan */
        padding: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 400px;
        align-self: flex-start; /* Prevents container from auto-stretching vertically */
    }
    
    .Copyright {
        /* border: 2px solid black; */
        /* background-color: #e0e0e0; */ /* Medium Gray */
        padding: 10px;
        margin-top: 10px;
        text-align: center; /* Centers the copyright words inside the enclosure */
    }

    /* ==========================================================================
       RESPONSIVE DESIGN RULES FOR PHONES AND TABLETS 
       ========================================================================= */
    @media screen and (max-width: 980px) {
        /* Drop side-by-side flex layouts into a stacked layout row flow */
        .main-container {
            flex-direction: column;
            gap: 20px;
        }

        /* Convert strict 500px left components to adapt to screen width fluidly */
        .exact-500, 
        .left-stack {
            width: 100% !important;
        }

        /* Adjust the Large Image Display on tablet and mobile viewports */
        .Around {
            flex: 1 1 auto; /* Allow full fluid width extension */
            width: 100%;
            box-sizing: border-box;
            min-height: 300px; /* Adjusted smaller for mobile viewscreen compactness */
        }

        /* Prevent navigation strings from bunching up on very tight phone widths */
        .nav {
            gap: 10px;
        }
    }
</style>