body {
            min-height: 100vh;
            background-color: #222222;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 1rem;
        }
        @media (min-width: 640px) {
            body {
                padding: 1.5rem;
            }
        }
        @media (min-width: 1024px) {
            body {
                padding: 2rem;
            }
        }
        h1 {
            font-size: 2.25rem;
            line-height: 2.5rem;
            font-weight: 800;
            color: #2d3748;
            margin-bottom: 2rem;
            margin-top: 1rem;
            text-align: center;
        }
        /* Removed #gallery-container as it was likely conflicting with masonry-grid */
        /* #gallery-container {
            position: relative;
            width: 55rem;
            margin-left: auto;
            margin-right: auto;
            background-color: none;
            padding: 1rem;
        }
        @media (min-width: 640px) {
            #gallery-container {
                padding: 1.5rem;
            }
        } */
        #loading-indicator {
            text-align: center;
            color: #a0aec0;
            padding-top: 5rem;
            padding-bottom: 5rem;
        }
        .masonry-item {
            position: absolute;
            overflow: hidden;
            border-radius: 0.125rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            transition: all 0.3s ease-in-out;
            transform-style: preserve-3d;
        }
        .masonry-item img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 0.125rem;
            filter: grayscale(100%);
            transition: filter 0.3s ease-in-out, transform 0.3s ease-in-out;
        }
        .masonry-item:hover img {
            filter: grayscale(0%);
            transform: scale(1.05) rotateX(5deg) rotateY(-5deg);
        }
        p.text-gray-600 {
            color: #718096;
            font-size: 0.875rem;
            line-height: 1.25rem;
            margin-top: 2rem;
            text-align: center;
            max-width: 42rem;
        }
        p.text-gray-600 span.font-semibold {
            font-weight: 600;
        }

        /* --- Updated Shell Layout CSS --- */
        .wrapper {
            width: 100%; /* Make wrapper take full width */
            max-width: 1300px; /* Increase max-width for overall content */
            margin: 0 auto; /* Center the wrapper */
            padding: 0 1rem; /* Add some padding on the sides */
            box-sizing: border-box; /* Include padding in width */
        }

        main {
            width: 100%; /* Main should take full width of wrapper */
        }

        #main {
            width: 100%; /* #main should take full width of main */
            max-width: 100%; /* Ensure it doesn't get artificially limited */
        }

        .substage {
            width: 100%; /* Substage should take full width of #main */
            padding: 0; /* Remove any default padding that might shrink content */
            margin: 0 auto; /* Center substage */
            box-sizing: border-box;
        }

        section {
            width: 100%;
            max-width: 100%; /* Ensure section doesn't limit masonry grid */
            padding: 0; /* Remove default padding */
        }


        /* Styles for book covers (moved from the second code block) */
        /* Base Styles for all Book Covers */
        .book-cover {
            display: flex;
            flex-direction: column;
            justify-content: center; /* Default vertical centering */
            align-items: center;    /* Default horizontal centering */
            text-align: center;     /* Default text alignment */
            padding: 1.5em; /* Base padding for all sides */
            box-sizing: border-box; /* Include padding in width/height */
            border: 1px solid rgba(0, 0, 0, 0.05); /* Very subtle border */
            color: #333; /* Dark grey for text */
            position: relative; /* For absolute positioning within */
            overflow: hidden; /* Crucial for content staying within boundaries */
            border-radius: 3px; /* Slightly rounded corners */
            box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Subtle shadow */
            break-inside: avoid; /* Crucial for masonry layout with CSS columns */
            margin-bottom: 20px; /* Vertical gap between items */
        }

        /* Wrapper for content inside ratio divs to allow flexible spacing */
        .book-content {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 1.5em;
            box-sizing: border-box;
        }


        .book-cover h1 {
            margin: 0; /* Reset default margins */
            line-height: 1.1; /* Tighter line height for titles */
            word-break: break-word; /* Prevents long words from overflowing */
            hyphens: auto; /* Helps with word wrapping */
            padding: 0; /* Reset padding, specific padding handled by designs */
            flex-shrink: 0; /* Prevent shrinking when space is tight */
            min-height: 1em; /* Ensure some height even if content is empty */
            color: inherit; /* Inherit color from book-cover */
        }

        .book-cover h2 {
            margin: 0; /* Reset default margins */
            font-size: 0.85em;
            font-weight: normal;
            opacity: 0.7; /* Slightly faded author name */
            line-height: 1.2;
            flex-shrink: 0; /* Prevent shrinking when space is tight */
            min-height: 0.85em; /* Ensure some height even if content is empty */
            color: inherit; /* Inherit color from book-cover */
        }

        /* Aspect Ratio Definitions (8 different ratios) */
        /* Each ratio-X class will contain a .book-content div for flexible internal layout */

        /* Base Ratios (original heights) */
        .ratio-1-5 { width: 100%; padding-bottom: 150%; height: 0; position: relative; }
        .ratio-1-6 { width: 100%; padding-bottom: 160%; height: 0; position: relative; }
        .ratio-1-4 { width: 100%; padding-bottom: 140%; height: 0; position: relative; }
        .ratio-1-3 { width: 100%; padding-bottom: 130%; height: 0; position: relative; }
        .ratio-1-2 { width: 100%; padding-bottom: 120%; height: 0; position: relative; }
        .ratio-1-7 { width: 100%; padding-bottom: 170%; height: 0; position: relative; }
        .ratio-1-8 { width: 100%; padding-bottom: 180%; height: 0; position: relative; }
        .ratio-1-9 { width: 100%; padding-bottom: 190%; height: 0; position: relative; }

        /* Variations for Height (padding-bottom) and Width */
        /* Varying height by +/- 2-3% of the default (e.g., 150% for 1-5)
           Varying width by +/- 2-3% from 100% */

        /* Ratio 1:1.5 variations */
        .ratio-1-5-alt1 { width: 98%; padding-bottom: 147%; height: 0; position: relative; } /* -2% height, -2% width */
        .ratio-1-5-alt2 { width: 102%; padding-bottom: 153%; height: 0; position: relative; } /* +2% height, +2% width */

        /* Ratio 1:1.6 variations */
        .ratio-1-6-alt1 { width: 97%; padding-bottom: 157%; height: 0; position: relative; } /* -3% height, -3% width */
        .ratio-1-6-alt2 { width: 103%; padding-bottom: 163%; height: 0; position: relative; } /* +3% height, +3% width */

        /* Ratio 1:1.4 variations */
        .ratio-1-4-alt1 { width: 98%; padding-bottom: 137%; height: 0; position: relative; }
        .ratio-1-4-alt2 { width: 102%; padding-bottom: 143%; height: 0; position: relative; }

        /* Ratio 1:1.3 variations */
        .ratio-1-3-alt1 { width: 97%; padding-bottom: 127%; height: 0; position: relative; }
        .ratio-1-3-alt2 { width: 103%; padding-bottom: 133%; height: 0; position: relative; }

        /* Ratio 1:1.2 variations */
        .ratio-1-2-alt1 { width: 98%; padding-bottom: 118%; height: 0; position: relative; }
        .ratio-1-2-alt2 { width: 102%; padding-bottom: 122%; height: 0; position: relative; }

        /* Ratio 1:1.7 variations */
        .ratio-1-7-alt1 { width: 97%; padding-bottom: 167%; height: 0; position: relative; }
        .ratio-1-7-alt2 { width: 103%; padding-bottom: 173%; height: 0; position: relative; }

        /* Ratio 1:1.8 variations */
        .ratio-1-8-alt1 { width: 98%; padding-bottom: 177%; height: 0; position: relative; }
        .ratio-1-8-alt2 { width: 102%; padding-bottom: 183%; height: 0; position: relative; }

        /* Ratio 1:1.9 variations */
        .ratio-1-9-alt1 { width: 97%; padding-bottom: 187%; height: 0; position: relative; }
        .ratio-1-9-alt2 { width: 103%; padding-bottom: 193%; height: 0; position: relative; }


        /* --- Design 1: Classic Serif, Centered --- */
        .design-1 { background-color: #f8f8f8; font-family: 'Merriweather', serif; }
        .design-1 .book-content h1 { font-size: 2.2em; font-weight: 700; margin-bottom: 0.5em; }
        .design-1 .book-content h2 { font-size: 0.9em; opacity: 0.8; margin-top: 0.5em; }

        /* --- Design 2: Playful Serif, Top Left Aligned --- */
        .design-2 { background-color: #fcf6ed; font-family: 'Playfair Display', serif; }
        .design-2 .book-content { justify-content: flex-start; align-items: flex-start; text-align: left; padding-top: 2.5em; padding-left: 2.2em; }
        .design-2 .book-content h1 { font-size: 2.4em; font-weight: 700; margin-bottom: 0.2em; }
        .design-2 .book-content h2 { font-size: 0.8em; opacity: 0.85; margin-top: 0.5em; }

        /* --- Design 3: Modern Sans-Serif, Bottom Right Aligned --- */
        .design-3 { background-color: #eef7f7; font-family: 'Roboto', sans-serif; }
        .design-3 .book-content { justify-content: flex-end; align-items: flex-end; text-align: right; padding-bottom: 2.5em; padding-right: 2.2em; }
        .design-3 .book-content h1 { font-size: 1.4em; font-weight: 700; margin-bottom: 0.5em; text-transform: uppercase; }
        .design-3 .book-content h2 { font-size: 0.85em; letter-spacing: 0.5px; opacity: 0.9; margin-top: 0.5em; }

        /* --- Design 4: Elegant Serif, Large Title, Small Author Centered --- */
        .design-4 { background-color: #fdfdfd; font-family: 'Lora', serif; }
        .design-4 .book-content h1 { font-size: 1.6em; font-weight: 700; line-height: 1; margin-bottom: 0.2em; }
        .design-4 .book-content h2 { font-size: 0.7em; font-style: italic; opacity: 0.75; margin-top: 0.3em; }

        /* --- Design 5: Bold Sans-Serif, Top Centered, Author Lower Left --- */
        .design-5 { background-color: #f5f5f5; font-family: 'Open Sans', sans-serif; }
        .design-5 .book-content { justify-content: space-between; align-items: center; text-align: center; } /* Space between H1 and H2 */
        .design-5 .book-content h1 { font-size: 1.8em; font-weight: 700; margin-bottom: auto; } /* Push H1 to top */
        .design-5 .book-content h2 { font-size: 0.9em; opacity: 0.8; margin-top: auto; align-self: flex-start; text-align: left; padding-left: 0.5em; } /* Push H2 to bottom-left */

        /* --- Design 6: Minimal Sans-Serif, Central, Author Below with Line --- */
        .design-6 { background-color: #f2f8f8; font-family: 'Montserrat', sans-serif; }
        .design-6 .book-content h1 { font-size: 2em; font-weight: 400; letter-spacing: 1px; margin-bottom: 0.8em; }
        .design-6 .book-content h2 {
            font-size: 0.75em;
            padding-top: 0.5em;
            border-top: 1px solid rgba(0, 0, 0, 0.1);
            opacity: 0.8;
            width: 80%; /* Constrain width for the line effect */
            margin-top: 0.8em;
        }

        /* --- Design 7: Serif, Title Spaced Out, Author Below --- */
        .design-7 { background-color: #fcfaf0; font-family: 'PT Serif', serif; }
        .design-7 .book-content h1 {
            font-size: 2.3em;
            font-weight: 700;
            letter-spacing: 2px; /* Wide letter spacing */
            line-height: 1.2;
            margin-bottom: 0.8em;
        }
        .design-7 .book-content h2 { font-size: 0.8em; margin-top: 1.2em; opacity: 0.85; }

        /* --- Design 8: Condensed Sans-Serif, Title Top, Author Bottom Right --- */
        .design-8 { background-color: #e0f2f7; font-family: 'Oswald', sans-serif; }
        .design-8 .book-content { justify-content: space-between; align-items: flex-end; text-align: right; padding-top: 2em; padding-right: 2em; padding-bottom: 2em; }
        .design-8 .book-content h1 {
            font-size: 2.5em;
            font-weight: 400;
            text-transform: uppercase;
            line-height: 1;
            align-self: flex-start; /* Title to the left (top-left aligned with flex-start) */
            text-align: left; /* Keep title text left-aligned */
            margin-top: 0;
            margin-bottom: auto; /* Push it to the top */
        }
        .design-8 .book-content h2 {
            font-size: 0.7em;
            letter-spacing: 0.5px;
            opacity: 0.7;
            margin-top: auto; /* Push it to the bottom */
            margin-bottom: 0;
        }

        /* --- Design 9: Serif with Small Caps Feel, Centered --- */
        .design-9 { background-color: #fefee7; font-family: 'Crimson Text', serif; }
        .design-9 .book-content h1 {
            font-size: 2.5em;
            font-weight: 700;
            font-variant: small-caps; /* Simulates small caps */
            letter-spacing: 0.5px;
            margin-bottom: 0.8em;
        }
        .design-9 .book-content h2 { font-size: 0.9em; opacity: 0.75; margin-top: 0.8em; }

        /* --- Design 10: Sans-Serif, Author Above Title, Boxed Title --- */
        .design-10 { background-color: #f0f0f5; font-family: 'Lato', sans-serif; }
        .design-10 .book-content { flex-direction: column; justify-content: center; }
        .design-10 .book-content h2 { font-size: 0.9em; margin-bottom: 0.5em; opacity: 0.8; order: 1; } /* Order to place above H1 */
        .design-10 .book-content h1 {
            font-size: 2.1em;
            font-weight: 700;
            border: 2px solid #aaa; /* Box around title */
            padding: 0.5em 0.8em;
            display: inline-block; /* To make border fit content */
            margin-top: 0.5em; /* Space from author */
            order: 2; /* Place below H2 */
        }

        /* --- Design 11: Serif, Bold Title, Thin Author, Centered --- */
        .design-11 { background-color: #fcfbf8; font-family: 'Playfair Display', serif; }
        .design-11 .book-content h1 { font-size: 3em; font-weight: 700; line-height: 0.9; margin-bottom: 0.8em; }
        .design-11 .book-content h2 { font-size: 0.8em; font-weight: 400; margin-top: 0.8em; opacity: 0.7; }

        /* --- Design 12: Sans-Serif, Title Split by Author Line --- */
        .design-12 { background-color: #f7f7f7; font-family: 'Fira Sans', sans-serif; }
        .design-12 .book-content { justify-content: space-around; padding-top: 1em; padding-bottom: 1em; }
        .design-12 .book-content h1 {
            font-size: 1.6em;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            flex-grow: 1; /* Allow title to take up available space */
        }
        .design-12 .book-content h2 {
            font-size: 0.8em;
            width: 70%;
            margin: 0.5em 0;
            border-bottom: 1px solid rgba(0, 0, 0, 0.15); /* Line above and below author */
            border-top: 1px solid rgba(0, 0, 0, 0.15);
            padding: 0.3em 0;
        }

        /* --- Design 13: Serif, Title on Diagonal, Author Straight Bottom --- */
        .design-13 { background-color: #faedeb; font-family: 'Lora', serif; }
        .design-13 .book-content {
            display: block; /* Use block for explicit positioning */
            padding: 1.5em; /* Re-establish padding for content */
        }
        .design-13 .book-content h1 {
            font-size: 1.8em;
            font-weight: 700;
            position: absolute;
            top: 15%;
            left: 0%;
            transform: rotate(-10deg) translateX(5%); /* Slight diagonal, slight push from left */
            transform-origin: top left;

            width: 90%; /* Limit width to ensure it doesn't run off too much */
            overflow: hidden; /* To prevent overflow if title is too long */
            text-overflow: ellipsis; /* Add ellipsis if overflow happens */
            text-align: left;
            padding: 0;
        }
        .design-13 .book-content h2 {
            font-size: 0.9em;
            position: absolute;
            bottom: 10%;
            left: 50%;
            transform: translateX(-50%);
            width: 80%;
            text-align: center;
            opacity: 0.9;
        }

        /* --- Design 14: Sans-Serif, Stamped Effect Title, Author Small Below --- */
        .design-14 { background-color: #e8e8e8; font-family: 'Ubuntu', sans-serif; text-transform: uppercase; }
        .design-14 .book-content h1 {
            font-size: 2.5em;
            font-weight: 700;
            border: 3px dashed #666; /* Dashed border for stamped look */
            padding: 0.5em 0.8em;
            display: inline-block;
            margin-bottom: 1em; /* Space from author */
            color: #444;
        }
        .design-14 .book-content h2 { font-size: 0.7em; opacity: 0.6; letter-spacing: 1px; margin-top: 1em; }

        /* --- Design 15: Clean Serif, Title Top, Author Centered and Small --- */
        .design-15 { background-color: #f7fff7; font-family: 'Merriweather', serif; }
        .design-15 .book-content { justify-content: flex-start; padding-top: 2em; }
        .design-15 .book-content h1 {
            font-size: 2.6em;
            font-weight: 700;
            margin-bottom: 0;
            text-align: center;
            width: 100%;
        }
        .design-15 .book-content h2 {
            font-size: 0.8em;
            margin-top: 1.5em; /* Larger gap */
            width: 80%;
            opacity: 0.8;
            text-align: center;
        }

        /* --- Design 16: Modern Sans-Serif, Title Vertical Left, Author Horizontal Bottom --- */
        .design-16 { background-color: #eefaff; font-family: 'Libre Franklin', sans-serif; }
        .design-16 .book-content { justify-content: flex-start; align-items: flex-start; padding: 1.5em; }
        .design-16 .book-content h1 {
            font-size: 1.2em;
            font-weight: 700;
            margin-right: 0.5em;
            line-height: 1.5em;


        }
        .design-16 .book-content h2 {
            position: absolute; /* Absolute positioning for H2 to prevent overlap */
            bottom: 1.5em;
            right: 1.5em;
            font-size: 0.75em;
            letter-spacing: 0.5px;
            opacity: 0.7;
            text-align: right;
            width: calc(100% - 3em); /* Adjust width to fit padding */
            margin: 0; /* Reset margins */
        }


        /* --- Design 17: Classic Serif, Title Large & Leading, Author Small & Trailing --- */
        .design-17 { background-color: #fcf9f5; font-family: 'Lora', serif; }
        .design-17 .book-content { justify-content: space-between; padding-top: 2em; padding-bottom: 2em; }
        .design-17 .book-content h1 {
            font-size: 3em;
            font-weight: 700;
            text-align: left;
            width: 100%;
            line-height: 1;
            margin-bottom: auto; /* Push to top */
        }
        .design-17 .book-content h2 {
            font-size: 0.9em;
            text-align: right;
            width: 100%;
            opacity: 0.8;
            font-style: italic;
            margin-top: auto; /* Push to bottom */
        }

        /* --- Design 18: Sans-Serif, Minimalist, Title Small, Author Prominent --- */
        .design-18 { background-color: #e6f7f2; font-family: 'Nunito', sans-serif; }
        .design-18 .book-content { flex-direction: column-reverse; justify-content: flex-end; padding-top: 2.5em; padding-bottom: 1.5em; }
        .design-18 .book-content h2 {
            font-size: 1.2em; /* Larger author */
            font-weight: 700;
            margin-bottom: 0.3em;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            opacity: 0.95;
            color: #444;
            order: 1; /* Place above H1 */
        }
        .design-18 .book-content h1 {
            font-size: 1.6em; /* Smaller title */
            font-weight: 400;
            opacity: 0.7;
            text-align: center;
            width: 90%;
            margin-top: 0.5em; /* Space from author */
            order: 2; /* Place below H2 */
        }

        /* --- Design 19: Serif, Artistic, Title with Small Drop Cap Style (simulated) --- */
        .design-19 { background-color: #fffaf0; font-family: 'Playfair Display', serif; }
        .design-19 .book-content { justify-content: flex-start; padding-top: 2.5em; }
        .design-19 .book-content h1 {
            font-size: 1.4em;
            font-weight: 700;
            text-align: left;
            width: 100%;
            line-height: 1;
            margin-bottom: 0.8em;
        }
        .design-19 .book-content .drop-cap-like {
            font-size: 1.4em; /* Larger first letter */
            line-height: 1;
            float: left; /* Make it float like a drop cap */
            margin-right: 0.05em;
            padding-right: 0.05em;
        }
        .design-19 .book-content h2 {
            font-size: 0.8em;
            margin-top: 0.8em;
            text-align: center;
            width: 100%;
            opacity: 0.8;
            clear: both; /* Clear the float from the drop cap */
        }

        /* --- Design 20: Sans-Serif, Title Outline Effect (simulated with text-shadow), Author Subtly Below --- */
        .design-20 { background-color: #e9f5f5; font-family: 'Montserrat', sans-serif; }
        .design-20 .book-content h1 {
            font-size: 3em;
            font-weight: 700;
            color: transparent; /* Make text transparent */
            -webkit-text-stroke: 1px #555; /* Simulate outline */
            text-stroke: 1px #555; /* Standard property */
            letter-spacing: 1px;
            line-height: 1;
            text-transform: uppercase;
            margin-bottom: 0.8em;
        }
        .design-20 .book-content h2 { font-size: 0.9em; margin-top: 0.8em; opacity: 0.7; letter-spacing: 0.5px; }

        /* --- Masonry Grid Layout --- */
        .masonry-grid {
            column-count: 4; /* 5 columns */
            column-gap: 20px; /* Gap between columns */
            padding: 20px; /* Padding around the entire grid */
            max-width: 100%; /* Allow it to take up the full width of its parent */
            margin: 0 auto; /* Center the grid within its parent */
        }

        .masonry-grid .book-cover {
            /* Required for masonry layout with CSS columns */
            break-inside: avoid; /* Prevents an item from breaking across columns */
            margin-bottom: 20px; /* Vertical gap between items */
            /* Width is handled by the aspect ratio classes, which set width: 100% of the column */
        }

        /* Responsive adjustments for masonry columns */
        @media (max-width: 1700px) { /* Adjusted breakpoint for more columns */
            .masonry-grid {
                column-count: 4;
            }
            .mainstage .bottom-box {
                /*border:4px solid yellow !important;*/
            }
        }
        @media (max-width: 1300px) { /* Adjusted breakpoint for more columns */
            .masonry-grid {
                column-count: 3;
            }
            .mainstage .bottom-box {
                margin-left: 2em !important;
                /*border:4px solid orange !important;*/
            }

            .substage section {
                padding: 30px 0;
                margin: 0;
            }
        }
        @media (max-width: 900px) { /* Adjusted breakpoint */
            .masonry-grid {
                column-count: 2;
            }
            .mainstage .bottom-box {
                /*border:4px solid red !important;*/
            }
        }
        @media (max-width: 600px) { /* Adjusted breakpoint */
            .masonry-grid {
                column-count: 1;
            }
            .mainstage .bottom-box {
                /*border:4px solid pink !important;*/
            }
        }

        .mainstage .bottom-box {
            margin-left: 7em;
        }
        .mainstage .bottom-box p {

            color: #efefef;
        }
        .mainstage .bottom-box p.sub {
            font-size: .7em;
            color: #efefef;
        }
        .mainstage .bottom-box h1 {
            color: #efefef;
            text-align: left;
        }
        .mainstage .bottom-box h3 {
            color: #efefef;
        }
        .mainstage {
            background-color:rgba(0,0,0,0);
            background-image: url('./images/lit4.png');
            background-position: center;
            min-height: 600px;
        }


























/* --- NEW MEDIA CARD AND LISTING STYLES --- */

/* Responsive 3-column grid for media cards */
.column-grid {
    display: grid; /* Use CSS Grid for better control over columns */
    grid-template-columns: repeat(3, 1fr); /* 3 columns by default */
    gap: 20px; /* Gap between cards */
    padding: 20px; /* Padding around the entire grid */
    max-width: 100%;
    margin: 0 auto;
    align-items: start; /* Align items to the start of their grid area */
}

/* Responsive adjustments for media cards columns */
@media (max-width: 1300px) {
    .column-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 900px) {
    .column-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 600px) {
    .column-grid {
        grid-template-columns: repeat(1, 1fr);
    }
}

/* Styling for the individual media card */
.media-card {
    background-color: rgba(34, 34, 34, 0.7); /* Darker, semi-transparent background */
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Stronger shadow for depth */
    overflow: visible; /* Allows the absolute overlay to extend outside */
    position: relative; /* Crucial for absolute positioning of the expanding overlay */
    box-sizing: border-box; /* Include padding in dimensions */
    min-height: 450px; /* Minimum height for portrait look in default state */
    display: flex; /* Use flex to stack header and static list content */
    flex-direction: column;
    transition: box-shadow 0.3s ease-in-out; /* Smooth transition for outline */
}

/* Red outline for the media card when expanded */
.media-card.expanded {
    box-shadow: 0 0 0 3px #ED0000, 0 4px 10px rgba(0, 0, 0, 0.3); /* Add red outline, keep existing shadow */
}


/* Header for each media card (e.g., Movies, Music) */
.media-card-header {
    background-color: rgba(0, 0, 0, 0.5); /* Darker header with some transparency */
    color: #f0f0f0; /* Lighter text */
    padding: 0.8rem 1rem; /* Adjust padding for button */
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    position: relative; /* For z-index */
    z-index: 20; /* Ensure header is above everything */
    display: flex; /* Use flexbox for title and button alignment */
    justify-content: space-between; /* Space between title and button */
    align-items: center; /* Vertically align items */
}

.media-card-header h3 {
    margin: 0; /* Remove default margin from h3 */
    text-align: left; /* Left align the headline */
    font-size: 1.2em;
    font-weight: bold;
    flex-grow: 1; /* Allow title to take available space */
}

/* This is the content visible in the default (collapsed) state */
.media-list-initial {
    flex-grow: 1; /* Allows it to take up remaining space */
    height: 300px; /* Fixed height to show approx. 10 entries */
    overflow: hidden; /* Clips the list */
    padding: 1rem; /* Padding for the list content */
    position: relative; /* For gradient overlay */
    z-index: 1; /* Below header, above main content */
    background-color: rgba(34, 34, 34, 0.7); /* Match card background */
    border-bottom-left-radius: 8px; /* Curve bottom corners if no button below */
    border-bottom-right-radius: 8px;
}

/* Hide the initial list when the card is expanded */
.media-card.expanded .media-list-initial {
    height: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none; /* Make it unclickable */
    transition: height 0.3s, padding 0.3s, opacity 0.3s;
}

/* The absolutely positioned "roll-out" overlay */
.media-list-overlay-wrapper {
    position: absolute; /* Crucial: Takes it out of document flow */
    /* top: 0; This will be set by JS dynamically to match the top of .media-list-initial */
    left: 0;
    width: 100%;
    z-index: 100; /* Very high z-index to overlay everything */
    opacity: 0; /* Start hidden */
    height: 0; /* Start with no height */
    overflow: hidden; /* Hide content until it expands */
    pointer-events: none; /* Allow clicks through when not expanded */
    transform-origin: top; /* Important for any transform animations */
    transition: opacity 0.4s ease-in-out, height 0.7s ease-in-out, box-shadow 0.3s ease, border-radius 0.3s ease; /* Smooth transition */
    background-color: rgba(34, 34, 34, 0.95); /* Darker background for the overlay itself */
    border-radius: 8px; /* Match card radius by default */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); /* Stronger shadow for overlay effect */
    display: flex; /* Use flex to stack content and close button */
    flex-direction: column;
}

/* When expanded, show the overlay */
.media-card.expanded .media-list-overlay-wrapper {
    opacity: 1;
    height: auto; /* Allow height to grow */
    max-height: 80vh; /* Cap max height to viewport for very long lists */
    overflow-y: auto; /* Allow scrolling *within* the overlay */
    pointer-events: auto; /* Enable clicks when expanded */
    /* Apply red outline to the wrapper itself */
    box-shadow: 0 0 0 3px #ED0000, 0 8px 20px rgba(0, 0, 0, 0.6); /* Red outline, keep existing shadow */
    border-bottom-left-radius: 8px; /* Ensure bottom corners are rounded */
    border-bottom-right-radius: 8px; /* Ensure bottom corners are rounded */
}

/* Inner content padding for the overlay */
.media-list-overlay-content {
    padding: 1rem;
    padding-top: 1rem; /* Ensure enough space if header is part of original card */
    box-sizing: border-box; /* Include padding in height calculations */
    flex-grow: 1; /* Allow content to take up available space */
    /* REMOVED: Specific bottom outlines from here */
    border-bottom: none;
    border-left: none;
    border-right: none;
    transition: none; /* No transition needed here for borders */
}


/* Styles for the unordered list */
.media-list {
    list-style: none;
    padding: 0;
    margin: 0;
    color: #f0f0f0; /* Lighter text for list items */
    font-size: 0.95em;
    line-height: 1.6;
}

.media-list li {
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px dotted rgba(255, 255, 255, 0.2); /* Lighter dotted line */
}

.media-list li:last-child {
    border-bottom: none; /* No border for the last item */
    margin-bottom: 0;
    padding-bottom: 0;
}

.media-list li strong {
    font-weight: bold;
    color: #e0e0e0; /* Slightly off-white for strong text */
}

.media-list li span.year {
    font-style: italic;
    font-weight: 300; /* Thinner font weight for year */
    color: #b0b0b0; /* Muted light color for year */
    margin-left: 0.5em;
}

/* Gradient overlay for clipped list state (applies ONLY to .media-list-initial) */
.media-gradient-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px; /* Height of the gradient fade-out */
    background: linear-gradient(to top, rgba(34, 34, 34, 0.7) 0%, rgba(34, 34, 34, 0) 100%); /* Matches card background with fade */
    pointer-events: none; /* Allows clicks through the overlay */
    z-index: 1; /* Above list items */
    opacity: 1; /* Default visible */
    transition: opacity 0.3s ease-in-out; /* Smooth fade for gradient */
}

/* Hide gradient when the card is expanded (because .media-list-initial is hidden) */
.media-card.expanded .media-gradient-overlay {
    opacity: 0;
}

/* Styles for the expand/collapse button */
.media-expand-button {
    background-color: rgba(0, 0, 0, 0.6); /* Darker button with transparency */
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3); /* Subtle light border */
    border-radius: 20px;
    padding: 8px 15px; /* Slightly smaller button for inline placement */
    cursor: pointer;
    font-size: 0.85em; /* Smaller font size */
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
    z-index: 3; /* Ensure button is on top of header content */
    margin-left: 10px; /* Space from title */
}

.media-expand-button:hover {
    background-color: rgba(0, 0, 0, 0.8); /* Even darker on hover */
    transform: scale(1.05); /* Slight scale for hover effect (no translateX as it's flexed) */
    border-color: rgba(255, 255, 255, 0.5);
}

/* Red outline for the toggle button when the card is expanded */
.media-card.expanded .media-expand-button {
    border-color: #ED0000; /* Red border */
    box-shadow: 0 0 5px #ED0000; /* Subtle glow */
}

/* New Close Button */
.media-close-button {
    display: block; /* Takes full width */
    margin: 1rem auto; /* Center with margin */
    background-color: #ED0000; /* Red color */
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 10px 25px;
    cursor: pointer;
    font-size: 1em;
    font-weight: 700;
    transition: background-color 0.3s ease, transform 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.media-close-button:hover {
    background-color: #cc0000; /* Darker red on hover */
    transform: scale(1.05);
}


/* Specific override for design-16 to prevent unintended text rotation/transformation issues
   if it were to be applied to future elements outside of its intended scope (books).
   This is a defensive measure to ensure existing specific rules for book designs do not
   interfere with the new media card elements. It does NOT change your existing books' appearance. */
.design-16 .book-content {
    display: flex; /* Re-enable flex for design-16 as originally intended for its specific layout */
    flex-direction: column; /* Ensure it stacks correctly */
    justify-content: flex-start;
    align-items: flex-start;
    padding: 1.5em;
}

.design-16 .book-content h1 {
    writing-mode: horizontal-tb; /* Ensure text is horizontal */
    transform: none; /* Remove any previous rotations */
    margin-right: 0; /* Reset margin */
    line-height: 1.2; /* Normal line height */
}