/* /familylore/ - the four-part Monday writing series (inc/overhaul/89c-family-lore.php).
   Reuses the .rhst-* classes from 89-storytelling.css (hero, presenters, session cards,
   buttons, find-us) so it reads as the sibling of /tellintales/; this file adds only what
   that page does not have. Phone first: one column, full-width buttons, nothing that
   needs more than 375px. */

/* the hero picture: shown whole, 3:2, never cropped */
.rhfl-picture{padding-top:6px;padding-bottom:6px}
.rhfl-picture__frame{margin:0;max-width:900px;background:var(--ground)}
.rhfl-picture__img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}

/* the description */
.rhfl-about{padding:22px 0 4px}
.rhfl-about p{margin:0 0 14px;max-width:62ch;color:var(--tx)}
.rhfl-about p:last-child{margin-bottom:0}

/* the Part label sits where /tellintales/ puts the date, and the date is the card's heading */
.rhfl-session .rhst-session__title{margin-top:6px}
.rhfl-session__name{margin:6px 0 0;color:var(--tx-2)}

/* Book all four sessions */
.rhfl-bundle{margin:0 0 22px;padding:20px 20px 18px;max-width:640px;background:var(--surface);border:1px solid rgba(95,122,99,.24);border-left:4px solid var(--clay)}
.rhfl-bundle__why{margin:0 0 14px;font-weight:600;color:var(--pine);line-height:1.45}
.rhfl-bundle__action{margin:0;max-width:none}
.rhfl-bundle__how{margin:10px 0 0;font-size:.92rem;color:var(--tx-2)}

/* the free-book line */
.rhfl-gift{margin:22px 0 0;padding:16px 18px;max-width:640px;border-left:3px solid var(--clay);background:var(--surface);color:var(--pine);font-weight:600;line-height:1.5}

@media (min-width:640px){
  .rhfl-picture{padding-top:10px;padding-bottom:10px}
  .rhfl-about{padding-top:28px}
}