/* P6 Run Lagos: the film (client-approved 8 Oct, from Design/variations/2026-10-08-run-lagos-film/).
   Every rule is scoped to .film (#gov). Motion layers only show when film.js adds .is-on;
   without it (no JS, OS reduced motion, footer toggle) the section is a static scene 4 + law picker. */
.film {
  --night: #0B0F26; --black: #000; --flag: #008751;
  --fm-gutter: 24px; --bar: 7svh; --cs: .3;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  --fm-top: 0px; --fm-h: calc(100svh - var(--fm-top));
  position: relative; overflow: clip; /* nothing of the film paints or catches clicks outside #gov (the fixed pin is not clipped by this) */
  background: var(--night); color: var(--paper);
  scroll-margin-top: calc(var(--fm-top) - 112px); /* html has scroll-padding-top: 112px; land exactly on the pin start */
}
@media (max-width: 699px) { .film { --fm-gutter: 16px; --bar: 5svh; --cs: .36; } }
.film__stage { position: relative; overflow: hidden; }
.film__sym { position: absolute; width: 0; height: 0; }

/* Static composition (default) */
.film:not(.is-on) :is(.film__vote, .film__banner, .film__words, .film__tally, .film__wall, .film__count, .film__bars) { display: none; }
.film__final { position: relative; z-index: 6; padding: var(--s16) var(--fm-gutter) var(--s12); display: flex; flex-direction: column; align-items: center; text-align: center; }
.film__wipe { position: relative; z-index: 8; background: var(--gold); color: var(--ink); padding: var(--s12) var(--fm-gutter); text-align: center; }

/* Motion mode */
.film.is-on .film__stage { height: var(--fm-h); }
/* Only once the film has started (film.js toggles .is-front) does it sit above P7, so OWAMBE!'s parked
   letters stay hidden under the film and drop out from under the gold. Before that it never covers P5. */
.film.is-front { z-index: 3; }
/* Motion layers never take pointer events; only the ballot does, and only while visible (autoAlpha sets visibility). */
.film.is-on .film__stage, .film.is-on .film__stage * { pointer-events: none; }
.film.is-on :is(.fm-ballot, .fm-ballot *, .fm-snd) { pointer-events: auto; }
.film.is-on :is(.fm-pen, .fm-pen *) { pointer-events: none; }
.film.is-on .film__final { position: absolute; inset: 0; padding: calc(var(--bar) + 2svh) var(--fm-gutter); justify-content: center; }
.film.is-on .film__wipe { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; transform: scaleX(0); transform-origin: 0 50%; }
.film .is-playing :is(.film__banner, .fm-fw, .fm-col, .film__wipe, .film__count, .film__vote) { will-change: transform, opacity; }

/* Giant outlined wordmark */
.film__vote { position: absolute; inset: 0; display: grid; place-items: center; z-index: 1; pointer-events: none; }
.film__vote span { font: 800 min(44vw, 72svh)/.8 var(--display); font-variation-settings: "wdth" 75; letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 2px rgba(233,165,18,.55); white-space: nowrap; }

