body {
    font-family: 'PT Serif', serif;
    line-height: 1.6; /* Adjusted slightly for PT Serif */
    margin: 0;
    padding: 0;
    background-color: #fdf5e6; /* Old Lace - fallback */
    color: #4d463a; /* Dark grayish brown */
    background-image: url('vintage_paper_texture.png');
    background-repeat: repeat;
}

.container {
    width: 85%; 
    max-width: 1100px; /* Slightly reduced max-width for a more contained feel */
    margin: 40px auto; /* Increased top/bottom margin */
    overflow: hidden;
    padding: 35px; 
    background-color: #f5efdc; /* Darker, yellower cream */
    box-shadow: 0 0 0 1px #e0d8c8, 0 0 0 4px #d2c6b4, 6px 6px 12px rgba(0, 0, 0, 0.25); /* Album cover edge effect */
    border-radius: 3px; /* Slight rounding for worn corners */
}

header {
    background-color: #6B4F4C; /* Muted rich brown (old leather) */
    color: #f5efdc; 
    padding: 1.5rem 1rem; /* Adjusted padding slightly for images */
    text-align: center;
    margin: -35px -35px 30px -35px; /* Extend to edges of container padding */
    border-bottom: 3px solid #503a38; /* Darker brown for depth */
    border-radius: 3px 3px 0 0;
}

.singer-banner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px; /* Space between images */
    margin-bottom: 20px; /* Space between images and title */
    flex-wrap: wrap; /* Allow images to wrap on smaller screens */
}

.singer-image {
    width: 100px; /* Fixed width */
    height: 100px; /* Fixed height */
    object-fit: cover; /* Ensure image covers the area without distortion */
    border-radius: 50%; /* Circular images */
    border: 3px solid #f5efdc; /* Border matching container bg */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    filter: grayscale(0.2) sepia(0.1); /* Subtle vintage effect */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.singer-image:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

header h1 {
    margin: 0;
    font-family: 'Abril Fatface', cursive;
    font-size: 3.2rem; 
    font-weight: 400; /* Abril Fatface is already bold */
    letter-spacing: 1px;
    margin-bottom: 15px; /* Add some space below H1 before nav */
}

/* Styles for the page index */
#page-index {
    margin-top: 10px; /* Space above the nav */
    margin-bottom: -1rem; /* Pulls the nav closer to the header bottom edge slightly */
    padding-bottom: 0.5rem;
}

#page-index ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    gap: 20px; /* Space between navigation items */
    flex-wrap: wrap;
}

#page-index li {
    display: inline;
}

#page-index a {
    font-family: 'PT Serif', serif;
    font-size: 1.1rem;
    color: #f5efdc; /* Container cream for links */
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 3px;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    border: 1px solid transparent;
}

#page-index a:hover,
#page-index a:focus {
    color: #6B4F4C; /* Header brown for hover text */
    background-color: #f5efdc; /* Container cream for hover background */
    border-color: #d2c6b4; /* Border for hover */
}

#summary {
    /* Optional: Add specific styles if #summary needs to look different */
    /* For now, it will inherit styles from 'section' */
}

#summary ol {
    list-style-type: decimal;
    padding-left: 30px;
}

#summary ol li {
    margin-bottom: 10px;
}

#summary ol ul {
    list-style-type: '▹ '; /* Keep original style for sub-list */
    margin-left: 25px; /* Keep original margin */
    margin-top: 5px;
}

section {
    margin-bottom: 35px; 
    padding: 20px; 
    border: 1px solid #e0d8c8; /* Light border for sections */
    border-radius: 3px; 
    background-color: #fcfaf2; /* Very light cream, slightly different from container */
    box-shadow: 0 1px 3px rgba(0,0,0,0.05); 
}

section h2 {
    font-family: 'Yeseva One', cursive;
    color: #8E725A; /* Lighter, warmer brown */
    border-bottom: 2px solid #8E725A; 
    padding-bottom: 12px; 
    margin-bottom: 20px; 
    font-size: 2.2rem; 
    font-weight: 400; /* Yeseva One is already bold */
}

section h3 {
    font-family: 'Yeseva One', cursive; /* Changed to Yeseva One for consistency */
    color: #6B4F4C; /* Header brown */
    margin-top: 20px;
    font-size: 1.7rem;
    font-weight: 400;
}

section h4 {
    color: #7a7060; 
    font-style: italic;
    margin-bottom: 10px; 
    font-size: 1.1rem;
    font-family: 'PT Serif', serif;
}

ul {
    list-style-type: '▸ '; 
    padding-left: 25px; 
}

ul ul {
    list-style-type: '▹ ';
    margin-left: 25px; 
}

.highlight {
    background-color: #fff9e6; /* Very light yellow cream */
    border-left: 4px solid #D4AF37; /* Muted gold */
    padding: 15px 20px; 
    font-weight: normal; /* PT Serif bold is quite strong, using normal */
    font-style: italic;
    margin: 20px 0; 
    border-radius: 3px;
    color: #715c26; /* Darker gold text */
}

.example {
    margin-bottom: 30px; 
    padding: 20px; 
    background-color: #fdf6e3; /* Slightly different cream for examples */
    border-radius: 3px;
    border: 1px solid #e8dbc6; 
    transition: box-shadow 0.3s ease-in-out; 
}

.example:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Softer hover shadow */
    transform: none; /* Removed transform */
}

