/* Family Tree — supplementary styles on top of Tailwind CDN */

[x-cloak] { display: none !important; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
}

.font-serif {
    font-family: "Playfair Display", "Source Serif Pro", Georgia, serif;
    font-feature-settings: "lnum";
}

/* family-chart customisation */
.f3 {
    background: radial-gradient(ellipse at top, #f5f3ee 0%, #ede9e1 100%);
}
.f3 .card-inner {
    border-radius: 14px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 4px 16px rgba(28,25,23,.08) !important;
    border: 1px solid #e7e5e4 !important;
    background: white !important;
    transition: box-shadow .2s ease, transform .2s ease;
}
.f3 .card-inner:hover {
    box-shadow: 0 2px 4px rgba(0,0,0,.06), 0 8px 24px rgba(28,25,23,.12) !important;
    transform: translateY(-1px);
}
.f3 .card-main .card-inner {
    border-color: #047857 !important;
    box-shadow: 0 0 0 3px rgba(4,120,87,.18), 0 8px 24px rgba(28,25,23,.12) !important;
}
.f3 .card-text { color: #1c1917 !important; }
.f3 .card-text .first-name,
.f3 .card-text .last-name { font-weight: 600 !important; }
.f3 .card-image rect { fill: #f5f3ee !important; }
.f3 .card-male .card-inner { border-top: 3px solid #1d4ed8 !important; }
.f3 .card-female .card-inner { border-top: 3px solid #be185d !important; }
.f3 .link {
    stroke: #a8a29e !important;
    stroke-width: 1.5 !important;
}