/* P8 Beyond Lagos: the trip film (client-approved 8 Oct, from Design/variations/2026-10-08-beyond-journey/).
   Mounted by assets/journey.js into [data-beyond-film] under the two-city split. Every class is jn- prefixed. */
[data-beyond-film] { width: 100vw; margin: var(--s8) 0 0 calc(50% - 50vw); }
.jn-defs { position: absolute; width: 0; height: 0; }
/* ================= 2. The film ================= */
.jn-film { --night: #0B0F26; --black: #000; --bar: 7svh; --gutter: 24px; position: relative; background: var(--night); color: var(--paper); overflow: clip; }
.jn-film__stage { position: relative; height: calc(100vh - var(--jn-top, 0px)); height: calc(100svh - var(--jn-top, 0px)); overflow: hidden; }
.jn-film__stage * { pointer-events: none; }
.jn-film__stage .jn-fm-change { pointer-events: auto; }
.jn-fl { position: absolute; inset: 0; }

/* opening: the board */
.jn-fl-board { display: grid; place-items: center; }
.jn-board { width: min(960px, 86vw); background: var(--etu); color: var(--paper); border: 2px solid rgba(255,252,247,.22); border-radius: 22px; padding: 22px 26px 16px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); }
.jn-board__title { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 12px; border-bottom: 2px solid rgba(255,252,247,.16); font: 600 14px/1.2 var(--text); color: rgba(255,252,247,.7); }
.jn-board__title b { font: 800 clamp(22px, 2.6vw, 34px)/1 var(--display); font-variation-settings: "wdth" 80; color: var(--paper); }
.jn-board__row { display: grid; grid-template-columns: 1.2fr 1.2fr .8fr auto; gap: 16px; align-items: center; padding: 18px 0; border-bottom: 1px solid rgba(255,252,247,.1); font: 800 clamp(22px, 2.8vw, 38px)/1 var(--display); font-variation-settings: "wdth" 80; font-variant-numeric: tabular-nums; white-space: nowrap; }
.jn-board__row:last-child { border-bottom: 0; }
.jn-board__row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.jn-board__row .jn-dim { font: 600 15px/1.2 var(--text); color: rgba(255,252,247,.6); }
.jn-board__row.is-hot { color: var(--gold-soft); }
.jn-status { justify-self: end; padding: 7px 13px; border-radius: 999px; font: 800 14px/1 var(--text); background: rgba(255,252,247,.12); color: var(--paper); }
.jn-status--go { background: var(--green); color: var(--ink); }
.jn-status--load { background: var(--gold); color: var(--ink); }

