/* Family photos and annotations share the source-image coordinate system. */
.family-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) 208px;gap:18px;align-items:stretch}
.home-parts .section-heading{align-items:end;gap:5%}
.home-parts .section-heading>div{flex:1;min-width:0}
.home-parts .section-heading h2{max-width:520px}
.home-parts .section-heading>p{flex:1;max-width:560px;font-size:15px;line-height:1.65}
.family-card{min-width:0;display:flex;flex-direction:column;border:1px solid var(--line);background:#fff}
.family-photo{position:relative;aspect-ratio:3/2;background:#dedfdc;overflow:hidden}
.family-photo-stage{height:100%;aspect-ratio:3/2;position:relative;margin:auto}
.family-image{display:block;width:100%;height:100%;object-fit:cover}
.family-copy{display:flex;flex-direction:column;flex:1;padding:12px 14px 0;min-width:0}
.family-body{position:relative}
.family-copy h3{font-size:22px;line-height:1.2;letter-spacing:-.035em}
.family-copy h3>a{display:flex;align-items:center;min-height:44px;text-decoration:none}
.family-copy h3>a:hover{text-decoration:underline;text-underline-offset:4px}
.family-tags{list-style:none;display:flex;flex-wrap:wrap;gap:5px;margin:9px 0 16px;padding:0}
.family-tags li{max-width:100%}
.family-feature{display:flex;align-items:center;gap:5px;max-width:100%;min-width:44px;min-height:44px;padding:6px;font:inherit;font-size:11px;line-height:1.4;text-align:left;background:#f1f3ef;border:1px solid var(--line);color:var(--ink);cursor:pointer}
.family-feature-number{flex:none;display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--ink);color:#fff;font-size:10px}
.family-feature:is(:hover,:focus){background:#e2e6df;border-color:var(--ink)}
.family-links{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 12px;border-top:1px solid var(--line);margin-top:auto}
.family-links a,.family-drawing-link{display:flex;align-items:center;min-height:48px;font-size:12px;font-weight:600;text-decoration:underline;text-underline-offset:4px}
.family-links a:last-child{color:var(--accent-dark)}
.family-typical{font-size:12px;line-height:1.55;margin:0 0 12px;color:var(--muted)}
.family-action{border:1px solid var(--accent);display:flex;flex-direction:column;gap:16px;padding:26px 20px 14px;min-width:0;background:#fff}
.family-action h3{font-size:26px;line-height:1.17;letter-spacing:-.035em}
.family-action p{font-size:14px;line-height:1.6;margin-top:20px}
.family-action .family-scope{font-size:12px;color:var(--muted);margin-top:16px}
.family-action-footer{margin-top:auto}
.family-action .family-drawing-note{font-size:10px;line-height:1.6;color:var(--muted);margin:0 0 8px}
.family-drawing-link.button{width:100%;padding:10px 8px;min-height:48px;justify-content:center;background:var(--accent);color:#fff;font-size:12px;text-decoration:none;border:1px solid var(--accent)}
.family-drawing-link.button:hover{background:var(--accent-dark);border-color:var(--accent-dark)}
.family-pin{--family-pin-size:18px;--family-pin-active:0;position:absolute;transform:translate(-50%,-50%);width:calc(var(--family-pin-size) + var(--family-pin-active)*6px);height:calc(var(--family-pin-size) + var(--family-pin-active)*6px);display:grid;place-items:center;border:1px solid #fff;border-radius:50%;background:var(--ink);color:#fff;font-size:calc(10px + var(--family-pin-active)*2px);font-weight:600;pointer-events:none;opacity:1;z-index:calc(1 + var(--family-pin-active));box-shadow:0 1px 3px #0004}
.family-card:hover .family-pin,.family-card:focus-within .family-pin{--family-pin-size:23px;box-shadow:0 1px 5px #0008}
.family-card:has(.family-feature:is(:hover,:focus)) .family-pin{--family-pin-size:18px;opacity:calc(.6 + var(--family-pin-active)*.4);border-width:calc(1px + var(--family-pin-active)*1px)}
.home-parts :is(a,button):focus-visible{outline:2px solid var(--accent-dark);outline-offset:3px}
@media(min-width:601px) and (prefers-reduced-motion:no-preference){.family-pin{transition:width .15s ease,height .15s ease,opacity .15s ease}}
@media(min-width:601px){.home-parts .section-heading h2{font-size:42px;line-height:1.1;max-width:none}}
@media(min-width:1101px){.family-action>div:first-child{max-width:150px}}
@media(min-width:1280px){.home-parts .section-heading{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:32px}.home-parts .section-heading h2{white-space:nowrap}}
@media(max-width:1100px) and (min-width:601px){.family-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.family-action{padding:30px}.family-action h3{max-width:250px}}
@media(max-width:600px){
 .home-parts .section-heading{display:block}.home-parts .section-heading>p{font-size:14px;margin-top:18px}
 .family-grid{grid-template-columns:minmax(0,1fr);gap:12px}
 .family-card{display:grid;grid-template-columns:104px minmax(0,1fr);align-items:start}
 .family-photo{width:104px;align-self:center;overflow:hidden}
 .family-copy{display:contents}
 .family-body{grid-column:2;grid-row:1;padding:9px 12px 0;min-width:0}
 .family-copy h3{font-size:19px;line-height:1.2}
 .family-tags{margin:5px 0 10px;gap:4px}
 .family-feature{font-size:11px}
 .family-links{grid-column:1/-1;grid-row:2;display:flex;flex-direction:row;gap:0 12px;margin:0 12px}
 .family-links a{min-height:44px;font-size:12px}
 .family-action{padding:20px 18px 8px;gap:18px}
 .family-action h3{font-size:24px;max-width:270px}
 .family-action p{margin-top:14px}.family-action .family-scope{margin-top:14px}
 /* In a 104px photo, nearby pins overlap. Reveal just the touched/focused label's point. */
 .family-pin{opacity:0}
 .family-card:has(.family-feature:is(:hover,:focus)) .family-pin{width:18px;height:18px;font-size:10px;opacity:var(--family-pin-active)}
}