/* Film pages (/films/<slug>/). Owner: film pages thread.
   Tokens come from site.css; the fallbacks keep a direct load readable if it is late.
   The ground is the site's near-black tinted by the film (--ground, set on main from tints.json). */

.fp {
  --ink: var(--fg, #efede8);
  --ink-2: var(--fg-2, rgb(239 237 232 / .66));
  /* the site's --fg-3 (.42) gives small labels 3.6:1 on the darkest tints; .54 holds 5.2:1 or better on all 80 */
  --ink-3: rgb(239 237 232 / .54);
  --gut: var(--g, clamp(16px, 2.4vw, 40px));
  --head-h: var(--top, 88px);
  --ease-film: var(--ease-out, cubic-bezier(.16, 1, .3, 1));
  position: relative;
  color: var(--ink);
  isolation: isolate;
  overflow-x: clip;
}

.fp .tnum { font-variant-numeric: tabular-nums; }
.fp .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.fp-label,
.fp-meta,
.fp-laurels,
.fp-facts dt,
.fp-roll dt,
.fp-honour__org,
.fp-next__label,
.fp-more__meta,
.fp-play__text {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.35;
}

.fp-label {
  margin: 0 0 clamp(28px, 4vw, 56px);
  color: var(--ink-2);
  display: flex;
  gap: .9em;
  align-items: baseline;
}
.fp-label .tnum { color: var(--ink-3); }

/* ---------- The hero: the one-sheet beside the picture ---------- */

.fp-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--head-h) + clamp(8px, 2vh, 28px)) var(--gut) clamp(20px, 3.4vh, 40px);
  display: grid;
  grid-template-rows: 1fr auto auto;
  align-content: end;
  gap: clamp(14px, 2.2vh, 26px);
  /* The glow below bleeds 10% past the right edge; while a page change moves main, that widened the page by 142px.
     Clip it sideways only, so the light still falls into the section below. */
  overflow-x: clip;
}

/* The light the picture throws into the room. JS follows the moving picture; the stylesheet sets the still's colour.
   --live-glow is a registered colour, so each new sample eases in rather than stepping, and the soft edge is the
   gradient's own (no blur filter), so following the picture repaints one gradient and nothing more. */
@property --live-glow { syntax: '<color>'; inherits: false; initial-value: transparent; }
.fp-hero__glow {
  --live-glow: var(--glow);
  position: absolute;
  inset: 8% -10% -20% 10%;
  z-index: -1;
  background: radial-gradient(closest-side, var(--live-glow) 0%, transparent 100%);
  opacity: .11;
  pointer-events: none;
  transition: opacity 1.2s var(--ease-film), --live-glow .6s linear;
}
.fp--card .fp-hero__glow { opacity: .05; }

.fp-head {
  align-self: end;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "where meta" "laurels laurels" "title title";
  align-items: baseline;
  column-gap: var(--gut);
  min-width: 0;
}

.fp-where {
  grid-area: where;
  display: flex;
  gap: .7em;
  color: var(--ink-2);
}
.fp-where a { color: var(--ink); }
.fp-where span::before { content: "/"; margin-right: .7em; opacity: .5; }

.fp-laurels {
  grid-area: laurels;
  margin: clamp(22px, 4vh, 44px) 0 clamp(8px, 1.4vh, 16px);
  display: flex;
  flex-wrap: wrap;
  gap: .4em 1.8em;
  color: var(--ink);
}
.fp-laurels span { display: inline-flex; align-items: center; gap: .8em; }
.fp-laurels span::before {
  content: "";
  width: 16px;
  height: 1px;
  background: currentColor;
  opacity: .6;
}
/* A copy tag ("Paris, one night") is a line of mood, not an honour: no laurel rule, and in sentence case. */
.fp-laurels--tag { color: var(--ink-2); text-transform: none; letter-spacing: 0; font-weight: 450; font-size: clamp(14px, 1.15vw, 17px); }
.fp-laurels--tag span::before { content: none; }
.fp-head:not(:has(.fp-laurels)) .fp-title { margin-top: clamp(16px, 3vh, 36px); }

