:root {
            --primary-navy: #0A2947;
            --cultural-green: #0A7C6E;
            --soft-ivory: #FDF6ED;
            --gallery-white: #FAFAFA;
            --antique-brass: #D6B87B;
            --font-editorial: 'Lilex', monospace;
            --font-serif: 'Playfair Display', serif;
            --transition-smooth: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        }

        /* Reset & Base Styles */
        *, *::before, *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: var(--font-editorial);
            background-color: var(--gallery-white);
            color: var(--primary-navy);
            overflow-x: hidden;
            line-height: 1.7;
            -webkit-font-smoothing: antialiased;
        }

        p {
            font-weight: 300;
            font-size: 0.95rem;
            letter-spacing: -0.01em;
            opacity: 0.85;
        }

        a {
            color: inherit;
            text-decoration: none;
            transition: var(--transition-smooth);
        }

        img {
            max-width: 100%;
            height: auto;
            display: block;
            object-fit: cover;
            filter: grayscale(15%) contrast(95%);
        }

        /* Typography Helper Classes */
        .editorial-headline {
            font-family: var(--font-serif);
            font-weight: 400;
            font-size: calc(2.5rem + 3vw);
            line-height: 1.1;
            letter-spacing: -0.03em;
        }

        .uppercase-label {
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.2em;
            color: var(--antique-brass);
            font-weight: 500;
            display: block;
            margin-bottom: 1rem;
        }

        /* Layout & Structure */
        .section-spacer {
            padding: 10vw 5vw;
        }

        /* Global Dynamic Viewport Architecture */
        .app-view {
            display: none;
        }
        .app-view.active-view {
            display: block;
            animation: fadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* HEADER & NAVIGATION */
        header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            padding: 2rem 5vw;
            z-index: 1000;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo-container img {
            height: 228px;
            margin-top: -5rem;
            width: auto;
            filter: invert(1); /* Ensures visibility across mix-blend backgrounds */
        }

        /* Desktop Nav */
        .desktop-nav {
            display: flex;
                        margin-top: -5rem;

            gap: 3rem;
        }

        .desktop-nav a {
            font-size: 0.85rem;
            letter-spacing: 0.1em;
            color: #fff;
            
            text-transform: uppercase;
            position: relative;
        }

        .desktop-nav a::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 1px;
            background: var(--antique-brass);
            transition: var(--transition-smooth);
        }

        .desktop-nav a:hover::after,
        .desktop-nav a.active-link::after {
            width: 100%;
        }

        /* Mobile Hamburger & Menu */
        .hamburger {
            display: none;
            flex-direction: column;
            gap: 6px;
            cursor: pointer;
                        margin-top: -5rem;

            border: none;
            background: transparent;
            z-index: 1001;
        }

        .hamburger span {
            width: 28px;
            height: 1px;
            
            background-color: #fff;
            transition: var(--transition-smooth);
        }

        .hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
        .hamburger.open span:nth-child(2) { opacity: 0; }
        .hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

        .mobile-menu {
            position: fixed;
            top: 0;
            right: -100%;
            width: 100%;
            height: 100vh;
            background: var(--primary-navy);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 2.5rem;
            transition: var(--transition-smooth);
            z-index: 999;
        }

        .mobile-menu.open {
            right: 0;
        }

        .mobile-menu a {
            color: var(--soft-ivory);
            font-size: 1.5rem;
            font-family: var(--font-serif);
        }

        /* SECTION 01: HERO */
        .hero-section {
            height: 100vh;
            width: 100%;
            position: relative;
            background: url('https://images.unsplash.com/photo-1503899036084-c55cdd92da26?auto=format&fit=crop&w=1920&q=80') no-repeat center center/cover;
            display: flex;
            align-items: center;
            padding: 0 5vw;
        }

        .hero-section::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(to right, rgba(253,246,237,0.3) 0%, rgba(253,246,237,0) 100%);
        }

        .hero-content {
            position: relative;
            z-index: 10;
            max-width: 650px;
            color: #fff;
        }

        .hero-content h1 {
            color: #fff;
            margin-bottom: 2rem;
            text-shadow: 0 2px 10px rgba(0,0,0,0.15);
        }

        .hero-content p {
            font-size: 1.1rem;
            max-width: 450px;
            color: var(--soft-ivory);
        }

        /* Floating Destination Card */
        .floating-card {
            position: absolute;
            bottom: 4rem;
            right: 5vw;
            background: var(--soft-ivory);
            padding: 2.5rem;
            max-width: 320px;
            box-shadow: 0 30px 60px rgba(0,0,0,0.08);
            z-index: 10;
        }

        .floating-card h3 {
            font-family: var(--font-serif);
            font-size: 1.8rem;
            margin: 0.5rem 0 1rem;
            font-weight: 400;
        }

        .explore-link {
            font-size: 0.8rem;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            color: var(--cultural-green);
            font-weight: 500;
            display: inline-block;
            margin-top: 1rem;
        }

        /* SECTION 02: THE WORLD THROUGH STORIES */
        .stories-section {
            background-color: var(--soft-ivory);
        }

        .stories-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 5vw;
            margin-top: 8vw;
        }

        .story-column {
            display: flex;
            flex-direction: column;
        }

        .story-column:nth-child(even) {
            margin-top: 4rem;
        }

        .story-column img {
            width: 100%;
            height: 550px;
            margin-bottom: 2rem;
        }

        /* SECTION 03: DESTINATION MOSAIC */
        .mosaic-section {
            background-color: var(--gallery-white);
        }

        .mosaic-grid {
            position: relative;
            height: 1100px;
            margin-top: 6vw;
        }

        .mosaic-item {
            position: absolute;
            width: 32%;
        }

        .mosaic-item img {
            width: 100%;
            box-shadow: 0 20px 40px rgba(0,0,0,0.04);
        }

        .mosaic-caption {
            margin-top: 1rem;
            font-size: 0.85rem;
            font-style: italic;
            font-family: var(--font-serif);
        }

        .m-1 { top: 0; left: 0; width: 40%; }
        .m-2 { top: 120px; right: 5%; width: 26%; }
        .m-3 { top: 520px; left: 8%; width: 38%; }
        .m-4 { top: 620px; right: 12%; width: 28%; }

        /* SECTION 04: HERITAGE CHAPTERS */
        .heritage-section {
            background-color: var(--primary-navy);
            color: #fff;
            display: grid;
            grid-template-columns: 1fr 1fr;
            align-items: center;
            gap: 5vw;
            position: relative;
            overflow: hidden;
        }

        .chapters-nav {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        .chapter-btn {
            font-family: var(--font-serif);
            font-size: calc(2rem + 1.5vw);
            color: rgba(253,246,237,0.3);
            cursor: pointer;
            transition: var(--transition-smooth);
            text-align: left;
            background: none;
            border: none;
        }

        .chapter-btn:hover, .chapter-btn.active {
            color: var(--soft-ivory);
            transform: translateX(20px);
        }

        .chapters-preview {
            position: relative;
            height: 600px;
            width: 100%;
        }

        .chapter-img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: var(--transition-smooth);
            transform: scale(1.05);
        }

        .chapter-img.active {
            opacity: 1;
            transform: scale(1);
        }

        /* SECTION 05: TRAVEL NOTES WALL */
        .notes-section {
            background-color: var(--gallery-white);
            position: relative;
            height: 900px;
            overflow: hidden;
        }

        .note-page {
            position: absolute;
            background: #fff;
            padding: 2rem;
            box-shadow: 5px 15px 35px rgba(0,0,0,0.05);
            max-width: 300px;
        }

        .note-page img {
            margin-bottom: 1rem;
            width: 100%;
            height: 200px;
        }

        .note-sketch {
            font-family: var(--font-serif);
            font-style: italic;
            border: 1px dashed var(--antique-brass);
            padding: 2rem;
        }

        .n-1 { top: 10%; left: 8%; transform: rotate(-3deg); }
        .n-2 { top: 45%; left: 22%; transform: rotate(4deg); }
        .n-3 { top: 15%; right: 15%; transform: rotate(-2deg); }
        .n-4 { top: 50%; right: 5%; transform: rotate(6deg); }

        /* SECTION 06: SLOW TRAVEL FEATURE */
        .slow-travel-section {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8vw;
            background-color: #fff;
            align-items: center;
        }

        .slow-travel-img {
            height: 80vh;
            width: 100%;
        }

        .slow-travel-content {
            padding-right: 5vw;
        }

        .slow-travel-content p {
            margin: 2rem 0;
            font-size: 1.05rem;
            max-width: 500px;
        }

        /* SECTION 07: CULTURAL ATLAS */
        .atlas-section {
            background-color: var(--soft-ivory);
            text-align: center;
        }

        .atlas-container {
            margin-top: 4vw;
            position: relative;
            background: radial-gradient(circle, rgba(10,41,71,0.03) 0%, rgba(0,0,0,0) 70%);
            padding: 4rem;
        }

        .atlas-svg {
            width: 100%;
            max-width: 1100px;
            height: auto;
        }

        /* SECTION 08: FEATURED EXPERIENCES */
        .experiences-section {
            background-color: var(--primary-navy);
            color: #fff;
        }

        .exp-container {
            margin-top: 6vw;
            display: flex;
            flex-direction: column;
            gap: 4rem;
        }

        .exp-card {
            height: 70vh;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: flex-end;
            padding: 4rem;
        }

        .exp-card img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            transition: transform 1.2s ease;
        }

        .exp-card:hover img {
            transform: scale(1.03);
        }

        .exp-card::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(10,41,71,0.8) 0%, rgba(0,0,0,0) 60%);
            z-index: 2;
        }

        .exp-card-content {
            position: relative;
            z-index: 3;
            max-width: 600px;
        }

        .exp-card-content h3 {
            font-family: var(--font-serif);
            font-size: 2.5rem;
            font-weight: 400;
            margin-bottom: 1rem;
        }

        /* SECTION 09: CINEMATIC REEL */
        .reel-section {
            padding: 6vw 0;
            overflow: hidden;
            background: var(--gallery-white);
        }

        .reel-track {
            display: flex;
            gap: 3rem;
            width: max-content;
            animation: scrollReel 40s linear infinite;
        }

        .reel-track img {
            height: 450px;
            width: auto;
        }

        .reel-track img:nth-child(even) { height: 520px; margin-top: -35px; }

        @keyframes scrollReel {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }

        /* SECTION 10: NEWSLETTER & UNSUBSCRIBE */
        .newsletter-section {
            background: url('https://images.unsplash.com/photo-1528127269322-539801943592?auto=format&fit=crop&w=1920&q=80') no-repeat center center/cover;
            padding: 12vw 5vw;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .newsletter-box {
            background: var(--soft-ivory);
            padding: 5rem;
            max-width: 700px;
            width: 100%;
            text-align: center;
            box-shadow: 0 40px 90px rgba(0,0,0,0.15);
        }

        .newsletter-box h2 {
            font-family: var(--font-serif);
            font-size: 2.2rem;
            font-weight: 400;
            margin-bottom: 2rem;
        }

        .form-group {
            display: flex;
            gap: 1rem;
            margin-top: 2rem;
        }

        .form-group input {
            flex: 1;
            padding: 1.2rem;
            border: 1px solid rgba(10,41,71,0.2);
            background: transparent;
            font-family: var(--font-editorial);
            font-size: 0.9rem;
            outline: none;
        }

        .form-group button {
            background: var(--cultural-green);
            color: #fff;
            border: none;
            padding: 0 2.5rem;
            font-family: var(--font-editorial);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            cursor: pointer;
            transition: var(--transition-smooth);
        }

        .form-group button:hover {
            background: var(--primary-navy);
        }

        .unsubscribe-toggle {
            margin-top: 2rem;
            display: inline-block;
            font-size: 0.75rem;
            text-decoration: underline;
            cursor: pointer;
            opacity: 0.6;
        }

        /* SUB-PAGES ARCHITECTURE (Destinations, Journal, Experiences, About, Contact, Legals) */
        .subpage-hero {
            padding: 15vw 5vw 5vw;
            background: var(--soft-ivory);
        }

        /* Destinations Sub-Layout */
        .destinations-container {
            padding: 5vw;
        }

        .destination-chapter {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8vw;
            align-items: center;
            margin-bottom: 12vw;
        }

        .destination-chapter:nth-child(even) {
            direction: rtl;
        }

        .destination-chapter:nth-child(even) .dest-content {
            direction: ltr;
        }

        .dest-img-frame {
            height: 70vh;
            width: 100%;
            overflow: hidden;
        }

        .dest-img-frame img {
            width: 100%;
            height: 100%;
        }

        .dest-content h3 {
            font-family: var(--font-serif);
            font-size: 3rem;
            font-weight: 400;
            margin: 1rem 0;
        }

        /* Journal Sub-Layout (Masonry) */
        .journal-masonry {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 4vw;
            padding: 5vw;
        }

        .journal-card {
            display: flex;
            flex-direction: column;
        }

        .journal-card.large {
            grid-column: span 2;
            flex-direction: row;
            gap: 4vw;
            align-items: center;
            margin-bottom: 4vw;
        }

        .journal-card.large img { width: 60%; height: 600px; }
        .journal-card img { width: 100%; height: 400px; margin-bottom: 1.5rem;}

        /* Experiences Sub-Layout */
        .exp-segmented-section {
            padding: 5vw;
        }

        .exp-segment {
            margin-bottom: 10vw;
        }

        /* About Sub-Layout */
        .about-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 6vw;
            padding: 5vw;
            align-items: center;
        }

        /* Contact Sub-Layout */
        .contact-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 5vw;
            padding: 5vw;
        }

        .contact-form {
            display: flex;
            flex-direction: column;
            gap: 2rem;
        }

        .contact-form input, .contact-form textarea {
            width: 100%;
            padding: 1.2rem;
            border: none;
            border-bottom: 1px solid rgba(10,41,71,0.3);
            background: transparent;
            font-family: var(--font-editorial);
            outline: none;
        }

        /* Legal Framework Layout */
        .legal-content {
            max-width: 800px;
            margin: 0 auto;
            padding: 8vw 5vw;
        }

        .legal-content h2 {
            font-family: var(--font-serif);
            margin: 2.5rem 0 1rem;
            font-weight: 400;
        }

        /* FOOTER */
        footer {
            background-color: var(--primary-navy);
            color: #fff;
            padding: 8vw 5vw 2vw;
        }

        .footer-logo {
            text-align: center;
            margin-bottom: 6vw;
        }

        .footer-logo img {
            height: 45px;
            margin: 0 auto;
            filter: invert(1);
        }

        .footer-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 4vw;
            border-bottom: 1px solid rgba(253,246,237,0.1);
            padding-bottom: 6vw;
        }

        .footer-col h4 {
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 0.15em;
            color: var(--antique-brass);
            margin-bottom: 1.8rem;
            font-weight: 500;
        }

        .footer-col ul {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .footer-col a {
            font-size: 0.9rem;
            opacity: 0.7;
        }

        .footer-col a:hover {
            opacity: 1;
            color: var(--soft-ivory);
        }

        .footer-bottom {
            padding-top: 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 1rem;
        }

        .footer-line {
            font-size: 0.8rem;
            letter-spacing: 0.05em;
            color: var(--cultural-green);
        }

        .footer-legals-links {
            display: flex;
            gap: 2rem;
            font-size: 0.8rem;
            opacity: 0.5;
        }

        /* RESPONSIVE DESIGN INTERPOLATIONS */
        @media (max-width: 1024px) {
            .stories-grid, .mosaic-grid, .heritage-section, .slow-travel-section, .about-grid, .contact-container, .destination-chapter, .journal-card.large {
                grid-template-columns: 1fr !important;
                flex-direction: column !important;
                height: auto !important;
            }
            
            .mosaic-item, .note-page {
                position: relative !important;
                width: 100% !important;
                left: 0 !important;
                top: 0 !important;
                right: 0 !important;
                transform: none !important;
                margin-bottom: 2rem;
            }

            .mosaic-grid, .notes-section {
                height: auto !important;
            }

            .desktop-nav { display: none; }
            .hamburger { display: flex; }
            
            .footer-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 3rem;
            }
            
            .floating-card {
                position: relative;
                bottom: 0;
                right: 0;
                margin-top: 2rem;
                max-width: 100%;
            }

            .hero-section {
                height: auto;
                padding: 120px 5vw 4rem;
                flex-direction: column;
                align-items: flex-start;
            }
            
            .journal-masonry {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 600px) {
            .footer-grid {
                grid-template-columns: 1fr;
            }
            .form-group {
                flex-direction: column;
            }
            .form-group button {
                padding: 1rem;
            }
        }