/* V91: Our Story film. One sharp, high-contrast motion briefing that replaces
   the story-cinema, story-graphics, story-motion and story-player-polish layers.
   Neutral ink and white carry the frame; MP2 green carries its edges, lines,
   numbers and progress (V88); blue marks data, amber marks people and attention. Entrances run on every scene and beat; looping motion runs
   only while narration plays (or before it starts) and freezes on pause. */

.story-briefing.story-film {
  --film-bg: #07090d;
  --film-stage: #0c1118;
  --film-panel: #0f1620;
  --film-raise: #151d28;
  --film-line: #eef2f7;
  --film-soft: #a9b5c3;
  --film-mute: #738092;
  --film-dim: #3f5d52;
  --film-edge: #263a34;
  --film-hair: rgba(115, 168, 147, .16);
  --film-green: #73a893;
  --film-green-light: #9ccfb6;
  --film-data: #52b4ff;
  --film-human: #ffb547;
  --film-focus: #ffd58f;
  --film-ease: cubic-bezier(.2, .8, .2, 1);
  --film-sans: var(--mp2-interface-sans, "Segoe UI", system-ui, sans-serif);
  --film-w: min(100%, calc((min(94svh, 64rem) - 15.5rem) * 16 / 9));
  box-sizing: border-box;
  width: min(96vw, 86rem);
  max-width: none;
  height: auto;
  max-height: 94svh;
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid #1c2531;
  border-radius: 1rem;
  background: var(--film-bg);
  color: var(--film-line);
  font-family: var(--film-sans);
  box-shadow: 0 2.5rem 7rem rgba(0, 0, 0, .72);
}

.story-briefing.story-film[open] {
  display: flex;
  flex-direction: column;
  animation: film-open .42s var(--film-ease) both;
}

.story-briefing.story-film::backdrop {
  background: rgba(3, 5, 8, .84);
  backdrop-filter: blur(8px);
}

.story-film *,
.story-film *::before,
.story-film *::after { box-sizing: border-box; }

.story-film :is(button, a, input, [tabindex]):focus-visible {
  outline: 2px solid var(--film-focus);
  outline-offset: 3px;
}

/* Masthead: identity, persistent playback and close. */
.film-bar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4rem;
  padding: .65rem .9rem .65rem 1.2rem;
  border-bottom: 1px solid var(--film-hair);
}

.film-bar__id { display: flex; min-width: 0; align-items: center; gap: .8rem; }
.film-bar__id img { width: 2.4rem; height: 2.4rem; flex: 0 0 auto; object-fit: contain; }
.film-bar__id > div { min-width: 0; }

.film-bar__id span em { font-style: normal; }

