:root {
            --bg-color: #FFEAEA;
            --text-black: #000000;
            --font-main: 'Italiana', serif;
        }

        body {
            font-family: var(--font-main);
            background-color: var(--bg-color);
            color: var(--text-black);
            margin: 0;
            overflow-x: hidden;
        }

        /* Typography */
        h1, h2, h3, h4, h5, button, a {
            font-family: var(--font-main);
            font-weight: 400;
        }

        /* Transparent Header */
        header {
            background: transparent;
            border: none;
        }

        /* Hero Section Structural Lines */
        .hero-container {
            min-height: 200vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 0 10%;
            position: relative;
        }

        .hr-wrapper {
            width: 80%;
            margin-top: 5rem;;
        }

        hr.design-line {
            border: 0;
            border-top: 1px solid rgba(0,0,0,0.8);
            width: 100%;
        }

        .hero-content-box {
            padding: 3rem 0;
            text-align: center;
        }

        .btn-portfolio-center {
            position: absolute;
            left: 50%;
            transform: translate(-50%, -50%);
            background: var(--bg-color);
            padding: 0 2rem;
            border: 1px solid black;
            height: 50px;
            display: flex;
            align-items: center;
            text-transform: uppercase;
            letter-spacing: 2px;
            transition: all 0.3s ease;
            z-index: 10;
        }

        .btn-portfolio-center:hover {
            background: black;
            color: white;
        }
.hero-accent-img {
    width: 100vw;       /* Full viewport width */
    height: 80;       /* Maintain aspect ratio */
    display: block;     /* Remove inline gaps */
    object-fit: cover;  /* Fill width nicely */
    margin: 0;          /* No left/right/top/bottom margins */
    position: relative; /* Normal flow */
}
      @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-20px); }
        }

        /* Transitions */
        .page-node { display: none; }
        .page-node.active { display: block; animation: pageFade 0.6s ease forwards; }

        @keyframes pageFade {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        /* Portfolio Cards */
        .card-container {
            position: relative;
            overflow: hidden;
            background: #fff;
            aspect-ratio: 4/5;
        }

        .card-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 1s ease;
        }

        .card-overlay {
            position: absolute;
            inset: 0;
            background: rgba(255, 234, 234, 0.9);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 2rem;
            opacity: 0;
            transition: opacity 0.4s ease;
        }

        .card-container:hover img { transform: scale(1.1); }
        .card-container:hover .card-overlay { opacity: 1; }

        /* Custom Modal */
        #qv-modal {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.8);
            z-index: 2000;
            align-items: center;
            justify-content: center;
            padding: 2rem;
        }

        .modal-body {
            background: var(--bg-color);
            width: 100%;
            max-width: 1100px;
            height: 80vh;
            display: flex;
            flex-direction: column;
            position: relative;
            overflow: hidden;
        }

        @media (min-width: 768px) {
            .modal-body { flex-direction: row; }
        }

        /* Gallery Masonry */
        .masonry-item:nth-child(even) { margin-top: 5rem; }