.fp-title {
  grid-area: title;
  margin: 0;
  min-width: 0;
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: .94;
  text-wrap: balance;
  overflow-wrap: break-word;
  /* room for descenders and the left bearing of a tight face */
  padding: .02em 0 .1em .02em;
  margin-bottom: -.1em;
}
.fp-title--s  { font-size: clamp(4rem, 10.2vw, 11.5rem); }
.fp-title--m  { font-size: clamp(3.2rem, 7.8vw, 8.8rem); }
.fp-title--l  { font-size: clamp(2.9rem, 6.3vw, 7rem); }
.fp-title--xl { font-size: clamp(2.5rem, 4.9vw, 5.4rem); line-height: .98; }

.fp-meta {
  grid-area: meta;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .3em 0;
  color: var(--ink-2);
  text-align: right;
}
.fp-meta span { white-space: nowrap; }
/* the slash trails its item, so a wrapped line never starts with one */
.fp-meta span:not(:last-child)::after { content: "/"; margin: 0 .7em; opacity: .5; }
.fp-where, .fp-meta { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; line-height: 1.35; }

.fp-pair {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 3.585fr;
  gap: var(--gap);
  /* before film.js fits it: an estimate that keeps the first screen whole */
  width: min(100%, calc((100svh - var(--head-h) - 18rem) * 3.0567));
  min-width: min(100%, 720px);
}
/* fitted (film.js): full width at the height the head leaves; the screen takes the rest, scope or a little wider */
.fp-pair.is-fit {
  width: 100%;
  height: var(--pair-h);
  grid-template-columns: calc(var(--pair-h) * 2 / 3) minmax(0, 1fr);
}
.fp-pair.is-fit .fp-screen { aspect-ratio: auto; height: 100%; max-width: calc(var(--pair-h) * 2.8); }

