﻿/* Portrait-led couple cards with a velvet cover and an ivory family insert. */
.family-grid{gap:34px;align-items:start}
.family-card{position:relative;overflow:hidden;padding:0;border:1px solid #b99451;border-radius:18px;outline:none;background:linear-gradient(145deg,#571c30,#2d0d1d 75%);color:#fae8be;box-shadow:0 18px 50px #10040b55,inset 0 1px 0 #f1d99b33}
.family-card:before{inset:8px;border:1px solid #b9945133;border-radius:12px;background:none;height:auto;opacity:1;pointer-events:none;z-index:1}
.family-card:after{content:'';position:absolute;top:60px;right:-92px;width:215px;height:215px;background:url('../images/alpana-medallion.svg') center/contain no-repeat;opacity:.12;pointer-events:none}
.family-cover{position:relative;padding:26px 30px 0;isolation:isolate}
.family-card p.family-role{display:table;position:relative;margin:0 auto 25px;padding:7px 23px;border:1px solid #d6b66f66;border-radius:100px;background:#d6b66f0c;font:19px/1.6 var(--body-font);color:#edce91;letter-spacing:.4px}
.family-portrait-frame{position:relative;width:min(100%,265px);margin:0 auto;padding:8px;border:1px solid #d7b66b;border-radius:145px 145px 11px 11px;background:linear-gradient(145deg,#d8b96c3d,#32101f);box-shadow:0 0 0 4px #d6b66f08,0 0 0 5px #d6b66f33,0 17px 28px #16050d66}
.family-card .family-portrait-frame .portrait{display:block;width:100%;height:auto;aspect-ratio:4/5;max-width:none;object-fit:cover;object-position:center;border-radius:136px 136px 5px 5px;border:0;padding:0;background:#e0cba4;box-shadow:none}
.portrait-jewel{position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);width:45px;height:45px;border:1px solid #d6b66f;border-radius:50%;background:#411427 url('../images/alpana-medallion.svg') center/39px no-repeat;box-shadow:0 3px 12px #13060c88;pointer-events:none}
.family-card h3{font:400 43px/1.55 var(--display-font);color:#fae2a7;text-shadow:0 2px 15px #e2af601a;margin:35px 0 0;overflow-wrap:anywhere}
.family-card h3 small{font:italic 32px/1.5 var(--english-font);color:#dabb82;margin-top:5px}
.family-flourish{display:block;height:43px;width:130px;margin:16px auto 24px;background:url('../images/alpana-border.svg') center/130px 43px no-repeat;opacity:.8}
.family-details{position:relative;margin:0 20px 20px;padding:6px 22px;border:1px solid #e9d19c;border-radius:10px;background:linear-gradient(135deg,#fff5de,#f1e0bd);color:#522532;box-shadow:0 8px 18px #19060f33}
.family-card .family-details p{padding:19px 0;margin:0;font:20px/1.85 var(--body-font);border:0;overflow-wrap:anywhere}
.family-card .family-details p+p{border-top:1px solid #b8935344}
.family-card .family-details .field-label{font:15px/1.8 var(--body-font);color:#8a612e;margin-bottom:6px;letter-spacing:0}
.family-card .family-details small{font:23px/1.5 var(--english-font);color:#78533d;margin-top:4px;white-space:normal}
@media(max-width:760px){
 .family-grid{gap:30px;margin-top:26px}
 .family-card{padding:0;border-radius:16px;outline:none;box-shadow:0 14px 32px #13050e66}
 .family-card:before{inset:6px;border-radius:11px;height:auto;background:none}
 .family-card:after{width:180px;height:180px;right:-96px;top:65px;opacity:.14}
 .family-cover{padding:22px 21px 0}
 .family-card p.family-role{font-size:17px;line-height:1.6;padding:6px 22px;margin:0 auto 21px;border-bottom:1px solid #d6b66f66}
 .family-portrait-frame{width:84%;max-width:245px;padding:6px;border-radius:135px 135px 10px 10px}
 .family-card .family-portrait-frame .portrait{border-radius:130px 130px 5px 5px;aspect-ratio:4/5}
 .portrait-jewel{width:39px;height:39px;bottom:-18px;background-size:33px}
 .family-card h3{font-size:clamp(32px,9.5vw,43px);line-height:1.6;margin:30px 0 0}
 .family-card h3 small{font-size:29px;line-height:1.45;margin-top:3px}
 .family-flourish{height:35px;width:110px;background-size:110px 35px;margin:15px auto 20px}
 .family-details{margin:0 16px 17px;padding:4px 18px;border-radius:9px}
 .family-card .family-details p{font-size:20px;line-height:1.9;padding:17px 0;margin:0;border:0}
 .family-card .family-details p+p{border-top:1px solid #b8935344}
 .family-card .family-details .field-label{font-size:15px;line-height:1.75;margin-bottom:5px}
 .family-card .family-details small{font-size:23px;line-height:1.5}
}
@media(max-width:360px){.family-cover{padding:20px 18px 0}.family-card p.family-role{font-size:16px}.family-portrait-frame{width:86%}.family-card h3{font-size:32px}.family-card h3 small{font-size:27px}.family-details{margin:0 14px 15px;padding:3px 15px}}
