/* Short films: 中文 / English tabs over one 16:9 player (YouTube loads only on play — assets/film.js).
   Used by the About page and the whole-person essay. */
.wp-film { margin-top: 1.3rem; }
.wp-film-tabs { display: flex; gap: .45rem; margin-bottom: .9rem; }
.wp-film-tabs [role="tab"] { font: inherit; font-size: .92rem; font-weight: 800; color: var(--ink-soft); background: var(--surface);
  border: 1px solid var(--line); border-radius: 999px; padding: .42rem 1.1rem; box-shadow: var(--shadow-sm); cursor: pointer; }
.wp-film-tabs [role="tab"]:hover { color: var(--gold-ink); border-color: var(--gold); }
.wp-film-tabs [role="tab"][aria-selected="true"] { background: var(--gold); border-color: var(--gold); color: #3a2400; }
.wp-film-tabs [role="tab"]:focus-visible { outline: 3px solid var(--gold-ink); outline-offset: 2px; }
.wp-film-player { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius);
  overflow: hidden; background: #0b1020; box-shadow: var(--shadow); }
.wp-film-player:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.wp-film-player > img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.wp-film-player:hover > img { transform: scale(1.02); }
/* below the title, which fills the middle of the poster */
.wp-film-play { position: absolute; left: 50%; top: 82%; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(255, 253, 248, .94); box-shadow: 0 12px 34px rgba(0, 0, 0, .4); transition: transform .3s; }
.wp-film-play svg { width: 30px; height: 30px; margin-left: 4px; fill: var(--ink); }
.wp-film-player:hover .wp-film-play, .wp-film-player:focus-visible .wp-film-play { transform: scale(1.08); }
.wp-film-label { margin: 0 0 .7rem; font-size: 1rem; font-weight: 800; color: var(--ink); }
.wp-film-note { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1rem; margin: 0; padding-top: .65rem;
  color: var(--muted); font-size: .92rem; }
@media (max-width: 600px) {
  /* a touch lower and smaller, so it clears a two-line title on a phone-sized poster */
  .wp-film-play { top: 84%; width: 46px; height: 46px; margin: -23px 0 0 -23px; }
  .wp-film-play svg { width: 22px; height: 22px; margin-left: 3px; }
}