body { font-family: 'Roboto', sans-serif; background-color: #fdfdfd; color: #111827; overflow-x: hidden; }
.font-serif { font-family: 'Lora', serif !important; }
.font-sans { font-family: 'Roboto', sans-serif !important; }

.editorial-text { font-family: 'Lora', serif; font-size: 1.125rem; line-height: 1.85; color: #374151; }
.drop-cap::first-letter {
    float: left;
    font-size: 4.5rem;
    line-height: 0.8;
    padding-top: 0.1rem;
    padding-right: 0.5rem;
    font-weight: 700;
    color: #0f172a;
}

.gallery-container { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; background-color: #f8fafc; }

.family-node * { pointer-events: none; }
.family-node rect, .family-node circle, .family-node path { pointer-events: all; }
.family-node.interactive { cursor: pointer; }
.family-node.interactive:hover rect { fill: #f0f9ff; stroke: #3b82f6; stroke-width: 1.5; }

.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes drawLine { to { stroke-dashoffset: 0; } }
@keyframes fadeLine { from { opacity: 0; } to { opacity: 1; } }

.anim-node { opacity: 0; }
.anim-line { opacity: 0; }

.tree-hovered .family-node { opacity: 0.2; transition: opacity 0.3s; }
.tree-hovered .family-line { opacity: 0.15; transition: stroke 0.3s, opacity 0.3s, stroke-width 0.3s; }

.tree-hovered .family-node.highlight-family { opacity: 1; }
.tree-hovered .family-node.highlight-path { opacity: 1; }

.tree-hovered .family-line.highlight-family { opacity: 1; stroke: #3b82f6; stroke-width: 2.5px; } 
.tree-hovered .family-line.highlight-path { opacity: 1; stroke: #d97706; stroke-width: 3px; z-index: 10; } 

.drawer-content p { margin-bottom: 0.75rem; text-align: justify; }
.drawer-content p:last-child { margin-bottom: 0; }