/* =========================================================
   The Ape Society family tree. Builds on ../style.css (tokens, header, buttons, footer)
   and ../gallery/gallery.css (tabs, popup buttons).
   The other layouts it was chosen from live in lab/family-versions/.
   ========================================================= */

.fm-app { min-height: 50vh; }
.fm .cls-icon, .fm-dlg .cls-icon { display: block; flex: none; width: auto; }
.fm-crest { display: block; flex: none; object-fit: contain; }
.fm-crest-sm { display: block; flex: none; width: auto; object-fit: contain; }
.fm-crest-anim video { display: block; width: 100%; height: auto; }

/* ---------- the pyramid ---------- */
.py { position: relative; margin: 0 auto; max-width: 1180px; padding-bottom: 6px; }
.py-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.py-poly { fill: rgba(201, 164, 92, .035); stroke: var(--rule-2); stroke-width: 1.5; stroke-linejoin: round; transition: fill .3s var(--ease), stroke .3s var(--ease); }
.py-poly.is-lit { fill: rgba(201, 164, 92, .08); stroke: var(--gold); }
.py-crown { position: absolute; width: 40px; height: auto; transform: translate(-50%, -50%); opacity: .9; pointer-events: none; }
.py-crown.is-small { width: 26px; }
.py-bands { position: static; list-style: none; margin: 0; padding: 0; }
.py-band { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px 0; min-height: 72px; }
.py-items { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 4px; }
.py-label { margin: 0 0 8px; text-align: center; font: 400 15px/1.2 var(--serif); color: var(--gold-l); }
.py-label-name { display: block; }
.py-label-n { display: block; margin-top: 4px; font: 400 11.5px/1.3 var(--sans); color: var(--ink-3); }
.py.is-wide .py-label { position: absolute; margin: 0; transform: translateY(-50%); text-align: right; white-space: nowrap; font-size: clamp(18px, 1.7vw, 22px); }
.py.is-wide .py-label-n { font-size: 12px; }

.py-items { gap: 8px 4px; }
.py-crest {
  display: flex; flex-direction: column; align-items: center; gap: 5px; width: 76px; padding: 2px; background: none; border: 0;
  color: var(--ink-2); font: 400 12.5px/1.2 var(--sans); cursor: pointer; transition: color .2s var(--ease), transform .3s var(--ease);
}
.py-crest .fm-crest { width: 46px; height: auto; transition: transform .3s var(--ease); }
.py-crest:hover { color: var(--gold-l); }
.py-crest:hover .fm-crest { transform: translateY(-3px); }
.py-crest-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.py-crest:focus-visible, .fm-d-kin button:focus-visible { outline: 1px solid var(--gold-l); outline-offset: 2px; }

@media (prefers-reduced-motion: no-preference) {
  .py.is-in .py-band { animation: fm-rise .6s var(--ease) both; }
  .py.is-in .py-band:nth-child(2) { animation-delay: .05s; }
  .py.is-in .py-band:nth-child(3) { animation-delay: .1s; }
  .py.is-in .py-band:nth-child(4) { animation-delay: .15s; }
  .py.is-in .py-band:nth-child(5) { animation-delay: .2s; }
  .py.is-in .py-band:nth-child(6) { animation-delay: .25s; }
  .py.is-in .py-band:nth-child(7) { animation-delay: .3s; }
}
@keyframes fm-rise { from { opacity: 0; } }

/* ---------- the family popup ---------- */
.fm-dlg {
  width: min(760px, calc(100% - 32px)); max-height: calc(100% - 32px); padding: 0;
  border: 1px solid var(--rule-2); background: var(--bg-2); color: var(--ink); overflow-y: auto; overscroll-behavior: contain;
}
.fm-dlg::backdrop { background: rgba(4, 4, 3, .8); }
.fm-dlg .ap-top { justify-content: space-between; padding: 12px 12px 0; }
.fm-d { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: clamp(20px, 3vw, 36px); padding: 4px clamp(20px, 4vw, 36px) clamp(24px, 4vw, 34px); }
.fm-d-crest { display: flex; justify-content: center; align-items: flex-start; }
.fm-d-crest img.fm-crest { height: auto; }
.fm-d-name { margin: 0; font: 400 clamp(30px, 3.4vw, 42px)/1.1 var(--serif); }
.fm-d-class { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; font: 500 11.5px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.fm-d-class .cls-icon { height: 22px; }
.fm-d-king {
  display: flex; align-items: center; gap: 16px; margin-top: 22px; padding: 12px; color: var(--ink);
  background: radial-gradient(120% 140% at 0% 0%, rgba(201, 164, 92, .16), rgba(201, 164, 92, .03)); border: 1px solid var(--gold);
  transition: background-color .25s var(--ease);
}
.fm-d-king:hover { background-color: rgba(201, 164, 92, .08); }
.fm-d-king-img { flex: none; width: 76px; height: 76px; object-fit: cover; box-shadow: 0 0 0 1px var(--gold); }
.fm-d-king-k { display: flex; align-items: center; gap: 8px; font: 400 12.5px/1.3 "Classica Pro", var(--serif); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-l); }
.fm-d-king-k img { width: 22px; height: auto; }
.fm-d-king-name { display: block; margin-top: 6px; font: 400 22px/1.15 var(--serif); }
.fm-d-h { margin: 24px 0 10px; font: 400 14px/1.3 var(--sans); color: var(--ink-2); }
.fm-d-apes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.fm-d-apes a { display: block; color: var(--ink-2); font-size: 11.5px; line-height: 1.3; }
.fm-d-apes img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: var(--bg); border: 1px solid var(--rule); transition: border-color .2s var(--ease); }
.fm-d-apes a:hover img { border-color: var(--gold); }
.fm-d-apes span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.fm-d-more { margin: 20px 0 0; }
.fm-d-kin { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--rule); }
.fm-d-kin h3 { margin: 0 0 10px; font: 400 14px/1.3 var(--sans); color: var(--ink-2); }
.fm-d-kin ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.fm-d-kin button {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px 0 8px; background: transparent; color: var(--ink);
  border: 1px solid var(--rule); border-radius: 17px; font: 400 13px/1 var(--sans); cursor: pointer; transition: border-color .2s var(--ease);
}
.fm-d-kin button:hover { border-color: var(--gold); }
.fm-d-kin button[aria-current="true"] { border-color: var(--gold); background: rgba(201, 164, 92, .14); }
.fm-d-kin .fm-crest-sm { height: 24px; }
@media (prefers-reduced-motion: no-preference) {
  .fm-dlg[open] { animation: fm-rise .28s var(--ease); }
  .fm-dlg[open]::backdrop { animation: fm-rise .28s var(--ease); }
}

/* ---------- responsive ---------- */
@media (max-width: 600px) {
  .py-band { padding: 12px 0; min-height: 0; }
  .py-crest { width: 62px; font-size: 11px; }
  .py-crest .fm-crest { width: 44px; }
  .py-items { gap: 8px 2px; }
  .fm-d { grid-template-columns: 1fr; }
  .fm-d-crest .fm-crest { width: 120px !important; }
  .fm-d-apes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fm-d-king-img { width: 60px; height: 60px; }
  .fm-d-king-name { font-size: 19px; }
}