/* The family page (/us/family/, family.js) on top of story.css. Every rule sits under .x-family. Marks in the grid are
   told apart by shape plus a word, never by colour. House tokens only: ink #111827, greys #374151 #6B7280 #9CA3AF #E7E1D6,
   accent #0F766E, paper #FBF8F2. */
.x-family{border-top:0}
.x-family .x-hero{max-width:1120px;padding:24px 24px 12px}.x-family .x-hero .x-dek{max-width:38em}
.x-family .x-hero h1{font:700 44px/1.1 Inter,system-ui,sans-serif;letter-spacing:-.015em;margin:10px 0 12px;text-wrap:balance}
.x-family .x-hero .x-label{font:italic 400 15px/1.5 Inter,system-ui,sans-serif;color:var(--x-g5);margin:0 0 10px}
.x-family .x-picker{max-width:1120px;margin:8px auto 0;padding:0 24px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.x-family .x-pick{display:grid;grid-template-rows:200px auto;justify-items:center;text-align:center;text-decoration:none;color:inherit;background:#fff;border:1px solid #E7E1D6;border-radius:14px;padding:14px 10px}
.x-family .x-pick img{height:190px;width:auto}
.x-family .x-pick b{font:700 17px/1.3 Inter,system-ui,sans-serif;display:block;margin-top:6px;color:var(--x-ink)}
.x-family .x-pick span{font:400 14px/1.35 Inter,system-ui,sans-serif;color:var(--x-g7)}
.x-family .x-pick:hover b{text-decoration:underline}
.x-family .x-pick:focus-visible{outline:3px solid var(--x-acc);outline-offset:3px}
.x-family .x-chap{max-width:1120px;margin:48px auto 0;padding:24px 24px 0;border-top:2px solid var(--x-ink);display:flex;gap:16px;align-items:center;scroll-margin-top:72px}
.x-family .x-chap img{height:72px;width:auto}
.x-family .x-chap h2{font:700 36px/1.15 Inter,system-ui,sans-serif;margin:4px 0 0;text-wrap:balance}
.x-family .x-step{scroll-margin-top:72px}
.x-family .x-chap + .x-step{border-top:0;padding-top:32px}
/* the grid */
.x-family .x-fgrid{margin-top:4px}
.x-family .x-fsvg .x-fl{font:600 13px Inter,system-ui,sans-serif;fill:var(--x-ink)}
.x-family .x-fsvg .x-ft{font:400 12px Inter,system-ui,sans-serif;fill:var(--x-g7)}
.x-family .x-flegend{list-style:none;padding:0;margin:0 0 12px;display:flex;flex-wrap:wrap;gap:8px 18px;font:400 13px Inter,system-ui,sans-serif;color:var(--x-g7)}
.x-family .x-mk{display:inline-block;width:14px;height:14px;margin-right:6px;vertical-align:-2px;box-sizing:border-box}
.x-family .x-mk-see{background:var(--x-ink)}
.x-family .x-mk-paper{border:2px solid var(--x-ink);background:#fff}
.x-family .x-mk-partly{border:2px solid var(--x-ink);background:linear-gradient(135deg,#fff 50%,var(--x-ink) 50%)}
.x-family .x-mk-other{border:2px dashed var(--x-ink);background:linear-gradient(135deg,#fff 50%,var(--x-ink) 50%)}
.x-family .x-mk-none{width:6px;height:6px;border-radius:50%;background:#9CA3AF;margin:0 10px 0 4px;vertical-align:1px}
/* the table holds the facts for screen readers on every screen; it shows in print */
.x-family .x-ftw{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.x-family .x-ftable{border-collapse:collapse;width:100%;font:400 13px/1.4 Inter,system-ui,sans-serif}
.x-family .x-ftable caption{text-align:left;font-weight:600;padding-bottom:6px}
.x-family .x-ftable th,.x-family .x-ftable td{border-bottom:1px solid #E7E1D6;padding:4px 6px;text-align:left;vertical-align:top}
.x-family .x-fnotes{font:400 13px/1.5 Inter,system-ui,sans-serif;padding-left:18px;color:var(--x-g7)}
.x-family .x-fcards{display:none}
.x-family .x-fcard{border-top:1px solid #E7E1D6;padding:10px 0}
.x-family .x-fcard b{font:700 16px Inter,system-ui,sans-serif}
.x-family .x-fcard dl{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:8px 0 0;font:400 15px/1.35 Inter,system-ui,sans-serif}
.x-family .x-fcard dt{color:var(--x-g5)}.x-family .x-fcard dd{margin:0}
.x-family .x-fcard p{font:400 14px/1.5 Inter,system-ui,sans-serif;color:var(--x-g7);margin:8px 0 0}
@media (max-width:820px){
 .x-family .x-hero h1{font-size:32px}
 .x-family .x-picker{grid-template-columns:repeat(2,1fr);padding:0 16px;gap:12px}
 .x-family .x-pick{grid-template-rows:150px auto}.x-family .x-pick img{height:140px}
 .x-family .x-chap{padding:18px 16px 0;margin-top:32px}.x-family .x-chap h2{font-size:28px}.x-family .x-chap img{height:60px}
 .x-family .x-fsvg,.x-family .x-flegend{display:none}
 .x-family .x-fcards{display:block}
}
@media print{
 .x-family .x-picker,.x-family .x-skip{display:none}
 .x-family .x-fsvg,.x-family .x-flegend,.x-family .x-fcards{display:none!important}
 .x-family .x-ftw{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal}
 .x-family .x-chap{break-after:avoid;margin-top:20px}
}
/* the grid gets the full step width on desktop, so its words print at their own size */
.x-family #story-a1 .x-data{max-width:1072px}
.x-family .x-fus{max-width:1120px;margin:0 auto 10px;padding:0 24px;display:flex;align-items:center;gap:10px;font:500 14px Inter,system-ui,sans-serif;color:var(--x-g7)}
.x-family .x-fusb{position:relative;width:96px;height:8px;background:#E7E1D6;border-radius:4px;overflow:hidden}.x-family .x-fusb span{position:absolute;left:0;top:0;bottom:0;border-radius:4px}
.x-family .x-fus b{color:var(--x-ink);font-size:16px}
@media (max-width:820px){.x-family .x-fus{padding:0 16px}}