feat(website): wire blog.weids.dev into main site navigation

Author: Angold-4

src/routes/+layout.svelte

@@ -13,25 +13,25 @@
   const navLinks = [
     { label: 'Home', href: '/', external: false },
     { label: 'Wrappers', href: '/#wrappers', external: false },
-    { label: 'About', href: '/about', external: false },
-    { label: 'Blog', href: 'https://org.weids.dev', external: true },
+    { label: 'About', href: 'https://org.weids.dev', external: true },
+    { label: 'Blog', href: 'https://blog.weids.dev', external: true },
   ];
 
   const overlayExtras = [
-    { label: 'Developers', href: 'https://docs.weids.dev', external: true },
+    { label: 'Developers', href: 'https://github.com/weids-dev/wrappers', external: true },
     { label: 'Paper', href: '/papers/a_survey_of_verifiable_computing.pdf', external: true },
   ];
 
   const blogEntries = [
     {
-      title: 'A Survey of Interactive Verifiable Computing',
-      meta: 'IACR ePrint 2025/008 · Jan 2025',
-      link: '/papers/a_survey_of_verifiable_computing.pdf',
+      title: 'Wrappers — A Manifesto',
+      meta: 'blog.weids.dev · Apr 2026',
+      link: 'https://blog.weids.dev/2026/04/25/manifesto.html',
     },
     {
-      title: 'Notes on Wrappers, sum-check, and verifiable computing',
-      meta: 'org.weids.dev — ongoing',
-      link: 'https://org.weids.dev',
+      title: 'GKR Explained: From Cubes to Curves',
+      meta: 'org.weids.dev · tutorial',
+      link: 'https://org.weids.dev/agenda/notes/gkr-sum-check-tutorial.html',
     },
   ];
 
@@ -43,6 +43,22 @@
     menuOpen = !menuOpen;
   }
 
+  // Hover-to-open (comma.ai-style). A small close delay lets the cursor
+  // hand off from the hamburger into the fullscreen overlay without the
+  // menu flickering closed in the process.
+  let closeTimer;
+  function openMenu() {
+    if (closeTimer) { clearTimeout(closeTimer); closeTimer = null; }
+    menuOpen = true;
+  }
+  function scheduleClose() {
+    if (closeTimer) clearTimeout(closeTimer);
+    closeTimer = setTimeout(() => { menuOpen = false; closeTimer = null; }, 150);
+  }
+  function cancelClose() {
+    if (closeTimer) { clearTimeout(closeTimer); closeTimer = null; }
+  }
+
   $: activePath = $page.url.pathname;
 </script>
 
@@ -56,6 +72,8 @@
         aria-label={menuOpen ? 'Close menu' : 'Open menu'}
         aria-expanded={menuOpen}
         on:click={toggleMenu}
+        on:mouseenter={openMenu}
+        on:mouseleave={scheduleClose}
       >
         <span></span>
         <span></span>
@@ -88,7 +106,7 @@
     </nav>
 
     <div class="nav__right">
-      <a class="nav__cta" href="https://docs.weids.dev" target="_blank" rel="noopener noreferrer">
+      <a class="nav__cta" href="https://github.com/weids-dev/wrappers" target="_blank" rel="noopener noreferrer">
         <span class="nav__cta-label">Developers</span>
         <span class="nav__cta-arrow" aria-hidden="true">→</span>
       </a>
@@ -97,7 +115,14 @@
 </header>
 
 {#if menuOpen}
-  <div class="nav__overlay" role="dialog" aria-modal="true" aria-label="Site navigation">
+  <div
+    class="nav__overlay"
+    role="dialog"
+    aria-modal="true"
+    aria-label="Site navigation"
+    on:mouseenter={cancelClose}
+    on:mouseleave={scheduleClose}
+  >
     <div class="nav__overlay-inner">
       <div class="nav__overlay-links">
         {#each navLinks as link}

src/routes/+page.svelte

@@ -365,9 +365,9 @@
     <div class="hero__header">
       <span class="hero__intro-tag">[ introducing <a class="hero__intro-icon-link" href="https://github.com/weids-dev/wrappers" target="_blank" rel="noopener noreferrer" aria-label="Wrappers on GitHub"><img class="hero__intro-icon" src="/brand/icon-electric-anim.svg" alt="W" /></a>rappers ]</span>
       <h2 class="hero__slogan">{wrappers.tagline}</h2>
-      <a class="hero__manifesto" href="/wrappers">
+      <a class="hero__read-cta" href="https://blog.weids.dev/2026/04/25/manifesto.html" target="_blank" rel="noopener noreferrer">
         <span>Read the manifesto</span>
-        <span class="hero__manifesto-arrow" aria-hidden="true">→</span>
+        <span class="hero__read-cta-arrow" aria-hidden="true">↗</span>
       </a>
     </div>
 
@@ -743,47 +743,41 @@
     white-space: nowrap;
   }
 
-  .hero__manifesto {
+  /* Secondary CTA under the slogan — mirrors .lab__cta style (quiet mono,
+     muted → white on hover), with the brand-red arrow tilted for "outbound"
+     semantics (opens blog.weids.dev/…/manifesto in a new tab). */
+  .hero__read-cta {
     display: inline-flex;
     align-items: center;
     gap: 0.55rem;
-    margin-top: 0.25rem;
-    padding: 8px 18px;
-    background-color: transparent;
-    border: 1px solid var(--card-border);
-    border-radius: 999px;
+    margin-top: clamp(0.6rem, 1.4vh, 1.1rem);
+    color: var(--fg-muted);
     font-family: var(--font-mono);
-    font-size: 10.5px;
+    font-size: 11px;
     font-weight: 500;
-    letter-spacing: 0.12em;
+    letter-spacing: 0.18em;
     text-transform: uppercase;
-    color: var(--fg-secondary);
     text-decoration: none;
-    cursor: pointer;
-    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
+    transition: color 0.22s ease;
   }
 
-  .hero__manifesto:hover {
-    border-color: rgba(227, 32, 41, 0.3);
+  .hero__read-cta:hover {
     color: var(--fg-primary);
-    background-color: rgba(227, 32, 41, 0.04);
   }
 
-  .hero__manifesto-arrow {
+  .hero__read-cta-arrow {
+    font-family: var(--font-sans);
     font-size: 13px;
     line-height: 1;
     color: var(--brand-red);
-    transition: transform 0.2s ease;
+    transition: transform 0.22s ease;
   }
 
-  .hero__manifesto:hover .hero__manifesto-arrow {
-    transform: translateX(3px);
+  .hero__read-cta:hover .hero__read-cta-arrow {
+    transform: translate(2px, -2px);
   }
 
-  /* Stage is a flex row with endpoints flanking the cards.
-     The pipeline line runs across the full stage width at y=50%,
-     occluded by cards and endpoint labels (which sit at z-index 1)
-     so the traveling dot appears to pulse through the gaps between nodes. */
+  /* Stage is a flex row with endpoints flanking the cards. */
   .hero__stage {
     order: 1;
     position: relative;