.ab{ background:#fff; padding-top:clamp(18px,2.4vw,30px) }
.ab-film{ position:relative; margin:0 calc(-1 * var(--gut, 20px)) clamp(26px,3.4vw,44px); border-block:3px solid var(--ink); background:var(--ground) }
.ab-film .pr-roll{ padding:14px 0 }
.ab-film .pr-track{ height:auto; align-items:center; gap:14px; padding:0 20px }
/* every photo is sized from its own proportions (--ar on the item, as on the gallery wall): the item, the
   figure, the button and the image all get explicit sizes, nothing is left to shrink-wrapping or to a
   percentage height inside a <button>, which iPhone Safari gets wrong */
.ab-film .pr-item{ margin:0; --h:clamp(200px,26vw,340px); width:calc(var(--h) * var(--ar, .75)); flex:none }
.ab-film .pr-work{ width:100%; height:var(--h) }
.ab-film .pr-shot{ display:block; height:var(--h); width:100%; border-radius:8px; overflow:hidden; border:2px solid var(--ink); box-sizing:border-box }
.ab-film .pr-shot img{ width:100%; height:100%; object-fit:cover; filter:none }
.ab-film .pr-cap{ display:none }
.ab-centre{ text-align:center; max-width:64ch; margin:0 auto }
.ab-centre .ab-text p{ margin-inline:auto }
.ab-centre .ab-sig{ margin:18px auto 0 }

/* under the strip: a portrait beside the words, the words a size down */
.ab-side{ display:grid; grid-template-columns:minmax(0,.55fr) minmax(0,1fr); gap:clamp(22px,3.4vw,52px); align-items:center; margin:0 auto }
/* the portrait and the words sit in a white box, the same box as the carousel band */
.ab-side{ background:#fff; border:3px solid var(--ink); border-radius:22px; box-shadow:var(--sh-sticker); padding:clamp(22px,3.2vw,44px) clamp(22px,3.8vw,56px) }
/* the box spans exactly what the carousel band spans: the viewport less the band's side gutter (the wrap's own gutter is pulled back) */
.ab--filmstrip .wrap{ max-width:none }
.ab-side{ margin-inline:calc(clamp(12px,2.4vw,32px) - var(--gut,20px)) }
.ab-side__photo{ margin:0; border:3px solid var(--ink); border-radius:20px; overflow:hidden; box-shadow:var(--sh-sticker) }
.ab-side__photo .ab-shot{ height:auto }
.ab-side__photo .ab-shot img{ width:100%; height:auto; aspect-ratio:4/5; object-fit:cover }
.ab-side__text h2{ font-size:clamp(1.7rem,3.2vw,2.6rem) }
.ab-side__text .ab-text p{ font-size:var(--fs-base); line-height:1.6; max-width:52ch }
/* the signature: bigger, and set against the right edge of the words, like a signed letter */
.ab-side__text .ab-text{ max-width:52ch }
.ab-side__text .ab-sig{ height:64px; margin:18px 7% 0 auto }   /* pulled in from the right edge, where the operator boxed it */
@media (max-width:760px){ .ab-side{ grid-template-columns:1fr; padding:20px 18px } .ab-side__photo{ max-width:320px; margin:0 auto } }