/* ── how a magazine is made: americanhousing.com's three steps (Buy Land ·
   Build Homes · Sell Homes), measured at 1920 and set the same:
     row        1440 wide, centred, 24 px side padding, three equal cards
     card       a 1 px rule on its left, 24 px in from it, 24 px to the next card;
                a column with 24 px gaps: the head (87 high), a spacer, the drawing
     head       a 48 px filled circle with the number (24 px), 12 px, the title
                at 64 / 64 medium
     drawing    the full card width at 350 : 205, standing on its ground line
     after      240 px of page before the next section
   Motion, from their CSS: each card rises 40 px and fades in over 1 s
   (cubic-bezier(.16,1,.3,1)), the second .12 s later, the third .24 s, when
   the row comes into view; the title rises from 160% in its own mask over .9 s.
   Colours: the palette's two inks (their ink #302d2d and blue lines -> crimson,
   their page #fdfff1 -> cream). */
.ah-steps { background: #fff0c0; color: #a00034; }
.ah-cards {
  display: flex; max-width: 1440px; margin: 0 auto; padding: 0 24px;
  font: 400 16px / 24px var(--f-body);
}
.ah-card {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 24px;
  margin-right: 24px; padding-left: 24px; border-left: 1px solid #a00034;
  opacity: 0; transform: translateY(40px); will-change: transform, opacity;
  transition: transform 1s cubic-bezier(.16, 1, .3, 1), opacity 1s cubic-bezier(.16, 1, .3, 1);
}
.ah-card:last-child { margin-right: 0; }
.ah-cards.is-revealed .ah-card { opacity: 1; transform: none; }
.ah-cards.is-revealed .ah-card:nth-child(2) { transition-delay: .12s; }
.ah-cards.is-revealed .ah-card:nth-child(3) { transition-delay: .24s; }
.ah-head { display: flex; align-items: center; gap: 12px; min-height: 87px; }
.ah-num {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%; background: #a00034; color: #fff0c0;
  font: 400 24px / 24px var(--f-body);
}
.ah-title {
  overflow: hidden; margin-bottom: -.2em; padding-bottom: .2em;
  font: 500 64px / 64px var(--f-body); letter-spacing: -.02em; white-space: nowrap;
}
.ah-title span { display: block; transform: translateY(160%); transition: transform .9s cubic-bezier(.16, 1, .3, 1) .25s; }
.ah-cards.is-revealed .ah-title span { transform: none; }
.ah-cards.is-revealed .ah-card:nth-child(2) .ah-title span { transition-delay: .37s; }
.ah-cards.is-revealed .ah-card:nth-child(3) .ah-title span { transition-delay: .49s; }
.ah-gap { height: 17px; }
.ah-img { display: block; width: 100%; height: auto; aspect-ratio: 350 / 205; object-fit: cover; object-position: bottom; border-radius: 2px; }
.ah-tail { height: 96px; }   /* theirs is 240; his call: less dead space */

@media (max-width: 1279px) { .ah-title { font-size: 48px; line-height: 48px; } }
@media (max-width: 1023px) { .ah-title { font-size: 36px; line-height: 36px; } .ah-num { width: 28px; height: 28px; font-size: 18px; } .ah-head { min-height: 0; } }
/* phones: their cards stack, a rule above each instead of beside it */
@media (max-width: 767px) {
  .ah-cards { flex-direction: column; gap: 24px; padding: 0 16px; }
  .ah-card { margin: 0; padding: 16px 0 0; border-left: 0; border-top: 1px solid #a00034; }
  .ah-card:last-child { padding-bottom: 24px; border-bottom: 1px solid #a00034; }
  .ah-head { gap: 12px; }
  .ah-num { width: 26px; height: 26px; font-size: 18px; }
  .ah-gap { display: none; }
  .ah-tail { height: 160px; }
}
@media (prefers-reduced-motion: reduce) { .ah-card, .ah-title span { opacity: 1; transform: none; transition: none; } }
/* the drawings are line art now (tools/draw_steps.py), shown whole like theirs */
.ah-img { object-fit: contain; aspect-ratio: 425 / 259; }