feat: add mobile burger menu, SEO meta tags, and various fixes

- Add burger menu with open/close animation and scroll lock
- Add nav-logo element for mobile header
- Hide nav links on mobile, reveal in fullscreen overlay
- Add title, meta description, Open Graph and Twitter Card tags
- Add canonical URL
- Various SCSS adjustments (hero line-height, excerpt font-weight)
- Fix asset paths

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

assets/css/src/_mobile.scss

@@ -1,24 +1,115 @@
+// Body scroll lock when nav is open
+body.no-scroll {
+  overflow: hidden;
+}
+
 @media (max-width: 930px) {
   // ---- HEADER ----
   body > header {
+    position: fixed;
+    height: 3.5rem;
+    overflow: hidden;
+    transition: height 0.4s ease;
+    box-sizing: border-box;
     padding: 1rem var(--padding-body);
 
-    ul {
+    nav {
+      display: flex;
       flex-wrap: wrap;
-      justify-content: center;
-      gap: 0.25rem 0.5rem;
+      align-items: center;
+      height: 100%;
 
-      li:first-child {
-        width: 100%;
-        text-align: center;
-        font-size: 1.25rem;
-        margin-bottom: 0.5rem;
+      .nav-logo {
+        display: block;
+        font-size: 1rem;
+        order: 1;
       }
 
-      li:not(:first-child) {
-        font-size: 0.75rem;
+      .burger {
+        order: 2;
+        margin-left: auto;
+        width: 2rem;
+        height: 2rem;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        gap: 0.4rem;
+
+        span {
+          display: block;
+          width: 100%;
+          height: 1.5px;
+          background-color: #fff;
+          transition: transform 0.3s ease, opacity 0.3s ease;
+        }
+      }
+
+      ul {
+        order: 3;
+        width: 100%;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0;
+        padding-top: 3rem;
+        opacity: 0;
+        transition: opacity 0.3s ease 0.1s;
+
+        li {
+          width: 100%;
+
+          a {
+            display: block;
+            padding: 0.5rem 0;
+          }
+        }
+
+        li:first-child {
+          width: 100%;
+          font-size: 2.5rem;
+          margin-bottom: 1rem;
+
+          a {
+            font-family: var(--font-narrow);
+            text-transform: uppercase;
+            font-weight: 700;
+          }
+        }
+
+        li:not(:first-child) {
+          font-family: var(--font-narrow);
+          font-size: 2rem;
+          text-transform: uppercase;
+          font-weight: 700;
+        }
       }
     }
+
+    // ---- OPEN STATE ----
+    &.nav-open {
+      height: 100vh;
+      height: 100dvh;
+
+      nav {
+        .burger span:first-child {
+          transform: rotate(45deg) translateY(0.2rem);
+        }
+
+        .burger span:last-child {
+          transform: rotate(-45deg) translateY(-0.2rem);
+        }
+
+        ul {
+          opacity: 1;
+        }
+      }
+    }
+  }
+
+  // Compensate fixed header
+  main {
+    padding-top: 3.5rem;
   }
 
   // ---- HERO ----