/* ============================================================
   Simpex story "Van akker tot avondeten" (reis.html)
   Default, no class      = storyboard: a vertical picture book. This is what
                            phones, reduced motion, Save-Data, low memory, older
                            browsers, no-JS and search engines get.
   .film.is-cinema        = added by film.js on wide screens when motion is welcome:
                            one sticky stage, paintings dissolve as captions scroll.
   Defaults are the finished state: nothing is hidden until a script reveals it.
   Only transform and opacity ever animate.
   ============================================================ */
.film{--ink:#0b1c42;--ink2:#14346f;--card:#13284f;--hdr:62px;--bar:44px;
  position:relative;color:#fff;background:var(--ink);isolation:isolate}
.film .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.film a:focus-visible,.film button:focus-visible{outline:2px solid var(--yellow);outline-offset:3px;border-radius:6px}
.film h1,.film h2{text-wrap:balance}
/* no smooth scrolling on this page: an anchor jump (skip link, rail, chapters, back to the start) must land at once,
   not play the whole film as a fast-forward that loads every painting and loop on the way */
html:has(.film){scroll-behavior:auto}
/* reis.html <head> adds film-pre when cinema mode will run: the storyboard images stay unrequested until film.js
   has built the stage and decided which paintings to load (lazy images in a display:none box are not fetched) */
.film-pre .film-beats .plate>picture{display:none}

/* ---------- intro ---------- */
.film-head{max-width:1240px;margin:0 auto;padding:clamp(48px,8vw,96px) 22px clamp(30px,4vw,48px)}
.film-head .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--yellow);background:rgba(247,201,72,.14);border:1px solid rgba(247,201,72,.3);padding:6px 13px;border-radius:30px}
.film-head .eyebrow::before{content:"";width:7px;height:7px;background:currentColor;transform:rotate(45deg)}
.film-head h1{font-size:clamp(36px,6vw,72px);line-height:1;letter-spacing:-.03em;font-weight:900;margin-top:18px;max-width:14ch}
.film-head .intro{font-size:clamp(16px,1.6vw,20px);line-height:1.5;color:rgba(255,255,255,.84);max-width:52ch;margin-top:16px;text-wrap:pretty}
.film-head .head-links{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:22px;font-size:14px;font-weight:700}
.film-head .skip{display:inline-flex;align-items:center;min-height:44px;color:#fff;text-decoration:underline;text-underline-offset:4px}
.film-head .skip:hover{color:var(--yellow)}
.film-head .hint{color:rgba(255,255,255,.62);font-weight:600}

/* ---------- storyboard chapter bar (under the header) ---------- */
.film-chapters{position:sticky;top:var(--hdr);z-index:30;background:var(--ink);border-bottom:1px solid rgba(255,255,255,.08)}
.film-chapters ol{list-style:none;display:flex;gap:2px;max-width:1240px;margin:0 auto;padding:0 12px;overflow-x:auto;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
.film-chapters ol::-webkit-scrollbar{display:none}
.film-chapters li{position:relative;flex:none}
.film-chapters a{display:inline-flex;align-items:center;gap:7px;min-height:var(--bar);padding:0 10px;white-space:nowrap;font-size:13px;font-weight:700;color:rgba(255,255,255,.84);border-radius:8px}
.film-chapters a:hover{color:#fff}
.film-chapters a[aria-current]{color:#fff;background:rgba(255,255,255,.1)}
.film-chapters .n{font-family:var(--mono);font-size:11px;color:var(--yellow)}
/* the route under the chapter names: neutral in the field and the factory, dotted yellow once Simpex has bought
   and the goods travel (chapters 3 and 4), solid yellow from Simpex to the table (chapters 5 and 6) */
.film-chapters li::after{content:"";position:absolute;left:0;right:-2px;bottom:0;height:3px;pointer-events:none;background:rgba(255,255,255,.28)}
.film-chapters li:nth-child(n+3)::after{background:repeating-linear-gradient(90deg,var(--yellow) 0 6px,transparent 6px 11px)}
.film-chapters li:nth-child(n+5)::after{background:var(--yellow)}
.film-chapters li:last-child::after{right:0}

/* ---------- the stops (storyboard) ---------- */
.film-beats{list-style:none;max-width:1240px;margin:0 auto;padding:clamp(22px,3vw,34px) 22px 56px;display:grid;gap:clamp(22px,3vw,34px)}
.stop{display:grid;gap:clamp(22px,3vw,34px);scroll-margin-top:calc(var(--hdr) + var(--bar) + 14px)}
.scene{position:relative;display:grid;border-radius:22px;overflow:hidden;background:var(--card);box-shadow:0 18px 40px -22px rgba(0,0,0,.6);
  scroll-margin-top:calc(var(--hdr) + var(--bar) + 14px)}
.plate{--ar:1.7684;--fxu:var(--fx,.5);--fyu:var(--fy,.5);grid-area:1/1;align-self:stretch;position:relative;margin:0;aspect-ratio:1600/905;overflow:hidden;
  background:var(--card) var(--lq,none) center/cover no-repeat}
.plate picture{display:contents}
.plate>picture>img{display:block;width:100%;height:100%;object-fit:cover;object-position:calc(var(--fxu)*100%) calc(var(--fyu)*100%)}
.plate::after{content:"";position:absolute;inset:0;pointer-events:none;background:url(film/grain.png) 0 0/256px 256px;mix-blend-mode:soft-light;opacity:.32}
.plate video,.plate .mist,.plate .layer{display:none}

.cap{grid-area:1/1;align-self:end;position:relative;z-index:1;padding:clamp(22px,3vw,40px);padding-top:120px;
  background:linear-gradient(0deg,rgba(9,20,50,.94) 0%,rgba(9,20,50,.72) 52%,rgba(9,20,50,0) 100%)}
.cap>*{max-width:600px}
.cap-chap{display:flex;align-items:baseline;gap:9px;font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--yellow)}
.cap-chap .n{font-family:var(--mono);font-weight:700;letter-spacing:0}
.cap h2{font-size:clamp(26px,3.2vw,44px);line-height:1.05;letter-spacing:-.025em;font-weight:900;margin-top:8px}
.cap .line{font-size:clamp(16px,1.4vw,19px);line-height:1.5;color:rgba(255,255,255,.9);margin-top:10px;text-wrap:pretty}

/* Simpex role chips */
.film .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.film .chip{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:6px 13px 6px 7px;border-radius:30px;cursor:default;white-space:normal;
  font:800 13px/1.2 var(--font);color:#fff;background:rgba(11,28,66,.72);border:1px solid rgba(247,201,72,.55);box-shadow:none}
.film .chip .ci{width:20px;height:20px;flex:none;border-radius:50%;background:var(--yellow);fill:none;stroke:var(--navy-ink);stroke-width:3;padding:3px;stroke-linecap:round;stroke-linejoin:round}
.film .chip-iso{padding-left:4px}
.film .chip-iso img{width:28px;height:28px;border-radius:50%;background:#fff;object-fit:contain;padding:2px;flex:none}
.film .chip-link{cursor:pointer;padding:6px 14px;border-color:rgba(255,255,255,.4);text-decoration:underline;text-underline-offset:3px;min-height:44px}
.film .chip-link:hover{background:rgba(255,255,255,.12)}

/* the HTML pill on the hero pallet (stop 11); coordinates are % of the painting */
.pin{position:absolute;left:var(--hx);top:var(--hy);z-index:2;transform:translate(-50%,calc(-100% - 16px));display:inline-flex;align-items:center;
  font-size:12.5px;font-weight:800;color:var(--navy-ink);background:linear-gradient(135deg,var(--yellow),var(--yellow2));
  padding:6px 12px;border-radius:20px;box-shadow:0 8px 20px -8px rgba(0,0,0,.6);white-space:nowrap}
.pin::after{content:"";position:absolute;left:50%;top:100%;width:2px;height:14px;background:var(--yellow);transform:translateX(-50%)}

/* the order on the tablet (stop 12) */
.tablet{margin-top:18px;max-width:440px;padding:7px;border-radius:20px;background:#101c33;border:1px solid rgba(255,255,255,.18);
  box-shadow:0 24px 50px -22px rgba(0,0,0,.8)}
.tab-h{display:flex;align-items:center;justify-content:space-between;padding:8px 12px 6px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.tab-h i{width:22px;height:4px;border-radius:2px;background:rgba(255,255,255,.22)}
.order{list-style:none;border-radius:14px;background:#f7f8fb;color:var(--text);padding:4px 14px;font-size:13.5px}
.order li{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #e3e8f1}
.order .sku{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--text-dim);flex:none}
.order .nm{flex:1;min-width:0;font-weight:600;line-height:1.3}
.order b{flex:none;font-weight:800;color:var(--navy);background:rgba(20,52,111,.08);border-radius:8px;padding:3px 8px;white-space:nowrap}
.order li.sent{border-bottom:0;gap:8px;font-weight:800;color:#0b7a53}
.order li.sent svg{width:20px;height:20px;flex:none}
.order li.sent circle{fill:#0f9d6b}
.order li.sent path{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* route map at sea (stop 8B): inline SVG, labels in HTML, no borders */
.route-map{position:relative;margin-top:18px;max-width:320px;aspect-ratio:300/140;border-radius:14px;background:rgba(11,28,66,.55);border:1px solid rgba(255,255,255,.14)}
.route-map svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.route-map .grat path{fill:none;stroke:rgba(255,255,255,.08);stroke-width:1}
.route-map .rt-base{fill:none;stroke:rgba(255,255,255,.22);stroke-width:1.5;stroke-dasharray:3 4}
.route-map .rt{fill:none;stroke:var(--yellow);stroke-width:2.5;stroke-linecap:round}
.route-map circle{fill:#fff}
.route-map circle.end{fill:var(--yellow);stroke:var(--ink);stroke-width:2}
.route-map .lb{position:absolute;left:var(--x);top:var(--y);font-size:11.5px;font-weight:800;color:#fff;white-space:nowrap;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.route-map .lb[data-side=l]{transform:translate(calc(-100% - 9px),-50%)}
.route-map .lb[data-side=r]{transform:translate(9px,-50%)}
.route-map .lb[data-side=b]{transform:translate(-50%,7px)}
.route-map .lb2{text-align:right;line-height:1.15}

/* ---------- facts switch (STORY-DESIGN.md section 8) ----------
   section.film[data-facts-ok] lists the confirmed fact numbers, for example "2 3 5 9 11 15".
   Anything marked data-fact="N" shows only once fact N is listed; its data-fact-alt="N" fallback shows until then.
   "preview" shows every claim as written (test page only: film.js drops it when the test ribbon is gone). */
.film:not([data-facts-ok~=preview]):not([data-facts-ok~="1"]) [data-fact~="1"],
.film:not([data-facts-ok~=preview]):not([data-facts-ok~="2"]) [data-fact~="2"],
.film:not([data-facts-ok~=preview]):not([data-facts-ok~="3"]) [data-fact~="3"],
.film:not([data-facts-ok~=preview]):not([data-facts-ok~="4"]) [data-fact~="4"],
.film:not([data-facts-ok~=preview]):not([data-facts-ok~="5"]) [data-fact~="5"],
.film:not([data-facts-ok~=preview]):not([data-facts-ok~="6"]) [data-fact~="6"],
.film:not([data-facts-ok~=preview]):not([data-facts-ok~="9"]) [data-fact~="9"],
.film:not([data-facts-ok~=preview]):not([data-facts-ok~="11"]) [data-fact~="11"],
.film:not([data-facts-ok~=preview]):not([data-facts-ok~="12"]) [data-fact~="12"],
.film:not([data-facts-ok~=preview]):not([data-facts-ok~="14"]) [data-fact~="14"],
.film:not([data-facts-ok~=preview]):not([data-facts-ok~="15"]) [data-fact~="15"],
.film[data-facts-ok~=preview] [data-fact-alt],
.film[data-facts-ok~="1"] [data-fact-alt~="1"],.film[data-facts-ok~="3"] [data-fact-alt~="3"],
.film[data-facts-ok~="4"] [data-fact-alt~="4"],.film[data-facts-ok~="5"] [data-fact-alt~="5"],
.film[data-facts-ok~="9"] [data-fact-alt~="9"],.film[data-facts-ok~="11"] [data-fact-alt~="11"],
.film[data-facts-ok~="12"] [data-fact-alt~="12"],.film[data-facts-ok~="14"] [data-fact-alt~="14"]{display:none}

/* ---------- end card ---------- */
.film-end{padding:clamp(56px,7vw,90px) 22px clamp(64px,8vw,100px);text-align:center;background:var(--ink);scroll-margin-top:var(--hdr)}
.film-end .end-in{max-width:980px;margin:0 auto}
.film-end h2{font-size:clamp(30px,4vw,50px);font-weight:900;letter-spacing:-.025em;line-height:1.04}
.film-end .end-line{font-size:clamp(16px,1.5vw,18px);line-height:1.55;color:rgba(255,255,255,.85);max-width:54ch;margin:14px auto 0}
.end-chips{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;max-width:880px;margin:32px auto 0}
.end-chips li[hidden]{display:none}
.end-chips a{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;padding:16px 12px 14px;border-radius:18px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);transition:background .18s,border-color .18s}
.end-chips a:hover{background:rgba(255,255,255,.13);border-color:rgba(247,201,72,.6)}
.end-chips .ec-img{display:grid;place-items:center;height:118px;width:100%;margin-bottom:4px}
.end-chips img{max-height:118px;max-width:100%;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 12px 18px rgba(0,0,0,.45))}
/* a product photo that is not a cut-out (Koch 4999) sits on its own white tile */
.end-chips .ec-tile img{width:112px;height:112px;object-fit:cover;border-radius:14px;background:#fff;filter:none;box-shadow:0 12px 22px -10px rgba(0,0,0,.6)}
.end-chips b{font-size:14px;font-weight:800;line-height:1.25}
.end-chips small{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:12px;color:rgba(255,255,255,.72);font-weight:600}
.end-chips .sku{font-family:var(--mono);font-size:11px}
.end-chips .stock{margin-top:4px}
.end-chips .stock[hidden]{display:none}
.end-chips .tag.ok{background:rgba(15,157,107,.2);color:#6fe0b4}
.end-chips .tag.warn{background:rgba(245,166,35,.2);color:#ffc773}
.end-chips .tag.err{background:rgba(216,50,79,.22);color:#ff9aac}
.end-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.end-cta .btn{min-height:46px;padding:12px 20px;font-size:14.5px}
.end-cta .btn[hidden]{display:none}
.film-end .btn-ghost{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.3)}
.film-end .btn-ghost:hover{border-color:var(--yellow);color:#fff}
/* the four proof points as a tidy 2 x 2 block on wide screens (a single wrapped line on phones) */
.end-proof{list-style:none;display:grid;grid-template-columns:repeat(2,max-content);justify-content:center;gap:12px 34px;margin-top:34px;font-size:13px;font-weight:700;color:rgba(255,255,255,.82)}
.end-proof li{display:inline-flex;align-items:center;gap:9px}
.end-proof img{width:34px;height:34px;border-radius:50%;background:#fff;object-fit:contain;padding:2px}
.end-proof svg{width:22px;height:22px;fill:none;stroke:var(--yellow);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.end-links{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 20px;margin-top:26px;font-size:13.5px;font-weight:700}
.end-links a{display:inline-flex;align-items:center;min-height:40px;color:rgba(255,255,255,.8);text-decoration:underline;text-underline-offset:3px}
.end-links a:hover{color:var(--yellow)}

/* storyboard on screens 900 px and wider: the optional gentle drift of the image only */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .film:not(.is-cinema) .plate>picture>img{animation:sb-drift linear both;animation-timeline:view()}
    @keyframes sb-drift{from{transform:scale(1.045) translateY(-1.6%)}to{transform:scale(1.045) translateY(1.6%)}}
  }
}

/* ---------- phones, small tablets and portrait screens: 4:5 paintings, caption below on solid navy ---------- */
@media (max-width:899px),(max-aspect-ratio:1/1){
  .film-head{max-width:672px;padding:44px 16px 28px}
  .film-chapters ol{max-width:672px}
  .film-beats{max-width:640px;padding:22px 16px 44px;gap:44px}
  .stop{gap:44px}
  .scene{display:block;background:none;border-radius:0;overflow:visible;box-shadow:none}
  .plate{aspect-ratio:4/5;border-radius:18px;background-image:var(--lqm,none)}
  .plate>picture>img{object-position:50% 50%}
  .pin{left:var(--mhx);top:var(--mhy)}
  .cap{padding:16px 2px 0;background:none}
  .cap h2{font-size:clamp(26px,7.6vw,32px)}
  .cap .line{font-size:16px}
  .tablet{max-width:none}
  .route-map{max-width:none}
  .end-chips{grid-template-columns:repeat(2,minmax(0,1fr))}
  .end-proof{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px}
  .film-end{padding:52px 16px 64px}
}
@media (max-width:380px){
  .order{padding:2px 10px;font-size:13px}
  .order .sku{display:none}
}

/* ============================================================
   CINEMA MODE (film.js adds .is-cinema)
   ============================================================ */
.film-rail,.film-stage{display:none}
.film.is-cinema .film-chapters{display:none}
.film.is-cinema .film-body{position:relative;overflow:clip}   /* clip, not hidden: sticky keeps working, nothing spills past the end card */

/* the stage: one sticky viewport that holds every painting */
.film.is-cinema .film-stage{display:block;position:sticky;top:0;height:100vh;height:100svh;margin-bottom:-100vh;margin-bottom:-100svh;
  overflow:hidden;container-type:size;background:var(--ink);z-index:0;pointer-events:none}
.film.is-cinema .plate,.plate-ov{--ar:1.7684;--fxu:var(--fx,.5);--fyu:var(--fy,.5);position:absolute;aspect-ratio:auto;border-radius:0;margin:0;
  --W:max(100cqw,calc(100cqh * var(--ar)));--H:max(100cqh,calc(100cqw / var(--ar)));
  width:var(--W);height:var(--H);
  left:clamp(calc(100cqw - var(--W)),calc(50cqw - var(--W) * var(--fxu)),0px);
  top:clamp(calc(100cqh - var(--H)),calc(50cqh - var(--H) * var(--fyu)),0px);
  transform-origin:calc(var(--fxu) * 100%) calc(var(--fyu) * 100%);
  opacity:0;visibility:hidden}
.film.is-cinema .plate::after{display:none}
.film.is-cinema .plate.on,.plate-ov.on{visibility:visible;will-change:opacity,transform}
.plate-ov{z-index:7;pointer-events:none}   /* the pill rides above the scrim, with the same transform as its painting */
.film.is-cinema .plate>picture>img{object-position:center;animation:none}
.film.is-cinema .plate video{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s ease}
.film.is-cinema .plate video.live{opacity:1}
.film.is-cinema .plate .layer:not([hidden]){display:block;position:absolute;inset:0}
.film.is-cinema .plate .layer img{display:block;width:100%;height:100%;object-fit:cover}
.film.is-cinema .plate .mist{display:block;position:absolute;left:-12%;right:-12%;top:47%;height:15%;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(243,233,214,.34),rgba(243,233,214,0) 72%);filter:blur(10px)}
.plate-ov .pin{transition:transform .5s ease .3s;transform:translate(-50%,calc(-100% - 4px)) scale(.9)}
.plate-ov.now .pin{transform:translate(-50%,calc(-100% - 16px))}

.film-dip,.film-doors,.film-scrim,.film-grain{position:absolute;inset:0;pointer-events:none}
.film-dip i{position:absolute;inset:0;opacity:0}
.film-dip .dip-amber{background:#c9761f;mix-blend-mode:multiply}
.film-dip .dip-navy{background:var(--ink)}
.film-doors{z-index:4;visibility:hidden}
.film-doors.on{visibility:visible}
.film-doors i{position:absolute;top:0;bottom:0;width:50.5%;will-change:transform;
  background:linear-gradient(90deg,rgba(0,0,0,.28),rgba(0,0,0,0) 12%,rgba(0,0,0,0) 88%,rgba(0,0,0,.35)),
             repeating-linear-gradient(90deg,#122d61 0 26px,#0d2350 26px 30px,#16397a 30px 34px)}
.film-doors .door-l{left:0;transform:translateX(-101%)}
.film-doors .door-r{right:0;transform:translateX(101%)}
.film-doors .door-l::after{content:"";position:absolute;right:16%;top:12%;bottom:12%;width:6px;border-radius:3px;background:rgba(255,255,255,.2)}
.film-doors .door-r::after{content:"";position:absolute;left:16%;top:12%;bottom:12%;width:6px;border-radius:3px;background:rgba(255,255,255,.2)}
/* the dense part of the scrim stops at the caption column (a third of the screen), so the action right of it stays bright */
.film-scrim{z-index:5;
  background:linear-gradient(90deg,rgba(9,20,50,.86) 0%,rgba(11,28,66,.72) 24%,rgba(11,28,66,.42) 34%,rgba(11,28,66,.12) 48%,rgba(11,28,66,0) 60%),
             linear-gradient(0deg,rgba(9,20,50,.4),rgba(9,20,50,0) 28%),
             linear-gradient(180deg,rgba(9,20,50,.45),rgba(9,20,50,0) 18%)}
.film-grain{z-index:6;background:url(film/grain.png) 0 0/256px 256px;mix-blend-mode:soft-light;opacity:.32}

/* the captions scroll over the stage as real text, one screen per painting */
.film.is-cinema .film-beats{max-width:none;margin:0;padding:0;display:block;position:relative;z-index:2}
.film.is-cinema .stop{display:block;scroll-margin-top:0}
.film.is-cinema .scene{min-height:100vh;min-height:100svh;display:flex;align-items:center;background:none;border-radius:0;overflow:visible;box-shadow:none;
  pointer-events:none;scroll-margin-top:0;padding:calc(var(--hdr) + 24px) 0 24px}
/* the caption keeps to the left third, so trucks, drivers and owners right of it are never under the text */
.film.is-cinema .cap{position:relative;align-self:center;background:none;padding:0;pointer-events:auto;
  margin-left:clamp(24px,4vw,72px);margin-right:24px;max-width:min(460px,30vw);
  opacity:var(--cap-o,1);text-shadow:0 2px 18px rgba(4,10,28,.6)}
/* keyboard focus never lands on a faded caption */
.film.is-cinema .cap:focus-within{opacity:1}
.film.is-cinema .cap::before{content:"";position:absolute;inset:-60px -50px -60px -140px;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(9,20,50,.5),rgba(9,20,50,0))}
.film.is-cinema .cap>*{max-width:none}
.film.is-cinema .cap h2{font-size:clamp(28px,3vw,46px)}
.film.is-cinema .cap .tablet,.film.is-cinema .cap .chip{text-shadow:none}
/* stop 10: the caption sits low over the empty road, clear of the cab and the driver */
.film.is-cinema .scene[data-scene="10"] .cap{align-self:flex-end;margin-bottom:6svh}
.film.is-cinema .cap .route-map{max-width:320px}
.film.is-cinema .cap .tablet{max-width:440px}
/* stop 12 holds its caption still while the order fills */
.film.is-cinema .scene[data-hold]{min-height:175vh;min-height:175svh;align-items:flex-start}
/* P12 keeps a calm wall on the left: the order card gets a wider column (the people start at 58% of the painting) */
.film.is-cinema .scene[data-hold] .cap{position:sticky;top:calc(var(--hdr) + 4svh);align-self:flex-start;max-width:min(480px,44vw)}
/* short screens: the pinned caption with its tablet must fit under the header, links included */
@media (max-height:700px){
  .film.is-cinema .scene[data-hold] .cap{top:calc(var(--hdr) + 10px)}
  .film.is-cinema .scene[data-hold] .cap h2{font-size:clamp(26px,2.6vw,34px);margin-top:4px}
  .film.is-cinema .scene[data-hold] .cap .line{font-size:16px;margin-top:6px}
  .film.is-cinema .scene[data-hold] .tablet{margin-top:10px;padding:5px}
  .film.is-cinema .scene[data-hold] .tab-h{padding:4px 10px 3px}
  .film.is-cinema .scene[data-hold] .order{font-size:13px}
  .film.is-cinema .scene[data-hold] .order li{padding:5px 0}
  .film.is-cinema .scene[data-hold] .chips{margin-top:10px}
}
.film.is-cinema .cap .line{font-size:clamp(17px,1.45vw,20px)}
.film.is-cinema .chip{transition:transform .4s ease,border-color .4s ease}
.film.is-cinema .scene:not(.is-now) .chip{transform:translateY(6px)}
.film.is-cinema .scene.is-now .chip{border-color:var(--yellow)}
.film.is-cinema .route-map .rt{stroke-dasharray:1 1}

/* stop 12 in cinema: the lines fill as you scroll, then the order is sent.
   A line still to come is dimmed with a lighter text colour (at least 4.5:1), never with opacity. */
.film.is-cinema .order li,.film.is-cinema .order b{transition:color .35s ease,background-color .35s ease,transform .35s ease}
.film.is-cinema .order:not(.full) li:not(.in){color:var(--text-dim);transform:translateX(-6px)}
.film.is-cinema .order:not(.full) li:not(.in) b{color:var(--text-dim);background:rgba(20,52,111,.04)}
.film.is-cinema .order li.sent svg{transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.film.is-cinema .order:not(.is-sent) li.sent{color:var(--text-dim)}
.film.is-cinema .order:not(.is-sent) li.sent circle{fill:#97a3ba}
.film.is-cinema .order:not(.is-sent) li.sent svg{transform:scale(.6)}

/* the rail: 15 stops in 6 chapters, pinned to the right edge */
.film.is-cinema .film-rail{display:flex;position:sticky;top:0;height:100vh;height:100svh;margin-bottom:-100vh;margin-bottom:-100svh;z-index:4;
  pointer-events:none;align-items:center;justify-content:flex-end;padding-top:var(--hdr);transition:opacity .3s}
/* hidden over the intro and the end card, but shown again the moment a rail link has keyboard focus */
.film.at-end .film-rail,.film.pre .film-rail{opacity:0;pointer-events:none}
.film.at-end .film-rail *,.film.pre .film-rail *{pointer-events:none}
.film.is-cinema .film-rail:focus-within{opacity:1}
/* each stop link is at least 24 px tall (WCAG 2.5.8) and 44 px where the screen is tall enough */
.rail-in{--dot:clamp(24px,calc((100svh - var(--hdr) - 110px) / 15),44px);position:relative;pointer-events:auto;margin-right:clamp(10px,1.8vw,26px);
  display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.film-rail ol{list-style:none;position:relative}
/* a dark backing keeps the dots and the route readable over bright paintings */
.film-rail ol::before{content:"";position:absolute;right:8px;top:-8px;bottom:-8px;width:28px;border-radius:14px;z-index:-1;pointer-events:none;
  background:rgba(9,20,50,.55)}
.film-rail li.ch:not(:first-child){margin-top:6px}
.film-rail a{position:relative;display:flex;align-items:center;justify-content:flex-end;width:44px;height:var(--dot);color:#fff}
.film-rail a::after{content:"";width:12px;height:12px;margin-right:16px;border-radius:50%;background:var(--ink);border:2px solid rgba(255,255,255,.6);
  transition:transform .2s,background .2s,border-color .2s;position:relative;z-index:1}
.film-rail li.past a::after{background:#fff;border-color:#fff}
.film-rail li.past.y a::after{background:var(--yellow);border-color:var(--yellow)}
.film-rail a[aria-current]::after{background:var(--yellow);border-color:#fff;transform:scale(1.35)}
.film-rail a .n{display:none}
.film-rail a .t{position:absolute;right:40px;top:50%;transform:translate(6px,-50%);opacity:0;transition:opacity .2s,transform .2s;
  font-size:11.5px;font-weight:800;letter-spacing:.03em;white-space:nowrap;background:rgba(9,20,50,.78);padding:4px 10px;border-radius:12px;pointer-events:none}
/* the stop name shows on hover and focus, and for a moment after the stop changes (film.js adds .flash) */
.film-rail a:hover .t,.film-rail a:focus-visible .t,.film-rail.flash a[aria-current] .t{opacity:1;transform:translate(0,-50%)}
.film-rail a:focus-visible{outline-offset:-4px}
/* route line: neutral to stop 5, dotted yellow to stop 11, solid yellow after (set by film.js in px) */
.rail-route{position:absolute;right:20.5px;top:0;width:3px;height:100%;pointer-events:none}
.rail-route i,.rail-route span{position:absolute;left:0;width:3px;display:block}
.r-base{top:var(--y0,0);height:calc(var(--y14,0px) - var(--y0,0px));background:rgba(255,255,255,.35);border-radius:2px}
.r-win{top:var(--y0,0);height:calc(var(--y14,0px) - var(--y0,0px));overflow:hidden}
.r-lit{top:0;height:100%}
.r-a{top:0;height:calc(var(--y4,0px) - var(--y0,0px));background:rgba(255,255,255,.75)}
.r-b{top:calc(var(--y4,0px) - var(--y0,0px));height:calc(var(--y10,0px) - var(--y4,0px));background:repeating-linear-gradient(180deg,var(--yellow) 0 5px,transparent 5px 9px)}
.r-c{top:calc(var(--y10,0px) - var(--y0,0px));height:calc(var(--y14,0px) - var(--y10,0px));background:var(--yellow)}
/* the order travels from stop 12 up to the warehouse at stop 11, twice, with a navy ring so it reads on any painting */
.r-pulse{left:-6.5px!important;width:16px!important;height:16px;top:0;border-radius:50%;background:var(--yellow);opacity:0;
  box-shadow:0 0 0 3px var(--ink),0 0 18px 6px rgba(247,201,72,.8);z-index:2}
.r-pulse.go{animation:rail-pulse 1.3s ease-in-out 2}
@keyframes rail-pulse{
  0%{opacity:0;transform:translateY(calc(var(--y11,0px) - 8px)) scale(.6)}
  15%{opacity:1;transform:translateY(calc(var(--y11,0px) - 8px)) scale(1)}
  85%{opacity:1;transform:translateY(calc(var(--y10,0px) - 8px)) scale(1)}
  100%{opacity:0;transform:translateY(calc(var(--y10,0px) - 8px)) scale(1.6)}
}
/* pause control (WCAG 2.2.2) */
.film-pause{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:7px 12px;border-radius:18px;cursor:pointer;
  font:800 12px var(--font);letter-spacing:.02em;color:#fff;background:rgba(9,20,50,.72);border:1px solid rgba(255,255,255,.3)}
.film-pause[hidden]{display:none}
.film-pause:hover{border-color:var(--yellow)}
.film-pause svg{width:14px;height:14px;fill:currentColor}
.film-pause .i-play,.film-pause .on-still,.film-pause.is-on .i-pause,.film-pause.is-on .on-move{display:none}
.film-pause.is-on .i-play,.film-pause.is-on .on-still{display:inline}

/* end card rises over the darkening painting */
.film.is-cinema .film-end{position:relative;z-index:3;min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center;
  padding-top:34vh;padding-top:34svh;background:linear-gradient(180deg,rgba(11,28,66,0) 0,rgba(11,28,66,.86) 26svh,var(--ink) 50svh)}

/* paused: the drift and the loops stop where they are; scrolling still changes the painting */
.film.is-still .plate video{transition:none}

@media print{
  .film-chapters,.film-rail,.film-stage{display:none!important}
  .film,.scene,.cap{background:none!important;color:#000}
  .cap{position:static}
}