.family-intro-note {
  max-width: 760px;
  margin: 0 0 4rem;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.75;
}

.family-project-card {
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
}

.family-project-card .project-image {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.family-project-card .project-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s ease;
}

.family-project-card:hover .project-image img {
  transform: scale(1.025);
}

.family-project-card:nth-child(2n) {
  margin-top: 0 !important;
}

.family-back {
  margin-top: 3rem;
}

.family-modal[hidden] { display: none !important; }
.family-modal {
  position: fixed;
  inset: 0;
  z-index: 10001;
  background: rgba(8, 9, 7, .86);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.family-modal-panel {
  position: relative;
  width: min(94vw, 1200px);
  max-height: 92vh;
  overflow: auto;
  background: #171814;
  color: #fff;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(340px, .9fr);
  box-shadow: 0 24px 80px rgba(0,0,0,.45);
}
.family-modal-media { background: #0d0e0c; position: relative; min-height: 520px; display: flex; flex-direction: column; }
.family-modal-media img { width: 100%; height: min(70vh,760px); object-fit: cover; flex: 1; }
.family-modal-caption { padding: .8rem 1rem; color: rgba(255,255,255,.78); font-size: .75rem; background: #10110e; }
.family-modal-copy { padding: 3rem 2.5rem; overflow: auto; }
.family-modal-kicker { color: #d6b879; text-transform: uppercase; letter-spacing: .14em; font-size: .65rem; font-weight: 700; margin: 0 0 1rem; }
.family-modal-copy h2 { font-family: Georgia,serif; font-size: clamp(2.4rem,4vw,4.5rem); line-height: .95; font-weight: 400; margin: 0 0 1.4rem; }
.family-modal-copy p { color: rgba(255,255,255,.72); line-height: 1.7; margin: 0 0 1.1rem; }
.family-modal-copy strong { color: #e0c486; text-transform: uppercase; letter-spacing: .12em; font-size: .64rem; }
.family-modal-copy ul { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem 1rem; margin: 1.2rem 0 0; padding: 0; list-style: none; }
.family-modal-copy li { font-size: .8rem; color: rgba(255,255,255,.76); }
.family-modal-close { position: absolute; top: 1rem; right: 1rem; z-index: 4; width: 42px; height: 42px; border-radius: 50%; background: rgba(16,17,14,.85); color: #fff; border: 1px solid rgba(255,255,255,.25); font-size: 1.6rem; cursor: pointer; }
.family-modal-nav { position: absolute; right: 1rem; bottom: 3.5rem; display: flex; gap: .45rem; z-index: 3; }
.family-modal-nav button { width: 42px; height: 42px; border-radius: 50%; background: rgba(16,17,14,.86); color: #fff; border: 1px solid rgba(255,255,255,.25); cursor: pointer; font-size: 1.2rem; }

@media (max-width: 850px) {
  .family-modal { padding: .5rem; }
  .family-modal-panel { grid-template-columns: 1fr; max-height: calc(100vh - 1rem); }
  .family-modal-media { min-height: 0; }
  .family-modal-media img { height: 42vh; }
  .family-modal-copy { padding: 2rem 1.25rem; }
  .family-modal-copy ul { grid-template-columns: 1fr; }
}