/* Custom Tailwind Configuration via JIT/Style Block */
        :root {
            --color-ivory: #F9F7F4;
            --color-jet: #111111;
            --color-beige: #D6CFC7;
            --color-gold: #C9A96E;
        }

        /* Base styles */
        body {
            background-color: var(--color-ivory);
            color: var(--color-jet);
            font-family: 'Inter', sans-serif;
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

        /* Cinematic Hero Animation (Slow Zoom) */
        .hero-image-zoom {
            background-image: url('https://i.pinimg.com/736x/a8/ec/55/a8ec55066ad76915310808dfc9256de9.jpg');
            background-size: 110%; /* Start slightly zoomed in */
            background-position: center;
            transition: background-size 8s ease-out;
            animation: slowZoom 15s forwards;
            filter: grayscale(10%) contrast(105%);
        }
        @keyframes slowZoom {
            to { background-size: 100%; } /* Zoom out slowly */
        }
        
        /* Custom Hover Effect for Collection Cards */
        .card-image-wrapper {
            transition: all 0.5s ease-out;
        }
        .card-image {
            transition: filter 0.5s ease-out, transform 0.5s ease-out;
            filter: saturate(100%);
            transform: scale(1.0);
        }
        .card-image-wrapper:hover .card-image {
            filter: saturate(50%); /* Desaturates slightly */
            transform: scale(1.02);
        }
        .card-title {
            position: relative;
        }
        .card-title::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -5px;
            width: 0;
            height: 2px;
            background-color: var(--color-gold);
            transition: width 0.4s ease-out;
        }
        .card-image-wrapper:hover .card-title::after {
            width: 100%; /* Gold underline animates in */
        }

        /* Scrollable Lookbook Layout */
        .lookbook-scroller {
            overflow-x: scroll;
            -webkit-overflow-scrolling: touch;
            scroll-snap-type: x mandatory;
        }
        .lookbook-item {
            scroll-snap-align: center;
            flex: 0 0 85vw; /* Take up 85% of viewport width */
        }
        /* Desktop adjustment */
        @media (min-width: 640px) {
            .lookbook-item {
                flex: 0 0 40vw;
            }
        }
        @media (min-width: 1024px) {
            .lookbook-item {
                flex: 0 0 30vw;
            }
        }

        /* Editorial Content Reveal (via JS) */
        .reveal-element {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }
        .reveal-element.is-visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Button Ripple Effect */
        .ripple-button {
            position: relative;
            overflow: hidden;
            z-index: 10;
        }
        .ripple-button:active:after {
            transform: scale(0, 0);
            opacity: 0.5;
            transition: 0s;
        }
        .ripple-button:after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 5px;
            height: 5px;
            background: rgba(255, 255, 255, 0.5);
            opacity: 0;
            border-radius: 100%;
            transform: scale(1, 1) translate(-50%);
            transform-origin: 50% 50%;
            transition: all 0.8s ease-out;
        }