:root {
    --bg-color: #ffffff;
    --text-color: #5c534a; 
}

*, *::before, *::after {
    box-sizing: border-box;
}

body { 
    background-color: var(--bg-color); 
    font-family: 'Inter', sans-serif; 
    font-weight: 300;
    overflow-x: hidden; 
    color: var(--text-color);
    margin: 0;
    padding: 0;
    
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; 

    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="%235c534a" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15 5h-6"/><path d="M14 5v-2c0-.6-.4-1-1-1h-2c-.6 0-1 .4-1 1v2"/><path d="M17 5v14c0 1.1-.9 2-2 2H9c-1.1 0-2-.9-2-2V5"/><circle cx="12" cy="11" r="1"/><path d="M19 12h-1"/><path d="M22 10h-1"/><path d="M22 14h-1"/></svg>') 15 0, crosshair;
}

footer, footer a, footer p, footer span, #content-wrap * {
    -webkit-user-select: auto;
    -moz-user-select: auto;
    -ms-user-select: auto;
    user-select: auto; 
    pointer-events: auto;
}

a, button {
    cursor: pointer; 
    color: var(--text-color);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

a:hover { opacity: 0.7; color: var(--text-color); }

.layout-container {
    width: 100%;
    /* Reduced from 1600px to pull the maximum width inward on large monitors */
    max-width: 1400px; 
    margin: 0 auto;
    /* Increased from 5% to 8% to create wider side margins on laptops/tablets */
    padding-left: 8%;  
    padding-right: 8%;
}

#graffitiCanvas {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0; 
    pointer-events: none; 
}

.navbar {
    padding-top: 1.5rem; 
    padding-bottom: 1.5rem;
    transition: all 0.3s ease;
    z-index: 1030;
    width: 100%;
    border-bottom: 1px solid rgba(0,0,0,0.03);
    background-attachment: scroll !important;
}

.navbar-nav .nav-link {
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.8rem;
    margin-left: 1.5rem;
    color: var(--text-color) !important;
}

.navbar-nav .nav-link:hover { opacity: 0.6; }

.navbar, footer, #lightbox {
    background-color: #f4f3f0 !important; 
    background-image: 
        radial-gradient(ellipse 45vw 35vh at 25% 20%, rgba(220, 217, 212, 0.9) 0%, rgba(220, 217, 212, 0) 65%),
        radial-gradient(ellipse 60vw 45vh at 75% 30%, rgba(232, 230, 225, 0.95) 0%, rgba(232, 230, 225, 0) 70%),
        radial-gradient(ellipse 40vw 55vh at 30% 75%, rgba(208, 205, 199, 0.85) 0%, rgba(208, 205, 199, 0) 60%),
        radial-gradient(ellipse 55vw 30vh at 80% 85%, rgba(220, 217, 212, 0.9) 0%, rgba(220, 217, 212, 0) 65%),
        radial-gradient(ellipse 50vw 50vh at 50% 55%, rgba(232, 230, 225, 0.85) 0%, rgba(232, 230, 225, 0) 70%) !important; 
    background-attachment: fixed !important;
    background-size: 100vw 100vh !important;
}

#content-wrap {
    position: relative;
    z-index: 2; 
    /* Increased from 115px to add more space under the header */
    padding-top: 160px; 
    pointer-events: none; 
}

#graffitiCanvas {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3; /* Increased from 0 to sit above #content-wrap */
    pointer-events: none; /* Allows clicks to pass through to the lightbox images */
}

.project-hero-block {
    display: flex;
    align-items: flex-start; 
    justify-content: space-between;
    padding: 1rem 0 5rem 0; 
    background-color: transparent; 
    gap: 4%;
	
	
}

.project-img { 
    width: 100%; 
    height: auto; 
    display: block; 
    transition: opacity 0.3s ease; 
    mix-blend-mode: multiply; /* This drops out the white backgrounds */
}

.hero-image-col { flex: 1 1 63%; height: 100%; overflow: hidden; display: flex; align-items: center; justify-content: flex-start; }
.hero-image { max-width: 100%; height: auto; object-fit: contain; }
.hero-text-col { flex: 0 0 auto; width: 32%; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; }
.project-hero-title { font-size: 1.85rem; font-weight: 400; margin-bottom: 0.5rem; color: var(--text-color); letter-spacing: -0.02em; }
.project-details-list { list-style: none; padding: 0; margin: 0; font-size: 0.9rem; line-height: 1.1; }
.project-details-list li { display: flex; align-items: center; margin-bottom: 0.2rem; }
.project-details-list li strong { font-weight: 500; width: 80px; display: inline-block; }
.project-description { font-size: 0.9rem; line-height: 1.4; margin-top: 1.5rem; color: var(--text-color); opacity: 0.85; }



.masonry-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; align-items: start; width: 100%; margin-bottom: 6rem;}
.masonry-item { position: relative; cursor: pointer; }
.span-2 { grid-column: span 2; }
.project-img { width: 100%; height: auto; display: block; transition: opacity 0.3s ease; }
.masonry-item:hover .project-img { opacity: 0.85; }

#lightbox { display: none; position: fixed; z-index: 9999; top: 0; left: 0; width: 100vw; height: 100vh; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; }
.lightbox-content { display: flex; flex-direction: column; align-items: flex-start; max-width: 90vw; max-height: 90vh; }
#lightbox-img { max-width: 100%; max-height: 80vh; width: auto; height: auto; box-shadow: 0 15px 50px rgba(0,0,0,0.15); }
.lightbox-btn { position: absolute; background: none; border: none; font-size: 2.5rem; color: var(--text-color); cursor: pointer; padding: 1rem; z-index: 10000; transition: transform 0.2s, opacity 0.2s; opacity: 0.7; }
.lightbox-btn:hover { transform: scale(1.1); opacity: 1; }
#prev-btn { left: 3%; top: 50%; transform: translateY(-50%); }
#next-btn { right: 3%; top: 50%; transform: translateY(-50%); }
#close-btn { top: 2%; right: 3%; font-size: 2rem; }
#lightbox-caption { margin-top: 1rem; font-size: 0.95rem; font-weight: 500; letter-spacing: 0.02em; color: var(--text-color); opacity: 0.9; pointer-events: none; }

footer { position: relative; z-index: 2; color: var(--text-color); padding-top: 4rem; padding-bottom: 4rem; border-top: 1px solid rgba(0,0,0,0.03); }

@media (max-width: 1024px) {
    .hero-text-col { width: 35%; }
    .hero-image-col { flex: 1 1 60%; }
    .masonry-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}
@media (max-width: 768px) {
    .project-hero-block { flex-direction: column; align-items: stretch; padding: 1rem 0 4rem 0; gap: 2rem; }
    .hero-text-col, .hero-image-col { width: 100%; }
    .masonry-grid { grid-template-columns: 1fr; }
    .span-2 { grid-column: span 1; }
    .navbar, footer, #lightbox { background-attachment: scroll !important; }
    #lightbox-img { max-height: 70vh; }
}