/* =========================================
   Page
   ========================================= */

.genealogy-page {
    position: relative;

    width: 100%;
    height: calc(100vh - 70px);

    overflow: hidden;

    background: #fafafa;
}


/* =========================================
   Introduction
   ========================================= */

.genealogy-intro {
    position: absolute;

    top: 35px;
    left: 5vw;

    z-index: 10;

    max-width: 430px;

    pointer-events: none;
}

.genealogy-intro h1 {
    margin: 0 0 10px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 2rem;
    font-weight: 400;

    letter-spacing: -0.02em;
}

.genealogy-intro p {
    margin: 0;

    max-width: 400px;

    font-size: 0.85rem;

    line-height: 1.6;

    color: #777;
}


/* =========================================
   Network
   ========================================= */

#genealogyNetwork {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;
}

#genealogyNetwork svg {
    display: block;

    width: 100%;
    height: 100%;
}


/* =========================================
   Connections
   ========================================= */

.genealogy-link {
    stroke: #c7c7c7;

    stroke-width: 1px;

    fill: none;

    transition:
        opacity 0.25s ease;
}


/* =========================================
   Person Nodes
   ========================================= */

.person-node {
    cursor: pointer;

    outline: none;

    transition:
        opacity 0.25s ease;
}


/* =========================================
   Node Circles
   ========================================= */

.person-circle {
    fill: #8a8a8a;

    stroke: #fafafa;

    stroke-width: 2px;

    transition:
        fill 0.2s ease,
        r 0.2s ease,
        stroke 0.2s ease;
}


/* Current scholar */

.person-node[data-person="julio"] .person-circle {
    fill: #111111;
}


/* José */

.person-node[data-person="itzigsohn"] .person-circle {
    fill: #555555;
}


/* Hover */

.person-node:hover .person-circle,
.person-node:focus .person-circle {
    fill: #111111;

    stroke: #111111;
}


/* Selected */

.person-node.selected .person-circle {
    fill: #111111;

    stroke: #111111;
}


/* =========================================
   Names
   ========================================= */

.person-label {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Helvetica Neue",
        Arial,
        sans-serif;

    font-size: 12px;

    font-weight: 400;

    fill: #444;

    pointer-events: none;

    opacity: 0;

    transition:
        opacity 0.2s ease;
}


/*
   Show labels for the immediate
   genealogy around you.
*/

.person-node[data-person="julio"] .person-label,
.person-node[data-person="hammer"] .person-label,
.person-node[data-person="rodriguez-muniz"] .person-label,
.person-node[data-person="itzigsohn"] .person-label {
    opacity: 1;
}


/* Hover label */

.person-node:hover .person-label,
.person-node:focus .person-label {
    opacity: 1;
}


/* =========================================
   Dimming
   ========================================= */

.person-node.dimmed {
    opacity: 0.08;
}

.genealogy-link.dimmed {
    opacity: 0.08;
}


/* =========================================
   Scholar Information Panel
   ========================================= */

#personPanel {
    position: absolute;

    top: 30px;

    right: 30px;

    width: 310px;

    padding: 25px 28px;

    background:
        rgba(255, 255, 255, 0.97);

    border: 1px solid #d8d8d8;

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.08);

    z-index: 30;

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(10px);

    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        visibility 0.25s ease;
}


/* Open panel */

#personPanel.open {
    opacity: 1;

    visibility: visible;

    transform:
        translateY(0);
}


/* =========================================
   Close
   ========================================= */

.close-panel {
    position: absolute;

    top: 10px;

    right: 13px;

    width: 25px;
    height: 25px;

    padding: 0;

    border: none;

    background: transparent;

    color: #888;

    font-size: 20px;

    line-height: 25px;

    cursor: pointer;
}

.close-panel:hover {
    color: #111;
}


/* =========================================
   Panel Typography
   ========================================= */

.panel-label {
    margin: 0 0 10px;

    font-size: 0.65rem;

    text-transform: uppercase;

    letter-spacing: 0.12em;

    color: #999;
}


