/* Floating pop navigation */
.nav {
  position: sticky;
  top: 14px;
  width: min(1120px, calc(100% - 34px));
  height: 68px;
  margin: 14px auto 0;
  padding: 0 11px 0 20px;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: rgba(246, 237, 207, .94);
  box-shadow: 6px 7px 0 var(--ink);
  backdrop-filter: blur(8px);
}
.nav .brand { font-size: 30px; }
.nav nav {
  gap: 6px;
  padding: 5px;
  border-radius: 999px;
  background: #e7dcbf;
}
.nav nav a {
  padding: 8px 13px;
  border-radius: 999px;
  transition: transform .18s ease, background .18s ease;
}
.nav nav a:hover { background: var(--lime); transform: rotate(-3deg) scale(1.08); }
.nav .small { padding: 10px 15px; background: var(--orange); color: #fff; box-shadow: 3px 3px 0 var(--ink); }
.nav .small:hover { transform: rotate(2deg) translate(1px, 1px); box-shadow: 2px 2px 0 var(--ink); }
@media (max-width:750px) {
  .nav { top: 8px; margin-top: 8px; height: 60px; width: calc(100% - 20px); padding: 0 10px; gap: 6px; }
  .nav .brand { font-size: 25px; }
  .nav nav { display: flex; flex: 1; justify-content: center; gap: 0; padding: 3px; }
  .nav nav a { display: block; padding: 7px 8px; font-size: 11px; white-space: nowrap; }
  .nav .small { display: none; }
}