* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    cursor: none; 
}

a { text-decoration: none; color: inherit; }
img { pointer-events: none; }

/* --- MAIN LAYOUT (DESKTOP) --- */
.main-container { 
    display: flex;             
    flex-direction: row; /* Default: Side-by-side columns */
    width: 85vw;               
    margin: 0 auto;            
    height: 100lvh; 
    overflow: hidden; 
    gap: 40px;
    padding: 0;
    align-items: stretch;
}

/* Side Marquees */
.left-marquee, .right-marquee {
    flex: 1;
    height: 100%;
    overflow: hidden;
    min-width: 0;
    position: relative;
}

/* Center Profile */
.profile-section { 
    flex: 0 0 400px;
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    text-align: center; 
    height: 100%; 
    position: relative; 
    z-index: 10; 
}

.profile-content {     
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center; 
}

.logo { width: 220px; margin: auto; margin-bottom: 30px; }
.logo img { width: 100%; }

h1 { 
    font-family: var(--font-serif); 
    font-style: italic; 
    font-size: 3.5rem; 
    font-weight: 400; 
    line-height: 1.1; 
}

.profile-section p { 
    line-height: 1.6; 
    color: #888; 
    font-size: 1rem; 
    margin-bottom: 5px; 
}

.tagline { font-style: italic; opacity: 0.7; }
.m-auto { margin: auto; }

/* --- BENTO GRID STYLES --- */

/* Wrapper handles the infinite loop structure */
.marquee-wrapper { 
    will-change: transform; 
    display: flex;
    flex-direction: column;
    gap: var(--gap-standard); 
}

.bento-grid { 
    display: flex; 
    flex-direction: column; 
    gap: var(--gap-standard); 
    padding: 0; 
    flex-shrink: 0; 
}

/* Base Card */
.bento-item { 
    border-radius: var(--card-radius); 
    position: relative; 
    overflow: hidden; 
    color: white; 
    background-color: var(--color-text-primary); 
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

.bento-item:hover { 
    transform: scale(1.02); 
    z-index: 2; 
    border-color: rgba(255,255,255,0.2); 
}

.cover-around {
   background: linear-gradient(90deg, #1E8FFF 0%, #0E43FF 100%);
}

/* Image Handling */
.bento-item img.bg-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain; 
}

/* WIDE BLOCKS */
.bento-item.wide img.bg-image {
    height: auto;
    object-fit: contain; 
}

/* SQUARE & TALL Handling */
.bento-item.square { }
.bento-item.tall {  }

/* --- DESKTOP UTILITIES (Uses Grid by default) --- */

.split-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-standard);
}

.mixed-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-standard);
}

.mixed-grid .col-stack {
    display: flex;
    flex-direction: column;
    gap: var(--gap-standard);
}

.mixed-grid .bento-item {
    height: auto; 
}

.social-card {
    padding: 20px;
    justify-content: space-between;
    background: #111;
}
.social-card i { font-size: 1.8rem; }
.social-card h4 { font-size: 0.9rem; margin-top: auto; }

.bg-insta { background: linear-gradient(45deg, #f09433, #bc1888); }
.bg-twitter { background: #000; border: 1px solid #333; }

.cta-text {
    background-color: #1a1a1a;
    color: #fff;
    padding: 30px;
    text-align: center;
    justify-content: center;
    align-items: center;
    font-weight: 400;
    font-size: 1.2rem;
    min-height: 200px;
}

/* --- RESPONSIVE --- */

/* 1. Medium Screens */
@media (max-width: 1100px) {
    .main-container { width: 95vw; gap: 20px; }
    .profile-section { flex: 0 0 320px; }
}

/* 2. Tablet / Vertical Layout Trigger */
@media (max-width: 900px) { 
    body { 
        overflow-y: auto; 
        overflow-x: hidden; 
        height: auto; 
    } 
    .main-container {        
        margin-top: 120px; 
        display: flex; 
        flex-direction: column; /* Stack vertically */
        width: 100%; 
        height: auto; 
        padding: 20px; 
        gap: 40px; 
    } 
    .profile-section { 
        order: 1; 
        flex: unset; 
        width: 100%; 
        margin-bottom: 40px; 
    }
    .left-marquee { 
        order: 2; 
        height: auto; 
        overflow: visible; 
    }
    .right-marquee { 
        order: 3; 
        height: auto; 
        overflow: visible; 
    }
    .marquee-wrapper { 
        display: block; /* Disable loop layout */
        height: auto; 
    }
    .bento-grid { 
        gap: 12px; 
    }
}

/* 3. STRICT FLEX OVERRIDE (< 797px) */
@media (max-width: 797px) {
    
    /* Ensure Container is strict column flex */
    .main-container {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    /* Force Profile to behave as a flex item */
    .profile-section {
        flex: 0 0 auto;
        width: 100%;
    }

    /* --- STRICT FLEX REPLACEMENTS FOR GRIDS --- */

    /* Override .split-row: 
       From Grid(1fr 1fr) -> Flex Row with Flex-Grow 1 */
    .split-row {
        display: flex;
        flex-direction: row;
        gap: var(--gap-standard);
        width: 100%;
    }
    
    .split-row > * {
        flex: 1;       /* Grow equally */
        min-width: 0;  /* Prevent overflow */
    }

    /* Override .mixed-grid:
       From Grid(1fr 1fr) -> Flex Row */
    .mixed-grid {
        display: flex;
        flex-direction: row;
        gap: var(--gap-standard);
        width: 100%;
        height: auto;         
    }
    
    .mixed-grid > * {
        flex: 1;
        min-width: 0;
    }

    /* Ensure the column stack inside mixed-grid behaves strictly as column flex */
    .mixed-grid .col-stack {
        display: flex;
        flex-direction: column;
        gap: var(--gap-standard);
        height: 100%;
    }
    
    /* Ensure items inside the stack fill available vertical space */
    .mixed-grid .col-stack .bento-item {
        flex: 1;
    }
    
    /* Reset height constraints for marquees to allow natural flow */
    .left-marquee, .right-marquee {
        flex: 0 0 auto;
        height: auto;
    }
    
    .marquee-wrapper {
        display: flex;
        flex-direction: column;
    }
}