/* the ticket the row becomes */
.jn-fl-ticket { display: grid; place-items: center; padding: calc(var(--bar) + 2svh) var(--gutter); }
.jn-ftk { position: relative; width: min(620px, 100%); transform-origin: 50% 0; background: var(--white); color: var(--ink); border: var(--line); border-radius: 22px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); }
.jn-ftk__band { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 22px; border-bottom: var(--line); border-radius: 19px 19px 0 0; font: 800 12px/1 var(--text); letter-spacing: .1em; text-transform: uppercase; background: var(--green-soft); }
.jn-ftk--coach .jn-ftk__band { background: var(--gold-soft); }
.jn-ftk__band b { font: 800 20px/1 var(--display); font-variation-settings: "wdth" 80; letter-spacing: 0; text-transform: none; }
.jn-ftk__route { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; padding: 20px 22px 8px; }
.jn-ftk__code { font: 800 clamp(52px, 7vw, 84px)/.86 var(--display); font-variation-settings: "wdth" 75; }
.jn-ftk__code small { display: block; margin-top: 6px; font: 600 13px/1.2 var(--text); color: var(--ink-2); }
.jn-ftk__code--to { text-align: right; }
.jn-ftk__line { height: 0; border-top: 2.5px dotted var(--ink); }
.jn-ftk__f { display: grid; grid-template-columns: 1.6fr 1.2fr .7fr .7fr; gap: 12px 18px; padding: 14px 22px 18px; }
.jn-ftk__f small { display: block; font: 700 10px/1 var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 6px; }
.jn-ftk__f p { font: 800 19px/1.1 var(--display); font-variation-settings: "wdth" 85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jn-ftk__stub { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 22px 16px; border-top: 2.5px dashed var(--ink); background: var(--cotton); border-radius: 0 0 19px 19px; transform-origin: 0 0; }
.jn-ftk--coach .jn-ftk__stub { background: var(--gold-soft); }
.jn-ftk__stub p { font: 800 28px/.9 var(--display); font-variation-settings: "wdth" 75; white-space: nowrap; }
.jn-ftk__stub p small { display: block; font: 600 11px/1 var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 6px; }
.jn-ftk__bar { width: min(300px, 55%); height: 48px; }
.jn-ftk__qr { width: 72px; height: 72px; }
.jn-ftk__note { position: absolute; left: 0; right: 0; top: calc(100% + 14px); text-align: center; font: 500 13px/1.3 var(--text); color: rgba(255,252,247,.6); }
.jn-laser { position: absolute; left: 14px; right: 14px; height: 3px; top: 0; background: var(--fuch); box-shadow: 0 0 14px 3px rgba(232,85,138,.7); opacity: 0; }
.jn-fl-chip { z-index: 7; }
.jn-fl-cabin { background: var(--etu); overflow: hidden; perspective: 600px; }
.jn-cabin__light { position: absolute; left: 18%; right: 18%; top: 9%; height: 1.2svh; border-radius: 99px; background: var(--gold); opacity: .9; }
.jn-cabin__rows { position: absolute; inset: 14% 8% -10%; transform: rotateX(28deg); transform-origin: 50% 0; display: grid; grid-template-columns: 1fr 1fr 18% 1fr 1fr; grid-auto-rows: 26%; gap: 4% 3%; }
.jn-cabin__rows i { border-radius: 28% 28% 10% 10%; background: #3B4C93; border: 3px solid var(--ink); box-shadow: inset 0 18px 0 #4C5FAE; }
.jn-cabin__rows i.jn-aisle { background: none; border: 0; box-shadow: none; border-left: 3px dashed rgba(233,165,18,.6); justify-self: center; width: 0; }
.jn-passchip { position: absolute; right: var(--gutter); top: calc(var(--bar) + 2svh); display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; background: var(--white); color: var(--ink); border: 2px solid var(--ink); border-radius: 14px; box-shadow: 0 14px 30px -14px rgba(0,0,0,.5); font: 600 13px/1.2 var(--text); white-space: nowrap; }
.jn-passchip svg { width: 18px; height: 18px; flex: none; }
.jn-passchip b { display: block; font: 800 17px/1 var(--display); font-variation-settings: "wdth" 80; }
.jn-passchip.is-boarded { background: var(--green); }
/* split-flap cells */
.jn-fp { display: inline-flex; gap: 2px; }
.jn-fp i { position: relative; display: inline-block; min-width: .62em; padding: .06em .04em .04em; text-align: center; font-style: normal; background: #121A42; border-radius: 4px; box-shadow: inset 0 -1px 0 rgba(0,0,0,.35); }
.jn-fp i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0,0,0,.55); }
.jn-fp i.jn-sp { background: none; box-shadow: none; min-width: .3em; }
.jn-fp i.jn-sp::after { display: none; }
.jn-stat { position: relative; justify-self: end; display: grid; perspective: 300px; }
.jn-stat > span { grid-area: 1 / 1; backface-visibility: hidden; text-align: center; }
.jn-board__row { transition: none; }
/* the row that lifts out and becomes the ticket */
.jn-strip { position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 22px; overflow: hidden; background: var(--etu); color: var(--gold-soft); border: 2px solid var(--gold); border-radius: 14px; font: 800 clamp(22px, 2.8vw, 38px)/1 var(--display); font-variation-settings: "wdth" 80; white-space: nowrap; box-shadow: 0 30px 60px -20px rgba(0,0,0,.7); transform-origin: 50% 50%; }
.jn-strip__w { position: absolute; inset: 0; background: var(--white); border-radius: 12px; opacity: 0; }
.jn-strip > span { position: relative; }
.jn-torn { position: absolute; right: 22px; bottom: -58px; padding: 9px 16px; background: var(--gold); color: var(--ink); border: 2px solid var(--ink); border-radius: 999px; font: 800 15px/1 var(--text); opacity: 0; visibility: hidden; }

/* the gate / the bay (camera pulls back to it) */
.jn-fl-gate { background: var(--cotton); overflow: hidden; }
.jn-gw { position: absolute; left: 4vw; right: 4vw; top: calc(var(--bar) + 3svh); bottom: 24svh; border: 6px solid var(--ink); border-radius: 18px; background: var(--water); overflow: hidden; }
.jn-gw__mull { position: absolute; top: 0; bottom: 0; width: 6px; background: var(--ink); }
.jn-gw__scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.jn-gw__bridge { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.jn-gfloor { position: absolute; left: 0; right: 0; bottom: 0; height: 24svh; background: #E4E1D6; border-top: 3px solid var(--ink); }
.jn-gsign { position: absolute; left: 7vw; top: calc(var(--bar) + 6svh); z-index: 2; display: flex; align-items: center; gap: 14px; padding: 12px 22px; background: var(--etu); color: var(--paper); border: 2px solid var(--ink); border-radius: 14px; font: 800 clamp(20px, 2.4vw, 30px)/1 var(--display); font-variation-settings: "wdth" 80; white-space: nowrap; }
.jn-gsign i { font-style: normal; padding: 6px 10px; border-radius: 8px; background: var(--gold); color: var(--ink); font-size: .7em; }
.jn-bay__coach { position: absolute; left: 50%; bottom: 17svh; width: min(64vw, 720px); transform: translateX(-50%); filter: var(--die); }
.jn-bay__coach svg { width: 100%; height: auto; overflow: visible; }
.jn-bay__label { position: absolute; left: 6vw; top: 10%; font: 800 clamp(32px, 5vw, 64px)/1 var(--display); font-variation-settings: "wdth" 75; color: rgba(16,22,52,.26); letter-spacing: .08em; white-space: nowrap; }
.jn-bay__wall { position: absolute; left: 0; right: 0; top: 0; bottom: 24svh; background: var(--cotton); }
.jn-bay__shade { position: absolute; left: 6vw; right: 6vw; top: calc(var(--bar) + 6svh); height: 4svh; background: var(--etu); border: 3px solid var(--ink); border-radius: 8px; }
.jn-bay__posts { position: absolute; left: 10vw; right: 10vw; top: calc(var(--bar) + 10svh); bottom: 24svh; border-left: 10px solid var(--ink); border-right: 10px solid var(--ink); }
.jn-seatchip { position: absolute; left: 50%; transform: translateX(-50%); top: calc(var(--bar) + 12svh); display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--white); color: var(--ink); border: var(--line); border-radius: 16px; box-shadow: var(--sh-pill); font: 700 14px/1 var(--text); }
.jn-seatchip b { font: 800 30px/1 var(--display); font-variation-settings: "wdth" 80; font-variant-numeric: tabular-nums; }
.jn-seatchip.is-full { background: var(--green); }

/* travel: sky */
.jn-fl-travel { overflow: hidden; }
.jn-sky { position: absolute; inset: 0; background: var(--water); }
.jn-cloud { position: absolute; width: var(--w); top: var(--t); left: var(--l); }
.jn-skyline { position: absolute; left: -2%; right: -2%; bottom: calc(var(--bar) - 2px); transform-origin: 50% 100%; }
.jn-skyline svg { width: 100%; height: auto; }
.jn-tjet { position: absolute; left: 50%; top: 46%; width: clamp(200px, 30vw, 420px); margin: -9% 0 0 calc(clamp(200px, 30vw, 420px) / -2); transform-origin: 60% 50%; }
.jn-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 30svh; background: var(--green-soft); border-top: 3px solid var(--ink); }
/* travel: road */
.jn-land { position: absolute; left: 0; right: 0; bottom: 0; height: 42svh; background: var(--green-soft); border-top: 3px solid var(--ink); }
.jn-road { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--bar) + 16svh); background: var(--etu); border-top: 3px solid var(--ink); overflow: hidden; }
.jn-road__dash { position: absolute; left: 0; top: calc(50% - var(--bar) / 2); width: 400%; height: 5px; background: repeating-linear-gradient(90deg, var(--paper) 0 48px, transparent 48px 96px); }
.jn-lane { position: absolute; left: 0; width: 500%; display: flex; align-items: flex-end; }
.jn-lane--near { bottom: calc(var(--bar) + 15svh); height: 30svh; }
.jn-lane--far { bottom: calc(42svh - 3px); height: 12svh; }
.jn-tree { flex: none; width: clamp(40px, 5vw, 64px); margin-right: var(--gap, 9vw); filter: var(--die); }
.jn-lane--far .jn-tree { width: clamp(22px, 2.6vw, 34px); filter: none; }
.jn-sign { flex: none; margin-right: 30vw; display: flex; flex-direction: column; align-items: center; }
.jn-sign__b { padding: 8px 12px; background: var(--green); color: var(--ink); border: 2.5px solid var(--ink); border-radius: 8px; font: 800 17px/1.1 var(--display); font-variation-settings: "wdth" 80; white-space: nowrap; }
.jn-sign__s { width: 6px; height: 7svh; background: var(--ink); }
.jn-tcoach { position: absolute; left: 50%; bottom: calc(var(--bar) + 4svh); width: min(60vw, 660px); margin-left: calc(min(60vw, 660px) / -2); filter: var(--die); }
.jn-tcoach svg { width: 100%; height: auto; overflow: visible; }