/* The banner: a typographic election poster */
.film__banner { position: absolute; inset: 0; z-index: 2; transform-origin: 50% 50%; background: var(--gold); color: var(--ink); overflow: hidden; }
.film__banner::before { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: .32; mix-blend-mode: multiply; pointer-events: none; }
.fm-banner__edge { position: absolute; inset: 0; border: 14px solid var(--paper); opacity: 0; pointer-events: none; z-index: 3; }
.fm-banner__in { position: absolute; inset: calc(var(--bar) + 4svh) 5vw; display: grid; grid-template-rows: auto 1fr auto; }
.fm-banner__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 2vw; }
.fm-banner__office { font: 800 min(2.2vw, 3.4svh)/1 var(--display); font-variation-settings: "wdth" 85; letter-spacing: .02em; text-transform: uppercase; }
.fm-banner__office small { display: block; margin-top: .5em; font: 700 .55em/1.3 var(--text); letter-spacing: .08em; }
.fm-banner__tick { width: min(9vw, 15svh); height: auto; flex: none; }
.fm-banner__mid { align-self: center; justify-self: center; text-align: center; }
.fm-banner__name { font: 800 min(21vw, 36svh)/.82 var(--display); font-variation-settings: "wdth" 75; letter-spacing: -.035em; text-transform: uppercase; }
.fm-banner__slogan { display: inline-block; margin-top: min(2.4vw, 3.4svh); padding: .3em .8em .36em; background: var(--paper); border: max(3px, .35vw) solid var(--ink); border-radius: 999px; transform: rotate(-3deg); font: 800 min(3.6vw, 6svh)/1 var(--display); font-variation-settings: "wdth" 85; text-transform: uppercase; }
.fm-banner__foot { display: flex; align-items: center; justify-content: space-between; gap: 2vw; font: 700 min(1.4vw, 2.2svh)/1.2 var(--text); letter-spacing: .08em; text-transform: uppercase; }
.fm-flag { display: flex; height: min(1.6vw, 2.6svh); width: min(9vw, 14svh); border: 2px solid var(--ink); flex: none; }
.fm-flag i, .fm-mini__flag i { flex: 1; background: var(--flag); }
.fm-flag i:nth-child(2), .fm-mini__flag i:nth-child(2) { background: var(--paper); }
@media (max-width: 699px) {
  .fm-banner__in { inset: calc(var(--bar) + 3svh) 6vw; }
  .fm-banner__office { font-size: 4.4vw; }
  .fm-banner__tick { width: 18vw; }
  .fm-banner__name { font-size: 25vw; }
  .fm-banner__slogan { font-size: 6vw; margin-top: 5vw; }
  .fm-banner__foot { font-size: 2.9vw; }
  .fm-flag { width: 18vw; height: 3.4vw; }
  .fm-banner__edge { border-width: 10px; }
}

/* Scattered words -> headline */
.film__words { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--cs) * var(--fm-h) - 4svh); pointer-events: none; }
.fm-fl { display: flex; gap: .22em; font: 800 min(13vw, 21svh)/.84 var(--display); font-variation-settings: "wdth" 75; letter-spacing: -.02em; text-transform: uppercase; white-space: nowrap; }
.fm-fw { display: inline-block; color: var(--paper); -webkit-text-stroke: .045em var(--ink); paint-order: stroke fill; transform-origin: 50% 50%; }
.film__tally { position: absolute; left: 0; right: 0; bottom: calc(var(--bar) + 3svh); z-index: 4; text-align: center; font: 600 15px/1 var(--text); color: rgba(255,252,247,.75); letter-spacing: .02em; }
.film__tally b { font: 800 30px/1 var(--display); font-variation-settings: "wdth" 85; color: var(--gold); margin-right: 6px; }
@media (max-width: 699px) { .fm-fl { font-size: 15.5vw; } }

