.mobile-menu { display: none; }
@media (max-width: 900px) {
  header .nav { gap: 12px; }
  header .navlinks { display: none; }
  .mobile-menu { display: block; position: relative; flex: none; }
  .mobile-menu summary {
    cursor: pointer; padding: 10px 14px; border: 1px solid #6c20d8;
    border-radius: 8px; color: #6022c4; background: #fff; font-weight: 700;
  }
  .mobile-menu summary:focus-visible, .mobile-menu a:focus-visible {
    outline: 3px solid #6c20d8; outline-offset: 3px;
  }
  .mobile-menu nav {
    display: grid; gap: 2px; position: absolute; right: 0; top: 100%;
    width: min(270px, calc(100vw - 40px)); max-height: 70vh; overflow-y: auto;
    padding: 10px; background: #fff; border: 1px solid #e8e2ef;
    border-radius: 8px; box-shadow: 0 8px 24px #17142a26; z-index: 100;
  }
  .mobile-menu a { display: block; padding: 10px; color: #32104f; font-weight: 700; }
}