:root {
    --white: #FFFFFF;
    --brusnika-red: #FF001F;
    --graphite: #1E1E1E;
    --graphite-50: oklch(from var(--graphite) l c h / 50%);
    --graphite-20: oklch(from var(--graphite) l c h / 20%);
}

html {
    scroll-behavior: smooth;
}

*,
::before,
::after {
    font-synthesis: none !important;
    -webkit-font-smoothing: antialiased;

    margin: 0;
    padding: 0;

    box-sizing: border-box;

    -webkit-tap-highlight-color: oklch(from var(--brusnika-red) l c h / 10%);
}

*:focus {
    outline: none;
}

::selection,
.highlight {
    color: var(--white);
    background: var(--brusnika-red);
}

.highlight {
    padding: 0 4px;
}

.rounded-s {
    border-radius: 6px;
    corner-shape: superellipse(1.25);
}

.safe-border {
    border: 1px solid var(--graphite-20);
    box-sizing: border-box;
}

a.anchor {
    display: block;
    position: relative;
    top: -200px;
    visibility: hidden;
}

@font-face {
    font-family: 'Formular';
    src:
        url('fonts/formular-regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'FormularMedium';
    src:
        url('fonts/formular-medium.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

body {
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAASElEQVR4AXSOgQkAIAgEzTGC9h8saI3qAkHwi+LFu0q3u7aNfkNuBzabi1SGBySlQPMHYW8Ginzyd0UA8iLJpSIEJKVAMyD1AQAA//9QHJj2AAAABklEQVQDAEq0GBFoNz1QAAAAAElFTkSuQmCC'), var(--white);
    margin: 0 auto;

    font-family: 'Formular';
    font-size: 18px;
    line-height: 20px;
    letter-spacing: -2%;
    color: var(--graphite);
    image-rendering: crisp-edges;

    display: flex;
    flex-direction: column;
    gap: 0px;
    height: 100dvh;

    word-break: break-word;
    hyphens: auto;
    /* text-wrap-style: pretty; */
}

h1,
h2,
h3 {
    word-break: normal;
    hyphens: none;
}

h1 {
    font-family: 'FormularMedium';
    letter-spacing: -4%;
    font-feature-settings: "ss03";
    font-size: 32px;
    line-height: 32px;
}

h2 {
    font-family: 'Formular';
    letter-spacing: -2%;
    font-feature-settings: "ss03";
    font-size: 24px;
    line-height: 24px;
}

h3 {
    font-family: 'FormularMedium';
    padding-top: 16px;
}

p {
    line-height: 24px;
}

.heading-subscript {
    color: var(--graphite-50);
    hyphens: none;
}

a {
    color: var(--brusnika-red);
    text-decoration-skip-ink: none;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

img {
    border-radius: 6px;
    corner-shape: superellipse(1.25);
}

.quote {
    font-family: sans-serif;
    font-style: italic;
    /* color: var(--brusnika-red); */
}

header {
    display: flex;
    gap: 8px;
    align-items: baseline;
    justify-content: space-between;

    background: var(--white);
    color: var(--brusnika-red);
    border-bottom: 1px solid var(--graphite-20);

    font-family: "FormularMedium";

    padding: 16px;

    /* position: fixed;
    top: 0; */
    z-index: 1;

    text-transform: uppercase;
    letter-spacing: 4%;
    font-size: 14px;

    a {
        text-decoration: none;
    }
}

/* Селект */

.select-wrap {
    flex: 1;
    display: flex;
}

/* ============ Fallback custom select (non base-select browsers) ============ */

.select-wrap {
    position: relative;
    width: 100%;
}

/* Real <select> stays in the DOM for form submission,
   but is visually hidden and out of layout flow. */
.visually-hidden-but-focusable {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.fake-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 16px;
    border: 1px solid var(--graphite-20);
    border-radius: 8px;
    corner-shape: superellipse(1.6);
    background: var(--white);
    font: inherit;
    text-align: left;
    color: inherit;
    cursor: pointer;
    transition: border-color 200ms ease;
}

.fake-select-trigger:hover {
    border-color: var(--graphite-50);
    transition-duration: 0ms;
}

.fake-select-trigger:focus-visible {
    outline: 2px solid var(--graphite-50);
    outline-offset: 2px;
}

.fake-select-trigger::after {
    content: '';
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    background: url('data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M14%205L8%2011L2%205%22%20stroke%3D%22%231E1E1E%22%2F%3E%3C%2Fsvg%3E') no-repeat center / contain;
    transition: rotate 400ms ease;
}

/* trigger flips its own arrow — toggled by JS adding this class */
.select-wrap.is-open .fake-select-trigger {
    border-radius: 8px 8px 0 0;
}

.select-wrap.is-open .fake-select-trigger::after {
    rotate: -180deg;
}

.fake-select-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--white);
    border: 1px solid oklch(from var(--graphite) l c h / 20%);
    border-top: none;
    border-radius: 0 0 8px 8px;
    corner-shape: superellipse(1.6);
    max-height: 280px;
    overflow-y: auto;

    li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 16px;
        cursor: pointer;

        &:not(:last-of-type) {
            border-bottom: 1px solid var(--graphite-20);
        }

        &:hover:not(.is-disabled) {
            background: rgba(246, 245, 244, 1);
        }

        &[aria-selected="true"] {
            background: rgba(246, 245, 244, 1);
            font-weight: 500;
        }

        &.is-disabled {
            cursor: not-allowed;
            color: var(--graphite-50);
        }

        .soon-badge {
            flex-shrink: 0;
            color: var(--graphite-50);
        }
    }
}

.fake-select-list[hidden] {
    display: none;
}

/* .fake-select-list  */

@supports (appearance: base-select) and (selector(::picker(select))) {

    select,
    ::picker(select) {
        appearance: base-select;
    }

    select::picker-icon {
        content: url('data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M14%205L8%2011L2%205%22%20stroke%3D%22%231E1E1E%22%2F%3E%3C%2Fsvg%3E');
        width: 20px;
        height: 20px;

        transition: rotate 400ms ease;
    }

    select:open::picker-icon {
        rotate: -180deg;
    }

    select {
        padding: 16px;
        flex: 1;
        border: 1px solid var(--graphite-20);
        border-radius: 8px;
        corner-shape: superellipse(1.6);
        background: var(--white);

        transition: border-color 200ms ease;

        &:hover {
            border: 1px solid var(--graphite-50);
            background: var(--white);

            transition-duration: 0ms;
        }

        option {
            padding: 16px;

            &:not(:last-of-type) {
                border-bottom: 1px solid var(--graphite-20);
            }

            &:hover {
                background: rgba(246, 245, 244, 1);
            }
        }

        option:disabled {
            &:after {
                content: 'Скоро';
                display: block;
                flex: 1;
                width: 16px;
                height: 16px;

                /* color: var(--brusnika-red); */
                text-align: right;
                /* text-transform: uppercase; */
            }
        }
    }

    ::picker(select) {
        border: 1px solid oklch(from var(--graphite) l c h / 20%);
        border-top: none;
        border-radius: 0 0 8px 8px;
        corner-shape: superellipse(1.6);
        margin: 0;
    }

    select:open {
        border-radius: 8px 8px 0 0;
    }
}

/* Посадочная */

.route-variant {
    display: none;
    flex-direction: column;
    gap: 12px;

    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms ease, visibility 200ms ease;
}

.empty-choice {
    width: stretch;
    height: stretch;
    max-width: 460px;
    margin: 0 -16px;
    overflow: hidden;

    display: flex;
    align-items: flex-end;

    transition: opacity 200ms ease, visibility 200ms ease;

    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;

    img {
        flex: 1;
    }

    @media (max-width: 991px) {
        max-width: unset;
    }
}

/* Карта */

.map-list {
    display: flex;
    gap: 0;
    width: 100%;
    height: calc(100vh - 52px);
    overflow-y: hidden;

    .map {
        flex: 1;
        height: 100vh;
        top: 0;

        @media (max-width: 991px) {
            flex: unset;
            width: 100%;
            height: 100vh;
            top: 0;
        }

        .maplibregl-ctrl-bottom-right {
            z-index: unset;
            display: none;
        }

        .maplibregl-user-location-dot,
        .maplibregl-user-location-accuracy-circle {
            display: none;
        }
    }

    .list {
        flex: 1;
        max-width: 440px;
        display: flex;
        flex-direction: column;
        gap: 36px;
        padding: 32px 16px 64px;
        overflow-y: scroll;
        overflow-x: hidden;

        background: var(--white);
        border-left: 1px solid var(--graphite-20);

        @media (max-width: 991px) {
            flex: unset;
            width: 100%;
            height: 100vh;
            top: 0;
            max-width: unset;
            border-left: none;
            padding-top: 100px;
            padding-bottom: 160px;
        }

        .point-card {
            text-decoration: none;
            color: var(--graphite);

            display: flex;
            flex-direction: column;
            gap: 12px;

            position: relative;

            img {
                width: 400px;
                height: 240px;
                background-color: var(--graphite-20);
                object-fit: cover;

                @media (max-width: 991px) {
                    width: 100%;
                }
            }

            .visited-badge {
                display: none;
                position: absolute;
                top: 8px;
                left: 8px;

                background: var(--graphite);
                color: var(--white);
                padding: 4px 8px;
                border-radius: 2px;
            }

            &.is-visited .visited-badge {
                display: block;
            }

            .point-text {
                display: flex;
                gap: 12px;

                .point-meta {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    gap: 4px;
                }

                .num {
                    font-size: 48px;
                    line-height: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    height: 64px;
                    min-width: 64px;
                    border-radius: 32px;
                    border: 1px solid var(--graphite-20);
                    text-align: center;
                    white-space: nowrap;

                    padding: 0 16px;
                    padding-bottom: 4px;
                }
            }
        }
    }
}

@media (max-width: 991px) {
    body:has(#map:checked) .map-list .list {
        display: none;
    }

    body:has(#list:checked) .map-list .map {
        display: none;
    }
}

.img-caption {
    flex: 1;
    position: relative;

    border-radius: 6px;
    corner-shape: superellipse(1.25);

    img {
        width: 100%;
        object-fit: cover;
    }

    .caption {
        position: absolute;
        left: 0px;
        right: 0px;
        bottom: 0px;
        padding: 8px 8px 16px;
        background: linear-gradient(transparent, #000);
        border-radius: 0 0 6px 6px;
        corner-shape: superellipse(1.25);
        color: var(--white);

        a {
            color: var(--white);
        }
    }
}

.row-of-images {
    display: flex;
    gap: 8px;
    overflow-x: scroll;
    overflow-y: hidden;
    margin: 4px -16px;
    padding: 0 16px;
    scrollbar-width: none;

    &>* {
        min-width: 85%;
        width: 85%;
        object-fit: cover;
        max-height: 400px;
    }

    .img-caption {
        img {
            height: -webkit-fill-available;
        }
    }
}

.tip {
    display: inline-block;
    cursor: help;

    text-decoration: underline dotted;
    text-decoration-color: inherit;
    text-underline-offset: 4px;

    &::after {
        color: var(--graphite);

        font-family: "Formular", sans-serif;
        text-align: left;
        line-height: 120%;
        font-size: 16px;

        content: attr(data-tip);
        position: absolute;
        left: 16px;
        right: 16px;
        margin-top: 28px;

        background: var(--white);
        border: 1px solid var(--graphite-20);
        border-radius: 6px;
        corner-shape: superellipse(1.25);
        padding: 8px 8px 16px;
        box-shadow: 0px 4px 4px var(--graphite-20);
        filter: drop-shadow(0px 24px 24px var(--graphite-50));

        pointer-events: none;
        opacity: 0;
        transition: opacity 200ms ease;

        z-index: 1;
    }

    &:hover::after {
        opacity: 1;
    }
}

.person-link {
    color: var(--brusnika-red);
    text-decoration: underline dotted;
    text-decoration-color: inherit;
    text-underline-offset: 4px;
    cursor: pointer;
}

.persona-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: var(--graphite-50);
    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms ease, visibility 200ms ease;
    z-index: 100;
}

.persona-sheet-backdrop.is-open {
    opacity: 1;
    visibility: visible;
}

.persona-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 85vh;
    max-width: 460px;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    gap: 20px;

    border-radius: 12px 12px 0 0;
    corner-shape: superellipse(1.25);

    overflow-y: auto;
    overflow-x: hidden;

    background: var(--white);
    transform: translateY(100%);
    transition: transform 250ms ease;
    z-index: 101;
    padding: 36px 16px;

    scrollbar-color: var(--brusnika-red);
    scrollbar-width: thin;
    scrollbar-gutter: stable;

    @media (max-width: 991px) {
        /* max-width: unset; */
    }

    .persona-sheet-handle {
        touch-action: none;
        cursor: grab;
        position: absolute;

        width: -webkit-fill-available;
        width: stretch;
        height: 36px;
        top: 0;
        left: 0;

        &::after {
            content: '';
            display: block;
            position: relative;

            width: 40px;
            height: 4px;
            top: 50%;
            transform: translateY(-2px);

            background: var(--graphite-20);
            border-radius: 24px;
            margin: 0 auto 12px;

            cursor: grab;
        }
    }

    .persona-sheet-close {
        position: absolute;
        top: 0;
        right: 0;
        border: none;
        background: none;
        cursor: pointer;

        width: 64px;
        height: 64px;

        font-size: 24px;
    }

    .persona-sheet-facts {
        display: flex;
        gap: 12px;
        align-items: flex-end;

        .persona-sheet-photo {
            height: 180px;
            width: 140px;
            object-fit: cover;
        }

        .persona-sheet-name-years {
            display: flex;
            flex-direction: column;
            gap: 0px;
        }
    }

    .persona-sheet-bio {
        white-space: pre-line;
    }
}

