<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="theme-color" content="#F9F8F6" />
    <title>The Letter</title>

    <!-- DNS prefetch so font/API connections start immediately -->
    <link rel="dns-prefetch" href="https://fonts.googleapis.com" />
    <link rel="dns-prefetch" href="https://fonts.gstatic.com" />
    <link rel="dns-prefetch" href="https://theletter-gateway.farhadigitalstudio.workers.dev" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link rel="preconnect" href="https://theletter-gateway.farhadigitalstudio.workers.dev" crossorigin />

    <!--
      Preload the two Google Fonts stylesheets early so font files are
      fetched before the template JS chunk even parses.
      Using <link rel="preload"> + onload swap pattern to avoid render-blocking.
    -->
    <link rel="preload" as="style"
      href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Pinyon+Script&family=Alexandria:wght@100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Inter:wght@100..900&family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap"
      onload="this.onload=null;this.rel='stylesheet'" />
    <noscript>
      <link rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Pinyon+Script&family=Alexandria:wght@100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Inter:wght@100..900&family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap" />
    </noscript>
    <script type="module" crossorigin src="/assets/index-CklztlbL.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-VtQjLN6F.css">
  </head>
  <body style="background:#F9F8F6;margin:0">
    <div id="root"></div>
  </body>
</html>
