:root {
            --forest: #427A43;
            --beige: #C0B87A;
            --dark-green: #005F02;
        }

        * { 
            font-family: 'Mea Culpa', cursive !important;
            scrollbar-width: thin;
            scrollbar-color: var(--forest) var(--beige);
        }

        body {
            background-color: var(--beige);
            color: var(--forest);
            margin: 0;
            overflow-x: hidden;
            line-height: 1.4;
        }

        /* Color Utility Classes */
        .bg-forest { background-color: var(--forest); }
        .bg-beige { background-color: var(--beige); }
        .bg-dark-green { background-color: var(--dark-green); }
        .text-forest { color: var(--forest); }
        .text-beige { color: var(--beige); }
        .text-dark-green { color: var(--dark-green); }
        .border-forest { border-color: var(--forest); }
        .border-beige { border-color: var(--beige); }

        /* Storytelling Animations */
        @keyframes inkFlow {
            from { stroke-dashoffset: 1000; opacity: 0; }
            to { stroke-dashoffset: 0; opacity: 0.3; }
        }
        .ink-stroke {
            stroke-dasharray: 1000;
            animation: inkFlow 12s ease-in-out infinite alternate;
        }

        .reveal {
            opacity: 0;
            transform: translateY(40px);
            transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        /* Interactive Elements */
        .art-card {
            border: 2px solid var(--forest);
            transition: all 0.5s ease;
            background: var(--beige);
            position: relative;
        }
        .art-card:hover {
            transform: scale(1.02) rotate(-0.5deg);
            box-shadow: 20px 20px 0px var(--dark-green);
        }

        .btn-action {
            background: var(--dark-green);
            color: var(--beige);
            border: 1px solid var(--forest);
            padding: 1rem 2rem;
            cursor: pointer;
            transition: 0.3s;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 1.5rem;
        }
        .btn-action:hover {
            background: var(--forest);
            letter-spacing: 2px;
        }

        /* Search Overlay */
        #search-overlay {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(66, 122, 67, 0.98);
            z-index: 2000; display: none; align-items: center; justify-content: center;
        }

        /* Modal Styles */
        .modal-bg {
            position: fixed; inset: 0; background: rgba(0, 95, 2, 0.9);
            z-index: 3000; display: none; align-items: center; justify-content: center; padding: 2rem;
        }
        .modal-content {
            background: var(--beige); color: var(--forest);
            width: 100%; max-width: 900px; max-height: 85vh;
            overflow-y: auto; border: 4px solid var(--forest);
            padding: 3rem; position: relative;
        }

        /* Cart Sidebar */
        .sidebar {
            position: fixed; top: 0; right: -100%; width: 100%; max-width: 450px;
            height: 100vh; background: var(--beige); border-left: 6px solid var(--forest);
            transition: 0.6s cubic-bezier(0.8, 0, 0.2, 1); z-index: 2500;
            display: flex; flex-direction: column;
        }
        .sidebar.active { right: 0; }
/* Slideshow Styles */
.slideshow-container {
    perspective: 1000px;
}

.slide {
    transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.slide img {
    filter: grayscale(100%) contrast(120%);
    transition: filter 1.5s ease;
}

.slide:hover img {
    filter: grayscale(0%) contrast(100%);
}

/* Typewriter Styles */
.typewriter-container {
    font-family: 'Times New Roman', serif;
    letter-spacing: -2px;
    min-height: 5.5rem;
}

.typewriter-text {
    border-right: 3px solid transparent;
}

.typewriter-cursor {
    display: inline-block;
    width: 3px;
    background-color: #427A43;
    margin-left: 2px;
    animation: blink 1s infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Text Navigation Hover Effects */
.group:hover .group-hover\\:scale-125 {
    transform: scale(1.25);
}

/* Ink Stroke Animations */
.ink-stroke {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: draw 5s ease-in-out infinite alternate;
}

@keyframes draw {
    to {
        stroke-dashoffset: 0;
    }
}

/* Smooth transitions */
.quote-line {
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .typewriter-container {
        font-size: 3.5rem;
        min-height: 4.5rem;
    }
}

@media (max-width: 768px) {
    .typewriter-container {
        font-size: 2.5rem;
        min-height: 3.5rem;
    }
}