/* Films (/ks3/films): scoped under .pg-films. The picture house is navy from top to bottom,
   so the page also recolours the body and the header brand around it. */
body:has(.pg-films) { background: #1f2a55 url(/img/tile_navy.webp) 0 0/1200px auto repeat; }
body:has(.pg-films) .site-head .brand b { color: var(--label); }
body:has(.pg-films) .site-head .brand small { color: var(--mustard); }

.pg-films {
  .hero { padding-block: 10px 60px; color: var(--label); }
  .hero .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; }
  .hero h1 { font-size: clamp(2.3rem, 6vw, 4.2rem); margin: 14px 0 12px; }
  .hero p { color: #dfe4f4; max-width: 46ch; }
  .hero .cinema { width: 100%; max-width: 520px; margin-left: auto; }
  .row { padding-block: 60px 50px; color: var(--ink); }
  .row .big { margin-bottom: 8px; }
  .row .lede { margin: 0 0 24px; }
  .feature { display: grid; grid-template-columns: 1.2fr .8fr; gap: 30px; align-items: center; }
  .feature h3 { font: 400 1.7rem/1.1 var(--f-slab); }
  .feature p { margin: 8px 0 0; }
  .pair2 { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
  .fcard { display: grid; gap: 10px; }
  .fcard h3 { font: 400 1.3rem/1.1 var(--f-slab); margin-top: 6px; }
  .fcard .meta { font: 400 .76rem/1.2 var(--f-label); letter-spacing: .05em; color: var(--c, #8a6f4c); }
  .fcard p { margin: 0; font-size: .94rem; }
  .fcard a.stop { font-size: .88rem; }
  .fgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; }
  @media (max-width: 1180px) { .fgrid { grid-template-columns: repeat(3, 1fr); } }
  .fgrid .fcard:nth-child(odd) .frame { transform: rotate(-1deg); } .fgrid .fcard:nth-child(even) .frame { transform: rotate(1deg); }
  @media (max-width: 960px) { .fgrid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 760px) { .hero .wrap, .feature, .pair2 { grid-template-columns: 1fr; } }
  @media (max-width: 480px) { .fgrid { grid-template-columns: 1fr; } }
}