:root {
            --royal-blue: #2F2FE4;
            --white: #FFFFFF;
            --black: #111111;
        }

        body {
            font-family: 'Dosis', sans-serif;
            background-color: var(--white);
            color: var(--black);
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

        h1, h2, h3, .editorial-font {
            font-family: 'Cormorant Garamond', serif;
        }

        .bg-royal { background-color: var(--royal-blue); }
        .text-royal { color: var(--royal-blue); }
        .border-royal { border-color: var(--royal-blue); }

        /* Multi-page Logic */
        .page-view { display: none; }
        .page-view.active { display: block; animation: pageFadeIn 0.8s ease-in-out; }
        @keyframes pageFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

        /* Cinematic Animations */
        .reveal { opacity: 0; transform: translateY(50px); transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1); }
        .reveal.active { opacity: 1; transform: translateY(0); }

        .img-zoom-container { overflow: hidden; position: relative; }
        .img-zoom-container img { transition: transform 2s cubic-bezier(0.16, 1, 0.3, 1); }
        .img-zoom-container:hover img { transform: scale(1.08); }

        .parallax {
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }

        /* Editorial Elements */
        .overlap-1 { position: relative; z-index: 10; }
        .overlap-2 { position: absolute; bottom: -15%; right: -15%; z-index: 20; width: 60%; }
        
        .thin-line { height: 1px; background: rgba(0,0,0,0.1); width: 100%; }

        /* Custom Scrollbar */
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: #f1f1f1; }
        ::-webkit-scrollbar-thumb { background: var(--royal-blue); }

        /* Hamburger Animation */
        .hamburger span { display: block; width: 25px; height: 2px; background: currentColor; transition: 0.3s; margin: 5px 0; }
        .mobile-open .span1 { transform: rotate(45deg) translate(5px, 5px); }
        .mobile-open .span2 { opacity: 0; }
        .mobile-open .span3 { transform: rotate(-45deg) translate(5px, -5px); }