.gallery-vault {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px;
    max-width: 1100px;
    margin: 0 auto;
}

.gallery-item {
    text-align: center;
}

.frame {
    position: relative;
    border: 1px solid var(--gold-muted);
    padding: 10px; /* Creates a 'mat' around the photo */
    background: #0d0707;
    transition: all 0.5s ease;
    overflow: hidden;
}

.frame img {
    width: 100%;
    display: block;
    filter: sepia(0.3) contrast(1.1); /* Gives it an aged, expensive look */
    transition: transform 0.8s ease;
}

.frame:hover {
    border-color: var(--gold-bright);
    box-shadow: 0 0 40px var(--gold-glow);
    transform: scale(1.03);
}

.frame:hover img {
    transform: scale(1.1);
    filter: sepia(0);
}

.caption {
    margin-top: 15px;
    font-family: 'Playfair Display', serif;
    font-size: 0.8rem;
    color: var(--gold-muted);
    letter-spacing: 2px;
    text-transform: uppercase;
}
/*==================================================================================*/
:root {
    --burgundy-paper: #1e0d0d;    /* Deep paper base */
    --gold-bright: #d4af37;       /* 100% Gold */
    --gold-muted: #8a6d3b;        /* Aged Gold */
    --gold-glow: rgba(212, 175, 55, 0.33); /* The signature glow */
    --stamp-red: rgba(212, 24, 61, 0.6);   /* Ink stamp color */
}

/* 1. The Desk Grid */
.vault-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 60px 40px;
    max-width: 1100px;
    margin: 60px auto;
    padding: 20px;
    perspective: 1000px; /* Gives the 'pop' depth */
}

/* 2. The Physical File (Rotation) */
.dossier-file {
    position: relative;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    transform: rotate(-2deg); /* Initial messy desk look */
    cursor: pointer;
}

.alternate-tilt {
    transform: rotate(2deg); /* Tilts other cards opposite way */
}

/* 3. The Paper Texture & Border */
.dossier-paper {
    background-color: var(--burgundy-paper);
    padding: 15px 15px 60px 15px; /* Extra bottom space for labels */
    border: 1px solid rgba(212, 175, 55, 0.15);
    box-shadow: 10px 15px 30px rgba(0, 0, 0, 0.7);
    position: relative;
    overflow: hidden;
}

.dossier-paper img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    display: block;
    filter: sepia(0.3) contrast(1.1) brightness(0.7); /* Aged look */
    transition: all 0.5s ease;
}

/* 4. Confidential Ink Stamp */
.classified-stamp {
    position: absolute;
    top: 30px;
    right: 25px;
    border: 3px solid var(--stamp-red);
    color: var(--stamp-red);
    padding: 5px 15px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 0.8rem;
    text-transform: uppercase;
    transform: rotate(12deg);
    z-index: 5;
    pointer-events: none;
    mix-blend-mode: multiply; /* Makes it look like ink on the photo */
}

/* 5. Gold Wax Seal */
.wax-seal {
    position: absolute;
    bottom: 40px;
    right: 25px;
    width: 45px;
    height: 45px;
    background: var(--gold-bright);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 15px var(--gold-glow);
    z-index: 6;
    color: var(--burgundy-paper);
    font-size: 1.2rem;
}

/* 6. Typewriter Labels */
.dossier-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
    font-family: 'Courier New', Courier, monospace; /* Secret file font */
    font-size: 0.75rem;
    letter-spacing: 1px;
    color: var(--gold-muted);
}

.status {
    font-weight: bold;
    color: var(--gold-bright);
}

/* --- THE HOVER INTERACTION --- */

.dossier-file:hover {
    transform: rotate(0deg) scale(1.05); /* Straightens and lifts */
    z-index: 50;
}

.dossier-file:hover .dossier-paper {
    border-color: var(--gold-bright);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.9), 0 0 25px var(--gold-glow);
}

.dossier-file:hover img {
    filter: sepia(0) contrast(1) brightness(1.1); /* Reveals full detail */
}

.dossier-file:hover .wax-seal {
    transform: scale(1.2) rotate(360deg);
    background: #ffffff; /* Seal glows white when "inspected" */
    transition: all 0.5s ease;
}

/* --- SHARED LAYOUT --- */
.gallery-page-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

.section-title {
    font-family: 'Playfair Display', serif;
    color: var(--gold-muted);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 4px;
    margin: 60px 0 30px;
    font-size: 1.2rem;
}

.gold-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-muted), transparent);
    margin: 80px auto;
    width: 80%;
}

/* --- SECTION 1: PROPER ART GRID --- */
.gallery-vault {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columns for luxury feel */
    gap: 40px;
}

.frame {
    border: 1px solid var(--gold-muted);
    padding: 10px;
    background: #0d0707;
    transition: all 0.5s ease;
    position: relative;
    overflow: hidden;
}

.frame:hover {
    border-color: var(--gold-bright);
    box-shadow: 0 0 30px var(--gold-glow);
    transform: scale(1.02);
}

/* --- SECTION 2: DOSSIER GRID --- */
.vault-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 60px 30px;
    perspective: 1000px;
}

.dossier-file {
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    transform: rotate(-2deg); /* The messy desk look */
}

.alternate-tilt {
    transform: rotate(2deg);
}

.dossier-file:hover {
    transform: rotate(0deg) scale(1.1); /* Straightens on hover */
    z-index: 10;
}

.dossier-paper {
    background: #1e0d0d;
    padding: 15px 15px 50px;
    border: 1px solid rgba(212, 175, 55, 0.1);
    box-shadow: 10px 10px 25px rgba(0,0,0,0.5);
}


/* --- Gallery & Dossier Mobile Responsiveness --- */
@media screen and (max-width: 992px) {
    /* Tablet: Switch Gallery to 1 column, Dossier stays 2 */
    .gallery-vault {
        grid-template-columns: 1fr;
        max-width: 600px;
        margin: 0 auto;
        gap: 30px;
    }

    .vault-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 40px 20px;
    }
}

@media screen and (max-width: 768px) {
    .gallery-page-container {
        padding: 20px 15px;
    }

    /* 1. Gallery Vault Adjustments */
    .frame {
        padding: 8px; /* Slightly tighter matting */
    }

    .caption {
        font-size: 0.7rem;
        letter-spacing: 1px;
    }

    /* 2. Dossier Grid Adjustments */
    .vault-grid {
        grid-template-columns: 1fr; /* Force single column on phones */
        max-width: 400px;
        margin: 40px auto;
    }

    .dossier-file, .alternate-tilt {
        /* Reduce tilt on mobile so they don't clip off the screen edges */
        transform: rotate(-1deg); 
    }
    
    .alternate-tilt {
        transform: rotate(1deg);
    }

    .dossier-paper {
        padding: 10px 10px 45px; /* Tighter padding */
    }

    .dossier-paper img {
        height: 280px; /* Shorter images so the user doesn't scroll forever */
    }

    /* 3. Decorative Scaling */
    .classified-stamp {
        font-size: 0.65rem;
        top: 20px;
        right: 15px;
        padding: 3px 10px;
    }

    .wax-seal {
        width: 35px;
        height: 35px;
        font-size: 1rem;
        bottom: 30px;
    }

    .section-title {
        font-size: 1rem;
        margin: 40px 0 20px;
    }
}

@media screen and (max-width: 480px) {
    /* Extra small phones */
    .dossier-paper img {
        height: 220px; 
    }

    .dossier-footer {
        font-size: 0.65rem;
        flex-direction: column; /* Stack 'Status' and 'Date' if they overlap */
        gap: 5px;
    }
}