:root {
            --cream: #F2E3BB;
            --black: #000000;
            --white: #FFFFFF;
            --shadow: rgba(0,0,0,0.1);
        }

        /* Typography Override based on specifications */
        body {
            background-color: var(--white);
            color: var(--black);
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

        h1, h2, h3, .heading-mono {
            font-weight: 700;
            letter-spacing: -0.02em;
        }

        .editorial-text {
            font-size: 1.25rem;
            line-height: 1.6;
        }

        /* Hero Layout */
        .hero-split {
            display: grid;
            grid-template-columns: 1.1fr 0.9fr;
            min-height: 100vh;
        }

        .layered-card-1 {
            width: 300px;
            height: 440px;
            z-index: 20;
            opacity: 0;
            transform: translateY(10px);
            transition: all 1s cubic-bezier(0.2, 1, 0.3, 1);
        }

        .layered-card-2 {
            width: 360px;
            height: 460px;
            z-index: 20;
            opacity: 0;
            transform: translate(120px, -120px) rotate(-0deg);
            transition: all 1s cubic-bezier(0.2, 1, 0.3, 1) 0.3s;
        }

        .layered-card-1.active, .layered-card-2.active {
            opacity: 1;
            transform: translate(20) rotate(1);
        }
        
        .layered-card-2.active {
            transform: translate(100px, -170px) rotate(-6deg);
        }

        /* Animations */
        @keyframes slideUp {
            from { opacity: 0; transform: translateY(60px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .animate-hero-text {
            animation: slideUp 1.2s cubic-bezier(0.2, 1, 0.3, 1) forwards;
        }

        .reveal-on-scroll {
            opacity: 0;
            transform: translateY(40px);
            transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .reveal-on-scroll.visible {
            opacity: 1;
            transform: translateY(0);
        }

/* ============================= */
/* Horizontal Portfolio Slider   */
/* ============================= */

.horizontal-scroll-container {
    display: flex;
    gap: 4rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 0 10vw;
    cursor: grab;

    scrollbar-width: none;
    -ms-overflow-style: none;
}

.horizontal-scroll-container::-webkit-scrollbar {
    display: none;
}

.horizontal-scroll-container:active {
    cursor: grabbing;
}

.portfolio-item {
    flex: 0 0 70vw;
    height: 70vh;
    scroll-snap-align: center;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}

.portfolio-item img {
    width: 100%;
    height: 200%;
    object-fit: cover;
    transition: transform 0.7s ease, filter 0.7s ease;
}

.portfolio-item:hover img {
    transform: scale(1.06);
}

.portfolio-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
    display: flex;
    align-items: flex-end;
    padding: 3rem;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.portfolio-item:hover .portfolio-overlay {
    opacity: 1;
}

        /* Navigation */
        .page-view { display: none; }
        .page-view.active { display: block; }

        .nav-link {
            position: relative;
            cursor: pointer;
            transition: opacity 0.3s;
        }
        .nav-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -5px;
            left: 0;
            background: currentColor;
            transition: width 0.3s ease;
        }
        .nav-link:hover::after { width: 100%; }

        .bg-pattern {
            background-image: radial-gradient(circle, #000 1px, transparent 1px);
            background-size: 30px 30px;
            opacity: 0.03;
            position: absolute;
            inset: 0;
            pointer-events: none;
        }

        /* Filter System */
        .filter-btn.active {
            background: black;
            color: white;
        }