/* Performance archive: the school's record of forty years of staging.

   Built on the same page architecture as the programme pages rather than the
   article template, so the date and title sit beside the lede and each part of
   the record gets its own section. The photographs are the point of these
   pages, so they are given the width. */

.pf-when{margin:0 0 10px;color:var(--p-quiet);font-size:11.5px;font-weight:600;
  letter-spacing:.02em;text-transform:uppercase}

.pf-prose{max-width:680px}
.pf-prose p{margin:0 0 18px;color:var(--p-body);font-size:16.5px;line-height:1.7}
.pf-prose p:last-child{margin-bottom:0}

.pf-film-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(18px,2vw,26px)}
/* Facade only: a poster and a play mark. No iframe loads until it is asked for. */
.pf-video{position:relative;display:block;padding:0;border:0;background:var(--paper-soft,#F8F6FA);
  border-radius:18px;overflow:hidden;cursor:pointer}
.pf-video img{display:block;width:100%;aspect-ratio:16 / 9;object-fit:cover}
.pf-noposter{display:block;width:100%;aspect-ratio:16 / 9;background:var(--paper-soft,#F8F6FA)}
.pf-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.pf-play i{display:flex;align-items:center;justify-content:center;width:62px;height:62px;
  border-radius:50%;background:rgba(23,18,25,.84);color:#fff;font-size:24px;padding-left:4px}
.pf-video:hover .pf-play i,.pf-video:focus-visible .pf-play i{background:var(--ink)}

@media (prefers-reduced-motion:reduce){ .pf-play i{transition:none} }
@media (max-width:640px){ .pf-prose p{font-size:16px} }