<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Johnny Hockin - Inventor, Filmmaker, Coder</title>
    <meta name="description" content="Raw experiments in code, film, and invention. Personal process, projects, and digital lab notes.">
    
    <meta property="og:title" content="Johnny Hockin - Inventor-Storyteller">
    <meta property="og:description" content="Shipping films, code, and objects fast. Building filmmaker tools that cost $0 instead of $299.">
    <meta property="og:type" content="website">
    <meta property="og:image" content="https://johnnyhockin.com/favicon/web-app-manifest-512x512.png">
    <meta property="og:url" content="https://johnnyhockin.com/">
    
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
    <link rel="icon" type="image/x-icon" href="favicon/favicon.ico">
    <link rel="icon" type="image/svg+xml" href="favicon/favicon.svg">
    <link rel="icon" type="image/png" sizes="96x96" href="favicon/favicon-96x96.png">
    <link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png">
    <link rel="manifest" href="favicon/site.webmanifest">
    
    <!-- Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-2JTMSRETFN"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      
      gtag('config', 'G-2JTMSRETFN');
    </script>
</head>
<body>
    <nav class="nav">
        <div class="nav-links">
            <a class='nav-link active' href='/'>Home</a>
            <a class='nav-link' href='/projects'>Projects</a>
            <a class='nav-link' href='/bio'>Biography</a>
            <a class='nav-link' href='/contact'>Contact</a>
        </div>
        <div class="nav-controls">
            <button class="chaos-toggle" id="chaosToggleNav">CHAOS</button>
        </div>
    </nav>

    <div class="view-controls">
        <button class="font-toggle" id="fontToggle">Helvetica</button>
        <button class="chaos-toggle" id="chaosToggle">CHAOS</button>
    </div>

    <aside class="sidebar">
        <div class="sidebar-tagline">I am an inventor-storyteller working in film, code, narrative, and more.</div>
        
        <div class="sidebar-quote">"Honor thy error as a hidden intention." – Eno</div>
        
        <div class="sidebar-controls">
            <button class="font-toggle" id="fontToggleSidebar">Helvetica</button><br>
            <button class="chaos-toggle" id="chaosToggleSidebar">CHAOS</button>
        </div>
    </aside>

    <main class="main">
        <div class="mobile-tagline">I am an inventor-storyteller working in film, code, narrative, and more.</div>
        
        <section class="explorer-log">
            <h2 class="section-title">Explorer Log</h2>
            <div class="log-entries" id="logEntries">
                <!-- Content loaded dynamically by JavaScript -->
            </div>
            <div class="log-archive-link">
                <a href='/log'>EXPLORER LOG ARCHIVE...</a>
            </div>
        </section>

        <section class="project-highlights">
            <h2 class="section-title">Featured Projects</h2>
            <div class="project-grid" id="projectGrid">
                <!-- Content loaded dynamically by JavaScript -->
            </div>
        </section>
        
        <aside class="sidebar-inline">
            <div class="sidebar-tagline">I am an inventor-storyteller working in film, code, narrative, and more.</div>
            <div class="sidebar-quote">"Honor thy error as a hidden intention." – Eno</div>
            <div class="sidebar-controls">
                <button class="font-toggle" id="fontToggleInline">Helvetica</button>
                <button class="chaos-toggle" id="chaosToggleInline">CHAOS</button>
            </div>
        </aside>

    </main>
    
    <footer class="mobile-footer">
        <div class="mobile-footer-quote">"Honor thy error as a hidden intention." – Eno</div>
        <div class="mobile-footer-controls">
            <button class="font-toggle" id="fontToggleMobile">Helvetica</button>
            <button class="chaos-toggle" id="chaosToggleMobile">CHAOS</button>
        </div>
    </footer>

    <script src="data-embedded.js"></script>
    <script src="script.js"></script>
</body>
</html>