.landing-page { background:#eae2d0; padding:12px 0 24px; }
.chart-hint { margin:0 20px 9px; color:#76684e; text-align:right; font-size:.76rem; font-weight:700; }
.heritage-scroll { margin:0 14px; overflow-x:auto; scrollbar-color:#a38f67 #e8dbc0; }
.heritage-scroll:focus { outline:2px solid #5b754f; outline-offset:2px; }
.heritage-chart { position:relative; min-width:1500px; padding:14px 32px 22px; color:#4c422d; background:radial-gradient(circle at 15% 18%,#fff8e9 0,transparent 38%),radial-gradient(circle at 82% 58%,#f1e5ca 0,transparent 42%),linear-gradient(130deg,#f8f0dc,#efe2c4 55%,#f6ecd4); }
.chart-heading { position:relative; z-index:1; text-align:center; padding:8px 0 12px; }
.chart-heading img { display:block; margin:0 auto 2px; }
.chart-heading p { margin:0; color:#866b3c; font-size:.72rem; text-transform:uppercase; letter-spacing:.23em; font-weight:700; }
.chart-heading h1 { margin:1px 0 0; color:#3e3424; font-size:clamp(2.1rem,3vw,3.4rem); text-transform:uppercase; letter-spacing:.08em; line-height:1.08; }
.chart-heading>span { display:block; font-size:.85rem; letter-spacing:.42em; text-transform:uppercase; color:#6d5837; font-weight:700; }
.heritage-generation { min-height:99px; position:relative; display:flex; align-items:center; }
.generation-couple { display:flex; align-items:center; justify-content:center; gap:20px; width:100%; }
.heritage-person { display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:2px; width:175px; min-height:88px; color:#403826; text-decoration:none; text-align:center; font-size:.8rem; line-height:1.14; }
.heritage-person:hover,.heritage-person:focus { color:#315c45; }
.heritage-person:hover strong,.heritage-person:focus strong { text-decoration:underline; }
.heritage-person strong { max-width:175px; font-size:.82rem; }
.heritage-person small { color:#806d49; font-size:.6rem; text-transform:uppercase; letter-spacing:.09em; font-weight:700; }
.portrait { display:grid; place-items:center; width:46px; height:46px; margin-bottom:3px; border-radius:50%; border:3px double #776443; background:#e6d7b6; color:#57482d; box-shadow:0 0 0 3px #f5eacf; font-size:1.2rem; font-weight:700; }
.couple-separator { color:#8f794f; font-size:1.55rem; font-weight:700; align-self:center; margin-bottom:20px; }
.lineage-thread { width:0; height:18px; border-left:2px dashed #98845c; margin-left:50%; }
.branches-chart { position:relative; padding:0 0 12px; }
.parent-stem { height:34px; width:0; border-left:2px solid #8d7950; margin-left:50%; }
.heritage-branches { position:relative; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:7px; padding-top:22px; }
.heritage-branches::before { content:""; position:absolute; top:0; left:7.15%; right:7.15%; border-top:2px solid #8d7950; }
.heritage-branch { min-width:0; position:relative; display:flex; flex-direction:column; align-items:center; padding:0 5px; }
.heritage-branch::before { content:""; position:absolute; top:-22px; left:50%; height:22px; border-left:2px solid #8d7950; }
.sibling-person { width:100%; min-height:95px; }
.sibling-person .portrait { width:51px; height:51px; }
.sibling-person strong { font-size:.84rem; }
.branch-stem { width:0; height:20px; border-left:2px solid #a48e63; }
.grandchildren { position:relative; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-content:start; gap:8px 5px; width:100%; min-height:202px; padding:15px 3px 0; border-top:1px solid #b39f77; }
.grandchildren::before { content:""; position:absolute; top:-1px; left:50%; height:15px; border-left:2px solid #a48e63; }
.grandchild { display:flex; flex-direction:column; align-items:center; gap:3px; color:#4b412d; text-decoration:none; text-align:center; font-size:.72rem; line-height:1.14; min-width:0; }
.grandchild:hover { color:#315c45; text-decoration:underline; }
.grandchild span:last-child { overflow-wrap:anywhere; }
.descendant-node { min-width:0; display:flex; flex-direction:column; align-items:center; }
.descendant-children { width:100%; min-width:0; margin-top:9px; padding:10px 0 0 5px; border-left:1px solid #a48e63; display:flex; flex-direction:column; gap:10px; }
.descendant-children>.descendant-node { position:relative; }
.descendant-children>.descendant-node::before { content:""; position:absolute; top:15px; left:-5px; width:8px; border-top:1px solid #a48e63; }
.descendant-children .grandchild { font-size:.67rem; }
.descendant-children .mini-portrait { width:25px; height:25px; font-size:.65rem; }
.mini-portrait { display:grid; place-items:center; width:30px; height:30px; border:2px double #927b51; border-radius:50%; background:#e5d6b5; font-size:.72rem; font-weight:700; }
.chart-footer { position:relative; z-index:1; margin:12px auto 0; width:calc(100% - 100px); text-align:center; padding:10px 15px 3px; border-top:1px solid #b29d76; }
.chart-footer p { margin:0 0 4px; color:#55482f; text-transform:uppercase; letter-spacing:.1em; font-weight:700; font-size:.75rem; }
@media(min-width:1550px) { .chart-hint { display:none; } }
@media(max-width:850px) { .heritage-chart { min-width:1500px; } .chart-hint { text-align:left; margin-left:16px; } }
@media(max-width:700px) { .chart-heading h1 { width:330px; margin:1px auto 0; font-size:1.5rem; line-height:1.1; } .chart-heading p { width:330px; margin-inline:auto; font-size:.6rem; } .chart-heading>span { font-size:.7rem; } .generation-couple { gap:4px; } .generation-couple .heritage-person { width:130px; } .couple-separator { font-size:1rem; margin-bottom:12px; } }