/* arrival */
.jn-fl-bright { background: linear-gradient(to bottom, rgba(255,252,247,.82), rgba(255,252,247,.4) 22%, rgba(255,252,247,0) 34%); opacity: 0; }
.jn-fl-arrive { display: flex; flex-direction: column; align-items: center; padding: calc(var(--bar) + 5svh) var(--gutter) 0; text-align: center; color: var(--ink); }
.jn-wl__to { display: inline-block; padding: 8px 20px; font: 800 clamp(18px, 2.2vw, 30px)/1 var(--display); font-variation-settings: "wdth" 80; text-transform: uppercase; background: var(--white); border: 3px solid var(--ink); border-radius: 999px; box-shadow: var(--sh-pill); transform: rotate(-3deg); }
.jn-wl__city { display: block; margin-top: 1svh; font: 800 min(13vw, 17svh)/.84 var(--display); font-variation-settings: "wdth" 75; letter-spacing: -.015em; text-transform: uppercase; color: var(--green); -webkit-text-stroke: .028em var(--ink); paint-order: stroke fill; text-shadow: 0 .045em 0 var(--ink); text-wrap: balance; }
.jn-wl__city .jn-w { display: inline-block; white-space: nowrap; }
.jn-wl__city .jn-ch { display: inline-block; }
.jn-wl__note { margin-top: 2svh; padding: 8px 14px; background: var(--white); border: 2px solid var(--ink); border-radius: 999px; font: 600 14px/1.3 var(--text); }
.jn-places { position: absolute; left: 0; right: 0; bottom: calc(var(--bar) + 1.6svh); z-index: 3; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 10px; padding: 0 var(--gutter); }
.jn-places--left { right: 30%; justify-content: flex-start; }
.jn-place { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--white); color: var(--ink); border: 2.5px solid var(--ink); border-radius: 10px; box-shadow: var(--sh-pill); font: 700 15px/1.1 var(--text); white-space: nowrap; }
.jn-place::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--green); border: 2px solid var(--ink); }

