.headline-display
{
    --grid-header: var(--default-grid-header);
    --inside-horizontal-margin: 0;
    --outside-horizontal-margin: 0;
    --grid-row-gap: calc(var(--row-gap) * 1.5);
}


.headline-display:has( > footer)
{
    --grid-footer: 
        [pre-footer-gap]
        calc(var(--row-gap) * .5)
        [footer-gap]
        calc(var(--row-gap) * .5)
        [pos-footer-gap]
        auto
        var(--default-grid-footer)
    ;
}

.headline-display > *
{
    grid-row-end: span 1;
}

.headline-display > .content
{
    grid-row-start: pos-first;
}

.headline-display[aria-label] > .content
{
    grid-row-start: pos-headlabel-gap;
}

.headline-display > header ~ .content,
.headline-display[aria-label] > header ~ .content
{
    grid-row-start: pos-row 1;
}

.headline-display > header,
.headline-display > figure:first-child + :nth-child(1 of .content), 
.headline-display > .content:first-child
{
    grid-row-start: pos-first;
}

.headline-display > footer
{
    grid-row-start: pos-footer-gap;
}

.headline-display > figure:first-child + :nth-child(1 of .content):last-of-type,
.headline-display > .content:first-child:last-of-type
{
    grid-row-end: pre-last;
}

.headline-display:has(> footer) > figure:first-child + :nth-child(1 of .content):last-of-type,
.headline-display:has(> footer) > .content:first-child:last-of-type
{
    grid-row-end: pre-footer-gap;
}

.headline-display:has( > :nth-child(2 of .content)){ --rows: 2; }
.headline-display:has( > :nth-child(2 of .content)):has(> header + :nth-child(1 of .content)){ --rows: 3; }
.headline-display > :nth-child(2 of .content){ grid-row-start: pos-row 1; }
.headline-display > header ~ :nth-child(2 of .content){ grid-row-start: pos-row 2; }

.headline-display:has( > :nth-child(3 of .content)){ --rows: 3; }
.headline-display:has( > :nth-child(3 of .content)):has(> header + :nth-child(1 of .content)){ --rows: 4; }
.headline-display > :nth-child(3 of .content){ grid-row-start: pos-row 2; }
.headline-display > header ~ :nth-child(3 of .content){ grid-row-start: pos-row 3; }

.headline-display:has( > :nth-child(4 of .content)){ --rows: 4; }
.headline-display:has( > :nth-child(4 of .content)):has(> header + :nth-child(1 of .content)){ --rows: 5; }
.headline-display > :nth-child(4 of .content){ grid-row-start: pos-row 3; }
.headline-display > header ~ :nth-child(4 of .content){ grid-row-start: pos-row 4; }

.headline-display:has( > :nth-child(5 of .content)){ --rows: 5; }
.headline-display:has( > :nth-child(5 of .content)):has(> header + :nth-child(1 of .content)){ --rows: 6; }
.headline-display > :nth-child(5 of .content){ grid-row-start: pos-row 4; }
.headline-display > header ~ :nth-child(5 of .content){ grid-row-start: pos-row 5; }


main > .headline-display > *
{
    grid-column: pos-first / pre-division 3;
}

.headline-display > *,
.headline-display[aria-label] > *
{
    grid-column: pos-middle 1 / pre-division 3;
}

.headline-display > figure,
.headline-display[aria-label] > figure
{
    grid-column: pos-middle 4 / pre-last;
    grid-row-start: pre-first;
    grid-row-end: pos-last;
}

.headline-display > figure:first-child,
.headline-display[aria-label] > figure:first-child
{
    grid-column: pos-first / pre-middle 3;
}

.headline-display > figure:first-child ~ *,
.headline-display[aria-label] > figure:first-child ~ *
{
    grid-column: pos-division 3 / pre-middle-last;
}

.headline-display .graph-list,
.headline-display .graph-list > ul,
.headline-display .graph-list > ul > li
{
    grid-template-columns: subgrid;
}

.headline-display > .graph-list,
.headline-display > .graph-list > ul,
.headline-display > .graph-list > ul > li,
.headline-display > .graph-list > ul > li::before
{
    grid-column: pos-first / pre-middle 4;
}

.headline-display > .graph-list > .title,
.headline-display > .graph-list > ul > li > span
{
    grid-column: pos-middle 1 / pre-division 3;
}


.headline-display > figure:first-child ~ .graph-list
{
    grid-column: pos-middle 3 / pre-last;
}

