/* Commercial Media Production · composed for every screen (frames.js): the film that takes over the monitor (DOM, its
   own 16:9, never cropped), the three guides drawn over it, their rows. Builds on ../_template/discipline.css. */
.cap-film { position: fixed; inset: 0; z-index: 1; display: grid; place-items: center; pointer-events: none; background: #050407; opacity: 0; visibility: hidden; }
.cap-film__frame { position: relative; width: min(100vw, calc(100vh * 16 / 9)); aspect-ratio: var(--ar); }
.cap-film video { display: block; width: 100%; height: 100%; object-fit: contain; }
.cap-guides { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* the words over the film sit on the reading glass (0.72), and a quiet grade darkens the film's top-left under the
   heading (the film itself is never cut) */
.cap-film__frame::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, rgba(7, 6, 10, 0.62) 0%, rgba(7, 6, 10, 0.18) 46%, rgba(7, 6, 10, 0) 62%), linear-gradient(270deg, rgba(7, 6, 10, 0.5) 0%, rgba(7, 6, 10, 0) 30%); }
.e-sec--sig .xp::before { background: var(--gl-read-tint, rgba(14, 10, 22, 0.86)); }
html.gl-blur .e-sec--sig .xp::before { background: var(--gl-read, rgba(14, 10, 22, 0.72)); }
.cap-g { fill: none; stroke: var(--e-line, #c9b6ea); stroke-width: 2.2; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; filter: drop-shadow(0 0 6px rgba(201, 182, 234, 0.55)); }
/* the rows: beside the guides on a desktop (right of the 4:5 frame), under the film on a phone */
.cap-ratio { font: 600 clamp(20px, 1.8vw, 28px)/1 var(--v3-title); font-stretch: 88%; letter-spacing: -0.01em; color: var(--filament, #c9b6ea); }
.xp[data-story^="sig-r"] { gap: 4px; padding: 12px 16px; }
.xp[data-story^="sig-r"] .xp__body { font-size: 14.5px; max-width: 22ch; }
html[data-layout="land"] .xp[data-land^="cm-r"] { left: auto; right: calc(var(--g-m) + 1vw); width: min(22vw, 280px); }
html[data-layout="land"] .xp[data-land="cm-r0"] { top: 24vh; }
html[data-layout="land"] .xp[data-land="cm-r1"] { top: 41vh; }
html[data-layout="land"] .xp[data-land="cm-r2"] { top: 58vh; }
html[data-layout="port"] .xp[data-port^="cm-r"] { top: auto; width: calc((100vw - 2 * var(--g-m) - 16px) / 3); padding: 10px 10px; }
html[data-layout="port"] .xp[data-port="cm-r0"] { left: var(--g-m); bottom: 15svh; }
html[data-layout="port"] .xp[data-port="cm-r1"] { left: calc(var(--g-m) + (100vw - 2 * var(--g-m) - 16px) / 3 + 8px); bottom: 15svh; }
html[data-layout="port"] .xp[data-port="cm-r2"] { left: auto; right: var(--g-m); bottom: 15svh; }
html[data-layout="port"] .xp[data-story^="sig-r"] .xp__body { font-size: 12.5px; }
html[data-layout="port"] .cap-film { place-items: center; }
html[data-layout="port"] .cap-film__frame { width: 100vw; }
.xp[data-story="sig-head"] .xp__h2 { max-width: 16ch; }
/* reduced motion and no WebGL: the film whole with its three guides, the rows beside it */
.v3-reduced .cap-film, .v3-nogl .cap-film { position: relative; inset: auto; width: 100%; max-width: 960px; opacity: 1; visibility: visible; background: none; }
.v3-reduced .cap-film__frame, .v3-nogl .cap-film__frame { width: 100%; }
.v3-reduced .cap-g, .v3-nogl .cap-g { stroke-dashoffset: 0; opacity: 1; }