/* Fitted brass SVG frames, sized from the original image and flowing HTML text. */
.journey-definitions {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
}
.journey-vessel {
    position: relative;
    isolation: isolate;
    padding-bottom: 23.333333333cqw;
}
.timeline-item:has(.timeline-guide) {
    padding-top: 125px;
}
.vessel-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    overflow: visible;
    transform: translateZ(0);
}
/* Retain HTML/geometry for the entire journey, but paint only nearby hulls. */
.journey-vessel.is-distant .vessel-art {
    visibility: hidden;
    transform: none;
}
.journey-vessel > .timeline-content {
    position: relative;
    width: 72.222222222%;
    margin: 0 0 0 15%;
    padding: 17.777777778cqw 0 0;
    border: 0;
    border-image: none;
    filter: none;
    color: #f0e7f7;
}
.journey-vessel .timeline-content > img {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: #120828;
}
.timeline-copy {
    padding: clamp(22px, 4.3cqw, 30px) clamp(20px, 4.3cqw, 30px) 0;
    background: linear-gradient(110deg, #44332a, #241539 58%, #1b132b);
}
.is-fitted .timeline-copy {
    background: none;
}
.journey-vessel .timeline-copy h3 {
    margin: 0 0 17px;
    font: 900 clamp(24px, 5.1cqw, 36px)/1.16 var(--font-heading);
    color: #f3e2bb;
    text-wrap: balance;
}
.journey-vessel .timeline-copy p {
    margin: 0;
    font: clamp(20px, 3.83cqw, 26px)/1.45 var(--font-body);
    color: #f0e7f7;
    text-wrap: pretty;
}
.journey-vessel > .timeline-marker {
    position: absolute;
    z-index: 4;
    display: grid;
    place-items: center;
    top: 22.111111111cqw;
    left: 4.777777778%;
    width: 8.888888889cqw;
    height: 7.555555556cqw;
    min-height: 0;
    padding: 0;
    background: url('/assets/illustrated/journey-number-v1.svg') center/100% 100% no-repeat;
    transform: rotate(-7deg);
    font: 900 clamp(12px, 3.1cqw, 22px)/1 var(--font-heading);
    color: #f1ddb3;
}
.journey-vessel .grant-badge {
    margin: 0 0 20px;
}
@media (max-width: 650px) {
    .journey-vessel .timeline-copy h3 {
        margin-bottom: 14px;
    }
}
@media print {
    .journey-vessel.is-distant .vessel-art {
        visibility: visible;
    }
}