/* The Vimeo slot, on every site that shows a video: the camp homepages, Camp Life and Day,
   the hub, and Windward.

   Its own file because Windward does not load site.css, and the alternative was a second
   wrapper with its own aspect-ratio rule in windward.css. These are the rules that were in
   site.css, moved unchanged except for the fallbacks after each variable: site.css defines
   them, windward.css does not, and a missing variable would take the background and the
   shadow with it.

   The aspect box keeps layout stable before the iframe loads; the iframe carries no width
   or height of its own. */
.videobox{position:relative;aspect-ratio:16/9;max-width:100%;border-radius:20px;overflow:hidden;
  background:var(--sand-2,#EFE5D4);box-shadow:var(--shadow-lg,0 40px 80px -34px rgba(34,48,46,.42))}
.videobox iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:8px;text-align:center;padding:20px;color:var(--ink-2,#586460);
  border:2px dashed var(--line-2,#D6C9B1);border-radius:20px;
  background:repeating-linear-gradient(45deg,var(--sand-2,#EFE5D4) 0 12px,var(--sand,#F5EEE1) 12px 24px)}
.video-placeholder strong{font-family:var(--display,Georgia,serif);font-size:17px;color:var(--ink,#22302E)}
.video-placeholder span{font-size:13px;max-width:34ch}