:root {
        --navy-dark: #002147;
        --gold-premium: #ffba00;
    }

    .text-navy { color: var(--navy-dark); }
    .bg-navy { background-color: var(--navy-dark); }
    .ls-2 { letter-spacing: 2px; }
    .font-serif { font-family: 'Playfair Display', 'Georgia', serif; }
    .z-index-10 { z-index: 10; }

    /* The Overlap Magic */
    @media (min-width: 992px) {
        .ms-lg-n5 {
            margin-left: -6rem !important; /* Pulls the text card over the image */
        }
    }

    /* Portrait Styling */
    .portrait-frame {
        border-bottom: 10px solid var(--gold-premium);
        transform: scale(1);
        transition: transform 0.5s ease;
    }

    .portrait-shade {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 30%;
        background: linear-gradient(to top, rgba(0,0,0,0.4), transparent);
    }

    /* Glass Message Card */
    .glass-message-card {
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.3);
    }

    /* Shadows */
    .shadow-2xl {
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    }
    .shadow-xl {
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    }

    /* Mobile UX Fixes */
    @media (max-width: 991px) {
        .ms-lg-n5 {
            margin-top: -3rem; /* Stacks vertically with a slight overlap */
            margin-left: 15px !important;
            margin-right: 15px !important;
        }
        .principal-meta {
            width: 100%;
            text-align: center;
        }
    }