/* NAV MENUS */
/* Hovering a section opens a panel of cards rather than a list of links, so the
   five lines of care are visible from anywhere on the site. */
.nav__l .nv{position:relative;display:inline-flex;align-items:center}
.nav a:hover{color:var(--ink-3)}
.nav .wm{transition:color .16s}
.nav a:hover .wm{color:var(--ink-3)}
.mega{position:absolute;left:-1rem;top:100%;margin-top:.85rem;z-index:60;
  opacity:0;visibility:hidden;transform:translateY(-.35rem);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-radius:14px;padding:.7rem;width:max-content;max-width:44rem;
  box-shadow:inset 1px 1px 1px rgba(255,255,255,.75),
             inset -1px -1px 1px rgba(255,255,255,.35),
             0 10px 34px -6px rgba(31,24,9,.20)}
.nv:hover .mega,.nv:focus-within .mega{opacity:1;visibility:visible;transform:translateY(0)}
/* the hover bridge, so the panel does not close in the gap under the label */
.nv:after{content:"";position:absolute;left:0;right:0;top:100%;height:1rem}
.mg__g{display:grid;gap:.4rem}
.mg__g--2{grid-template-columns:repeat(2,minmax(0,17rem))}
.mg__i{display:block;padding:.75rem .9rem;border-radius:10px;background:transparent;
  text-decoration:none;transition:background .14s}
.mg__i:hover{background:rgba(247,231,227,.75)}
.mg__i b{display:block;font-family:var(--body);font-weight:500;font-size:.86rem;
  letter-spacing:.01em;text-transform:none;color:var(--ink);line-height:1.3;margin:0 0 .15rem}
.mg__i span{display:block;font-size:.78rem;line-height:1.45;color:var(--ink-3);
  text-transform:none;letter-spacing:0;white-space:normal}
.mg__i b{white-space:normal}
.mg__f{display:block;margin:.35rem .2rem .1rem;padding:.55rem .7rem;
  font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--pop);
  text-decoration:none;border-top:1px solid var(--rule)}
.mg__f:hover{color:var(--ink)}
@media(max-width:900px){.mega{display:none}}