/* MHW "more" menu: three-line toggle beside Place, on every page.
   Separate file so the shared style.min.css is untouched. Colour follows each page's menu links. */
.hero__more { position: relative; display: inline-flex; align-items: center; color: var(--mm-color, rgba(255,255,255,0.6)); }
.hero__more-toggle { position: relative; display: inline-flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 5px; width: 34px; height: 34px; padding: 8px; margin: 0; background: none; border: 0; cursor: pointer; box-sizing: border-box; color: inherit; }
.hero__more-toggle span { display: block; width: 18px; height: 1px; background: currentColor; transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.3s ease, width 0.45s cubic-bezier(0.22, 0.61, 0.36, 1); }
.hero__more-toggle span:nth-child(2) { width: 13px; }
.hero__more-toggle:hover span:nth-child(2) { width: 18px; }
.hero__more-toggle:hover, .hero__more.is-open .hero__more-toggle { color: var(--mm-hover, rgba(255,255,255,0.85)); }
.hero__more.is-open .hero__more-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hero__more.is-open .hero__more-toggle span:nth-child(2) { opacity: 0; width: 0; }
.hero__more.is-open .hero__more-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.hero__more-toggle:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }

/* Panel: no box - a fine drawn line drops from the toggle and the links set out beside it */
.hero__more-menu { position: absolute; top: 100%; right: 16px; margin: 0; padding: 0.9rem 0 0.4rem; list-style: none; text-align: right; white-space: nowrap; visibility: hidden; transition: visibility 0s linear 0.5s; }
.hero__more-menu::before { content: ""; position: absolute; top: 0.35rem; right: 0; width: 1px; height: calc(100% - 0.35rem); background: currentColor; opacity: 0.5; transform: scaleY(0); transform-origin: top; transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1); }
.hero__more.is-open .hero__more-menu { visibility: visible; transition-delay: 0s; }
.hero__more.is-open .hero__more-menu::before { transform: scaleY(1); }
.hero__more-menu li { opacity: 0; transform: translateX(8px); transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1); }
.hero__more.is-open .hero__more-menu li { opacity: 1; transform: none; }
.hero__more.is-open .hero__more-menu li:nth-child(1) { transition-delay: 0.1s; }
.hero__more.is-open .hero__more-menu li:nth-child(2) { transition-delay: 0.16s; }
.hero__more.is-open .hero__more-menu li:nth-child(3) { transition-delay: 0.22s; }
.hero__more.is-open .hero__more-menu li:nth-child(4) { transition-delay: 0.28s; }
.hero__more.is-open .hero__more-menu li:nth-child(5) { transition-delay: 0.34s; }
.hero__more.is-open .hero__more-menu li:nth-child(n+6) { transition-delay: 0.4s; }
/* desktop: main links stay in the bar, menu holds the extra pages */
.hero__more-menu li.hero__more-main { display: none; }
.hero__more-menu .hero__menu-link.hero__more-link { display: inline-flex; justify-content: flex-end; min-width: 0; padding: 0.45rem 1rem 0.45rem 0; color: inherit; }
.hero__more-menu .hero__more-link::after { content: ""; display: inline-block; width: 0; height: 1px; margin-left: 0; background: currentColor; align-self: center; transition: width 0.35s ease, margin 0.35s ease; }
.hero__more-menu .hero__more-link:hover, .hero__more-menu .hero__more-link:focus-visible, .hero__more-menu .hero__more-link[aria-current="page"] { color: var(--mm-hover, rgba(255,255,255,0.85)); outline: none; }
.hero__more-menu .hero__more-link:hover::after, .hero__more-menu .hero__more-link:focus-visible::after { width: 10px; margin-left: 0.5rem; }
@media (max-width: 768px) {
  .hero__more-toggle { width: 44px; height: 44px; padding: 13px; }
  .hero__more-menu { right: 21px; }
  .hero__more-menu .hero__menu-link.hero__more-link { min-height: 40px; padding: 0.5rem 1rem 0.5rem 0; }
}
/* phones: Projects / Practice / Place fold into the menu, so only the three lines show */
@media (max-width: 600px) {
  nav.hero__menu > .hero__menu-link { display: none !important; }
  .hero__more-menu li.hero__more-main { display: block; }
  .hero__more-menu li.hero__more-main + li.hero__more-extra { margin-top: 0.6rem; padding-top: 0.6rem; position: relative; }
  .hero__more-menu li.hero__more-main + li.hero__more-extra::before { content: ""; position: absolute; top: 0; right: 1rem; width: 18px; height: 1px; background: currentColor; opacity: 0.5; }
  /* a quiet backing so the links stay legible over page content */
  .hero__more-menu { right: 9px; padding: 0.9rem 0 0.7rem 2rem; background: var(--mm-bg, rgba(20,20,20,0.55)); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity 0.35s ease, visibility 0s linear 0.5s; }
  .hero__more.is-open .hero__more-menu { opacity: 1; transition: opacity 0.35s ease, visibility 0s; }
  .hero__more-menu::before { right: 12px; top: 0.9rem; height: calc(100% - 1.6rem); }
  .hero__more-menu .hero__menu-link.hero__more-link { padding-right: calc(12px + 1rem); }
  .hero__more-menu li.hero__more-main + li.hero__more-extra::before { right: calc(12px + 1rem); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__more-toggle span, .hero__more-menu::before, .hero__more-menu li { transition: none; }
}
@media print { .hero__more { display: none; } }
/* Hold the toggle's space before the script adds it, so the menu doesn't jump as a page loads */
nav.hero__menu { min-height: 34px; }
nav.hero__menu::after { content: ""; flex: 0 0 34px; height: 34px; }
nav.hero__menu:has(> .hero__more)::after { content: none; }
@media (max-width: 768px) {
  nav.hero__menu { min-height: 44px; }
  nav.hero__menu::after { flex-basis: 44px; height: 44px; }
}
/* light rounded corners to match the site */
@media (max-width: 600px) { .hero__more-menu { border-radius: 6px; } }