/* ============================================================
   cams.css — the monitor wall.

   The one page in the issue that is not printed on paper, and the
   only reason it is allowed to be dark: it is a rack of monitors in a
   room, not a sheet. Everything else about it stays in the magazine's
   register — mono labels, hard rules, no rounded corners anywhere.

   Five of the six cameras never show anything. That is the piece.
   ============================================================ */
.cams-page{ background:#0A0B0A; color:#D8DCD6 }
.cams-page::after{                      /* the wall has a scanline problem */
  content:""; position:fixed; inset:0; z-index:900; pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.42) 0 1px, transparent 1px 3px);
}

.cams-top{
  display:flex; gap:1rem; align-items:baseline; flex-wrap:wrap;
  padding:.5rem clamp(.8rem,2.4vw,2rem); border-bottom:2px solid #2A2E29;
  position:sticky; top:0; z-index:60; background:#0A0B0A;
}
.cams-top a{ font-family:var(--mono); font-size:.62rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:#8C948A }
.cams-top a:hover{ color:#D8DCD6 }
.cams-top .now{ margin-left:auto; font-family:var(--mono); font-size:.68rem;
  letter-spacing:.1em; color:#5FE08A; font-variant-numeric:tabular-nums }

.cams-hd{ padding:clamp(1.2rem,3.4vw,2.6rem) clamp(.8rem,2.4vw,2rem) .9rem }
.cams-hd h1{
  font-family:var(--anton); text-transform:uppercase; line-height:.78; margin:0;
  font-size:clamp(2.4rem,11vw,9rem); letter-spacing:-.03em; color:#EDF0EB;
}
.cams-hd p{ font-family:var(--mono); font-size:.7rem; line-height:1.6; color:#8C948A;
  max-width:58ch; margin:.8rem 0 0 }
.cams-hd b{ color:#5FE08A; font-weight:400 }

/* ---------- the wall ---------- */
.wallgrid{
  display:grid; gap:2px; padding:0 clamp(.8rem,2.4vw,2rem) clamp(2rem,5vw,4rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));
}
.cam{
  position:relative; background:#000; aspect-ratio:4/3; overflow:hidden;
  border:1px solid #23271F; cursor:zoom-in;
}
.cam video, .cam img{ width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(.45) contrast(1.15) brightness(.9) }
.cam__lbl{
  position:absolute; z-index:4; left:0; top:0; right:0;
  display:flex; justify-content:space-between; gap:.5rem; align-items:center;
  padding:.25rem .4rem; background:linear-gradient(rgba(0,0,0,.75), transparent);
  font-family:var(--mono); font-size:.56rem; letter-spacing:.14em; text-transform:uppercase;
  color:#CBD2C6; text-shadow:0 1px 2px #000;
}
.cam__ts{
  position:absolute; z-index:4; right:.4rem; bottom:.35rem;
  font-family:var(--mono); font-size:.58rem; color:#EDF0EB;
  text-shadow:0 1px 2px #000; font-variant-numeric:tabular-nums;
}
.cam__rec{ display:inline-flex; align-items:center; gap:.3rem }
.cam__rec i{ width:6px; height:6px; background:#E5261F; border-radius:50%;
  animation:rec 1.7s steps(1) infinite }
@keyframes rec{ 50%{ opacity:.15 } }
.cam__inc{
  position:absolute; z-index:4; left:.4rem; bottom:.35rem;
  font-family:var(--mono); font-size:.52rem; letter-spacing:.1em; text-transform:uppercase;
  color:#7E877C; text-shadow:0 1px 2px #000;
}
.cam[data-flag="true"] .cam__inc{ color:#E5261F }

/* signal loss */
.cam__snow{
  position:absolute; inset:0; z-index:5; opacity:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
}
.cam[data-lost="true"] .cam__snow{ opacity:.92; animation:snow .09s steps(3) infinite }
@keyframes snow{ 0%{background-position:0 0} 33%{background-position:70px 40px} 66%{background-position:20px 90px} 100%{background-position:110px 10px} }
.cam[data-lost="true"] video{ opacity:.06 }
.cam__lost{
  position:absolute; z-index:6; inset:0; display:none; place-items:center;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.24em; text-transform:uppercase;
  color:#E5261F; text-shadow:0 0 10px rgba(229,38,31,.55);
}
.cam[data-lost="true"] .cam__lost{ display:grid }

.cam:hover{ border-color:#5FE08A }
.cam[data-flag="true"]{ border-color:#5B1E1A }

/* ---------- full frame ---------- */
.camfull{
  position:fixed; inset:0; z-index:800; display:none; background:rgba(4,5,4,.96);
  padding:clamp(.8rem,3vw,2.5rem); cursor:zoom-out;
}
.camfull[data-on="true"]{ display:grid; grid-template-rows:1fr auto; gap:1rem;
  animation:cf .22s steps(3) }
@keyframes cf{ from{ opacity:0 } }
.camfull__v{ position:relative; min-height:0; display:grid; place-items:center }
.camfull__v video{ max-width:100%; max-height:100%; object-fit:contain;
  filter:grayscale(.45) contrast(1.15); border:1px solid #23271F }
.camfull__read{
  font-family:var(--mono); font-size:.68rem; line-height:1.7; color:#8C948A;
  border-top:1px solid #2A2E29; padding-top:.7rem;
  display:flex; gap:clamp(1rem,4vw,3.5rem); flex-wrap:wrap;
}
.camfull__read b{ color:#5FE08A; font-weight:400 }
.camfull__read em{ color:#E5261F; font-style:normal }

.cams-note{
  padding:0 clamp(.8rem,2.4vw,2rem) 5rem; font-family:var(--mono);
  font-size:.66rem; line-height:1.7; color:#6E766C; max-width:70ch;
}
.cams-note b{ color:#8C948A; font-weight:400 }

@media (prefers-reduced-motion:reduce){
  .cam__rec i{ animation:none }
  .cam[data-lost="true"] .cam__snow{ animation:none }
  .cams-page::after{ display:none }
}