.family-page { min-height:100vh; display:flex; flex-direction:column; background:radial-gradient(ellipse at 80% 0,rgba(28,90,143,.18),transparent 55%),var(--navy); }
.family-page .site-nav a[aria-current="page"] { color:var(--gold); text-decoration:underline; }
.family-main { width:100%; max-width:1440px; margin:0 auto; padding:8.5rem var(--gutter) 3.5rem; flex:1; }
.family-hero { display:grid; grid-template-columns:minmax(16rem,.7fr) minmax(0,1.3fr); align-items:center; gap:clamp(2rem,4vw,4rem); }
.family-kicker { margin:0 0 1rem; color:var(--gold); font-size:.72rem; line-height:1.5; letter-spacing:.16em; text-transform:uppercase; }
.family-hero h1 { max-width:9ch; margin:0; color:var(--silver); font:400 clamp(3rem,5.7vw,5.5rem)/1.02 var(--serif); letter-spacing:-.04em; }
.family-hero-copy>p:last-child { max-width:28ch; margin:1.5rem 0 0; color:var(--steel); font:400 1.25rem/1.6 var(--serif); }
.family-portrait { min-width:0; margin:0; }
.family-portrait img { display:block; width:100%; height:auto; border-radius:.3rem; }
.family-directory { margin-top:3.5rem; padding-top:2.25rem; border-top:1px solid var(--line); display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); align-items:center; gap:clamp(2rem,5vw,5rem); }
.family-directory h2 { margin:0; color:var(--silver); font:400 clamp(2rem,3vw,3rem)/1.05 var(--serif); letter-spacing:-.025em; }
.family-intro>p:last-child { margin:1rem 0 0; color:var(--steel); font:400 1.05rem/1.6 var(--serif); }
.family-profiles { display:grid; gap:1rem; }
.family-profile { padding:1.5rem; border:1px solid var(--line); border-radius:.25rem; display:grid; grid-template-columns:4rem minmax(0,1fr) 1.35rem; align-items:center; gap:1.25rem; background:rgba(28,90,143,.1); text-decoration:none; transition:background-color .2s,border-color .2s; }
.family-profile:hover { border-color:var(--gold); background:rgba(28,90,143,.2); }
.family-monogram { width:4rem; height:4rem; border:1px solid rgba(216,182,108,.55); border-radius:50%; display:grid; place-items:center; color:var(--gold); font:400 2.4rem/1 var(--serif); }
.family-profile-copy { display:grid; gap:.6rem; }
.family-profile-copy strong { font:400 clamp(1.6rem,2.5vw,2rem)/1.1 var(--serif); }
.family-profile-copy>span { color:var(--steel); font-size:.9rem; line-height:1.5; }
.family-profile-copy .family-profile-action { margin-top:.35rem; color:var(--gold); font-size:.8rem; text-decoration:underline; text-underline-offset:.3em; }
.family-profile>svg { color:var(--gold); transition:transform .2s; }
.family-profile:hover>svg { transform:translateX(.25rem); }
.family-back { display:inline-block; margin-top:2.5rem; color:var(--steel); }
.family-page .site-footer { border-top:1px solid var(--line); padding-block:1.25rem; }
@media (min-width:901px) and (max-width:1100px) { .family-page .site-header { gap:1.25rem; } .family-page .site-nav { gap:1.25rem; } }
@media (max-width:900px) { .family-main { padding-top:7.5rem; } .family-hero { grid-template-columns:1fr; gap:2rem; } .family-hero h1 { max-width:none; } .family-hero-copy>p:last-child { max-width:36ch; margin-top:1rem; } }
@media (max-width:620px) { .family-main { padding:7rem 1.25rem 2.5rem; } .family-kicker { font-size:.65rem; } .family-hero-copy>p:last-child { font-size:1.15rem; } .family-directory { margin-top:2.5rem; padding-top:1.75rem; grid-template-columns:1fr; gap:1.5rem; } .family-profile { padding:1.25rem; grid-template-columns:3rem minmax(0,1fr) 1.2rem; gap:1rem; } .family-monogram { width:3rem; height:3rem; font-size:2rem; } }