/* Every link lives in the menu, so the bar carries the wordmark and one action.
   Same at every width, the way the reference does it. */
.nav .nav__l{display:none}
.nav .burger{display:block;order:2;margin-left:.55rem}
.nav .book{order:3;margin-left:.9rem}
.nav .ret{order:1;margin-left:auto;margin-right:.9rem}
/* On phones .ret is hidden, so its margin-left:auto no longer pushes the
   actions to the right edge and they stall mid-bar. Move the auto margin
   onto the burger, which is the first visible item of the right-hand group. */
@media(max-width:900px){
  .nav .burger{margin-left:auto;margin-right:0}
  .nav .book{margin-left:.55rem;margin-right:0}
}
.drop{left:auto;right:0;top:100%;margin-top:.6rem;width:min(26rem,calc(100vw - 2rem));
  border:0;border-radius:14px;overflow:hidden;
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  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)}
.dg{padding:1rem 1rem .3rem}
.dg__k{margin:.9rem 0 .35rem;font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--pop)}
.dg__k:first-child{margin-top:0}
.drop .dg a{display:block;padding:.5rem .55rem;border:0;border-radius:10px;
  font-family:var(--body);font-size:.92rem;letter-spacing:0;text-transform:none;
  color:var(--ink);line-height:1.35}
.drop .dg a:hover{background:rgba(247,231,227,.8)}
.drop .drop__cta{margin:.4rem 1rem .2rem;padding:.85rem 1rem;border-radius:999px}
.drop__ret{margin:0 1rem 1rem}
@media(max-width:560px){.nav .ret{display:none}}