/* ==========================================================================
   DIA BONITO · faq.css
   The FAQ page's own touches on top of island.css: the section links under
   the hero read as a centered row of chips, so the page opens with a clear
   table of contents. Everything else (hero, notes grid, closing invite)
   comes from style.css and island.css.
   ========================================================================== */

.faq-jump {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  font-size: 0; /* hides the " · " separators between the links */
  padding: clamp(28px, 5vw, 48px) 0 clamp(8px, 2vw, 16px);
}

.faq-jump a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  font-family: var(--sans);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--bone-2);
  text-decoration: none;
  border: 1px solid rgba(232, 226, 211, 0.22);
  border-radius: 999px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.faq-jump a:hover,
.faq-jump a:focus-visible {
  color: var(--bone);
  border-color: var(--lagoon);
}

.faq-anchor { scroll-margin-top: 96px; }