.fp-poster {
  margin: 0;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: color-mix(in oklab, var(--glow) 10%, #000);
  box-shadow: 0 30px 60px -30px rgb(0 0 0 / .8);
}
.fp-poster img,
.fp-screen__pic img,
.fp-screen__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fp-screen {
  position: relative;
  aspect-ratio: 2.39 / 1;
  transform-origin: 0 0;
  will-change: transform;
}
.fp-screen__pic {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #000;
}
.fp-screen__still,
.fp-poster picture { position: absolute; inset: 0; }
.fp-poster { position: relative; }
.fp-screen__pic { margin: 0; }
.fp-screen__video {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  transition: opacity .9s var(--ease-film);
}
.fp-screen__video.is-playing { opacity: 1; }
/* Films without a loop: the screen dissolves through a few of the film's stills. */
.fp-screen__cut {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

/* The trailer: a quiet line at the foot of the screen, not a button shape */
.fp-play {
  position: absolute;
  left: clamp(12px, 1.4vw, 22px);
  bottom: clamp(10px, 1.3vw, 20px);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 4px 0 0;
  border: 0;
  background: none;
  color: #fff;
  font: inherit;
  cursor: pointer;
  text-shadow: 0 1px 12px rgb(0 0 0 / .5);
}
.fp-play__icon {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgb(255 255 255 / .7);
  transition: transform .5s var(--ease-film), background-color .3s, border-color .3s;
}
.fp-play__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -6px 0 0 -3px;
  border-left: 10px solid currentColor;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  transition: border-left-color .3s;
}
.fp-play__time { font-size: 12px; opacity: .7; letter-spacing: .04em; }
.fp-play:hover .fp-play__icon,
.fp-play:focus-visible .fp-play__icon { transform: scale(1.08); background: #fff; border-color: #fff; }
.fp-play:hover .fp-play__icon::after,
.fp-play:focus-visible .fp-play__icon::after { border-left-color: #000; }
.fp-play:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

/* No picture yet: the frame has not opened. The rule of the house stays a line. */
.fp-card { position: relative; padding-top: clamp(28px, 6vh, 64px); }
.fp-card__rule { display: block; height: 1px; background: var(--ink); opacity: .55; transform-origin: 0 50%; }
.fp-card__sub {
  margin: 14px 0 0;
  display: flex;
  justify-content: space-between;
  gap: 1em;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.fp--card .fp-hero { min-height: 0; padding-bottom: 0; grid-template-rows: auto auto auto; }
.fp--card .fp-story { padding-top: clamp(64px, 10vh, 120px); }

/* The billing block under the pair */
.fp-billing {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .2em 1.4em;
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.35;
}
.fp-billing__names { display: inline-flex; flex-wrap: wrap; gap: .2em 1.1em; font-weight: 560; text-transform: uppercase; letter-spacing: .04em; }
.fp-billing__role { color: var(--ink-2); text-transform: lowercase; }
.fp-billing__role b { color: var(--ink); font-weight: 560; text-transform: uppercase; letter-spacing: .04em; margin-left: .3em; }

/* ---------- The story ---------- */

.fp-story {
  padding: clamp(96px, 16vh, 200px) var(--gut) clamp(64px, 10vh, 140px);
}
.fp-logline {
  margin: 0 0 clamp(48px, 8vh, 96px);
  max-width: 21ch;
  font-size: clamp(2rem, 4.4vw, 4.6rem);
  font-weight: 520;
  letter-spacing: -.035em;
  line-height: 1.04;
  text-wrap: balance;
  padding-bottom: .08em;
}
.fp-story__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--gut);
  align-items: start;
}
.fp-synopsis {
  margin: 0;
  max-width: 40ch;
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.5;
  color: color-mix(in oklab, var(--ink) 86%, transparent);
  text-wrap: pretty;
}
.fp-story__text { display: grid; gap: 1.4em; align-content: start; }
.fp-note { margin: 0; max-width: 46ch; color: var(--ink-2); font-size: 15px; line-height: 1.5; text-wrap: pretty; }
.fp-facts {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px var(--gut);
}
.fp-facts div { border-top: 1px solid var(--line); padding-top: 12px; min-width: 0; }
.fp-facts dt { color: var(--ink-3); margin-bottom: 6px; }
.fp-facts dd { margin: 0; font-size: 15px; line-height: 1.4; }

/* ---------- Honours ---------- */

.fp-honours { padding: clamp(48px, 8vh, 110px) var(--gut); }
.fp-honours__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(40px, 6vh, 72px) var(--gut);
}
.fp-honours__list--1 { grid-template-columns: minmax(0, 1fr); max-width: 60rem; }
.fp-honour { position: relative; padding-top: 18px; min-width: 0; }
.fp-honour__rule {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--ink);
  opacity: .5;
  transform-origin: 0 50%;
}
.fp-honour__org { margin: 0 0 14px; display: flex; justify-content: space-between; gap: 1em; color: var(--ink-2); }
.fp-honour__result {
  margin: 0 0 12px;
  font-size: clamp(2.4rem, 4.6vw, 4.8rem);
  font-weight: 580;
  letter-spacing: -.04em;
  line-height: .98;
  padding-bottom: .06em;
  text-wrap: balance;
}
.fp-honour:not(.is-won) .fp-honour__result { font-weight: 480; }
.fp-honour__what { margin: 0; max-width: 36ch; color: var(--ink-2); font-size: 15px; line-height: 1.45; text-wrap: pretty; }
.fp-honour__src {
  display: inline-block;
  margin-top: 12px;
  color: var(--ink-3);
  font-size: 12px;
  letter-spacing: .04em;
  text-underline-offset: 3px;
  padding: 10px 0;
}
.fp-honour__src:hover { color: var(--ink); }

/* ---------- Frames: stills set like a contact sheet blown up ---------- */

.fp-frames { padding: clamp(64px, 12vh, 160px) var(--gut) clamp(48px, 8vh, 120px); }
.fp-frames__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
}
/* A contact sheet: the first frame in scope across the page, then rows of two and three at one height.
   Each frame's width is its share of its row's aspect ratios (film.py, frame_rows). */
