/* --- BODY SCROLL LOCK --- */
body.modal-locked {
    overflow: hidden; /* Kills the scrollbar */
    height: 100vh; /* Locks height to viewport */
}

/* --- THE BACKDROP (Dims the rest of the site) --- */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85); /* Very dark dim */
    backdrop-filter: blur(4px); /* Blurs the background video/site */
    z-index: 999; /* High priority */
    
    /* Hidden by default */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-backdrop.active {
    opacity: 1;
    pointer-events: all;
}

/* --- THE DATA WINDOW --- */
.modal-window {
    width: 80%;
    max-width: 800px;
    height: 80vh; /* 80% of screen height */
    
    /* Tech-Western Aesthetic */
    background-color: #0f0a0a;
    border: 2px solid #5a4a3a;
    box-shadow: 
        0 0 20px rgba(90, 74, 58, 0.4), /* Outer Sepia Glow */
        inset 0 0 20px rgba(0, 0, 0, 0.8); /* Inner Shadow */
    
    position: relative;
    display: flex;
    flex-direction: column;
    
    /* Slide up animation */
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.modal-backdrop.active .modal-window {
    transform: translateY(0);
}

/* --- WINDOW HEADER (Top Bar) --- */
.modal-header {
    background-color: rgba(90, 74, 58, 0.2);
    border-bottom: 1px solid #5a4a3a;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-title {
    font-family: 'Baksheesh', serif;
    color: #d2c8b8;
    margin: 0;
    font-size: 1.1em;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* The Close "X" Button */
.modal-close {
    background: none;
    border: 1px solid #5a4a3a;
    color: #d2c8b8;
    font-family: 'Baksheesh', serif;
    cursor: pointer;
    padding: 5px 12px;
    transition: all 0.2s ease;
}

.modal-close:hover {
    background-color: #5a4a3a;
    color: #fff;
    box-shadow: 0 0 8px rgba(210, 200, 184, 0.5);
}

/* --- IMAGES INSIDE MODAL --- */
.bio-image {
    /* STANDARD SIZING */
    /* 1. Never wider than the text column */
    max-width: 100%;
    
    /* 2. Never taller than 500px (keeps portrait images under control) */
    max-height: 500px; 
    
    /* 3. Preserve Aspect Ratio (prevents stretching/squishing) */
    width: auto;
    height: auto;
    
    display: block;
    margin: 20px auto;
    
    /* The "Planted" Look */
    border: 2px solid #5a4a3a; 
    background-color: #0f0a0a; 
    
    /* Tech Glow */
    box-shadow: 0 0 10px rgba(90, 74, 58, 0.3); 
    filter: sepia(30%) brightness(0.9);
    transition: all 0.3s ease;
}

/* Keep the hover effect the same */
.bio-image:hover {
    filter: sepia(0%) brightness(1.1); 
    border-color: #d2c8b8; 
    box-shadow: 0 0 20px rgba(210, 200, 184, 0.4); 
    cursor: crosshair; 
}

/* --- WINDOW CONTENT (Scrollable Area) --- */
.modal-content {
    padding: 40px;
    overflow-y: auto; /* This creates the scrollbar inside the box */
    color: #d2c8b8;
    font-family: 'EB Garamond', serif;
    font-size: 1.1em;
}

/* --- CUSTOM SCROLLBAR (Webkit) --- */
.modal-content::-webkit-scrollbar {
    width: 10px;
}

.modal-content::-webkit-scrollbar-track {
    background: #0f0a0a;
    border-left: 1px solid #332a22;
}

.modal-content::-webkit-scrollbar-thumb {
    background-color: #5a4a3a;
    border: 1px solid #0f0a0a;
}

.modal-content::-webkit-scrollbar-thumb:hover {
    background-color: #8c7a6b;
}