/*
 * FontMaker visual contracts.
 *
 * This file is the source of truth for cross-surface invariants. Surface
 * styles may define colors and component details, but they must not undo the
 * approved page composition below. SEO pages copy this file at build time.
 */

/* Homepage: headline first, then supporting copy and CTA. */
main#top > .hero {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "lead" "aside";
  row-gap: 18px;
  align-items: start;
  min-height: 260px;
  padding-block: 30px 34px;
}

main#top > .hero .heroLead { grid-area: lead; }
main#top > .hero .heroAside {
  grid-area: aside;
  align-self: start;
  gap: 10px;
}
main#top > .hero .heroAside .primary { align-self: flex-start; }

/* SEO pages use the same vertical reading order as the homepage. */
body[data-page-kind] main > .hero {
  grid-template-columns: 1fr;
  grid-template-areas: "eyebrow" "title" "intro";
  gap: 12px;
  align-items: start;
  min-height: 260px;
  padding-block: 38px 42px;
}

body[data-page-kind] main > .hero .eyebrow {
  grid-area: eyebrow;
  align-self: start;
}
body[data-page-kind] main > .hero h1 { grid-area: title; }
body[data-page-kind] main > .hero p {
  grid-area: intro;
  max-width: 760px;
}

/* Hash-link targets stay clear of the sticky site shell on every surface. */
#generator,
#styles,
#guides,
#about {
  scroll-margin-top: 90px;
}

@media (max-width: 720px) {
  main#top > .hero {
    min-height: 0;
    padding: 24px 18px 28px;
    row-gap: 10px;
  }

  main#top > .hero h1 { font-size: 42px; }
  main#top > .hero p { font-size: 15px; }

  body[data-page-kind] main > .hero {
    min-height: 0;
    padding-block: 28px 30px;
    gap: 8px;
  }
}

/* Keep the homepage hero as one centered content group within the full-width band. */
main#top > .hero { justify-items: center; }
main#top > .hero .heroLead { width: min(100%, 900px); justify-self: center; }
main#top > .hero .heroAside { width: min(100%, 760px); justify-self: center; }