.family-page { display:grid; gap:14px; min-width:0 }
.family-heading h1 { margin:4px 0 0; font-size:clamp(29px,7vw,47px); line-height:1.1 }
.family-bond { position:relative; isolation:isolate; overflow:hidden; color:#fff7e8; border-color:#e0bd805e }
.family-bond-large { min-height:clamp(145px,24vw,210px); padding:14px 19px; border-radius:22px }
.family-bond .marriage-person { color:#fff8ed; text-shadow:0 2px 5px #100a08; background:transparent }
.family-bond-large .marriage-person img { width:clamp(50px,9vw,78px) }
.family-bond-large .marriage-person > span { font-size:clamp(14px,3vw,21px) }
.family-bond-large .marriage-pair { align-items:center; margin:0 }
.family-bond-large .marriage-ring { margin-top:0 }
.family-bond h3 { text-shadow:0 2px 5px #100a08 }
.family-banner-pair,.family-banner-pair::after { position:absolute; inset:0; pointer-events:none }
.family-banner-pair { z-index:-1; background:#322a31 }
.family-banner-pair::after { content:""; background:linear-gradient(180deg,#17132122,#17152222 40%,#15121b9c) }
.family-banner-half { position:absolute; inset-block:0; width:58%; overflow:hidden }
.family-banner-left { left:0; mask-image:linear-gradient(105deg,#000 74%,transparent 97%) }
.family-banner-right { right:0; mask-image:linear-gradient(105deg,transparent 5%,#000 29%) }
.family-banner-half[style*="--profile-accent"] { background:var(--profile-accent) }
.family-banner-half .hero-art { position:absolute; inset:0; transform:none; animation:none; width:100%; height:100%; max-width:none;
  object-fit:cover; opacity:.9; mask-image:none }
.family-banner-left .hero-art { transform:scaleX(-1) }
.family-banner-left .profile-landscape { object-position:75% center }
.family-banner-right .profile-landscape { object-position:63% center }
.family-banner-half .rosarium-art { opacity:.94 }
.family-banner-half .rosarium-art > span { left:calc((var(--x) - 20%) * 1.25) }
.family-facts,.family-destinations { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px }
.family-facts > div,.family-destination,.family-gift,.family-pet-hero,.family-pet-stats > div {
  border:1px solid var(--line); background:var(--panel); border-radius:15px }
.family-facts > div,.family-destination { padding:12px 8px; display:grid; gap:4px; text-align:center }
.family-facts small,.family-gift small,.family-pet small,.family-receipt small { color:var(--muted) }
.family-destination { color:inherit; cursor:pointer; min-width:0; align-items:center }
.family-destination span { font-size:clamp(24px,6vw,37px) }
.family-gift { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px;
  padding:12px; background:radial-gradient(ellipse at 0% 20%,#b7834940,transparent 70%),var(--panel) }
.family-gift > span { font-size:clamp(34px,7vw,56px) }
.family-gift h2,.family-confirm p { margin:0; font-size:clamp(15px,4vw,20px) }
.family-gift-timer { margin-top:5px; font-weight:700 }
.family-divorce { justify-self:end; color:#f6b1ac }
.family-pet,.family-confirm,.family-receipt,.family-receipt header,.family-gift-animation { display:grid; gap:10px }
.family-pet-hero,.family-gift-animation,.family-receipt header { padding:16px; text-align:center; justify-items:center }
.family-pet-hero span,.family-gift-animation span,.family-receipt header span { font-size:clamp(42px,12vw,80px) }
.family-pet-stats,.family-pet-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px }
.family-pet-stats > div { padding:8px 4px; display:grid; gap:4px; text-align:center; min-width:0 }
.family-pet-stats progress { width:100%; accent-color:#a3c48e }
.family-pet-actions .btn { min-height:42px; padding:5px; font-size:clamp(11px,3vw,14px) }
.family-gift-animation,.family-receipt header { border:1px solid #dfb66b6b; border-radius:18px;
  background:radial-gradient(ellipse,#b3834848,var(--panel) 73%) }
.family-gift-animation span { animation:family-unbox 1.3s ease-in-out both }
.family-receipt ul { list-style:none; margin:0; padding:0; display:grid; gap:6px }
.family-receipt li { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:8px; padding:7px 9px;
  border:1px solid var(--line); border-radius:12px; background:var(--panel) }
@keyframes family-unbox {
  0%,100% { transform:rotate(0) scale(1) }
  20%,52% { transform:rotate(-10deg) scale(1.08) }
  37%,69% { transform:rotate(10deg) scale(1.14) }
  85% { transform:rotate(0) scale(1.25); filter:drop-shadow(0 0 18px #ffd686) }
}
@media (max-width:560px) { .family-gift > .btn { grid-column:1/-1 } }
@media (prefers-reduced-motion:reduce) { .family-gift-animation span,.family-bond .marriage-ring { animation:none } }