/* real.css — the layer that puts actual frames in the plates, and tells
   the truth about what state the inventory is in.
   style.css comps the page; this replaces the comped panels with poster
   frames pulled off the delivered clips. Loaded second so it wins without
   style.css having to know about it. */

.plate img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 40%; display:block; z-index:0;
}
/* the diagonal hatch stood in for an image; over a real frame it reads as
   dirt, so it becomes a scrim that keeps the overlaid type legible */
.plate::after{
  background:linear-gradient(180deg,rgba(0,0,0,.5) 0 20%,
             rgba(0,0,0,.06) 44% 64%,rgba(0,0,0,.6) 100%);
  z-index:1;
}
.plate .idx,.plate .cap,.plate .dur,.plate .time,.plate .scrub,
.plate .await{z-index:2}

/* Short-form is vertical. The comp drew these landscape because they were
   standing in for photography; a 16:9 slice of a 9:16 frame keeps a third
   of the height and takes the top off people's heads. */
.plate.tall{aspect-ratio:9/16}
.plate.card4{aspect-ratio:4/5}
.cert .plate.tall.big{aspect-ratio:9/16;max-width:320px}
.foot .plate{height:230px;aspect-ratio:auto}
.clipcard .plate.tall{margin-bottom:12px}

/* hero: three real clips at their real shape */
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.stripk{margin:14px 0 0}

/* two real campaigns, not four invented ones */
.cards.two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px}

/* a campaign with a brief and no footage yet looks like what it is */
.plate.empty{display:grid;place-items:center;
  background:repeating-linear-gradient(135deg,#141416 0 12px,#111113 12px 24px)}
.plate.empty::after{background:none}
.plate .await{font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim);text-align:center;line-height:2}

/* nothing has passed human review, so nothing wears the green */
.tags .pend,.badge.pendb{border-color:#6b5a1e;background:rgba(232,185,49,.14);
  color:#e8b931}
.badge.pendb{border:1px solid #6b5a1e}
.stamp.pends{border-color:#e8b931;color:#e8b931}
.checks li.open::before{content:"\00b7";color:#e8b931;border-color:#6b5a1e;
  font-size:15px}
.checks li.open{color:var(--dim)}
.price{color:var(--dim);font-size:17px}

/* a preview is a preview: say so once, at the top, and never again */
.preview{
  background:var(--accent); color:#0d0d0e; text-align:center;
  font-family:var(--mono); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; padding:7px 16px;
}

@media (max-width:1100px){
  .cert .plate.tall.big{max-width:none}
  .cards.two{grid-template-columns:1fr 1fr;max-width:none}
}
@media (max-width:620px){
  .cards.two{grid-template-columns:1fr}
  .strip{grid-template-columns:repeat(3,1fr);gap:8px}
}