/* The families bar: previous family, all families, next family.
   Shared by families/index.html and the seven family pages, so the bar looks
   the same everywhere. It reads the page's own tokens (--line, --line-strong, --fg,
   --muted, --surface-2) and sits inside the page's .wrap. The order wraps around, so
   every page has both a previous and a next family. */
.fam-nav{border-top:1px solid var(--line,#D8D6CE);padding-block:28px}
.fam-nav-in{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-areas:"prev all next";align-items:center;gap:16px 24px}
.fam-nav a{display:flex;align-items:center;gap:12px;min-height:64px;min-width:44px;color:var(--fg,#16150F);text-decoration:none;border-radius:16px;-webkit-tap-highlight-color:transparent}
.fam-nav .fam-nav-prev{grid-area:prev;justify-self:start;padding:6px 16px 6px 8px}
.fam-nav .fam-nav-next{grid-area:next;justify-self:end;padding:6px 8px 6px 16px;text-align:right}
.fam-nav .fam-nav-prev,.fam-nav .fam-nav-next{transition:background-color .2s}
.fam-nav .fam-nav-prev:hover,.fam-nav .fam-nav-next:hover{background:var(--surface-2,#E9E8E2)}
.fam-nav img{flex:none;display:block;width:56px;height:56px;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.fam-nav .fam-nav-prev:hover img{transform:rotate(-10deg)}
.fam-nav .fam-nav-next:hover img{transform:rotate(10deg)}
.fam-nav-arr{flex:none;font-family:var(--body,system-ui,sans-serif);font-size:1.3rem;line-height:1;color:var(--muted,#4E4C44);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.fam-nav .fam-nav-prev:hover .fam-nav-arr{transform:translateX(-3px)}
.fam-nav .fam-nav-next:hover .fam-nav-arr{transform:translateX(3px)}
.fam-nav-name{min-width:0;font-family:var(--display,'Bricolage Grotesque',system-ui,sans-serif);font-size:1.18rem;font-weight:600;line-height:1.15;letter-spacing:-.015em}
.fam-nav .fam-nav-all{grid-area:all;justify-content:center;min-height:48px;padding:0 20px;border:1px solid var(--line-strong,#BCB9AE);border-radius:999px;font-family:var(--body,system-ui,sans-serif);font-size:.96rem;font-weight:600;white-space:nowrap;transition:background-color .2s}
.fam-nav .fam-nav-all:hover{background:var(--surface-2,#E9E8E2)}
@media (max-width:620px){
  .fam-nav{padding-block:20px 24px}
  .fam-nav-in{grid-template-columns:minmax(0,1fr);grid-template-areas:"prev" "next" "all";gap:10px}
  .fam-nav .fam-nav-prev,.fam-nav .fam-nav-next{gap:12px;min-height:60px;justify-self:stretch;border:1px solid var(--line,#D8D6CE);border-radius:14px}
  .fam-nav .fam-nav-next{justify-content:flex-end}
  .fam-nav .fam-nav-prev{padding:6px 14px}
  .fam-nav .fam-nav-next{padding:6px 14px}
  .fam-nav img{width:44px;height:44px}
  .fam-nav-name{font-size:1rem}
  .fam-nav-arr{font-size:1.1rem}
  .fam-nav .fam-nav-all{justify-self:stretch}
}
@media (prefers-reduced-motion:reduce){
  .fam-nav img,.fam-nav-arr{transition:none}
}