.headline-display > figure:first-child ~ .graph-list > ul,
.headline-display > figure:first-child ~ .graph-list > ul > li,
.headline-display > figure:first-child ~ .graph-list > ul > li::before
{
    grid-column: pos-middle / pre-last;
}

.headline-display > figure:first-child ~ .graph-list > .title,
.headline-display > figure:first-child ~ .graph-list > ul > li > span
{
    grid-column: pos-division 1 / pre-middle-last;
}


.headline-display > .content.headline-display
{
    grid-column: pre-first / pos-last;
    --inside-horizontal-margin: calc(var(--display-gap) * .5);
}


.headline-display[aria-label]
{
    --headlabel-gap: var(--row-gap);
    --grid-header:
        var(--default-grid-header)
        auto
        [pre-headlabel-gap]
        var(--headlabel-gap)
        [headlabel-gap]
        var(--headlabel-gap)
        [pos-headlabel-gap]
    ;

    --headlabel-size: calc(var(--base-size) * .66666666);
    counter-increment: headlabel;
}

.headline-display[aria-label]::before,
.headline-display[aria-label]::after
{
    --font-size: var(--headlabel-size);
    font-size: var(--adjusted-font-size);
    font-weight: var(--f-medium);
    color: var(--text-color);
    transform: translateY(var(--bound-adjustment));
    line-height: var(--line-height);
    margin-bottom: calc(var(--font-size) * -.75);
    grid-column: pos-first / pre-last;
    grid-row: pos-first / pre-headlabel-gap;
}

.headline-display[aria-label]::before
{
    content: attr(aria-label);
    display: block;
    border-bottom: 1px solid var(--text-color);
}

.headline-display[aria-label]::after
{
    content: counter(headlabel, decimal-leading-zero);
    display: block;
    text-align: right;
}

.headline-display[aria-label] > header,
.headline-display[aria-label] > figure:first-child + :nth-child(1 of .content), 
.headline-display[aria-label] > .content:first-child
{
    grid-row-start: pos-headlabel-gap;
}

.headline-display[aria-label]:has( > figure:first-child)::after,
.headline-display[aria-label]:has( > figure:first-child)::before
{
    grid-column: pos-middle 3 / pre-last;
}

.headline-display[aria-label]:has( > figure:last-child)::after,
.headline-display[aria-label]:has( > figure:last-child)::before
{
    grid-column: pos-first / pre-middle 4;
}

.headline-display > .content:has(.bubble-list),
.headline-display[aria-label] > .content:has(.bubble-list)
{
    grid-column: pos-middle 1 / pre-middle-last;
    display: grid;
    row-gap: var(--row-gap);
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    text-align: center;
}

.headline-display > .content:has(.bubble-list) > *
{
    grid-row: span 1;
    /* grid-column: 1 / -1; */
}

.headline-display:has(> figure) > .content:has(.bubble-list),
.headline-display[aria-label]:has(> figure) > .content:has(.bubble-list)
{
    grid-template-columns: subgrid;
    text-align: left;
}

.headline-display > figure:first-child ~ .content:has(.bubble-list),
.headline-display[aria-label] > figure:first-child ~ .content:has(.bubble-list)
{
    grid-column: pos-middle 3 / pre-last;
}

.headline-display > figure:first-child ~ .content:has(.bubble-list) > header
{
    grid-column: pos-division / pre-middle-last;
}

.headline-display > figure:first-child ~ .content:has(.bubble-list) > .bubble-list
{
    grid-column: pos-middle / pre-last;
    justify-content: start;
}

.headline-display:has(> figure:last-child) > .content:has(.bubble-list),
.headline-display[aria-label]:has(> figure:last-child) > .content:has(.bubble-list)
{
    grid-column: pos-first / pre-middle 4;
}

.headline-display:has(> figure:last-child) > .content:has(.bubble-list) > header
{
    grid-column: pos-middle / pre-division 3;
}

.headline-display:has(> figure:last-child) > .content:has(.bubble-list) > .bubble-list
{
    grid-column: pos-first / pre-middle 4;
    justify-content: start;
}


.headline-display > .content.highlight
{
    grid-column: pos-first / pre-division 5;
    margin: var(--display-gap) 0;
}

.headline-display > .content.box-shelf
{
    grid-column-start: pos-first;
    grid-column-end: pre-division 4;
    display: grid;
    grid-auto-columns: 1fr;
    grid-template-rows: 1fr;
    grid-auto-rows: unset;
    gap: var(--column-gap);
    z-index: 2;
}

