/* Curious Worlds films on the home page (assets/weekly-films.js): a 16:9 poster in the page language that becomes the
   YouTube player only when played, so the page makes no outside request until then. Quiet-page palette.
   The film runs the full width of the page, edge to edge (owner, 2026-10-20). */
.weekly-films { width: 100%; margin: 34px 0 0; text-align: center; --play: clamp(56px, 5.5vw, 96px); }
.weekly-film { margin: 0; }
.weekly-film[hidden], .weekly-film-poster[hidden] { display: none; }
.weekly-film-poster, .weekly-film-player { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #0a1720; border: 0; }
.weekly-film-player { min-height: 200px; }
.weekly-film-poster img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1); transition: filter .4s ease; }
.weekly-film-poster:hover img, .weekly-film-poster:focus-visible img { filter: grayscale(0); }
/* Center the control consistently across every cover. */
.weekly-film-play { position: absolute; left: 50%; top: 50%; width: var(--play); height: var(--play); border-radius: 50%; background: rgba(255, 253, 248, .94); box-shadow: 0 6px 24px rgba(0, 0, 0, .3); opacity: 0; transform: translate(-50%, -50%); transition: opacity .2s ease; }
.weekly-film-play::after { content: ""; position: absolute; left: calc(var(--play) * .4); top: calc(var(--play) * .31); border-style: solid; border-width: calc(var(--play) * .19) 0 calc(var(--play) * .19) calc(var(--play) * .29); border-color: transparent transparent transparent #1b2136; }
.weekly-film-poster:hover .weekly-film-play, .weekly-film-poster:focus-visible .weekly-film-play { opacity: 1; }
.weekly-films-nav { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 10px; }
.weekly-films-nav[hidden] { display: none; }
.weekly-films-nav button { width: 48px; height: 48px; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); color: var(--ink); font-size: 1.1rem; cursor: pointer; }
.weekly-films-nav button:hover { background: var(--ink); color: var(--paper); }
.weekly-films-nav button:focus-visible, .weekly-film-poster:focus-visible { outline: 3px solid var(--orange); outline-offset: -3px; }
.weekly-films-count { min-width: 3.5em; text-align: center; font-variant-numeric: tabular-nums; color: var(--muted); }
@media (hover: none), (pointer: coarse) { .weekly-film-play { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .weekly-film-poster img, .weekly-film-play { transition: none; } }