.film-section { padding: 130px clamp(20px, 5vw, 74px); background: rgb(36, 24, 23); color: rgb(255, 255, 255); }
.film-heading { max-width: 820px; margin: 0px auto 58px; text-align: center; }
.film-heading h2 { font: 400 clamp(44px, 5.4vw, 78px) / 1 Didot, "Bodoni MT", serif; margin: 0px; }
.film-heading > p:last-child { max-width: 640px; margin: 24px auto 0px; color: rgb(205, 187, 182); font-family: Georgia, serif; }
.film-grid { max-width: 1380px; margin: auto; display: grid; grid-template-columns: 1.35fr 1fr; gap: 18px; }
.film-card { position: relative; margin: 0px; min-height: 420px; overflow: hidden; background: rgb(75, 48, 44); }
.film-card:first-child { grid-row: span 2; }
.film-card video { width: 100%; height: 100%; min-height: 420px; object-fit: cover; display: block; }
.film-card:first-child video { min-height: 858px; }
.film-crop video { width: 116%; max-width: none; transform: translateX(-6%); }
.film-card::after { content: ""; position: absolute; inset: 45% 0px 0px; background: linear-gradient(transparent, rgba(25, 14, 13, 0.72)); pointer-events: none; }
.film-card figcaption { position: absolute; z-index: 2; left: 28px; right: 28px; bottom: 25px; display: flex; align-items: flex-end; gap: 16px; }
.film-card figcaption > span { font: italic 25px Georgia, serif; color: rgb(231, 181, 163); }
.film-card figcaption div { display: flex; flex-direction: column; }
.film-card figcaption b { font: 400 28px Didot, "Bodoni MT", serif; }
.film-card figcaption small { font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: rgb(231, 216, 210); }
.film-play { position: absolute; z-index: 4; inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: 70px; height: 70px; border: 1px solid rgba(255, 255, 255, 0.75); border-radius: 50%; background: rgba(37, 23, 22, 0.5); backdrop-filter: blur(8px); color: rgb(255, 255, 255); text-transform: uppercase; letter-spacing: 0.16em; font-size: 9px; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 0.25s; }
.film-card.needs-play .film-play, .film-card.is-paused .film-play { opacity: 1; pointer-events: auto; }
.film-note { max-width: 1380px; margin: 18px auto 0px; color: rgb(169, 147, 141); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; }
@media (max-width: 850px) {
  .film-section { padding: 90px 18px; }
  .film-grid { grid-template-columns: 1fr; }
  .film-card:first-child { grid-row: auto; }
  .film-card, .film-card video, .film-card:first-child video { min-height: 56vw; }
  .film-crop video { width: 112%; transform: translateX(-4%); }
}
@media (max-width: 560px) {
  .film-card, .film-card video, .film-card:first-child video { min-height: 68vw; }
  .film-card figcaption { left: 18px; right: 18px; bottom: 17px; }
  .film-card figcaption b { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  .film-card video { display: none; }
  .film-card { background-position: center center; background-size: cover; }
  .film-card:nth-child(1) { background-image: url("assets/petal-dew-motion-poster.webp"); }
  .film-card:nth-child(2) { background-image: url("assets/petal-silk-motion-poster.webp"); }
  .film-card:nth-child(3) { background-image: url("assets/petal-veil-motion-poster.webp"); }
}