/* nav: the site's nav bar (30 Oct 2026, moodz-nav-build pane), Luke's picks on art-nav3.html#final. The sheet modules (shared/nav2-v.*, nav3-v.*) cut down
   to the picks and named nb-: the two-row logo (art/logo/mr-moodz-sm.svg) at 80% of the bar, two bold lines, the Fade on scroll, no line under the bar,
   Book here top right on desktop in sky, the drop-down menu with the page icons (Blog out until there is a blog page, 30 Oct) (sky pass) and a Book here at the bottom of the card.
   Phone and iPad: 72 tall, 48 once scrolled. 1024 and up: 80, the four links, no shrink. Fixed over a spacer, so the page does not jump as it shrinks.
   No tag the page styles (its bare section and h2 rules): the bar is a div with role navigation. The Fade sits on ::before, never on .nb: backdrop-filter
   makes a containing block, and the menu inside .nb is position:fixed. z: bar 900, open menu 1200, the corner friend (1000) untouched. */
.nb{--nb-h:72px;--nb-paper:#fffdf7;--nb-sky:#d9e7f3;--nb-euc:#a9bfb1;--nb-ink:#1f1d1a;
  position:fixed;left:0;right:0;top:0;z-index:900;font-family:'DM Sans',system-ui,sans-serif;color:var(--nb-ink)}
.nb *{box-sizing:border-box}
.nb a{text-decoration:none;color:inherit}
.nb-spacer{height:72px}
.nb-in{position:relative;z-index:2;display:flex;align-items:center;gap:24px;max-width:1296px;height:var(--nb-h);margin:0 auto;padding:0 24px;transition:height .3s var(--out)}
.nb-home{display:flex;align-items:center;flex:none;margin-right:auto;border-radius:6px}
.nb-home:focus-visible,.nb-links a:focus-visible,.nb-plist a:focus-visible{outline:2px solid var(--nb-ink);outline-offset:3px}
/* the logo, 80% of the bar: 58 tall, 38 once scrolled, 64 on desktop. Width from the file's ratio */
.nb-lg{display:block;height:58px;width:auto;transition:height .3s var(--out)}
.nb-scrolled{--nb-h:48px}
.nb-scrolled .nb-lg{height:38px}

