/* The engine's board, shared by /, /join and /c (25 Oct 2026, the founder: "make this a moving rows board ... clickable into each
   one like Picture Lock has ... sounds can be turned on"). After Picture Lock's Motion page (agency.css, the wall and the morphing
   dialog). board.js turns each row of looks into a marquee (the row written twice, moved by half its width plus half a gap, so it
   loops without a seam); without the script, or with reduced motion, the rows stay as rows you scroll sideways. */
.mo-wall.is-marq { position: relative; overflow: hidden; grid-template-columns: minmax(0, 1fr); }
.mo-wall.is-marq::before, .mo-wall.is-marq::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 2; width: 7%; pointer-events: none; }
.mo-wall.is-marq::before { left: 0; background: linear-gradient(90deg, #f2efe8, rgba(242, 239, 232, 0)); }
.mo-wall.is-marq::after { right: 0; background: linear-gradient(270deg, #f2efe8, rgba(242, 239, 232, 0)); }
.mo-wall.is-marq .mo-row { width: max-content; overflow: visible; padding: 4px 0; scroll-snap-type: none; animation: mo-marq var(--dur, 100s) linear infinite; }
.mo-wall.is-marq .mo-row.rev { animation-direction: reverse; }
.mo-wall.is-marq.away .mo-row, .mo-wall.is-marq .mo-row.is-heard { animation-play-state: paused; }
@media (hover: hover) and (pointer: fine) { .mo-wall.is-marq .mo-row:hover { animation-play-state: paused; } }
@keyframes mo-marq { to { transform: translateX(calc(-50% - 6px)); } }

/* a look opens: press it and it grows into the film */
.mo-look { cursor: pointer; }
.mo-look .mo-frame { transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1); }
.mo-look:active .mo-frame { transform: scale(0.97); }
.mo-look:focus-visible { outline: 2px solid #0b0b0b; outline-offset: 4px; border-radius: 18px; }
@media (hover: hover) and (pointer: fine) { .mo-look:hover .mo-frame { transform: scale(1.035); } .mo-look:active .mo-frame { transform: scale(0.97); } }
.morph { position: fixed; inset: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; overflow: hidden; }
.morph::backdrop { background: transparent; }
.morph-bg { position: absolute; inset: 0; background: rgba(8, 8, 7, 0.8); }
.morph-stage { position: absolute; inset: 0; margin: auto; height: min(86vh, 820px); max-width: calc(100vw - 32px); aspect-ratio: 9 / 16; border-radius: 26px; overflow: hidden;
  background: #0a0a09; transform-origin: 0 0; box-shadow: 0 0 0 1px rgba(243, 240, 233, 0.16), 0 60px 120px -30px #000; }
.morph-stage video { display: block; width: 100%; height: 100%; object-fit: cover; }
.morph-name { position: absolute; left: 14px; bottom: 14px; padding: 9px 14px; border-radius: 999px; background: rgba(14, 14, 13, 0.74); color: #fff;
  font-size: 13px; font-weight: 500; line-height: 1; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); }
.morph-x { position: absolute; right: 12px; top: 12px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(14, 14, 13, 0.74); color: #fff;
  font-size: 20px; line-height: 1; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); transition: transform 130ms cubic-bezier(0.23, 1, 0.32, 1); }
.morph-x:active { transform: scale(0.97); }
.morph-x:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* the films' sound: one heard at a time */
.snd { position: absolute; left: 10px; bottom: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px 8px 10px; border: 0; border-radius: 999px;
  background: rgba(14, 14, 13, 0.74); color: #fff; font-size: 12.5px; font-weight: 500; line-height: 1; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  transition: transform 130ms cubic-bezier(0.23, 1, 0.32, 1), background-color 170ms cubic-bezier(0.23, 1, 0.32, 1); }
.snd:active { transform: scale(0.97); }
.snd:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.snd .w { opacity: 0.35; transition: opacity 170ms cubic-bezier(0.23, 1, 0.32, 1); }
.snd[aria-pressed="true"] .w { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .snd:hover { background: rgba(14, 14, 13, 0.92); } }
@media (prefers-reduced-motion: reduce) { .mo-look .mo-frame, .mo-look:active .mo-frame, .mo-look:hover .mo-frame { transform: none; } }
.mo-look .snd { left: auto; right: 8px; top: 8px; bottom: auto; padding: 6px 9px 6px 8px; font-size: 11.5px; gap: 5px; }   /* 1 Nov: the looks with a voiced excerpt; top corner, clear of the film's own captions */
.mo-look .snd span { display: inline; margin: 0; font-size: inherit; line-height: 1; color: inherit; }
.snd[aria-pressed="true"] { background: rgba(255, 255, 255, 0.94); color: #111; }