/* ======================================= */
/* ABOUT PAGE SPECIFIC STYLES (Simple Bio Box) */
/* ======================================= */

.about-page {
    /* Override journal-page padding for a full-bleed image effect */
    padding: 0;
}

.about-content {
    position: relative;
    width: 100%;
    min-height: 140vh;
    display: flex;
}

/* --- Image Container (Background/Right Side) --- */
.about-image-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.about-portrait {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    object-position: right top; /* Focus on the right side where you are standing */

}

.icon-button {
    /* Set the clickable area to be slightly larger than the icon (e.g., 35px) */
    width: 35px; 
    height: 35px; 
    padding: 0; 
    
    /* Center the icon */
    display: flex;
    align-items: center;
    justify-content: center;
                
}


.insta-img {
    /* Set the size for the image icon */
    width: 30px; 
    height: 30px;
    display: block;
}

/* --- Text Overlay Container (Fixed Left Box) --- */
.bio-text-overlay {
    /* Use position: relative so it doesn't interfere with the absolute image */
    position: relative;
    
    /* Center the text container vertically on the left side */
    width: 60%; 
    max-width: 400px;
    margin: 5% 0 0 5%; /* Push it down and right from the top-left corner */
    
    /* THE TRANSPARENT BOX STYLES */
    background-color: rgba(255, 255, 255, 0.9); /* Very Light Grey Transparent */
    opacity: 0.85; /* Slight transparency for text readability */
    /* If you want dark transparent background, use: */
    /* background-color: rgba(51, 51, 51, 0.85); color: white; */
    
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    
    padding: 30px 30px 60px 30px;
    z-index: 20; /* Keep it above the image */
}

.bio-text-overlay h1 {
    font-size: 2.5em;
    margin-top: 0;
    border-bottom: 3px dashed #333;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.bio-text-overlay p {
    font-family: 'Georgia', serif; 
    line-height: 1.6;
    margin-bottom: 20px;
}



/* --- Mobile Responsiveness for About Page --- */
@media (max-width: 600px) {
    .about-content {
        flex-direction: column;
    }
    
    .about-portrait {
        position: relative; 
        height: 60%; 
        object-position: right center;
    }
    
    .bio-text-overlay {
        /* Flows naturally below the image on mobile */
        position: relative; 
        width: 90%; /* Wider on mobile */
        max-width: 100%;
        margin: 20px auto; /* Center the box */
        
    }
}