:root { 
    --bg: #000000; 
    --border: rgba(255,255,255,0.08); 
    --accent: #ffffff; 
}

body { 
    background: var(--bg); 
    color: #fff; 
    font-family: 'Inter', sans-serif; 
    overflow-x: hidden; 
}

/* Cursor and Background fixed */
#webgl-bg { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100vh; 
    z-index: 1; 
    pointer-events: none; 
}

#custom-cursor { 
    position: fixed; 
    width: 10px; 
    height: 10px; 
    background: #fff; 
    border-radius: 50%; 
    z-index: 1000; 
    pointer-events: none; 
    mix-blend-mode: difference; 
}

nav { 
    z-index: 100; 
    border-bottom: 1px solid var(--border); 
    background: rgba(0,0,0,0.8); 
    backdrop-filter: blur(20px); 
}

.mono { 
    font-family: 'JetBrains Mono', monospace; 
    font-size: 11px; 
    opacity: 0.5; 
    text-transform: uppercase; 
    letter-spacing: 0.1em; 
}

section { 
    position: relative; 
    z-index: 10; 
    min-height: 100vh; 
    padding: 10vh 8%; 
}

.hero-section { 
    display: flex; 
    align-items: center; 
    min-height: 120vh; 
}

h1 { 
    font-size: 11vw; 
    font-weight: 800; 
    letter-spacing: -0.06em; 
    line-height: 0.8; 
    margin: 0; 
}

h2 { 
    font-family: impact;
    font-size: 4rem; 
    font-weight: 00; 
    letter-spacing: -0.04em;  
    margin-bottom: 5rem !important;
}

.tag { 
    font-size: 10px; 
    text-transform: uppercase; 
    letter-spacing: 3px; 
    color: #555; 
    display: block; 
    margin-bottom: 1.5rem; 
}

.bento-grid-3 { 
    display: grid; 
    /* Change repeat(3, 1fr) to this to allow centering */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    /* This centers the cards if there is extra space */
    justify-content: center; 
    gap: 20px; 
    align-items: start;
    width: 100%; 
    max-width: 1200px; /* Limits width so they don't get too wide when centered */
    margin: 0 auto 15vh auto; /* The 'auto' on left/right centers the whole grid container */
}

.bento-card { 
    background: rgba(255, 255, 255, 0.02); 
    border: 1px solid var(--border); 
    border-radius: 24px; 
    padding: 1.5rem; 
    backdrop-filter: blur(20px);
    text-decoration: none;
    color: white;
    transition: border-color 0.4s ease;
    display: block;
    overflow: hidden;
}

.bento-card:hover { 
    border-color: rgba(255,255,255,0.4); 
    background: rgba(255,255,255,0.04); 
}

.work-img {
    width: 100%;
    aspect-ratio: 9/0;
    background: #111;
    border-radius: 16px;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: #444;
    border: 1px solid var(--border);
    object-fit: cover;
}

#image-making .bento-card {
    width: 100%;
    max-width: 600px; /* Adjust width to your preference */
    height: auto;
    padding: 1.5rem; /* Matches your Typography bento card padding */
}
.bento-grid-single {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 4rem;
}


#image-making .bento-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr; /* This forces all boxes in the row to be equal height */
    gap: 20px;
}

#image-making .work-img {
    width: 100%;
    aspect-ratio: 9/0;
    background: #111;
    border-radius: 16px;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: #444;
    border: 1px solid var(--border);
    object-fit: cover;
}

.card-meta { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}

.card-title { 
    font-family: 'Impact', sans-serif;
    font-size: 1.25rem; 
    font-weight: 200; 
    margin: 0; 
}

.card-year { 
    font-family: 'Impact', sans-serif; 
    opacity: 0.4; 
    font-size: 0.7rem; 
}

@media (max-width: 992px) {
    .bento-grid-3 { grid-template-columns: 1fr; }
    h2 { font-size: 2.5rem; }
}

/* Contact Section Grid */
.footer-grid {
    display: grid;
    grid-template-columns: 1.8fr 1fr;
    gap: 20px;
    margin-top: 2rem;
}

/* Custom Input Styling */
.custom-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.2rem;
    color: #fff;
    outline: none;
    transition: border-color 0.3s ease;
}

.custom-input:focus {
    border-color: rgba(255, 255, 255, 0.3);
}

.submit-btn {
    width: 100%;
    padding: 1.2rem;
    border-radius: 12px;
    background: #fff;
    color: #000;
    border: none;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.submit-btn:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}

