<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wedding Invitation — <?= escape_html($groomName) ?> &amp; <?= escape_html($brideName) ?></title>
    
    <!-- Official Inveetaire Favicon & Branding -->
    <link rel="apple-touch-icon" sizes="180x180" href="<?= asset('/assets/branding/favicon/apple-touch-icon.png') ?>">
    <link rel="icon" type="image/png" sizes="32x32" href="<?= asset('/assets/branding/favicon/favicon-32x32.png') ?>" media="(prefers-color-scheme: light)">
    <link rel="icon" type="image/png" sizes="16x16" href="<?= asset('/assets/branding/favicon/favicon-16x16.png') ?>" media="(prefers-color-scheme: light)">
    <link rel="icon" type="image/png" sizes="32x32" href="<?= asset('/assets/branding/favicon/light-bg/favicon-32x32.png') ?>" media="(prefers-color-scheme: dark)">
    <link rel="icon" type="image/png" sizes="16x16" href="<?= asset('/assets/branding/favicon/light-bg/favicon-16x16.png') ?>" media="(prefers-color-scheme: dark)">
    <link rel="manifest" href="<?= asset('/assets/branding/favicon/site.webmanifest') ?>">

    <!-- Premium Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Outfit:wght@100..900&display=swap" rel="stylesheet">
    
    <!-- Local Production Stylesheets & FontAwesome Icons -->
    <link rel="stylesheet" href="<?= asset('/assets/css/all.min.css') ?>">
    <link rel="stylesheet" href="<?= asset('/assets/css/design_system.css') ?>">
    <link rel="stylesheet" href="<?= asset('/assets/css/app.css') ?>">

    <script src="https://cdn.tailwindcss.com"></script>
    
    <style>
        .font-serif-fancy {
            font-family: 'Playfair Display', Georgia, serif;
        }
        
        .font-sans-modern {
            font-family: 'Outfit', sans-serif;
        }
        
        .cover-gradient {
            background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 60%, rgba(0, 0, 0, 0.2) 100%);
        }

        @keyframes marquee {
            0% { transform: translateX(0%); }
            100% { transform: translateX(-50%); }
        }
        .animate-marquee {
            display: flex;
            width: max-content;
            animation: marquee 32s linear infinite;
        }
        .animate-marquee:hover {
            animation-play-state: paused;
        }
    </style>
</head>