.fp-frame {
  min-width: 0;
  flex: var(--share) 1 calc((100% - (var(--k) - 1) * var(--gap)) * var(--share) - 1px);
}
.fp-frame--scope { margin-bottom: calc(var(--gap) * 2); }
.fp-frame__link { display: block; color: inherit; cursor: zoom-in; }
.fp-frame__link:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; }
.fp-frame__box {
  display: block;
  overflow: hidden;
  background: color-mix(in oklab, var(--glow) 8%, #000);
}
.fp-frame__box picture { height: 100%; }
.fp-frame__box img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- End credits ---------- */

.fp-credits {
  padding: clamp(80px, 16vh, 200px) var(--gut) clamp(80px, 14vh, 180px);
  text-align: center;
}
.fp-credits .fp-label { justify-content: center; }
.fp-credits__title {
  margin: 0 auto clamp(48px, 8vh, 96px);
  font-size: clamp(1.4rem, 2.6vw, 2.4rem);
  font-weight: 560;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-wrap: balance;
  max-width: 30ch;
}
.fp-roll { margin: 0 auto; max-width: 64rem; display: grid; gap: clamp(22px, 3.4vh, 34px); }
.fp-roll__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(20px, 3vw, 48px);
  align-items: baseline;
}
.fp-roll dt { text-align: right; color: var(--ink-3); }
/* names run on, as on a billing block, so a long cast takes lines, not a screen */
.fp-roll dd {
  margin: 0;
  text-align: left;
  display: flex;
  flex-wrap: wrap;
  gap: .3em 1.1em;
  justify-content: flex-start;
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 520;
  line-height: 1.35;
}
.fp-roll a { color: inherit; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--ease-film); }
.fp-roll a:hover, .fp-roll a:focus-visible { background-size: 100% 1px; }
.fp-roll a.is-principal { color: var(--ink); }
.fp-roll__row--cast dd { font-weight: 560; }
.fp-credits__assoc { margin: clamp(56px, 9vh, 110px) auto 0; color: var(--ink-2); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }

/* ---------- Related ---------- */

.fp-more { padding: clamp(48px, 8vh, 110px) var(--gut); }
.fp-more__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
}
.fp-more__link { display: grid; gap: 10px; color: inherit; text-decoration: none; }
.fp-more__poster { display: block; aspect-ratio: 2 / 3; overflow: hidden; background: #000; }
.fp-more__poster img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.1s var(--ease-film), filter .6s; }
.fp-more__link:hover .fp-more__poster img,
.fp-more__link:focus-visible .fp-more__poster img { transform: scale(1.035); }
.fp-more__link:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; }
.fp-more__title { font-size: clamp(16px, 1.3vw, 19px); font-weight: 560; letter-spacing: -.01em; line-height: 1.2; text-wrap: balance; }
.fp-more__meta { display: flex; flex-wrap: wrap; gap: .2em .8em; color: var(--ink-3); }

/* ---------- Next feature ---------- */

.fp-next {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* The room above is part of the block, so with the frame in view the label sits clear of the header's band. */
  margin-top: clamp(16px, 3vh, 40px);
  padding: clamp(76px, 13vh, 180px) var(--gut) clamp(40px, 7vh, 80px);
  color: var(--ink);
  text-decoration: none;
  background: linear-gradient(to bottom, transparent, var(--next-ground) 38%);
  overflow: hidden;
}
.fp-next__label { color: var(--ink); margin-bottom: 16px; }
/* Scope wide, but never so tall that the label, the frame and the title can't share one screen. */
.fp-next__frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 2.39 / 1;
  max-height: 58svh;
  overflow: hidden;
  background: #000;
  clip-path: inset(0 22% 0 22%);
  transition: clip-path 1.2s var(--ease-film);
}
.fp-next__frame img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.08); transition: transform 1.6s var(--ease-film); }
.fp-next:hover .fp-next__frame,
.fp-next:focus-visible .fp-next__frame { clip-path: inset(0 0 0 0); }
.fp-next:hover .fp-next__frame img { transform: scale(1); }

/* No still yet: the title's designed one-sheet (as Films & TV draws it) on a wall in its own hue,
   with one slow light crossing it. The sheet settles as the frame opens (film.js). */
