/* 
            Color palette with exact usage %:
            Cloud Shadow (#eef2f3) 50% – Base
            Desert (#d2b48c) 25% – Warm structure
            Crevice (#5a4e3e) 15% – Depth & text
            Red Clay (#b33f2f) 10% – Accent
        */
        :root {
            --cloud: #eef2f3;
            --desert: #d2b48c;
            --crevice: #5a4e3e;
            --red-clay: #b33f2f;
            --black: #2c2823;
        }
        .bg-cloud { background-color: var(--cloud); }
        .bg-desert { background-color: var(--desert); }
        .bg-crevice { background-color: var(--crevice); }
        .bg-red-clay { background-color: var(--red-clay); }
        .text-cloud { color: var(--cloud); }
        .text-desert { color: var(--desert); }
        .text-crevice { color: var(--crevice); }
        .text-red-clay { color: var(--red-clay); }
        .border-desert { border-color: var(--desert); }
        .border-red-clay { border-color: var(--red-clay); }
        .border-crevice { border-color: var(--crevice); }

        body {
            background-color: var(--cloud); /* Cloud Shadow base 50% */
            color: var(--crevice);
            font-family: 'Inter', system-ui, sans-serif;
        }

        /* warm structure elements use desert */
        .structure-bg {
            background-color: var(--desert);
        }
        .structure-border {
            border-color: var(--desert);
        }
        /* depth & text elements use crevice */
        .depth-text {
            color: var(--crevice);
        }
        .depth-bg {
            background-color: var(--crevice);
        }
        /* accent red clay */
        .accent-bg {
            background-color: var(--red-clay);
        }
        .accent-text {
            color: var(--red-clay);
        }
        .accent-border {
            border-color: var(--red-clay);
        }

        /* mobile menu animation */
        .mobile-menu {
            transition: transform 0.3s ease-in-out, opacity 0.2s;
            transform-origin: top;
        }
        .mobile-menu.hidden {
            display: none;
        }
        /* active link style (red clay accent) */
        .nav-link.active, .mobile-nav.active {
            background-color: var(--red-clay);
            color: white;
        }
        /* image styling */
        .section-img {
            border-radius: 1rem 1rem 2rem 0.5rem; /* organic desert shape */
            box-shadow: 0 25px 30px -10px rgba(0,0,0,0.2);
            object-fit: cover;
            width: 100%;
            height: auto;
            max-height: 280px;
            border: 3px solid var(--desert);
        }
        /* hero overlay using cloud + desert */
        .hero-overlay {
            background: linear-gradient(110deg, rgba(238,242,243,0.92) 0%, rgba(210,180,140,0.7) 70%, rgba(179,63,47,0.4) 100%);
        }
        /* card style with desert structure */
        .soft-card {
            background-color: rgba(255,255,255,0.6);
            backdrop-filter: blur(4px);
            border: 1px solid var(--desert);
            border-radius: 1rem;
        }