.mobile-menu {
  display: none;
  position: relative;
  color: var(--menu-ink, var(--ink, #173c38));
}

.mobile-menu summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 13px;
  border: 1px solid var(--menu-border, rgba(23,60,56,.28));
  border-radius: 999px;
  cursor: pointer;
  font-size: .86rem;
  font-weight: 800;
  list-style: none;
}

.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu summary::after { content: "+"; font-size: 1.1rem; line-height: 1; }
.mobile-menu[open] summary::after { content: "×"; }

.mobile-menu-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 20;
  min-width: 220px;
  padding: 8px;
  color: var(--menu-ink, var(--ink, #173c38));
  background: var(--menu-bg, var(--paper, #fffdf8));
  border: 1px solid var(--menu-border, rgba(23,60,56,.16));
  border-radius: 18px;
  box-shadow: 0 18px 45px rgba(23,60,56,.18);
}

.mobile-menu-panel a {
  display: block;
  padding: 11px 13px;
  border-radius: 12px;
  color: inherit;
  font-size: .94rem;
  font-weight: 700;
  text-decoration: none;
}

.mobile-menu-panel a:hover,
.mobile-menu-panel a:focus-visible {
  background: var(--menu-hover, rgba(23,60,56,.08));
  outline: none;
}

@media (max-width: 900px) {
  .nav { display: none !important; }
  .mobile-menu { display: block; }
}

@media (min-width: 901px) {
  .mobile-menu { display: none !important; }
}