#tree .family-chart {
  --branch-line: #746447;
  --branch-paper: #faf6eb;
  --branch-box: #fffdf6;
  --branch-key: #ede3cd;
  --branch-border: #baac8c;
  padding: clamp(12px, 3vw, 36px);
  background: var(--branch-paper);
  border: 1px solid var(--branch-border);
}
[data-theme="dark"] #tree .family-chart {
  --branch-line: #b8a985;
  --branch-paper: #232017;
  --branch-box: #2d2a21;
  --branch-key: #3a3121;
  --branch-border: #71674e;
}
#tree .family-chart h3 {font: 400 clamp(1.55rem, 3vw, 2.3rem)/1.2 Georgia,serif; text-align: center;}
#tree .family-chart h4 {margin: 0; font-weight: 600;}
#tree .family-chart .pedigree-root,
#tree .family-chart .pedigree-joseph,
#tree .family-chart ol > li,
#tree .family-chart .benjamin-children > li,
#tree .family-chart .marriage-node,
#tree .family-chart .recent-person {
  background: var(--branch-box);
  border: 1px solid var(--branch-border);
  font: 400 clamp(.83rem, 1.7vw, 1.12rem)/1.3 Georgia,serif;
  padding: .65em .35em;
}
#tree .family-chart .pedigree-root,
#tree .family-chart .marriage-node,
#tree .family-chart li:last-child > .recent-person,
#tree .family-chart .recent-branches ul .recent-person {background: var(--branch-key);}
#tree .family-chart li > a:only-child {font-weight: 600;}
#tree .family-chart small {color: var(--muted);}
.family-chart .pedigree-branches::before, .family-chart .pedigree-branches::after,
.family-chart .pedigree-branches li + li::before, .family-chart .allison-descent li + li::before {
  border-color: var(--branch-line);
}
.family-chart .pedigree-joins path {stroke: var(--branch-line);}
.family-chart .marriage-node {margin-bottom: 13px;}
.family-chart .allison-descent {max-width: 550px;}
.family-chart .allison-descent ol {max-width: 320px; margin-inline: auto;}
.family-chart .recent-branches,
.family-chart .recent-branches ul {list-style: none; padding: 0; margin: 0;}
.family-chart .recent-branches {position: relative; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding-top: 12px;}
.family-chart .recent-branches::before,
.family-chart .recent-branches::after,
.family-chart .recent-siblings::before,
.family-chart .recent-siblings::after {content: ""; position: absolute; border-left: 1px solid var(--branch-line);}
.family-chart .recent-branches::before {left: 50%; top: -13px; height: 13px;}
.family-chart .recent-branches::after {top: 0; left: calc(25% - 3px); right: calc(25% - 3px); height: 12px; border: 1px solid var(--branch-line); border-bottom: 0;}
#tree .family-chart .recent-branches li {margin: 0; padding: 0; background: none; border: 0; font-weight: 400;}
#tree .family-chart .recent-branches li::before {content: none;}
.family-chart .recent-branches .recent-siblings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  position: relative;
  gap: 6px;
  padding-top: 24px;
}
.family-chart .recent-siblings::before {left: 50%; top: 0; height: 12px;}
.family-chart .recent-siblings::after {
  top: 12px;
  inset-inline: calc(25% - 1.5px);
  height: 12px;
  border: 1px solid var(--branch-line);
  border-bottom: 0;
}
.family-chart .recent-siblings .recent-person {height: 100%; overflow-wrap: anywhere;}
.family-chart .benjamin-branch small {display: block; margin-top: .2em;}
.family-chart .benjamin-children-link {display: block; text-align: center; font-size: .85rem;}
.family-chart .benjamin-family {
  border-top: 1px solid var(--branch-border);
  margin-top: 20px;
  padding-top: 12px;
}
.family-chart .benjamin-family > h4 {font: 400 1.22rem/1.3 Georgia, serif; margin-bottom: 10px;}
.family-chart .benjamin-family .benjamin-children {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) repeat(2, minmax(0, 1fr));
  gap: 10px;
  text-align: left;
}
#tree .family-chart .benjamin-children > li {
  padding: 12px;
  font: .88rem/1.45 var(--sans);
  overflow-wrap: anywhere;
}
.family-chart .benjamin-family h5 {font: 600 1.05rem/1.25 Georgia, serif; margin: 0 0 6px;}
.family-chart .benjamin-family p {margin: 0 0 6px;}
.family-chart .benjamin-family p:last-child {margin-bottom: 0;}
.family-chart .child-dates, .family-chart .child-records span {color: var(--muted);}
.family-chart .child-records {list-style: none; margin: 8px 0 0; padding: 0;}
.family-chart .marriage-context {border-top: 1px solid var(--branch-border); margin-top: 20px; padding-top: 12px;}
.family-chart .pedigree-sources, .family-chart figcaption {color: var(--muted);}
@media(max-width:540px) {
  #tree .family-chart .pedigree-branches {gap: 5px;}
  #tree .family-chart .pedigree-branches li, #tree .family-chart .pedigree-joseph {font-size: .79rem; padding: .45em .2em;}
  .family-chart .benjamin-family .benjamin-children {grid-template-columns: minmax(0, 1fr);}
  .family-chart .pedigree-branches h4 {font-size: .7rem;}
}