/* subtitles, movie style */
.jn-subs { position: absolute; left: 0; right: 0; bottom: calc(var(--bar) + 3.2svh); display: grid; justify-items: center; padding: 0 var(--gutter); z-index: 8; }
.jn-subs p { grid-area: 1 / 1; max-width: 32ch; padding: 6px 14px 8px; background: rgba(0,0,0,.72); color: var(--paper); font: 600 clamp(17px, 1.7vw, 23px)/1.35 var(--text); text-align: center; border-radius: 6px; opacity: 0; visibility: hidden; }
.jn-subs p i { color: var(--gold); font-style: normal; }

/* letterbox + slate + route line */
.jn-bars { position: absolute; inset: 0; z-index: 9; }
.jn-bar { position: absolute; left: 0; right: 0; height: var(--bar); background: var(--black); }
.jn-bar--t { top: 0; transform-origin: 50% 0; }
.jn-bar--b { bottom: 0; transform-origin: 50% 100%; }
.jn-slate { position: absolute; top: calc(var(--bar) / 2); left: var(--gutter); transform: translateY(-50%); display: flex; align-items: center; gap: 10px; font: 700 13px/1 var(--text); letter-spacing: .06em; color: var(--paper); white-space: nowrap; }
.jn-slate__play { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--gold); color: var(--ink); font-size: 9px; padding-left: 2px; }
.jn-slate em { font-style: normal; color: rgba(255,252,247,.6); }
.jn-fm-change { background: transparent; box-shadow: none; margin-left: 6px; min-height: 26px; padding: 0 10px; border: 1.5px solid rgba(255,252,247,.4); border-radius: 999px; color: rgba(255,252,247,.85); font: 700 12px/1 var(--text); letter-spacing: 0; }
.jn-fm-change::before { content: ""; position: absolute; inset: -9px -4px; }
.jn-fm-change { position: relative; }
.jn-fm-change:hover { background: var(--paper); color: var(--ink); }
.jn-route { position: absolute; bottom: calc(var(--bar) / 2); left: 50%; transform: translate(-50%, 50%); width: min(560px, calc(100% - 2 * var(--gutter))); display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; font: 800 16px/1 var(--display); font-variation-settings: "wdth" 80; letter-spacing: .04em; color: var(--paper); }
.jn-route__track { position: relative; height: 2px; background: rgba(255,252,247,.25); }
.jn-route__fill { position: absolute; inset: 0; background: var(--gold); transform-origin: 0 50%; transform: scaleX(0); }
.jn-route__dot { position: absolute; top: 50%; left: 0; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px var(--black); }
.jn-route__end { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--paper); }

