:root {
            --sand: #F6F3C2;
            --sunset: #E37434;
            --charcoal: #222222;
            --white: #FFFFFF;
        }

        body {
            font-family: 'Funnel Sans', sans-serif;
            background-color: var(--sand);
            color: var(--charcoal);
            scroll-behavior: smooth;
            overflow-x: hidden;
            margin: 0;
        }

        /* --- GLOBAL UTILITIES --- */
        .fw-800 { font-weight: 800; }
        .fw-700 { font-weight: 700; }
        .fw-600 { font-weight: 600; }
        .fw-400 { font-weight: 400; }

        /* --- NAVIGATION --- */
        .sticky-header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            background-color: var(--sand);
            transition: all 0.4s ease;
        }
        .header-scrolled { 
            padding: 0.75rem 0 !important; 
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
            background-color: rgba(246, 243, 194, 0.95);
            backdrop-filter: blur(10px);
        }

        .logo-underline {
            position: relative;
            display: inline-block;
        }
        .logo-underline::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100%;
            height: 4px;
            background-color: var(--sunset);
        }

        .nav-item {
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            font-size: 0.75rem;
            transition: color 0.3s ease;
            position: relative;
        }
        .nav-item:hover { color: var(--sunset); }
        .nav-item::after {
            content: '';
            position: absolute;
            bottom: -4px;
            left: 0;
            width: 0;
            height: 2px;
            background-color: var(--sunset);
            transition: width 0.3s ease;
        }
        .nav-item:hover::after { width: 100%; }

        /* --- HERO --- */
        .hero-section {
            height: 100vh;
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: center;
            position: relative;
            overflow: hidden;
        }
        .hero-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(75deg, rgba(34, 34, 34, 0.7) 0%, rgba(227, 116, 52, 0.3) 100%);
        }
        @keyframes heroZoom {
            from { transform: scale(1.1); }
            to { transform: scale(1); }
        }
        .hero-bg-animate {
            animation: heroZoom 10s ease-out infinite alternate;
        }

        /* --- BUTTONS --- */
        .btn-sunset {
            background-color: var(--sunset);
            color: var(--white);
            padding: 1rem 2.5rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 2px;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            display: inline-block;
        }
        .btn-sunset:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(227, 116, 52, 0.4); }

        .btn-outline-white {
            border: 2px solid var(--white);
            color: var(--white);
            padding: 1rem 2.5rem;
            font-weight: 600;
            text-transform: uppercase;
            transition: all 0.3s ease;
        }
        .btn-outline-white:hover { background: var(--white); color: var(--sunset); }

        /* --- CARDS --- */
        .magazine-card {
            background: var(--white);
            transition: all 0.4s ease;
            cursor: pointer;
        }
        .magazine-card:hover { transform: translateY(-10px); }
        .magazine-card img { transition: transform 0.8s ease; }
        .magazine-card:hover img { transform: scale(1.08); }

        .category-pill {
            background-color: var(--sunset);
            color: var(--white);
            padding: 4px 12px;
            font-size: 0.65rem;
            font-weight: 800;
            text-transform: uppercase;
            border-radius: 2px;
        }

        /* --- MODALS (CRITICAL FIX) --- */
        .modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(34, 34, 34, 0.95);
            z-index: 9999;
            display: none; /* Always hidden on load */
            align-items: center;
            justify-content: center;
            padding: 20px;
            backdrop-filter: blur(8px);
        }

        /* --- PAGES --- */
        .page-container { display: none; min-height: 100vh; }
        .page-container.active { display: block; }

        /* Custom Scrollbar */
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: var(--sand); }
        ::-webkit-scrollbar-thumb { background: var(--sunset); }

        .no-scrollbar::-webkit-scrollbar { display: none; }