/* Mobile nav menu (900px and under), shared by every page: a hand-drawn burger opens a sky
   sheet that drops from the nav and ends in the hills. Built by nav-menu.js. */
.nav-burger { display:none; width:44px; height:44px; margin-right:-9px; padding:0; border:0; background:none; color:var(--ink); cursor:pointer; place-items:center; -webkit-tap-highlight-color:transparent; }
.nav-burger svg { width:27px; height:27px; overflow:visible; }
.nav-burger path { transition:transform .32s cubic-bezier(.2,.8,.2,1), opacity .2s; transform-box:fill-box; transform-origin:center; }
.nav-open .nav-burger .l1 { transform:translateY(4.8px) rotate(42deg); }
.nav-open .nav-burger .l2 { opacity:0; transform:scaleX(.2); }
.nav-open .nav-burger .l3 { transform:translateY(-4.8px) rotate(-42deg); }
.nav-burger:focus-visible { outline:2px solid var(--brand); outline-offset:2px; border-radius:50%; }
@media (max-width:900px) {
  body > nav .nav-burger { display:grid; }
  body > nav.has-menu .nav-right { gap:12px; }
  body > nav.has-menu .nav-right .theme-toggle { display:none; } /* it moves into the menu */
}

html.nav-lock, html.nav-lock body { overflow:hidden; }
html.nav-open body > nav, html.nav-open body > nav.site { background:var(--sky); }

.nav-menu[hidden], .nav-scrim[hidden] { display:none !important; }
.nav-menu { position:fixed; left:0; right:0; top:var(--nav-h, 84px); z-index:59; clip-path:inset(0 0 100% 0); transition:clip-path .38s cubic-bezier(.2,.8,.2,1); }
.nav-open .nav-menu { clip-path:inset(0 0 -4px 0); }
.nav-menu:focus { outline:none; }
.nav-menu :focus-visible { outline:2px solid var(--brand); outline-offset:4px; border-radius:4px; }
.nav-menu-body { padding:10px 24px 6px; background:var(--sky); }
.nav-menu ul { margin:0; padding:0; list-style:none; }
.nav-menu li { display:flex; flex-wrap:wrap; align-items:baseline; gap:0 12px; opacity:0; transform:translateY(10px); transition:opacity .28s, transform .34s cubic-bezier(.2,.8,.2,1); }
.nav-open .nav-menu li { opacity:1; transform:none; }
.nav-open .nav-menu li:nth-child(2) { transition-delay:.05s; }
.nav-open .nav-menu li:nth-child(3) { transition-delay:.1s; }
.nav-menu-link { display:inline-block; padding:7px 0; font-family:'Fraunces',serif; font-weight:500; font-size:2.25rem; line-height:1.12; letter-spacing:-.02em; color:var(--ink); text-decoration:none; -webkit-tap-highlight-color:transparent; }
.nav-menu-link[aria-current="page"] { text-decoration:underline wavy var(--brand); text-decoration-thickness:2px; text-underline-offset:9px; }
.nav-menu-note { font-family:'Caveat',cursive; font-size:1.3rem; color:var(--annot); transform:rotate(-3deg); }
.nav-lights { display:flex; align-items:baseline; gap:18px; margin-top:10px; opacity:0; transition:opacity .3s .14s; }
.nav-open .nav-lights { opacity:1; }
.nav-lights-label { font-family:'Caveat',cursive; font-size:1.3rem; color:var(--annot); }
.nav-lights button { position:relative; min-height:44px; padding:0 2px 8px; border:0; background:none; cursor:pointer; font:600 1rem 'Karla',sans-serif; color:var(--ink-dim); -webkit-tap-highlight-color:transparent; }
.nav-lights button[aria-pressed="true"] { color:var(--ink); }
.nav-pen { position:absolute; left:-2px; bottom:4px; width:calc(100% + 6px); height:9px; opacity:0; }
[aria-pressed="true"] > .nav-pen { opacity:1; }
.nav-menu-hills { display:block; width:100%; height:64px; margin-top:-1px; }
.nav-scrim { position:fixed; inset:0; z-index:58; background:rgba(12,23,18,.38); opacity:0; transition:opacity .3s; }
.nav-open .nav-scrim { opacity:1; }
@media (prefers-reduced-motion:reduce) {
  .nav-menu, .nav-menu *, .nav-scrim, .nav-burger path { transition:none !important; }
}