/* static (reduced motion) */
.jn-film__static { display: none; padding: var(--s12) 24px; background: var(--paper); color: var(--ink); }
.jn-film.is-calm .jn-film__stage { display: none; }
.jn-film.is-calm .jn-film__static { display: grid; justify-items: center; gap: var(--s3); }
.jn-film.is-calm { background: var(--paper); }
.jn-film__static .jn-ftk__note { position: static; color: var(--ink-2); margin-top: 10px; }
.jn-wcard { width: min(620px, 100%); padding: var(--s4); border: var(--line); border-radius: 28px; background: var(--green-soft); }
.jn-wcard h3 { font: 800 clamp(40px, 7vw, 72px)/.9 var(--display); font-variation-settings: "wdth" 75; text-transform: uppercase; }
.jn-wcard h3 small { display: block; font-size: .45em; }
.jn-wcard ul { margin-top: var(--s3); display: flex; flex-wrap: wrap; gap: 10px; }
.jn-wcard li { padding: 8px 14px; background: var(--white); border: 2px solid var(--ink); border-radius: 14px; font-weight: 700; font-size: 15px; }
.jn-wcard p { margin-top: var(--s2); font-weight: 600; color: var(--ink-2); }



/* ---- arrival by air: golden hour, cloud deck, the city below, runway lights ---- */
.jn-dusk { position: absolute; inset: 0; background: linear-gradient(to top, rgba(246,186,92,.92), rgba(249,214,160,.7) 45%, rgba(252,235,196,0) 88%); visibility: hidden; }
.jn-city { position: absolute; inset: 0; visibility: hidden; }
.jn-city__line { position: absolute; left: 0; right: 0; bottom: 30%; height: 21%; }
.jn-city__line svg, .jn-hzn svg { width: 100%; height: 100%; display: block; }
.jn-city__ground { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: var(--green-soft); border-top: 3px solid var(--ink); }
.jn-rw { position: absolute; left: -2%; right: -2%; top: 26%; height: 26%; background: var(--etu); border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); }
.jn-rw__dash { position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; background: repeating-linear-gradient(90deg, var(--paper) 0 40px, transparent 40px 80px); }
.jn-rw__lights { position: absolute; inset: 0; width: 100%; height: 100%; }
.jn-bank { position: absolute; inset: 0; pointer-events: none; }
.jn-bc { position: absolute; width: var(--w); top: var(--t); left: var(--l); }
.jn-tjet img { display: block; width: 100%; height: auto; position: relative; }
.jn-gear { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; transform-origin: 50% 61%; }
.jn-arrsign { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 1.6svh; padding: 10px 18px; background: var(--etu); color: var(--paper); border: 2px solid var(--ink); border-radius: 12px; box-shadow: var(--sh-pill); font: 700 14px/1 var(--text); letter-spacing: .12em; text-transform: uppercase; }
.jn-arrsign svg { width: 18px; height: 18px; transform: rotate(135deg); color: var(--gold); }
.jn-arrsign b { color: var(--gold); font-weight: 800; }
/* ---- coach: leaving Lagos (windscreen), traffic, road, horizon city, welcome arch, terminus ---- */
.jn-lane--far { width: 400vw; }
.jn-lane--far svg { width: 400vw; height: 100%; display: block; }
.jn-kerb { position: absolute; left: 0; right: 0; top: 0; height: 1.4svh; background: repeating-linear-gradient(90deg, var(--cotton) 0 30px, #C9CCD6 30px 60px); border-bottom: 2px solid var(--ink); }
.jn-road__edge { position: absolute; left: 0; right: 0; bottom: calc(var(--bar) + 1svh); height: 3px; background: var(--paper); opacity: .8; }
.jn-veh { position: absolute; left: 0; bottom: calc(var(--bar) + 9svh); filter: var(--die); }
.jn-v-keke { width: clamp(56px, 6vw, 90px); }
.jn-v-danfo { width: clamp(120px, 13vw, 190px); bottom: calc(var(--bar) + 7svh); }
.jn-v-car { width: clamp(90px, 9vw, 140px); }
.jn-v-lorry { width: clamp(200px, 26vw, 380px); }
.jn-v-lorry svg { width: 100%; height: auto; display: block; }
.jn-hzn { position: absolute; left: 0; right: 0; bottom: calc(42svh + 2svh); height: 13svh; }
.jn-hills { position: absolute; left: 0; bottom: calc(42svh - 3px); }
.jn-hills svg { width: 100%; height: 100%; display: block; }
.jn-hills--back { width: 300vw; height: 10svh; bottom: calc(42svh + 2svh); }
.jn-hills--mid { width: 300vw; height: 8svh; }
.jn-arch { position: absolute; left: 0; bottom: calc(var(--bar) + 15svh); width: min(38vw, 440px); height: 17svh; }
.jn-arch__beam { position: absolute; left: 0; right: 0; top: 0; padding: 10px 16px 12px; text-align: center; background: var(--green); color: var(--ink); border: 3px solid var(--ink); border-radius: 14px; font: 800 clamp(20px, 2.6vw, 36px)/.9 var(--display); font-variation-settings: "wdth" 75; text-transform: uppercase; z-index: 1; }
.jn-arch__beam small { display: block; font-size: .42em; margin-bottom: 4px; }
.jn-arch__leg { position: absolute; top: 20%; bottom: 0; left: 6%; width: 22px; background: var(--cotton); border: 3px solid var(--ink); }
.jn-arch__leg + .jn-arch__leg { left: auto; right: 6%; }
.jn-term { position: absolute; right: 0; bottom: calc(var(--bar) + 1svh); width: min(60vw, 700px); height: 31svh; }
.jn-term__roof { position: absolute; left: 0; right: 0; top: 0; padding: 12px 18px; background: var(--etu); color: var(--gold-soft); border: 3px solid var(--ink); border-radius: 10px; font: 800 clamp(16px, 1.8vw, 24px)/1 var(--display); font-variation-settings: "wdth" 80; white-space: nowrap; overflow: hidden; }
.jn-term__post { position: absolute; top: 12%; bottom: 0; left: 8%; width: 12px; background: var(--ink); }
.jn-term__post + .jn-term__post { left: auto; right: 10%; }
.jn-ahead { position: absolute; inset: 0; z-index: 5; background: var(--water); overflow: hidden; }
.jn-ahead__land { position: absolute; left: 0; right: 0; bottom: 0; height: 45%; background: var(--green-soft); border-top: 3px solid var(--ink); }
.jn-ahead__road { position: absolute; left: 0; right: 0; bottom: 0; height: 45%; background: var(--etu); clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%); }
.jn-ahead__dash { position: absolute; left: 50%; bottom: 0; width: 1.4%; height: 45%; transform: translateX(-50%); background: repeating-linear-gradient(0deg, var(--paper) 0 40px, transparent 40px 90px); clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%); }
.jn-gtry { position: absolute; left: 50%; top: 55%; width: min(70vw, 820px); height: 46%; margin-left: calc(min(70vw, 820px) / -2); }
.jn-gtry { top: 9%; transform-origin: 50% 100%; }
.jn-gtry__panel { position: absolute; left: 4%; right: 4%; top: 0; padding: 12px 16px 10px; background: var(--etu); color: var(--gold); border: 4px solid var(--ink); border-radius: 10px; text-align: center; box-shadow: 0 0 0 4px #C9CCD6; z-index: 1; }
.jn-gtry__panel b { display: block; font: 800 clamp(26px, 4.2vw, 58px)/.95 var(--display); font-variation-settings: "wdth" 75; text-transform: uppercase; letter-spacing: .01em; text-shadow: 0 0 14px rgba(233,165,18,.55); }
.jn-gtry__panel small { display: inline-block; margin-top: 8px; padding: 4px 10px; background: var(--green); color: var(--ink); border-radius: 6px; font: 800 13px/1 var(--text); letter-spacing: .06em; text-transform: uppercase; }
.jn-gtry__leg { position: absolute; top: 10%; bottom: 0; left: 0; width: 18px; background: #C9CCD6; border: 3px solid var(--ink); }
.jn-gtry__leg + .jn-gtry__leg { left: auto; right: 0; }
.jn-ahead__pillar { position: absolute; left: 0; top: 0; bottom: 0; width: 6%; background: var(--etu); border-right: 4px solid var(--ink); z-index: 2; }
.jn-ahead__pillar--r { left: auto; right: 0; border-right: 0; border-left: 4px solid var(--ink); }
.jn-ahead::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--bar) + 6svh); background: var(--etu); border-top: 4px solid var(--ink); z-index: 2; }
/* sound toggle in the letterbox */
.jn-snd { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; min-height: 26px; padding: 0 10px; background: transparent; box-shadow: none; border: 1.5px solid rgba(255,252,247,.4); border-radius: 999px; color: rgba(255,252,247,.85); font: 700 12px/1 var(--text); position: relative; }
.jn-snd svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.jn-snd[aria-pressed="true"] { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.jn-snd::before { content: ""; position: absolute; inset: -9px -4px; }
.jn-film__stage .jn-snd { pointer-events: auto; }
@media (max-width: 699px) {
  .jn-v-lorry { width: 52vw; } .jn-v-danfo { width: 30vw; } .jn-v-car { width: 22vw; } .jn-v-keke { width: 14vw; }
  .jn-arch { width: 62vw; height: 14svh; } .jn-term { width: 92vw; } .jn-gtry { width: 84vw; margin-left: -42vw; }
  .jn-arrsign { font-size: 12px; padding: 8px 12px; }
  .jn-city__line { height: 18%; }
  .jn-snd span { display: none; }
  .jn-film { --bar: 5svh; --gutter: 16px; }
  .jn-board { padding: 16px 16px 8px; width: 92vw; }
  .jn-board__row { grid-template-columns: 1fr auto auto; gap: 10px; font-size: 22px; padding: 14px 0; }
  .jn-board__row .jn-dim { display: none; }
  .jn-strip { padding: 0 14px; gap: 10px; font-size: 22px; }
  .jn-passchip { top: calc(var(--bar) + 1.5svh); padding: 6px 10px 6px 8px; }
  .jn-passchip b { font-size: 15px; }
  .jn-ftk__route { gap: 10px; padding: 16px 16px 6px; }
  .jn-ftk__band { padding: 12px 16px; }
  .jn-ftk__f { grid-template-columns: 1fr 1fr; padding: 12px 16px 14px; }
  .jn-ftk__f > div:first-child { grid-column: 1 / -1; }
  .jn-ftk__stub { padding: 12px 16px 14px; }
  .jn-ftk__bar { width: 52%; height: 40px; }
  .jn-ftk__qr { width: 60px; height: 60px; }
  .jn-slate em { display: none; }
  .jn-gw { left: 3vw; right: 3vw; bottom: 26svh; }
  .jn-gfloor { height: 26svh; }
  .jn-gsign { font-size: 18px; left: 6vw; top: auto; bottom: calc(26svh - 58px); }
  .jn-bay__coach { width: 90vw; bottom: 16svh; }
  .jn-seatchip { top: calc(var(--bar) + 12svh); }
  .jn-bay__posts { left: 4vw; right: 4vw; }
  .jn-tjet { width: 62vw; margin-left: -31vw; top: 40%; }
  .jn-tcoach { width: 90vw; margin-left: -45vw; }
  .jn-lane--near { bottom: calc(var(--bar) + 15svh); height: 22svh; }
  .jn-wl__city { font-size: 17vw; }
  .jn-place { font-size: 12px; padding: 6px 10px; gap: 6px; }
  .jn-places { gap: 6px; bottom: calc(var(--bar) + 1svh); }
  .jn-places--left { right: 0; justify-content: center; }
  .jn-route { font-size: 14px; }
}

/* the split's passport overlay, once stamped: a quiet scroll hint, and its button only for keyboard / screen readers */
.jn-sronly { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }
#beyond .bx-ov [data-bx-welt] { display: none; }
.jn-chev { position: fixed; left: 50%; bottom: 18px; width: 40px; height: 40px; margin-left: -20px; display: grid; place-items: center; color: var(--paper); opacity: 0; transition: opacity .3s; pointer-events: none; z-index: 3; }
.jn-chev svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.jn-stamped .jn-chev { opacity: .9; animation: jn-bob 1.4s ease-in-out infinite; }
@keyframes jn-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .jn-stamped .jn-chev { animation: none; } }
.reduce-motion .jn-stamped .jn-chev { animation: none; }

