/* Sticky translucent header: wordmark, 3 to 5 anchor links, the gold CTA. Under 860px the links fold into an
   accessible disclosure behind a 44px menu button. After scrolling it shrinks and gains a backdrop blur.
   <header class="db-nav" data-db="nav" [data-scroll-root="#scroller"]>
     <div class="db-nav__bar">
       <a class="db-wordmark db-wordmark--sm" ...></a>
       <nav class="db-nav__menu" id="site-menu" aria-label="Main"><ul class="db-nav__links"><li><a href="#library">..</a></li>..</ul></nav>
       <a class="db-btn db-btn--gold db-btn--sm db-nav__cta" href="#get">Get DreamBug</a>
       <button class="db-nav__toggle" type="button" aria-expanded="false" aria-controls="site-menu">..</button>
     </div></header> */
.db-nav{--nav-h:76px;container-type:inline-size;position:sticky;top:0;z-index:50;color:var(--db-ink);
  transition:background-color var(--m-dur) var(--m-ease),box-shadow var(--m-dur) var(--m-ease),backdrop-filter var(--m-dur) var(--m-ease)}
.db-nav__bar{display:flex;align-items:center;gap:var(--db-s4);height:var(--nav-h);
  width:min(100% - 2*var(--db-gutter),var(--db-container));margin-inline:auto;transition:height var(--m-dur) var(--m-ease)}
.db-nav .db-wordmark{flex:none;transition:font-size var(--m-dur) var(--m-ease)}
.db-nav__menu{margin-left:auto}
.db-nav__links{display:flex;align-items:center;gap:var(--db-s1);margin:0;padding:0;list-style:none}
.db-nav__links a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 .8rem;border-radius:var(--db-r-pill);
  color:var(--db-muted);font-weight:600;font-size:var(--db-fs-small);text-decoration:none;white-space:nowrap;
  transition:color var(--m-dur-fast) var(--m-ease),background-color var(--m-dur-fast) var(--m-ease)}
.db-nav__links a:hover{color:var(--db-ink);background:rgba(255,255,255,.07)}
.db-nav__links a[aria-current]{color:var(--db-ink)}
.db-nav__links a[aria-current]::after{content:"";position:absolute;left:50%;bottom:6px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--db-gold)}
.db-nav__cta{flex:none}
.db-nav__toggle{display:none;flex:none;width:44px;height:44px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.1);box-shadow:0 0 0 1px rgba(255,255,255,.14) inset;place-items:center}
.db-nav__burger,.db-nav__burger::before,.db-nav__burger::after{display:block;width:18px;height:2px;border-radius:2px;background:var(--db-ink);
  transition:transform var(--m-dur) var(--m-ease),opacity var(--m-dur-fast) var(--m-ease)}
.db-nav__burger{position:relative}
.db-nav__burger::before,.db-nav__burger::after{content:"";position:absolute;left:0}
.db-nav__burger::before{top:-6px}.db-nav__burger::after{top:6px}
.db-nav.is-open .db-nav__burger{background:transparent}
.db-nav.is-open .db-nav__burger::before{transform:translateY(6px) rotate(45deg)}
.db-nav.is-open .db-nav__burger::after{transform:translateY(-6px) rotate(-45deg)}

/* scrolled: smaller and frosted */
.db-nav.is-scrolled{--nav-h:60px;background:rgba(12,16,46,.72);box-shadow:0 1px 0 rgba(255,255,255,.08),0 10px 30px rgba(4,6,20,.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}
.db-nav.is-scrolled .db-wordmark{font-size:1.05rem}

/* small screens: disclosure panel */
@media (max-width:859.98px){
  .db-nav{--nav-h:64px}
  .db-nav.is-scrolled{--nav-h:56px}
  .db-nav__bar{gap:var(--db-s3)}
  .db-nav .db-wordmark{--wm-size:1.25rem}
  .db-nav__cta{margin-left:auto}
  .db-nav__toggle{display:grid}
  .db-nav__menu{position:absolute;left:var(--db-s3);right:var(--db-s3);top:calc(var(--nav-h) + var(--db-s2));margin:0;padding:var(--db-s2);
    border-radius:var(--db-r-lg);background:var(--db-card);box-shadow:var(--db-shadow-3);border:var(--db-border);
    opacity:0;translate:0 -8px;visibility:hidden;
    transition:opacity var(--m-dur) var(--m-ease),translate var(--m-dur) var(--m-ease),visibility 0s linear var(--m-dur)}
  .db-nav.is-open .db-nav__menu{opacity:1;translate:0 0;visibility:visible;transition:opacity var(--m-dur) var(--m-ease),translate var(--m-dur) var(--m-ease)}
  .db-nav__links{flex-direction:column;align-items:stretch;gap:2px}
  .db-nav__links a{width:100%;min-height:52px;padding:0 1rem;border-radius:var(--db-r-md);font-size:1.05rem;color:var(--db-ink)}
  .db-nav__links a[aria-current]::after{left:auto;right:1rem;top:50%;bottom:auto;margin:-2.5px 0 0}
}
@media (max-width:859.98px) and (scripting:none){
  .db-nav__menu{position:static;opacity:1;visibility:visible;translate:none;background:none;box-shadow:none;border:0}
  .db-nav__bar{flex-wrap:wrap;height:auto}
}
/* very narrow bars (or a narrow frame): the mascot alone, so the CTA and menu always fit */
@container (max-width:359.98px){.db-nav .db-wordmark .db-wordmark__text{display:none}}
@media (prefers-reduced-motion:reduce){.db-nav,.db-nav *{transition:none!important}}