/* The film takes the foreground; its frame and controls stay quiet. */
.consolidation-film {
  --film-bg: #070f14;
  --film-line: #344752;
  --film-blue: #acd5f4;
  --film-text: #edf2f4;
  --film-muted: #9dabb4;
  color: var(--film-text);
  background: var(--film-bg);
  border: 1px solid #33434d;
  border-radius: 4px;
  overflow: hidden;
  scroll-margin-top: 24px;
}
.film-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; padding: 30px 32px 28px; }
.film-eyebrow { margin: 0 0 12px; color: #a9b9c3; font-size: .65rem; font-weight: 500; line-height: 1.6; letter-spacing: .11em; text-transform: uppercase; }
.film-eyebrow span { padding: 0 6px; color: #627c8d; }
.film-header h2 { margin: 0; color: var(--film-text); font-size: clamp(1.7rem, 2.5vw, 2.45rem); line-height: 1.15; letter-spacing: -.035em; }
.film-header h2 em { color: #bcd5e4; white-space: nowrap; }
.film-header .film-intro { flex-shrink: 0; margin: 0 0 2px; color: var(--film-muted); font-size: .75rem; line-height: 1.7; text-align: right; }
.film-screen { background: var(--film-bg); }
.film-scene-heading { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 16px 32px 0; border-top: 1px solid #25353f; }
.film-part { color: #bfccd4; font-size: .7rem; font-weight: 500; letter-spacing: .05em; }
.film-duration { color: #8698a3; font-size: .65rem; line-height: 1.5; text-align: right; }
.film-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--film-bg); }
.film-stage canvas { display: block; width: 100%; height: 100%; }
.film-stage-actions { position: absolute; right: 22px; bottom: 17px; display: none; gap: 7px; }
.consolidation-film.is-ready .film-stage-actions { display: flex; }
.film-fullscreen-caption { display: none; }
.consolidation-film button, .consolidation-film select { color: var(--film-text); font: 500 .75rem/1.4 "DM Sans", Arial, sans-serif; cursor: pointer; }
.consolidation-film button { min-height: 42px; padding: 10px 13px; border: 1px solid #374954; border-radius: 3px; background: #101c24; transition: color .15s, background-color .15s, border-color .15s; }
.consolidation-film button:hover { color: #fff; border-color: #8caebf; background: #192a35; }
.consolidation-film button:focus-visible, .consolidation-film select:focus-visible, .consolidation-film input:focus-visible, .consolidation-film summary:focus-visible { outline: 2px solid #c0e1f8; outline-offset: 4px; }
.consolidation-film button:disabled { opacity: .3; cursor: default; }
.consolidation-film .film-stage-action { min-height: 32px; padding: 6px 10px; border-color: #7992a04a; background: #070f14b8; color: #afc1cc; font-size: .65rem; backdrop-filter: blur(6px); }
.consolidation-film .film-stage-action:hover { border-color: #a2cadb80; background: #13232ede; }
.film-stage:fullscreen, .film-stage.is-expanded { width: 100vw; height: 100dvh; max-width: none; max-height: none; aspect-ratio: auto; background: var(--film-bg); }
.film-stage.is-expanded { position: fixed; inset: 0; z-index: 1000; }
.film-stage:fullscreen canvas, .film-stage.is-expanded canvas { height: calc(100% - 80px); }
body.film-expanded { overflow: hidden; }
.film-stage:fullscreen .film-stage-actions, .film-stage.is-expanded .film-stage-actions { right: 28px; bottom: 26px; }
.film-stage:fullscreen .film-fullscreen-caption:not(:empty), .film-stage.is-expanded .film-fullscreen-caption:not(:empty) { display: block; position: absolute; left: 32px; bottom: 25px; width: min(66vw, 780px); margin: 0; color: #b4c5cf; font-size: clamp(.8rem, 1.25vw, 1rem); line-height: 1.6; text-wrap: pretty; text-shadow: 0 1px 8px #000; pointer-events: none; }
.film-caption { display: grid; grid-template-columns: minmax(180px, .8fr) 2fr; align-items: baseline; gap: 24px; margin: 0 32px; padding: 20px 0 23px; border-top: 1px solid #253843; }
.film-caption h3 { margin: 0; color: #dce8ed; font-size: .95rem; font-weight: 500; letter-spacing: -.015em; line-height: 1.5; }
.film-caption-heading > span { display: block; margin-top: 4px; color: #899eab; font-size: .68rem; line-height: 1.55; }
.film-caption > p { min-height: 3em; max-width: 720px; margin: 0; color: #a7b7c2; font-size: .86rem; line-height: 1.65; }
.film-interactive { display: none; }
.consolidation-film.is-ready .film-interactive { display: block; }
.film-controls { display: flex; align-items: center; gap: 22px; padding: 14px 24px; border-top: 1px solid #25353f; border-bottom: 1px solid #25353f; background: #0b151c; }
.film-transport { display: flex; align-items: center; gap: 5px; }
.consolidation-film .film-play { min-width: 98px; background: #c2d9e5; border-color: #c2d9e5; color: #10212c; font-weight: 650; }
.consolidation-film .film-play:hover { color: #081721; background: #e1eff7; border-color: #e1eff7; }
.consolidation-film .film-skip { width: 33px; padding: 8px 4px; border-color: transparent; background: transparent; color: #91a8b8; font-size: 1rem; }
.consolidation-film .film-skip:hover { color: #e5f3fb; background: #1b2c36; }
.film-timeline { display: flex; flex: 1; align-items: center; gap: 16px; min-width: 120px; }
.film-timeline input { display: block; flex: 1; min-width: 36px; width: 100%; height: 24px; margin: 0; cursor: pointer; accent-color: #bfdbea; }
.film-timeline > span { color: #a9bdca; font-size: .68rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.film-options { display: flex; align-items: center; gap: 10px; }
.film-speed select { min-height: 40px; padding: 8px 3px 8px 7px; border: 1px solid transparent; border-radius: 3px; background: #0b151c; color: #b4c7d3; font-size: .7rem; }
.consolidation-film .film-restart { border-color: transparent; background: transparent; color: #96aebb; font-size: .7rem; padding: 10px 3px; }
.consolidation-film .film-restart:hover { color: #ecf5fa; }
.film-chapters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; padding: 25px 32px 27px; }
.film-chapter-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; min-width: 0; }
.film-chapter-group > p { grid-column: 1 / -1; margin: 0 0 11px; color: #a5b5bf; font-size: .65rem; font-weight: 500; line-height: 1.5; letter-spacing: .1em; text-transform: uppercase; }
.film-chapter-group > p > span { display: inline-block; min-width: 23px; color: #6e899c; font-size: .68rem; letter-spacing: 0; }
.consolidation-film .film-chapter { position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; align-content: start; align-items: start; gap: 6px; width: 100%; min-height: 77px; padding: 11px 0 13px; border: 0; border-top: 1px solid #2a3a45; border-radius: 0; background: transparent; text-align: left; overflow: hidden; }
.consolidation-film .film-chapter:hover { background: transparent; border-color: #869da9; }
.consolidation-film .film-chapter[aria-current="true"] { background: transparent; border-color: #c1dcea; }
.film-chapter-number { color: #637d8d; font-size: .6rem; }
.film-chapter-name { grid-column: 1 / -1; grid-row: 2; color: #8fa5b2; font-size: .7rem; font-weight: 450; line-height: 1.5; }
.film-chapter-time { grid-column: 2; grid-row: 1; color: #7c95a5; font-size: .6rem; font-variant-numeric: tabular-nums; }
.film-chapter[aria-current="true"] .film-chapter-number, .film-chapter[aria-current="true"] .film-chapter-time { color: #bed9e7; }
.film-chapter[aria-current="true"] .film-chapter-name { color: #e2eff5; }
.film-chapter:hover .film-chapter-name { color: #d2e4ed; }
.film-chapter-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: #acd4e8; transform: scaleX(0); transform-origin: left; pointer-events: none; }
.film-disclaimer { margin: 0; padding: 0 32px 23px; color: #778f9e; font-size: .66rem; line-height: 1.7; }
.film-noscript { padding: 0 32px; color: #b9cbd7; font-size: .84rem; }
.film-transcript { border-top: 1px solid #25353f; }
.film-transcript summary { display: flex; align-items: baseline; gap: 10px; padding: 18px 32px; color: #9fb5c2; cursor: pointer; font-size: .73rem; font-weight: 450; list-style: none; }
.film-transcript summary::-webkit-details-marker { display: none; }
.film-transcript summary::before { content: "+"; display: inline-block; width: 12px; color: #829eaf; font-size: 1rem; line-height: 1; }
.film-transcript[open] summary::before { content: "\2212"; }
.film-transcript summary:hover { color: #d9e8f1; }
.film-transcript summary > span { margin-left: auto; color: #688292; font-size: .65rem; }
.film-transcript ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 38px; margin: 0; padding: 5px 32px 28px; list-style: none; }
.film-transcript h3 { margin: 0 0 7px; color: #c9dbe6; font-size: .88rem; line-height: 1.5; letter-spacing: -.01em; }
.film-transcript p { margin: 0; color: #99b0bf; font-size: .82rem; line-height: 1.8; }
.film-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 1100px) {
  .film-header { align-items: flex-start; gap: 20px; padding: 25px 26px; }
  .film-header h2 em { display: block; margin-top: 3px; }
  .film-header .film-intro { padding-top: 4px; }
  .film-controls { gap: 15px; padding-right: 20px; padding-left: 20px; }
  .film-options { gap: 5px; }
  .film-chapters { gap: 19px; padding-right: 26px; padding-left: 26px; }
  .film-chapter-group { gap: 0 11px; }
  .film-chapter-name { font-size: .65rem; }
}
@media (max-width: 700px) {
  .film-header { display: block; padding: 23px 20px 21px; }
  .film-eyebrow { margin-bottom: 12px; font-size: .55rem; letter-spacing: .07em; }
  .film-eyebrow span { padding: 0 3px; }
  .film-header h2 { font-size: clamp(1.65rem, 6vw, 2.15rem); line-height: 1.13; }
  .film-header .film-intro { margin-top: 14px; padding-top: 0; font-size: .67rem; text-align: left; }
  .film-intro br { display: none; }
  .film-intro br::after { content: " "; }
  .film-scene-heading { padding: 14px 20px 0; gap: 15px; }
  .film-part { flex-shrink: 0; font-size: .65rem; }
  .film-duration { max-width: 142px; font-size: .55rem; line-height: 1.55; }
  .film-stage { aspect-ratio: auto; }
  .film-stage canvas { height: auto; aspect-ratio: 4 / 5; }
  .film-stage-actions { position: static; justify-content: flex-end; gap: 5px; padding: 0 14px 12px; }
  .consolidation-film .film-stage-action { min-height: 30px; padding: 5px 8px; font-size: .6rem; }
  .film-caption { display: block; margin: 0 20px; padding: 17px 0 20px; }
  .film-caption-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 12px; }
  .film-caption h3 { font-size: .88rem; }
  .film-caption-heading > span { margin-top: 0; font-size: .64rem; }
  .film-caption > p { min-height: 4.8em; margin-top: 8px; font-size: .79rem; line-height: 1.7; }
  .film-controls { flex-wrap: wrap; gap: 7px 16px; padding: 12px 16px; }
  .film-timeline { order: 0; flex-basis: 100%; gap: 13px; margin-bottom: 4px; }
  .film-timeline > span { font-size: .65rem; }
  .film-transport { order: 1; gap: 3px; }
  .film-options { order: 2; margin-left: auto; gap: 5px; }
  .consolidation-film .film-play { min-width: 80px; min-height: 39px; padding: 8px 11px; font-size: .68rem; }
  .consolidation-film .film-skip { width: 28px; min-height: 39px; }
  .film-speed select { min-height: 39px; padding-left: 3px; font-size: .65rem; }
  .consolidation-film .film-restart { min-height: 39px; padding: 8px 0; font-size: .65rem; }
  .film-chapters { grid-template-columns: 1fr; gap: 18px; padding: 23px 20px 24px; }
  .film-chapter-group { gap: 0 20px; }
  .film-chapter-group > p { margin-bottom: 8px; font-size: .61rem; }
  .consolidation-film .film-chapter { min-height: 64px; gap: 5px; padding: 9px 0 11px; }
  .film-chapter-name { font-size: .7rem; }
  .film-chapter-number, .film-chapter-time { font-size: .6rem; }
  .film-disclaimer { padding: 0 20px 21px; font-size: .63rem; }
  .film-noscript { padding: 0 20px; }
  .film-transcript summary { padding: 17px 20px; font-size: .69rem; }
  .film-transcript summary > span { display: none; }
  .film-transcript ol { grid-template-columns: 1fr; gap: 23px; padding: 4px 20px 25px; }
  .film-transcript p { font-size: .8rem; }
  .film-stage:fullscreen .film-stage-actions, .film-stage.is-expanded .film-stage-actions { position: absolute; right: 16px; bottom: 16px; padding: 0; }
  .film-stage:fullscreen canvas, .film-stage.is-expanded canvas { height: calc(100% - 145px); }
  .film-stage:fullscreen .film-fullscreen-caption:not(:empty), .film-stage.is-expanded .film-fullscreen-caption:not(:empty) { left: 20px; bottom: 62px; width: calc(100% - 40px); font-size: .76rem; }
}
@media (max-width: 359px) {
  .film-controls { gap: 7px; padding: 12px; }
  .film-options { gap: 2px; }
  .film-header, .film-chapters { padding-right: 16px; padding-left: 16px; }
  .film-eyebrow { font-size: .5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .consolidation-film *, .consolidation-film *::before, .consolidation-film *::after { scroll-behavior: auto; animation: none !important; transition: none !important; }
}