.interview-hero {
    min-height: 90vh;
    padding: 0 clamp(.88889rem, 2.38095vw, 2.22222rem)
}

@media(min-width:920px) {
    .interview-hero {
        min-height: 100vh
    }
}

.interview-hero .name-container {
    position: sticky;
    top: 0;
    min-height: 90vh;
    width: 100%;
    padding: 80px 0;
    flex-direction: column;
    align-items: center;
    text-align: center
}

@media(min-width:920px) {
    .interview-hero .name-container {
        min-height: 100vh
    }
}

.interview-hero .name-container #name {
    text-transform: uppercase;
    line-height: .95;
    display: inline-block;
    white-space: nowrap;
    margin-left: -1.3%;
    text-align: center
}

.interview-hero .name-container .roles {
    font-size: clamp(.88889rem, 1.0119vw, .94444rem);
    margin: 0 0 clamp(.88889rem, 1.42857vw, 1.33333rem);
    text-align: center
}

.interview-hero .image {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    margin: -24vh 0 clamp(3.11111rem, 4.7619vw, 4.44444rem)
}

@media(min-width:920px) {
    .interview-hero .image {
        min-height: 100vh
    }
}

.interview-hero .image .portrait {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 56vh;
    max-width: 720px;
    height: 76vh;
    max-height: 1200px
}

.interview-hero .image .portrait img {
    margin: 0 auto;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.copy {
    margin: clamp(4.44444rem, 7.14286vw, 6.66667rem) auto 0;
    max-width: clamp(46.66667rem, 54.7619vw, 51.11111rem)
}

.copy h1,
.copy h2,
.copy h3,
.copy ol,
.copy p,
.copy ul {
    margin: 0 auto;
    max-width: clamp(38.88889rem, 46.42857vw, 43.33333rem)
}

.copy h1,
.copy h2,
.copy h3 {
    font-family: 'Signifier', Arial, Helvetica Neue, Helvetica, sans-serif
}

.copy h2,
.copy h3 {
    margin: clamp(2.66667rem, 3.80952vw, 3.55556rem) auto clamp(.88889rem, 1.42857vw, 1.33333rem);
    font-size: clamp(1.55556rem, 1.90476vw, 1.77778rem);
    font-weight: 600
}

.copy h3 {
    margin: clamp(1.77778rem, 2.85714vw, 2.66667rem) auto clamp(.66667rem, 1.19048vw, 1.11111rem);
    font-size: clamp(1.22222rem, 1.54762vw, 1.44444rem)
}

.copy,
.copy ol,
.copy p,
.copy ul {
    font-family: 'Signifier', Georgia, Times, Times New Roman, serif;
    font-size: clamp(1.11111rem, 1.42857vw, 1.33333rem);
    line-height: 1.3
}

.copy ol,
.copy p,
.copy ul {
    margin-bottom: clamp(1.77778rem, 2.38095vw, 2.22222rem)
}

.copy p em {
    font-style: italic;
}

.copy a {
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-thickness: 1px;
    color: #000;
    font-style: italic;
    position: relative
}

.copy a:before {
    position: absolute;
    content: '';
    width: 100%;
    height: 10px
}

.copy ol,
.copy ul {
    font-size: clamp(1.11111rem, 1.30952vw, 1.22222rem);
    margin-bottom: clamp(1.33333rem, 1.90476vw, 1.77778rem)
}

.copy ol li,
.copy ul li {
    margin-bottom: clamp(.44444rem, .71429vw, .66667rem)
}

.copy figure,
.copy figure ul {
    margin: 0 auto clamp(1.77778rem, 2.38095vw, 2.22222rem)
}

.copy figure {
    display: block;
    text-align: center;
    position: relative;
    font-size: 0
}

.copy figure img {
    max-width: 100% !important;
    margin: 0 auto
}

.copy figure iframe {
    width: 100%;
    height: 40vw;
    max-height: 500px
}

.copy figure figcaption {
    font-size: clamp(.88889rem, 1.19048vw, 1.11111rem);
    background: #fff;
    margin: 0;
    padding: clamp(.22222rem, .47619vw, .44444rem) clamp(.44444rem, .71429vw, .66667rem);
    position: absolute;
    bottom: clamp(.44444rem, .71429vw, .66667rem);
    left: clamp(.44444rem, .71429vw, .66667rem);
    text-align: center
}

.copy figure ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: clamp(1.77778rem, 2.38095vw, 2.22222rem);
    grid-row-gap: clamp(1.77778rem, 2.38095vw, 2.22222rem);
    max-width: clamp(46.66667rem, 54.7619vw, 51.11111rem);
    justify-content: center;
    align-content: center;
    list-style-type: none
}

.copy .gallery figure,
.copy figure ul li {
    margin: 0
}

.copy .gallery figure:last-child:nth-child(odd),
.copy .gallery figure:only-child,
.copy figure ul li:last-child:nth-child(odd),
.copy figure ul li:only-child {
    grid-column-start: 1;
    grid-column-end: 3
}

.copy .gallery figure img,
.copy figure ul li img {
    margin: 0 auto;
    max-height: none;
    width: 100%
}

.copy blockquote p {
    font-size: clamp(1.55556rem, 1.90476vw, 1.77778rem);
    font-weight: 600
}

.copy .gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: clamp(1.77778rem, 2.38095vw, 2.22222rem);
    grid-row-gap: clamp(1.77778rem, 2.38095vw, 2.22222rem);
    justify-content: center;
    align-content: center
}

.copy .gallery,
.copy .spotify,
.copy .video {
    margin: 0 auto clamp(1.77778rem, 2.38095vw, 2.22222rem);
    max-width: clamp(46.66667rem, 54.7619vw, 51.11111rem)
}

.copy .spotify iframe,
.copy .video iframe {
    width: 100%;
    height: clamp(27.77778rem, 32.7381vw, 30.55556rem)
}

.page-article .meta {
    text-align: center;
    margin: 0 auto;
    max-width: clamp(43.33333rem, 54.7619vw, 51.11111rem);
    padding: 0 clamp(.88889rem, 2.38095vw, 2.22222rem)
}

.page-article .meta .bio {
    font-size: clamp(1.33333rem, 1.66667vw, 1.55556rem);
    line-height: 1.35
}

.page-article .meta .date {
    margin: clamp(.88889rem, 1.42857vw, 1.33333rem) 0 0;
    font-size: clamp(.66667rem, .77381vw, .72222rem);
    letter-spacing: .12em;
    text-transform: uppercase
}

.page-article .roles {
    opacity: 1;
    transition: transform 750ms 550ms cubic-bezier(.49, .195, .18, .855), opacity 350ms 750ms cubic-bezier(.49, .195, .18, .855);
    transform: translate3d(0, -50%, 0)
}

.interview-hero #name {
    opacity: 1
}

.interview-hero #name .word {
    overflow: visible;
    display: inline-block
}

.interview-hero #name .word .char {
    transition: transform 750ms calc(var(--char-index)*20ms + 550ms), opacity 350ms calc(var(--char-index)*20ms + 750ms) cubic-bezier(.49, .195, .18, .855);
    transform: translate3d(0, 100%, 0);
    display: inline-block;
}

.interview-hero #name .word .char,
.interview-hero .roles {
    opacity: 1;
    transform: translate3d(0, 0, 0)
}

.interview-hero {
    position: relative;
    z-index: 9999
}

.page-article hr {
    margin-bottom: 10px;
}