/* DDD x Flock Safety page, "In the field" (flock-field-01, October 5): real footage from the GoPro inside the unit, shown
   as CCTV tiles. Written by _source/build-flock-collab.py. Every rule is scoped to body.page-flock-camera .ff. */
body.page-flock-camera .ff{padding:96px 24px 16px}
body.page-flock-camera .ff-head{margin:0 0 28px}
body.page-flock-camera .ff-head h2{font:500 clamp(34px,4.6vw,60px)/1 var(--fx-corp);letter-spacing:-.02em;margin:10px 0 10px}
body.page-flock-camera .ff-head .lede{color:var(--fx-dim);margin:0;max-width:62ch;font:17px/1.5 var(--fx-corp)}
body.page-flock-camera .ff-grid{list-style:none;margin:0;padding:0;display:grid;gap:12px}
body.page-flock-camera .ff-clips{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:12px}
body.page-flock-camera .ff-photos{grid-template-columns:repeat(4,minmax(0,1fr))}
body.page-flock-camera .ff-tile{margin:0;padding:10px;background:#000;border:1px solid rgba(216,222,207,.25);display:grid;gap:8px;min-width:0}
body.page-flock-camera .ff-hud,body.page-flock-camera .ff-cap{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0;font:10px/1.3 var(--fx-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fx-dim);font-variant-numeric:tabular-nums;min-height:28px}
body.page-flock-camera .ff-hud b{color:var(--fx-red);font-weight:700;animation:ff-rec 1.2s steps(1) infinite}
@keyframes ff-rec{50%{opacity:.2}}
body.page-flock-camera .ff-cap{color:var(--ink);letter-spacing:.08em;min-height:0}
body.page-flock-camera .ff-cap span:last-child{color:var(--fx-dim)}
body.page-flock-camera .ff-feed{position:relative;aspect-ratio:1;background:#000}
body.page-flock-camera .ff-feed img,body.page-flock-camera .ff-feed video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;background:#000}
/* the frame marks of a monitor, in the four corners */
body.page-flock-camera .ff-feed::before,body.page-flock-camera .ff-feed::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(var(--ink),var(--ink)) left top/14px 1px no-repeat,linear-gradient(var(--ink),var(--ink)) left top/1px 14px no-repeat,
  linear-gradient(var(--ink),var(--ink)) right top/14px 1px no-repeat,linear-gradient(var(--ink),var(--ink)) right top/1px 14px no-repeat;opacity:.55}
body.page-flock-camera .ff-feed::after{transform:scaleY(-1)}
body.page-flock-camera .ff-toggle{min-height:28px;padding:0 10px;border:1px solid rgba(216,222,207,.4);background:transparent;color:var(--ink);font:10px var(--fx-mono);letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
body.page-flock-camera .ff-toggle:hover,body.page-flock-camera .ff-toggle:focus-visible{background:var(--fx-red);border-color:var(--fx-red);color:#000;outline:none}
@media (max-width:900px){
  body.page-flock-camera .ff{padding:72px 16px 8px}
  body.page-flock-camera .ff-clips{grid-template-columns:1fr}
  body.page-flock-camera .ff-photos{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  body.page-flock-camera .ff-photos .ff-tile{padding:6px;gap:6px}
  body.page-flock-camera .ff-photos .ff-hud{display:none}
  body.page-flock-camera .ff-photos .ff-cap{font-size:9px;letter-spacing:.04em;flex-direction:column;align-items:flex-start;gap:2px}
}
@media (prefers-reduced-motion:reduce){body.page-flock-camera .ff-hud b{animation:none}}