@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400;0,700;1,400;1,700&family=Manrope:wght@300;400;500;600;700;800&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

.font-roboto {
    font-family: 'Roboto', sans-serif;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

body {
    font-family: 'Manrope', sans-serif;
    background-color: #fbfbe2;
    color: #1b1d0e;
    overflow-x: hidden; /* Prevents jitter during transitions */
}

.font-serif {
    font-family: 'Noto Serif', serif;
}

.editorial-shadow {
    box-shadow: 0 20px 40px -15px rgba(68, 42, 34, 0.08);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-auto-rows: 250px;
    grid-auto-flow: dense;
    gap: 2rem;
}

.span-2 {
    grid-column: span 2;
    grid-row: span 2;
}

.span-v {
    grid-row: span 2;
}

@media (max-width: 768px) {
    .gallery-grid {
        grid-template-columns: 1fr;
    }

    .span-2,
    .span-v {
        grid-column: span 1;
        grid-row: span 1;
    }
}

/* ─── Page Transition Animations ─────────────────────────────── */

/* Entry: Snappier and more subtle slide up */
@keyframes page-enter {
    from {
        opacity: 0;
        transform: translate3d(0, 10px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* Exit: Quick and smooth fade out */
@keyframes page-exit {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
    to {
        opacity: 0;
        transform: translate3d(0, -5px, 0);
    }
}

.page-entering {
    animation: page-enter 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
    will-change: transform, opacity;
}

.page-exiting {
    animation: page-exit 0.25s ease-in both;
    pointer-events: none;
    will-change: transform, opacity;
}


/* Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.animate-fade-in {
    animation: fadeIn 1.5s ease-out forwards;
}

.animate-slide-up {
    animation: slideUp 1s ease-out forwards;
}

.delay-200 { animation-delay: 200ms; }
.delay-500 { animation-delay: 500ms; }

/* Scrolled Header State */
header.header-scrolled {
    background-color: rgba(251, 251, 226, 0.9); /* #fbfbe2 with opacity */
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px -5px rgba(0,0,0,0.1);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    transition: all 0.5s ease;
}

header {
    transition: all 0.5s ease;
}