.persona-sheet-backdrop.is-open .persona-sheet {
    transform: translateY(0);
}

.accent {
    display: flex;
    padding: 12px;
    padding-left: 50%;
    position: relative;

    background: var(--bg-url);
    background-size: cover;

    color: var(--white);

    .accent-content {
        background: linear-gradient(to right, transparent 0%, #000 25%);
        margin: -12px;
        padding: 12px;
        padding-bottom: 24px;
        border-radius: 0 6px 6px 0;
        corner-shape: superellipse(1.25);

        display: flex;
        flex-direction: column;
        gap: 12px;
    }
}

.persona {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background-color: var(--graphite);
    color: var(--white);

    padding: 16px;
    padding-bottom: 32px;
    margin-top: 32px;

    .nameplate {
        display: flex;
        gap: 12px;
        align-items: last baseline;
        margin-top: -48px;

        img {
            width: 100px;
            aspect-ratio: 1 / 1.5;
            object-fit: cover;
        }
    }
}

.row-of-people {
    display: flex;
    gap: 12px;
    margin: 0 -16px;
    padding: 0 16px;
    overflow-x: scroll;
    overflow-y: hidden;
    scrollbar-width: none;

    .persona-caption {
        display: flex;
        flex-direction: column;
        gap: 8px;
        color: var(--graphite-50);

        text-decoration: none;

        img {
            height: 180px;
            width: 140px;
            object-fit: cover;
        }
    }
}

.timeline {
    display: flex;
    gap: 32px;
    margin: 0 -16px;
    padding: 24px 16px;
    overflow-x: scroll;
    overflow-y: hidden;
    scrollbar-width: none;
    position: relative;

    border-bottom: 1px solid var(--brusnika-red);

    .image-caption {
        position: relative;

        .image-for-caption {
            height: 180px;
            width: 240px;
            object-fit: cover;
            position: relative;
        }

        .overscript {
            position: absolute;
            height: auto;
            pointer-events: none;
        }

        &::after {
            content: '';
            display: block;
            position: absolute;
            left: 0;
            bottom: -24px;
            width: 16px;
            height: 16px;
            border-left: 1px solid var(--brusnika-red);
        }
    }
}

.factoids {
    display: flex;
    gap: 16px;

    &>* {
        flex: 1;
        text-align: center;

        p {
            color: var(--graphite-50);
        }
    }
}

.chapters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;

    &>* {
        padding: 8px;
        border-radius: 6px;
        corner-shape: superellipse(1.25);
        border: 1px solid var(--graphite-20);

        text-decoration: none;
        color: inherit;
    }
}

.chapters-heading {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    margin-top: -40px;

    .chapters {
        gap: 12px;
        flex-wrap: nowrap;
        overflow-x: scroll;
        overflow-y: hidden;
        margin: 0 -16px;
        padding: 0 16px;
        scrollbar-width: none;

        &>* {
            white-space: nowrap;
        }
    }
}

/* Route point */

.route-point-selector {
    display: flex;
    flex-direction: column;
    gap: 8px;

    position: sticky;
    top: 0;
    z-index: 2;

    padding: 8px 16px;
    margin: -8px -16px;

    background: var(--white);
    border-bottom: 1px solid var(--graphite-20);

    .general-nav {
        display: flex;
        gap: 12px;

        a {
            flex: 1;
            max-width: unset;
        }

        a:last-of-type {
            display: none;
        }

        @media (max-width: 991px) {
            a:last-of-type {
                display: flex;
            }
        }
    }

    .route-nav {
        display: flex;
        gap: 12px;

        .nav-button {
            max-width: 48px;
            height: 48px;
            border-radius: 50%;
            corner-shape: round;
            line-height: 0;
            font-size: 20px;
            position: relative;

            span {
                position: relative;
                top: -1px;
            }
        }

        .current-point {
            display: inline-block;
            min-width: 32px;
            /* width: 32px; */
            height: 32px;
            border-radius: 16px;
            position: relative;

            padding: 0 8px;
            padding-top: 6px;

            font-size: 24px;
            text-align: center;
            user-select: none;
            background: var(--brusnika-red);
            color: var(--white);
        }

        .block {
            flex: 1;

            h3 {
                padding-top: 0;
            }
        }
    }
}

