/* Our Story: five photo-album spreads. Other pages keep their existing layout. */
.family-page main {max-width:1520px}
.family-page main>.family-story-section {
  min-height:max(620px,calc(100svh - var(--site-header-height,86px)));
  padding:clamp(60px,7vh,88px) 20px;position:relative;isolation:isolate;
}
.family-story-section::before {
  content:"";position:absolute;inset:0 calc(-1 * clamp(20px,5vw,80px));
  z-index:-1;pointer-events:none;background:#f3e6d112;
}
.family-story-section:nth-of-type(even)::before {
  background:linear-gradient(to right,
    #8d644000 0%,#8d644008 6%,#8d644017 18%,
    #8d64401a 38%,#8d64401a 62%,#8d644017 82%,
    #8d644008 94%,#8d644000 100%);
}
.family-page .story-spread {
  width:100%;max-width:1220px;margin:auto;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;gap:clamp(48px,6vw,96px);
}
.family-page .family-story-copy {min-width:0}
.family-page .family-story-copy h1,.family-page .family-story-copy h2 {
  font-size:clamp(34px,3.3vw,48px);font-family:var(--heading);color:var(--brick);
  line-height:1.15;letter-spacing:-.7px;margin:0 0 24px;text-wrap:balance;
}
.family-page main .family-story-copy p {
  font-size:22px;line-height:1.6;max-width:47ch;margin:0 0 20px;
}
.family-page .family-story-copy p:last-child {margin-bottom:0}
.family-page .family-story-copy .button {margin-top:2px}
.family-page .album-cluster {position:relative;min-width:0;width:100%;padding:12px 34px 40px 14px}
.family-page .album-photo {
  margin:0;border:5px solid var(--charcoal);border-radius:22px;
  overflow:hidden;background:var(--charcoal);box-shadow:0 0 8px #33333330,0 0 26px #33333332;
}
.family-page .album-photo img {display:block;width:100%;height:auto;border-radius:16px}
.family-page .album-main {width:84%;max-width:410px}
.family-page .album-small {position:absolute;width:43%;max-width:220px;z-index:1}
.family-page .meeting-album .album-main {transform:rotate(-2.2deg)}
.family-page .meeting-album .album-main img {transform:scale(1.1);transform-origin:50% 74%}
.family-page .meeting-album .album-small {bottom:5px;right:5px;transform:rotate(3.4deg)}
.family-page .early-album {padding:10px 12px 42px 52px}
.family-page .early-album .album-main {width:88%;margin-left:auto;transform:rotate(1.4deg)}
.family-page .early-album .album-small {width:34%;bottom:0;left:4px;transform:rotate(-3deg)}
.family-page .kentucky-album {padding:12px 45px 55px 5px}
.family-page .kentucky-album .album-main {width:83%;transform:rotate(-1.1deg)}
.family-page .kentucky-album .album-main img {transform:scale(1.15);transform-origin:72% 80%}
.family-page .kentucky-album .album-small {width:56%;max-width:285px;bottom:5px;right:0;transform:rotate(2.3deg)}
.family-page .online-album {padding:12px 55px 64px 8px}
.family-page .online-album .album-main {width:85%;margin-left:0;margin-right:auto;transform:rotate(-2.1deg)}
.family-page .online-album .album-small {width:34%;bottom:-6px;right:3px;left:auto;transform:rotate(2.4deg)}
.family-page .business-album {padding:15px 0}
.family-page .business-album .album-main {width:100%;max-width:none;transform:rotate(-2deg)}
.family-page .story-business .story-spread {grid-template-columns:minmax(0,1.12fr) minmax(0,1fr)}
.family-page .story-products-button {background:var(--brick);border-color:var(--brick);color:#fff3df}
.family-page .story-products-button:hover {background:#8c3e2d;border-color:#8c3e2d}
.family-page .story-meeting .family-story-copy h1 {font-size:clamp(38px,3.7vw,54px)}
@media(min-width:741px) and (max-width:1050px) {
  .family-page .story-spread {gap:40px}
  .family-page main .family-story-copy p {font-size:20px}
  .family-page .album-cluster {padding-left:8px;padding-right:20px}
  .family-page .album-small {border-width:4px;border-radius:17px}
}
@media(max-width:740px) {
  .family-page main>.family-story-section {min-height:0;padding:42px 4px 50px}
  .family-page .story-spread,.family-page .story-business .story-spread {
    grid-template-columns:minmax(0,1fr);gap:36px;max-width:540px;
  }
  .family-page .family-story-copy {grid-column:1;grid-row:2}
  .family-page .album-cluster {grid-column:1;grid-row:1;max-width:460px;margin-inline:auto}
  .family-page .family-story-copy h1,.family-page .family-story-copy h2 {font-size:34px;margin-bottom:20px}
  .family-page .story-meeting .family-story-copy h1 {font-size:38px}
  .family-page main .family-story-copy p {font-size:20px;line-height:1.6}
  .family-page .album-photo {border-width:4px;border-radius:18px}
  .family-page .album-photo img {border-radius:13px}
  .family-page .business-album {padding:6px 0}
}

/* Lift the subjects inside the remaining early-story frames without moving the frames. */
.family-page .meeting-album .album-small img,.family-page .early-album .album-main img {transform:scale(1.04);transform-origin:50% 90%}

/* Closer framing of Jimmy and Cynthia around the tree, lifted within the frame. */
.family-page .online-album .album-small img {transform:scale(1.08);transform-origin:25% 85%}


/* One larger business photograph, without an overlapping snapshot. */
.family-page .story-business .story-spread {grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(40px,4.5vw,72px)}
.family-page .business-album {padding:15px 0}
@media(max-width:740px) {.family-page .story-business .story-spread {grid-template-columns:minmax(0,1fr);gap:36px}.family-page .business-album {padding:6px 0}}

/* Give the business photograph and its text more horizontal room on desktop. */
@media(min-width:1051px) {
  .family-page .story-business .story-spread {
    width:calc(100% + 48px);max-width:1360px;
    margin-left:-24px;margin-right:-24px;
    grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:56px;
  }
}

/* Give the business photo more separation from the copy without moving the copy off-screen. */
@media(min-width:1051px) {
  .family-page .story-business .story-spread {grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:96px}
  .family-page .business-album {transform:translateX(-18px)}
}