/* User-supplied clips: keep the gallery calm until a visitor presses play. */
.films {padding:24px max(38px,calc((100vw - 1360px)/2)) 0;background:#fff;color:var(--ink)}
.films__head {padding-top:32px;border-top:1px solid #e5d8d5;margin-bottom:26px}
.films__eyebrow {margin:0 0 10px;color:var(--red-hot);font-size:10px;font-weight:800;letter-spacing:.18em;line-height:1.5}
.films h2 {margin:0;font-size:clamp(27px,3vw,42px);font-weight:800;line-height:1.12;letter-spacing:-.05em}
.films__grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.film {min-width:0;margin:0}
.film__screen {position:relative;overflow:hidden;aspect-ratio:9/16;background:#171310;border-radius:4px}
.film video {display:block;width:100%;height:100%;object-fit:contain}
.film video:focus-visible {outline:3px solid #fff;outline-offset:-5px}
.film__duration {position:absolute;right:10px;top:10px;padding:4px 7px;border-radius:3px;background:rgba(255,255,255,.9);color:#241918;font-size:11px;line-height:1.2;pointer-events:none}
.film figcaption {display:flex;align-items:baseline;gap:9px;padding-top:13px}
.film__number {color:var(--red-hot);font-size:10px;font-weight:800;letter-spacing:.1em}
.film h3 {margin:0;font-size:15px;line-height:1.4;letter-spacing:-.025em;font-weight:700}
.films__more {margin-top:28px}
.films__more > summary {display:flex;align-items:center;justify-content:center;gap:14px;min-height:48px;width:fit-content;max-width:100%;margin:0 auto;padding:10px 24px;border:1px solid var(--red-hot);border-radius:30px;list-style:none;color:var(--red-hot);font-size:13px;font-weight:700;line-height:1.5;cursor:pointer}
.films__more > summary::-webkit-details-marker {display:none}
.films__more > summary:focus-visible {outline:2px solid var(--red-hot);outline-offset:4px}
.films__more > summary svg {width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.films__more[open] > summary svg {transform:rotate(180deg)}
.films__more-open {display:none}
.films__more[open] .films__more-open {display:inline}
.films__more[open] .films__more-closed {display:none}
.films__more .films__grid {margin-top:28px}
@media (min-width:600px) and (max-width:1023px) {
  .films__grid {grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
}
@media (max-width:599px) {
  .films {padding:12px 16px 0}
  .films__head {padding-top:25px;margin-bottom:22px}
  .films__eyebrow {font-size:9px}
  .films h2 {font-size:29px}
  .films__grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px}
  .film figcaption {gap:6px;padding-top:9px}
  .film h3 {font-size:13px}
  .film__number {font-size:9px}
  .film__duration {top:7px;right:7px;font-size:10px;padding:3px 5px}
  .films__more {margin-top:24px}
  .films__more > summary {font-size:12px;min-height:46px}
}