#road-wrapper {
    position: relative;
}

.journey-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    overflow: visible;
}

.journey-path-wrap {
    position: absolute;
    top: 2rem;
    left: calc(50% - 210px);
    width: 300px;
    height: 100%;
}

.journey-track {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

@keyframes journey-track-flow {
    to { stroke-dashoffset: -32; }
}

.journey-track-path {
    animation: journey-track-flow 1.6s linear infinite;
}

/* only one of the three routes is ever drawn — see journey-path.php */
.journey-route--sd { display: none; }
.journey-route--mb { display: none; }

.journey-dot {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    z-index: 5;
    will-change: transform;
}

.journey-dot img {
    width: 100%;
    height: 100%;
    display: block;
}

.journey-wp {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 6;
}

.journey-wp__svg {
    width: 110px;
    height: 110px;
    overflow: visible;
    display: block;
}

.journey-wp__ring {
    transition: stroke-dasharray 0.6s ease;
}

/* dark outline behind the curved label so it stays readable over the background */
.journey-wp__label {
    paint-order: stroke fill;
    stroke: rgba(4, 8, 12, 0.9);
    stroke-width: 3px;
    stroke-linejoin: round;
}

.journey-wp.is-near .journey-wp__ring {
    stroke-dasharray: 0 0;
}

.journey-quote {
    position: absolute;
    bottom: calc(100% + 24px);
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    width: 460px;
    max-width: 88vw;
    padding: 2.25rem 2rem;
    text-align: center;
    z-index: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 30px;
    backdrop-filter: blur(80px);
    -webkit-backdrop-filter: blur(80px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.journey-quote.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.journey-quote__text {
    font-family: 'Architects Daughter', cursive;
    font-size: 21px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    text-align: center;
    max-width: 620px;
    margin-inline: auto;
}

.journey-quote__mark {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: -2px;
}

.journey-quote__mark svg { width: 100%; height: 100%; display: block; }

.journey-quote__mark--open { margin-right: 0.5em; }
.journey-quote__mark--close { margin-left: 0.5em; }

.journey-quote__author {
    margin-top: 0.9rem;
    font-family: 'Patrick Hand', cursive;
    font-size: 20px;
    line-height: 1.2;
    color: #EFD020;
    text-align: center;
}

@media (min-width: 1441px) {
    .journey-quote {
        width: 820px;
        max-width: 88vw;
        height: 381px;
        bottom: calc(100% + -150px);
        left: 50%;
        transform: translateX(-50%) translateY(20px);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .journey-quote.is-visible {
        transform: translateX(-50%) translateY(0);
    }

    .journey-quote__text {
        font-family: 'Architects Daughter', cursive;
        font-weight: 400;
        font-style: normal;
        font-size: 32px;
        line-height: 1.5;
        letter-spacing: 0;
        text-align: center;
    }

    .journey-quote__mark {
        width: 25.248px;
        height: 24.096px;
        vertical-align: -4px;
    }

    .journey-quote__mark--open { margin-right: 0.7em; vertical-align: 10px; }
    .journey-quote__mark--close { margin-left: 0.7em; vertical-align: -26px; }
}

/* --- mobile / tablet: <=900px ---
   One straight dotted line down the middle of the page, sitting *behind* the
   sections (z-index 0 vs the stops' z-index 1) so the travelling dot slides
   under every card instead of over it. */
@media (max-width: 900px) {
    .journey-overlay {
        z-index: 0;
    }

    /* The overlay sits under the sections, and each section painted its own #01010B
       over it, so the line was never seen on a phone. The wrapper carries that colour
       instead and the sections go clear: the dotted line then shows in the gaps while
       every heading, card and quote bubble still paints over it. */
    #road-wrapper { background: #01010B; }

    .stop-blog,
    .stop-podcast,
    .stop-video,
    .stop-scrapbook,
    .stop-thoughts { background: transparent; }

    .journey-path-wrap {
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 300px;
        height: 100%;
    }

    .journey-route--lg { display: none; }
    .journey-route--mb { display: block; }

    /* stop circles + pop-up quotes are positioned for the desktop route only */
    .journey-wp { display: none; }
}

@media (min-width: 1441px) {
    .journey-path-wrap {
        left: calc(50% - 220px);
        width: 360px;
    }

    .journey-wp__svg {
        width: 130px;
        height: 130px;
    }
}

/* --- small desktop: 901px – 1440px only ---
   Scaling the wrap scales every path x-coordinate and every waypoint
   left:% proportionally, so the whole line narrows with the design. */
@media (min-width: 901px) and (max-width: 1440px) {
    .journey-path-wrap { width: 255px; left: calc(50% - 178px); }

    .journey-route--lg { display: none; }
    .journey-route--sd { display: block; }

    /* Sections are shorter in this range, so each stop needs its own y.
       !important because the base positions are inline styles. */
    #journey-wp-1 { top: 8.02% !important; left: 37.25% !important; }
    #journey-wp-2 { top: 18.96% !important; left: 40.39% !important; }
    #journey-wp-3 { top: 48.03% !important; }
    #journey-wp-4 { top: 60.35% !important; left: 45.1% !important; }
    #journey-wp-5 { top: 80.69% !important; }
    #journey-wp-6 { top: 98.47% !important; }
    .journey-wp__svg { width: 94px; height: 94px; }
    .journey-quote { width: 400px; padding: 1.75rem 1.5rem; }
    .journey-quote__text { font-size: 18px; }
}

/* --- phones / tablets: the stop markers (and their pop-up bubbles) are hidden below
   901px, so the same quotes are printed between the sections instead. --- */
.ld-mquote { display: none; }

@media (max-width: 900px) {
    .ld-mquote {
        display: block;
        position: relative;
        z-index: 1;
        max-width: min(520px, calc(100% - 2.5rem));
        margin: 0 auto;
        padding: 1.5rem 1.4rem;
        /* solid enough to sit over the dotted road line without it crossing the text */
        background: rgba(6, 6, 20, 0.92);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-radius: 24px;
        text-align: center;
    }

    .ld-mquote__text {
        font-family: 'Architects Daughter', cursive;
        font-size: clamp(1rem, 4.2vw, 1.25rem);
        line-height: 1.5;
        color: rgba(255, 255, 255, 0.9);
    }
    .ld-mquote__text::before { content: '\201C'; color: #00C0E8; }
    .ld-mquote__text::after  { content: '\201D'; color: #00C0E8; }

    .ld-mquote__author {
        margin-top: 0.6rem;
        font-family: 'Patrick Hand', cursive;
        font-size: 1rem;
        color: #EFD020;
    }
}

/* The dots crawl along the road on desktop. On a phone that is an endless repaint of a
   page-tall masked SVG that now sits under every section, which is what made scrolling
   stutter; the road reads just as well standing still. */
@media (max-width: 900px) {
    .journey-track-path { animation: none; }
}

/* ---------- desktop quotes: small, clean, no box; they sit off to the right of each stop ---------- */
@media (min-width: 901px) {
    .journey-quote,
    .journey-quote.is-visible {
        width: 300px;
        max-width: 300px;
        height: auto;
        padding: 0;
        background: none;
        border: 0;
        border-radius: 0;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        display: block;
        text-align: left;
        bottom: auto;
        top: 50%;
        left: calc(100% + 3rem);
    }
    .journey-quote { transform: translateY(calc(-50% + 14px)); transition: opacity 1s ease, transform 1s ease; }
    .journey-quote.is-visible { transform: translateY(-50%); }

    .journey-quote__text {
        font-size: 17px;
        line-height: 1.5;
        text-align: left;
        max-width: none;
        margin: 0;
        color: rgba(255, 255, 255, 0.88);
    }
    .journey-quote__author { font-size: 16px; text-align: left; margin-top: 0.5rem; }
    .journey-quote__mark { width: 11px; height: 11px; vertical-align: 0; }
}