/* ============================================================================
   Bionic Page — identity layer
   The site's ink is the theme's default violet; this file carries only what
   makes Bionic Page itself: the centred, masthead-style hero with the live
   specimen galley beneath it.
   ========================================================================== */

/* ------------------------------------------------------------- page hero */
.hero__inner { text-align: center; }
.hero__kicker { justify-content: center; }
.hero__title { max-width: 17ch; margin-inline: auto; }
.hero__lede { max-width: 57ch; margin: 28px auto 36px; }
.hero .btn-row { justify-content: center; }
.hero .flagline { justify-content: center; margin-top: 30px; }
.hero .galley { margin-top: 72px; text-align: left; }

@media (max-width: 640px) {
  .hero { padding-top: 64px; }
  .hero .galley { margin-top: 52px; }
}