/* Social Link Cards */
.social-links-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.social-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2.5rem !important;
}

.social-link .arrow {
    font-size: 1.2rem;
    opacity: 0.3;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.social-link:hover .arrow {
    opacity: 1;
    transform: translate(5px, -5px);
}

.copyright-card {
    margin-top: auto;
    padding: 1.5rem !important;
    text-align: center;
    background: transparent !important;
    border: 1px dashed var(--border) !important;
}

/* Responsive Footer */
@media (max-width: 992px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }
}

/* About Section Grid Layout */
/* Updated About Section Grid Layout */
.about-bento-grid {
    display: grid;
    /* Two columns: Image (1.5fr) and Content (2.5fr) */
    grid-template-columns: 1.5fr 2.5fr; 
    gap: 20px;
    margin-top: 0; /* Removing top margin to fix the title gap */
    align-items: stretch;
}

/* Forces the image card to take up both rows on the left */
.portrait-card {
    grid-row: span 2; 
}

.profile-img-container {
    width: 100%;
    height: 100%;
    min-height: 1000px;
    background: #0a0a0a;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--border);
    overflow: hidden;
}

.bio-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Explicitly set to top right */
    grid-column: 2;
    grid-row: 1;
}

.bio-card p {
    font-size: 1.4rem;
    line-height: 1.6;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
    font-family: 'Courier New', Courier, monospace;
}

.stats-card {
    display: flex;
    /* Changed to row so status items sit side-by-side in the bottom box */
    flex-direction: row-; 
    justify-content: space-between;
    align-items: center;
    /* Explicitly set to bottom right */
    grid-column: 2;
    grid-row: 2;
    padding-bottom: 10px !important;
    padding-top: 10px !important;
    gap: 10px;
}


.stat-item {
    padding: 0;
}

.stat-item p {
    font-size: 0.95rem;
    margin-top: px;
    color: var(--accent);
    margin-bottom: 0;
    font-family: 'Courier New', Courier, monospace;
}

/* Responsive Fix for Tablets and Mobile */
@media (max-width: 1100px) {
    
    /* 1. Use the ID (#project-details) to ensure these styles override the desktop ones */
    #project-details .about-bento-grid {
        grid-template-columns: 1fr !important; /* Force strictly 1 column */
        gap: 30px;
        padding: 0 20px; /* Add breathing room on sides */
    }

    /* 2. Force ALL cards to be full width */
    #project-details .bento-card,
    #project-details .portrait-card,
    #project-details .bio-card,
    #project-details .stats-card,
    #project-details .video-card {
        grid-column: 1 / -1 !important; /* Spans from start line (1) to end line (-1) */
        width: 100%;
        margin-bottom: 20px;
        height: auto; /* Let text content dictate height */
    }

    /* 3. Reset Image & Video Heights for Tablets */
    #project-details .profile-img-container,
    #project-details .video-container {
        height: 500px !important; /* Shrink from 850px to fit tablet screens */
        width: 100%;
    }

    /* 4. Fix Stats Card Alignment */
    #project-details .stats-card {
        display: flex;
        flex-direction: row; /* Keep side-by-side on tablets if space permits */
        flex-wrap: wrap; /* Allow wrapping if it gets too tight */
        gap: 20px;
        height: auto !important;
        padding: 30px;
    }
}

/* Mobile Specific (Phones) */
@media (max-width: 768px) {
    
    /* 1. Even smaller images for phones */
    #project-details .profile-img-container,
    #project-details .video-container {
        height: 400px !important; /* Perfect square-ish size for mobile scrolling */
        width: auto;
    }

    /* 2. Text Adjustments */
    #project-details .bio-card {
        padding: 25px; /* Save screen real estate */
    }
    
    #project-details .bio-card p { 
        font-size: 1rem; /* Slightly smaller text for readability */
    }

    /* 3. Stack Stats Vertically on Phones */
    #project-details .stats-card { 
        flex-direction: column; 
        align-items: flex-start; 
        gap: 15px; 
    }
}

.profile-img-container {
    width: 100%;
    height: 100%;
    min-height: 100px; /* Keeps the box height consistent */
    background: #0a0a0a;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--border);
    overflow: hidden; /* Clips any part of the image that spills out */
}

.profile-pic {
    width: 700px;
    height: 100%;
    /* This is the MAGIC property: it crops the image to fill the space 
       without distorting the face/proportions */
    object-fit: contain; 
    object-position: center; /* Centers the face if the photo is wide */
    display: block;
}

