/* Inline playback — Culture feed cards.
   Tap a video card's artwork and it plays in place via youtube-nocookie,
   instead of shipping the visitor out to YouTube. Rewind brand only:
   graphite / bone / charcoal. No green anywhere. Buttons are never red. */

/* Tappable video art */
.card-art[data-vid]{cursor:pointer}

/* Centered play button — graphite disc, bone glyph */
.ip-play{
  position:absolute;z-index:4;left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:64px;height:64px;border-radius:50%;border:0;
  background:rgba(43,43,48,.94);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;box-shadow:0 4px 18px rgba(0,0,0,.55);
  transition:transform .15s ease;
}
.ip-play svg{width:26px;height:26px;fill:#EDE6D6;margin-left:3px}
.ip-play:hover{transform:translate(-50%,-50%) scale(1.07)}
.ip-play:focus-visible{outline:2px solid #EDE6D6;outline-offset:3px}

/* Playing state: the art well becomes a true 16:9 stage */
.card-art.ip-playing{
  height:auto;aspect-ratio:16/9;display:block;cursor:default;
}
.ip-frame{position:absolute;inset:0}
.ip-frame iframe{width:100%;height:100%;border:0;display:block;background:#000}

/* Close returns the card to its thumbnail */
.ip-close{
  position:absolute;z-index:5;top:8px;right:8px;
  width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(237,230,214,.28);
  background:rgba(16,17,20,.88);color:#EDE6D6;
  font-size:20px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.ip-close:hover{background:rgba(43,43,48,.95)}

@media (prefers-reduced-motion:reduce){
  .ip-play{transition:none}
  .ip-play:hover{transform:translate(-50%,-50%)}
}