/* ============================================================
   The trailer carousel (STOUR-81, Alex's option A2), drawn by
   /static/stoury-trailers.js into [data-trailers]. Self-contained:
   every rule is under .st-trailers (and the one line that retires
   the page's slideshow once the carousel is up), on the page's own
   tokens (--coral, --ink, --text, --board, --flap, --display,
   --serif, --r-md) with fallbacks. Alex's look: 12px corners, a
   coral primary, Stoury Display (SP Blunt) labels.
   ============================================================ */

.st-trailers[hidden]{display:none;}
.booking .slides[data-trailers-replaced]{display:none;}

.st-trailers{
  --st-tr-frame:var(--board,#2e2b22);
  --st-tr-on:var(--flap,#f3ead2);
  --st-tr-coral:var(--coral,#f79e78);
  --st-tr-r:var(--r-md,12px);
  display:flex;flex-direction:column;gap:14px;
  width:clamp(320px,42vw,620px);
  color:var(--text,var(--ink,#1c1a13));
}

/* The frame: the player over the key art, the copy over a scrim. */
.st-trailers .st-tr-frame{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  border-radius:var(--st-tr-r);background:var(--st-tr-frame);color:var(--st-tr-on);
  isolation:isolate;
}
.st-trailers .st-tr-art,.st-trailers .st-tr-player,.st-trailers .st-tr-scrim{position:absolute;inset:0;}
.st-trailers .st-tr-blur{
  position:absolute;inset:-24px;background:center/cover no-repeat;
  filter:blur(22px) brightness(.55) saturate(1.1);transform:scale(1.08);
}
.st-trailers .st-tr-poster{
  position:absolute;top:16%;right:6%;height:62%;width:auto;aspect-ratio:2/3;object-fit:cover;
  border-radius:8px;box-shadow:0 12px 30px rgba(0,0,0,.45);
}
/* The player stays under the key art until the trailer's own time is moving (an ad never shows). */
.st-trailers .st-tr-player{opacity:0;transition:opacity .35s ease;pointer-events:none;}
.st-trailers .st-tr-player iframe{width:100%;height:100%;border:0;display:block;}
.st-trailers.st-tr-video .st-tr-player{opacity:1;}
.st-trailers.st-tr-video .st-tr-poster{opacity:0;transition:opacity .35s ease;}
.st-trailers .st-tr-scrim{
  z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(22,19,12,.88) 0%,rgba(22,19,12,.55) 34%,rgba(22,19,12,0) 62%);
}

.st-trailers .st-tr-copy{
  position:absolute;left:clamp(16px,2.6vw,28px);right:clamp(150px,22vw,220px);bottom:clamp(14px,2.2vw,24px);
  z-index:2;display:flex;flex-direction:column;gap:4px;
}
.st-trailers .st-tr-kicker{
  margin:0 0 6px;font-family:var(--display,'Stoury Display',system-ui,sans-serif);font-weight:500;
  font-size:13px;line-height:1.2;letter-spacing:.04em;color:var(--butter,#f7d18a);
}
.st-trailers .st-tr-title{
  font-family:var(--display,'Stoury Display',system-ui,sans-serif);font-weight:600;
  font-size:clamp(28px,3.4vw,46px);line-height:1;letter-spacing:.01em;text-transform:uppercase;
  color:var(--st-tr-on);margin:0;
}
.st-trailers .st-tr-meta{margin:6px 0 0;font-family:var(--serif,'Stoury Serif',Georgia,serif);font-size:clamp(15px,1.25vw,18px);line-height:1.3;color:rgba(243,234,210,.82);}
/* STOUR-204: a credit line is IBM Plex Mono at 11px. */
.st-trailers .st-tr-credit{margin:0;font-family:var(--mono,'ibm-plex-mono',ui-monospace,Menlo,monospace);font-size:11px;line-height:1.3;color:rgba(243,234,210,.66);}
.st-trailers .st-tr-credit:empty{display:none;}
.st-trailers .st-tr-credit a{color:inherit;text-decoration:underline;text-underline-offset:2px;}

/* Buttons: Alex's primary (coral, ink label, Stoury Display) and the round outline. */
.st-trailers button{font:inherit;cursor:pointer;}
/* STOUR-202 (CJ, 23 Oct): the frame's two small outlined secondary buttons, Trailer and Watch, side by side
   where the old coral button sat (12px corners, the label size, the play triangle before each label). */
.st-trailers .st-tr-acts{position:absolute;right:clamp(14px,2.2vw,24px);bottom:clamp(14px,2.2vw,24px);z-index:3;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;}
.st-trailers .st-tr-watch,.st-trailers .st-tr-watchnow .sw-act{
  display:inline-flex;align-items:center;gap:5px;min-height:28px;
  border:1.5px solid var(--st-tr-on);border-radius:12px;padding:3px 10px;
  background:rgba(28,26,19,.45);color:var(--st-tr-on);
  font:400 13px/1.2 var(--display,'Stoury Display',system-ui,sans-serif);letter-spacing:.04em;text-transform:none;
  box-shadow:none;white-space:nowrap;
}
.st-trailers .st-tr-watch svg,.st-trailers .st-tr-watchnow .sw-act svg{width:12px;height:12px;fill:currentColor;}
.st-trailers .st-tr-watch:hover,.st-trailers .st-tr-watchnow .sw-act:hover{background:var(--st-tr-on);color:#1c1a13;}
.st-trailers .st-tr-watch:focus-visible,.st-trailers .st-tr-watchnow .sw-act:focus-visible{outline:2.5px solid var(--st-tr-on);outline-offset:2px;}
.st-trailers .st-tr-watch[hidden]{display:none;}
.st-trailers .st-tr-sound{
  position:absolute;top:12px;right:12px;z-index:3;
  width:38px;height:38px;display:grid;place-items:center;padding:0;
  border:0;border-radius:50%;background:rgba(22,19,12,.55);color:var(--st-tr-on);
}
.st-trailers .st-tr-sound:hover{background:rgba(22,19,12,.8);}
.st-trailers .st-tr-sound[hidden]{display:none;}
.st-trailers svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;}

/* STOUR-246 (CJ, 27 Oct, round 2): the film's places are the screen's one coral primary, the full width of the card
   right under the video at every width, never over the player (YouTube's own title line stays clear), so it is in
   view while the trailer plays: Alex's primary (coral fill, dark brown label, Stoury Display at the label size, 12px
   corners), the pin before the words, one line (stoury-trailers.js says "See on map" when the title does not fit).
   Its row is kept when a title has no places, so the card's height never depends on the title. */
.st-trailers .st-tr-see{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;min-width:0;min-height:44px;padding:8px 18px;
  border:1.5px solid var(--st-tr-coral);border-radius:var(--st-tr-r);background:var(--st-tr-coral);color:#1c1a13;text-align:left;
  font:400 var(--st-fs-label,14px)/1.2 var(--display,'Stoury Display',system-ui,sans-serif);letter-spacing:.04em;text-transform:none;
}
.st-trailers .st-tr-see span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.st-trailers .st-tr-see svg{width:18px;height:18px;flex:none;color:#1c1a13;}
.st-trailers .st-tr-see:hover{filter:brightness(1.05);}
.st-trailers .st-tr-see:focus-visible{outline:2.5px solid var(--st-tr-on);outline-offset:2px;}
.st-trailers .st-tr-see[hidden]{display:inline-flex;visibility:hidden;}
/* Under the frame: pause, previous, the dots and next. */
.st-trailers .st-tr-bar{display:flex;flex-direction:column;align-items:stretch;gap:6px;}
.st-trailers .st-tr-nav{display:flex;align-items:center;gap:10px;margin-left:auto;min-width:0;max-width:100%;}
.st-trailers .st-tr-btn{
  width:38px;height:38px;display:grid;place-items:center;padding:0;flex:none;
  border:1.5px solid currentColor;border-radius:50%;background:none;color:inherit;
}
.st-trailers .st-tr-btn:hover{background:var(--st-tr-coral);border-color:var(--st-tr-coral);color:#1c1a13;}
.st-trailers .st-tr-btn[hidden]{display:none;}
.st-trailers .st-tr-btn svg{width:18px;height:18px;}
/* STOUR-254: the row of dots shrinks to the space left and scrolls inside it (no bar, the current dot kept centred
   by the script), so Next stays on screen however many trailers there are. */
.st-trailers .st-tr-dots{display:flex;align-items:center;gap:6px;position:relative;flex:0 1 auto;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;}
.st-trailers .st-tr-dots::-webkit-scrollbar{display:none;}
.st-trailers .st-tr-dot{flex:none;}
.st-trailers .st-tr-dot{width:8px;height:8px;padding:0;border:0;border-radius:999px;background:currentColor;opacity:.35;transition:width .2s ease,opacity .2s ease;}
.st-trailers .st-tr-dot[aria-current="true"]{width:24px;opacity:1;background:var(--st-tr-coral);}

/* The strip (STOUR-205 §4, after STOUR-193 round 2 and STOUR-202): every trailer's YouTube thumbnail in one
   row of fixed-width tiles that scrolls sideways at every width (wheel, drag, swipe, the two round arrow
   buttons, the keyboard; stoury-trailers.js's Shelf keeps the playing tile centred). The one now showing is
   at full strength with a coral ring, the rest dimmed; a tile with no art shows its title card. The
   scrollbar is hidden; the arrows and the end fades say there is more. Tile widths: 200px over 1023px,
   180px to 1023px, 160px to 640px (--st-tr-tile). */
.st-trailers .st-tr-strip{--st-tr-tile:200px;--st-tr-gap:12px;position:relative;display:flex;align-items:center;gap:6px;min-width:0;border-radius:var(--st-tr-r);}
.st-trailers .st-tr-strip:focus-visible{outline:2px solid var(--st-tr-coral);outline-offset:3px;}
.st-trailers .st-tr-next-up{
  list-style:none;margin:0;padding:4px 24px;flex:1 1 auto;min-width:0;
  display:flex;gap:var(--st-tr-gap);overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x proximity;scroll-padding:0 24px;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  scrollbar-width:none;
  /* Soft fades at both ends, from the band behind the strip (the page can set --st-tr-fade). */
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%);
}
.st-trailers .st-tr-next-up::-webkit-scrollbar{display:none;}
.st-trailers .st-tr-next-up:empty{display:none;}
.st-trailers .st-tr-next-up li{flex:0 0 var(--st-tr-tile);display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;scroll-snap-align:center;}
.st-trailers .st-tr-next-up button[data-i]{
  position:relative;display:flex;align-items:flex-end;width:100%;aspect-ratio:16/9;padding:6px;
  border:0;border-radius:8px;overflow:hidden;text-align:left;opacity:.6;transition:opacity .2s ease;
  background:var(--st-tr-frame);color:var(--st-tr-on);
}
/* The strip's own arrows: the same round outline as Previous and Next; hidden where touch swipes. */
.st-trailers .st-tr-shbtn{flex:none;}
@media (hover:none) and (pointer:coarse){.st-trailers .st-tr-shbtn{display:none;}}
.st-trailers .st-tr-next-up button[data-i] img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.st-trailers .st-tr-next-up button[data-i] .sw-card{position:absolute;inset:0;}
.st-trailers .st-tr-tile-t{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;font:400 14px/1.2 var(--display,'Stoury Display',system-ui,sans-serif);letter-spacing:.03em;color:var(--st-tr-ink,inherit);}
.st-trailers .st-tr-tile-t small{font:400 12px/1 var(--mono,'ibm-plex-mono',ui-monospace,monospace);opacity:.75;margin-left:4px;}
.st-trailers .st-tr-next-up button[data-i]:hover,.st-trailers .st-tr-next-up button[aria-current="true"]{opacity:1;}
/* Playing = the coral ring; focus = an ink outline with an offset, so the two read differently. */
.st-trailers .st-tr-next-up button[aria-current="true"]{outline:2.5px solid var(--st-tr-coral);outline-offset:1px;}
.st-trailers .st-tr-next-up button[data-i]:focus-visible{outline:2px solid var(--st-tr-on);outline-offset:4px;}
.st-trailers .st-tr-next-up button[data-i]::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(22,19,12,.85),rgba(22,19,12,.15));}
.st-trailers .st-tr-next-up button.has-art::before{display:none;}
.st-trailers .st-tr-next-up button[data-i] span{
  position:relative;font-family:var(--display,'Stoury Display',system-ui,sans-serif);font-weight:600;
  font-size:12px;line-height:1.15;letter-spacing:.04em;text-transform:uppercase;overflow-wrap:anywhere;
}
.st-trailers .st-tr-next-up button.has-art span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:-1px;}
.st-trailers .st-tr-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:-1px;}

@media (max-width:860px){
  .st-trailers{width:100%;}
}
/* The shelf (STOUR-193 round 4, /home): the strip as a row of its own across the whole content column, under
   both halves of the band. The frame's bar then holds only pause, the arrows and the dots (STOUR-246 moved the
   places line up under the frame as its coral button). */
.st-trailers.st-tr-shelf{width:100%;gap:8px;}
.st-trailers.st-tr-shelf .st-tr-next-up button[data-i] span{font-size:13px;}
.st-trailers .st-tr-bar-nav{min-height:0;}
.st-trailers .st-tr-bar-nav .st-tr-nav{margin-left:auto;}
@media (max-width:640px){
  .st-trailers:not(.st-tr-shelf) .st-tr-strip{display:none;}
  /* A phone holds about two tiles with the third peeking: the cue that the strip swipes; no arrows. */
  .st-trailers .st-tr-strip{--st-tr-tile:160px;gap:0;}
  .st-trailers .st-tr-shbtn{display:none;}
  .st-trailers .st-tr-next-up{padding:4px 16px;scroll-padding:0 16px;}
  .st-trailers .st-tr-copy{right:16px;bottom:62px;}
  .st-trailers .st-tr-poster{height:48%;top:18%;}
  .st-trailers .st-tr-acts{right:12px;bottom:12px;}
  .st-trailers .st-tr-credit{display:none;}
  .st-trailers .st-tr-bar{gap:10px;}
  .st-trailers .st-tr-dots{gap:5px;}
}
/* STOUR-52: 44px taps at every touch width. The dots keep their width (Previous and Next do the same job at
   44px) and take a 44px-tall hit area. */
@media (max-width:1023px){
  .st-trailers .st-tr-btn,.st-trailers .st-tr-sound{width:44px;height:44px;}
  .st-trailers .st-tr-strip{--st-tr-tile:180px;}  /* STOUR-205: tablet tiles */
  .st-trailers .st-tr-watch,.st-trailers .st-tr-see{min-height:44px;}
  .st-trailers .st-tr-watchnow .sw-act{min-height:44px;}
  .st-trailers .st-tr-dot{position:relative;}
  .st-trailers .st-tr-dots{height:44px;}  /* STOUR-254: room for the dots' 44px hit area inside the scrolling row */
  .st-trailers .st-tr-dot::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%);}
  .st-trailers .st-tr-credit a{display:inline-block;padding:14px 0;}
}
@media (prefers-reduced-motion:reduce){
  .st-trailers .st-tr-player,.st-trailers .st-tr-poster,.st-trailers .st-tr-dot{transition:none;}
  /* Nothing moves by itself: the strip does not follow the carousel (Shelf.reduced) and scrolls without easing. */
  .st-trailers .st-tr-next-up{scroll-behavior:auto;}
}