top nav: logo scrolls to top, hamburger opens both navs, no backdrop, match font

- Brand/logo reverted to href=#header (scroll to top), no longer opens the nav.
- hamburger() now toggles BOTH the side menu and the #worknav top nav.
- #worknav: data-bs-backdrop=false + data-bs-scroll=true so it sits at the top
  without covering/dimming the page.
- Top-nav font -> variable Playfair (opsz 20), matching the main site's nav
  instead of the heavier static Playfair Display display cut.

index.html

@@ -84,7 +84,7 @@
   </div>
 </header>
 <header class="header-small">
-  <a href="#worknav" class="brand" data-bs-toggle="offcanvas" data-bs-target="#worknav" role="button" aria-label="Open navigation">
+  <a href="#header" class="brand" aria-label="Back to top">
     <img class="light" src="img/dw-light.svg" srcset="img/dw-light.svg 2x" alt="David Windham logo">
     <img class="dark" src="img/dw-dark.svg" srcset="img/dw-dark.svg 2x" alt="David Windham logo">
   </a>
@@ -104,13 +104,15 @@
 
 <!-- ** TOP NAV (main-site links, opened from the brand) ** -->
 <style>
+  /* variable Playfair (opsz pinned to 20) so the top nav matches the main site's nav */
+  @font-face { font-family: 'Playfair Var'; font-style: normal; font-weight: 300 900; font-display: swap; src: url('fonts/playfair-display-var.woff2') format('woff2'); }
   #worknav.work-nav { height: auto; min-height: 0; background: rgba(72,76,87,.9); backdrop-filter: blur(6px); border: 0; }
   #worknav .offcanvas-body { padding: 1.1rem 1rem; }
   .work-nav-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 2.2rem; margin: 0; }
-  .work-nav-links a { color: #fff; text-decoration: none; font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.35rem; }
+  .work-nav-links a { color: #fff; text-decoration: none; font-family: 'Playfair Var', 'Playfair Display', serif; font-weight: 700; font-size: 1.35rem; }
   .work-nav-links a:hover { color: #25c2a0; }
 </style>
-<div class="offcanvas offcanvas-top work-nav" tabindex="-1" id="worknav" aria-labelledby="worknav-label">
+<div class="offcanvas offcanvas-top work-nav" tabindex="-1" id="worknav" data-bs-backdrop="false" data-bs-scroll="true" aria-labelledby="worknav-label">
   <div class="offcanvas-body">
     <nav class="work-nav-links" aria-label="Main site navigation">
       <a href="/about">About</a>

js/_init.js

@@ -69,15 +69,22 @@ function hamburger() {
   var isOpen = false,
   $hamburger = $('.hamburger'),
   $headerSmall = $('.header-small');
+  // the hamburger toggles BOTH the side nav (header-small menu) and the top nav (#worknav offcanvas)
+  var topNav = function () {
+    var el = document.getElementById('worknav');
+    return (el && window.bootstrap) ? bootstrap.Offcanvas.getOrCreateInstance(el) : null;
+  };
   $hamburger.on('click', function () {
     isOpen = !isOpen;
     $hamburger.toggleClass('is-active');
     $headerSmall.toggleClass('menu-open');
+    var tn = topNav(); if (tn) { isOpen ? tn.show() : tn.hide(); }
   });
   $(window).on('scroll', function() {
     if(isOpen){
       $hamburger.removeClass('is-active');
       $headerSmall.removeClass('menu-open');
+      var tn = topNav(); if (tn) tn.hide();
       isOpen = false;
     }
   });