/* Return links share the header corner, leaving the Garden's scroll prompt clear. */
.garden-navigation {
  position: fixed; z-index: 100;
  top: max(clamp(.7rem, 1.7vw, 1.25rem), env(safe-area-inset-top));
  right: max(clamp(.7rem, 1.7vw, 1.35rem), env(safe-area-inset-right));
  font: 14px/1.5 system-ui, sans-serif;
}
.garden-navigation summary {
  display: grid; place-items: center; width: 46px; height: 46px;
  margin-left: auto; padding: 0; list-style: none; cursor: pointer;
  color: #202020; background: rgba(255, 255, 255, .95);
  border: 1px solid rgba(0, 0, 0, .1); border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08); touch-action: manipulation;
}
.garden-navigation summary::-webkit-details-marker { display: none; }
.garden-navigation summary::marker { content: ""; }
.garden-navigation summary svg { width: 22px; height: 22px; }
.garden-navigation nav {
  position: absolute; top: calc(100% + 9.5px); right: 0;
  width: min(248px, calc(100vw - 32px)); padding: 7.5px;
  border: 1px solid #e7e2dd; border-radius: 20.5px;
  background: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
}
.garden-navigation a {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 48px; padding: 12.5px; border-radius: 13.5px;
  color: #302b28; text-decoration: none;
}
.garden-navigation summary:focus-visible, .garden-navigation a:focus-visible {
  outline: 2px solid #c0272b; outline-offset: 3px;
}
.garden-navigation summary:active { background: #eee5de; }
@media (hover: hover) and (pointer: fine) {
  .garden-navigation a:hover { background: #f4efeb; }
}
@media (max-width: 540px) {
  .garden-navigation summary { width: 44px; height: 44px; }
}