/* ============================================================
   Capital Mortgages — client stories
   ============================================================
   A story is a piece of writing, not a tile. So this page
   deliberately declines the card/shadow conventions the rest of
   the site uses for grids: the only devices here are hairlines,
   whitespace and the two typefaces already loaded. Everything
   below leans on shared.css tokens — no new colours, no new
   radii, no new shadows.
   ============================================================ */

/* One reading column. Stories are read top to bottom, never scanned
   in parallel, so a grid would be working against the content. */
.stories { max-width: 78ch; }

.story { padding: 60px 0; border-top: 1px solid var(--line); scroll-margin-top: 88px; }
.story:first-child { border-top: 0; padding-top: 4px; }

/* the facts line: where, who, what makes it interesting */
.story-facts {
  font-family: var(--sans);
  font-size: 12.5px; font-weight: 640;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-faint);
}

.story-title { font-size: 32px; line-height: 1.14; margin-top: 12px; max-width: 26ch; }

/* ---------- the four beats ----------
   Label left, prose right, a hairline between each. The label column
   is fixed so the beats line up down the page and the eye can jump
   straight to "The outcome" without reading the rest. */
.story-beats { display: grid; margin-top: 32px; }
.beat {
  display: grid; grid-template-columns: 170px 1fr; gap: 26px;
  padding: 22px 0; border-top: 1px solid var(--line-soft);
}
.beat dt {
  font-family: var(--sans);
  font-size: 12.5px; font-weight: 640;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--brand-ink);
  /* the label's cap-height sits above the serif's x-height otherwise */
  padding-top: 4px;
}
.beat dd { margin: 0; }
.beat dd p { color: var(--ink-soft); max-width: 62ch; }
.beat dd p + p { margin-top: 12px; }

@media (max-width: 720px) {
  .story { padding: 44px 0; }
  .story-title { font-size: 26px; max-width: none; }
  .beat { grid-template-columns: 1fr; gap: 8px; padding: 18px 0; }
  .beat dt { padding-top: 0; }
}