.transcriptholder { margin-top: var(--gutter); display: flex; flex-wrap: wrap; gap:var(--bodytext_size); }
.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(--ttl_black);
    background: transparent;
    border-radius: 8px;
    transition: background-color .2s ease;
    flex: 1; min-width: 720px;
    --transcript-padding:24px;
}


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


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


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

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

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

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

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

.transcript > div::before {
    display: block;
    height: var(--transcript-padding);
    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)  {
    /*background-color: rgba(63, 95, 222, 0.10);*/
    /* outline:2px solid var(--ttl_error); outline-offset: 2px; */ 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(--ttl_cream);
}
.transcript button:focus-visible::after  {


}

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

.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; top: calc(-0.05em - 1px);
    display: inline-block;
    vertical-align: middle;   line-height: 1;

}

.transcript button .icon::after {


    display: inline-block;
    font-size: 0.5em; line-height: 1;
    transition: all 0.2s ease;

    font-family: ttl_icons;
    font-weight: 400;
    content:"\E805";

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


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

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

    .transcript { min-width: 1px;}
}

@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;*/
    }
}