.ancestor-page {
  --ancestor-panel: #161f1d;
  --ancestor-art: #151714;
  --accent-rule: #8b744c;
  --card-gap: clamp(.9rem, 2.1vw, 1.65rem);
  overflow-wrap: break-word;
}
.ancestor-page button { font: inherit; }
.ancestor-page button:focus-visible { outline: 3px solid #fff0bd; outline-offset: 4px; }
.ancestor-page .primary-nav a[aria-current="page"] {
  color: var(--brass);
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.ancestor-intro {
  border-bottom: 1px solid var(--rule);
  background: radial-gradient(ellipse at 10% 5%, #292b20, var(--deep) 70%);
}
.intro-inner {
  display: flex;
  justify-content: space-between;
  align-items: end;
  flex-wrap: wrap;
  gap: .65rem 1.5rem;
  padding-block: clamp(2.25rem, 5.3vw, 4.5rem) clamp(1.85rem, 4vw, 3.4rem);
}
.ancestor-intro h1 {
  margin-top: .65rem;
  font-size: clamp(2.85rem, 7vw, 6rem);
  line-height: 1;
  letter-spacing: -.052em;
}
.ancestor-intro .section-lede { max-width: 43rem; }
.intro-inner > .text-link { flex-shrink: 0; }

.family-section { padding-block: clamp(2rem, 4.5vw, 3.65rem); }
.tier-header, .line-intro {
  display: flex;
  justify-content: space-between;
  align-items: end;
  flex-wrap: wrap;
  gap: .55rem 1.5rem;
  margin-bottom: 1.35rem;
}
.tier-header h2, .line-intro h2 { margin-top: .5rem; }
.tier-header > p, .line-intro > p { max-width: 38rem; color: var(--muted); }
.generation-number {
  display: inline-block;
  margin-right: .7rem;
  border: 1px solid var(--accent-rule);
  padding: .2rem .38rem;
  color: var(--brass);
  font-variant-numeric: tabular-nums;
}

.card-grid {
  display: grid;
  grid-auto-rows: 1fr;
  gap: var(--card-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.four-up { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card-grid > li { display: flex; min-width: 0; }
.ancestor-card {
  display: grid;
  grid-template-rows: auto 1fr;
  width: 100%;
  padding: 0;
  border: 1px solid var(--rule);
  background: var(--ancestor-panel);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.ancestor-card:hover { border-color: var(--brass); background: #222c26; }
.card-art {
  display: grid;
  min-height: 8.75rem;
  place-items: center;
  padding: .7rem 1rem;
  background: radial-gradient(ellipse at 50% 54%, #2a2920, var(--ancestor-art) 68%);
  border-bottom: 1px solid var(--rule);
}
.card-art img {
  width: 7.15rem;
  height: 7.15rem;
  object-fit: contain;
}
.card-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: center;
  align-items: end;
  gap: .35rem .55rem;
  padding: .85rem 1rem 1rem;
}
.card-label {
  grid-column: 1 / -1;
  color: var(--brass);
  font-size: .73rem;
  line-height: 1.4;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.card-name { color: var(--paper); font: 400 clamp(1.35rem, 2.25vw, 1.9rem)/1.16 var(--serif); }
.card-arrow { color: var(--brass); line-height: 1.2; }

.parents-section {
  border-block: 1px solid var(--rule);
  background: radial-gradient(ellipse at 50% 0, #2a2d24, var(--deep) 75%);
  padding-block: clamp(2rem, 4.5vw, 3.7rem);
}
.spotlight-grid { grid-template-columns: repeat(2, minmax(0, 22rem)); justify-content: center; }
.spotlight-grid .ancestor-card { border-color: var(--accent-rule); }
.spotlight-grid .ancestor-card:hover { border-color: var(--brass); }
.spotlight-grid .card-art { min-height: 10.4rem; }
.spotlight-grid .card-art img { width: 8.8rem; height: 8.8rem; }
.spotlight-grid .card-copy { padding: 1rem 1.15rem 1.2rem; align-content: start; }
.spotlight-grid .card-name { font-size: clamp(1.55rem, 2.55vw, 2rem); }

.line-section { padding-block: clamp(2.6rem, 5.5vw, 4.7rem); }
.line-intro { margin-bottom: 2rem; }
.line-headings {
  display: grid;
  gap: var(--card-gap);
  padding-block: .7rem .85rem;
  border-block: 1px solid var(--rule);
  color: var(--brass);
  font: 400 clamp(1.15rem, 2.3vw, 1.6rem)/1.2 var(--serif);
  text-align: center;
}
.generation-row { margin-top: 1.4rem; }
.generation-row + .generation-row { margin-top: 1.9rem; }
.generation-header { display: flex; align-items: baseline; flex-wrap: wrap; gap: .35rem .8rem; margin-bottom: .85rem; }
.generation-header h3 { font-size: clamp(1.35rem, 2.25vw, 1.8rem); }
.line-cards .card-art img { width: 6.35rem; height: 6.35rem; }
.line-cards .card-art { min-height: 7.8rem; }
.line-cards .card-name { font-size: clamp(1.2rem, 2vw, 1.56rem); }
.script-note { margin-bottom: 2rem; color: var(--muted); }

.ancestor-dialog {
  color: var(--ink);
  background: var(--ancestor-panel);
  border: 1px solid var(--accent-rule);
  padding: 0;
  width: min(39rem, calc(100% - 1.5rem));
  max-height: calc(100dvh - 1.5rem);
  overflow: auto;
}
.ancestor-dialog::backdrop { background: #080b0bd9; }
.dialog-bar {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .65rem;
  padding: .55rem clamp(.85rem, 3vw, 1.45rem);
  background: var(--deep);
  border-bottom: 1px solid var(--rule);
}
.close-profile {
  min-height: 2.75rem;
  padding: .3rem .65rem;
  color: var(--paper);
  background: var(--ancestor-panel);
  border: 1px solid var(--accent-rule);
  cursor: pointer;
}
.close-profile:hover, .profile-link:hover { color: var(--brass); }
.close-profile span { margin-left: .25rem; }
.dialog-body { padding: clamp(.85rem, 3vw, 1.45rem); }
.profile-intro { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(.75rem, 3vw, 1.25rem); }
.profile-intro img { width: clamp(4rem, 18vw, 8rem); height: auto; }
.profile-intro h2 { font-size: clamp(1.7rem, 5vw, 3rem); margin: .3rem 0 .4rem; scroll-margin-top: 5rem; }
.profile-intro h2:focus-visible { outline: 2px solid var(--brass); outline-offset: 4px; }
.image-credit { color: var(--muted); font-size: .83rem; }
.profile-section { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.profile-section h3 { margin-bottom: .3rem; }
.profile-section p + p { margin-top: .75rem; }
.profile-list { display: grid; gap: .25rem .8rem; margin: .4rem 0 0; padding-left: 1.25rem; }
.profile-link {
  padding: .2rem .15rem;
  min-height: 2.75rem;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: .2em;
  cursor: pointer;
}
.life-details { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; }
.life-details dt { color: var(--brass); }
.life-details dd { margin: 0; }

@media (max-width: 50rem) {
  .card-grid.four-up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .line-headings { display: none; }
  .generation-row { border-top: 1px solid var(--rule); padding-top: .75rem; }
}
@media (max-width: 29rem) {
  .card-grid, .card-grid.four-up { grid-template-columns: minmax(0, 1fr); }
  .card-art { min-height: 7.8rem; }
  .card-art img { width: 6.3rem; height: 6.3rem; }
  .spotlight-grid .card-art { min-height: 9rem; }
  .spotlight-grid .card-art img { width: 7.55rem; height: 7.55rem; }
}