/* the Fade: paper and a blur under the bar, melting out over 36px below it, from the first scroll. No edge */
.nb::before{content:"";position:absolute;left:0;right:0;top:0;bottom:-36px;z-index:0;pointer-events:none;opacity:0;transition:opacity .28s;
  background:linear-gradient(rgba(244,241,234,.94) 0,rgba(244,241,234,.8) 55%,rgba(244,241,234,0));
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-webkit-mask-image:linear-gradient(#000 58%,transparent);mask-image:linear-gradient(#000 58%,transparent)}
.nb-scrolled::before{opacity:1}

/* links, desktop only. Hover: the site's highlight block in eucalyptus, filling from the left */
.nb-links{display:none;align-items:center;gap:34px;font-size:15px;font-weight:500}
.nb-links a{display:inline-flex;align-items:center;min-height:44px;color:rgba(31,29,26,.72);transition:color .2s}
.nb-links a:hover{color:var(--nb-ink)}
.nb-links a span{padding:1px .2em;margin:0 -.2em;border-radius:2px;background:linear-gradient(var(--nb-euc),var(--nb-euc)) 0 100%/0 100% no-repeat;transition:background-size .28s var(--out)}
.nb-links a:hover span{background-size:100% 100%}

/* the hamburger: two bold lines, 24 by 3.5, 9.5 apart, ink, a 44 by 44 tap. Crosses to an x when open */
.nb-burger{position:relative;flex:none;width:44px;height:44px;margin-right:-11px;padding:0;border:0;border-radius:50%;background:none;color:var(--nb-ink);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .2s}
.nb-burger:hover{background:rgba(31,29,26,.06)}
.nb-burger:active{background:rgba(31,29,26,.1)}
.nb-burger:focus-visible{outline:2px solid var(--nb-ink);outline-offset:1px}
.nb-burger i{position:absolute;left:50%;top:50%;display:block;width:24px;height:3.5px;margin:-1.75px 0 0 -12px;border-radius:2px;background:currentColor;transition:transform .3s var(--out)}
.nb-burger i:nth-child(1){transform:translateY(-4.75px)}
.nb-burger i:nth-child(2){transform:translateY(4.75px)}
.nb-open .nb-burger i:nth-child(1){transform:rotate(45deg)}
.nb-open .nb-burger i:nth-child(2){transform:rotate(-45deg)}

/* ---------- Book here: a fill printed a hair off a drawn ink line, the logo's build. Paper base, the sky pass 2 by 1.5 off, the line 1.25 over it.
   The edge is drawn at the button's real size by shared/nav.js. Hover lines the print up, press sets it home ---------- */
.nb-b{position:relative;isolation:isolate;display:none;align-items:center;justify-content:center;gap:8px;flex:none;height:44px;padding:0 18px 0 14px;border-radius:999px;
  font:600 14px/1 'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;letter-spacing:.005em;color:var(--nb-ink);white-space:nowrap;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:transform .18s var(--out)}
.nb-b:focus-visible{outline:2px solid var(--nb-ink);outline-offset:4px}
.nb-l{position:relative;color:var(--nb-ink)}
.nb-edge{position:absolute;left:0;top:0;z-index:-1;overflow:visible;pointer-events:none}
.nb-e-base{fill:var(--nb-paper)}
.nb-e-fill{fill:var(--nb-sky)}
.nb-e-line{fill:none;stroke:var(--nb-ink);stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.nb-mis{transform:translate(2px,1.5px);transition:transform .22s var(--out)}
.nb-b:hover .nb-mis{transform:translate(1px,.75px)}
.nb-b:active .nb-mis{transform:none;transition-duration:.06s}
.nb-b:active{transform:translate(.5px,1px)}
/* the calendar tick: the ink line over a paper pass printed 1px off it */
.nb-cal{display:block;flex:none;width:20px;height:20px;overflow:visible}
.nb-cal-fill{fill:var(--nb-paper)}
.nb-cal-line>*,.nb-ico-line>*{fill:none;stroke:var(--nb-ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* the wide one, at the bottom of the menu card */
.nb-mfoot{padding:14px 0 18px;opacity:0;transform:translateY(-4px);transition:opacity .25s,transform .35s var(--out)}
.nb-open .nb-mfoot{opacity:1;transform:none;transition-delay:.2s}
.nb-mfoot .nb-b{display:flex;width:100%;height:52px;gap:10px;font-size:16px}
.nb-mfoot .nb-cal{width:22px;height:22px}

/* ---------- the drop-down: a paper card under the bar, the five pages, a light shade over the page ---------- */
.nb-panel{position:fixed;inset:0;z-index:1;visibility:hidden;pointer-events:none;transition:visibility 0s .3s}
.nb-open{z-index:1200}
.nb-open .nb-panel{visibility:visible;pointer-events:auto;transition:none}
.nb-scrim{position:absolute;inset:0;background:rgba(31,29,26,.16);opacity:0;transition:opacity .25s}
.nb-open .nb-scrim{opacity:1}
/* the card's top is the bar's bottom: --nb-h flips at once on scroll, only the bar's height eases, so the card drops from where the bar is heading */
.nb-card{position:absolute;top:calc(var(--nb-h) + 8px);left:10px;right:10px;padding:4px 20px;background:var(--nb-paper);border-radius:20px;
  box-shadow:0 1px 2px rgba(31,29,26,.06),0 22px 48px -16px rgba(31,29,26,.34);opacity:0;transform:translateY(-8px);transform-origin:100% 0;transition:opacity .2s,transform .32s var(--out)}
.nb-open .nb-card{opacity:1;transform:none}
.nb-plist{margin:0;padding:0;list-style:none}
.nb-plist li{opacity:0;transform:translateY(-4px);transition:opacity .25s,transform .35s var(--out)}
.nb-open .nb-plist li{opacity:1;transform:none;transition-delay:calc(.04s + var(--i) * .03s)}
.nb-plist a{display:flex;align-items:center;gap:12px;min-height:56px;border-bottom:1px solid #e3ded2;font-size:18px;font-weight:500}
.nb-plist li:last-child a{border-bottom:0}
.nb-plist a span{margin-right:auto}  /* no highlight on the page you are on (Luke, 30 Oct), aria-current kept */
/* the page icons: the calendar tick's build at 22px, the pass in sky */
.nb-ico{display:block;flex:none;width:22px;height:22px;overflow:visible}
.nb-ico-fill{fill:var(--nb-sky)}
.nb-chev{display:block;flex:none;width:20px;height:20px;fill:none;stroke:rgba(31,29,26,.45);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

@media (min-width:1024px){
  .nb-spacer{height:80px}
  .nb{--nb-h:80px}
  .nb-in{padding:0 48px}
  .nb-lg,.nb-scrolled .nb-lg{height:64px}
  .nb-links{display:flex}
  .nb-in>.nb-b{display:inline-flex;margin-left:6px}
  .nb-burger,.nb-panel{display:none}
}
@media (prefers-reduced-motion:reduce){
  .nb *,.nb::before{transition:none!important;animation:none!important}
}