/* ff-player: friendlyfire.art's controls on Vimeo (ff-player.js). The style arrives as custom properties
   (--acc, --ink, --rad, --dim, --trk) and data attributes on .ffp. Port of the round 3 mockup's player. */
.ffp-host{position:relative}
.ffp{--acc:#FFD635;--ink:#00109E;--rad:0px;--dim:0;--trk:4px;position:absolute;inset:0;display:block;background:#000;overflow:hidden;border-radius:var(--rad);color:#fff;font-family:"Montserrat",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;line-height:1;outline:none;isolation:isolate;container-type:inline-size;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;text-align:left}
.ffp *,.ffp *::before,.ffp *::after{box-sizing:border-box}
.ffp [hidden]{display:none!important}
.ffp[data-font="system"]{font-family:system-ui,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif}
.ffp:focus-visible{box-shadow:inset 0 0 0 3px var(--acc)}
.ffp button{font:inherit;margin:0;-webkit-appearance:none;appearance:none}
.ffp button:focus-visible,.ffp-track:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
/* At fractional sizes Vimeo's video can fall a pixel short of its iframe, leaving a light or dark hairline at one
   edge. The frame bleeds 1px on every side and .ffp clips it. */
.ffp-frame{position:absolute;left:-1px;top:-1px;width:calc(100% + 2px);height:calc(100% + 2px);border:0;display:block}
.ffp-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;pointer-events:none;transition:opacity .25s}
.ffp-poster:not([src]){display:none}
.ffp[data-state="idle"] .ffp-poster,.ffp[data-state="ended"][data-end="poster"] .ffp-poster{opacity:1}
.ffp-shade{position:absolute;inset:0;background:#000;opacity:var(--dim);pointer-events:none;transition:opacity .3s}
.ffp[data-state="playing"] .ffp-shade,.ffp[data-state="paused"] .ffp-shade{opacity:0}
.ffp-hit{position:absolute;inset:0;cursor:pointer}
.ffp[data-state="playing"][data-active="0"] .ffp-hit{cursor:none}

/* the big play button */
.ffp-big{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;justify-content:center;gap:.5em;border:0;cursor:pointer;background:var(--acc);color:var(--ink);width:clamp(52px,9cqw,92px);aspect-ratio:65/40;border-radius:max(var(--rad),6px);box-shadow:0 4px 18px rgba(0,0,0,.35);font-weight:700;font-size:clamp(12px,1.5cqw,16px);font-variant-numeric:tabular-nums;transition:transform .15s ease;padding:0}
.ffp-big svg{width:38%;height:auto;fill:currentColor}
.ffp-big:hover{transform:translate(-50%,-50%) scale(1.06)}
.ffp[data-shape="circle"] .ffp-big{aspect-ratio:1;border-radius:50%;width:clamp(54px,8cqw,96px)}
.ffp[data-shape="circle"] .ffp-big svg{margin-left:9%}
.ffp[data-shape="pill"] .ffp-big{aspect-ratio:auto;width:auto;border-radius:999px;padding:.8em 1.3em .8em 1.1em}
.ffp[data-shape="pill"] .ffp-big svg{width:1.05em}
.ffp-len{display:none}
.ffp[data-shape="pill"] .ffp-len:not(:empty){display:inline}
.ffp[data-pos="corner"] .ffp-big{left:4%;top:auto;bottom:7%;transform:none}
.ffp[data-pos="corner"] .ffp-big:hover{transform:scale(1.06)}
.ffp:not([data-state="idle"]) .ffp-big{display:none}
.ffp[data-wait="1"] .ffp-big svg{opacity:0}
.ffp[data-wait="1"] .ffp-big::after{content:"";position:absolute;left:50%;top:50%;width:1.3em;height:1.3em;margin:-.65em 0 0 -.65em;border:2.5px solid currentColor;border-right-color:transparent;border-radius:50%;animation:ffp-spin .8s linear infinite}

/* end, sound, buffering */
.ffp-end{position:absolute;inset:0;display:none;place-items:center;background:rgba(0,0,0,.4)}
.ffp[data-state="ended"][data-end="poster"] .ffp-end{display:grid}
.ffp-end button{display:inline-flex;align-items:center;gap:.5em;background:var(--acc);color:var(--ink);border:0;border-radius:999px;padding:.65em 1.2em;font-weight:700;font-size:clamp(12px,1.5cqw,16px);cursor:pointer}
.ffp-end svg{width:1.1em;height:1.1em;fill:currentColor}
.ffp-chip{position:absolute;left:3%;top:5%;display:none;align-items:center;gap:.4em;background:rgba(0,0,0,.66);color:#fff;border:0;border-radius:999px;padding:.45em .85em;font-weight:600;font-size:clamp(11px,1.3cqw,14px);cursor:pointer}
.ffp-chip svg{width:1.1em;height:1.1em;fill:currentColor}
.ffp[data-muted="1"][data-state="playing"] .ffp-chip{display:inline-flex}
.ffp-spin{display:none;position:absolute;left:50%;top:50%;width:clamp(28px,5cqw,44px);aspect-ratio:1;margin:0;transform:translate(-50%,-50%);border:3px solid var(--acc);border-right-color:transparent;border-radius:50%;animation:ffp-spin .8s linear infinite;pointer-events:none}
.ffp[data-state="playing"][data-buffering="1"] .ffp-spin{display:block}
@keyframes ffp-spin{to{rotate:360deg}}

/* the control bar */
.ffp-ctl{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:.6em;padding:.8em 1em;font-size:clamp(11px,1.25cqw,14px);opacity:0;pointer-events:none;transition:opacity .25s}
.ffp[data-barbg="fade"] .ffp-ctl{background:linear-gradient(transparent,rgba(0,0,0,.72))}
.ffp[data-barbg="solid"] .ffp-ctl{background:rgba(0,0,0,.8)}
.ffp[data-barbg="none"] .ffp-ctl{text-shadow:0 1px 3px rgba(0,0,0,.7)}
.ffp[data-state="paused"] .ffp-ctl,
.ffp[data-state="ended"][data-end="last"] .ffp-ctl,
.ffp[data-state="playing"][data-bar="always"] .ffp-ctl,
.ffp[data-state="playing"][data-bar="auto"][data-active="1"] .ffp-ctl,
.ffp[data-state="playing"][data-bar="hover"]:hover .ffp-ctl{opacity:1;pointer-events:auto}
.ffp[data-mode="loading"] .ffp-ctl{opacity:0;pointer-events:none}
.ffp-b{background:none;border:0;color:#fff;min-width:2em;height:2em;display:grid;place-items:center;cursor:pointer;border-radius:4px;flex:none;padding:0}
.ffp-b svg{width:1.25em;height:1.25em;fill:currentColor}
.ffp-b:hover,.ffp-b[aria-pressed="true"]{color:var(--acc)}
.ffp-pp{background:var(--acc);color:var(--ink);width:2.7em}
.ffp-pp:hover{color:var(--ink);opacity:.9}
.ffp-txt{padding:0 .45em;font-weight:700;font-size:.86em}
.ffp-track{flex:1;position:relative;height:var(--trk);background:rgba(255,255,255,.3);border-radius:999px;cursor:pointer;min-width:30px;touch-action:none}
.ffp-track::before{content:"";position:absolute;left:0;right:0;top:-10px;bottom:-10px}
.ffp-buf,.ffp-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:inherit;pointer-events:none}
.ffp-buf{background:rgba(255,255,255,.28)}
.ffp-fill{background:var(--acc)}
.ffp-time{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}
.ffp[data-time="off"] .ffp-time{display:none}
.ffp .i-pause,.ffp .i-muted{display:none}
.ffp[data-state="playing"] .ffp-pp .i-play{display:none}
.ffp[data-state="playing"] .ffp-pp .i-pause{display:block}
.ffp[data-muted="1"] .i-vol{display:none}
.ffp[data-muted="1"] .i-muted{display:block}
@container (max-width:520px){.ffp-txt,.ffp [data-c="pip"]{display:none}}

/* Vimeo's own player took over (sound refused, or the SDK failed): only its frame stays */
.ffp[data-mode="native"]>:not(.ffp-frame){display:none!important}

/* fullscreen: the browser's, or filling the window where elements can't go fullscreen (iPhone) */
.ffp[data-fs="1"]{border-radius:0}
.ffp.ffp-pseudo{position:fixed;inset:0;z-index:2147483000;width:auto;height:auto}
html.ffp-lock,html.ffp-lock body{overflow:hidden}

@media (prefers-reduced-motion:reduce){.ffp *{transition-duration:.001ms!important}.ffp-spin,.ffp[data-wait="1"] .ffp-big::after{animation-duration:2.4s}}