.collection-tour{--tour-border:rgba(255,255,255,.13);--tour-surface:rgba(255,255,255,.035);--tour-muted:#a7a7ad;max-width:1280px;margin:30px auto 80px;scroll-margin-top:110px}
.tour-heading{text-align:center;margin:0 auto 30px;max-width:720px}
.tour-eyebrow{display:block;margin-bottom:12px;color:#a5a8ff;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.tour-heading h2{margin:0;font-size:clamp(30px,4vw,52px);line-height:1.1;letter-spacing:-.035em}
.tour-heading p{margin:16px auto 0;color:var(--tour-muted);font-size:clamp(15px,1.4vw,19px);line-height:1.6;max-width:600px}
.tour-shell{position:relative;border:1px solid var(--tour-border);border-radius:24px;background:var(--tour-surface);box-shadow:0 24px 70px rgba(0,0,0,.15)}
.tour-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:23px;overscroll-behavior-x:contain}
.tour-track::-webkit-scrollbar{display:none}
.tour-slide{flex:0 0 100%;min-width:0;margin:0;scroll-snap-align:start;scroll-snap-stop:always}
.tour-slide>img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#08090b}
.tour-slide figcaption{padding:24px 28px;min-height:118px;text-align:center;background:linear-gradient(180deg,rgba(19,19,25,.78),rgba(8,9,13,.94))}
.tour-slide h3{font-size:clamp(18px,2vw,23px);letter-spacing:-.02em;margin:0 0 7px;color:#f7f7f8}
.tour-slide p{font-size:14px;line-height:1.6;color:#a7a7ad;margin:0 auto;max-width:760px}
.tour-arrows{position:absolute;inset:0 0 auto;aspect-ratio:16/9;pointer-events:none;display:flex;align-items:center;justify-content:space-between;padding:0 14px}
.tour-control{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:10px;border:1px solid rgba(150,155,255,.4);border-radius:999px;color:#c3c6ff;background:rgba(10,11,18,.84);font:inherit;cursor:pointer}
.tour-arrows .tour-control{pointer-events:auto;width:52px;height:52px;box-shadow:0 4px 18px rgba(0,0,0,.25);backdrop-filter:blur(12px)}
.tour-control svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tour-control:hover{background:#24243d;border-color:#a5a8ff;color:#fff}
.tour-controls{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:20px}
.tour-controls[hidden],.tour-arrows[hidden]{display:none}
.tour-dots{display:flex;align-items:center;justify-content:center;gap:0}
.tour-dot{display:grid;place-items:center;width:28px;height:44px;padding:0;border:0;background:transparent;cursor:pointer;border-radius:999px}
.tour-dot span{display:block;width:10px;height:10px;background:rgba(255,255,255,.22);border-radius:50%;transition:background .2s,transform .2s}
.tour-dot[aria-pressed="true"] span{background:#969bff;transform:scale(1.25)}
.tour-dot:hover span{background:#c3c6ff}
.tour-control:focus-visible,.tour-dot:focus-visible,.tour-track:focus-visible{outline:2px solid #a5b4fc;outline-offset:3px}
body.light .collection-tour{--tour-border:rgba(0,0,0,.13);--tour-surface:rgba(255,255,255,.65);--tour-muted:#686b73}
body.light .tour-eyebrow{color:#5751bc}
body.light .tour-dot span{background:rgba(0,0,0,.2)}
body.light .tour-dot[aria-pressed="true"] span{background:#6863d5}
body.light .tour-slide figcaption{background:linear-gradient(180deg,#f6f6fa,#eeeef5)}
body.light .tour-slide h3{color:#17181c}
body.light .tour-slide p{color:#686b73}
@media(max-width:700px){.collection-tour{margin:48px auto}.tour-heading{padding:0 12px;margin-bottom:22px}.tour-shell{border-radius:19px}.tour-track{border-radius:18px}.tour-slide figcaption{padding:18px 16px;min-height:132px}.tour-arrows{padding:0 8px}.tour-arrows .tour-control{width:44px;height:44px}.tour-controls{gap:6px;margin-top:12px}}
@media(prefers-reduced-motion:reduce){.tour-dot span{transition:none}}

/* Projectivy-inspired compact carousel on desktop only. */
@media (min-width: 1000px) {
  .collection-tour { max-width: 920px; }
}

/* Desktop showcase section extends its top and bottom edges across the viewport,
   while the carousel itself stays compact and centered. */
@media (min-width: 1000px) {
  .collection-tour {
    position: relative;
    isolation: isolate;
    padding: 34px 0 58px;
  }
  .collection-tour::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0 calc(50% - 50vw);
    background: rgba(255,255,255,.018);
    border-top: 1px solid rgba(255,255,255,.08);
    border-bottom: 1px solid rgba(255,255,255,.08);
    pointer-events: none;
  }
  body.light .collection-tour::before {
    background: rgba(0,0,0,.018);
    border-color: rgba(0,0,0,.1);
  }
}

/* Put each slide's wording over its image, like the Projectivy gallery. */
.tour-slide { position:relative; }
.tour-slide figcaption {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:1;
  box-sizing:border-box;
  min-height:0;
  padding:40px 22px 20px;
  background:linear-gradient(to bottom,transparent,rgba(5,6,10,.72) 55%,rgba(5,6,10,.94));
  pointer-events:none;
}
.tour-slide figcaption h3 { margin-bottom:5px; }
.tour-slide figcaption p { color:#e1e1e7; }
body.light .tour-slide figcaption { background:linear-gradient(to bottom,transparent,rgba(5,6,10,.72) 55%,rgba(5,6,10,.94)); }
body.light .tour-slide figcaption h3, body.light .tour-slide figcaption p { color:#fff; }
@media(max-width:700px) { .tour-slide figcaption { min-height:0; padding:28px 12px 12px; } .tour-slide figcaption p { font-size:12px; line-height:1.35; } }

/* Frosted-glass caption strip inspired by Projectivy's gallery. */
.collection-tour .tour-slide figcaption,
body.light .collection-tour .tour-slide figcaption {
  padding: 28px 24px 17px;
  background: linear-gradient(180deg, rgba(14,15,23,.28), rgba(12,13,21,.72));
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  backdrop-filter: blur(16px) saturate(135%);
  border-top: 1px solid rgba(255,255,255,.13);
  box-shadow: 0 -12px 35px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.055);
}
.collection-tour .tour-slide figcaption h3,
body.light .collection-tour .tour-slide figcaption h3 {
  color:#fff;
  text-shadow:0 1px 5px rgba(0,0,0,.5);
}
.collection-tour .tour-slide figcaption p,
body.light .collection-tour .tour-slide figcaption p {
  color:rgba(255,255,255,.88);
  text-shadow:0 1px 4px rgba(0,0,0,.45);
}
@media(max-width:700px) {
  .collection-tour .tour-slide figcaption { padding:15px 12px 12px; }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .collection-tour .tour-slide figcaption { background:rgba(12,13,21,.88); }
}

/* Projectivy-like shorter desktop image viewport, without changing mobile sizing. */
.collection-tour .tour-slide figcaption,
body.light .collection-tour .tour-slide figcaption {
  border-top: 0;
  box-shadow: 0 -12px 35px rgba(0,0,0,.12);
}
@media (min-width: 1000px) {
  .collection-tour .tour-slide { aspect-ratio: 1.84 / 1; }
  .collection-tour .tour-slide > img { height:100%; object-fit:cover; }
  .collection-tour .tour-arrows { aspect-ratio:1.84 / 1; }
}

/* Cover the baked-in Actors selection ring without changing the original portraits.
   SVG scales and crops with the screenshot on both desktop and mobile. */
.tour-selection-cleanup { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }