.site-info-sticky {
    width: 30%; /* Width of the sticky description */
    flex-shrink: 0;
    position: sticky;
    top: 10vh; /* Adjust sticky position */
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.site-description {
    color: var(--text-color);
}

.site-description h2 {
    font-size: 1.4em;
    font-weight: 600;
    margin-bottom: 0.4em;
}


.album-list-content {
    flex: 1; /* Allow album list to take remaining space */
    display: flex;
    flex-direction: column;
}
/* END NEW: Two-column layout styles */

/* New styles for header and search */
.header-container {
    display: flex;
    justify-content: space-between; /* Pushes h1 and search apart */
    align-items: center;      /* Vertically aligns items */
    margin-bottom: 10px;
}

.search-container {
    position: relative; /* Needed for absolute positioning of the icon */
    display: flex; /* Use flexbox for layout */
    align-items: center; /* Vertically align icon and input */
    gap: 8px; /* Add a small gap between icon and input */
}

#albumSearch {
    border: none;
    outline: none;
    background-color: transparent; /* Make background transparent */
    font-size: 1.5em; /* Exactly match h1 font-size */
    font-family: inherit; /* Use body font */
    flex: 1; /* Allow input to take remaining space */
}

/* Hide the default clear button in WebKit browsers */
#albumSearch::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

#albumSearch::placeholder {
    color: var(--search-placeholder-color); /* Use variable */
}

.search-icon {
    /* position: absolute; */ /* Remove absolute positioning */
    /* left:-10%;
    transform: translateY(40%); */
    width: 3%;
    filter: var(--search-icon-filter); /* Use variable */
    transition: filter 0.3s ease;
    flex-shrink: 0; /* Prevent icon from shrinking */
}

/* --- End of new styles --- */

.album-list-item a::after {
    content: none; /* Remove the arrow */
}

a.album-link { /* Target the link directly */
    display: flex; /* Use flexbox for layout */
    align-items: center; /* Vertically center items */
    gap: 30px; /* Space between image and text (2x) */
    text-decoration: none;
    color: var(--link-color); /* Use variable */
}

a.album-link:hover .album-name-index {
    text-decoration: underline; /* Underline album name on hover */
    color: var(--link-hover-color); /* Use variable */
}

.album-cover-index {
    max-width: 10%;
    object-fit: cover; /* Ensure image covers the area */
    flex-shrink: 0; /* Prevent image from shrinking */
    border-radius: 4px; /* Slightly rounded corners */
}


.album-text-info {
    display: flex;
    flex-direction: column; /* Stack album and artist names vertically */
    justify-content: center; /* Center text vertically if needed */
}

.album-name-index {
    font-size: 1.6em; /* Match previous link size (2x) */
    font-weight: 500; /* Slightly bolder album name */
    margin-bottom: 0.1em;
}

.artist-name-index {
    font-size: 1.3em; /* (2x) */
    font-style: italic;
    color: var(--text-color); /* Use variable */
}

/* Remove previous general a and a:hover styles if they conflict */
/* We are now styling a.album-link specifically */
a {
   /* Keep general link reset if needed outside the list */
   text-decoration: none;
   color: inherit; /* Inherit color from parent */
}

a:hover {
    /* Remove general hover, handled by a.album-link:hover */
    text-decoration: none;
}

.site-description  {
    font-size: 1.1em;
}

.album-list-item {
    margin-bottom: 2em;
}

/* NEW: Responsive adjustments for two-column layout */
@media (max-width: 900px) {
    /* Example: Keep specific adjustments for index elements if needed */
    .header-container {
        flex-direction: column; /* Stack h1 and search */
        align-items: center;
        gap: 15px; /* Add gap between h1 and search */
    }

    .album-link {
        gap: 15px; /* Reduce gap in list items */
    }

    .album-cover-index {
        max-width: 15%; /* Adjust cover size */
    }
    
    /* Center site description text when stacked (if not handled by common styles' text-align: center) */
    .site-description {
        text-align: center; 
    }
}
/* END NEW: Responsive adjustments */