#personPanel h2 {
    margin: 0 0 5px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 1.55rem;

    line-height: 1.2;

    font-weight: 400;
}


.panel-role {
    margin: 0 0 22px;

    font-size: 0.8rem;

    color: #777;
}


/* =========================================
   Panel Details
   ========================================= */

.panel-detail {
    padding-top: 14px;

    margin-top: 14px;

    border-top: 1px solid #eeeeee;
}


.panel-detail > span {
    display: block;

    margin-bottom: 5px;

    font-size: 0.62rem;

    text-transform: uppercase;

    letter-spacing: 0.1em;

    color: #999;
}


.panel-detail strong {
    display: block;

    font-size: 0.82rem;

    font-weight: 400;

    line-height: 1.5;

    color: #333;
}


/* =========================================
   Research Areas
   ========================================= */

.panel-areas {
    display: flex;

    flex-wrap: wrap;

    gap: 5px;

    margin-top: 7px;
}


.panel-areas span {
    padding: 4px 7px;

    border: 1px solid #dedede;

    font-size: 0.65rem;

    color: #555;

    background: #fafafa;
}


/* =========================================
   Instructions
   ========================================= */

.genealogy-instructions {
    position: absolute;

    left: 5vw;

    bottom: 25px;

    z-index: 10;

    font-size: 0.65rem;

    line-height: 1.6;

    color: #999;

    pointer-events: none;
}


/* =========================================
   Reset
   ========================================= */

.genealogy-reset {
    position: absolute;

    right: 30px;

    bottom: 25px;

    z-index: 20;

    padding: 7px 12px;

    border: 1px solid #ccc;

    background: transparent;

    color: #777;

    font-family: inherit;

    font-size: 0.7rem;

    cursor: pointer;

    transition:
        border-color 0.2s ease,
        color 0.2s ease,
        background 0.2s ease;
}


.genealogy-reset:hover {
    border-color: #111;

    background: #111;

    color: white;
}


/* =========================================
   Mobile
   ========================================= */

@media (max-width: 700px) {

    .genealogy-page {
        height: calc(100vh - 60px);
    }


    .genealogy-intro {
        top: 20px;

        left: 22px;

        right: 22px;
    }


    .genealogy-intro h1 {
        font-size: 1.55rem;
    }


    .genealogy-intro p {
        font-size: 0.75rem;

        max-width: 320px;
    }


    #personPanel {
        top: auto;

        right: 18px;

        bottom: 55px;

        left: 18px;

        width: auto;

        max-width: none;

        padding: 22px;
    }


    .genealogy-instructions {
        left: 22px;

        bottom: 18px;

        font-size: 0.6rem;
    }


    .genealogy-reset {
        right: 18px;

        bottom: 18px;

        font-size: 0.6rem;
    }


    .person-label {
        font-size: 10px;
    }

}

/* =========================
   ABOUT / BIO PAGE
   ========================= */

.bio-page {
    max-width: 1050px;
    margin: 0 auto;
    padding: 110px 5vw 130px;
}

.bio-page .eyebrow {
    margin-bottom: 24px;
}

.bio-page h1 {
    font-size: clamp(3.5rem, 6vw, 5.5rem);
    font-weight: 400;
    letter-spacing: -0.045em;
    line-height: 1;
    margin: 0 0 65px;
}

.bio-text {
    max-width: 820px;
}

.bio-text p {
    font-size: 1.12rem;
    line-height: 1.85;
    margin: 0 0 38px;
}

.bio-text p:last-child {
    margin-bottom: 0;
}


/* =========================
   BIO PAGE — MOBILE
   ========================= */

@media (max-width: 800px) {

    .bio-page {
        padding: 80px 6vw 100px;
    }

    .bio-page h1 {
        font-size: clamp(3rem, 12vw, 4.5rem);
        margin-bottom: 50px;
    }

    .bio-text {
        max-width: 100%;
    }

    .bio-text p {
        font-size: 1.05rem;
        line-height: 1.8;
        margin-bottom: 32px;
    }
}