<!DOCTYPE html>
<html lang="en" class="wf-loading">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg?v=2" />
    <link rel="manifest" href="/manifest.json" />
    <meta name="theme-color" content="#000000" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- Set theme class immediately to prevent flash and forced reflow -->
    <script>
      (function () {
        if (typeof window === "undefined") return;
        try {
          const theme = localStorage.getItem("theme");
          if (theme === "dark") {
            document.documentElement.classList.add("dark");
          }
        } catch (e) {
          // localStorage might not be available
        }
      })();
    </script>
    <title>Dave Melkonian | Digital Design</title>
    <meta name="email" content="davemelk@gmail.com" />
    <meta
      name="description"
      content="Digital Experience Designer with over 15 years of experience creating user-centered solutions"
    />
    <link
      rel="preconnect"
      href="https://fonts.googleapis.com"
      crossorigin="anonymous"
    />
    <link
      rel="preconnect"
      href="https://fonts.gstatic.com"
      crossorigin="anonymous"
    />

    <!-- Load critical fonts inline, defer others -->
    <link
      href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,400;0,6..12,500;0,6..12,700;1,6..12,400;1,6..12,500;1,6..12,700&display=swap"
      rel="stylesheet"
      media="print"
      onload="this.media='all'"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Story+Script&display=swap"
      rel="stylesheet"
      media="print"
      onload="this.media='all'"
    />
    <noscript>
      <link
        href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,400;0,6..12,500;0,6..12,700;1,6..12,400;1,6..12,500;1,6..12,700&display=swap"
        rel="stylesheet"
      />
    </noscript>

    <!-- Load other fonts asynchronously -->
    <script>
      (function () {
        "use strict";
        // Only load fonts after page load to avoid render blocking
        if (document.readyState === "loading") {
          document.addEventListener("DOMContentLoaded", loadFonts);
        } else {
          setTimeout(loadFonts, 0);
        }

        function loadFonts() {
          const fontLinks = [
            "https://fonts.googleapis.com/css2?family=Roboto+Serif:ital,opsz,wght@0,8..144,400;0,8..144,700;1,8..144,400;1,8..144,700&display=swap",
            "https://fonts.googleapis.com/css2?family=Story+Script&display=swap",
          ];

          fontLinks.forEach(function (href) {
            const link = document.createElement("link");
            link.rel = "stylesheet";
            link.href = href;
            link.media = "print";
            link.onload = function () {
              this.media = "all";
            };
            link.onerror = function () {
              this.remove();
            };
            document.head.appendChild(link);
          });
        }
      })();
    </script>

    <style>
      /* Ensure Nunito Sans loads immediately with fallback */
      body {
        font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont,
          "Segoe UI", "Arial", sans-serif !important;
      }

      /* Font loading detection */
      .font-loaded {
        font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont,
          "Segoe UI", "Arial", sans-serif;
      }

      /* Font loading fallback */
      .wf-loading {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Arial",
          sans-serif;
      }

      .wf-active {
        font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont,
          "Segoe UI", "Arial", sans-serif;
      }
    </style>
    <script>
      // Font loading detection - deferred to avoid blocking initial render
      // Fallback for browsers without requestIdleCallback
      if (!window.requestIdleCallback) {
        window.requestIdleCallback = function (cb, opts) {
          return setTimeout(cb, (opts && opts.timeout) || 1);
        };
      }

      // Defer font loading to after first paint
      if ("fonts" in document) {
        if (document.readyState === "loading") {
          document.addEventListener("DOMContentLoaded", initFonts);
        } else {
          // Use requestIdleCallback to defer after initial render
          requestIdleCallback(initFonts, { timeout: 2000 });
        }
      }

      function initFonts() {
        Promise.all([
          document.fonts.load("400 1em 'Roboto Serif'"),
          document.fonts.load("700 1em 'Roboto Serif'"),
          document.fonts.load("400 1em 'Nunito Sans'"),
          document.fonts.load("500 1em 'Nunito Sans'"),
          document.fonts.load("700 1em 'Nunito Sans'"),
          document.fonts.load("400 1em 'Story Script'"),
        ])
          .then(() => {
            document.documentElement.classList.add("wf-active");
            document.documentElement.classList.remove("wf-loading");
          })
          .catch(() => {
            document.documentElement.classList.remove("wf-loading");
          });
      }
    </script>
    <script type="module" crossorigin src="/assets/index-CPKtEwm-.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/vendor-Dlhn940W.js">
    <link rel="modulepreload" crossorigin href="/assets/vendor-icons-radix-C6Z23Orz.js">
    <link rel="modulepreload" crossorigin href="/assets/vendor-icons-lucide-BUDiO8ao.js">
    <link rel="stylesheet" crossorigin href="/assets/index-DznHAann.css">
  </head>
  <body>
    <div id="root">
      <!-- Minimal loading skeleton for faster FCP -->
      <div
        style="
          min-height: 100vh;
          background: white;
          display: flex;
          align-items: center;
          justify-content: center;
        "
      >
        <div style="text-align: center">
          <div
            style="
              width: 48px;
              height: 48px;
              border: 3px solid #f3f3f3;
              border-top: 3px solid #333;
              border-radius: 50%;
              animation: spin 1s linear infinite;
              margin: 0 auto 16px;
            "
          ></div>
          <p
            style="
              color: #666;
              font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial,
                sans-serif;
            "
          >
            Loading...
          </p>
        </div>
      </div>
      <style>
        @keyframes spin {
          0% {
            transform: rotate(0deg);
          }
          100% {
            transform: rotate(360deg);
          }
        }
      </style>
    </div>
    <script async src="https://js.stripe.com/v3/buy-button.js"></script>
  </body>
</html>
