/* Antrop family: the three directions under the Antrop Systems mark.
   Header flyout (hover/focus on the main logo), footer "divisions", hero lockups.
   Colours come from the page tokens (--ink, --dim, --faint, --line, --bg, --accent),
   so both themes work without per-theme assets: the SVG sprite paints currentColor. */

.fam-mark, .fam-lockup { display: block; fill: currentColor; flex: none; }

/* ---------- header: the hover zone wraps the home link and the panel ---------- */
.fam { position: relative; height: 64px; display: flex; align-items: center; }
.fam-panel {
  position: absolute; top: 100%; left: -14px; width: 412px; box-sizing: border-box;
  padding: 14px 14px 10px; background: var(--bg); border: 1px solid var(--line); border-top: none;
  box-shadow: 0 30px 70px -35px rgba(0,0,0,.55);
  clip-path: inset(0 -100px 100% -100px); opacity: 0; visibility: hidden; pointer-events: none;
  transition: clip-path .14s cubic-bezier(.22,1,.36,1), opacity .12s ease, visibility 0s linear .14s;
}
.fam[data-open] .fam-panel {
  clip-path: inset(0 -100px -100px -100px); opacity: 1; visibility: visible; pointer-events: auto;
  transition: clip-path .28s cubic-bezier(.22,1,.36,1), opacity .2s ease, visibility 0s;
}
.fam-head {
  display: flex; align-items: center; gap: 10px; padding: 0 2px 10px 54px;
  font-family: var(--font-m); font-size: 9px; letter-spacing: .2em; color: var(--faint);
}
.fam-head i { flex: 1; height: 1px; background: var(--line); }
/* the stem: a line dropping from the main mark, with a tick to every division */
.fam-stem {
  position: absolute; left: 27px; top: 0; bottom: 34px; width: 1px; background: var(--line);
  transform: scaleY(0); transform-origin: 50% 0; transition: transform .12s ease;
}
.fam[data-open] .fam-stem { transform: scaleY(1); transition: transform .3s cubic-bezier(.22,1,.36,1); }
.fam-row {
  position: relative; display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 14px;
  margin-left: 30px; padding: 10px 10px 10px 12px; color: var(--ink); border: 1px solid transparent;
  transition: background-color .2s ease, border-color .2s ease;
}
.fam-row::before {
  content: ''; position: absolute; left: -17px; top: 50%; width: 17px; height: 1px; background: var(--line);
  transition: background-color .2s ease;
}
.fam-row:hover, .fam-row:focus-visible { background: var(--panel); border-color: var(--line); color: var(--ink); outline: none; }
.fam-row:focus-visible { border-color: var(--accent); }
.fam-row:hover::before, .fam-row[aria-current]::before { background: var(--accent); }
.fam-row[aria-current] { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.fam-row .fam-mark { width: 30px; height: 26px; }
/* every mark leaves from the main logo and lands on its row (--fx/--fy set by antrop-family.js) */
.fam-row .fam-mark, .fam-row .fam-txt, .fam-row .fam-state {
  opacity: 0; transition: transform .12s ease, opacity .1s ease;
}
.fam-row .fam-mark { transform: translate(var(--fx, -40px), var(--fy, -40px)) scale(.55); }
.fam-row .fam-txt { transform: translateX(-10px); }
.fam[data-open] .fam-row .fam-mark, .fam[data-open] .fam-row .fam-txt, .fam[data-open] .fam-row .fam-state {
  opacity: 1; transform: none;
  transition: transform .3s cubic-bezier(.22,1,.36,1) var(--fd, 0s), opacity .2s ease var(--fd, 0s);
}
.fam[data-open] .fam-row .fam-txt, .fam[data-open] .fam-row .fam-state { transition-delay: calc(var(--fd, 0s) + .06s); }
.fam-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fam-name { font-family: var(--font-m); font-size: 11px; letter-spacing: .16em; white-space: nowrap; }
.fam-what { font-size: 13px; line-height: 1.35; color: var(--dim); }
.fam-state {
  font-family: var(--font-m); font-size: 9px; letter-spacing: .12em; padding: 4px 7px; white-space: nowrap;
  border: 1px solid var(--line); color: var(--dim);
}
.fam-state.is-live { border-color: var(--accent); color: var(--accent); }
.fam-foot {
  display: flex; justify-content: space-between; gap: 10px; margin: 8px 0 0 30px; padding: 8px 2px 0 12px;
  border-top: 1px solid var(--line); font-family: var(--font-m); font-size: 9px; letter-spacing: .16em; color: var(--faint);
}
@media (max-width: 760px), (hover: none) { .fam-panel { display: none; } }

/* ---------- footer: divisions ---------- */
.fam-units-h {
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
  font-family: var(--font-m); font-size: 10px; letter-spacing: .24em; color: var(--faint);
}
.fam-units-h i { width: 34px; height: 1px; background: var(--line); }
.fam-units-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.fam-unit {
  display: flex; flex-direction: column; gap: 12px; padding: 18px 18px 14px; box-sizing: border-box;
  border: 1px solid var(--line); color: var(--ink); background: color-mix(in srgb, var(--bg) 70%, transparent);
  transition: border-color .25s ease, transform .25s cubic-bezier(.22,1,.36,1);
}
.fam-unit:hover, .fam-unit:focus-visible { border-color: var(--accent); transform: translateY(-3px); color: var(--ink); outline: none; }
.fam-unit .fam-lockup { height: 18px; width: auto; max-width: 100%; align-self: flex-start; }
.fam-unit-what { font-family: var(--font-d); font-weight: 500; font-size: 16px; line-height: 1.25; }
.fam-unit-text { font-size: 13px; line-height: 1.55; color: var(--dim); flex: 1; }
.fam-unit-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 10px;
  border-top: 1px solid var(--line); font-family: var(--font-m); font-size: 9px; letter-spacing: .14em; color: var(--faint);
}
.fam-unit-foot b { font-weight: 400; color: var(--accent); transition: transform .25s cubic-bezier(.22,1,.36,1); }
.fam-unit:hover .fam-unit-foot b { transform: translateX(4px); }
@media (max-width: 900px) { .fam-units-grid { grid-template-columns: 1fr; } }

/* ---------- direction lockups in heroes and the home practice slides ---------- */
.fam-hero-lockup { height: clamp(20px, 1.9vw, 28px); width: auto; margin-bottom: 26px; color: var(--ink); }
.fam-slide-mark { width: clamp(40px, 4.4vw, 62px); height: auto; color: var(--dim); }
.fam-dd-mark { width: 22px; height: 19px; fill: currentColor; color: var(--dim); }

@media (prefers-reduced-motion: reduce) {
  .fam-panel, .fam[data-open] .fam-panel { clip-path: none; transition: opacity .15s ease, visibility 0s linear .15s; }
  .fam[data-open] .fam-panel { transition: opacity .15s ease, visibility 0s; }
  .fam-stem, .fam[data-open] .fam-stem { transform: none; transition: none; }
  .fam-row .fam-mark, .fam-row .fam-txt, .fam[data-open] .fam-row .fam-mark, .fam[data-open] .fam-row .fam-txt { transform: none; }
  .fam-row .fam-mark, .fam-row .fam-txt, .fam-row .fam-state,
  .fam[data-open] .fam-row .fam-mark, .fam[data-open] .fam-row .fam-txt, .fam[data-open] .fam-row .fam-state { transition: opacity .15s ease; }
  .fam-unit, .fam-unit:hover { transform: none; }
}