/* Characters — Figma node 304:240, scaled from its 1920px desktop canvas. */
.characters-page {
    background: var(--night);
    color: #fff;
    overflow: hidden
}

.characters-page h1,
.characters-page h2,
.characters-page h3,
.characters-page h4,
.characters-page p,
.characters-page dl,
.characters-page dt,
.characters-page dd {
    margin: 0
}

.characters-hero {
    position: relative;
    height: 44.270833vw;
    /* background: #272235; */
    isolation: isolate
}

.characters-hero:after {
    content: "";
    position: absolute;
    inset: 0;
    background: #0003;
    z-index: 1;
    pointer-events: none
}

.characters-hero-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 52.135417vw;
    max-width: none;
    mix-blend-mode: screen;
    pointer-events: none
}

.characters-hero h1 {
    position: absolute;
    z-index: 2;
    top: 23.411458vw;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    color: var(--gold);
    font: 700 3.645833vw/4.177083vw 'Times New Roman', serif;
    letter-spacing: .17937vw;
    text-transform: uppercase;
    text-align: center;
    text-shadow: 0 4px 4px #0004
}

.characters-catalogue {
    background: linear-gradient(#161325, #0f0d1a);
    padding: 5.208333vw 0 7.395833vw
}

.characters-catalogue>h2 {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 5.104167vw;
    color: var(--gold);
    font: 700 3.002448vw/4.093542vw 'Times New Roman', serif;
    letter-spacing: .175786vw;
    text-transform: uppercase;
    text-align: center
}

.characters-books {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4.427083vw;
    height: 2.231979vw;
    margin-top: 1.041667vw;
    font: 400 1.354167vw/2.231979vw 'Times New Roman', serif
}

.characters-books span {
    width: 5.15625vw;
    text-align: center;
    white-space: nowrap
}

.characters-books [aria-current] {
    color: var(--gold);
    text-decoration: underline;
    text-underline-offset: .16em
}

.characters-books i {
    width: 1px;
    height: 1.458333vw;
    background: #fff
}

.characters-timeline {
    position: relative;
    margin-top: 5.424271vw
}

.characters-timeline-line {
    position: absolute;
    left: 50%;
    top: -2.8125vw;
    bottom: 10.260417vw;
    width: 1px;
    background: #d5b583;
    transform: translateX(-50%)
}

.characters-timeline-start {
    position: absolute;
    left: calc(50% + .026042vw);
    top: -3.645833vw;
    width: .46875vw;
    height: .572917vw;
    transform: translateX(-50%)
}

.character-row {
    position: relative;
    display: grid;
    grid-template-columns: 38.75vw 9.21875vw 38.75vw;
    min-height: 38.75vw;
    margin-left: 6.666667vw
}

.character-row+.character-row {
    margin-top: 2.291667vw
}

.character-art {
    position: relative;
    grid-column: 1;
    grid-row: 1;
    width: 38.75vw;
    height: 38.75vw
}

.character-art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.character-art img.character-art-top {
    object-position: center top
}

.character-art:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, #121020, transparent 42.608%), linear-gradient(225deg, #121020, transparent 47.312%);
    pointer-events: none
}

.character-marker {
    position: relative;
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    width: 1.927083vw;
    height: 2.395833vw;
    margin-left: -15px;
}

.character-marker>img:first-child {
    display: block;
    width: 100%;
    height: 100%
}

.character-marker .character-number {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #121020;
    font: 600 18px / 1 'Times New Roman', serif;
    text-align: center;
}

.character-copy {
    grid-column: 3;
    grid-row: 1;
    width: 38.75vw;
    padding-top: .3125vw;
    font: 400 1.25vw/2.083333vw 'Times New Roman', serif
}

.character-copy h3 {
    font: 700 2.083333vw/2.395833vw 'Times New Roman', serif;
    letter-spacing: .02626vw;
    text-transform: uppercase
}

