/* The Spire - embed shell. Deliberately scoped so no theme rule leaks in or out. */
.spire-embed{
  position:relative;
  width:100%;
  height:var(--spire-h,720px);
  margin:1.5rem auto;
  background:#07050A;
  border-radius:6px;
  overflow:hidden;
  box-shadow:0 18px 50px -22px rgba(0,0,0,.9);
  line-height:0;
}
/* on a phone the fixed pixel height is wrong, so fall back to the aspect ratio */
@media (max-width:782px){
  .spire-embed{ height:auto; aspect-ratio:var(--spire-ratio,16/9); min-height:420px; }
}
.spire-embed .spire-frame{
  display:block;
  width:100%;
  height:100%;
  border:0;
}
/* poster shown until the visitor asks for 10 MB */
.spire-embed .spire-poster{
  all:unset;
  display:block;
  position:absolute;
  inset:0;
  cursor:pointer;
  background:#07050A;
}
.spire-embed .spire-poster img{
  width:100%;
  height:100%;
  object-fit:contain;
  opacity:.72;
  transition:opacity .25s, transform .4s;
}
.spire-embed .spire-poster:hover img{ opacity:.92; transform:scale(1.012); }
.spire-embed .spire-poster-cta,
.spire-embed .spire-poster-note{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  font-family:Georgia,"Times New Roman",serif;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#FFC24B;
  text-shadow:0 2px 18px #000,0 0 40px #000;
  line-height:1.4;
  pointer-events:none;
}
.spire-embed .spire-poster-cta{
  bottom:16%;
  font-size:clamp(14px,2.2vw,20px);
  padding:.7em 1.6em;
  border:1px solid rgba(255,194,75,.55);
  border-radius:99px;
  background:rgba(20,12,6,.55);
}
.spire-embed .spire-poster-note{
  bottom:10%;
  font-size:clamp(9px,1.2vw,11px);
  color:rgba(234,220,200,.55);
  letter-spacing:.2em;
}
.spire-embed .spire-poster.is-loading .spire-poster-cta{ opacity:.5; }
/* fullscreen toggle */
.spire-embed .spire-fs{
  all:unset;
  position:absolute;
  top:10px;
  right:10px;
  z-index:5;
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:8px;
  cursor:pointer;
  color:#EADCC8;
  background:rgba(12,8,16,.55);
  border:1px solid rgba(234,220,200,.18);
  opacity:0;
  transition:opacity .2s,background .2s;
}
.spire-embed:hover .spire-fs,
.spire-embed .spire-fs:focus-visible{ opacity:1; }
/* touch screens never fire :hover, so the button was there but invisible on iPad */
@media (hover:none){ .spire-embed .spire-fs{ opacity:.85; } }
.spire-embed .spire-fs:hover{ background:rgba(40,26,50,.8); }
.spire-embed:fullscreen{ height:100%; margin:0; border-radius:0; aspect-ratio:auto; }
.spire-embed:fullscreen .spire-frame{ height:100%; }
.spire-embed:-webkit-full-screen{ width:100%; height:100%; margin:0; border-radius:0; aspect-ratio:auto; }
.spire-embed:-webkit-full-screen .spire-frame{ height:100%; }
/* iPhone: a fixed overlay stands in for fullscreen */
.spire-embed.is-expanded{
  position:fixed; inset:0; z-index:2147483000;
  width:100vw; height:100vh; height:100dvh;
  max-width:none !important; margin:0; border-radius:0; aspect-ratio:auto;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  box-sizing:border-box;
}
.spire-embed.is-expanded .spire-frame{ height:100%; }
.spire-embed.is-expanded .spire-fs{
  opacity:1;
  top:calc(10px + env(safe-area-inset-top));
  right:calc(10px + env(safe-area-inset-right));
}
html.spire-lock, html.spire-lock body{ overflow:hidden; overscroll-behavior:none; }