/* Sticky site nav. Every page's inline CSS positions <header class="nav"> absolutely at
   the top over the hero, transparent with light text. This pins it to the viewport and,
   once the page is scrolled (html.nav-scrolled, set by site-nav.js), fades in a solid
   Forest background so the light text stays readable over light sections.
   `header.nav` outranks the pages' `.nav` rule. */

header.nav{position:fixed;}
header.nav::before{content:"";position:absolute;inset:0;z-index:-1;background:#053220;
  box-shadow:0 8px 24px rgba(5,50,32,.18);opacity:0;transition:opacity .3s;pointer-events:none;}
html.nav-scrolled header.nav{padding-top:12px;padding-bottom:12px;}
html.nav-scrolled header.nav::before{opacity:1;}
header.nav .logo{transition:height .3s;}
html.nav-scrolled header.nav .logo{height:42px;}