/* Center the container */
.ai-centered-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* ADJUST SIZE HERE */
#ai-design .bento-card {
    /* 1. Change this for WIDTH */
    width: 700px; 
    
    /* 2. Remove height auto to let the card grow with content */
    height: auto; 
    transition: 0.4s ease;
}

#ai-design .work-img {
 width: 100%;
    aspect-ratio: 9/0;
    background: #111;
    border-radius: 16px;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: #444;
    border: 1px solid var(--border);
    object-fit: cover;
}

/* Ensure the image inside fits the custom size */
.fit-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.navbar-brand:hover {
    color: var(--accent) !important;
    letter-spacing: 0.2em;
    opacity: 1 !important;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Specifically for the Typography Page Grid */
/* 1. Base Grid (Desktop) */
#project-grid .about-bento-grid {
    display: grid;
    /* Keeps your 12-column logic */
    grid-template-columns: repeat(12, 1fr); 
    gap: 20px;
    /* Allows rows to adjust to content height */
    grid-auto-rows: auto; 
    align-items: start;
}

@media (max-width: 992px) {
    
    /* 1. RESET THE GRID to a Single Column */
    #project-grid .about-bento-grid {
        display: grid;
        grid-template-columns: 1fr; /* Creates one single column */
        gap: 20px; /* Reduces the gap for smaller screens */
        padding: 0 15px; /* Adds safety padding on left/right */
    }

    /* 2. FORCE ALL CARDS TO FULL WIDTH */
    #project-grid .bento-card,
    #project-grid .bio-card,
    #project-grid .portrait-card,
    #project-grid .video-card {
        grid-column: 1 / -1 !important; /* Spans from the first line to the last */
        width: 100%;
        margin-bottom: 20px;
    }
}


/* 3. The Image Logic (Forces "Show All") */
#project-grid .profile-img-container {
    width: 100%;
    height: auto; /* Allows the box to be as tall as the image */
    background: transparent;
    border-radius: 16px;
    overflow: hidden;
}

#project-grid .profile-pic {
    width: 100%;
    height: 100%; 
    display: block;
    object-fit: cover; /* Ensures the whole image is visible */
}

/* 4. The Bio Card Fix */
#project-grid .bio-card {
    height: auto;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}



#project-grid .about-bento-grid > div:nth-child(2) {
    grid-column: span 6;
    grid-row: 2; /* Explicitly set to second row */
}

@media (max-width: 992px) {
    #project-grid .about-bento-grid > div {
        grid-column: span 12 !important; /* Stack them 1-by-1 on mobile */
        grid-row: auto !important;       /* Let them flow naturally */
    }
}


/*experimental typo page adjustments*/
/* 1. Grid Container */
#project-details .about-bento-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
    align-items: start;
    max-width: 1400px; /* Optional: keeps it from getting too wide on huge screens */
    margin: 0 auto;
}

/* 2. Image Frame Fix */
#project-details .profile-img-container {
    width: 100%; /* CHANGED: Was 80%, now fills the grid column */
    height: 800px; /* Adjusted: 1000px is often too tall; 800px is a standard poster size */
    background: #0a0a0a; /* Dark background to hide any loading glitches */
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--border);
}

/* 3. Image Fix */
#project-details .profile-pic {
    width: 100%; /* CHANGED: Was 80%, now fills the container */
    height: 100%;
    
    /* CHANGED: 'cover' removes black bars and fills the box completely */
    object-fit: contain; 
    object-position: center; /* Keeps the main subject centered */
    display: block;
}

/* 4. Optional: Fix for "The Brief" card to match */
#project-details .bio-card {
    height: 100%;
    min-height: 400px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Mobile Responsiveness */
@media (max-width: 992px) {
    #project-details .about-bento-grid {
        grid-template-columns: 1fr; /* Stack vertically */
    }

    #project-details .bento-card {
        grid-column: span 1 !important; /* Force full width */
    }

    #project-details .profile-img-container {
        height: 500px; /* Shorter height for phones */
    }
}

/* Video Frame Styling (Matches your .profile-img-container) */
#project-details .video-container {
    width: 100%;
    height: 800px; /* Same tall height as your images */
    background: #0a0a0a;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--border);
    position: relative;
}

/* Video Element Styling */
#project-details .project-video {
    width: 100%;
    height: 100%;
    /* 'object-fit: contain' ensures the video fits within the box without cropping */
    object-fit: contain; 
    object-position: center;
    display: block;
}

/* Mobile Adjustment for Video */
@media (max-width: 992px) {
    #project-details .video-container {
        height: 500px; /* Shorter on mobile */
    }
}





