/* Color Palette from your image */
:root {
    --daylight: #7CA3B8;
    --palm-frond: #5F5D28;
    --shadow: #49441B;
    --sunshine: #ECB95F;
    --coconut: #523226;
    --bg-cream: #F9F7F2; /* Soft background to make colors pop */
}

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

body { 
    background-color: var(--bg-cream); 
    color: var(--coconut); 
    font-family: 'Montserrat', sans-serif; 
}

/* Navigation - Using Coconut and Daylight */
.main-header { 
    height: 80px; 
    background: #fff; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 0 8%; 
    position: fixed; 
    top: 0; 
    width: 100%; 
    z-index: 1000; 
    border-bottom: 2px solid var(--daylight); /* Using your blue */
}

.main-header h1 { 
    font-family: 'Bodoni Moda', serif; 
    font-weight: 500; 
    font-size: 1.6rem; 
    letter-spacing: -1px;
    color: var(--coconut);
}

.nav-links { display: flex; gap: 25px; list-style: none; }

.nav-links a { 
    text-decoration: none; 
    color: var(--palm-frond); /* Using your green */
    text-transform: uppercase; 
    font-size: 0.75rem; 
    letter-spacing: 2px; 
    font-weight: 500; 
    transition: color 0.3s ease;
}

.nav-links a:hover { color: var(--sunshine); }

/* Hero Banner */
.hero-container { margin-top: 80px; width: 100%; height: 400px; }
.timg { width: 100%; height: 100%; object-fit: cover; }

/* Instagram Grid */
.gallery { 
    max-width: 1000px; 
    margin: 40px auto; 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 12px; 
    padding: 0 15px; 
}

.imgbox { 
    position: relative; 
    aspect-ratio: 1 / 1; 
    overflow: hidden; 
    cursor: pointer; 
    background: #fff; 
    border: 1px solid rgba(124, 163, 184, 0.2); /* Soft Daylight border */
}

.imgbox img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s ease; }

/* Text-Only Tile (Editorial style) */
.text-tile { 
    display: flex; 
    align-items: flex-end; 
    padding: 20px; 
    background-color: #fff;
}

.editorial-label { 
    display: block; 
    font-family: 'Bodoni Moda', serif; 
    font-weight: 900; 
    font-size: 2.2rem; 
    color: var(--coconut);
}

.editorial-topic { 
    font-family: 'Montserrat', sans-serif; 
    font-weight: 300; 
    font-size: 1rem; 
    color: var(--shadow); 
}

/* Hover Overlay using Shadow & Sunshine */
.overlay { 
    position: absolute; 
    inset: 0; 
    background: rgba(73, 68, 27, 0.6); /* Your 'Shadow' color */
    display: flex; 
    justify-content: center; 
    align-items: center; 
    color: var(--sunshine); /* Your 'Sunshine' text */
    font-family: 'Bodoni Moda', serif; 
    font-style: italic; 
    font-size: 1.3rem; 
    opacity: 0; 
    transition: opacity 0.4s ease; 
}

.imgbox:hover .overlay { opacity: 1; }
.imgbox:hover img { transform: scale(1.1); }

/* Modal Display - Coconut & Sunshine theme */
.modal { 
    display: none; 
    position: fixed; 
    z-index: 2000; 
    inset: 0; 
    background-color: rgba(82, 50, 38, 0.98); /* Deep 'Coconut' background */
    justify-content: center; 
    align-items: center; 
    flex-direction: column; 
    padding: 20px; 
}

.modal-content { 
    max-width: 90%; 
    max-height: 80vh; 
    box-shadow: 0 20px 60px rgba(0,0,0,0.5); 
    border: 2px solid var(--sunshine); 
}

.modal-caption { 
    margin-top: 20px; 
    color: var(--sunshine); 
    font-family: 'Bodoni Moda', serif; 
    font-size: 1.8rem; 
    font-style: italic; 
}

.close-modal { 
    position: absolute; 
    top: 20px; 
    right: 30px; 
    color: var(--sunshine); 
    font-size: 50px; 
    cursor: pointer; 
}

/* Mobile Tweak */
@media (max-width: 768px) {
    .gallery { grid-template-columns: repeat(3, 1fr); gap: 5px; }
    .hero-container { height: 250px; }
}