.headline-display > .content.box-shelf > .basic-box
{
    grid-row-start: 1;
    grid-row-end: span 1;
}

.headline-display > .content.box-shelf:has(> .basic-box:nth-of-type(2))
{
    grid-column-end: pre-division 3;
}

.headline-display > .content.box-shelf:has(> .basic-box:nth-of-type(3))
{
    grid-column-end: pre-middle 5; 
}

.headline-display > .content.box-shelf:has(> .basic-box:nth-of-type(4))
{
    grid-column-end: pre-division 4; 
}

.headline-display > .content.box-shelf:has(> .basic-box:nth-of-type(5))
{
    grid-column-end: pre-middle 5; 
    grid-template-rows: repeat(2, 1fr);
    grid-template-columns: repeat(3, 1fr);
    grid-auto-columns: unset;
}

.headline-display > .content.box-shelf:has(> .basic-box:nth-of-type(5):last-of-type) > .basic-box:nth-of-type(n + 3)
{
    grid-row-start: 2;
}

.headline-display > .content.box-shelf:has(> .basic-box:nth-of-type(5):last-of-type) > .basic-box:nth-of-type(5)
{
    grid-row-start: 1;
    grid-row-end: span 2;
}

.headline-display > .content.box-shelf:has(> .basic-box:nth-of-type(5)) > .basic-box.numered::before
{
    margin-bottom: auto;
}

.headline-display > .content.box-shelf:has(> .basic-box:nth-of-type(6))
{
    grid-column-end: pre-middle 5;
}

.headline-display > .content.box-shelf:has(> .basic-box:nth-of-type(6):last-of-type) > .basic-box:nth-of-type(n + 4)
{
    grid-row-start: 2;
}

.headline-display > .content.box-shelf:has(> .basic-box:nth-of-type(7))
{
    grid-column-end: pre-division 4;
    grid-template-columns: repeat(4, 1fr);
}

.headline-display > .content.box-shelf:has(> .basic-box:nth-of-type(7):last-of-type) > .basic-box:nth-of-type(n + 4)
{
    grid-row-start: 2;
}

.headline-display > .content.box-shelf:has(> .basic-box:nth-of-type(7):last-of-type) > .basic-box:nth-of-type(7)
{
    grid-row-start: 1;
    grid-row-end: span 2;
}


.headline-display > figure:first-child ~ .content.box-shelf:has(> .basic-box:nth-of-type(n))
{
    grid-column-end: pre-last;
}

.headline-display > figure:first-child ~ .content.box-shelf:has(> .basic-box:nth-of-type(2))
{
    grid-column-start: pos-division 3;
}

.headline-display > figure:first-child ~ .content.box-shelf:has(> .basic-box:nth-of-type(3))
{
    grid-column-start: pos-middle 2; 
}

.headline-display > figure:first-child ~ .content.box-shelf:has(> .basic-box:nth-of-type(4))
{
    grid-column-start: pos-division 2; 
}

.headline-display > figure:first-child ~ .content.box-shelf:has(> .basic-box:nth-of-type(5))
{
    grid-column-start: pos-middle 2; 
}

.headline-display > figure:first-child ~ .content.box-shelf:has(> .basic-box:nth-of-type(6))
{
    grid-column-start: pos-middle 2; 
}


.headline-display.max-display > header
{
    grid-column: pos-first / pre-division 5;
}

.headline-display.max-display > *
{
    grid-column: pos-middle 4 / pre-middle-last;
}

.headline-display.max-display > .graph-list
{
    grid-column: pos-middle 3 / pre-last;
}

.headline-display.max-display > .graph-list > ul,
.headline-display.max-display > .graph-list > ul > li,
.headline-display.max-display > .graph-list > ul > li::before
{
    grid-column: pos-middle / pre-last;
}

.headline-display.max-display > .graph-list > .title,
.headline-display.max-display > .graph-list > ul > li > span
{
    grid-column: pos-middle 2 / pre-last;
}

.headline-display.max-display > .graph-list > ul > li:first-child::before
{
    border-top: unset;
}

.headline-display.max-display > .graph-list > ul > li:last-child::before
{
    border-bottom: unset;
}


.minibio
{
    --row-height: 1fr;
    --rows: 3;
    --grid-header: var(--default-grid-header);
    grid-template-columns: subgrid;
}

.minibio > figure
{
    grid-column: pos-first / pre-middle 2;
    grid-row: pre-first / pos-last;
}

.minibio > .content
{
    --hardlight-opacity: .75;
    grid-column: pos-middle 2 / pre-middle 5;
    grid-row: pos-row 1 / pre-last;
}

