header .page-menu { position: relative; margin-left: 16px; }
.page-menu summary { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--primary-color); border: 1px solid #e9ddfa; border-radius: 12px; cursor: pointer; list-style: none; background: #fff; }
.page-menu summary::-webkit-details-marker { display: none; }
.page-menu summary:hover, .page-menu[open] summary { background: var(--light-purple); }
.page-menu summary:focus-visible, .page-menu a:focus-visible { outline: 3px solid var(--accent-color); outline-offset: 3px; }
.page-menu summary svg { width: 22px; height: 22px; }
header .page-menu nav { position: absolute; top: calc(100% + 12px); right: 0; left: auto; transform: none; display: flex; flex-direction: column; gap: 4px; width: 200px; max-width: calc(100vw - 28px); padding: 10px; border: 1px solid #e9ddfa; border-radius: 16px; background: #fff; box-shadow: 0 12px 36px #4c1d951a; }
header .page-menu:not([open]) nav { display: none; }
header .page-menu nav a { padding: 12px 14px; border-radius: 9px; font-size: 15px; }
.page-menu nav a:hover, .page-menu nav a[aria-current="page"] { background: var(--light-purple); color: var(--primary-color); }
@media (max-width: 480px) {
  header { height: 70px; align-items: center; padding-top: 0; }
  html { scroll-padding-top: 90px; }
  header .page-menu { margin-left: 10px; }
}