.film-bar__id span {
  display: block;
  color: var(--film-soft);
  font-size: .7rem;
  font-weight: 650;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.story-film .film-bar__id h2 {
  margin: .2rem 0 0;
  overflow: hidden;
  color: var(--film-line);
  font-family: var(--film-sans);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -.005em;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.film-bar__actions { display: flex; flex: 0 0 auto; align-items: center; gap: .5rem; }

.film-bar__play,
.film-bar__close,
.film-tool {
  border: 1px solid var(--film-edge);
  background: transparent;
  color: var(--film-line);
  font-family: var(--film-sans);
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease;
}

.film-bar__play {
  display: inline-flex;
  min-height: 2.5rem;
  align-items: center;
  gap: .55rem;
  padding: 0 .9rem 0 .45rem;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 650;
}

.film-bar__play small { color: var(--film-soft); font-size: .75rem; font-variant-numeric: tabular-nums; }

/* The player bar owns playback; its masthead fallback appears only offscreen. */
.story-film:not(.is-controls-offscreen) .film-bar__play {
  display: none;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}

.story-film.is-controls-offscreen .film-bar__play { transition: opacity .2s ease, transform .2s ease; }

.film-bar__close {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border-radius: 50%;
  font-size: 1.45rem;
  line-height: 1;
}

:is(.film-bar__play, .film-bar__close, .film-tool):hover:not(:disabled) { border-color: #4a5869; background: var(--film-raise); }

/* Play/pause glyph is drawn in CSS from the control's pressed state. */
.film-glyph {
  position: relative;
  display: inline-block;
  width: 1.65rem;
  height: 1.65rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--film-line);
}

.film-glyph::before {
  position: absolute;
  inset: 0;
  width: .5rem;
  height: .6rem;
  margin: auto;
  background: var(--film-stage);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  content: "";
  transform: translateX(.07rem);
}

[aria-pressed="true"] > .film-glyph::before {
  width: .5rem;
  height: .56rem;
  background: linear-gradient(90deg, var(--film-stage) 0 34%, transparent 34% 66%, var(--film-stage) 66%);
  clip-path: none;
  transform: none;
}

.film-glyph--ink { background: var(--film-stage); }
.film-glyph--ink::before { background: var(--film-line); }
[aria-pressed="true"] > .film-glyph--ink::before { background: linear-gradient(90deg, var(--film-line) 0 34%, transparent 34% 66%, var(--film-line) 66%); }

/* Scroll body. */
.film-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1rem clamp(.75rem, 2vw, 1.5rem);
  scroll-behavior: smooth;
}

.story-film .story-cinema {
  width: var(--film-w);
  margin: 0 auto;
  container: film / inline-size;
}

/* The stage: a fixed 16:9 frame whose composition scales like video. */
.film-stage {
  position: relative;
  display: grid;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--film-edge);
  border-bottom: 0;
  border-radius: .85rem .85rem 0 0;
  background:
    radial-gradient(circle at 1px 1px, rgba(115, 168, 147, .09) 1px, transparent 0) 0 0 / 28px 28px,
    radial-gradient(120% 95% at 72% 42%, #111d1f 0%, #0c1317 58%, #080b0e 100%);
  isolation: isolate;
}

.film-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.film-tag {
  position: absolute;
  z-index: 8;
  top: clamp(.7rem, 1.9cqw, 1.5rem);
  right: clamp(.8rem, 2.3cqw, 1.8rem);
  display: flex;
  align-items: center;
  gap: .6em;
  margin: 0;
  color: var(--film-mute);
  font-size: clamp(.64rem, .88cqw, .82rem);
  font-weight: 650;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.film-tag span { color: var(--film-green); font-weight: 800; }
.film-tag b { font-weight: 650; }
.film-tag em { padding-left: .6em; border-left: 1px solid var(--film-dim); color: var(--film-soft); font-style: normal; font-variant-numeric: tabular-nums; }
.film-tag i { color: var(--film-line); font-style: normal; }

.film-scene {
  position: relative;
  z-index: 1;
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility 0s linear .3s;
  --t0: .5s;
}

.film-scene.is-active { z-index: 2; opacity: 1; visibility: visible; transition-delay: 0s; }

/* Chapter slate: a short wipe that titles each chapter. */
.film-slate {
  position: absolute;
  z-index: 7;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 2.4cqw;
  padding-left: 6cqw;
  background: linear-gradient(100deg, #101823 0%, #0b1017 100%);
  clip-path: inset(0 0 0 100%);
  pointer-events: none;
}

.film-slate span { color: var(--film-green); font-size: clamp(2.6rem, 9cqw, 8rem); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.04em; line-height: 1; }
.film-slate strong { color: var(--film-line); font-size: clamp(1.4rem, 4.2cqw, 3.6rem); font-weight: 750; letter-spacing: -.02em; }

.film-scene.is-active .film-slate { animation: film-slate .95s cubic-bezier(.7, 0, .3, 1) both; }
.film-scene.is-active .film-slate > * { animation: film-slate-type .95s var(--film-ease) both; }

/* Copy column. */
.film-text {
  position: absolute;
  z-index: 3;
  top: 5cqw;
  bottom: 9.5cqw;
  left: 5.5cqw;
  display: flex;
  width: 35cqw;
  flex-direction: column;
  justify-content: center;
  gap: 2.3cqw;
}

.film-copies { display: grid; }
.film-copy {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility 0s linear .25s;
}
.film-copy.is-active { opacity: 1; visibility: visible; transition-delay: 0s; }
.film-copy[data-story-scene-beat="1"] { --t0: .1s; }

.film-copy > span {
  display: flex;
  align-items: center;
  gap: .7em;
  margin-bottom: 1.1cqw;
  color: var(--film-soft);
  font-size: clamp(.68rem, 1cqw, .95rem);
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.35;
  text-transform: uppercase;
}

.film-copy > span::before {
  width: 2.2em;
  height: 2px;
  flex: 0 0 auto;
  background: var(--film-green);
  content: "";
  transform-origin: left center;
}

.film-copy > strong {
  display: block;
  color: var(--film-line);
  font-size: clamp(1.35rem, 3.45cqw, 3.2rem);
  font-weight: 750;
  letter-spacing: -.025em;
  line-height: 1.07;
  text-wrap: balance;
}

.film-copy .w { display: inline-block; }

/* In-scene source chips stay small: a credit, not a second stage. */
.film-source {
  display: grid;
  grid-template-columns: 7.2cqw minmax(0, 1fr);
  align-items: center;
  gap: 1.1cqw;
  max-width: 30cqw;
  padding: .55cqw;
  border: 1px solid var(--film-edge);
  border-left: 2px solid var(--film-green);
  border-radius: .6cqw;
  background: rgba(12, 17, 24, .82);
  color: var(--film-line);
  text-decoration: none;
  transition: border-color .18s ease, background-color .18s ease;
}

.film-source:hover { border-color: #4a5869; background: var(--film-raise); }
.film-source > :is(img, svg) { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; border-radius: .35cqw; background: #fff; object-fit: cover; }
.film-source > span { display: grid; min-width: 0; gap: .15em; font-size: clamp(.7rem, .98cqw, .88rem); line-height: 1.3; }
.film-source small { color: var(--film-mute); font-size: 1em; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.film-source strong { font-size: 1.12em; font-weight: 700; line-height: 1.2; }
.film-source em { color: var(--film-soft); font-style: normal; }
.film-source b { color: var(--film-green-light); font-weight: 700; }

/* Illustration. */
.film-art {
  position: absolute;
  z-index: 2;
  top: 3.6cqw;
  right: 1.8cqw;
  bottom: 8.6cqw;
  left: 42cqw;
}

.film-art svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform-origin: 50% 50%;
}

/* Direct soundtrack progress: no independent transition continues after pause. */
.story-cinema[data-story-visual-mode="narration"] .film-scene.is-active .film-art svg {
  transform: scale(calc(1 + var(--story-segment-progress, 0) * .05));
}

.film-art .ln { fill: none; stroke: var(--film-line); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.film-art .ln-dim { stroke: var(--film-dim); }
.film-art .ln-data { stroke: var(--film-data); }
.film-art .ln-human { stroke: var(--film-human); }
.film-art .ln-green { stroke: var(--film-green); }
.film-art .ln-bold { stroke-width: 3.4; }
.film-art .pnl { fill: var(--film-panel); }
.film-art .fill-data { fill: var(--film-data); }
.film-art .fill-human { fill: var(--film-human); }
.film-art .fill-line { fill: var(--film-line); }
.film-art .art-soldier,
.film-art .u-line { color: var(--film-line); }
.film-art .u-data { color: var(--film-data); }
.film-art .u-human { color: var(--film-human); }

.film-art text { font-family: var(--film-sans); }
.film-art .lbl { fill: var(--film-soft); font-size: 20px; font-weight: 600; letter-spacing: .01em; }
.film-art .lbl-human { fill: var(--film-human); }
.film-art .lbl-data { fill: var(--film-data); }
.film-art .lbl-ink { fill: #12100a; font-weight: 750; }
.film-art .coa-hub { fill: var(--film-line); font-size: 30px; font-weight: 800; letter-spacing: -.01em; }

.film-art .fx-draw,
.film-art .org-ring { stroke-dasharray: 1; stroke-dashoffset: 0; }
.film-art .org-cell { fill: transparent; stroke: var(--film-data); stroke-width: 1.6; }
.film-art :is(.fx-pop, .fx-rise, .fx-in, .lp) { transform-box: fill-box; transform-origin: center; }

/* Beats: layer-level visibility, independent from the entrance animations. */
.film-art .b0,
.film-art .b1,
.film-art .org-conditions,
.film-art .org-context,
.film-art .org-links,
.film-art .sig-tile,
.film-art .sig-grid { transition: opacity .4s ease, transform .6s var(--film-ease); }
.film-scene:not([data-story-beat="1"]) .film-art .b1 { opacity: 0; }
.film-scene[data-story-beat="1"] .film-art .b0 { opacity: 0; }

.film-scene--origin[data-story-beat="1"] :is(.org-conditions, .org-context, .org-links) { opacity: .22; }
.film-scene--signal[data-story-beat="1"] .sig-tile:not(.sig-tile--hit) { opacity: .28; }
.film-scene--signal .sig-tile--hit { transition: color .4s ease; }
.film-scene--signal.is-active .sig-tile--hit { animation: film-tint .5s ease calc(var(--t0) + 1.9s) both; }

/* Captions: subtitle lines timed to the voice. */
.film-caption {
  position: absolute;
  z-index: 5;
  right: 6cqw;
  bottom: 2.4cqw;
  left: 6cqw;
  display: grid;
  justify-items: center;
  gap: .45em;
  text-align: center;
  pointer-events: none;
  transition: opacity .3s ease;
}

.film-caption span {
  color: var(--film-green-light);
  font-size: clamp(.6rem, .78cqw, .75rem);
  font-weight: 750;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.film-caption__line {
  max-width: 62cqw;
  font-size: clamp(.9rem, 1.42cqw, 1.3rem);
  line-height: 1.62;
  text-wrap: balance;
}

.film-caption p {
  display: inline;
  margin: 0;
  padding: .16em .55em .2em;
  border-radius: .3em;
  background: rgba(5, 8, 12, .84);
  color: #fff;
  font-weight: 550;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.film-progress {
  position: absolute;
  z-index: 6;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: rgba(226, 234, 244, .08);
}

.film-progress span { display: block; width: 0; height: 100%; background: var(--film-green); }

/* Player bar: the single set of narration controls. */
.film-controls {
  display: grid;
  grid-template-areas:
    "play chapters time tools"
    "status status status status";
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: .45rem 1.1rem;
  padding: .8rem 1rem .7rem;
  border: 1px solid var(--film-edge);
  border-radius: 0 0 .85rem .85rem;
  background: var(--film-stage);
}

.film-controls__play {
  display: inline-flex;
  grid-area: play;
  min-width: 12.2rem;
  min-height: 2.75rem;
  align-items: center;
  gap: .6rem;
  padding: .3rem 1.05rem .3rem .4rem;
  border: 0;
  border-radius: 999px;
  background: var(--film-line);
  color: #0b1017;
  font-family: var(--film-sans);
  font-size: .88rem;
  font-weight: 750;
  cursor: pointer;
  transition: background-color .18s ease;
}

.film-controls__play:hover { background: #fff; }

.film-chapters { display: grid; grid-area: chapters; min-width: 0; gap: .4rem; }
.film-chapters nav { display: grid; grid-template-columns: var(--story-chapter-widths, repeat(5, minmax(0, 1fr))); }

.film-chapters button {
  display: flex;
  min-width: 0;
  min-height: 1.9rem;
  align-items: center;
  gap: .4em;
  padding: 0 .4rem 0 0;
  border: 0;
  background: none;
  color: var(--film-mute);
  font-family: var(--film-sans);
  font-size: .8rem;
  font-weight: 650;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: color .18s ease;
}

.film-chapters button span { color: var(--film-dim); font-size: .92em; font-variant-numeric: tabular-nums; transition: color .18s ease; }
.film-chapters button:hover { color: var(--film-line); }
.film-chapters button.is-complete { color: var(--film-soft); }
.film-chapters button.is-active { color: var(--film-line); }
.film-chapters button.is-active span { color: var(--film-green-light); }

.film-track {
  position: relative;
  height: 4px;
  overflow: hidden;
  border-radius: 2px;
  background: #222c39;
}

.film-track span {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--story-progress, 0) * 100%);
  background: linear-gradient(90deg, #4f8b73, var(--film-green-light));
}

.film-track::after {
  position: absolute;
  inset: 0;
  background: var(--story-track-dividers, repeating-linear-gradient(90deg, transparent 0 calc(20% - 3px), var(--film-stage) calc(20% - 3px) 20%));
  content: "";
}

.film-controls__time { grid-area: time; margin: 0; color: var(--film-soft); font-size: .85rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.film-controls__tools { display: flex; grid-area: tools; gap: .4rem; }

.film-tool {
  display: inline-flex;
  min-height: 2.3rem;
  align-items: center;
  gap: .45em;
  padding: 0 .75rem;
  border-radius: .5rem;
  font-size: .78rem;
  font-weight: 650;
}

.film-tool::before { color: var(--film-green-light); font-size: 1em; line-height: 1; }
.film-tool--source::before { content: "\25A3"; }
.film-tool--restart::before { content: "\21BA"; font-size: 1.15em; }
.film-tool--expand::before { content: "\2922"; }
.film-tool:disabled { opacity: .36; cursor: not-allowed; }

.film-controls__status { grid-area: status; margin: 0; color: var(--film-mute); font-size: .75rem; line-height: 1.4; }
.film-controls__status span { color: var(--film-soft); font-weight: 650; }
.film-controls__status small { font-size: inherit; }

/* Expanded view: the stage and its controls fill the screen. */
.story-briefing.story-film.is-theater {
  width: 100vw;
  height: 100svh;
  max-height: none;
  border: 0;
  border-radius: 0;
  --film-w: min(100%, calc((100svh - 15.5rem) * 16 / 9));
}

.story-film.is-theater .film-scroll { display: grid; align-content: center; padding-bottom: 1rem; }

/* Source viewer (nested dialog). */
.story-film .story-source-viewer {
  box-sizing: border-box;
  width: min(92vw, 64rem);
  max-width: none;
  max-height: 92svh;
  margin: auto;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--film-edge);
  border-radius: .8rem;
  background: var(--film-bg);
  color: var(--film-line);
  box-shadow: 0 2rem 6rem rgba(0, 0, 0, .65);
}

.story-film .story-source-viewer::backdrop { background: rgba(3, 5, 8, .86); backdrop-filter: blur(8px); }
.story-film .story-source-viewer__header { position: sticky; z-index: 1; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--film-hair); background: var(--film-bg); }
.story-film .story-source-viewer__header p { margin: 0 0 .3rem; color: var(--film-soft); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.story-film .story-source-viewer__header h2 { margin: 0; color: var(--film-line); font-family: var(--film-sans); font-size: clamp(1.1rem, 2.5vw, 1.5rem); font-weight: 700; line-height: 1.2; }
.story-film .story-source-viewer__tools { display: flex; flex: 0 0 auto; align-items: center; gap: .6rem; }
.story-film :is(.story-source-viewer__zoom, .story-source-viewer__close) { border: 1px solid var(--film-edge); background: transparent; color: var(--film-line); font-family: var(--film-sans); cursor: pointer; }
.story-film .story-source-viewer__zoom { min-height: 2.75rem; padding: .5rem .8rem; border-radius: .5rem; font-size: .78rem; font-weight: 650; }
.story-film .story-source-viewer__close { display: grid; width: 2.75rem; height: 2.75rem; place-items: center; border-radius: 50%; font-size: 1.4rem; line-height: 1; }
.story-film :is(.story-source-viewer__zoom, .story-source-viewer__close):hover { border-color: #4a5869; background: var(--film-raise); }
.story-film :is(.story-source-viewer__note, .story-source-viewer__zoom-note) { margin: .8rem 1.25rem; color: var(--film-soft); font-size: .8125rem; line-height: 1.5; }
.story-film .story-source-viewer__zoom-note[hidden],
.story-film .story-source-viewer figure[hidden] { display: none; }
.story-film .story-source-viewer figure { margin: 0 1.25rem 1.25rem; }
.story-film .story-source-viewer__media { max-height: 65svh; overflow: auto; overscroll-behavior: contain; border-radius: .35rem; background: #fff; }
.story-film .story-source-viewer__media > :is(img, svg) { display: block; width: 100%; height: auto; max-height: 65svh; border: 0; background: #fff; object-fit: contain; }
.story-film .story-source-viewer__media > svg { aspect-ratio: 900 / 710; }
.story-film .story-source-viewer.is-zoomed .story-source-viewer__media > :is(img, svg) { width: max(100%, 900px); max-width: none; max-height: none; }
.story-film .story-source-viewer figcaption { display: grid; gap: .6rem; padding: .9rem 0 0; color: var(--film-soft); font-size: .8125rem; line-height: 1.5; }
.story-film .story-source-viewer figcaption p { margin: 0; }
.story-film .story-source-viewer figcaption strong { color: var(--film-line); font-weight: 650; }
.story-film .story-source-viewer figcaption > div { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; }
.story-film .story-source-viewer a { color: var(--film-line); text-underline-offset: .2rem; }

/* ---------- Motion ---------- */

/* Entrances: scene layers build when a chapter opens; beat-two layers build
   when their narration part begins. */
.film-scene.is-active .film-copy.is-active > span { animation: film-rise .55s var(--film-ease) calc(var(--t0) - .05s) both; }
.film-scene.is-active .film-copy.is-active > span::before { animation: film-bar .6s var(--film-ease) var(--t0) both; }
.film-scene.is-active .film-copy.is-active .w { animation: film-word .62s var(--film-ease) calc(var(--t0) + .08s + var(--i, 0) * 50ms) both; }
.film-scene.is-active .film-source { animation: film-rise .65s var(--film-ease) calc(var(--t0) + 1s) both; }

.film-scene.is-active .fx-rise { animation: film-rise .65s var(--film-ease) calc(var(--t0) + var(--d, 0s)) both; }
.film-scene.is-active .fx-pop { animation: film-pop .6s var(--film-ease) calc(var(--t0) + var(--d, 0s)) both; }
.film-scene.is-active .fx-fade { animation: film-fade .8s ease calc(var(--t0) + var(--d, 0s)) both; }
.film-scene.is-active .fx-draw { animation: film-draw .85s var(--film-ease) calc(var(--t0) + var(--d, 0s)) both; }
.film-scene.is-active .fx-in { animation: film-in .75s var(--film-ease) calc(var(--t0) + var(--d, 0s)) both; }
.film-art .fx-in--tl { --fx-x: -34px; --fx-y: -26px; }
.film-art .fx-in--tr { --fx-x: 34px; --fx-y: -26px; }
.film-art .fx-in--bl { --fx-x: -34px; --fx-y: 26px; }
.film-art .fx-in--br { --fx-x: 34px; --fx-y: 26px; }
.film-art .fx-in--l { --fx-x: -46px; --fx-y: 0px; }
.film-art .fx-in--r { --fx-x: 46px; --fx-y: 0px; }

.film-art .b1 { --t0: .12s; }
.film-scene.is-active .org-ring { animation: film-ring 1.5s var(--film-ease) .15s both; }
.film-scene:not([data-story-beat="1"]) .film-art .b1 :is(.fx-rise, .fx-pop, .fx-fade, .fx-draw, .fx-in, .org-ring) { animation: none; }

/* Finite cues: supporting activity resolves instead of competing with the voice. */
.film-scene.is-active .lp-flow { stroke-width: 5; stroke-dasharray: .07 2; animation: film-flow 1.9s linear calc(var(--t0) + 1.5s + var(--ld, 0s)) 2 both; }
.film-scene.is-active .ln-packet { stroke-dasharray: .05 2; }
.film-scene.is-active .org-cell { animation: film-cell 2.7s ease calc(var(--t0) + .9s + var(--ld, 0s)) 1 both; }
.film-scene.is-active .org-hand { transform-box: view-box; transform-origin: 180px 186px; animation: film-spin 6s linear calc(var(--t0) + .6s) 1; }
.film-scene.is-active .org-scan { animation: film-scan 3.6s ease-in-out calc(var(--t0) + 1.6s) 1 both; }
.film-scene.is-active .org-dot { animation: film-dot 1.2s ease calc(var(--t0) + 1.2s + var(--ld, 0s)) 1 both; }
.film-scene.is-active :is(.coa-pulse, .mis-pulse, .sig-pulse) { animation: film-pulse 2.6s ease-out calc(var(--t0) + 1.6s + var(--ld, 0s)) 1 both; }
.film-scene.is-active .coa-step { --glow: #12263a; animation: film-glow 2.8s ease calc(var(--t0) + 1.4s + var(--ld, 0s)) 1; }
.film-scene.is-active .coa-step--human { --glow: #2c210c; }
.film-scene.is-active .sig-talk { animation: film-talk 3.2s ease calc(var(--t0) + 1.2s) 1 both; }
.film-scene.is-active .sig-talk--reply { animation-delay: calc(var(--t0) + 2.8s); }
.film-scene.is-active .care-lens { animation: film-blink 1.8s ease calc(var(--t0) + .9s) 1 both; }
.film-scene.is-active :is(.care-orbit, .mis-orbit) { transform-box: view-box; animation: film-spin 6s linear calc(var(--t0) + .9s) 1; }
.film-scene.is-active .care-orbit { transform-origin: 360px 268px; }
.film-scene.is-active .mis-orbit { transform-origin: 320px 236px; animation-duration: 8s; }
.film-scene.is-active .care-node { --glow: #2c210c; animation: film-glow 6s ease calc(var(--t0) + .9s + var(--ld, 0s)) 1; }
.film-scene.is-active .mis-node { --glow: #1a2532; animation: film-glow 8s ease calc(var(--t0) + .9s + var(--ld, 0s)) 1; }

.film-scene:not([data-story-beat="1"]) .film-art .b1 .lp,
.film-scene[data-story-beat="1"] .film-art .b0 .lp { animation: none; }

/* Finite entrances, headlines, slates and loops share the same motion gate. */
.story-film .story-cinema.is-playing .film-scene *,
.story-film .story-cinema.is-playing .film-scene *::before,
.story-film .story-cinema.is-preview .film-scene *,
.story-film .story-cinema.is-preview .film-scene *::before { animation-play-state: running; }
.story-film .story-cinema:not(.is-playing):not(.is-preview) .film-scene *,
.story-film .story-cinema:not(.is-playing):not(.is-preview) .film-scene *::before { animation-play-state: paused; }
.story-film .story-cinema.is-resetting-entrances .film-scene *,
.story-film .story-cinema.is-resetting-entrances .film-scene *::before { animation: none !important; }

@keyframes film-open { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes film-slate {
  0% { clip-path: inset(0 100% 0 0); }
  30%, 62% { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 0 0 100%); }
}
@keyframes film-slate-type { 0% { opacity: 0; transform: translateX(-2.5cqw); } 35%, 70% { opacity: 1; transform: none; } 100% { opacity: 1; transform: translateX(2cqw); } }
@keyframes film-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes film-word { from { opacity: 0; transform: translateY(.42em); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes film-bar { from { transform: scaleX(0); } to { transform: none; } }
@keyframes film-pop { 0% { opacity: 0; transform: scale(.55); } 62% { opacity: 1; transform: scale(1.06); } 100% { opacity: 1; transform: none; } }
@keyframes film-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes film-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes film-in { from { opacity: 0; transform: translate(var(--fx-x, 0), var(--fx-y, 0)); } to { opacity: 1; transform: none; } }
@keyframes film-ring {
  0% { opacity: 1; stroke-dashoffset: 1; transform: none; }
  38% { opacity: 1; stroke-dashoffset: 0; transform: none; }
  62% { opacity: 1; stroke-dashoffset: 0; transform: none; }
  100% { opacity: 0; stroke-dashoffset: 0; transform: scale(2.4); }
}
@keyframes film-tint { to { color: var(--film-human); } }
@keyframes film-flow { from { stroke-dashoffset: .07; } to { stroke-dashoffset: -1; } }
@keyframes film-cell { 0%, 100% { fill: transparent; } 18%, 55% { fill: var(--film-data); } }
@keyframes film-spin { to { transform: rotate(360deg); } }
@keyframes film-scan { 0% { opacity: 0; transform: translateX(0); } 18%, 82% { opacity: 1; } 100% { opacity: 0; transform: translateX(266px); } }
@keyframes film-dot { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-4px); } }
@keyframes film-pulse { from { opacity: .75; transform: none; } to { opacity: 0; transform: scale(1.55); } }
@keyframes film-glow { 0%, 30%, 100% { fill: var(--film-panel); stroke-width: 2.6; } 6%, 22% { fill: var(--glow); stroke-width: 4; } }
@keyframes film-talk { 0%, 42% { opacity: 1; } 50%, 92% { opacity: .2; } 100% { opacity: 1; } }
@keyframes film-blink { 0%, 100% { opacity: 1; transform: none; } 50% { opacity: .35; transform: scale(.7); } }

/* ---------- Compact stages: stack copy, art and captions. ---------- */
@container film (max-width: 619px) {
  .film-stage {
    grid-template-rows: auto auto;
    aspect-ratio: auto;
    border-radius: .7rem .7rem 0 0;
    background:
      radial-gradient(circle at 1px 1px, rgba(226, 234, 244, .05) 1px, transparent 0) 0 0 / 24px 24px,
      radial-gradient(140% 80% at 60% 45%, #121c29 0%, #0c1118 60%, #080b10 100%);
  }

  .film-tag { top: .8rem; right: .85rem; font-size: .6rem; letter-spacing: .1em; }

  .film-scene {
    display: grid;
    grid-template-areas: "copy" "art" "source";
    grid-row: 1;
    align-content: start;
    gap: .9rem;
    padding: 2.6rem 1rem 1rem;
  }

  .film-text,
  .film-art { position: static; width: auto; }
  .film-text { display: contents; }
  .film-copies { grid-area: copy; }
  .film-art { grid-area: art; width: 100%; aspect-ratio: 4 / 3; }
  .film-source { grid-area: source; max-width: none; grid-template-columns: 4.6rem minmax(0, 1fr); gap: .75rem; padding: .45rem; border-radius: .5rem; }
  .film-source > :is(img, svg) { border-radius: .3rem; }
  .film-source > span { font-size: .75rem; }

  .film-art .lbl { font-size: 22px; }
  .film-copy > span { margin-bottom: .55rem; font-size: .66rem; }
  .film-copy > strong { font-size: clamp(1.45rem, 7.2cqw, 2.1rem); }

  .film-slate { gap: 1rem; padding-left: 1.4rem; }
  .film-slate span { font-size: 3.4rem; }
  .film-slate strong { font-size: 1.6rem; }

  .film-caption { position: relative; right: auto; bottom: auto; left: auto; grid-area: 2 / 1; }
  .film-caption { min-height: 6.6rem; align-content: center; padding: .9rem 1rem 1.1rem; border-top: 1px solid var(--film-hair); background: #080c12; }
  .film-caption__line { max-width: none; font-size: 1rem; line-height: 1.45; }
  .film-caption p { padding: 0; background: none; }
}

/* ---------- Viewport adjustments ---------- */
/* Player bar follows the player's own width, not the viewport. */
@container film (max-width: 940px) {
  .film-controls {
    grid-template-areas:
      "play time tools"
      "chapters chapters chapters"
      "status status status";
    grid-template-columns: auto 1fr auto;
    gap: .6rem .7rem;
    padding: .75rem;
  }

  .film-controls__time { justify-self: end; }
  .film-tool { padding: 0 .6rem; }
}

@container film (max-width: 520px) {
  .film-controls { grid-template-areas: "play tools" "chapters chapters" "time time" "status status"; grid-template-columns: minmax(0, 1fr) auto; }
  .film-controls__time { justify-self: end; }
  .film-controls__play { min-width: 0; justify-self: start; white-space: nowrap; }
  .film-controls__play span { font-size: .84rem; }
  .film-tool { min-width: 2.3rem; justify-content: center; padding: 0; font-size: 0; gap: 0; }
  .film-tool::before { font-size: .95rem; }
  .film-tool--restart::before { font-size: 1.1rem; }
  .film-chapters button { justify-content: center; padding: 0; font-size: .72rem; }
  .film-chapters button span { display: none; }
}

@media (max-width: 700px) {
  .story-briefing.story-film,
  .story-briefing.story-film.is-theater {
    width: 100vw;
    height: 100svh;
    max-height: none;
    border: 0;
    border-radius: 0;
    --film-w: 100%;
  }

  .film-bar { min-height: 3.6rem; padding: .55rem .65rem .55rem .85rem; }
  .film-bar__id img { width: 2rem; height: 2rem; }
  .film-bar__id span { font-size: .62rem; letter-spacing: .1em; }
  .story-film .film-bar__id h2 { display: none; }
  .film-scroll { padding: .6rem .6rem 0; }
  .film-bar__id span em { display: none; }
  .story-film .story-source-viewer { width: calc(100vw - 1rem); max-height: 96svh; border-radius: .5rem; }
  .story-film .story-source-viewer__header { flex-wrap: wrap; gap: .75rem; padding: .85rem; }
  .story-film .story-source-viewer__header > div:first-child { flex: 1 1 10rem; }
  .story-film :is(.story-source-viewer__note, .story-source-viewer__zoom-note) { margin-inline: .85rem; }
  .story-film .story-source-viewer figure { margin-inline: .85rem; }
  .story-film .story-source-viewer__media > :is(img, svg) { max-height: none; }
}

@media (max-width: 380px) {
  .film-controls__play span { display: none; }
  .film-controls__play { padding-right: .4rem; }
}

/* A narrow masthead keeps the identity readable beside its playback fallback. */
@media (max-width: 520px) {
  .film-bar__play {
    display: inline-grid;
    grid-template-areas: "glyph label" "clock clock";
    grid-template-columns: 1.25rem auto;
    justify-items: center;
    gap: .12rem .35rem;
    padding: .3rem .65rem;
    border-radius: .8rem;
  }
  .film-bar__play .film-glyph { grid-area: glyph; width: 1.25rem; height: 1.25rem; }
  .film-bar__play > span { grid-area: label; }
  .film-bar__play small { grid-area: clock; font-size: .67rem; line-height: 1.15; white-space: nowrap; }
}

/* Voice-led hierarchy. The controller advances these three focal states. */
.film-art::after { display: none; }
.story-film [data-story-script][hidden],
.story-film .film-ending[hidden] { display: none; }
.story-cinema[data-story-cue="0"] .film-scene.is-active .film-source,
.story-cinema[data-story-cue="1"] .film-scene.is-active .film-source { opacity: 0; visibility: hidden; animation: none; }
.story-cinema[data-story-cue="2"] .film-scene.is-active .film-source { animation: film-rise .45s var(--film-ease) both; }
.story-cinema[data-story-cue="0"] .film-scene--origin[data-story-beat="0"] :is(.org-unit, .org-context, .org-links) { opacity: .2; }
.story-cinema[data-story-cue="1"] .film-scene--origin[data-story-beat="0"] .org-context { opacity: .25; }
.story-cinema[data-story-cue="0"] .film-scene--coalition[data-story-beat="0"] .b0 > .fx-in { filter: opacity(.22); }
.story-cinema[data-story-cue="1"] .film-scene--coalition[data-story-beat="0"] .b0 > .fx-in:nth-of-type(n+4) { filter: opacity(.3); }
.story-cinema[data-story-cue="0"] .film-scene--coalition[data-story-beat="1"] .b1 > .fx-pop:nth-of-type(n+2),
.story-cinema[data-story-cue="1"] .film-scene--coalition[data-story-beat="1"] .b1 > .fx-pop:nth-of-type(n+3) { filter: opacity(.22); }
.story-cinema[data-story-cue="0"] .film-scene--signal[data-story-beat="0"] .b0 > .fx-pop { filter: opacity(.22); }
.story-cinema:is([data-story-cue="0"], [data-story-cue="1"]) .film-scene--signal[data-story-beat="0"] .sig-grid { opacity: .22; }
.story-cinema[data-story-cue="0"] .film-scene--mission[data-story-beat="0"] .b0 > .fx-in { filter: opacity(.2); }
.story-cinema[data-story-cue="1"] .film-scene--mission[data-story-beat="0"] .b0 > .fx-in:nth-of-type(n+6) { filter: opacity(.3); }
.story-cinema[data-story-cue="0"] .film-scene--care[data-story-beat="0"] .care-beam { filter: opacity(.2); }
.story-cinema[data-story-cue="0"] .film-scene--origin[data-story-beat="1"] .b1 > :is(.ln-bold, .fx-pop) { filter: opacity(.22); }
.story-cinema[data-story-cue="0"] .film-scene--signal[data-story-beat="1"] .b1 > .fx-rise,
.story-cinema[data-story-cue="0"] .film-scene--signal[data-story-beat="1"] .sig-talk { filter: opacity(.22); }
.story-cinema[data-story-cue="0"] .film-scene--care[data-story-beat="1"] .b1 > .fx-pop:nth-of-type(n+3),
.story-cinema[data-story-cue="1"] .film-scene--care[data-story-beat="1"] .b1 > .fx-pop:nth-of-type(n+4) { filter: opacity(.22); }
.story-cinema[data-story-cue="0"] .film-scene--mission[data-story-beat="1"] .b1 > .fx-pop:nth-of-type(n+3),
.story-cinema[data-story-cue="1"] .film-scene--mission[data-story-beat="1"] .b1 > .fx-pop:nth-of-type(n+4) { filter: opacity(.22); }
/* A shared green stroke connects the chapter slates and the learning system. */
.film-scene::after {
  position: absolute;
  z-index: 8;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--film-green-light);
  content: "";
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: left;
}
.film-scene.is-active::after { animation: film-handoff .72s var(--film-ease) both; }
.story-cinema:not(.is-playing):not(.is-preview) .film-scene::after { animation-play-state: paused; }
.story-cinema.is-resetting-entrances .film-scene::after { animation: none !important; }
@keyframes film-handoff { 0% { opacity: 1; transform: scaleX(0); } 65% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1); } }

/* The ending stays in the screen and appears only after the final voice ends. */
.film-ending {
  position: absolute;
  z-index: 10;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 1.15rem;
  padding: 2rem;
  background: radial-gradient(ellipse at 50% 30%, #162722 0%, #0b1113 60%, #07090d 100%);
  text-align: center;
}
.film-ending > img { width: clamp(3.2rem, 6cqw, 5rem); height: auto; object-fit: contain; }
.film-ending > p { margin: 0; color: var(--film-green-light); font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.story-film .film-ending h3 { max-width: 22ch; margin: 0; color: var(--film-line); font-family: var(--film-sans); font-size: clamp(1.75rem, 4.3cqw, 3.3rem); line-height: 1.08; letter-spacing: -.025em; text-wrap: balance; }
.film-ending__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: .35rem; }
.film-ending__actions a { display: inline-flex; min-height: 2.9rem; align-items: center; justify-content: center; gap: .8rem; padding: .7rem 1.2rem; border: 1px solid var(--film-green); border-radius: .55rem; background: transparent; color: var(--film-line); font-size: .93rem; font-weight: 700; text-decoration: none; }
.film-ending__actions a.film-ending__navigator { border-color: var(--film-green-light); background: var(--film-green-light); color: #07110d; }
.film-ending__actions a:hover { border-color: #c1e8d6; background: #1c3028; }
.film-ending__actions a.film-ending__navigator:hover { background: #c1e8d6; }
.film-ending > button { min-height: 2.75rem; padding: .5rem .8rem; border: 0; background: none; color: var(--film-soft); font-family: var(--film-sans); font-size: .85rem; text-underline-offset: .2em; cursor: pointer; }
.film-ending > button:hover { color: var(--film-line); text-decoration: underline; }
.story-cinema.is-complete :is(.film-scene, .film-caption, .film-tag) { display: none; }

/* Disclosures and source links are a deliberate, compact topbar destination. */
.film-bar__info { min-height: 2.5rem; padding: .4rem .65rem; border: 1px solid var(--film-edge); border-radius: .55rem; background: transparent; color: var(--film-soft); font-family: var(--film-sans); font-size: .78rem; font-weight: 650; cursor: pointer; }
.film-bar__info:hover { border-color: var(--film-green); background: var(--film-raise); color: var(--film-line); }
.story-film .film-info { box-sizing: border-box; width: min(92vw, 38rem); max-width: none; max-height: 90svh; margin: auto; padding: 0; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--film-edge); border-radius: .8rem; background: var(--film-bg); color: var(--film-line); font-family: var(--film-sans); box-shadow: 0 2rem 6rem rgba(0, 0, 0, .65); }
.story-film .film-info::backdrop { background: rgba(3, 5, 8, .86); backdrop-filter: blur(8px); }
.film-info__header { position: sticky; z-index: 1; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--film-hair); background: var(--film-bg); }
.story-film .film-info__header h2 { margin: 0; color: var(--film-line); font-family: var(--film-sans); font-size: 1.25rem; line-height: 1.2; }
.film-info__close { display: grid; width: 2.75rem; height: 2.75rem; flex: 0 0 auto; place-items: center; border: 1px solid var(--film-edge); border-radius: 50%; background: transparent; color: var(--film-line); font-size: 1.4rem; cursor: pointer; }
.film-info__close:hover { border-color: var(--film-green); background: var(--film-raise); }
.film-info__body { display: grid; gap: 1.25rem; padding: 1.2rem; font-size: .9rem; line-height: 1.6; }
.film-info__body p { margin: 0; color: var(--film-soft); }
.film-info__body strong { color: var(--film-line); }
.film-info__body a { color: var(--film-green-light); text-underline-offset: .2em; }
.film-info__sources { display: grid; gap: .55rem; border-top: 1px solid var(--film-hair); padding-top: 1rem; }
.story-film .film-info__sources h3 { margin: 0 0 .2rem; color: var(--film-line); font-family: var(--film-sans); font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.film-info__sources a { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .3rem 1rem; padding: .6rem .75rem; border: 1px solid var(--film-edge); border-radius: .45rem; text-decoration: none; }
.film-info__sources a:hover { background: var(--film-raise); border-color: var(--film-green); }
.film-info__sources span { color: var(--film-mute); font-size: .8rem; }

/* Portrait layout uses the diagram as a graphic, with a readable separate key. */
@container film (max-width: 619px) {
  .film-scene { gap: .65rem; padding: 2.5rem .85rem .85rem; }
  .film-copies { min-height: 5.5rem; align-items: center; }
  .film-copy > span { font-size: .65rem; letter-spacing: .08em; }
  .film-copy > strong { font-size: clamp(1.35rem, 6.6cqw, 1.95rem); line-height: 1.12; }
  .film-art { display: grid; grid-template-rows: minmax(0, 1fr) auto; aspect-ratio: auto; height: clamp(13rem, 72cqw, 22rem); }
  .film-art svg { min-height: 0; }
  .film-art .lbl { display: none; }
  .film-art .coa-hub { font-size: 34px; }
  .film-art::after { display: grid; min-height: 2.1rem; align-items: center; padding: .4rem .25rem 0; color: var(--film-soft); font-size: clamp(.78rem, 3cqw, .95rem); font-weight: 650; line-height: 1.4; text-align: center; text-wrap: balance; }
  .film-scene--origin[data-story-beat="0"] .film-art::after { content: "Conditions \2192  Unit \2190  Context"; }
  .film-scene--origin[data-story-beat="1"] .film-art::after { content: "Unit level"; }
  .film-scene--coalition[data-story-beat="0"] .film-art::after { content: "Leaders \00b7  Analysts \00b7  Developers \00b7  Prevention"; }
  .film-scene--coalition[data-story-beat="1"] .film-art::after { content: "Data \2192  Model \2192  Tool \2192  Evaluate"; }
  .film-scene--signal[data-story-beat="0"] .film-art::after { content: "Recorded incidents \2192  Unit-level estimate \2192  Company-sized units"; }
  .film-scene--signal[data-story-beat="1"] .film-art::after { content: "Look closer \00b7  Human judgment"; }
  .film-scene--care[data-story-beat="0"] .film-art::after { content: "Data \00b7  People \00b7  Context \00b7  Judgment \00b7  Care"; }
  .film-scene--care[data-story-beat="1"] .film-art::after { content: "Act \2192  Learn \2192  Adapt"; }
  .film-scene--mission[data-story-beat="0"] .film-art::after { content: "One Army formation \2192  Researchers, practitioners, clinicians, data experts, military leaders"; }
  .film-scene--mission[data-story-beat="1"] .film-art::after { content: "Sense \2192  Orient \2192  Act \2192  Learn"; }
  .film-scene[data-story-beat="1"] .film-art::after { color: var(--film-green-light); }
  .film-source { grid-template-columns: 4.9rem minmax(0, 1fr); min-height: 4.4rem; }
  .film-source > span { font-size: .75rem; }
  .film-source small { font-size: .68rem; letter-spacing: .04em; }
  .film-caption { min-height: 6rem; padding: .8rem .85rem .95rem; }
  .film-caption__line { font-size: .93rem; line-height: 1.4; }
  .film-ending { gap: 1rem; padding: 1.5rem 1rem; }
  .film-ending__actions { flex-direction: column; width: min(100%, 17rem); }
  .film-ending__actions a { width: 100%; }
  .film-ending > p { font-size: .65rem; }
  .film-stage:has(.film-ending:not([hidden])) { min-height: 30rem; }
}
@media (max-width: 700px) {
  .film-bar { gap: .5rem; }
  .film-bar__id { gap: .5rem; }
  .film-bar__actions { gap: .35rem; }
  .film-bar__info { max-width: 5.9rem; font-size: .72rem; line-height: 1.2; }
  .film-scroll { padding: .5rem .5rem .75rem; }
  .story-film .film-info { width: calc(100vw - 1rem); max-height: 94svh; }
  .film-info__header, .film-info__body { padding: .85rem; }
}

@media (prefers-reduced-motion: reduce) {
  .story-briefing.story-film[open],
  .story-film *,
  .story-film *::before,
  .story-film *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .story-film :is(.film-slate, .lp-flow, .org-scan, .org-ring, .coa-pulse, .mis-pulse, .sig-pulse, .care-orbit, .mis-orbit) { display: none; }
  .story-film .film-art svg { transform: none !important; }
  .story-film .film-source { opacity: 1 !important; visibility: visible !important; }
  .story-film .film-art :is(.org-unit, .org-context, .org-links, .sig-grid, .fx-in) { opacity: 1 !important; }
  .story-film .film-art * { filter: none !important; }
}