.fp-next__frame--sheet {
  display: grid;
  place-items: center;
  background:
    radial-gradient(34% 78% at 50% 46%, hsl(var(--h, 30) 34% 28% / .62), transparent 72%),
    radial-gradient(70% 100% at 20% 0%, hsl(var(--h, 30) 30% 18% / .5), transparent 70%),
    radial-gradient(45% 80% at 90% 100%, hsl(calc(var(--h, 30) + 40) 30% 15% / .5), transparent 70%),
    #0a0908;
}
.fp-next__frame--sheet::after {
  content: "";
  position: absolute;
  inset: -20% -30%;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(24% 52% at 50% 42%, hsl(var(--h, 30) 45% 74% / .2), transparent 72%);
  mix-blend-mode: screen;
  opacity: .85;
  transition: opacity 1.2s var(--ease-film);
  animation: fp-light 17s ease-in-out infinite alternate paused;
}
.fp-next__frame--sheet.is-lit::after { animation-play-state: running; }
.fp-next:hover .fp-next__frame--sheet::after { opacity: 1; }
@keyframes fp-light {
  from { transform: translateX(-20%); }
  to { transform: translateX(20%); }
}
.fp-sheet {
  position: relative;
  height: 86%;
  aspect-ratio: 2 / 3;
  container-type: inline-size;
  background:
    radial-gradient(130% 70% at 20% 0%, hsl(var(--h, 30) 38% 30% / .5), transparent 65%),
    radial-gradient(90% 60% at 100% 100%, hsl(calc(var(--h, 30) + 40) 30% 18% / .55), transparent 70%),
    #0c0b0a;
  box-shadow: inset 0 0 0 1px rgb(239 237 232 / .07), 0 40px 70px -30px rgb(0 0 0 / .85);
}
.fp-sheet__in { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 11cqi 10cqi 12cqi; }
.fp-sheet__by { position: absolute; top: 10cqi; left: 10cqi; right: 10cqi; font-size: 4.4cqi; letter-spacing: .08em; text-transform: uppercase; line-height: 1.3; color: rgb(239 237 232 / .55); }
.fp-sheet__rule { display: block; width: 34%; height: 1px; margin-bottom: 7cqi; background: rgb(239 237 232 / .5); transform-origin: 0 50%; transition: transform .9s var(--ease-film); }
.fp-next:hover .fp-sheet__rule, .fp-next:focus-visible .fp-sheet__rule { transform: scaleX(1.9); }
.fp-sheet__title {
  font-size: var(--fs, 13.5cqi); font-weight: 620; letter-spacing: -.04em; line-height: .96; color: var(--ink);
  text-wrap: balance; overflow-wrap: normal; hyphens: manual;
}
.fp-next__title {
  margin-top: clamp(16px, 2.4vh, 28px);
  font-size: clamp(3rem, 9vw, 9.5rem);
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: .94;
  padding-bottom: .1em;
  text-wrap: balance;
}
.fp-next__foot { display: flex; justify-content: space-between; align-items: center; gap: 1em; flex-wrap: wrap; }
.fp-next:hover .fp-next__cta i, .fp-next:focus-visible .fp-next__cta i { transform: translateX(6px); }
.fp-next__meta { display: flex; flex-wrap: wrap; gap: .3em 0; color: var(--ink-2); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.fp-next__meta > span:not(:last-child)::after { content: "/"; margin: 0 .7em; opacity: .5; }
.fp-next:focus-visible { outline: 2px solid var(--ink); outline-offset: -8px; }

/* ---------- Trailer and stills, full screen ---------- */

.fp-trailer,
.fp-lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: #000;
  color: #fff;
  overflow: hidden;
}
.fp-trailer::backdrop,
.fp-lightbox::backdrop { background: #000; }
.fp-trailer[open],
.fp-lightbox[open] { display: grid; place-items: center; }
.fp-trailer__stage { width: min(100vw, calc(100svh * 16 / 9)); padding: 0 var(--gut); }
.fp-trailer__video { display: block; width: 100%; height: auto; max-height: 86svh; background: #000; }
.fp-trailer__close,
.fp-lightbox__close {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: var(--gut);
  min-height: 44px;
  padding: 0 4px;
  background: none;
  border: 0;
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}
.fp-trailer__close:focus-visible,
.fp-lightbox__close:focus-visible,
.fp-lightbox button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.fp-lightbox__fig { margin: 0; width: 100%; height: 100%; display: grid; place-items: center; padding: 64px var(--gut); box-sizing: border-box; }
.fp-lightbox__fig img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.fp-lightbox__count { position: absolute; left: var(--gut); top: max(12px, env(safe-area-inset-top)); margin: 0; line-height: 44px; font-size: 12px; letter-spacing: .06em; opacity: .7; }
.fp-lightbox__prev,
.fp-lightbox__next {
  position: absolute;
  top: 64px;
  bottom: 64px;
  width: 30%;
  background: none;
  border: 0;
  cursor: pointer;
  color: #fff;
}
.fp-lightbox__prev { left: 0; cursor: w-resize; }
.fp-lightbox__next { right: 0; cursor: e-resize; }

/* ---------- Motion states (only with JS and motion) ---------- */

html.js .fp--still .fp-screen__still { transition: transform 14s linear; }
html.js .fp--still.is-entered .fp-screen__still { transform: scale(1.045); }

@media (prefers-reduced-motion: reduce) {
  html.js .fp-screen__still,
  html.js .fp.is-entered .fp-screen__still { transform: none; transition: none; }
  .fp-next__frame { clip-path: none; }
  .fp-next__frame--sheet::after { animation: none; }
}

/* ---------- Phones and narrow windows ---------- */

@media (max-width: 760px) {
  .fp-hero {
    min-height: 0;
    padding-top: calc(var(--head-h) + 20px);
    padding-bottom: clamp(20px, 3.4vh, 40px);
    grid-template-rows: auto auto auto;
    gap: 18px;
  }
  .fp-head { grid-template-columns: minmax(0, 1fr); grid-template-areas: "where" "laurels" "title" "meta"; }
  .fp-meta { justify-content: flex-start; text-align: left; margin: 14px 0 0; }
  .fp-meta span { white-space: normal; }
  /* what Hyde Park did with the film gets its own line on a phone, rather than wrapping after a slash */
  .fp-meta span:last-child { flex-basis: 100%; }
  .fp-meta span:nth-last-child(2)::after { content: none; }
  .fp-title--s  { font-size: clamp(3.2rem, 17vw, 5.5rem); }
  .fp-title--m  { font-size: clamp(2.6rem, 12.6vw, 4.6rem); }
  .fp-title--l  { font-size: clamp(2.2rem, 10vw, 3.8rem); }
  .fp-title--xl { font-size: clamp(1.9rem, 8.4vw, 3rem); }
  .fp-pair {
    width: auto;
    min-width: 0;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "screen screen" "poster .";
    margin: 0 calc(var(--gut) * -1);
    row-gap: 0;
  }
  .fp-screen { grid-area: screen; aspect-ratio: 16 / 10; }
  .fp-poster {
    grid-area: poster;
    margin: -22vw 0 0 var(--gut);
    width: 40vw;
    z-index: 1;
    box-shadow: 0 18px 40px -18px rgb(0 0 0 / .9);
  }
  .fp-play { left: auto; right: var(--gut); }
  .fp-play__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .fp-billing { margin-top: -2px; padding-left: calc(40vw + var(--gap)); margin-top: calc(-40vw * 1.5 + 22vw + 8px); min-height: calc(40vw * 1.5 - 22vw - 8px); align-content: start; flex-direction: column; gap: 8px; }
  .fp-billing__names { flex-direction: column; gap: 2px; }
  .fp--card .fp-billing { padding-left: 0; margin-top: 0; min-height: 0; }

  .fp-story { padding-top: 72px; }
  .fp-story__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .fp-facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px var(--gut); }

  /* phones: the scope frame, then pairs cut to one shape */
  .fp-frames__list { gap: 10px; }
  .fp-frame { flex: 1 1 calc(50% - 5px); }
  .fp-frame--scope { flex-basis: 100%; margin-bottom: 0; }
  .fp-frame:not(.fp-frame--scope) .fp-frame__box { aspect-ratio: 3 / 2 !important; }

  .fp-roll__row { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
  .fp-roll dt, .fp-roll dd { text-align: center; justify-content: center; }

  .fp-more__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .fp-next__frame { clip-path: none; }
  /* A scope strip is too low for a one-sheet a phone can read. */
  .fp-next__frame--sheet { aspect-ratio: 4 / 3; }
  .fp-lightbox__prev, .fp-lightbox__next { width: 40%; }
}