.bento-card, .parallax-layer, .profile-img-container {
    /* Forces GPU rendering for smoother motion */
    will-change: transform;
    transform: translateZ(0);
    
    /* Improves image rendering performance */
    backface-visibility: hidden;
}








/* This ONLY runs on the Illustrations page */
.illustrations-page #project-grid .profile-img-container {
    width: 100%;
    /* 1. INCREASE HEIGHT: This makes the box itself a portrait shape */
    height: auto; 
    background: transparent;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--border);
    
    /* Performance fixes you already have */
    transform: translateZ(0);
    will-change: transform;
    contain: paint;

    
}

.illustrations-page #project-grid .profile-pic {
    width: 100%;
    height: 100%;
    /* 2. USE COVER: This ensures the image fills the entire 750px height */
    object-fit: cover; 
    object-position: center;
    border-radius: 16px
}

/* Keep the Brief/Concept card aligned to the same height */
.illustrations-page #project-grid .bio-card {
    min-height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: top;
}


.custom-input {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    color: white;
    padding: 12px 20px;
    width: 100%;
    border-radius: 8px;
    transition: border-color 0.3s ease;
}

.custom-input:focus {
    outline: none;
    border-color: var(--accent);
    background: rgba(255, 255, 255, 0.05);
}

.submit-btn {
    background: var(--accent);
    color: black;
    border: none;
    padding: 12px 30px;
    width: 100%;
    cursor: pointer;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.submit-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}



/* Specifically for the Comic Book Illustration Page */
.comic-archive #project-grid .profile-img-container {
    width: 100%;
    /* 1. INCREASE HEIGHT: A taller box fits a comic cover better */
    height: 650px; 
    
    background: transparent;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--border);
    
    /* Smooth scroll performance fixes */
    transform: translate3d(0, 0, 0);
    will-change: transform;
}

.comic-archive #project-grid .profile-pic {
    width: 100%;
    height: 100%;
    
    /* 2. FILL THE BOX: Removes the black bars */
    object-fit: cover; 
    
    /* 3. PIN THE TOP: Ensures "The Miracle of" title is always visible */
    object-position: top center; 
}




/* Hide the default system cursor globally */
* {
    cursor: none !important;
}

/* Ensure your custom cursor div is still visible and follows the mouse */
#custom-cursor {
    width: 20px;
    height: 20px;
    background-color: var(--accent); /* Uses your portfolio's accent color */
    border-radius: 50%;
    position: fixed;
    pointer-events: none; /* Crucial: stops the circle from blocking clicks */
    z-index: 9999;
    mix-blend-mode: difference; /* Makes it visible against both light/dark areas */
    transition: transform 0.1s ease-out;
}



/* 1. The Container: Strict 2-Column Grid */
#project-perfume .about-bento-grid {
    display: grid !important;
    /* This forces exactly two equal columns, no matter what */
    grid-template-columns: repeat(12, 1fr); 
    gap: 30px;
    align-items: end;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 2. The Box/Wrapper */
#project-perfume .project-wrapper,
#project-perfume .bento-card-link {
    width: 100%; /* Fills the grid column completely */
    display: block;
    margin-top: 0;
    margin-bottom: 0;
}

/* 3. The Image Frame: Fixed Height */
#project-perfume .image-frame, 
#project-perfume .profile-img-container {
    width: 100%;
    /* This restores the tall poster look */
    height: 850px; 
    
    background: #0a0a0a;
    border-radius: 20px;
    border: 1px solid var(--border);
    overflow: hidden;
}

/* 4. The Image: Cover Fill */
#project-perfume .work-img, 
#project-perfume .profile-pic {
    width: 100%;
    height: 100%;
    /* Prevents the 'strip' distortion */
    object-fit: cover; 
    object-position: center;
}

/* Mobile Safety: Stacks them on phones so they don't become tiny strips */
@media (max-width: 768px) {
    #project-perfume .about-bento-grid {
        grid-template-columns: 1fr; /* 1 column on mobile */
    }
    #project-perfume .image-frame {
        height: 500px;
    }
}


/* Center-aligned section header */
.project-section-centered {
    text-align: center;
    width: 100%;
    padding: 80px 0;
}

.project-section-centered .tag {
    display: block;
    margin-bottom: 12px;
    opacity: 0.6;
}

.project-section-centered .section-title {
    font-size: 3.5rem;
    margin-bottom: 50px;
    text-transform: uppercase;
}

