.individual-page {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}

.individual-top {
    display:flex;
    gap:40px;
    align-items:flex-start;
}

.individual-main {
    flex:1;
    min-width:0;
}

.profile-card,
.events-section,
.parents-section,
.families-section,
.pedigree-section,
.sources-section {
    margin-bottom:2rem;
    padding:1.5rem;
    background: rgba(255,255,255,.92);

    border: 1px solid #d8d1bf;

    border-radius: 10px;

    padding: 20px;

    margin-bottom: 25px;

    box-shadow: 0 2px 6px rgba(0,0,0,.08);
    
}

.individual-sidebar {
    width:300px;
    flex-shrink: 0;
}

.person-portrait {
    width: 100%;
    height: auto;
    display: block;
    padding-bottom: 40px;
}

.coat-of-arms {
    width: 200px;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.pedigree-section {
    padding-left: 100px;
}

.pedigree-grid {
    display:grid;

    grid-template-columns: 325px 325px 325px 325px;
    grid-template-rows: repeat(15, auto);

    column-gap:35px;
    row-gap:20px;
    
    width: fit-content;
    margin: 0 auto;
}

.pedigree-grid div {
    position: relative;
}

.pedigree-grid a,
.pedigree-person {
    display:block;
    white-space: nowrap;
    padding:6px 10px;
    background:#f8f6ef;
    border:1px solid #d8d1bf;
    border-radius:6px;
}

.pedigree-name {
    font-weight: 600;
}

.pedigree-years {
    font-size: 0.85rem;
    color: #666;
    margin-top: 2px;
}

.pedigree-grid a {
    text-decoration: none;
}

/* Subject */

.pedigree-person {
    grid-column: 1;
    grid-row: 8;

    align-self: center;
}

.pedigree-father {
    grid-column: 1;
    grid-row: 4;
}

.pedigree-mother {
    grid-column: 1;
    grid-row: 12;
}

/* Grandparents */

.pedigree-pgf {
    grid-column:2;
    grid-row:2;
}

.pedigree-pgm {
    grid-column:2;
    grid-row:6;
}

.pedigree-mgf {
    grid-column:2;
    grid-row:10;
}

.pedigree-mgm {
    grid-column:2;
    grid-row:14;
}

/* Great Grandparents */

.pedigree-pggf {
    grid-column:3;
    grid-row:1;
}

.pedigree-pggm {
    grid-column:3;
    grid-row:3;
}

.pedigree-pgmf {
    grid-column:3;
    grid-row:5;
}

.pedigree-pgmm {
    grid-column:3;
    grid-row:7;
}

.pedigree-mggf {
    grid-column:3;
    grid-row:9;
}

.pedigree-mggm {
    grid-column:3;
    grid-row:11;
}

.pedigree-mgmf {
    grid-column:3;
    grid-row:13;
}

.pedigree-mgmm {
    grid-column:3;
    grid-row:15;
}

.pedigree-grid a {
    text-decoration:none;
}

.pedigree-grid a:hover {
    text-decoration:underline;
}

/* Connectors */

.pedigree-father::before {
    content: "";
    position: absolute;

    left: 50%;
    top: 50px;

    height: 230px;

    border-left: 1px solid #666;
}

.pedigree-mother::before {
    content: "";
    position: absolute;

    left: 50%;
    top: -230px;

    height: 230px;

    border-left: 1px solid #666;
}

.pedigree-pgf::after {
    content: "";
    position: absolute;

    left: 150px;
    top: 50px;

    height: 230px;

    border-left: 1px solid #666;
}

.pedigree-father::after {
    content: "";
    position: absolute;

    left: 0px;
    top: 50%;

    width: 90px;
    border-top: 1px solid #666;
}

.pedigree-mgf::after {
    content: "";
    position: absolute;

    left: 150px;
    top: 50px;

    height: 230px;

    border-left: 1px solid #666;
}

.pedigree-pggf::after {
    content: "";
    position: absolute;

    left: 150px;
    top: 50px;

    height: 90px;

    border-left: 1px solid #666;
}

.pedigree-pgmf::after {
    content: "";
    position: absolute;

    left: 150px;
    top: 50px;

    height: 90px;

    border-left: 1px solid #666;
}

.pedigree-mggf::after {
    content: "";
    position: absolute;

    left: 150px;
    top: 50px;

    height: 90px;

    border-left: 1px solid #666;
}

.pedigree-mgmf::after {
    content: "";
    position: absolute;

    left: 150px;
    top: 50px;

    height: 90px;

    border-left: 1px solid #666;
}





details {
    margin-bottom: 1rem;
}

summary {
    cursor: pointer;
    font-weight: bold;
    font-size: 1.1rem;
    padding: .5rem 0;
}

.profile-card h1 {
    font-size: 2rem;
    margin-bottom: .25rem;
}

.profile-title {
    color: var(--color-gold-dark);
    font-style: italic;
}

.individual-sidebar {

    background: rgba(255,255,255,.92);

    border: 1px solid #d8d1bf;

    border-radius: 10px;

    padding: 15px;
}