* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: #fff; color: #1a1a1a; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; margin: 0; }

header { text-align: center; padding: 60px 20px; }
h1 { letter-spacing: 8px; font-weight: 300; font-size: 2.5rem; margin-bottom: 20px; }

nav { display: flex; justify-content: center; gap: 30px; align-items: center; }
nav a { color: #000; text-decoration: none; transition: opacity 0.3s; font-size: 0.9rem; }
nav a:hover { opacity: 0.5; }

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 15px;
    padding: 20px;
    max-width: 1400px;
    margin: 0 auto;
}

.gallery img {
    width: 100%; aspect-ratio: 3/4; object-fit: cover; cursor: pointer;
    transition: filter 0.4s ease;
}
.gallery img:hover { filter: grayscale(100%); }

section { padding: 80px 20px; max-width: 800px; margin: 0 auto; text-align: center; }
section h2 { letter-spacing: 5px; font-weight: 300; margin-bottom: 20px; }
section p { line-height: 1.6; color: #555; font-size: 1.1rem; }

.cta-button {
    display: inline-block; margin-top: 20px; padding: 12px 30px;
    border: 1px solid #1a1a1a; text-decoration: none; color: #1a1a1a;
    transition: all 0.3s;
}
.cta-button:hover { background: #1a1a1a; color: #fff; }

.lightbox {
    display: none; position: fixed; top: 0; left: 0;
    width: 100%; height: 100%; background: rgba(255,255,255,0.95);
    justify-content: center; align-items: center; z-index: 1000;
}
.lightbox img { max-width: 90%; max-height: 80%; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
#close { position: absolute; top: 30px; right: 40px; font-size: 40px; cursor: pointer; }

/* --- MOBILE OPTIMIZATION --- */
@media (max-width: 600px) {
    /* Give the text room to breathe */
    section { 
        padding: 40px 20px; /* Reduces vertical padding, increases horizontal safety */
    }
    
    /* Ensure text doesn't hit the absolute edges */
    section p { 
        padding: 0 10px; 
    }

    /* Make the button look like a real, tappable Call-to-Action */
    .cta-button {
        display: block; /* Makes it fill the width nicely */
        width: 80%;     /* Gives it a nice frame */
        margin: 20px auto 0 auto; /* Centers it perfectly */
        padding: 18px;  /* Increases tap area */
        font-weight: bold;
        letter-spacing: 1px;
    }
    
    /* Make the heading smaller so it doesn't break the layout */
    h1 { font-size: 1.8rem; letter-spacing: 4px; }
}