/* The Grid/Flex Container */
.large-bento-grid {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Individual Project Wrapper */
.large-bento-grid .project-wrapper {
    flex: 1;
    max-width: 600px; /* Restores the large size */
    min-width: 350px;
}

.large-bento-grid .work-img-wrapper {
    height: 750px; /* Vertical height to match previous posters */
    width: 100%;
    border-radius: 20px;
    border: 1px solid var(--border);
    overflow: hidden;
    background: #0a0a0a;
}

.large-bento-grid .work-img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Removes black borders and stretching */
    object-position: center;
}

/* Centered Metadata */
.large-bento-grid .card-meta {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    text-align: left; /* Keeps text logic inside the centered wrapper */
}




/* --- Centered Projects Row Styling --- */

/* --- Shared Container Styles (Keep from previous steps) --- */
.centered-project-row {
    display: flex;
    justify-content: center;
    gap: 40px;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
}

.project-wrapper.centered-text {
    width: 40%;
    min-width: 350px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* --- NEW STYLES --- */

/* 1. The Clickable Link Container */
.bento-card-link {
    display: block;
    width: 100%;
    text-decoration: none;
    color: inherit; /* Ensures text color matches your theme */
}

/* 2. The Image Frame (Where height and borders go now) */
.image-frame {
    width: 100%;
    /* Adjust height as needed, e.g., 750px or 900px */
    height: 750px; 
    
    border-radius: 16px;
    border: 1px solid var(--border);
    overflow: hidden; /* Cuts off the image at the corners */
    background-color: #0a0a0a;
    margin-bottom: 15px; /* Adds space between image and text */
}

/* The Image itself */
.image-frame .work-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* 3. The Metadata below the image */
.meta-data-below {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px; /* Adds slight padding on left and right */
    text-align: left; /* Resets text align so it's not centered like the heading */
}

.meta-data-below .card-title {
    font-weight: 700;
    font-size: 1.1rem;
    text-transform: uppercase;
    margin: 0;
}

.meta-data-below .card-year {
    opacity: 0.6;
    font-family: 'monospace', sans-serif; /* Assuming you use a mono font for years */
}




/* --- Illustrations Section Styling --- */

#illustrations .about-bento-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px; /* Signature gap for bento layout */
    max-width: 1400px;
    margin: 0 auto;
}

#illustrations .bento-card {
    position: relative;
    background: rgba(255, 255, 255, 0.03);
    /* Strict 1px border style from your previous projects */
    border: 1px solid rgba(255, 255, 255, 0.1); 
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#illustrations .profile-img-container {
    width: 100%;
    height: 750px; /* Locked height for portrait rectangles */
    overflow: hidden;
}

#illustrations .profile-pic {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Prevents distortion */
    display: block;
}

#illustrations .bio-card {
    padding: 50px;
    justify-content: center;
}

/* --- Mobile Responsiveness --- */
@media (max-width: 992px) {
    #illustrations .about-bento-grid {
        grid-template-columns: 1fr;
        padding: 0 20px;
    }

    #illustrations .bento-card {
        grid-column: span 1 !important;
        margin-bottom: 15px;
    }

    #illustrations .profile-img-container {
        height: 500px; /* Tablet reset */
    }
}


/* --- HISTORY JOURNAL SPECIFIC STYLES --- */

.history-bento-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr); /* Signature 12-column grid */
    gap: 24px; /* Strict gap from previous iterations */
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 20px;
}

.history-card {
    background: rgba(255, 255, 255, 0.03);
    /* THE STICKY 1PX BORDER STYLE */
    border: 1px solid rgba(255, 255, 255, 0.1); 
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Portrait Rectangle Containers */
.history-img-frame {
    width: 100%;
    height: 500px; /* Locked height for the vertical journal look */
    overflow: hidden;
    background: #0a0a0a;
}

.history-pic {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Crucial for portrait rectangle scaling */
    display: block;
}

/* Text Card (The Brief) */
.history-bio-card {
    padding: 45px;
    justify-content: center;
    text-align: left; /* Maintains left-aligned hierarchy */
}

.history-bio-card p {
    font-size: 1.1rem;
    line-height: 1.6;
    font-family: 'Inter', sans-serif;
}

/* --- Responsive Adjustments --- */
@media (max-width: 1100px) {
    .history-bento-grid {
        grid-template-columns: 1fr; /* Stacks vertically for tablet/mobile */
    }
    
    .history-card {
        grid-column: 1 / -1 !important;
        margin-bottom: 10px;
    }
    
    .history-img-frame {
        height: 500px !important; /* Mobile height reset */
    }
}