:root {
            --ash: #d2cdc4;
            --smoke: #ebe9e4;
            --olive: #7a8271;
            --terracotta: #b88675;
            --ink: #1a1a1a;
            --paper: #f2f0ed;
        }

        body {
            background-color: var(--paper);
            color: var(--ink);
            font-family: 'Inter', sans-serif;
            overflow-x: hidden;
            scroll-behavior: smooth;
            -webkit-font-smoothing: antialiased;
        }

        .font-serif { font-family: 'Playfair Display', serif; }
        .font-cursive { font-family: 'Pinyon Script', cursive; }
        
        /* Grainy Overlay */
        .grain {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            pointer-events: none;
            z-index: 9999;
            opacity: 0.05;
            background-image: url("https://grainy-gradients.vercel.app/noise.svg");
        }

        /* Animations */
        .fade-in-up {
            opacity: 0;
            transform: translateY(30px);
            transition: all 1.2s cubic-bezier(0.2, 0, 0.2, 1);
        }
        .fade-in-up.active {
            opacity: 1;
            transform: translateY(0);
        }

        .page-node {
            display: none;
            opacity: 0;
            transition: opacity 1s ease;
        }
        .page-node.active { display: block; opacity: 1; }

        .btn-fabric {
            position: relative;
            padding: 16px 32px;
            background: var(--ash);
            color: var(--ink);
            font-size: 10px;
            letter-spacing: 0.3em;
            text-transform: uppercase;
            transition: all 0.5s ease;
            border: 1px solid transparent;
        }
        .btn-fabric:hover {
            background: transparent;
            border-color: var(--ink);
            padding-left: 45px;
        }

        .card-settle {
            transition: transform 0.8s cubic-bezier(0.2, 0, 0.2, 1);
        }
        .card-settle:hover {
            transform: translateY(8px);
        }

        .marginalia {
            font-family: 'Pinyon Script', cursive;
            color: var(--terracotta);
            font-size: 2rem;
            line-height: 1;
        }

        /* Search Overlay */
        #search-overlay {
            background: rgba(242, 240, 237, 0.98);
            backdrop-filter: blur(10px);
            display: none;
        }

        /* Arrival Logic */
        #arrival-overlay {
            background: #121212;
            color: var(--ash);
            transition: opacity 1.5s ease;
        }

        .vertical-line {
            width: 1px;
            background: currentColor;
            opacity: 0.1;
        }
    /* Ensure smooth modal fade */
#auth-modal {
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

#auth-modal.hidden {
    opacity: 0;
    visibility: hidden;
}

#auth-modal:not(.hidden) {
    opacity: 1;
    visibility: visible;
}