/* "Explore more" cross-links shared by every page in public/explore/. Each page
   carries its own <nav class="explore-more"> markup listing the other pages;
   palette tokens come from the host page, as with ask-us.js. */
.explore-more { padding: 48px 0 8px; }
.explore-more h2 {
  margin: 0 0 16px; font-family: var(--mono, monospace); font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted, #7B7585);
}
.explore-more ul {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px;
  margin: 0; padding: 0; list-style: none;
}
.explore-more a {
  display: block; height: 100%; box-sizing: border-box; padding: 18px 20px;
  border: 1px solid var(--border-strong, rgba(255,255,255,.16));
  border-radius: var(--radius-control, 2px);
  background: var(--card-elev, #201D29); color: var(--text, #E8E4ED);
  font-family: var(--sans, sans-serif); text-decoration: none;
  transition: border-color .2s ease;
}
.explore-more a:hover, .explore-more a:focus-visible { border-color: #D255FE; }
.explore-more b { display: block; font-size: 16px; font-weight: 500; margin-bottom: 6px; }
.explore-more span { display: block; font-size: 13.5px; line-height: 1.5; color: var(--text-muted, #7B7585); }
.explore-more b::after { content: " \2192"; color: #D255FE; }