/* The family history layout is scoped to Our Story, independent of other editorial pages. */
.familyHistoryPage { text-align: left; }
.familyHistoryPage *, .familyHistoryPage *::before, .familyHistoryPage *::after { box-sizing: border-box; }
.familyHistoryPage figure { margin: 0; }
.familyHistory { padding: clamp(36px, 5vw, 72px) clamp(24px, 5vw, 80px); background: var(--story-paper); scroll-margin-top: 20px; }
.familySectionHeading { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; padding-bottom: 36px; }
.familyHistoryPage .storySectionLabel { margin-bottom: 18px; font-size: 11px; }
.familyHistoryPage h2 { margin: 0; font-size: clamp(32px, 3.3vw, 46px); font-weight: 500; line-height: 1.08; letter-spacing: -.025em; }
.familySectionHeading > p, .familyTodayCopy p { margin: 0; font-size: 16px; line-height: 1.85; color: #45545e; }
.familyTimeline { margin: 0; padding: 0; list-style: none; }
.familyTimeline > li { display: grid; grid-template-columns: 92px minmax(0, 1fr) minmax(0, .72fr); gap: clamp(24px, 3vw, 48px); padding: 38px 0; border-top: 1px solid var(--story-line); }
.familyYear { position: relative; padding-top: 3px; }
.familyDate { display: block; font-family: "Newsreader", Georgia, serif; font-size: 38px; line-height: 1; color: var(--story-ink); }
.familyYear::after { display: block; width: 30px; height: 3px; margin-top: 15px; background: var(--story-orange); content: ""; }
.familyPlace { margin: 0 0 10px; font-size: 11px; font-weight: 700; line-height: 1.5; letter-spacing: .12em; text-transform: uppercase; color: #69503c; }
.familyMilestone h3 { margin: 0; font-size: clamp(27px, 2.4vw, 34px); font-weight: 500; line-height: 1.15; letter-spacing: -.02em; }
.familyMilestone p { margin: 16px 0; color: #45545e; font-size: 15px; line-height: 1.85; }
.familyMilestone a:link, .familyMilestone a:visited, .familyTextLink:link, .familyTextLink:visited { display: inline-flex; gap: 18px; align-items: center; padding: 5px 0; font-family: "Manrope", Arial, sans-serif; font-size: 13px; font-weight: 700; color: var(--story-ink); text-decoration: none; border-bottom: 2px solid var(--story-orange); }
.familyMilestone a:hover, .familyTextLink:hover { border-bottom-color: var(--story-ink); }
.familyLocationPhoto { align-self: start; min-width: 0; }
.familyLocationPhoto img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.familyLocationPhoto figcaption { margin-top: 9px; font-size: 11px; line-height: 1.5; color: #54616b; }
.familyToday { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 80px); padding: clamp(36px, 5vw, 72px) clamp(24px, 5vw, 80px); background: #fff; border-top: 1px solid var(--story-line); }
.familyTodayCopy p + p { margin-top: 20px; }
.familyTodayCopy .familyTextLink { margin-top: 20px; }
.familyHistoryPage .familyClosing { padding: clamp(32px, 4vw, 54px) clamp(24px, 5vw, 80px); grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.familyHistoryPage .familyClosing h2 { font-size: clamp(30px, 3vw, 42px); }
.familyHistoryPage .familyClosing p { font-size: 15px; }
.familyHistoryPage a:focus-visible { outline: 3px solid #b76322; outline-offset: 5px; }
@media (max-width: 1050px) {
	.familyTimeline > li { grid-template-columns: 75px minmax(0, 1fr) minmax(0, .75fr); gap: 24px; }
	.familyHistoryPage .familyClosing { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
	.familySectionHeading, .familyToday { grid-template-columns: 1fr; gap: 24px; }
	.familySectionHeading { padding-bottom: 28px; }
	.familyTimeline > li { grid-template-columns: 1fr; gap: 18px; padding: 28px 0; }
	.familyYear { display: flex; align-items: center; gap: 15px; padding: 0; }
	.familyDate { font-size: 32px; }
	.familyYear::after { width: 40px; margin: 0; }
	.familyLocationPhoto img { aspect-ratio: 16 / 9; }
	.familyLocationPhoto { max-width: 480px; width: 100%; }
	.familyHistoryPage .storyArrowLink { min-width: 0; overflow-wrap: anywhere; }
}