.lyrics, .prose {
    padding: 15px; 
    margin: 15px 0; 
    font-style: italic;
    white-space: pre-line; 
    border-radius: 3px;
    line-height: 1.65; 
    font-family: 'PT Serif', serif; /* Ensure consistent font */
}

.lyrics {
    background-color: #FFFBF0; /* Pale cream */
    border-left: 4px solid #C8A07A; /* Muted terracotta/brown */
    color: #785e48; 
}

.prose {
    background-color: #F8FFF0; /* Pale greenish cream */
    border-left: 4px solid #7A9E7A; /* Muted sage green */
    font-style: normal;
    color: #486448; 
}

blockquote p {
    margin-bottom: 0.8em; 
}

footer {
    text-align: center;
    padding: 20px; 
    background-color: #6B4F4C; 
    color: #f5efdc; 
    margin: 40px -35px -35px -35px; /* Extend to edges of container padding */
    border-top: 3px solid #503a38;
    border-radius: 0 0 3px 3px; 
}

footer p {
    margin: 0;
    font-size: 1rem;
}

#rap-game {
    background-color: #fff7e9; /* Light peachy cream */
    border-top: 3px solid #B5651D; /* Burnt orange/copper */
}

#rap-game h2 {
    color: #B5651D; 
    border-bottom-color: #B5651D;
}

#rap-game p {
    margin-bottom: 20px;
    font-size: 1.05rem;
}

.game-item {
    background-color: #fdf6e3; /* Same as .example */
    border: 1px solid #e8dbc6;
    border-left: 5px solid #B5651D; 
    border-radius: 3px;
    padding: 20px;
    margin-bottom: 25px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.06);
}

.game-item h4 {
    font-family: 'Yeseva One', cursive;
    color: #8c5820; /* Darker copper */
    font-size: 1.4rem;
    margin-top: 0;
    margin-bottom: 15px;
}

.prose-game {
    background-color: #FFEFE0; /* Pale peach */
    border-left: 4px solid #D29462; /* Light copper */
    color: #7f5635; 
    padding: 15px;
    margin: 15px 0;
    font-style: normal; 
    white-space: pre-line;
    border-radius: 3px;
    line-height: 1.65; 
}

.game-controls {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.game-controls input[type="text"] {
    padding: 10px 12px;
    border: 1px solid #B89F8A; /* Soft light brown */
    border-radius: 3px;
    font-size: 1rem;
    font-family: 'PT Serif', serif;
    box-sizing: border-box; 
    background-color: #fffdf7;
    color: #4d463a;
}

.game-controls input[type="text"]:focus {
    outline: none;
    border-color: #8E725A; /* Section H2 brown */
    box-shadow: 0 0 0 2px rgba(142, 114, 90, 0.2);
}

.reveal-btn {
    background-color: #8E725A; /* Section H2 brown */
    color: #f5efdc; /* Container cream */
    border: 1px solid #7a624c; /* Darker border for button */
    padding: 10px 15px;
    font-size: 1rem;
    font-weight: bold; /* PT Serif bold for buttons */
    font-family: 'PT Serif', serif;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
    align-self: flex-start; 
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.reveal-btn:hover {
    background-color: #6B4F4C; /* Header brown */
    border-color: #503a38;
}

.game-answer {
    background-color: #e9e2d0; /* Muted cream/gray */
    border: 1px solid #d1c7b3;
    border-left: 4px solid #7A9E7A; /* Muted sage green, for correct answers */
    border-radius: 3px;
    padding: 15px;
    margin-top: 15px;
}

.game-answer p {
    margin: 5px 0;
    font-size: 1rem;
    color: #4d463a; 
}

.game-answer p strong {
    color: #3a513a; /* Darker sage green */
    font-weight: bold; /* PT Serif bold */
}

@media (max-width: 768px) {
    .container {
        width: 90%; /* Slightly less reduction */
        padding: 20px;
        margin: 20px auto;
         box-shadow: 0 0 0 1px #e0d8c8, 0 0 0 3px #d2c6b4, 4px 4px 8px rgba(0, 0, 0, 0.2);
    }

    header {
        margin: -20px -20px 25px -20px; /* Adjust for new padding */
    }
     footer {
        margin: 30px -20px -20px -20px; /* Adjust for new padding */
    }

    header h1 {
        font-size: 2.5rem; /* Adjusted for new font */
    }

    section h2 {
        font-size: 1.9rem; /* Adjusted for new font */
    }

    section h3 {
        font-size: 1.5rem; /* Adjusted for new font */
    }

    ul {
        padding-left: 20px;
    }
    ul ul {
        margin-left: 20px;
    }

    .highlight {
        padding: 10px 15px;
    }
}

@media (max-width: 480px) {
    header h1 {
        font-size: 2rem; /* Adjusted for new font */
    }
    section h2 {
        font-size: 1.6rem; /* Adjusted for new font */
    }

    .lyrics, .prose, .prose-game {
        padding: 10px;
        font-size: 0.9rem; /* Slight reduction for small screens */
    }
}

@media (min-width: 600px) {
    .game-controls {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap; 
    }

    .game-controls input[type="text"] {
        flex-grow: 1; 
        margin-right: 10px; 
        min-width: 150px; 
    }
    
    .game-controls input[type="text"]:last-of-type {
       margin-right: 10px; 
    }


    .reveal-btn {
        margin-left: 0; 
        flex-shrink: 0; 
    }
}

@media (max-width: 599px) {
    .game-controls input[type="text"] {
        width: 100%; 
    }
    .reveal-btn {
        width: 100%; 
    }
}