.transcriptholder { margin-top: var(--gutter); display: flex; flex-wrap: wrap; gap:var(--bodytext_size);
    position: relative;
    z-index: 1;

}
.transcriptholder:not(:last-child) {   margin-bottom: calc(var(--gutter));   }

.imagery+.textcontent>.transcript {
    position: relative; top: calc(0px - var(--gutter)); margin-top: 0;  margin-bottom: calc(var(--gutter) * 2);}


.transcript {
    border: 1px solid var(--white);
    background: transparent;
    border-radius:calc(var(--bodytext_size) * 2);
    transition: background-color .2s ease;
    flex: 1; max-width: var(--text-max);
    --transcript-padding:24px;
}


.transcript.hover {
    background-color: rgba(255, 255, 255, 0.20);
    background-color: var(--container_blue);
}


@media (prefers-color-scheme: dark) {
    .transcript {
        border: 1px solid white;
    }
    .transcript.hover {
        background-color: rgba(255, 255, 255, 0.1);
    }
}


.transcript { padding-bottom:var(--bodytext_size); }
.transcript > header {
    position: relative;

    /*align-items: center;*/
    align-items: flex-start;

    display: flex;
    flex-wrap: wrap;
    padding:var(--bodytext_size); padding-bottom: 0;
}
.transcript > div {
    max-height: 0;
    transition: max-height 0.5s ease-out;
    overflow: hidden;

    padding:0 var(--bodytext_size); visibility: hidden;
}

.transcript.open > div {
    max-height: 10000em;
    transition: max-height 0.75s ease-in; visibility: visible;
}

.transcript > div::before {
    display: block;
    height: var(--bodytext_size);
    content: "";
}
.transcript > div :last-child { margin-bottom:  0 !important;}

.transcript > header > button {
    margin: 0; outline: none; border: none; background: none; cursor:pointer;
    font-family: inherit;
    font-size: var(--bodytext_size);
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
    flex: 1; text-align: left;
    /*padding-top: 3px;
    padding-bottom: 3px;
    */

    display: flex; flex-wrap: wrap;  align-items: center;
}
.transcript > header > button span {
    display: block; flex:1;
}



.transcript:has(:focus-visible)  {  outline: 3px solid black; box-shadow: 0 0 0 6px white;
    background: linear-gradient(
            rgba(255, 255, 255, 0.2),
            rgba(255, 255, 255, 0.2)
    ),
    var(--white);

    background: var(--container_blue);
}
.transcript button:focus-visible::after  {


}

@media (prefers-color-scheme: dark) {
    .transcript:has(:focus-visible)  {
        background:var(--white);
    }
}

.transcript button  {
    display: flex; align-items: center; justify-content: space-between;
}
.transcript button .icon {
    font-style: normal !important;margin-left: 0.333em;
    /*height: 0.5em; */
    display: flex; align-items: center;
    position: relative;   line-height: 1;

    background: white; color:black; border-radius: 50%; height: calc(var(--bodytext_size) * 2); text-align: center; width: calc(var(--bodytext_size) * 2); min-width: calc(var(--bodytext_size) * 2);

    display: flex; align-items: center; justify-content: center;
}

.transcript button .icon::after {


    display: inline-block;
    font-size: var(--bodytext_size); line-height: 1;
    transition: all 0.2s ease;

    font-family: esero;
    font-weight: 400;
    content:"\e802";

}
.transcript.open button .icon::after {
    transform: rotate(180deg);
}


@media all and (max-width:1199.98px) {

    /*
    .transcriptholder {   margin-bottom: calc(var(--gutter) * 2);     }
    */

}

@media all and (max-width:599.98px) {
    .transcript {
        --transcript-padding: 16px;
    }
    /*    .transcript > header > button {
            font-size: 18px;
        }*/

    .transcript > header > button::after {
        font-size: 16px;
    }


}
@media all and (max-width:399.98px) {
    .transcript > header > button span {

        /*        width: 100%; flex: none; padding-bottom: 0.5em;*/
    }
}