.minibio > .content > header
{
    margin-bottom: var(--row-gap);
    display: flex;
    flex-direction: column;
    gap: calc(var(--row-gap) * .5);
}

.headline-display > .content.minibio
{
    grid-column: pos-first / pre-middle 5;
}


@media (max-width: 1280px) {
    .headline-display > .content.box-shelf:has(> .basic-box:nth-of-type(n)),
    .headline-display > figure:first-child ~ .content.box-shelf:has(> .basic-box:nth-of-type(n))
    {
        grid-column-end: pre-last;
        grid-column-start: pos-first;
    }

    .headline-display > .content.highlight
    {
        grid-column-end: pre-last;
    }

    .headline-display:has( > .graph-list:nth-child(1 of .content)) > figure,
    .headline-display[aria-label]:has( > .graph-list:nth-child(1 of .content)) > figure{ grid-row-end: pre-row 1;}
    
    .headline-display:has( > .graph-list:nth-child(2 of .content)) > figure,
    .headline-display[aria-label]:has( > .graph-list:nth-child(2 of .content)) > figure{ grid-row-end: pre-row 2;}

    .headline-display > .graph-list,
    .headline-display > .graph-list > ul,
    .headline-display > .graph-list > ul > li,
    .headline-display > .graph-list > ul > li::before,
    .headline-display > figure:first-child ~ .graph-list,
    .headline-display > figure:first-child ~ .graph-list > ul,
    .headline-display > figure:first-child ~ .graph-list > ul > li,
    .headline-display > figure:first-child ~ .graph-list > ul > li::before
    {
        grid-column: pos-first / pre-last;
    }

    .headline-display > .graph-list > .title,
    .headline-display > .graph-list > ul > li > span,
    .headline-display > figure:first-child ~ .graph-list > .title,
    .headline-display > figure:first-child ~ .graph-list > ul > li > span,
    .headline-display > .graph-list ~ .content,
    .headline-display > .graph-list ~ footer,
    .headline-display[aria-label] > .graph-list ~ footer
    {
        grid-column: pos-middle 1 / pre-division 5;
    }

    .minibio > figure
    {
        grid-column: pos-first / pre-division 2;
    }

    .minibio > .content
    {
        grid-column: pos-division 2 / pre-last;
    }

    .headline-display > .content.minibio
    {
        grid-column: pos-first / pre-last;
    }
}

@media (max-width: 960px) {

    .headline-display.max-display > header
    {
        grid-column: pos-first / pre-last;
    }

    .headline-display.max-display > *
    {
        grid-column: pos-first / pre-last;
    }

    .headline-display.max-display > .graph-list,
    .headline-display.max-display > .graph-list > ul,
    .headline-display.max-display > .graph-list > ul > li,
    .headline-display.max-display > .graph-list > ul > li::before
    {
        grid-column: pos-first / pre-last;
    }

    .headline-display.max-display > .graph-list > .title,
    .headline-display.max-display > .graph-list > ul > li > span
    {
        grid-column: pos-middle / pre-division 5;
    }
}

@media (max-width: 480px) {
    .headline-display > .content.box-shelf:has(> .basic-box:nth-of-type(n):last-of-type) > .basic-box:nth-of-type(n + 4)
    {
        grid-row-start: unset;
    }

    .headline-display
    {
        grid-template-columns: 1fr;
        grid-template-rows: unset;
        grid-auto-rows: auto;
        padding: 0 var(--page-margin);
        gap: var(--display-gap);
    }

    .headline-display > .headline-display.content
    {
        padding: 0;
    }

    .headline-display > *
    {
        order: 1;
        grid-column: 1 !important;
        grid-row: span 1 !important;
    }

    .headline-display[aria-label]::before,
    .headline-display[aria-label]::after
    {
        grid-column: 1 / -1 !important;
        grid-row: 1 / span 1;
    }

    .headline-display > figure
    {
        order: 0;
        aspect-ratio: 4 / 3;
    }

    .headline-display > .content.box-shelf,
    .headline-display > .content.box-shelf:has(> .basic-box:nth-of-type(n))
    {
        grid-auto-columns: unset;
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }

    .headline-display > .content.box-shelf > .basic-box
    {
        grid-row-start: unset;
    }

    .minibio
    {
        --row-height: auto;
    }

    .minibio > figure
    {
        aspect-ratio: 5 / 4;
        grid-row: pos-first / pre-row 1;
        overflow: hidden;
    }
}