/* The Journey entrance only. No changes to the fitted milestone materials. */
#timeline { padding-top:80px }
.journey-opening { position:relative; margin:0 auto 48px }
.journey-titlepiece { position:relative; isolation:isolate; width:min(980px,100%); margin:0 auto; padding:58px 90px 51px }
.journey-title-art { position:absolute; inset:0; z-index:-1; pointer-events:none }
.journey-title-art img { width:100%; height:100%; object-fit:fill }
#journeyTitle { max-width:none; margin:0; letter-spacing:0; text-shadow:none }
.journey-title-pair { display:block; font:30px/1.1 var(--font-body); letter-spacing:1px; color:#e7c393; margin-bottom:7px }
.journey-title-name { display:block; font:900 clamp(56px,6.3vw,88px)/1.03 var(--font-heading); letter-spacing:-2.5px; color:#f0dfff; text-shadow:0 2px 0 #ac7ed2,1px 5px 0 #40205e,2px 7px 0 #160c27; white-space:nowrap }
#timeline .journey-deckline { margin:12px auto 20px; padding:0 24px; max-width:820px; font-size:25px; line-height:1.4; color:#dfcbea }
.journey-winch { position:relative; isolation:isolate; width:min(960px,100%); margin:0 auto }
.winch-art { position:relative; display:block; z-index:1; pointer-events:none }
.winch-art img { display:block; width:100%; height:auto }
.winch-lead { position:absolute; top:0; left:0; width:100%; overflow:visible; pointer-events:none; z-index:0 }
.winch-chain-origin { position:absolute; width:0; height:0; left:50%; top:71.428571429%; pointer-events:none }
#timeline .winch-guide { position:absolute; width:17%; height:auto; aspect-ratio:1; left:13.1%; top:0; margin:0; z-index:3 }
/* At wide viewports the moving guide occupies the page margin; his seated
   illustration remains part of the winch, as Beast does in the other scenes. */
@media (min-width:1200px) {
    .companion-enabled .winch-guide img { visibility:visible }
}
@media (max-width:1000px) {
    .journey-titlepiece { padding:52px 62px 50px }
    .journey-title-pair { font-size:27px }
    .journey-title-name { font-size:clamp(52px,7.2vw,72px); letter-spacing:-1.8px }
}
@media (max-width:800px) {
    .journey-opening { margin-bottom:76px }
    .journey-winch { width:min(600px,calc(100% - 24px)) }
    #timeline .winch-guide { width:25%; left:1.5%; top:6% }
    #timeline .journey-deckline { max-width:640px; margin-bottom:22px }
}
@media (max-width:600px) {
    #timeline { padding-top:65px }
    .journey-titlepiece { width:calc(100% - 8px); padding:42px 39px 40px }
    .journey-title-pair { font-size:23px; margin-bottom:5px }
    .journey-title-name { font-size:clamp(37px,10.6vw,58px); letter-spacing:-1.4px }
    #timeline .journey-deckline { font-size:23px; padding:0 26px; margin-top:12px; margin-bottom:20px }
    .journey-opening { margin-bottom:70px }
}
@media (max-width:360px) {
    .journey-titlepiece { padding:40px 29px 38px }
    .journey-title-pair { font-size:21px }
    .journey-title-name { font-size:37px; letter-spacing:-1.3px }
    #timeline .journey-deckline { font-size:22px; padding:0 20px }
}
@media print {
    .winch-lead { display:none }
    .journey-opening { break-inside:avoid }
}