/* The Family — comment overlay. Text and photo controls remain vintage and legible. */
.family-page .family-arch h1{
  text-shadow:0 2px 0 #7b4d21,0 4px 1px #4b2a12,0 7px 9px #170b04,0 10px 16px #100802;
  filter:drop-shadow(0 2px 5px #1b0c03);
}
body.family-dialog-open{overflow:hidden}
.family-photo-overlay[hidden]{display:none}
.family-photo-overlay{position:fixed;inset:0;z-index:500;background:rgba(18,9,4,.87);display:flex;align-items:center;justify-content:center;padding:16px;overflow-y:auto;overscroll-behavior:contain;backdrop-filter:blur(5px)}
.family-photo-dialog{background:linear-gradient(150deg,#f5e8cc,#dfcaa7);color:#3a2516;border:9px solid #947048;outline:2px solid #e6c18b;box-shadow:0 20px 100px #080402;width:min(780px,95vw);max-height:calc(100vh - 32px);overflow:auto;scrollbar-color:#8e6848 #e8d6b8;font:16px/1.5 Georgia,serif}
.family-dialog-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:17px 22px 12px;border-bottom:1px solid #b49874}
.family-dialog-kicker{font:700 .63rem system-ui,sans-serif;letter-spacing:.18em;color:#815f3c}
.family-dialog-top h2{font:normal clamp(1.55rem,4vw,2.4rem) Georgia,serif;margin:3px 0;color:#4b3020}
.family-dialog-close{font:normal 2.1rem/1 Georgia,serif;color:#4b3020;border:1px solid #bca17c;background:#f0e2c9;cursor:pointer;width:45px;height:45px;flex-shrink:0}
.family-dialog-close:hover{background:#e1c596}
.family-dialog-photo{background:#27170d;display:flex;justify-content:center;align-items:center;max-height:50vh;min-height:180px;overflow:hidden;padding:10px}
.family-dialog-photo img{max-width:100%;max-height:48vh;object-fit:contain;display:block}
.family-dialog-caption{text-align:center;color:#6d4b2e;font:italic 1rem Georgia,serif;padding:8px 12px 5px}
.family-comments-wrap{padding:14px clamp(16px,4vw,36px) 28px}
.family-comment-intro h3,.family-comment-form h3{font:normal 1.5rem Georgia,serif;color:#56341d;margin:3px 0 5px}
.family-comment-intro p{margin:0 0 14px;color:#69503a}
.family-comment-list{margin:0 0 16px;max-height:260px;overflow:auto;padding-right:6px}
.family-comment,.family-empty-comments{background:rgba(255,255,255,.4);border:1px solid #d3b891;padding:12px 15px;margin:9px 0;color:#4a3423}
.family-comment-header{display:flex;justify-content:space-between;gap:12px;align-items:center}
.family-comment-header time{font-size:.79rem;color:#866b4e}
.family-comment p{white-space:pre-wrap;overflow-wrap:anywhere;margin:5px 0 0}
.family-comment-form{border-top:1px solid #bba17c;padding-top:12px}
.family-comment-form label{display:block;font-weight:600;color:#52361e;margin:12px 0 5px}
.family-comment-form input,.family-comment-form textarea{display:block;width:100%;box-sizing:border-box;background:#fffbf1;color:#352113;border:1px solid #a88c66;border-radius:3px;padding:10px 12px;font:1rem Georgia,serif}
.family-comment-form input:focus-visible,.family-comment-form textarea:focus-visible{outline:3px solid #a87935;outline-offset:2px}
.family-comment-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:13px 0 0}
.family-comment-feedback{color:#5c432c;margin:0;max-width:64%;font-size:.9rem}
.family-comment-actions button{background:linear-gradient(180deg,#614029,#3b2417);border:1px solid #9e7a4b;color:#fff0d7;font:700 .9rem Georgia,serif;padding:10px 18px;white-space:nowrap;cursor:pointer}
.family-comment-actions button:disabled{opacity:.45;cursor:not-allowed}
.family-honeypot{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
@media(max-width:650px){.family-photo-overlay{padding:5px}.family-photo-dialog{max-height:calc(100vh - 10px);width:100%;border-width:5px}.family-comments-wrap{padding:12px 13px 22px}.family-dialog-top{padding:13px}.family-dialog-photo img{max-height:36vh}.family-comment-actions{flex-direction:column;align-items:stretch}.family-comment-feedback{max-width:100%}}