/* Hallmark · replication / visual review · Sport/BST · N6/Ft1 preserved
 * Audience: owner/team · task: identify families and exact configurations
 * pre-emit critique: P5 H4 E4 S5 R5 V3 · existing tokens, no enrichment/motion
 */
.families-head { max-width: 64rem; }
.family-brand { margin-block: var(--space-xl); }
.family-brand > h2 { padding-block: var(--space-sm); border-bottom: 3px solid var(--color-accent); }
.family { padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); scroll-margin-top: var(--space-md); min-width: 0; }
.family:target { outline: 3px solid var(--color-accent); outline-offset: 4px; }
.family-reference { font-size: var(--text-small); color: var(--color-muted); }
.family-reference a { display: inline-flex; align-items: center; min-height: 32px; white-space: nowrap; }
.family summary { display: list-item; cursor: pointer; min-height: 44px; padding-block: var(--space-sm); overflow-wrap: anywhere; }
.family summary::marker { color: var(--color-ink); }
.family-name { font-size: var(--text-lead); margin-right: var(--space-md); }
.family-seasons { color: var(--color-muted); margin-right: var(--space-md); }
.family-count { display: inline-block; font-size: var(--text-small); white-space: nowrap; }
.family summary:hover, .family-reference a:hover { color: var(--color-ink); text-decoration: underline; }
.family summary:active { background: var(--color-surface); }
.family summary:focus-visible, .family a:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
.family-configurations { list-style: none; padding: 0; margin: var(--space-sm) 0 var(--space-lg); display: grid; grid-template-columns: minmax(0,1fr); gap: var(--space-lg); }
.family-configurations li { min-width: 0; padding: var(--space-md); background: var(--color-surface); overflow-wrap: anywhere; }
.family-configurations p { margin-bottom: var(--space-sm); }
.family-equipment { font-size: var(--text-small); }
.family-record-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; white-space: nowrap; }
@media(max-width: 768px) {
 .family-configurations { grid-template-columns: minmax(0,1fr); }
 .family-name,.family-seasons { display: block; margin: 0 0 var(--space-xs); }
}

/* Photo band: preserve row text padding; one column at every width.
 * Offsets describe visible pixel bounds in readonly originals; only white margins
 * may leave the band. Full source scale and image attributes remain unchanged.
 */
.family-configurations .family-photo {
 margin: calc(-1 * var(--space-md)) calc(-1 * var(--space-md)) var(--space-md);
 max-width: none;
 background: var(--color-photo);
 overflow: clip;
}
.family-configurations .family-photo a { display: block; width: 100%; max-width: 864px; margin-inline: auto; }
.family-configurations .family-photo img {
 display: block;
 width: 100%;
 height: auto;
 transform: translate(var(--family-photo-x, 0%), var(--family-photo-y, 0%));
}