/* YO CIAO film in the home "Nature" section (js/promo.js, tools/make_promo_video.py).  The film is shown exactly as shot: no filter, overlay, gradient, opacity or colour change on the video;
   portrait 9:16 frame, never cropped (object-fit: contain inside an exact 9:16 box, so the burned-in subtitles stay visible).  The only thing on top of it is the small sound button / pill. */
.ed-media.film{display:flex;justify-content:center;align-items:center;background:var(--bg);gap:0}
.ed-media figure.film{position:relative;width:100%;aspect-ratio:9/16;background:#d9d4cb;overflow:hidden}
.ed-media figure.film video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;cursor:default}
@media (min-width:761px){
  .ed-media.film{padding:clamp(1.5rem,4vw,3.5rem) 0}
  .ed-media figure.film{width:auto;height:min(86vh,900px)}   /* comfortable height, centred in the media column */
}
.promo-snd{position:absolute;top:12px;right:12px;z-index:2;height:40px;min-width:40px;padding:0 11px;border-radius:20px;border:1px solid rgba(255,255,255,.6);background:rgba(20,18,15,.4);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;cursor:pointer;-webkit-tap-highlight-color:transparent;font:inherit;line-height:1}
.promo-snd svg{display:block;flex:none}
.promo-snd .ic-off{display:none}.promo-snd.is-muted .ic-on{display:none}.promo-snd.is-muted .ic-off{display:block}
.promo-tap{display:none;font-family:var(--geo);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
html:is([lang="zh-CN"],[lang="ja"]) .promo-tap{letter-spacing:.08em;text-transform:none;font-size:.72rem}
.film.needs-tap .promo-tap{display:inline}
.film.needs-tap .promo-snd{animation:promoPill 2.4s ease-in-out infinite}
@keyframes promoPill{0%,100%{background:rgba(20,18,15,.4)}50%{background:rgba(20,18,15,.62)}}
@media (prefers-reduced-motion:reduce){.film.needs-tap .promo-snd{animation:none}}