/* Character portraits and the separate, interactive family tree. */
.story{display:block}.story-copy{max-width:790px}.story-copy .lead{max-width:740px}
.character-section{background:var(--paper);border-top:1px solid var(--line)}
.character-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.character-card{background:var(--cream);border:1px solid #d5d4c3;border-radius:4px;overflow:hidden}
.portrait{position:relative;display:block;width:100%;aspect-ratio:1;overflow:hidden;background:#1d2d31}
.portrait img{position:absolute;max-width:none;height:auto}
.portrait-shroke img{width:221.326%;left:-.432%;top:-.432%}
.portrait-valeria-older img{width:100%;left:0;top:0}
.valeria-age-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));aspect-ratio:1;background:#1d2d31;overflow:clip}
.age-panel{position:relative;min-width:0;overflow:clip}
.age-panel+.age-panel{border-left:2px solid var(--cream)}
.age-panel img{position:absolute;max-width:none;height:auto}
.age-young img{width:407.273%;left:-171.212%;top:-4.545%}
.age-older img{width:196.751%;left:-54.152%;top:0}
.age-panel::after{content:"";position:absolute;inset:60% 0 0;background:linear-gradient(transparent,#071116d9);pointer-events:none}
.age-label{position:absolute;z-index:1;bottom:13px;left:12px;right:8px;min-height:40px;color:#fff9e8;font-size:15px;font-weight:700;line-height:1.4;text-shadow:0 1px 4px #0006}
.age-label small{display:block;font-size:11px;font-weight:500;margin-top:2px}
.portrait-theodore img{width:100%;left:0;top:0}
.portrait-ava img{width:264.567%;left:0;top:-9.449%}
.character-card-copy{padding:25px 22px 28px}.character-card-copy h3{font-family:'Barlow Condensed',Impact,sans-serif;font-size:38px;letter-spacing:0;margin-bottom:15px}
.character-card-copy p{font-size:15px;line-height:1.7;margin-bottom:16px}.character-card-copy p:last-child{margin:0}
.family-section{background:var(--sage);border-top:1px solid var(--line)}
.family-heading{text-align:center}.family-heading h2{margin-bottom:18px}.family-heading p{margin-bottom:8px}
.family-instruction{font-size:14px}
.family-diagram{--avatar:126px;position:relative;isolation:isolate;width:min(100%,760px);height:560px;margin:38px auto 8px}
.family-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.family-lines path{fill:none;stroke:#8e9d8c;stroke-width:2;vector-effect:non-scaling-stroke}
.family-node{position:absolute;width:var(--avatar);transform:translate(-50%,calc(var(--avatar) / -2))}
.node-shroke{left:25%;top:12.5%}.node-valeria{left:25%;top:48.2143%}.node-theodore{left:75%;top:48.2143%}.node-ava{left:50%;top:83.9286%}
.family-person{display:flex;flex-direction:column;align-items:center;width:100%;padding:0;border:0;background:transparent;color:var(--ink);border-radius:80px 80px 8px 8px}
.family-avatar{width:var(--avatar);border-radius:50%;border:4px solid var(--cream);box-shadow:0 0 0 1px #809381,0 7px 18px #20352c14;transition:box-shadow .16s}
.family-person:hover .family-avatar,.family-person[aria-expanded=true] .family-avatar{box-shadow:0 0 0 3px var(--sea),0 7px 18px #20352c20}
.family-name{display:inline-block;background:var(--sage);padding:4px 10px 2px;margin-top:8px;font-size:19px;line-height:1.3;font-weight:700;border-radius:3px}
.family-relation{position:absolute;z-index:0;background:var(--sage);color:#53634f;padding:1px 8px;font-size:12px;line-height:1.5;transform:translate(-50%,-50%)}
.relation-parent{left:25%;top:34.6%}.relation-married{left:50%;top:48.2143%}.relation-child{left:50%;top:66.5%}
.family-node:has(.family-person[aria-expanded=true]){z-index:5}
.family-info{position:absolute;top:calc(100% + 10px);left:0;width:280px;padding:19px 21px;background:var(--paper);border:1px solid #a8b4a0;border-radius:5px;box-shadow:0 14px 36px #20352c24;text-align:left;z-index:6}
.family-info::before{content:"";position:absolute;inset:-14px 0 auto;height:14px}
.family-info strong{display:block;font-size:18px;line-height:1.35;margin-bottom:8px}.family-info p{font-size:14px;line-height:1.65;margin:0}
.node-theodore .family-info{left:auto;right:0}.node-ava .family-info{top:auto;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%)}
.node-ava .family-info::before{inset:auto 0 -15px;height:15px}
@media(max-width:1100px){.character-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}.character-card-copy{padding:26px}.character-card-copy p{font-size:16px}}
@media(max-width:760px){.site-header nav{justify-content:flex-start;gap:19px}.character-cards{gap:18px}.character-card-copy{padding:20px 17px}.character-card-copy h3{font-size:33px}.character-card-copy p{font-size:14px}.family-diagram{--avatar:106px;height:510px;margin-top:32px}.family-name{font-size:17px}.family-info{width:250px}.family-heading{text-align:left}}
@media(max-width:480px){.character-cards{grid-template-columns:1fr;gap:28px}.character-card{display:grid;grid-template-columns:1fr}.character-card-copy{padding:24px}.character-card-copy p{font-size:16px}.character-card-copy h3{font-size:38px}.family-diagram{--avatar:90px;height:460px}.family-name{font-size:16px;padding-inline:6px}.family-relation{font-size:11px;padding-inline:5px}.relation-parent{top:35.5%}.family-info{width:238px;padding:17px}.node-shroke .family-info,.node-valeria .family-info{left:-10px}.node-theodore .family-info{right:-10px}.family-instruction{max-width:290px}}