.longread {
    background: var(--white);
    display: flex;
    position: relative;
    flex-direction: column;
    gap: 48px;
    padding: 8px 16px;

    max-width: 460px;
    margin: 0 auto auto;
    flex: max-content;

    border: 1px solid var(--graphite-20);
    border-top: none;
    border-bottom: none;

    @media (max-width: 991px) {
        max-width: unset;
        margin: unset;
        border: none;
    }

    .block {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .block-8 {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .block-12 {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .chapter {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .directions {
        display: flex;
        gap: 16px;

        border-radius: 12px;
        corner-shape: superellipse(1.25);
        padding: 16px;
        background: var(--graphite);
        color: var(--white);
        font-family: 'FormularMedium';

        img {
            min-width: 64px;
            height: 64px;
        }
    }

    .end-tag {
        display: flex;
        gap: 32px;
        justify-content: center;
        position: relative;

        margin: 0 -16px;
        overflow: hidden;
        padding: 8px 0;

        img {
            user-select: none;
            transform-origin: bottom center;
            animation: shake 500ms 50ms infinite cubic-bezier(0.75, 0, 0.25, 1) both paused;
            image-rendering: auto;

            &:hover {
                animation-play-state: running;
            }
        }
    }
}

@keyframes shake {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }

    100% {
        transform: translateY(0);
    }
}

.collapser {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border: 1px solid var(--brusnika-red);
    border-radius: 8px;
    corner-shape: superellipse(1.25);
    padding: 8px 16px;
    padding-bottom: 24px;
    transition: all 200ms ease;
    min-height: 44px;

    .collapser-wrap {
        display: flex;
        flex: 1;
        user-select: none;
        align-items: center;

        label {
            flex: 1;
            cursor: pointer;
            color: var(--brusnika-red);
            padding: 12px;
            padding-left: 16px;
            padding-right: 56px;
            margin: -16px;
            display: flex;
            margin-right: -40px;
        }

        input {
            appearance: none;
            cursor: pointer;

            width: 24px;
            height: 24px;
            content: url('data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M9.99999%202.5C10.276%202.50007%2010.4999%202.72396%2010.5%203V5.01367C11.4628%205.06846%2012.3486%205.27846%2013.1504%205.58008L14.0527%203.77637C14.1763%203.52954%2014.4767%203.42932%2014.7236%203.55273C14.9705%203.67622%2015.0706%203.9767%2014.9473%204.22363L14.0674%205.98242C14.8282%206.36062%2015.4959%206.8096%2016.0625%207.26074C16.0848%207.21998%2016.112%207.181%2016.1465%207.14648L17.6465%205.64648C17.8417%205.45138%2018.1583%205.45128%2018.3535%205.64648C18.5487%205.84169%2018.5486%206.15824%2018.3535%206.35352L16.8535%207.85352C16.8369%207.87016%2016.818%207.88366%2016.7998%207.89746C17.2265%208.29423%2017.5741%208.66761%2017.834%208.97266C18.0212%209.19249%2018.1642%209.37708%2018.2617%209.50781C18.3105%209.5732%2018.3483%209.62556%2018.374%209.66211C18.3868%209.68024%2018.3973%209.69489%2018.4043%209.70508C18.4076%209.70991%2018.4101%209.7139%2018.4121%209.7168C18.4131%209.71829%2018.4144%209.71975%2018.415%209.7207V9.72168L18.416%209.72266L18.4531%209.78809C18.5159%209.92217%2018.5159%2010.0778%2018.4531%2010.2119L18.416%2010.2773L18.415%2010.2793C18.4144%2010.2803%2018.4131%2010.2817%2018.4121%2010.2832C18.4101%2010.2861%2018.4076%2010.2901%2018.4043%2010.2949C18.3973%2010.3051%2018.3868%2010.3198%2018.374%2010.3379C18.3483%2010.3744%2018.3105%2010.4268%2018.2617%2010.4922C18.1642%2010.6229%2018.0212%2010.8075%2017.834%2011.0273C17.4597%2011.4667%2016.9069%2012.0513%2016.1914%2012.6367C14.764%2013.8046%2012.6554%2015%209.99999%2015C7.34454%2015%205.236%2013.8046%203.80858%2012.6367C3.09308%2012.0513%202.54025%2011.4667%202.16601%2011.0273C1.97875%2010.8075%201.83581%2010.6229%201.73827%2010.4922C1.68949%2010.4268%201.65169%2010.3744%201.62597%2010.3379C1.61321%2010.3198%201.60267%2010.3051%201.59569%2010.2949C1.59239%2010.2901%201.58984%2010.2861%201.58788%2010.2832C1.58688%2010.2817%201.58561%2010.2803%201.58495%2010.2793V10.2783L1.58397%2010.2773C1.47201%2010.1094%201.47201%209.89061%201.58397%209.72266L1.58495%209.72168V9.7207C1.58561%209.71974%201.58688%209.71828%201.58788%209.7168C1.58984%209.7139%201.59239%209.7099%201.59569%209.70508C1.60267%209.69489%201.61321%209.68023%201.62597%209.66211C1.65169%209.62556%201.68949%209.5732%201.73827%209.50781C1.83581%209.37707%201.97875%209.19249%202.16601%208.97266C2.42577%208.66772%202.77271%208.29406%203.19921%207.89746C3.18118%207.88378%203.16293%207.86997%203.14647%207.85352L1.64647%206.35352C1.45137%206.15824%201.45127%205.84169%201.64647%205.64648C1.84168%205.45128%202.15823%205.45138%202.35351%205.64648L3.85351%207.14648C3.88791%207.18088%203.91423%207.22014%203.93651%207.26074C4.50316%206.80952%205.17074%206.35973%205.93163%205.98145L5.05272%204.22363C4.92939%203.9767%205.02948%203.67622%205.27636%203.55273C5.52327%203.42932%205.82371%203.52954%205.94726%203.77637L6.84862%205.58008C7.65064%205.2783%208.53686%205.06846%209.49999%205.01367V3C9.50006%202.72396%209.72395%202.50007%209.99999%202.5ZM14.4492%207.33887C14.4813%207.55535%2014.5%207.77656%2014.5%208.00195C14.5%2010.4872%2012.4852%2012.5019%209.99999%2012.502C7.51471%2012.502%205.49999%2010.4872%205.49999%208.00195C5.49999%207.77667%205.51703%207.55531%205.54882%207.33887C5.14458%207.59187%204.77507%207.86371%204.4414%208.13672C3.78201%208.67621%203.27223%209.21669%202.92772%209.62109C2.80275%209.7678%202.69999%209.89651%202.62011%2010C2.69999%2010.1035%202.80275%2010.2322%202.92772%2010.3789C3.27223%2010.7833%203.78201%2011.3238%204.4414%2011.8633C5.76397%2012.9454%207.65551%2014%209.99999%2014C12.3445%2014%2014.236%2012.9454%2015.5586%2011.8633C16.218%2011.3238%2016.7278%2010.7833%2017.0723%2010.3789C17.197%2010.2324%2017.2991%2010.1034%2017.3789%2010C17.2991%209.89659%2017.197%209.76758%2017.0723%209.62109C16.7278%209.2167%2016.218%208.67622%2015.5586%208.13672C15.2245%207.86341%2014.854%207.59212%2014.4492%207.33887ZM9.99999%206C8.79165%206%207.70375%206.28054%206.75194%206.7002C6.59022%207.10267%206.49999%207.54161%206.49999%208.00195C6.49999%209.93495%208.06699%2011.502%209.99999%2011.502C11.9329%2011.5019%2013.5%209.93492%2013.5%208.00195C13.5%207.54134%2013.4082%207.10274%2013.2461%206.7002C12.2947%206.28092%2011.2077%206.00001%209.99999%206Z%22%20fill%3D%22%23FF001F%22%2F%3E%3C%2Fsvg%3E');
        }
    }

    .hide-me {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }


    .hide-me {
        transition: all 200ms ease;
        transition-behavior: allow-discrete;
    }

    &:has(input:not(:checked)) {
        padding-bottom: 8px;

        input {
            content: url('data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1.72266%209.58398C1.95241%209.43089%202.26286%209.49293%202.41602%209.72266L2.41699%209.72363C2.41787%209.72501%202.41894%209.72761%202.4209%209.73047C2.42552%209.73722%202.43321%209.74828%202.44336%209.7627C2.46402%209.79205%202.49617%209.83704%202.53906%209.89453C2.6251%2010.0098%202.75581%2010.1771%202.92773%2010.3789C3.27224%2010.7833%203.78209%2011.3238%204.44141%2011.8633C5.76398%2012.9453%207.65559%2014%2010%2014C12.3444%2013.9999%2014.2361%2012.9454%2015.5586%2011.8633C16.218%2011.3238%2016.7278%2010.7833%2017.0723%2010.3789C17.2443%2010.177%2017.3749%2010.0098%2017.4609%209.89453C17.5039%209.83695%2017.536%209.79204%2017.5566%209.7627C17.5669%209.74817%2017.5745%209.7372%2017.5791%209.73047C17.5811%209.7275%2017.5821%209.72497%2017.583%209.72363L17.584%209.72266L17.6484%209.64453C17.8136%209.48088%2018.0763%209.44997%2018.2773%209.58398C18.4781%209.71795%2018.5511%209.97223%2018.4639%2010.1875L18.416%2010.2773L18.415%2010.2793C18.4144%2010.2803%2018.4131%2010.2817%2018.4121%2010.2832C18.4102%2010.2861%2018.4076%2010.2901%2018.4043%2010.2949C18.3973%2010.3051%2018.3868%2010.3198%2018.374%2010.3379C18.3483%2010.3744%2018.3105%2010.4268%2018.2617%2010.4922C18.1642%2010.6229%2018.0212%2010.8075%2017.834%2011.0273C17.5742%2011.3323%2017.2263%2011.705%2016.7998%2012.1016C16.8182%2012.1154%2016.8367%2012.1297%2016.8535%2012.1465L18.3535%2013.6465C18.5486%2013.8417%2018.5487%2014.1583%2018.3535%2014.3535C18.1583%2014.5487%2017.8418%2014.5486%2017.6465%2014.3535L16.1465%2012.8535C16.1118%2012.8188%2016.0849%2012.7793%2016.0625%2012.7383C15.4959%2013.1895%2014.8282%2013.6383%2014.0674%2014.0166L14.9473%2015.7764C15.0706%2016.0233%2014.9704%2016.3238%2014.7236%2016.4473C14.4767%2016.5707%2014.1763%2016.4704%2014.0527%2016.2236L13.1504%2014.4189C12.3486%2014.7206%2011.4629%2014.9305%2010.5%2014.9854V17C10.4999%2017.276%2010.276%2017.4999%2010%2017.5C9.72391%2017.5%209.50007%2017.2761%209.5%2017V14.9854C8.53677%2014.9306%207.65071%2014.7208%206.84863%2014.4189L5.94727%2016.2236C5.82374%2016.4705%205.52329%2016.5707%205.27637%2016.4473C5.02943%2016.3238%204.92935%2016.0233%205.05273%2015.7764L5.93164%2014.0176C5.17069%2013.6392%204.50319%2013.1896%203.93652%2012.7383C3.91419%2012.7792%203.88812%2012.8189%203.85352%2012.8535L2.35352%2014.3535C2.15826%2014.5487%201.84172%2014.5487%201.64648%2014.3535C1.45126%2014.1583%201.45133%2013.8418%201.64648%2013.6465L3.14648%2012.1465C3.16308%2012.1299%203.18102%2012.1153%203.19922%2012.1016C2.77294%2011.7051%202.42569%2011.3322%202.16602%2011.0273C1.97882%2010.8076%201.83582%2010.6229%201.73828%2010.4922C1.68956%2010.4269%201.6517%2010.3744%201.62598%2010.3379C1.61328%2010.3198%201.60268%2010.3051%201.5957%2010.2949C1.59245%2010.2902%201.58984%2010.2861%201.58789%2010.2832C1.58693%2010.2818%201.58564%2010.2803%201.58496%2010.2793V10.2783L1.58398%2010.2773C1.43081%2010.0476%201.49289%209.73716%201.72266%209.58398Z%22%20fill%3D%22%23FF001F%22%2F%3E%3C%2Fsvg%3E');
        }


        .hide-me {
            height: 0;
            opacity: 0;
            margin-top: -12px;
            pointer-events: none;
        }
    }
}

.before-after {
    position: relative;
    --pos: 50%;
    /* pan-y, not none: the drag is horizontal-only, so let the browser keep
       handling vertical scroll natively everywhere on this element (most of
       it isn't even in the drag's hit zone) — none blocked page scroll
       entirely for any touch that landed on the image. */
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;

    &>* {
        width: 100%;
        height: 480px;
        object-fit: cover;
        -webkit-user-drag: none;
        user-drag: none;
        pointer-events: none;
    }

    &>*:not(:first-child) {
        position: absolute;
        top: 0;
        left: 0;

        /* Fallback for the pre-JS instant (before-after.js sets an inline
           clip-path with a literal percentage on load, which is what
           actually drives this — see the comment there for why). */
        -webkit-clip-path: inset(0 0 0 var(--pos));
        clip-path: inset(0 0 0 var(--pos));
    }

    &::before {
        content: '||';
        text-align: center;
        color: var(--white);
        line-height: 22px;
        display: block;
        position: absolute;
        width: 24px;
        height: 24px;
        top: calc(50% - 8px);
        left: calc(var(--pos) - 12px);
        background: var(--brusnika-red);
        border-radius: 50%;
        z-index: 1;
    }

    &::after {
        content: '';
        display: block;
        position: absolute;
        width: 1px;
        height: calc(100% + 8px);
        top: -4px;
        left: var(--pos);
        background: var(--brusnika-red);
    }
}

/* Buttons */

.button {
    text-decoration: none;
    color: var(--graphite);
    background: var(--white);
    border: 1px solid var(--graphite-20);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;

    width: 100%;
    /* max-width: 240px; */
    text-align: center;
    align-content: center;

    border-radius: 6px;
    corner-shape: superellipse(1.25);
    padding: 12px 0;

    cursor: pointer;

    @media (max-width: 991px) {
        max-width: unset;
    }
}

.button-red {
    background: var(--brusnika-red);
    color: var(--white);
    border: none;
}

.pin-panel.no-bg.route-cta {
    position: fixed;
    z-index: 1;

    left: calc((100vw - 440px) / 2);
    transform: translateX(-50%);
    max-width: 240px;

    @media (max-width: 991px) {
        left: 0;
        right: 0;
        max-width: unset;
        transform: unset;
        margin: 0;
        padding: 16px 16px 24px;
    }
}

/* Bottom controls */

.pin-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;

    background: var(--white);
    border-top: 1px solid var(--graphite-20);

    width: -webkit-fill-available;
    width: stretch;
    padding: 12px 16px 24px;
    margin: 0 -16px;

    position: sticky;
    align-self: center;
    bottom: 0;
    z-index: 1;

    &>* {
        pointer-events: all;
    }
}

.pin-panel-top {
    display: flex;
    flex-direction: column;
    gap: 12px;

    background: linear-gradient(var(--white), transparent);
    border: none;
    /* padding: 100px 8px 24px; */
    pointer-events: none;

    width: stretch;
    width: -webkit-fill-available;
    padding: 12px 16px 48px;

    position: fixed;
    align-self: center;
    top: 53px;
    z-index: 1;

    &>* {
        pointer-events: all;
    }
}

.no-bg {
    /* background: none; */
    background: linear-gradient(transparent, var(--white));
    border: none;
    padding: 64px 8px 24px;
    pointer-events: none;
    margin-top: -64px;

    &:has(#route-cta) {
        background: none;

        @media (max-width:991px) {
            background: linear-gradient(transparent, var(--white));
        }
    }
}

.segmented-control {
    flex-direction: row;
    gap: 0;
    justify-content: center;

    &>* {
        cursor: pointer;
    }

    input {
        display: none;

        &:checked+label {
            background: var(--brusnika-red);
            color: var(--white);
            border: none;

            svg {
                fill: var(--white);
            }
        }

    }

    label {
        height: 48px;
        display: flex;
        gap: 4px;
        flex: 1;
        justify-content: center;
        align-content: center;
        flex-wrap: wrap;

        background: var(--white);
        border: 1px solid var(--graphite-20);
        box-sizing: border-box;

        svg {
            fill: var(--graphite);
        }

        &:first-of-type {
            border-radius: 24px 0 0 24px;
            border-right: none;
        }

        &:not(:first-of-type) {
            border-radius: 0 24px 24px 0;
            border-left: none;
        }
    }
}

.mobile-only {
    visibility: hidden;

    @media (max-width: 991px) {
        visibility: visible;
    }
}

/* Banner */

.sovremennik-banner {
    background: var(--graphite);
    color: var(--white);
    padding: 40px 16px 64px;

    display: flex;
    flex-direction: column;
    gap: 16px;

    max-width: 460px;
    margin: 0 auto auto;

    @media (max-width: 991px) {
        max-width: unset;
        margin: unset;
    }

    h1 {
        hyphens: none;
    }

    svg {
        fill: var(--white);
        width: 100px;
        height: auto;
        margin-bottom: 32px;
    }

    img {
        aspect-ratio: 1 / 1.2;
        object-fit: cover;
    }
}

/* Map */

.maplibregl-ctrl-top-right {
    @media (max-width: 991px) {
        top: 64px !important;
    }
}

/* Finish */

.finish-stats {
    background-image: linear-gradient(transparent 50%, #000), url('img/route/finish/1.webp');
    background-size: cover;
    min-height: 512px;

    display: flex;
    flex-direction: column;
    flex: 1;
    margin: 0 -16px;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 24px;

    color: var(--white);
    padding: 16px;
    padding-bottom: 48px;

    .finish-stats-factoids {
        display: flex;
        justify-content: space-between;

        width: stretch;
        width: -webkit-fill-available;

        .points-finished {
            display: flex;
            flex-direction: column;
            gap: 8px;

            h1 {
                font-size: 48px;
            }
        }
    }
}

/* ─── AUDIOPLAYER ─── */

audio-player {
    display: block;
    width: 100%;
}

.audioplayer {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--graphite-20);
    border-radius: 40px;
    overflow: hidden;
}

.player-card {
    display: flex;
    align-items: center;
    padding: 8px;
    gap: 12px;

    font-size: 16px;
    line-height: 16px;
}

/* ─── CUSTOM PLAYER CONTROLS ─── */

/* The Jouele source element is hidden — audio engine still initializes */
.jouele-source {
    display: none;
}

/* Play/pause button */
.player-btn {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: none;
    background: var(--brusnika-red);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: opacity 200ms ease;

    -webkit-tap-highlight-color: transparent !important;
}

.player-btn:hover {
    opacity: 0.85;
}

.player-btn-icon {
    width: 24px;
    height: 24px;
    display: block;
    filter: brightness(0) invert(1);

    user-select: none;
}

.player-btn-icon--pause {
    display: none;
}

.player-btn.jouele-is-playing .player-btn-icon--play {
    display: none;
}

.player-btn.jouele-is-playing .player-btn-icon--pause {
    display: block;
}

/* Info column: name → progress → times, correct DOM order */
.player-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.player-name {
    color: var(--graphite);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.25;
}

/* Progress bar */
.player-progress {
    position: relative;
    height: 2px;
    cursor: pointer;
}

.player-progress-base {
    position: absolute;
    inset: 0;
    background: var(--graphite);
    border-radius: 1px;

    &::after {
        content: '';
        display: block;
        position: relative;
        width: 100%;
        height: 16px;
        top: -7px;
    }
}

.player-progress.jouele-is-buffering .player-progress-base {
    background: repeating-linear-gradient(90deg,
            var(--brusnika-red) 0px,
            var(--brusnika-red) 2px,
            transparent 2px,
            transparent 8px);
    animation: player-progress-marquee 0.6s linear infinite;
}

@keyframes player-progress-marquee {
    from {
        background-position: 0 0;
    }

    to {
        /* one full repeat width (2px dash + 6px gap) — loops with no jump */
        background-position: 8px 0;
    }
}

.player-progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background: var(--brusnika-red);
    border-radius: 1px;
    transition: background 200ms linear;
}

.player-progress.jouele-is-playing .player-progress-fill {
    background: var(--brusnika-red);
}

.player-progress-dot {
    position: absolute;
    top: 50%;
    left: 0;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;

    background: var(--graphite);
    transition: background 100ms linear, border-radius 300ms ease;

    &::after {
        content: '';
        display: block;
        position: relative;
        width: 16px;
        height: 16px;
        left: -4px;
        top: -4px;
    }
}

.player-progress.jouele-is-playing .player-progress-dot {
    background: var(--brusnika-red);
    border-radius: 50%;
}

/* Times */
.player-times {
    display: flex;
    gap: 0.5em;
    align-items: baseline;
    color: var(--graphite);
    line-height: 1;

    user-select: none;
}

.player-time-elapsed {
    color: var(--brusnika-red);
}

.player-time-elapsed.jouele-is-unavailable {
    display: none;
}

.player-time-total.jouele-is-unavailable {
    /* keep visible — duration is pre-populated as text so it shows before audio loads */
    display: revert;
}

/* ─── SEEK BACK BUTTON ─── */

/* Hidden until the track has loaded (see player.js — toggled on the
   jouele:totaltime event), so it never appears as a dead control. */
.player-back-15 {
    background: none;
    display: flex;
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: none;
    box-sizing: border-box;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: rotate 100ms ease-in-out;

    -webkit-tap-highlight-color: transparent !important;
}

.player-back-15:active {
    rotate: -30deg;
}

.player-back-15.is-ready {
    display: flex;
}

.player-back-15 .player-btn-icon {
    width: 32px;
    height: 32px;
    filter: none;
}