/* --- Root Variables --- */
:root { 
    --bg-color: #ffffff; 
    --text-primary: #1a1a1a; 
    --text-secondary: #666666; 
    --border-color: #e5e5e5; 
    --header-bg: rgba(255, 255, 255, 0.95); 
}

/* --- Global Styles --- */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 
    background-color: var(--bg-color); 
    color: var(--text-primary); 
    line-height: 1.6; 
}

/* --- Header Component --- */
#main-header { 
    position: fixed; 
    top: 20px; 
    left: 50%; 
    transform: translateX(-50%); 
    width: 90%; 
    max-width: 1000px; 
    background: var(--header-bg); 
    backdrop-filter: blur(10px); 
    border: 1px solid var(--border-color); 
    border-radius: 40px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 1rem 2rem; 
    z-index: 1000; 
}
.logo img { height: 32px; width: auto; display: block; }
.nav-links a { text-decoration: none; color: var(--text-primary); font-size: 0.9rem; font-weight: 500; }

/* --- Layout & Alignment --- */
.project-hero, .project-container, .related-panel { 
    max-width: 1000px; 
    margin: 0 auto; 
    padding: 0 2rem; 
}
.project-hero { margin-top: 120px; display: flex; justify-content: center; }
.project-hero img { width: 100%; height: auto; object-fit: contain; }

/* Grid Layout */
.project-container { margin: 4rem auto; display: grid; grid-template-columns: 1fr; gap: 4rem; }
@media (min-width: 1024px) { .project-container { grid-template-columns: 2fr 1fr; } }

/* --- Content Styling --- */
.project-content p { font-size: 1.1rem; color: var(--text-secondary); margin-bottom: 2rem; }
.project-content img { width: 100%; margin: 2rem 0; display: block; background-color: var(--border-color); }
.sidebar-panel { position: sticky; top: 120px; border: 1px solid var(--border-color); padding: 2rem; }

/* --- Explore More Gallery --- */
.image-gallery-bottom { display: flex; gap: 2rem; justify-content: flex-start; }
.gallery-item { position: relative; width: 50%; cursor: pointer; overflow: hidden; }
.gallery-item img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform 0.3s; }
.gallery-title { 
    position: absolute; bottom: 0; width: 100%; padding: 1rem; color: #fff; 
    background: rgba(0,0,0,0.5); backdrop-filter: blur(5px); opacity: 0; 
    transition: opacity 0.3s; text-align: center; 
}
.gallery-item:hover .gallery-title { opacity: 1; }

/* --- Buttons --- */
.btn-primary { 
    display: block; width: 100%; padding: 1rem; background: var(--text-primary); 
    color: var(--bg-color); text-align: center; text-decoration: none; 
    font-weight: 500; margin-top: 1rem; 
}