@layer components {
    .hub-single {
        padding-bottom: 2rem;
    }

    .hub-genealogy {
        padding: clamp(1rem, 3vw, 2rem) 0 3rem;
    }

    .hub-genealogy__header {
        display: grid;
        gap: .8rem;
        max-width: 64rem;
        margin: 0 auto;
        padding: 0 clamp(1rem, 4vw, 2rem);
        text-align: center;
    }

    .hub-genealogy__title {
        margin: 0;
        color: #12382d;
        font-family: 'Open Sans', sans-serif;
        font-size: clamp(2rem, 6vw, 4.25rem);
        font-weight: 700;
        line-height: .98;
        text-wrap: balance;
    }

    .hub-genealogy__description {
        margin: 0 auto;
        max-width: 58ch;
        color: #3b5e50;
        font-size: clamp(1rem, 1.8vw, 1.1rem);
        line-height: 1.65;
    }

    .hub-genealogy__divider {
        width: min(8rem, 30vw);
        height: 1px;
        margin: 1.5rem auto 0;
        border: 0;
        background: color-mix(in srgb, #178153 28%, transparent);
    }

    .hub-genealogy__tree {
        position: relative;
        min-height: clamp(34rem, 74vh, 58rem);
        margin: 1rem auto 0;
        overflow: hidden;
        border: 0;
        border-radius: 0;
        background-color: #fff;
        box-shadow: none;
        container-type: inline-size;
        touch-action: none;
        overscroll-behavior: contain;
        isolation: isolate;
    }

    .hub-genealogy__tree::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 0;
        background: var(--hub-tree-background-image, none) center / cover no-repeat;
        opacity: .3;
        pointer-events: none;
    }

    .hub-genealogy__canvas {
        position: absolute;
        inset: 0;
        z-index: 1;
        overflow: hidden;
    }

    .hub-genealogy__viewport {
        position: absolute;
        inset: 0;
        overflow: hidden;
        cursor: grab;
        user-select: none;
    }

    .hub-genealogy__viewport.is-dragging {
        cursor: grabbing;
    }

    .hub-genealogy__stage {
        position: absolute;
        left: 0;
        top: 0;
        transform-origin: 0 0;
        will-change: transform;
    }

    .hub-genealogy__connectors,
    .hub-genealogy__nodes {
        position: absolute;
        inset: 0;
    }

    .hub-genealogy__connectors {
        overflow: visible;
        pointer-events: none;
    }

    .hub-genealogy__edge {
        fill: none;
        stroke: color-mix(in srgb, #178153 44%, #fff);
        stroke-linecap: round;
        stroke-linejoin: round;
        vector-effect: non-scaling-stroke;
    }

    .hub-genealogy__edge.is-emphasis {
        stroke: #178153;
        opacity: .9;
    }

    .hub-genealogy__nodes {
        pointer-events: none;
    }

    .hub-genealogy__node {
        position: absolute;
        display: grid;
        justify-items: center;
        gap: .7rem;
        width: var(--hub-node-width, 10rem);
        transform: translate(-50%, -50%);
        color: #12382d;
        text-align: center;
        text-decoration: none;
        pointer-events: auto;
    }

    .hub-genealogy__node:focus-visible {
        outline: 3px solid color-mix(in srgb, #178153 60%, white);
        outline-offset: .4rem;
        border-radius: 1rem;
    }

    .hub-genealogy__node--static {
        pointer-events: none;
    }

    .hub-genealogy__portrait {
        position: relative;
        display: grid;
        place-items: center;
        width: var(--hub-portrait-size, 5.75rem);
        aspect-ratio: 1;
        overflow: hidden;
        border: 3px solid rgba(255, 255, 255, .92);
        border-radius: 999px;
        background: #fff;
        box-shadow: 0 12px 24px rgba(19, 56, 45, .14);
    }

    .hub-genealogy__portrait img {
        position: absolute;
        inset: 0;
        display: block;
        inline-size: 100%;
        height: 100% !important;
        block-size: 100% !important;
        max-inline-size: none;
        max-block-size: none;
        object-fit: cover;
    }

    .hub-genealogy__portrait--fallback {
        background: linear-gradient(135deg, #178153, #0f5f3e);
        color: #fff;
        font-size: clamp(1.1rem, 2vw, 1.35rem);
        font-weight: 700;
        letter-spacing: .02em;
    }

    .hub-genealogy__label {
        display: block;
        overflow: visible;
        max-width: none;
        font-size: .95rem;
        font-weight: 700;
        line-height: 1.2;
        overflow-wrap: anywhere;
        text-wrap: balance;
    }

    .hub-genealogy__empty {
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        padding: 2rem;
        color: #3b5e50;
        font-size: 1rem;
        text-align: center;
    }

    @container (min-width: 48rem) {
        .hub-genealogy__label {
            font-size: 1rem;
        }

        .hub-genealogy__tree {
            min-height: clamp(42rem, 72vh, 64rem);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .hub-genealogy__stage {
            transition: none;
        }
    }
}