:root {
            --garnet: #492828;
            --cream: #D8C9A7;
            --pumpkin: #DE802B;
            --lemon: #FBE580;
            --green: #93BD57;
        }

        body {
            font-family: "EB Garamond", serif;
            background-color: var(--cream);
            color: var(--garnet);
            scroll-behavior: smooth;
        }

        .heading-bold { font-weight: 800; }
        .text-pumpkin { color: var(--pumpkin); }
        .bg-garnet { background-color: var(--garnet); }
        .bg-pumpkin { background-color: var(--pumpkin); }
        .bg-lemon { background-color: var(--lemon); }

        /* HERO ANIMATION */
        .hero-layered {
            background: linear-gradient(rgba(73, 40, 40, 0.2), rgba(73, 40, 40, 0.2)),
                        url('https://i.pinimg.com/736x/b8/b0/b9/b8b0b9ba9cdfb638d732718a1240fa24.jpg');
            background-size: cover;
            background-position: center;
        }
        @keyframes panBackground {
            from { background-position: center; }
            to { background-position: top right; }
        }

        /* DIAGONAL CARDS */
        .diagonal-card {
            clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
            transition: all 0.5s ease;
        }
        .diagonal-card:hover {
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
            transform: translateY(-10px);
        }

        /* NAVIGATION HOVER */
        .nav-item {
            position: relative;
            padding-bottom: 2px;
        }
        .nav-item::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--pumpkin);
            transition: width 0.3s ease;
        }
        .nav-item:hover::after { width: 100%; }

        /* CUSTOM SCROLLBAR */
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: var(--cream); }
        ::-webkit-scrollbar-thumb { background: var(--garnet); }

        /* CARD OVERLAP */
        .recipe-card-overlap {
            margin-right: -40px;
            transition: transform 0.4s ease, z-index 0s;
        }
        .recipe-card-overlap:hover {
            transform: translateY(-20px) scale(1.05);
            z-index: 50;
        }

        /* MODAL BLUR */
        .modal-overlay {
            backdrop-filter: blur(8px);
            background: rgba(73, 40, 40, 0.85);
        }

        /* MASONRY APPROXIMATION */
        .masonry-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            grid-auto-rows: 10px;
        }