/* Load after studio-finish.css. Only the photographic passage is affected. */
.cinema-journey .green-transit.metro-finish20{height:245svh;background:#18392b}
.cinema-journey .metro-finish20 .green-transit-stage{position:sticky;top:var(--motion-index-height,60px);height:calc(100svh - var(--motion-index-height,60px));min-height:0;overflow:clip;isolation:isolate}
.metro-finish20 .metro-canvas-host{position:absolute;inset:0;z-index:0}
.metro-finish20 .train-track{display:none!important}
.metro-finish20 .metro-route-sign{position:absolute;inset:24px auto auto 3.5%;display:flex;align-items:center;gap:12px;color:#fff9e9;z-index:3;padding:10px 15px 10px 10px;background:#143a2beb;border:1px solid #ddcca25e;box-shadow:0 6px 30px #0a22172b;border-radius:2px;pointer-events:none}
.metro-finish20 .metro-route-symbol{display:grid;place-items:center;width:36px;height:36px;border:1px solid #f8efdcb0;border-radius:50%;font:500 19px/1 var(--font-body);color:#fff9e9}
.metro-finish20 .metro-route-sign>div>span{font:500 10px/1.2 var(--font-body);letter-spacing:.14em;color:#e3d5ab}
body.page-mode #main .metro-finish20 .metro-route-sign p,.metro-finish20 .metro-route-sign p{font:500 13px/1.5 var(--font-body);color:#fff9e9;margin:3px 0 0}
.cinema-journey .metro-finish20 .train-skip{z-index:5;inset-block-start:24px;inset-inline-end:3.5%;padding:12px 16px;min-height:44px;background:#fcf8ecef;border:1px solid #eadbb688;border-radius:2px;font-size:13px;color:#17392a}
.cinema-journey .metro-finish20 .green-transit-inner{position:absolute;inset:auto auto 114px 3.5%;width:390px;max-width:calc(100% - 36px);min-height:0;margin:0;padding:19px 21px 13px;display:block;text-align:start;background:#fffaf0f5;border:1px solid #f5eacbd4;box-shadow:0 16px 45px #0a221725;backdrop-filter:blur(8px);border-radius:2px;opacity:1;transform:none;pointer-events:auto;z-index:4}
.metro-finish20 .metro-ticket-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.cinema-journey .metro-finish20 .green-destination{font:500 9px/1.4 var(--font-body);letter-spacing:.10em;color:#5c685b;margin:0}
.metro-finish20 [data-metro-step]{font:500 10px/1.4 var(--font-body);white-space:nowrap;color:#5c685b}
.metro-finish20 .metro-ticket-body{display:grid;grid-template-columns:1fr 75px;gap:15px;align-items:start}
.cinema-journey .metro-finish20 .green-transit-inner h2{font:500 31px/1.05 var(--font-heading,var(--font-body));letter-spacing:-.045em;color:#193527;margin:0 0 8px;max-width:none}
body.page-mode #main .metro-finish20 .metro-ticket-copy p,.metro-finish20 .metro-ticket-copy p{font:400 13px/1.5 var(--font-body);color:#3f4b3f;margin:0;max-width:31ch}
.metro-finish20 .metro-project-stamp{display:block;width:75px;height:90px;object-fit:cover;border:4px solid #fffdf9;border-radius:0;box-shadow:0 2px 8px #1421171a;transform:rotate(3deg)}
.metro-finish20 .metro-ticket-actions{display:flex;align-items:center;gap:22px;margin-top:10px}
.cinema-journey .metro-finish20 .green-project-link,.metro-finish20 .metro-prototype-link{display:inline-flex;align-items:center;min-height:38px;padding:5px 0;background:transparent;border:0;border-bottom:1px solid #67766566;border-radius:0;font:500 12px/1.4 var(--font-body);color:#193527;text-decoration:none;pointer-events:auto;margin:0}
.metro-finish20 .metro-prototype-link{border-color:transparent;color:#50604e}
body.page-mode #main .metro-finish20 .metro-concept-note,.cinema-journey .metro-finish20 .green-transit-inner>p.metro-concept-note{font:400 9px/1.4 var(--font-body);color:#6a7164;letter-spacing:.025em;margin:9px 0 0}
.cinema-journey .metro-finish20 .metro-stations{position:absolute;inset:auto auto 27px 3.5%;z-index:4;display:grid;grid-template-columns:repeat(3,1fr);width:390px;max-width:calc(100% - 36px);gap:0;padding:17px 9px 8px;background:#183a2beF;border:1px solid #d5c89965;border-radius:2px}
.metro-finish20 .metro-route-track{position:absolute;top:15px;inset-inline:33px;height:1px;background:#f6e8bf4a}
.metro-finish20 .metro-route-track i{display:block;width:100%;height:100%;background:#f5e3a8;transform-origin:left;transform:scaleX(var(--metro-route-progress,0));will-change:transform}
.metro-finish20 .metro-stations button{position:relative;display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:48px;padding:11px 4px 4px;color:#ecebd9;background:transparent;border:0;border-radius:0;font:400 12px/1.2 var(--font-body);cursor:pointer}
.metro-finish20 .metro-stations button::before{content:'';position:absolute;left:50%;top:-6px;width:7px;height:7px;border:1px solid #f5e8b4;background:#193b2d;border-radius:50%;transform:translateX(-50%)}
.metro-finish20 .metro-stations button[aria-pressed=true]{background:transparent;color:#fff9e9;font-weight:600}
.metro-finish20 .metro-stations button[aria-pressed=true]::before{background:#f5e8b4;box-shadow:0 0 0 4px #f5e8b41a}
.metro-finish20 .metro-stations button .metro-stop-number{font:400 9px/1 var(--font-body);color:#ded4b0}
.metro-finish20 :is(button,a):focus-visible{outline:3px solid #deb967;outline-offset:4px}
.metro-finish20 .metro-travel-note{position:absolute;inset:auto 3.5% 36px auto;margin:0;padding:7px 11px;color:#fff9e9!important;font:400 11px/1.4 var(--font-body);letter-spacing:.035em;background:#143527c9;border:1px solid #ecdbac4a;border-radius:2px;z-index:3}
.metro-finish20[data-metro-arrived=true] .metro-travel-note{background:#fff9ee;color:#1b3b29!important}
.metro-finish20.metro-fallback .metro-canvas-host{background:url('assets/metro-v10/interior.webp') center/cover no-repeat}
[dir=rtl] .metro-finish20 .metro-route-sign{left:auto;right:3.5%}
[dir=rtl] .cinema-journey .metro-finish20 .green-transit-inner,[dir=rtl] .cinema-journey .metro-finish20 .metro-stations{left:auto;right:3.5%}
[dir=rtl] .metro-finish20 .metro-travel-note{left:3.5%;right:auto}
[dir=rtl] .metro-finish20 .metro-route-track i{transform-origin:right}
@media(max-width:800px){
 .cinema-journey .green-transit.metro-finish20{height:220svh}
 .metro-finish20 .metro-route-sign{inset-block-start:16px;inset-inline-start:18px;padding:8px 10px;gap:8px}
 .metro-finish20 .metro-route-symbol{width:29px;height:29px;font-size:16px}
 .metro-finish20 .metro-route-sign>div>span{font-size:8px;letter-spacing:.08em}
 body.page-mode #main .metro-finish20 .metro-route-sign p{font-size:10px}
 .cinema-journey .metro-finish20 .train-skip{inset-block-start:16px;inset-inline-end:18px;padding:10px;max-width:127px;font-size:11px;line-height:1.4}
 .cinema-journey .metro-finish20 .green-transit-inner{inset:auto 18px 101px;max-width:320px;width:calc(100% - 36px);padding:15px 17px 11px}
 .cinema-journey .metro-finish20 .green-transit-inner h2{font-size:27px}
 .metro-finish20 .metro-ticket-body{grid-template-columns:1fr 62px;gap:12px}
 .metro-finish20 .metro-project-stamp{width:62px;height:77px}
 .metro-finish20 .metro-ticket-top{margin-bottom:10px}
 .metro-finish20 .metro-ticket-copy p,body.page-mode #main .metro-finish20 .metro-ticket-copy p{font-size:12px}
 .cinema-journey .metro-finish20 .metro-stations{inset:auto 18px 18px!important;max-width:320px;width:calc(100% - 36px);padding-block:17px 6px}
 .metro-finish20 .metro-stations button{font-size:11px;gap:4px;min-height:44px;padding:10px 2px 4px}
 .metro-finish20 .metro-travel-note{display:none}
 [dir=rtl] .cinema-journey .metro-finish20 .green-transit-inner{left:auto;right:18px}
 [dir=rtl] .cinema-journey .metro-finish20 .metro-stations{left:auto!important;right:18px!important}
}
@media(max-width:380px){.metro-finish20 .metro-route-sign p{display:none}.metro-finish20 .metro-route-sign{max-width:160px}.metro-finish20 .metro-ticket-body{grid-template-columns:1fr 54px}.metro-finish20 .metro-project-stamp{width:54px;height:72px}}
@media(max-height:600px) and (min-width:801px){
 .metro-finish20 .metro-route-sign{inset-block-start:15px}
 .cinema-journey .metro-finish20 .train-skip{inset-block-start:15px}
 .cinema-journey .metro-finish20 .green-transit-inner{bottom:92px;padding:13px 17px 10px;width:355px}
 .cinema-journey .metro-finish20 .green-transit-inner h2{font-size:26px}
 .metro-finish20 .metro-ticket-top{margin-bottom:7px}
 .metro-finish20 .metro-ticket-actions{margin-top:4px}
 .metro-finish20 .metro-project-stamp{height:72px}
 .cinema-journey .metro-finish20 .metro-stations{bottom:15px;width:355px;padding-top:12px}
 .metro-finish20 .metro-route-track{top:11px}
 .metro-finish20 .metro-stations button::before{top:-4px}
}
@media(prefers-reduced-motion:reduce){
 .cinema-journey .green-transit.metro-finish20{height:auto;min-height:0}
 .cinema-journey .metro-finish20 .green-transit-stage{position:relative;top:0;height:max(610px,85svh);min-height:0}
 .metro-finish20 .metro-travel-note{display:none}
 .metro-finish20 *{animation:none!important;transition:none!important}
}
@media print{
 .cinema-journey .green-transit.metro-finish20{height:auto!important}
 .cinema-journey .metro-finish20 .green-transit-stage{position:relative;top:0;height:530px!important}
 .metro-finish20 .metro-stations,.metro-finish20 .metro-travel-note,.metro-finish20 .train-skip{display:none!important}
 .cinema-journey .metro-finish20 .green-transit-inner{bottom:25px}
}