body { background: #000; margin: 0; padding: 40px 20px; display: flex; justify-content: center; }

.container { 
    max-width: 800px; 
    width: 100%;
    display: flex; 
    flex-direction: column; 
    align-items: center; 
}

/* Force specific widths to keep images from exploding */
.site-title { width: 320px; height: auto; margin-bottom: 30px; }
.hero-art { width: 100%; max-width: 500px; height: auto; margin-bottom: 40px; }
.body-img { width: 100%; max-width: 600px; height: auto; margin-bottom: 20px; }

.hero-art { 
    width: 100%; 
    max-width: 250px; /* Changed from 500px to 250px to make it "a lot smaller" */
    height: auto; 
    margin-top: 20px;
    margin-bottom: 40px; 
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.text-block {
    display: flex;
    flex-direction: column; 
    align-items: center;    /* This centers the children (images) */
    width: 100%;
    margin-top: 20px;
}

.body-img {
    width: 100%;
    max-width: 600px; /* Keep this to ensure they don't get too huge */
    height: auto;
    margin-bottom: 20px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.rep-links { 
    display: flex; 
    gap: 30px; /* Increased gap for breathing room */
    margin-top: 10px; 
    margin-bottom: 50px; 
    justify-content: center; 
    width: 100%
}

.rep-img { 
    width: 500px;
    height: auto; 
    transition: transform 0.3s ease; 
}

.rep-img:hover { 
    transform: translateY(-5px); 
    filter: brightness(75%); /* Both will darken slightly */
}

/* Add this to make sure they don't shrink too much on mobile */
@media (max-width: 700px) { 
    .rep-img { 
        width: 220px; 
    } 
}

.work-grid { 
    display: flex; 
    gap: 40px; 
    margin-top: 20px; 
    justify-content: center;
}

.poster {
    height: 450px; /* This forces both to be the exact same height */
    width: auto;   /* This lets the width adjust so they don't look squished */
    transition: all 0.4s ease-in-out;
    display: block;
    object-fit: contain; /* Ensures the whole image is visible */
}
.label { width: 160px; height: auto; margin-top: 20px; }

/* THE COMBO EFFECT - Applies to both the poster and the text label */
.combo-link {
    text-decoration: none; /* Removes any weird underlines */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.combo-link:hover .poster, 
.combo-link:hover .label {
    transform: scale(1.05); /* Both will zoom */
    filter: brightness(75%); /* Both will darken slightly */
}

/* Smooth transition for the label as well */
.label {
    width: 160px;
    height: auto;
    margin-top: 20px;
    transition: all 0.4s ease-in-out; /* Makes the label zoom smoothly too */
}

/* Fade-in Animation */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.fade-in-section { animation: fadeInUp 1.5s ease-out forwards; }

/* Mobile View */
@media (max-width: 700px) { 
    .work-grid { flex-direction: column; align-items: center; } 
    .rep-links { flex-direction: column; align-items: center; }
}