:root {
            --warm-ivory: #fcfaf7;
            --walnut: #4a3728;
            --oak: #a68a64;
            --charcoal: #2d2d2d;
            --forest: #3d4a3e;
        }

        body {
            background-color: var(--warm-ivory);
            color: var(--charcoal);
            font-family: 'Instrument Sans', sans-serif;
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

        .font-serif { font-family: 'Playfair Display', serif; }
        .font-cursive { font-family: 'La+Belle+Aurore', cursive; font-family: 'La Belle Aurore', cursive; }
        .font-mono { font-family: 'Space Mono', monospace; }

        /* --- Custom Animations --- */
        @keyframes dust {
            0% { transform: translate(0, 0); opacity: 0; }
            50% { opacity: 0.3; }
            100% { transform: translate(100px, -100px); opacity: 0; }
        }

        .dust-particle {
            position: fixed;
            background: rgba(166, 138, 100, 0.2);
            border-radius: 50%;
            pointer-events: none;
            z-index: 1;
        }

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

        /* --- Artisan UI Components --- */
        .btn-artisan {
            position: relative;
            padding: 1rem 2.5rem;
            border: 1px solid rgba(74, 55, 40, 0.2);
            background: transparent;
            font-family: 'Space Mono', monospace;
            font-size: 0.7rem;
            letter-spacing: 0.3em;
            text-transform: uppercase;
            transition: all 0.5s ease;
            cursor: pointer;
            overflow: hidden;
        }
        .btn-artisan:hover {
            border-color: var(--walnut);
            background: #fffcf9;
            box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
            transform: translateY(1px);
        }
        .btn-artisan::after {
            content: '';
            position: absolute;
            bottom: 0; left: 0;
            width: 100%; height: 0%;
            background: var(--walnut);
            z-index: -1;
            transition: height 0.3s ease;
        }
        .btn-artisan:hover::after { height: 100%; }
        .btn-artisan:hover { color: white; }

        .wood-card {
            background: #fff;
            transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
            border: 1px solid transparent;
        }
        .wood-card:hover {
            border-color: rgba(166, 138, 100, 0.1);
            box-shadow: 0 30px 60px -20px rgba(74, 55, 40, 0.1);
        }

        .etched-line {
            height: 1px;
            background: rgba(74, 55, 40, 0.1);
            position: relative;
            overflow: hidden;
        }
        .etched-line::after {
            content: '';
            position: absolute;
            left: -100%; top: 0;
            width: 100%; height: 100%;
            background: var(--oak);
            transition: left 1s ease;
        }
        .group:hover .etched-line::after { left: 0; }

        /* --- Layout Structures --- */
        .page-layer { display: none; }
        .page-layer.active { display: block; }
        
        #loading-screen {
            background: #fcfaf7;
            z-index: 10000;
            transition: opacity 1.5s ease;
        }

        /* Responsive Grids */
        .editorial-grid {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            gap: 2rem;
        }
   /* Color definitions */
    :root {
        --oak: #8B7355;
        --walnut: #5C4033;
        --maple: #D4A76A;
        --charcoal: #1a1a1a;
    }
    
    .text-oak { color: var(--oak); }
    .text-walnut { color: var(--walnut); }
    .text-maple { color: var(--maple); }
    .bg-charcoal { background-color: var(--charcoal); }
    
    /* Base animations */
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    @keyframes fadeInDown {
        from {
            opacity: 0;
            transform: translateY(-30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    
    @keyframes slideUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    @keyframes slideUpWord {
        from {
            opacity: 0;
            transform: translateY(50px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    @keyframes slideInLeft {
        from {
            opacity: 0;
            transform: translateX(-50px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
    
    @keyframes slideInRight {
        from {
            opacity: 0;
            transform: translateX(50px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
    
    /* Wood-specific animations */
    @keyframes wood-grain {
        0% {
            transform: scale(1.1) translateX(0);
        }
        100% {
            transform: scale(1.1) translateX(-10px);
        }
    }
    
    @keyframes wood-scroll {
        0% {
            transform: translateY(-100%);
        }
        100% {
            transform: translateY(100%);
        }
    }
    
    @keyframes border-pulse {
        0%, 100% {
            border-color: rgba(139, 115, 85, 0.2);
        }
        50% {
            border-color: rgba(139, 115, 85, 0.4);
        }
    }
    
    @keyframes width-grow {
        from {
            width: 0;
        }
        to {
            width: 100%;
        }
    }
    
    @keyframes wood-chip-float {
        0% {
            transform: translateY(0) rotate(0deg);
            opacity: 0;
        }
        10% {
            opacity: 0.3;
        }
        90% {
            opacity: 0.3;
        }
        100% {
            transform: translateY(-100px) rotate(180deg);
            opacity: 0;
        }
    }
    
    @keyframes carving-motion {
        0% {
            left: -100%;
        }
        100% {
            left: 100%;
        }
    }
    
    @keyframes line-sweep {
        0% {
            transform: translateX(-100%);
        }
        100% {
            transform: translateX(100%);
        }
    }
    
    @keyframes aging-process {
        0% {
            width: 0;
        }
        100% {
            width: 100%;
        }
    }
    
    @keyframes snowfall {
        0% {
            transform: translateY(-100px) rotate(0deg);
            opacity: 0;
        }
        10% {
            opacity: 0.5;
        }
        90% {
            opacity: 0.5;
        }
        100% {
            transform: translateY(100vh) rotate(360deg);
            opacity: 0;
        }
    }
    
    @keyframes gradient-shift {
        0%, 100% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
    }
    
    @keyframes float-slow {
        0%, 100% {
            transform: translateY(0) rotate(0deg);
        }
        50% {
            transform: translateY(-20px) rotate(5deg);
        }
    }
    
    @keyframes float-slower {
        0%, 100% {
            transform: translateY(0) rotate(0deg);
        }
        50% {
            transform: translateY(-10px) rotate(-5deg);
        }
    }
    
    @keyframes spin-slow {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }
    
    @keyframes spin-slower {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(-360deg);
        }
    }
    
    @keyframes ping-slow {
        0% {
            transform: scale(1);
            opacity: 0.8;
        }
        100% {
            transform: scale(3);
            opacity: 0;
        }
    }
    
    @keyframes pulse-slow {
        0%, 100% {
            opacity: 0.6;
        }
        50% {
            opacity: 1;
        }
    }
    
    @keyframes pulse-border {
        0%, 100% {
            border-color: rgba(139, 115, 85, 0.2);
        }
        50% {
            border-color: rgba(139, 115, 85, 0.4);
        }
    }
    
    /* Custom animation classes */
    .animate-wood-grain {
        animation: wood-grain 60s linear infinite alternate;
    }
    
    .animate-wood-scroll {
        animation: wood-scroll 2s ease-in-out infinite;
    }
    
    .animate-border-pulse {
        animation: border-pulse 3s ease-in-out infinite;
    }
    
    .animate-width-grow {
        animation: width-grow 2s ease-out forwards;
    }
    
    .animate-wood-chip-float {
        animation: wood-chip-float 8s ease-in-out infinite;
    }
    
    .animate-carving-motion {
        animation: carving-motion 3s ease-in-out infinite;
    }
    
    .animate-line-sweep {
        animation: line-sweep 15s linear infinite;
    }
    
    .animate-aging-process {
        animation: aging-process 3s ease-out forwards;
    }
    
    .animate-snowfall {
        animation: snowfall 10s linear infinite;
    }
    
    .animate-gradient-shift {
        animation: gradient-shift 15s ease infinite;
        background-size: 200% 200%;
    }
    
    .animate-float-slow {
        animation: float-slow 6s ease-in-out infinite;
    }
    
    .animate-float-slower {
        animation: float-slower 8s ease-in-out infinite;
    }
    
    .animate-spin-slow {
        animation: spin-slow 20s linear infinite;
    }
    
    .animate-spin-slower {
        animation: spin-slower 30s linear infinite;
    }
    
    .animate-ping-slow {
        animation: ping-slow 3s ease-out infinite;
    }
    
    .animate-pulse-slow {
        animation: pulse-slow 3s ease-in-out infinite;
    }
    
    .animate-pulse-border {
        animation: pulse-border 2s ease-in-out infinite;
    }
    
    /* Component animations */
    .animate-fadeInUp { animation: fadeInUp 1s ease forwards; }
    .animate-fadeInDown { animation: fadeInDown 1s ease forwards; }
    .animate-fadeIn { animation: fadeIn 1s ease forwards; }
    .animate-slideUp { animation: slideUp 1s ease forwards; }
    .animate-slideUpWord { animation: slideUpWord 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
    .animate-slideInLeft { animation: slideInLeft 1s ease forwards; }
    .animate-slideInRight { animation: slideInRight 1s ease forwards; }
    
    /* Card animations */
    .animate-wood-card {
        animation: slideInLeft 1s ease forwards, fadeIn 1s ease forwards;
    }
    
    .animate-tool-reveal {
        animation: fadeInUp 1s ease forwards;
    }
    
    .animate-collection-card {
        animation: fadeInUp 1s ease forwards;
    }
    
    /* Component styles */
    .btn-artisan {
        border: 1px solid var(--oak);
        color: var(--oak);
        padding: 16px 32px;
        font-size: 12px;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        background: transparent;
        cursor: pointer;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    .btn-artisan:hover {
        background: rgba(139, 115, 85, 0.05);
    }
    
    .editorial-grid {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 2rem;
    }
    
    .col-span-12 { grid-column: span 12; }
    .col-span-5 { grid-column: span 5; }
    .col-span-7 { grid-column: span 7; }
    
    @media (min-width: 1024px) {
        .lg\:col-span-5 { grid-column: span 5; }
        .lg\:col-span-7 { grid-column: span 7; }
    }
    
    /* Particle styles */
    .wood-chip {
        position: absolute;
        width: 4px;
        height: 4px;
        background-color: var(--oak);
        opacity: 0.3;
        border-radius: 1px;
        transform: rotate(45deg);
    }
    
    .snowflake {
        position: absolute;
        width: 2px;
        height: 2px;
        background-color: var(--oak);
        opacity: 0.1;
        border-radius: 50%;
    }
        /* Additional Animations */
    @keyframes width-grow-fast {
        from { width: 0; }
        to { width: 20%; }
    }
    
    @keyframes width-grow-slow {
        from { width: 0; }
        to { width: 100%; }
    }
    
    @keyframes care-cycle {
        0% { transform: translateX(-100%); }
        100% { transform: translateX(100%); }
    }
    
    .animate-width-grow-fast {
        animation: width-grow-fast 1s ease-out forwards;
    }
    
    .animate-width-grow-slow {
        animation: width-grow-slow 3s ease-out forwards;
    }
    
    .animate-care-cycle {
        animation: care-cycle 8s linear infinite;
    }
    
    /* Wood chip component */
    .wood-chip-small {
        position: absolute;
        width: 6px;
        height: 6px;
        background-color: var(--oak);
        opacity: 0.1;
        border-radius: 1px;
        transform: rotate(45deg);
    }
    
    /* Color definitions */
    :root {
        --oak: #8B7355;
        --walnut: #5C4033;
        --maple: #D4A76A;
    }
    
    .text-oak { color: var(--oak); }
    .text-walnut { color: var(--walnut); }
    .text-maple { color: var(--maple); }
    
    .bg-oak { background-color: var(--oak); }
    .bg-walnut { background-color: var(--walnut); }
    .bg-maple { background-color: var(--maple); }
        /* Workshop-specific animations */
    @keyframes wood-shavings {
        0% {
            transform: translateX(-100%) scaleX(0.5);
            opacity: 0;
        }
        50% {
            opacity: 1;
        }
        100% {
            transform: translateX(100%) scaleX(1);
            opacity: 0;
        }
    }
    
    @keyframes workbench-card {
        from {
            opacity: 0;
            transform: translateY(30px) scale(0.95);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }
    
    .animate-wood-shavings {
        animation: wood-shavings 3s ease-in-out infinite;
    }
    
    .animate-workbench-card {
        animation: workbench-card 1s ease-out forwards;
    }
    
    .animate-tool-reveal {
        animation: fadeInUp 1s ease-out forwards;
    }
    
    /* Existing animations from previous pages */
    .animate-fadeInUp { animation: fadeInUp 1s ease forwards; }
    .animate-slideUp { animation: slideUp 1s ease forwards; }
    .animate-float-slow { animation: float-slow 6s ease-in-out infinite; }
    .animate-float-slower { animation: float-slower 8s ease-in-out infinite; }
    .animate-pulse-slow { animation: pulse-slow 3s ease-in-out infinite; }
    .animate-pulse-border { animation: pulse-border 2s ease-in-out infinite; }
    .animate-gradient-shift { animation: gradient-shift 15s ease infinite; }
    
    .btn-artisan {
        border: 1px solid var(--oak);
        color: var(--oak);
        padding: 12px 24px;
        font-size: 12px;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        background: transparent;
        cursor: pointer;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    .btn-artisan:hover {
        background: rgba(139, 115, 85, 0.05);
    }