/* Workshop Reel. Namespaced under .wr so it cannot touch your theme.
   Colours read from the theme's palette where available, with fallbacks. */
.wr{
  --wr-ink:   var(--wp--preset--color--ink,   #111311);
  --wr-tape:  var(--wp--preset--color--tape,  #A9B1AE);
  --wr-panel: var(--wp--preset--color--panel, #F1F3EF);
  --wr-signal:var(--wp--preset--color--signal,#DAF20B);
  --wr-orange:var(--wp--preset--color--orange,#F25C05);
  --wr-card: clamp(180px, 26vw, 260px);
  position:relative;display:flex;align-items:center;gap:8px;
}
.wr *,.wr *::before,.wr *::after{box-sizing:border-box}

.wr-track{display:flex;gap:14px;overflow-x:auto;flex:1;padding:2px 0 14px;
  scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  scrollbar-width:thin;scrollbar-color:var(--wr-tape) transparent}
.wr-track::-webkit-scrollbar{height:6px}
.wr-track::-webkit-scrollbar-thumb{background:var(--wr-tape)}

.wr-card{position:relative;flex:0 0 auto;width:var(--wr-card);aspect-ratio:9/16;margin:0;
  scroll-snap-align:start;border:2px solid var(--wr-ink);background:var(--wr-tape);overflow:hidden}
.wr-card video{width:100%;height:100%;object-fit:cover;display:block;background:var(--wr-tape)}

.wr-tap{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;
  cursor:pointer;padding:0;margin:0;display:grid;place-items:center}
.wr-tap:focus-visible{outline:3px solid var(--wr-orange);outline-offset:-4px}

/* the play badge itself */
.wr-btn{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:var(--wr-signal);border:3px solid var(--wr-ink);
  box-shadow:0 2px 12px rgba(0,0,0,.35);
  transition:opacity 160ms cubic-bezier(.2,0,0,1),transform 160ms cubic-bezier(.2,0,0,1)}
.wr-btn::before{content:'';width:0;height:0;margin-left:5px;
  border-left:18px solid var(--wr-ink);
  border-top:12px solid transparent;border-bottom:12px solid transparent}
/* pause bars while it is playing */
.wr-card:not(.is-paused) .wr-btn{opacity:0;transform:scale(.85)}
.wr-card:not(.is-paused) .wr-btn::before{border:0;width:16px;height:20px;margin-left:0;
  background:linear-gradient(to right,var(--wr-ink) 0 5px,transparent 5px 11px,var(--wr-ink) 11px 16px)}
.wr-card:hover .wr-btn,.wr-tap:focus-visible .wr-btn{opacity:1;transform:none}
.wr-card.is-paused .wr-btn{opacity:1;transform:none}

/* sound toggle, silent strips only */
.wr-mute{position:absolute;top:8px;right:8px;z-index:2;width:34px;height:34px;cursor:pointer;
  border:2px solid var(--wr-ink);border-radius:2px;background:var(--wr-panel);
  font-size:15px;line-height:1;padding:0;display:grid;place-items:center;opacity:.85}
.wr-mute:hover{opacity:1}
.wr-mute:focus-visible{outline:3px solid var(--wr-orange);outline-offset:2px}
.wr-card.is-loud .wr-mute{background:var(--wr-signal);opacity:1}

.wr-card figcaption{position:absolute;left:0;right:0;bottom:0;pointer-events:none;
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;line-height:1.45;
  letter-spacing:.03em;color:#fff;padding:24px 10px 9px;
  background:linear-gradient(to top,rgba(17,19,17,.88),rgba(17,19,17,0))}

.wr-nav{flex:0 0 auto;width:38px;height:38px;cursor:pointer;padding:0;
  background:var(--wr-panel);color:var(--wr-ink);border:2px solid var(--wr-ink);border-radius:2px;
  font-size:16px;line-height:1;transition:background 120ms cubic-bezier(.2,0,0,1),color 120ms cubic-bezier(.2,0,0,1)}
.wr-nav:hover:not(:disabled){background:var(--wr-ink);color:var(--wr-signal)}
.wr-nav:disabled{opacity:.3;cursor:default}
.wr-nav:focus-visible{outline:3px solid var(--wr-orange);outline-offset:2px}
@media(max-width:700px){.wr-nav{display:none}}

@media(prefers-reduced-motion:reduce){.wr *{transition:none!important;animation:none!important}}