.character-copy h4 {
    margin-top: 1.09375vw;
    color: var(--gold);
    font: 700 1.458333vw/2.083333vw 'Times New Roman', serif;
    text-transform: uppercase
}

.character-description {
    margin-top: .78125vw
}

.character-facts {
    margin-top: 1.041667vw
}

.character-facts div {
    display: flex;
    gap: .32em
}

.character-facts dt {
    flex: 0 0 auto;
    color: var(--gold);
    font-weight: 400
}

.character-facts dd {
    color: #fff;
    font-size: 21.5px;
}

.character-row-reverse .character-art {
    grid-column: 3
}

.character-row-reverse .character-copy {
    grid-column: 1;
    justify-self: end;
    text-align: right
}

.character-row-reverse .character-facts div {
    justify-content: flex-end
}

@media(max-width:767px) {
    .characters-hero {
        height: 75vw;
        min-height: 300px;
        overflow: hidden
    }

    .characters-hero-image {
        width: 170%;
        max-width: none;
        left: -35%
    }

    .characters-hero h1 {
        top: 54%;
        width: 92%;
        font-size: clamp(25px, 6vw, 44px);
        line-height: 1.2;
        letter-spacing: 1px
    }

    .characters-catalogue {
        padding: 42px 20px 80px
    }

    .characters-catalogue>h2 {
        height: auto;
        font-size: 27px;
        line-height: 1.3;
        letter-spacing: 1px
    }

    .characters-books {
        height: 28px;
        margin-top: 24px;
        gap: 22px;
        font-size: 16px;
        line-height: 28px
    }

    .characters-books span {
        width: auto
    }

    .characters-books i {
        height: 18px
    }

    .characters-timeline {
        margin-top: 40px
    }

    .characters-timeline-line,
    .characters-timeline-start {
        display: none
    }

    .character-row {
        display: flex;
        flex-direction: column;
        min-height: 0;
        margin-left: 0
    }

    .character-row+.character-row {
        margin-top: 56px
    }

    .character-art,
    .character-row-reverse .character-art {
        order: 1;
        width: 100%;
        height: auto;
        aspect-ratio: 1
    }

    .character-marker {
        display: none
    }

    .character-copy,
    .character-row-reverse .character-copy {
        order: 2;
        width: 100%;
        padding-top: 20px;
        text-align: left;
        font-size: 16px;
        line-height: 1.65
    }

    .character-copy h3 {
        font-size: 28px;
        line-height: 1.3;
        letter-spacing: .5px
    }

    .character-copy h4 {
        margin-top: 8px;
        font-size: 17px;
        line-height: 1.45
    }

    .character-description,
    .character-facts {
        margin-top: 14px
    }

    .character-row-reverse .character-facts div {
        justify-content: flex-start
    }
}

@media (min-width: 320px) and (max-width: 480px) {
    .characters-hero {
        height: 66vw;
        min-height: 220px;
    }

    .characters-hero-image {
        left: -42%;
        width: 184%;
        height: 100%;
        object-fit: cover;
    }

    .characters-hero h1 {
        top: 52%;
        font-size: clamp(24px, 8vw, 34px);
        overflow-wrap: anywhere;
    }

    .characters-catalogue {
        padding: 42px 16px 58px;
    }

    .characters-catalogue > h2 {
        font-size: clamp(24px, 8vw, 30px);
    }

    .characters-books {
        gap: 12px;
        margin-top: 18px;
        font-size: 14px;
    }

    .characters-books i {
        flex: 0 0 1px;
    }

    .characters-timeline {
        margin-top: 30px;
    }

    .character-row + .character-row {
        margin-top: 44px;
    }

    .character-copy {
        padding-top: 18px;
        font-size: 15px;
        line-height: 1.65;
    }

    .character-copy h3 {
        font-size: 25px;
    }

    .character-copy h4 {
        font-size: 16px;
    }

    .character-facts div {
        display: block;
        margin-top: 8px;
    }

    .character-facts dd {
        margin-top: 2px;
        font-size: 15px;
        overflow-wrap: anywhere;
    }
}