:root {
            --deep-red: #D34E4E;
            --cream: #F9E7B2;
            --apricot: #FDE7B3;
            --teal: #048998;
        }

        body {
            font-family: 'Zilla Slab', serif;
            background-color: var(--cream);
            color: var(--deep-red);
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

        /* --- UI Elements --- */
        .page { display: none; min-height: 100vh; }
        .page.active { display: block; animation: pageFade 0.8s ease-out forwards; }
        @keyframes pageFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

        /* --- Header Logic --- */
        header.shrunk { background: var(--cream); padding: 1rem 2.5rem; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
        .nav-link { position: relative; padding-bottom: 5px; }
        .nav-link::after { content: ''; position: absolute; width: 0; height: 2px; bottom: 0; left: 0; background: var(--deep-red); transition: width 0.3s; }
        .nav-link:hover::after { width: 100%; }

        /* --- Diagonal Hero --- */
        .hero-container { position: relative; height: 100vh; display: flex; overflow: hidden; }
        .hero-left { 
            flex: 1; background: var(--cream); 
            clip-path: polygon(0 0, 100% 0, 80% 100%, 0% 100%); 
            display: flex; align-items: center; justify-content: center; z-index: 2; 
        }
        .hero-right { 
            flex: 1; background: var(--deep-red); 
            margin-left: -20%; display: flex; align-items: center; justify-content: center;
            background-image: linear-gradient(rgba(211,78,78,0.8), rgba(211,78,78,0.8)), url('https://i.pinimg.com/736x/61/13/10/6113108a40f86fedb613adc45b45b312.jpg');
            background-size: cover; background-position: center;
        }

        /* --- Magazine Staggered Grid --- */
        .mag-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2rem; }
        .asym-card { transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); cursor: pointer; }
        .asym-card:hover { transform: translateY(-15px) rotate(1deg); }
        .rotated-label { transform: rotate(-5deg); background: var(--deep-red); color: var(--cream); padding: 0.5rem 1rem; font-weight: bold; width: fit-content; }

        /* --- Interactive Sections --- */
        .timeline-container { display: flex; overflow-x: auto; scrollbar-width: none; gap: 4rem; padding: 4rem 10%; }
        .timeline-container::-webkit-scrollbar { display: none; }
        .timeline-item { flex: 0 0 350px; transition: transform 0.4s; }
        .timeline-item:hover { transform: scale(1.05); }

        .chef-card-inner { position: relative; width: 100%; height: 450px; transition: transform 0.8s; transform-style: preserve-3d; }
        .chef-card:hover .chef-card-inner { transform: rotateY(180deg); }
        .chef-front, .chef-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; }
        .chef-back { transform: rotateY(180deg); background: var(--apricot); padding: 2rem; display: flex; flex-direction: column; justify-content: center; border: 4px solid var(--deep-red); }

        /* --- Floating Objects --- */
        .floating { animation: floatAnim 6s ease-in-out infinite; }
        @keyframes floatAnim {
            0%, 100% { transform: translate(0, 0) rotate(0deg); }
            50% { transform: translate(-10px, -20px) rotate(5deg); }
        }

        /* --- Modals --- */
        .modal-blur { backdrop-filter: blur(15px); background: rgba(255, 231, 178, 0.85); }
        .recipe-image-hero { height: 400px; background-size: cover; background-position: center; }

        /* --- Typography --- */
        .zilla-bold { font-weight: 700; }
        .zilla-light { font-weight: 300; }