/* Poster wall */
.film__wall { position: absolute; inset: 0; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 0 var(--fm-gutter); pointer-events: none; }
.fm-col { display: flex; flex-direction: column; gap: 16px; align-self: start; }
.fm-col:nth-child(even) { margin-top: 12svh; }
@media (max-width: 699px) {
  .film__wall { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .fm-col { gap: 12px; }
  .fm-col:nth-child(n+3) { display: none; }
}
/* Lagos street posters (client pick 8 Oct, Design/variations/2026-10-08-poster-wall/ option 1).
   Torn paper pasted over paper: condensed name blocks, office ribbons, party bands, VOTE lockups, misregistered ink.
   Two living loops (stamp slap, paste-over) are CSS, transform + opacity only; they only run while the film is on. */
.ps { --ps-d: var(--display); position: relative; aspect-ratio: 3 / 4; container-type: inline-size; padding: 9% 7.5%; display: flex; flex-direction: column; align-items: flex-start; gap: 3cqw; color: var(--fg); background-color: var(--bg); transform: rotate(var(--r)); box-shadow: 0 4px 10px rgba(0,0,0,.45);
  background-image: linear-gradient(97deg, transparent 30%, rgba(255,255,255,.14) 31%, transparent 33%), linear-gradient(80deg, transparent 62%, rgba(0,0,0,.1) 63%, transparent 66%); }
.ps + .ps { margin-top: -14%; }
.fm-col > .ps:nth-child(odd) { z-index: 1; }
.ps::before { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: .32; mix-blend-mode: multiply; pointer-events: none; }
.ps > * { position: relative; }
.ps-t0 { clip-path: polygon(0 1%, 8% 0, 17% 1.5%, 29% 0, 41% 1%, 55% 0, 70% 1.2%, 84% 0, 100% 1%, 100% 93%, 94% 96%, 88% 94%, 80% 99%, 71% 95%, 60% 100%, 48% 96%, 40% 98%, 30% 94%, 18% 100%, 8% 96%, 0 99%); }
.ps-t1 { clip-path: polygon(0 0, 100% 1.5%, 99% 30%, 100% 62%, 98.5% 68%, 100% 100%, 64% 99%, 58% 97%, 52% 100%, 0 99%, 1% 60%, 0 54%); }
.ps-t2 { clip-path: polygon(2% 2%, 30% 0, 33% 3%, 37% 0, 100% 0, 100% 100%, 0 100%, 0 70%, 3% 66%, 0 62%); }
.ps-mis { text-shadow: .8cqw .5cqw 0 var(--m, var(--fuch)); }
.ps-pre, .ps-name, .ps-num, .ps-head, .ps-strip, .ps-outline, .ps-vvv, .ps-date, .ps-sash, .ps-scrap, .ps-seal span { font-family: var(--display); font-weight: 800; font-variation-settings: "wdth" 75; text-transform: uppercase; letter-spacing: -.01em; }
.ps-pre { font-size: 9cqw; line-height: 1; }
.ps-name { font-size: 24cqw; line-height: .84; margin-left: -1cqw; }
.ps-name--s { font-size: 20cqw; }
.ps-num { font-size: 29cqw; line-height: .82; letter-spacing: -.03em; margin-left: -1.5cqw; }
.ps-num--low { margin-top: auto; }
.ps-head { font-size: 18.5cqw; line-height: .86; }
.ps-head--s { font-size: 13.5cqw; }
.ps-ribbon { padding: 1.8cqw 8cqw 1.6cqw 4cqw; margin-left: -8cqw; font: 800 7.4cqw/1 var(--display); font-variation-settings: "wdth" 80; text-transform: uppercase; letter-spacing: .02em; clip-path: polygon(0 0, 100% 0, 96% 50%, 100% 100%, 0 100%); }
.ps-ribbon--tilt { transform: rotate(-3deg); }
.ps-strip { align-self: stretch; margin: auto -8cqw 0; padding: 2.4cqw 8cqw; color: var(--paper); font-size: 9cqw; line-height: 1; }
.ps-small { font: 800 4.6cqw/1.25 var(--text); text-transform: uppercase; letter-spacing: .06em; }
.ps-small--b { margin-top: auto; }
.ps-flag { position: absolute !important; left: 0; right: 0; top: 0; height: 5cqw; background: linear-gradient(90deg, var(--flag) 0 33.3%, var(--paper) 0 66.6%, var(--flag) 0); }
.ps-bands { position: absolute !important; top: 0; bottom: 0; right: 0; width: 15cqw; display: flex; }
.ps-bands b { flex: 1; }
.ps-outline { font-size: 33cqw; line-height: .82; color: transparent; -webkit-text-stroke: .7cqw var(--gold); margin-left: -1cqw; }
.ps-vvv { display: flex; flex-direction: column; font-size: 27cqw; line-height: .8; margin-left: -1cqw; }
.ps-date { display: flex; gap: 2.5cqw; font-size: 15cqw; line-height: .9; }
.ps-date b { font-weight: 800; padding: 1cqw 2cqw 0; border: .8cqw solid currentColor; }
.ps-list { list-style: none; padding: 0; font: 800 6.4cqw/1.2 var(--display); font-variation-settings: "wdth" 85; text-transform: uppercase; }
.ps-list li::before { content: "★ "; color: var(--gold); -webkit-text-stroke: .3cqw var(--ink); }
.ps-star { position: absolute !important; width: 20cqw; }
.ps-star--tr { right: 6cqw; top: 9cqw; transform: rotate(12deg); }
.ps-star--bl { right: 6cqw; bottom: 22cqw; width: 16cqw; }
.ps-star--big { width: 92cqw; right: -34cqw; top: -18cqw; opacity: .22; transform: rotate(-10deg); }
.ps-tick { position: absolute !important; width: 19cqw; }
.ps-tick--br { right: 20cqw; bottom: 8cqw; transform: rotate(-6deg); }
.ps-tick--tr { right: 7cqw; top: 26cqw; transform: rotate(5deg); }
.ps-box { position: absolute !important; width: 26cqw; right: 6cqw; bottom: 6cqw; }
.ps-sash { position: absolute !important; left: -20cqw; right: -20cqw; top: 22cqw; padding: 2.6cqw 0 2cqw; transform: rotate(-24deg); text-align: center; color: var(--paper); font-size: 13cqw; line-height: 1; letter-spacing: .03em; box-shadow: 0 0 0 .8cqw var(--ink); }
.ps-seal { position: absolute !important; right: 5cqw; bottom: 18cqw; width: 34cqw; aspect-ratio: 1; border-radius: 50%; background: var(--red, #D7322B); color: var(--paper); display: grid; place-content: center; text-align: center; transform: rotate(-12deg); box-shadow: inset 0 0 0 1.4cqw #D7322B, inset 0 0 0 2cqw var(--paper); }
.ps-seal span { font-size: 7.6cqw; line-height: .9; }
.ps-seal small { font: 800 3.3cqw/1.2 var(--text); text-transform: uppercase; letter-spacing: .05em; margin-top: 1cqw; }
.ps-scrap { position: absolute !important; z-index: 3; padding: 2.4cqw 5cqw 2cqw; color: var(--ink); font-size: 9.5cqw; line-height: 1; transform: rotate(var(--r)); box-shadow: 0 .8cqw 1.6cqw rgba(0,0,0,.35);
  clip-path: polygon(0 4%, 12% 0, 30% 6%, 52% 0, 75% 5%, 100% 0, 98% 52%, 100% 100%, 80% 94%, 60% 100%, 35% 95%, 15% 100%, 0 96%, 3% 50%); }
.ps-scrap--dark { background-color: var(--ink); color: var(--gold); }
/* Living loop 1: the ₦50,000 stamp slaps on */
.ps-slap { position: absolute !important; right: 6cqw; bottom: 22cqw; display: grid; justify-items: center; padding: 3cqw 4.4cqw 2.6cqw; border: 1.2cqw solid #D7322B; border-radius: 3cqw; color: #D7322B; background: rgba(255,252,247,.55); transform: rotate(-11deg); }
.ps-slap b { font: 800 9.6cqw/1 var(--display); font-variation-settings: "wdth" 80; text-transform: uppercase; white-space: nowrap; }
.ps-slap small { font: 800 4.4cqw/1.2 var(--text); text-transform: uppercase; letter-spacing: .08em; }
/* Living loop 2: a fresh poster is pasted over the old one */
.ps-over { position: absolute !important; inset: 0; z-index: 4; margin: 0 !important; transform: translateY(-104%) rotate(-2deg); transform-origin: 50% 0; box-shadow: 0 2cqw 4cqw rgba(0,0,0,.35); }
.film.is-on .ps-slap { opacity: 0; animation: ps-slap 6s cubic-bezier(.2,.9,.3,1.2) infinite; animation-delay: var(--dl); }
.film.is-on .ps-over { animation: ps-paste 8s cubic-bezier(.6,0,.2,1) infinite; animation-delay: var(--dl); }
.film:not(.is-on) .ps-over { display: none; }
@keyframes ps-slap { 0%, 34% { opacity: 0; transform: rotate(-4deg) scale(1.9); } 40% { opacity: 1; transform: rotate(-11deg) scale(.94); } 45%, 90% { opacity: 1; transform: rotate(-11deg) scale(1); } 97%, 100% { opacity: 0; transform: rotate(-11deg) scale(1); } }
@keyframes ps-paste { 0%, 30% { transform: translateY(-104%) rotate(-2deg); } 44%, 84% { transform: translateY(0) rotate(1.5deg); } 96%, 100% { transform: translateY(-104%) rotate(-2deg); } }
@media (prefers-reduced-motion: reduce) { .film.is-on :is(.ps-slap, .ps-over) { animation: none; } .film.is-on .ps-slap { opacity: 1; } }

/* 4,674 band */
.film__count { position: absolute; left: 0; right: 0; top: 50%; z-index: 5; margin-top: -13svh; height: 26svh; background: var(--black); display: flex; align-items: center; justify-content: center; gap: 2.4vw; transform-origin: 50% 50%; }
.film__count b { font: 800 min(15vw, 22svh)/.8 var(--display); font-variation-settings: "wdth" 75; color: var(--gold); letter-spacing: -.02em; }
.film__count span { font: 800 min(3vw, 5svh)/.95 var(--display); font-variation-settings: "wdth" 85; text-transform: uppercase; }
@media (max-width: 699px) { .film__count { flex-direction: column; gap: 10px; } .film__count b { font-size: 24vw; } .film__count span { font-size: 6vw; text-align: center; } }

/* The line + the law */
/* The line + the law: one headline, one ballot slip, one pen (client pick, 8 Oct; from Design/variations/2026-10-08-law-frame/ballot.html) */
.fm-h2 { font: 800 clamp(44px, 6vw, 80px)/.92 var(--display); font-variation-settings: "wdth" 75; letter-spacing: -.025em; color: var(--paper); text-align: center; text-wrap: balance; }
.fm-ballot { width: 100%; max-width: 600px; margin-top: min(3svh, 28px); text-align: left; }
.fm-ballot__fit { position: relative; transform-origin: 50% 0; transform: scale(var(--fit, 1)); margin-bottom: var(--fit-mb, 0px); }
.fm-slip { position: relative; background: var(--paper); color: var(--ink); border-radius: 3px; box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.fm-slip__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 18px 28px 14px; border-bottom: 2px solid var(--ink); }
.fm-slip__head b { font: 800 22px/1 var(--display); font-variation-settings: "wdth" 85; letter-spacing: -.01em; white-space: nowrap; }
.fm-slip__head span { font: 600 13px/1.2 var(--text); color: rgba(16,22,52,.6); text-align: right; }
.fm-slip__q { padding: 12px 28px 4px; font: 600 15px/1.3 var(--text); color: rgba(16,22,52,.75); text-wrap: pretty; }
.fm-row { display: grid; grid-template-columns: 1fr auto 32px; gap: 14px; align-items: center; width: 100%; text-align: left; padding: 9px 28px; border-bottom: 1px solid rgba(16,22,52,.12); color: var(--ink); background: none; border-left: 0; border-right: 0; border-top: 0; cursor: pointer; font: inherit; transition: background-color .2s; }
.fm-row:hover { background: rgba(16,22,52,.035); }
.fm-row:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; }
.fm-row__n { font: 700 17px/1.25 var(--text); }
.fm-row__n em { font: 600 12px/1 var(--text); font-style: normal; margin-left: 8px; padding: 3px 7px 4px; background: var(--gold); border-radius: 3px; vertical-align: 2px; white-space: nowrap; }
.fm-row__e { display: block; font: 500 13px/1.35 var(--text); color: rgba(16,22,52,.58); margin-top: 1px; }
.fm-box { width: 32px; height: 32px; border: 2px solid var(--ink); border-radius: 2px; display: grid; place-items: center; }
.fm-box svg { width: 24px; height: 24px; overflow: visible; }
.fm-tick { fill: none; stroke: var(--ink); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; transition: opacity .35s; }
.fm-scrib { fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: opacity .35s; }
.fm-blot { fill: var(--ink); transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .22s cubic-bezier(.2,.7,.2,1), opacity .35s; }
.fm-blot.is-on { transform: scale(1); }
.fm-void { font: 700 11px/1 var(--text); letter-spacing: .02em; color: rgba(16,22,52,.55); border: 1.5px solid rgba(16,22,52,.35); border-radius: 3px; padding: 3px 6px 4px; opacity: 0; transform: scale(1.3); transition: opacity .25s, transform .3s cubic-bezier(.2,.7,.2,1); }
.fm-row.is-void .fm-void { opacity: 1; transform: none; }
.fm-row.is-clear :is(.fm-tick, .fm-blot, .fm-scrib, .fm-void) { opacity: 0 !important; transition: opacity .35s; }
.fm-slip__small { margin: 10px 28px 0; padding: 10px 0 16px; border-top: 1px dashed rgba(16,22,52,.3); font: 500 12px/1.55 var(--text); color: rgba(16,22,52,.6); }
.fm-slip__small b { color: var(--ink); font-weight: 700; }
/* The pen: positioned by its tip; film.js sets --x --y --a --s --sh */
.fm-pen { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 3; pointer-events: none; transform: translate(var(--x, 0px), var(--y, 0px)); transition: opacity .25s; }
.fm-pen svg { position: absolute; left: -14px; bottom: -1px; width: 28px; height: 156px; max-width: none; overflow: visible; transform-origin: 50% 100%; transform: rotate(var(--a, 52deg)) scale(var(--s, 1));
  filter: drop-shadow(calc(4px + var(--sh, 0) * 10px) calc(3px + var(--sh, 0) * 12px) calc(2px + var(--sh, 0) * 10px) rgba(5,7,20,calc(.35 - var(--sh, 0) * .1))); }
.fm-snap { margin-top: 14px; font-size: 12.5px; color: rgba(255,252,247,.6); }
.fm-snd { margin-left: 10px; min-height: 28px; padding: 0 10px; border: 1px solid rgba(255,252,247,.22); border-radius: 6px; background: none; color: rgba(255,252,247,.75); font: 600 12px/1 var(--text); cursor: pointer; }
.fm-snd:hover { color: var(--paper); border-color: rgba(255,252,247,.45); }
.fm-snd:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
@media (max-width: 719px) {
  .fm-slip__head, .fm-slip__q, .fm-row { padding-left: 16px; padding-right: 16px; }
  .fm-slip__small { margin-left: 16px; margin-right: 16px; }
  .fm-slip__head { flex-direction: column; gap: 4px; }
  .fm-slip__head span { text-align: left; }
  .fm-row__n { font-size: 16px; }
  .fm-pen.is-rest { opacity: 0; }
}

/* The wipe + countdown beat */
.fm-wipe__k { font: 700 14px/1 var(--text); letter-spacing: .08em; text-transform: uppercase; }
.fm-wipe__big { margin-top: 18px; font: 800 min(12vw, 20svh)/.84 var(--display); font-variation-settings: "wdth" 75; letter-spacing: -.02em; text-transform: uppercase; }
.fm-wipe__left { margin-top: 22px; font: 700 17px/1.3 var(--text); }
.fm-wipe__left b { font-variant-numeric: tabular-nums; }

/* Letterbox + slate + grain */
.film__bars { position: absolute; inset: 0; z-index: 9; pointer-events: none; }
.fm-bar { position: absolute; left: 0; right: 0; height: var(--bar); background: var(--black); }
.fm-bar--t { top: 0; transform-origin: 50% 0; }
.fm-bar--b { bottom: 0; transform-origin: 50% 100%; }
.fm-slate { position: absolute; top: calc(var(--bar) / 2); left: var(--fm-gutter); transform: translateY(-50%); display: flex; align-items: center; gap: 10px; font: 700 13px/1 var(--text); letter-spacing: .06em; color: var(--paper); }
.fm-slate__play { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--gold); color: var(--ink); font-size: 9px; padding-left: 2px; }
.film__grain { position: absolute; inset: -60px; z-index: 10; pointer-events: none; background-image: var(--grain); opacity: .14; mix-blend-mode: overlay; }
.film.is-on .film__grain { animation: fm-grain .9s steps(6) infinite; }
@keyframes fm-grain { 0%{transform:translate(0,0)} 20%{transform:translate(-22px,14px)} 40%{transform:translate(18px,-26px)} 60%{transform:translate(-30px,-8px)} 80%{transform:translate(12px,28px)} 100%{transform:translate(0,0)} }
@media (prefers-reduced-motion: reduce) { .film__grain { animation: none !important; } :is(.fm-row, .fm-tick, .fm-scrib, .fm-blot, .fm-void, .fm-pen) { transition: none !important; } }
.reduce-motion .film__grain { animation: none !important; }

/* client 9 Oct: no "Scene N" slates on the films */
#gov [data-slate], #finale [data-fin-slate] { display: none !important; }