.film-page { background: #f5f5f5; letter-spacing: 0; }
.film-heading, .film-story, .film-player figcaption { max-width: 1200px; margin: 0 auto; padding-inline: 24px; }
.film-heading { padding-top: 116px; padding-bottom: 22px; }
.film-heading nav { margin-bottom: 16px; font-size: 13px; color: #555; }
.film-heading nav a, .film-links a { text-decoration: underline; text-underline-offset: 4px; }
.film-heading h1 { font-size: 32px; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.film-heading p { margin-top: 8px; color: #555; }
.film-player { margin: 0; }
.film-player video { display: block; width: 100%; height: auto; max-height: 62vh; aspect-ratio: 32 / 15; object-fit: contain; background: #e6e6e6; }
.film-player figcaption { padding-block: 14px; font-size: 13px; color: #555; }
.film-player figcaption span { padding-inline: 8px; }
.film-story { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 48px; padding-top: 28px; padding-bottom: 64px; }
.film-story h2 { font-size: 21px; line-height: 1.3; font-weight: 600; margin-bottom: 14px; }
.film-story p + p { margin-top: 14px; color: #555; }
.film-links { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.film-links a { display: flex; align-items: center; min-height: 44px; line-height: 1.5; overflow-wrap: anywhere; }
.film-page a:focus-visible, .film-player video:focus-visible { outline: 2px solid #067a6b; outline-offset: 4px; }
.film-skip { position: fixed; top: 8px; left: 12px; z-index: 1300; padding: 12px 16px; background: #fff; transform: translateY(-200%); }
.film-skip:focus { transform: none; }
@media (max-width: 640px) {
  .film-heading { padding-top: 104px; }
  .film-heading h1 { font-size: 27px; }
  .film-story { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 18px; padding-bottom: 40px; }
  .film-heading, .film-story, .film-player figcaption { padding-inline: 20px; }
}