/* Additions for the service pages generated by tools/build-pages.mjs.
   Kept separate from styles.css so the approved homepage styling is never touched. */

/* The homepage's .section-intro uses align-items:end, which bottom-aligns the two columns.
   That reads well when both sides are short, but on a service page the left column holds the
   lede and the right holds several paragraphs, so end-alignment drops the lede far below the
   heading and looks broken. Start-align on these pages. */
.page-intro {
  align-items: start;
}

/* The lede is the page's most important sentence after the h1, so give it the body scale
   rather than the small muted copy scale it would otherwise inherit. */
.page-intro > div:first-child p {
  font-size: 19px;
  line-height: 1.75;
  color: var(--ink, #262029);
  max-width: 46ch;
}

/* The homepage only ever sizes h1 inside .hero (`.hero h1`), so a bare h1 on a content page
   falls back to the browser default of 32px and ends up SMALLER than the h2s at 48-64px.
   That inverts the heading hierarchy visually. Size it here, one step above h2. */
main h1 {
  font-family: var(--serif);
  /* Must stay clearly above h2, which is clamp(44px, 4.45vw, 64px). A min of 46 sat level with
     it at narrow widths and read as a sibling rather than a parent, so the floor is 54. */
  font-size: clamp(54px, 5.4vw, 76px);
  line-height: 1.03;
  letter-spacing: -1.6px;
  max-width: 20ch;
  margin-bottom: 40px;
  /* Break long headings evenly instead of leaving a stranded word on the last line.
     Supported in current Chrome, Edge, Safari and Firefox; harmless where it is not. */
  text-wrap: balance;
}

/* FAQ pairs: question on its own line, answer beneath, readable density. */
.faq-list p {
  margin-top: 22px;
}
.faq-list p:first-child {
  margin-top: 0;
}
.faq-list strong {
  display: block;
  margin-bottom: 6px;
  color: var(--ink, #262029);
}

/* Source list sits in the second column, matching .service-list row rhythm. */
.source-list {
  color: var(--muted);
  font-size: 14px;
}

@media (max-width: 900px) {
  main h1 { max-width: none; }
  .page-intro > div:first-child p { font-size: 17px; }
}

/* At phone width the desktop clamp floor of 54px forced the h1 onto three dense lines with a
   single word stranded on the last. Reduce it, but NOT below h2: styles.css pins h2 at 44px
   under 620px, so an h1 smaller than 46 inverts the hierarchy and reads as a subheading.
   46px fits this heading in two lines at 390px, which is the fix the 54px floor needed. */
@media (max-width: 620px) {
  main h1 {
    font-size: clamp(46px, 11.8vw, 52px);
    line-height: 1.08;
    letter-spacing: -1px;
    margin-bottom: 28px;
  }
  .page-intro > div:first-child p { font-size: 16px; line-height: 1.7; }
}