/* "One night, one life" film: night band under the home hero, and an inline variant inside articles.
   Playback is driven by js/film.js (muted autoplay in view, sound on demand). */
.film-band { position: relative; padding-block: clamp(4rem, 3rem + 5vw, 8rem); background: radial-gradient(70% 60% at 50% 45%, #3A1C0E 0%, #1A0F0A 72%); color: #FFF3C9; overflow: hidden; }
.film-band__inner { display: grid; gap: clamp(1.75rem, 1rem + 2vw, 3rem); }
.film-band__head { display: grid; gap: .9rem; max-width: 46rem; }
.film-band__eyebrow { color: #FF6A1F; }
.film-band__title { color: #FFF3C9; margin: 0; }
.film-band__lead { color: rgba(255, 243, 201, .78); font-size: var(--text-body); line-height: 1.6; max-width: 38rem; margin: 0; }

.film { position: relative; margin: 0; }
.film__video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: clamp(14px, 1.4vw, 24px); background: #1A0F0A; box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 243, 201, .08); object-fit: cover; }
.film__sound { position: absolute; top: clamp(.75rem, 1.4vw, 1.25rem); right: clamp(.75rem, 1.4vw, 1.25rem); display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1rem .6rem .85rem; border: 1px solid rgba(255, 243, 201, .35); border-radius: 999px; background: rgba(26, 15, 10, .55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #FFF3C9; font: 600 .8125rem/1 var(--font-sans); letter-spacing: .02em; cursor: pointer; transition: background var(--duration-fast), border-color var(--duration-fast), transform var(--duration-fast); }
.film__sound::before { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9h4l5-4v14l-5-4H4z M16 8.5a5 5 0 0 1 0 7 M18.5 6a8.5 8.5 0 0 1 0 12' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9h4l5-4v14l-5-4H4z M16 8.5a5 5 0 0 1 0 7 M18.5 6a8.5 8.5 0 0 1 0 12' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.film__sound:hover { background: rgba(255, 106, 31, .85); border-color: #FF6A1F; }
.film__sound:active { transform: scale(.97); }
.film__sound:focus-visible { outline: 2px solid #FFB020; outline-offset: 3px; }
.film__caption { margin-top: .9rem; font-size: var(--text-small); line-height: 1.5; color: rgba(255, 243, 201, .6); }

/* Inline variant inside an article (light page) */
.article__body .film--inline { margin: 2rem 0; }
.film--inline .film__caption { color: var(--color-text-2); }

/* Hero play link */
.hero__film { display: inline-flex; align-items: center; gap: .55rem; }
.hero__film-icon { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: rgba(255, 255, 255, .22); transition: transform var(--duration-fast) var(--ease-out-expo, ease); }
.hero__film:hover .hero__film-icon { transform: scale(1.12); }
.hero__film-icon svg { width: .7rem; height: .7rem; margin-left: 2px; }

@media (prefers-reduced-motion: reduce) { .film__sound, .hero__film-icon { transition: none; } }