/* Fonts */
@font-face {
    font-family: 'TheSansYota';
    src: url('../fonts/TheSansYota-W5Plain.woff2') format('woff2'),
    url('../fonts/TheSansYota-W5Plain.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'TheSansYota';
    src: url('../fonts/TheSansYota-W6SemiBold.woff2') format('woff2'),
    url('../fonts/TheSansYota-W6SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'TheSansYota';
    src: url('../fonts/TheSansYota-W6SemiBoldItalic.woff2') format('woff2'),
    url('../fonts/TheSansYota-W6SemiBoldItalic.woff') format('woff');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'TheSansYota';
    src: url('../fonts/TheSansYota-W7Bold.woff2') format('woff2'),
    url('../fonts/TheSansYota-W7Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'TheSansYota';
    src: url('../fonts/TheSansYota-W8ExtraBold.woff2') format('woff2'),
    url('../fonts/TheSansYota-W8ExtraBold.woff') format('woff');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'TheSerifYota';
    src: url('../fonts/TheSerifYota-W5PlainItalic.woff2') format('woff2'),
    url('../fonts/TheSerifYota-W5PlainItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'TheSerifYota';
    src: url('../fonts/TheSerifYota-W6SemiBold.woff2') format('woff2'),
    url('../fonts/TheSerifYota-W6SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'TheSerifYota';
    src: url('../fonts/TheSerifYota-W6SemiBoldItalic.woff2') format('woff2'),
    url('../fonts/TheSerifYota-W6SemiBoldItalic.woff') format('woff');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'TheSerifYota';
    src: url('../fonts/TheSerifYota-W7Bold.woff2') format('woff2'),
    url('../fonts/TheSerifYota-W7Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'TheSerifYota';
    src: url('../fonts/TheSerifYota-W8ExtraBold.woff2') format('woff2'),
    url('../fonts/TheSerifYota-W8ExtraBold.woff') format('woff');
    font-weight: 800;
    font-style: normal;
}

/* Root */
.b-longread-root {
    padding: 54px 0 0;
    font-size: 10px;
    color: #434c5d;
    background: #fff;
}

@media (max-width: 640px) {
    .b-longread-root {
        font-size: 1.5625vw;
    }
}

/* Container */
@media (min-width: 640px) {
    .b-longread-container {
        max-width: 100%;
        width: 108.2em;
        margin: 0 auto;
    }
}

/* Yota Button */
.b-longread-yota-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 7.5em;
    padding: 0 4.2em;
    color: #00aeef;
    background: #fff;
    border: 0.3em solid #00aeef;
    border-radius: 3.75em;
    transition-property: color, background-color;
    transition-duration: 0.3s;
}

.b-longread-yota-btn__title {
    font: normal 700 3em/1 'TheSansYota', sans-serif;
}

.b-longread-yota-btn__logo-svg,
.b-longread-yota-btn__arrow-svg {
    display: block;
    fill: currentColor;
    stroke: none;
    font-size: 1em;
}

.b-longread-yota-btn__logo-svg {
    margin-left: 1em;
}

.b-longread-yota-btn__arrow-svg {
    margin-left: 1.4em;
}

.b-longread-yota-btn:hover {
    color: #fff;
    background: #00aeef;
}

/* Intro Logo */
.b-longread-intro-logo {
    display: block;
}

.b-longread-intro-logo__img {
    display: block;
    max-width: 100%;
    width: 8.4em;
    height: auto;
}

/* Intro Quotes */
@media (min-width: 640px) {
    .b-longread-intro-quotes {
        position: relative;
        display: flex;
        align-items: center;
    }

    .b-longread-intro-quotes__head {
        color: #434c5d;
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
        transform: scale(-1);
    }

    .b-longread-intro-quotes__title {
        font: normal 700 6em/1 'TheSansYota', sans-serif;
        letter-spacing: calc(0.005em / 60);
    }

    .b-longread-intro-quotes__body {
        max-width: 100%;
        width: 75.3em;
        margin: 0 0 0 1em;
        padding: 6.8em 6.4em;
        color: #00aeef;
        background: #f4fbfe;
        border-radius: 1.4em;
    }

    .b-longread-intro-quotes__text {
        font: normal 700 4.6em/1.04 'TheSansYota', sans-serif;
        letter-spacing: calc(0.005em / 46);
    }
}

@media (max-width: 640px) {
    .b-longread-intro-quotes {
        position: relative;
        display: flex;
        align-items: center;
    }

    .b-longread-intro-quotes__head {
        color: #434c5d;
        writing-mode: vertical-rl;
        transform: scale(-1);
    }

    .b-longread-intro-quotes__title {
        font: normal 700 4.6em/1 'TheSansYota', sans-serif;
        letter-spacing: calc(0.005em / 46);
    }

    .b-longread-intro-quotes__body {
        margin: 0 0 0 1em;
        padding: 4.8em 4.4em;
        color: #00aeef;
        background: #f4fbfe;
        border-radius: 1.4em;
    }

    .b-longread-intro-quotes__text {
        font: normal 700 3.4em/1.04 'TheSansYota', sans-serif;
        letter-spacing: calc(0.005em / 34);
    }
}

/* Intro */
@media (min-width: 641px) {
    .b-longread-intro {
        position: relative;
        max-width: 100%;
        width: 148.2em;
        margin: 0 auto;
    }

    .b-longread-intro:before,
    .b-longread-intro:after {
        content: '';
        position: absolute;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .b-longread-intro:before {
        top: 0;
        left: 0;
        z-index: 1;
        width: 59.3em;
        height: 59.3em;
        background-image: url(https://static.sobaka.ru/uploads/longread/91027/intro-bg-part-1.png);
    }

    .b-longread-intro:after {
        top: 60.6em;
        left: 76.6em;
        z-index: 3;
        width: 33.6em;
        height: 46.4em;
        background-image: url(https://static.sobaka.ru/uploads/longread/91027/intro-bg-part-2.png);
    }

    .b-longread-intro__content {
        position: relative;
        z-index: 2;
        padding: 22em 0 9.5em;
    }

    .b-longread-intro__logo {
        position: absolute;
        top: 0;
        left: 0;
    }

    .b-longread-intro__title {
        max-width: 100%;
        width: calc(600em / 96);
        margin: 0 0 calc(45em / 96);
        font: normal 700 9.6em/0.8125 'TheSansYota', sans-serif;
        letter-spacing: calc(0.05em / 96);
        color: #00aeef;
    }

    .b-longread-intro__text {
        max-width: 100%;
        width: 43em;
        margin: 0 0 5em 15em;
    }

    .b-longread-intro__text p {
        font: normal 500 2.1em/1.24 'TheSansYota', sans-serif;
        letter-spacing: calc(0.005em / 21);
    }

    .b-longread-intro__text p + p {
        margin-top: calc(28em / 21);
    }

    .b-longread-intro__quotes {
        margin: 0 0 3.6em 13em;
    }

    .b-longread-intro__yota-btn {
        margin: 0 0 0 56.5em;
    }
}

@media (max-width: 640px) {
    .b-longread-intro {
        margin: 0 0 6em;
        padding: 0 3em;
        background-image: url(https://static.sobaka.ru/uploads/longread/91027/intro-bg-part-1.png);
        background-repeat: no-repeat;
        background-position: -10em 0;
        background-size: 60em auto;
    }

    .b-longread-intro__logo {
        margin: 0 0 6em;
    }

    .b-longread-intro__title {
        margin: 0 0 calc(45em / 80);
        font: normal 700 8em/0.8125 'TheSansYota', sans-serif;
        letter-spacing: calc(0.05em / 80);
        color: #00aeef;
    }

    .b-longread-intro__text {
        margin: 0 0 6em;
    }

    .b-longread-intro__text p {
        font: normal 500 2.6em/1.24 'TheSansYota', sans-serif;
        letter-spacing: calc(0.005em / 26);
    }

    .b-longread-intro__text p + p {
        margin-top: calc(30em / 26);
    }

    .b-longread-intro__quotes {
        margin: 0 0 6em;
    }
}

/* Interviewee Card */
.b-longread-interviewee-card {
    display: flex;
    max-width: 100%;
    width: 28.1em;
    color: #00aeef;
    background: #f4fbfe;
    border-radius: 1.2em;
    transition-property: color, background-color;
    transition-duration: 0.3s;
    cursor: pointer;
}

.b-longread-interviewee-card:hover,
.b-longread-interviewee-card--active {
    color: #fff;
    background: #00aeef;
}

.b-longread-interviewee-card:before {
    content: '';
    width: 1px;
    margin: 0 0 0 -1px;
    padding: calc(386 / 281 * 100%) 0 0;
}

.b-longread-interviewee-card__content {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 4em 3em 4.8em 2.5em;
}

.b-longread-interviewee-card__head {
    margin: 0 0 auto;
}

.b-longread-interviewee-card__foot {
    margin: auto 0 0;
}

.b-longread-interviewee-card__slogan {
    font: normal 700 2.4em/1.17 'TheSansYota', sans-serif;
    letter-spacing: calc(0.005em / 24);
    text-transform: uppercase;
}

.b-longread-interviewee-card__name {
    font: normal 600 1.8em/1.22 'TheSansYota', sans-serif;
    letter-spacing: calc(0.005em / 18);
}

.b-longread-interviewee-card__work {
    min-height: calc(54em / 16);
    font: italic 500 1.6em/1.125 'TheSerifYota', sans-serif;
    letter-spacing: calc(0.005em / 16);
}

@media (max-width: 640px) {
    .b-longread-interviewee-card {
        font-size: 8px;
    }
}

/* Interviewees Carousel */
.b-longread-interviewees-carousel {
    overflow: hidden;
}

.b-longread-interviewees-carousel__items {
    display: flex;
    margin: 0 -0.9em;
    -ms-touch-action: none;
}

.b-longread-interviewees-carousel__item {
    display: flex;
    flex: 0 0 auto;
    width: auto;
    padding: 0 0.9em;
    -ms-touch-action: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Interviewees */
.b-longread-interviewees {
    margin: 0 0 16em;
}

.b-longread-interviewees__carousel {
    margin: 0 0 6em;
}

/* Interviewee Slogan */
@keyframes marquee {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(-100%, 0);
    }
}

.b-longread-interviewee-slogan {
    display: flex;
    overflow: hidden;
}

.b-longread-interviewee-slogan__text {
    flex: 0 0 auto;
    font: normal 700 9.6em/1 'TheSansYota', sans-serif;
    letter-spacing: calc(0.05em / 96);
    white-space: nowrap;
    color: #00aeef;
    animation: marquee 15s linear infinite;
}

@media (max-width: 640px) {
    .b-longread-interviewee-slogan__text {
        font-size: 6em;
        letter-spacing: calc(0.05em / 60);
    }
}

/* Interviewee */
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.b-longread-interviewee {
    padding: 9.7em 0 0;
    background: url(https://static.sobaka.ru/uploads/longread/91027/interviewee-bg.png) no-repeat 50% 0;
    overflow: hidden;
    animation: fadeIn 1.2s;
}

.b-longread-interviewee__cols {
    display: flex;
    margin: 0 -1.3em;
}

.b-longread-interviewee__cols--align-center {
    align-items: center;
}

.b-longread-interviewee__col {
    width: 50%;
    padding: 0 1.3em;
}

.b-longread-interviewee__photo {
    display: block;
    max-width: 100%;
    height: auto;
}

.b-longread-interviewee__intro {
    padding: 8.5em 0 0;
}

.b-longread-interviewee__name {
    font: normal 800 4.6em/1.25 'TheSerifYota', sans-serif;
    letter-spacing: calc(0.005em / 46);
}

.b-longread-interviewee__name strong {
    display: block;
    line-height: 1;
    text-transform: uppercase;
}

.b-longread-interviewee__work {
    margin: 0 0 calc(35em / 30);
    font: italic 600 3em/1.2 'TheSerifYota', sans-serif;
}

.b-longread-interviewee__text {
    max-width: 51em;
}

.b-longread-interviewee__text a {
    color: #00aeef;
    transition: opacity 0.3s;
}

.b-longread-interviewee__text a:hover {
    opacity: 0.8;
}

.b-longread-interviewee__text p {
    font: normal 500 2.2em/1.23 'TheSansYota', sans-serif;
}

.b-longread-interviewee__text p + p {
    margin-top: calc(25em / 22);
}

.b-longread-interviewee__slogan {
    padding: 7.6em 4em;
}

.b-longread-interviewee__spacing-1 {
    margin: 0 0 6em;
}

@media (max-width: 640px) {
    .b-longread-interviewee__cols {
        display: block;
        margin: 0;
    }

    .b-longread-interviewee__col {
        width: 100%;
        padding: 0 3em;
    }

    .b-longread-interviewee__col + .b-longread-interviewee__col {
        margin-top: 6em;
    }

    .b-longread-interviewee__photo {
        margin: 0 auto;
    }

    .b-longread-interviewee__intro {
        padding: 0;
    }

    .b-longread-interviewee__name {
        font-size: 5.6em;
    }

    .b-longread-interviewee__text {
        max-width: none;
    }

    .b-longread-interviewee__text p {
        font-size: 2.6em;
    }

    .b-longread-interviewee__text p + p {
        margin-top: calc(26em / 25);
    }
}

/* Related */
.b-longread-related {
    margin: 0 0 8em;
}

.b-longread-related__title {
    margin: 0 0 calc(35em / 24);
    font: italic 600 2.4em/2 'TheSerifYota', sans-serif;
    letter-spacing: calc(0.005em / 24);
    text-align: center;
}