/* coach arrival: the places hang as a row of signposts under the welcome (the horizon is the city) */

/* cabin idle life: one passenger nods, a phone screen flickers. Nothing reacts to hover. */
.jn-nod { animation: jn-nod 3.4s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes jn-nod { 0%, 70%, 100% { transform: rotate(0); } 80% { transform: rotate(6deg); } 90% { transform: rotate(2deg); } }
.jn-glow { animation: jn-glow 2.6s steps(1) infinite; }
@keyframes jn-glow { 0%, 100% { opacity: 1; } 40% { opacity: .55; } 55% { opacity: .9; } 78% { opacity: .65; } }
@media (prefers-reduced-motion: reduce) { .jn-nod, .jn-glow { animation: none; } }
.reduce-motion .jn-nod, .reduce-motion .jn-glow { animation: none; }

.jn-arrive--coach .jn-wl__city { font-size: min(11vw, 13svh); }
@media (max-width: 699px) { .jn-arrive--coach .jn-wl__city { font-size: 13vw; } }

/* auto-play chip in the letterbox */
.jn-autochip { display: inline-flex; align-items: center; gap: 8px; margin-left: 10px; padding: 0 4px 0 10px; min-height: 26px; border-radius: 999px; background: rgba(255,252,247,.12); color: var(--paper); font: 700 12px/1 var(--text); letter-spacing: 0; }
.jn-autochip[hidden] { display: none; }
.jn-autochip i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: jn-live 1.2s ease-in-out infinite; }
@keyframes jn-live { 50% { opacity: .35; } }
.jn-autochip button { pointer-events: auto; width: 26px; height: 22px; border: 0; border-radius: 999px; background: var(--paper); color: var(--ink); font-size: 11px; line-height: 1; cursor: pointer; box-shadow: none; }
@media (max-width: 699px) { .jn-autochip { font-size: 0; gap: 0; padding: 0 2px; } .jn-autochip i { margin: 0 6px; } }

/* game footage slots: full-bleed, scrubbed; shown only inside their window and once loaded */
.jn-fl-video { z-index: 4; pointer-events: none; }
.jn-fl-bright { z-index: 5; }
.jn-fl-arrive { z-index: 6; }
.jn-clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--night); opacity: 0; visibility: hidden; }
.jn-clip.is-on { opacity: 1; visibility: visible; }
.jn-credit { position: absolute; left: 0; right: 0; bottom: calc(var(--bar) + 1svh + 52px); text-align: center; font: 600 12px/1.3 var(--text); color: var(--ink-2); }
.jn-credit[hidden] { display: none; }
@media (max-width: 699px) { .jn-credit { bottom: calc(var(--bar) + 1svh + 76px); font-size: 11px; } }

.jn-ahead > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }