.vv-pedigree {
  --vv-ink: #382e25;
  --vv-accent: #cc5800;
  --vv-gold: #9a8450;
  --vv-line: #e6dac8;
  margin: 4rem auto;
  width: calc(100% - 2rem);
  max-width: 1180px;
  min-width: 0;
  box-sizing: border-box;
  padding: clamp(1.5rem, 3vw, 3.25rem);
  color: var(--vv-ink);
  background: linear-gradient(145deg, #fff 0%, #fbf8f3 100%);
  border: 1px solid var(--vv-line);
  border-radius: 28px;
  box-shadow: 0 18px 55px rgba(57, 43, 31, .08);
  overflow: hidden;
}

.vv-pedigree__header { text-align: center; margin-bottom: 2.25rem; }
.vv-pedigree__eyebrow { color: var(--vv-gold); font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.vv-pedigree__header h2 { margin: .35rem 0 .3rem; color: var(--vv-accent); font-family: Georgia, 'Times New Roman', serif; font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 500; }
.vv-pedigree__header p { margin: 0; color: #74685e; }
.vv-pedigree__legend { display: flex; justify-content: center; gap: 10px; margin-top: 1rem; }
.vv-pedigree__legend-item { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; font-size: .72rem; font-weight: 700; }
.vv-pedigree__legend-item::before { content: ''; width: 9px; height: 9px; border-radius: 50%; }
.vv-pedigree__legend-item--maternal { color: #8b574d; background: #f7ebe7; }
.vv-pedigree__legend-item--maternal::before { background: #b97869; }
.vv-pedigree__legend-item--paternal { color: #506d60; background: #eaf2ed; }
.vv-pedigree__legend-item--paternal::before { background: #678878; }
.vv-pedigree__controls { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 auto .55rem; color: #81766c; font-size: .74rem; }
.vv-pedigree__arrow { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; color: #fff; background: #776548; border: 0; border-radius: 50%; box-shadow: 0 5px 14px rgba(66,49,31,.16); cursor: pointer; transition: transform .18s ease, opacity .18s ease, background .18s ease; }
.vv-pedigree__arrow:hover { background: #cc5800; transform: translateY(-1px); }
.vv-pedigree__arrow:disabled { opacity: .28; cursor: default; transform: none; }
.vv-pedigree__viewport { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; overflow-x: auto; overflow-y: hidden; padding: .75rem .25rem 1.25rem; scrollbar-color: #b5a17d #f1ebe2; scrollbar-width: thin; scroll-behavior: smooth; overscroll-behavior-inline: contain; }
.vv-pedigree__viewport::-webkit-scrollbar { height: 9px; }
.vv-pedigree__viewport::-webkit-scrollbar-track { background: #f1ebe2; border-radius: 999px; }
.vv-pedigree__viewport::-webkit-scrollbar-thumb { background: #b5a17d; border-radius: 999px; }
.vv-pedigree__tree { display: grid; grid-template-columns: 190px 210px 225px 245px 225px 210px 190px; gap: 18px; min-width: 1530px; min-height: 720px; align-items: stretch; }
.vv-pedigree__column { display: grid; gap: 14px; align-content: space-around; position: relative; padding: 34px 5px 10px; border-radius: 18px; }
.vv-pedigree__column::before { content: attr(data-generation); position: absolute; top: 10px; left: 0; right: 0; text-align: center; color: #8d8176; font-size: .58rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.vv-pedigree__column--paternal { background: linear-gradient(180deg, rgba(234,242,237,.78), rgba(234,242,237,.18)); }
.vv-pedigree__column--paternal::before { color: #567264; }
.vv-pedigree__column--maternal { background: linear-gradient(180deg, rgba(247,235,231,.82), rgba(247,235,231,.2)); }
.vv-pedigree__column--maternal::before { color: #9a6257; }
.vv-pedigree__column--origin { align-content: center; padding-left: 8px; padding-right: 8px; background: linear-gradient(180deg, #f4ecdc, #fbf8f1); box-shadow: inset 0 0 0 1px #dfcfb3; }
.vv-pedigree__column--parent { align-content: center; }
.vv-pedigree__column--grand { grid-template-rows: repeat(2, auto); }
.vv-pedigree__column--great { grid-template-rows: repeat(4, auto); }
.vv-pedigree__card { display: grid; grid-template-columns: 78px 1fr; min-height: 112px; position: relative; overflow: visible; background: #fff; border: 1px solid var(--vv-line); border-radius: 15px; box-shadow: 0 7px 20px rgba(63, 48, 34, .07); }
.vv-pedigree__column--maternal .vv-pedigree__card { border-color: #e3c5be; }
.vv-pedigree__column--paternal .vv-pedigree__card { border-color: #c5dacf; }
.vv-pedigree__card--empty { opacity: .58; border-style: dashed; box-shadow: none; }
.vv-pedigree__card--empty .vv-pedigree__identity h3 { color: #8f857c; font-family: inherit; font-size: .76rem; font-weight: 500; }
.vv-pedigree__column--paternal .vv-pedigree__card::after,
.vv-pedigree__column--origin .vv-pedigree__card::before,
.vv-pedigree__column--origin .vv-pedigree__card::after,
.vv-pedigree__column--maternal .vv-pedigree__card::before { content: ''; position: absolute; top: 50%; width: 19px; border-top: 2px solid; opacity: .62; }
.vv-pedigree__column--paternal .vv-pedigree__card::after { right: -19px; border-color: #678878; }
.vv-pedigree__column--maternal .vv-pedigree__card::before { left: -19px; border-color: #b97869; }
.vv-pedigree__column--origin .vv-pedigree__card::before { left: -19px; border-color: #678878; }
.vv-pedigree__column--origin .vv-pedigree__card::after { right: -19px; border-color: #b97869; }
.vv-pedigree__portrait { width: 60px; aspect-ratio: 4 / 5; margin: 12px 0 12px 12px; overflow: hidden; background: #f0ebe3; border: 1px solid #e2d5c5; border-radius: 10px; align-self: start; }
.vv-pedigree__portrait img { display: block; width: 100%; height: 100%; object-fit: contain; }
.vv-pedigree__portrait--empty { display: grid; place-items: center; color: #aa9876; font-size: 1.35rem; }
.vv-pedigree__identity { padding: 13px 10px; align-self: center; min-width: 0; }
.vv-pedigree__relation { display: inline-block; margin-bottom: 5px; color: #8d7649; font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.vv-pedigree__identity h3 { margin: 0; font-family: Georgia, 'Times New Roman', serif; font-size: 1.25rem; font-weight: 500; line-height: 1.15; }
.vv-pedigree__identity h3 a { color: inherit; text-decoration: none; }
.vv-pedigree__identity h3 a:hover { color: var(--vv-accent); }
.vv-pedigree__registered { margin: 5px 0 0; color: #766b61; font-size: .76rem; font-style: italic; line-height: 1.25; }
.vv-pedigree__identity dl { margin: 9px 0 0; font-size: .72rem; line-height: 1.35; }
.vv-pedigree__identity dl div { display: flex; gap: 5px; }
.vv-pedigree__identity dt { color: #9a8e83; font-weight: 600; }
.vv-pedigree__identity dd { margin: 0; overflow-wrap: anywhere; }
.vv-pedigree__column--great .vv-pedigree__card { grid-template-columns: 58px 1fr; min-height: 88px; }
.vv-pedigree__column--great .vv-pedigree__portrait { width: 42px; margin: 9px 0 9px 9px; border-radius: 8px; }
.vv-pedigree__column--great .vv-pedigree__identity { padding: 8px 7px; }
.vv-pedigree__column--great .vv-pedigree__identity h3 { font-size: .95rem; }
.vv-pedigree__column--great .vv-pedigree__identity dl { display: none; }
.vv-pedigree__column--great .vv-pedigree__registered { font-size: .68rem; }

@media (max-width: 767px) {
  .vv-pedigree { margin: 2.5rem .75rem; padding: 1.4rem 1rem; border-radius: 20px; }
  .vv-pedigree__header { margin-bottom: 1.2rem; }
  .vv-pedigree__controls span { max-width: 145px; text-align: center; line-height: 1.2; }
  .vv-pedigree__tree { grid-template-columns: 170px 185px 195px 215px 195px 185px 170px; gap: 14px; min-width: 1345px; min-height: 650px; }
  .vv-pedigree__card { grid-template-columns: 68px 1fr; min-height: 102px; }
  .vv-pedigree__portrait { width: 51px; margin: 10px 0 10px 10px; }
}

.vv-ancestor { width:calc(100% - 2rem); max-width:1120px; margin:3.5rem auto; color:#382e25; }
.vv-ancestor__hero { display:grid; grid-template-columns:minmax(230px,360px) 1fr; overflow:hidden; min-height:390px; background:linear-gradient(145deg,#fff,#faf6ef); border:1px solid #e4d8c7; border-radius:26px; box-shadow:0 18px 55px rgba(57,43,31,.09); }
.vv-ancestor__photo { display:grid; place-items:center; min-height:390px; background:#eee7dc; }
.vv-ancestor__photo img { width:100%; height:100%; max-height:520px; object-fit:contain; }
.vv-ancestor__photo--empty { gap:8px; align-content:center; color:#9b896d; }
.vv-ancestor__photo--empty span { font-size:3rem; opacity:.7; }
.vv-ancestor__photo--empty small { font-size:.72rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }
.vv-ancestor__intro { align-self:center; padding:clamp(2rem,6vw,5rem); }
.vv-ancestor__eyebrow { color:#9a8450; font-size:.75rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.vv-ancestor__intro h1 { margin:.45rem 0 .55rem; font-family:Georgia,'Times New Roman',serif; font-size:clamp(2.7rem,6vw,5rem); font-weight:500; line-height:1; }
.vv-ancestor__registered { margin:0; color:#70645a; font-family:Georgia,'Times New Roman',serif; font-size:clamp(1.05rem,2vw,1.45rem); font-style:italic; }
.vv-ancestor__badges { display:flex; flex-wrap:wrap; gap:8px; margin-top:1.4rem; }
.vv-ancestor__badges span { padding:7px 12px; color:#6e5a39; background:#f1e6d3; border-radius:999px; font-size:.75rem; font-weight:700; }
.vv-ancestor__details,.vv-ancestor__documents { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:18px; }
.vv-ancestor__details section,.vv-ancestor__documents section { padding:24px 26px; background:#fff; border:1px solid #e4d8c7; border-radius:18px; }
.vv-ancestor h2 { margin:0 0 16px; color:#cc5800; font-family:Georgia,'Times New Roman',serif; font-size:1.45rem; font-weight:500; }
.vv-ancestor dl { margin:0; }
.vv-ancestor dl div { display:grid; grid-template-columns:130px 1fr; gap:12px; padding:9px 0; border-bottom:1px solid #eee6dc; }
.vv-ancestor dl div:last-child { border:0; }
.vv-ancestor dt { color:#8d8176; font-weight:700; }
.vv-ancestor dd { margin:0; }
.vv-ancestor a { color:#5f755f; }
.vv-ancestor__documents { grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.vv-ancestor__documents p:last-child { margin-bottom:0; }
@media (max-width:767px) {
  .vv-ancestor { margin:2rem auto; }
  .vv-ancestor__hero { grid-template-columns:1fr; }
  .vv-ancestor__photo { min-height:280px; max-height:380px; }
  .vv-ancestor__intro { padding:2rem 1.4rem; }
  .vv-ancestor__details { grid-template-columns:1fr; }
  .vv-ancestor dl div { grid-template-columns:105px 1fr; }
}