/* ============================================================
   C#NT — YOU WERE SEEN (teaser homepage, the monitor wall)
   Loads after styles.css, homepage only. styles.css stays the shared
   base for 404 / unsubscribe / chicken, so nothing here leaks there.

   Rules this file keeps:
   - texture (scanlines, snow, tint, roll, glitch) lives on FOOTAGE only.
     Every lockup sits above every texture layer and is never filtered,
     blended or animated, and neither is any of its ancestors.
   - footage is green duotone (blue for the booth), never pink. Duotone =
     grayscale media + a multiply layer in the brand colour. Hover drops the
     tint to bone, i.e. plain B&W: a colour swap.
   - pink is the REC square on CAM 01, the "family" hit and the #shameless
     block. Nothing else.
   - hard edges: no radius, no shadows. Hover = colour swap.
   ============================================================ */

/* snow for dead channels: fractal noise, rendered once as a tile */
:root {
  --snow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.6' intercept='-0.95'/%3E%3CfeFuncG type='linear' slope='2.6' intercept='-0.95'/%3E%3CfeFuncB type='linear' slope='2.6' intercept='-0.95'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  --scan: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.32) 0 1px, transparent 1px 3px);
}

/* ---------------- the clean mark ----------------
   no tremor on this page: the shake lives on the footage now */
.teaser .lockup { animation: none; }
.teaser .lockup__block { display: block; }

/* ---------------- motion holds ----------------
   PAUSE in the OSD bar holds every loop on the page (WCAG 2.2.2), and a
   section off screen holds its own loops so nobody pays for what they
   can't see. js/wall.js sets both classes. */
.is-paused *, .is-paused *::before, .is-paused *::after,
.is-off *, .is-off *::before, .is-off *::after { animation-play-state: paused !important; }

/* =================================================================
   THE MONITOR
   no scroll-snap-align here: snapping to the wall scrolled the top
   marquee out of view on load
   ================================================================= */
.monitor { background: var(--ground); padding: 18px 24px 44px; }
.monitor__inner {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "osd  osd osd"
    "main c02 c03"
    "main c04 c05"
    "con  con con";
  gap: 6px;
}
.osdbar  { grid-area: osd; }
.cam--main { grid-area: main; }
.console { grid-area: con; }
.cam--c02 { grid-area: c02; }
.cam--c03 { grid-area: c03; }
.cam--c04 { grid-area: c04; }
.cam--c05 { grid-area: c05; }

/* ---------------- OSD bar: channel, city, clock, pause ---------------- */
.osdbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 6px 24px;
  margin-bottom: 6px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.24em;
  color: var(--bone);
}
.osdbar__id { color: var(--green); }
.osdbar__id .hash { width: 0.62em; height: 0.87em; margin: 0 0.6em 0 0; vertical-align: -0.05em; }
.osdbar__loc { color: var(--body); }
.osdbar__clock { margin-right: auto; }

/* PAUSE / PLAY: icons drawn in CSS (the glyphs aren't in the font subset) */
.osdbar__pause {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--bone);
  background: transparent;
  border: 1px solid var(--bone);
  border-radius: 0;
  cursor: pointer;
}
.osdbar__pause[hidden] { display: none; }
.osdbar__pause::before {
  content: "";
  display: inline-block;
  width: 0.66em;
  height: 0.8em;
  margin-right: 0.7em;
  border-left: 0.22em solid currentColor;
  border-right: 0.22em solid currentColor;
}
.is-paused .osdbar__pause::before {
  width: 0.62em;
  border: 0;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.osdbar__pause:hover, .osdbar__pause:focus-visible { background: var(--green); color: var(--black); border-color: var(--green); }
.osdbar__pause:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }

/* ---------------- redacted digits ----------------
   Content-free: no digit is in the DOM. The bar takes the colour of the text
   it sits in: bone in the OSD, green in the facts, black on the bone paper.
   2ch = two digits of Space Mono. */
.rd {
  display: inline-block;
  width: 2ch;
  height: 0.8em;
  background: currentColor;
  vertical-align: -0.04em;
  -webkit-user-select: none;
  user-select: none;
}
.time, .date { white-space: nowrap; }
/* every bar is still: names, never times, and no clock that looks live */

/* =================================================================
   CAMS
   ================================================================= */
.cam {
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
  aspect-ratio: 4 / 3;
  background: var(--panel);
  outline: 1px solid var(--border);
  color: var(--bone);
  text-decoration: none;
}
.cam--main { aspect-ratio: auto; min-height: 420px; }
/* the small feeds size the rows at 4:3; where CAM 01's min-height makes the
   rows taller (981-1150px wide) they stretch to fill, so the wall never gaps */
.cam--c02, .cam--c03, .cam--c04, .cam--c05 { align-self: stretch; justify-self: stretch; }

/* footage layer */
.cam__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: grayscale(1) contrast(1.3) brightness(1.08);
}
/* CAM 02 / CAM 03 loops (05.09 tape, grayscale files; the tile's filter tints
   them). No poster: the photo <img> under each video is the still, and the
   video paints over it only once
   wall.js attaches a loop (never under reduced motion, data-saver or 2g/3g). */
.cam__video { pointer-events: none; }
.cam__media--c02 { object-position: 50% 40%; }
.cam__media--c03 { object-position: 50% 50%; }

/* duotone: multiply the grey footage by the brand colour, black stays ground */
.cam--feed::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--tint, var(--green));
  mix-blend-mode: multiply;
  pointer-events: none;
}
.cam--blue { --tint: var(--blue); }
/* blue multiplies dark; lift the footage under it so the booth still reads */
.cam--blue .cam__media { filter: grayscale(1) contrast(1.15) brightness(1.5); }

/* scanlines over every feed, live or dead */
.cam::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--scan);
  pointer-events: none;
}

/* CAM 01: the loop is busy, so it sits low under the lockup. contrast < 1
   squeezes its 3→239 luma swing first (same trick as the old hero). */
.cam--main .cam__media { filter: grayscale(1) contrast(0.78) brightness(0.5); }

/* the hum bar rolling down CAM 01: a hard-edged band, not a gradient */
.cam__roll {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 16%;
  z-index: 2;
  background: rgba(242, 240, 236, 0.05);
  border-top: 1px solid rgba(242, 240, 236, 0.08);
  pointer-events: none;
  animation: cam-roll 7s linear infinite;
}
@keyframes cam-roll {
  from { transform: translateY(-110%); }
  to   { transform: translateY(640%); }
}

/* signal hiccup on CAM 01's footage (never the mark): hard jumps, steps(1) */
.cam--main .cam__media { animation: cam-glitch 7.5s steps(1) infinite; }
@keyframes cam-glitch {
  0%, 93%, 100% { transform: none; }
  93.6% { transform: translateX(-7px); }
  94.4% { transform: translateX(5px) scaleY(1.03); }
  95.2% { transform: translateX(-2px); }
}

/* ---------------- OSD chips ---------------- */
.osd {
  position: absolute;
  z-index: 3;
  padding: 5px 7px 4px;
  background: var(--ground);
  color: var(--bone);
  font-weight: 700;
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: 0.2em;
  white-space: nowrap;
}
.osd--tl { top: 8px; left: 8px; }
.osd--tr { top: 8px; right: 8px; }
.osd--bl { bottom: 8px; left: 8px; }
.osd--br { bottom: 8px; right: 8px; }
.osd__hit { color: var(--green); }

/* REC: the hero's only pink. A square, because nothing here is round. */
.osd--rec::before {
  content: "";
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  margin-right: 0.6em;
  vertical-align: -0.05em;
  background: var(--pink);
  animation: rec-blink 1.4s steps(1) infinite;
}
@keyframes rec-blink { 60% { opacity: 0; } }

/* PLAY chip: triangle drawn with clip-path */
.osd--play { background: var(--green); color: var(--black); }
.osd--play::before {
  content: "";
  display: inline-block;
  width: 0.6em;
  height: 0.75em;
  margin-right: 0.6em;
  vertical-align: -0.02em;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.cam--blue .osd--play { background: var(--blue); color: var(--bone); }

/* ---------------- CAM 01 ident: the lockup over the footage ----------------
   z-index 4: above the tint (1), the scanlines and roll (2) and the chips (3) */
.cam__ident {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 44px 16px;
}

/* lockup sized to the monitor, not the viewport: --lk is the lockup width.
   desktop: CAM 01 is 2fr of a 1240px-max grid, minus its side padding */
.lockup--cam { --lk: min(500px, calc((min(100vw - 48px, 1240px) - 12px) / 2 - 48px)); width: var(--lk); }
.lockup--cam .lockup__block { font-size: calc(0.22 * var(--lk)); }
.lockup--cam .lockup__strap { font-size: max(8px, calc(0.026 * var(--lk))); }

.cam__line {
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--bone);
  background: var(--ground);
  padding: 2px 10px;
}

/* ---------------- dead channels: snow + a message ---------------- */
.cam--dark::before,
.slot[data-state="offline"] .slot__screen::before {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: 0;
  background-image: var(--snow);
  opacity: 0.4;
  pointer-events: none;
  animation: snow 0.45s steps(3) infinite;
}
@keyframes snow {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(-4%, 3%); }
  66%  { transform: translate(4%, -4%); }
  100% { transform: translate(0, 0); }
}
.cam--c05::before { background-position: 90px 60px; animation-delay: -0.2s; }

.cam__msg {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 30px 10px;
  text-align: center;
  font-size: 12px;
  line-height: 1.4;
  color: var(--bone);
}
.cam__msg > span { background: var(--ground); padding: 2px 8px; }
.cam__msg > span[hidden] { display: none; }
.cam__msg-big {
  font-family: var(--anton);
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--green);
  transform: skewX(-6deg);
}

/* ---------------- linked feeds: hover = colour swap ---------------- */
.cam--feed.cam--link:hover::before, .cam--feed.cam--link:focus-visible::before,
.tape:hover .cam--feed::before, .tape:focus-visible .cam--feed::before,
.exhibit__frame:hover::before, .exhibit__frame:focus-visible::before { background: var(--bone); }
.cam--dark.cam--link:hover .cam__msg-big, .cam--dark.cam--link:focus-visible .cam__msg-big { color: var(--bone); }
.cam--link:hover .osd--play, .cam--link:focus-visible .osd--play,
.tape:hover .osd--play, .tape:focus-visible .osd--play { background: var(--bone); color: var(--black); }

/* focus: 3px, 3px off. green on ground, black on green/bone, bone on blue */
.cam--link:focus-visible, .tape:focus-visible, .exhibit__frame:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; z-index: 5; }
.cta:focus-visible, .plugs a:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.field--green .cta:focus-visible, .field--bone .cta:focus-visible { outline-color: var(--black); }
.field--blue .cta:focus-visible { outline-color: var(--bone); }

/* ---------------- the punch: one, green, on CAM 01's corner seam ---------------- */
.starburst--wall {
  grid-area: main;
  justify-self: end;
  align-self: end;
  position: relative;
  z-index: 6;
  width: 64px;
  height: 64px;
  transform: translate(50%, 50%);
  pointer-events: none;
  animation: flick 9s steps(1) infinite;
}

/* ---------------- console: status, facts, CTAs under the wall ---------------- */
.console {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 24px 40px;
  /* 30, not 18: the punch hangs 32px under CAM 01's corner and must clear the CTAs */
  padding-top: 30px;
}
.console__read { display: flex; flex-direction: column; gap: 14px; }
.console__status {
  font-family: var(--anton);
  font-size: clamp(26px, 3.4vw, 44px);
  line-height: 1;
  color: var(--bone);
  transform: skewX(-6deg);
  transform-origin: left bottom;
}
.console__status .date { color: var(--green); }
.console__status .rd { height: 0.72em; vertical-align: 0; }
.console__note { font-size: 13px; line-height: 1.5; color: var(--bone); }
@media (min-width: 641px) { .console__note { white-space: nowrap; } }
.console__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.console__ctas .cta { text-align: center; }

.facts--left { justify-content: flex-start; }
.facts--left li:first-child { padding-left: 0; }

/* =================================================================
   FIELDS, retuned for the wall
   ================================================================= */
.teaser .field__inner { max-width: 1240px; }
.teaser .field--bone .field__inner { max-width: 880px; }
.teaser .rules, .teaser .channels { max-width: 880px; }
/* shrink-wrap the skewed headings: a full-width block skewed -6deg pushed its
   top-right corner past the viewport at 1280 */
.teaser .display { align-self: flex-start; }
.teaser .field--bone .display { align-self: center; }

/* =================================================================
   #lineup · the camera bank (blue field)
   ================================================================= */
.bank__count {
  align-self: flex-start;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--black);
  background: var(--green);
  padding: 6px 10px;
}

.bank {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.slot { display: flex; flex-direction: column; min-width: 0; }
.slot--wide { grid-column: span 2; }

.slot__screen {
  position: relative;
  flex: 1;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  isolation: isolate;
  background: var(--panel);
  outline: 1px solid rgba(0, 0, 0, 0.5);
}
.slot--wide .slot__screen { aspect-ratio: auto; }

/* offline snow: see .cam--dark::before. no two dead feeds in sync */
.slot:nth-child(2n) .slot__screen::before { background-position: 70px 40px; animation-delay: -0.15s; }
.slot:nth-child(3n) .slot__screen::before { background-position: 130px 90px; animation-delay: -0.3s; animation-duration: 0.5s; }
.slot:nth-child(5) .slot__screen::before { background-position: 40px 150px; opacity: 0.4; }
.slot:nth-child(7) .slot__screen::before { background-position: 160px 20px; animation-delay: -0.1s; }
.slot__screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--scan);
  pointer-events: none;
}

/* status chip text comes from data-state, so a reveal is one attribute flip */
.slot__status::after { content: "NO SIGNAL"; }
.slot[data-state="offline"] .slot__status { color: var(--body); }
.slot[data-state="live"] .slot__status::after { content: "LIVE"; }
.slot[data-state="live"] .slot__status { color: var(--green); }
.slot[data-state="live"] .slot__status::before {
  content: "";
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  margin-right: 0.6em;
  vertical-align: -0.05em;
  background: var(--green);
}

/* the name: a content-free censor bar until live. one width for every slot,
   CAM 12's double one included, at every width: a bar must never hint at the
   length of a name. Fixed px, never a % of the slot (150 fits the narrowest
   4-column slot at 981px; 96 fits a 2-column phone slot at 320px). */
.slot__name {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  z-index: 3;
  transform: translateY(-50%);
  display: flex;
  justify-content: center;
  padding: 0 12px;
}
.slot .redact {
  flex: none;
  width: 150px;
  height: 26px;
  background: var(--black);
}
.slot[data-state="live"] .slot__name {
  font-family: var(--anton);
  font-size: clamp(22px, 2.6vw, 36px);
  line-height: 1;
  text-align: center;
  color: var(--green);
  transform: translateY(-50%) skewX(-6deg);
}
.slot[data-state="live"] .slot__screen { background: var(--ground); outline-color: var(--green); }
/* a live feed keeps faint scanlines, in green, so it still reads as a monitor */
.slot[data-state="live"] .slot__screen::after { background: repeating-linear-gradient(0deg, rgba(57, 255, 20, 0.08) 0 1px, transparent 1px 3px); }

.slot__role {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 3;
  padding: 5px 7px 4px;
  background: var(--green);
  color: var(--black);
  font-weight: 700;
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: 0.2em;
  white-space: nowrap;
}

.bank__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  padding-top: 8px;
}
.bank__foot p { font-size: 14px; color: var(--bone); }
.field .bank__foot .cta { align-self: center; }

/* =================================================================
   #photos · the 05.09 tapes and the exhibits (ground)
   ================================================================= */
.tapes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.tape { display: flex; flex-direction: column; text-decoration: none; color: var(--bone); }
.tape__screen { aspect-ratio: 3 / 2; }

.tape__label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding: 12px 14px 10px;
  background: var(--green);
  color: var(--black);
}
.tape--blue .tape__label { background: var(--blue); color: var(--bone); }
.tape--blue .osd--play { background: var(--blue); color: var(--bone); }
.tape:hover .tape__label, .tape:focus-visible .tape__label { background: var(--bone); color: var(--black); }

.tape__name {
  font-family: var(--anton);
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1;
  transform: skewX(-6deg);
}
.tape__meta { font-weight: 700; font-size: 11px; letter-spacing: 0.2em; }

/* detection box: frames objects or a crowd far off, never a face, never a name */
.detect {
  position: absolute;
  z-index: 3;
  border: 2px solid var(--bone);
  pointer-events: none;
}
.detect__tag {
  position: absolute;
  left: -2px;
  bottom: 100%;
  max-width: calc(100% + 4px);
  padding: 4px 6px 3px;
  background: var(--bone);
  color: var(--black);
  font-weight: 700;
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: 0.18em;
}
.detect--tape { left: 46%; top: 30%; width: 46%; height: 34%; }
.detect--tape .detect__tag { white-space: nowrap; }

.exhibits__head {
  align-self: flex-start;
  margin-top: 24px;
  font-family: var(--anton);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 36px);
  line-height: 1;
  color: var(--green);
  transform: skewX(-6deg);
  transform-origin: left bottom;
}
.exhibits__lede { margin-top: -18px; font-size: 14px; color: var(--bone); }

.exhibits {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 16px;
}
.exhibit { display: flex; flex-direction: column; gap: 10px; }
.exhibit__frame { aspect-ratio: 4 / 5; }
.exhibit__frame .cam__media { object-position: 50% 50%; }
/* in an exhibit the tag sits inside the box's top-left corner */
.exhibit .detect__tag { bottom: auto; top: -2px; font-size: 9px; letter-spacing: 0.14em; padding: 3px 5px; }
/* coordinates measured against the 4:5 cover-cropped frame */
.detect--a { left: 18%; top: 8%;  width: 66%; height: 72%; }
.detect--b { left: 22%; top: 27%; width: 54%; height: 35%; }
.detect--c { left: 20%; top: 40%; width: 60%; height: 52%; }
.detect--d { left: 12%; top: 12%; width: 76%; height: 26%; }
.exhibit__frame:hover .detect, .exhibit__frame:focus-visible .detect { border-color: var(--green); }
.exhibit__frame:hover .detect__tag, .exhibit__frame:focus-visible .detect__tag { background: var(--green); color: var(--black); }

.exhibit figcaption { font-size: 13px; line-height: 1.6; color: var(--bone); }
.exhibit__no {
  display: block;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--green);
}

/* =================================================================
   #terms · #becoming
   ================================================================= */
.terms__note { max-width: 560px; margin-top: -12px; font-size: 14px; color: var(--bone); }

.channels {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.ch { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ch__screen {
  position: relative;
  display: flex;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  isolation: isolate;
  background: var(--ground);
  outline: 1px solid var(--bone);
}
/* brand test bars where the picture should be: flat, four equal */
.ch__screen--bars i { flex: 1 1 0; }
.ch__screen--bars i:nth-child(1) { background: var(--green); }
.ch__screen--bars i:nth-child(2) { background: var(--bone); }
.ch__screen--bars i:nth-child(3) { background: var(--blue); }
.ch__screen--bars i:nth-child(4) { background: var(--ground); }
.ch__screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--scan);
  pointer-events: none;
}
/* the night is on tape: green duotone, the same build as the cams (grey
   footage under a multiply layer), so it reads dark until the frame loads */
.ch--on img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  filter: grayscale(1) contrast(1.35) brightness(1.08);
}
.ch--on .ch__screen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--green);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.ch__chip {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 5px 8px 4px;
  font-weight: 700;
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: 0.22em;
  white-space: nowrap;
  color: var(--bone);
  background: var(--ground);
}
.ch__chip--on { left: 8px; top: 8px; transform: none; color: var(--black); background: var(--green); }
.ch__name {
  font-family: var(--anton);
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1;
  color: var(--green);
  transform: skewX(-6deg);
  transform-origin: left bottom;
}
.ch__tag { font-weight: 700; font-size: 11px; line-height: 1.4; letter-spacing: 0.22em; color: var(--green); }
.ch__tag--dim { color: rgba(242, 240, 236, 0.75); }

/* =================================================================
   #list · the next tape's label (bone)
   ================================================================= */
.list__head {
  font-size: clamp(40px, 6vw, 72px);
  color: var(--black);
  margin-top: -8px;
}

.tapelabel {
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px;
  border: 2px solid var(--black);
  text-align: left;
}
.tapelabel div {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.2em;
  color: var(--black);
}
/* dotted leaders between the field and its value: a border, not a gradient */
.tapelabel dt { flex: 1 1 auto; display: flex; align-items: baseline; gap: 10px; }
.tapelabel dt::after { content: ""; flex: 1 1 auto; border-bottom: 1px dotted var(--black); }
.tapelabel dd { margin: 0; white-space: nowrap; }

.tapelabel__foot {
  width: min(420px, 100%);
  margin-top: -32px;
  padding: 8px 12px;
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.3em;
  color: var(--bone);
  background: var(--ground);
}

/* =================================================================
   #shameless · compact
   ================================================================= */
.field--tight { padding-top: 64px; padding-bottom: 64px; }
.display--small { font-size: clamp(36px, 5vw, 56px); }
.remote__copy { max-width: 560px; font-size: 14px; color: var(--bone); }
.remote__label { margin-top: 40px; }

/* footer lines wrap centred on a phone, like the lines above them */
.teaser .footer__meta { text-align: center; }

/* =================================================================
   MOTION OFF: the poster still (same duotone), nothing loops
   ================================================================= */
@media (prefers-reduced-motion: reduce) {
  .cam__roll, .cam--main .cam__media, .osd--rec::before,
  .cam--dark::before, .slot[data-state="offline"] .slot__screen::before,
  .starburst--wall { animation: none; }
  .cam__roll { display: none; }
}

/* =================================================================
   TABLET: CAM 01, then the console (JOIN THE LIST in the first screen),
   then the four small feeds in a row. DOM order = visual order.
   ================================================================= */
@media (max-width: 980px) {
  .monitor__inner {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-areas:
      "osd  osd  osd  osd"
      "main main main main"
      "con  con  con  con"
      "c02  c03  c04  c05";
  }
  .cam--main { aspect-ratio: 16 / 10; min-height: 0; }
  .lockup--cam { --lk: min(500px, 74vw); }
  .console { padding: 12px 0 14px; }
  /* the punch moves to the feed row's outer bottom-left corner (CAM 02) */
  .starburst--wall { grid-area: c02; justify-self: start; transform: translate(-12px, 50%); }
  /* the punch lands on CAM 02's bottom-left, so its timestamp steps aside */
  .osd--stack-hide { display: none; }
  .cam__msg { font-size: 11px; padding: 26px 6px; }
  .cam__msg-big { font-size: 24px; }
  .bank { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .slot--wide .slot__screen { aspect-ratio: 8 / 3; }
  .exhibits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .detect__more { display: none; }
  .detect__tag, .exhibit .detect__tag { font-size: 10px; letter-spacing: 0.12em; padding: 3px 4px; }
  .slot--wide .redact__taunt { margin-bottom: 2px; }
}

/* =================================================================
   PHONE
   ================================================================= */
@media (max-width: 640px) {
  .monitor { padding: 12px 16px 36px; }
  .osdbar { font-size: 10px; letter-spacing: 0.16em; gap: 6px 12px; padding: 4px 0 6px; }
  .osdbar__loc { display: none; }
  .osdbar__pause { font-size: 10px; letter-spacing: 0.18em; padding: 0 10px; }
  .monitor__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "osd  osd"
      "main main"
      "con  con"
      "c02  c03"
      "c04  c05";
    gap: 5px;
  }
  .cam--main { aspect-ratio: 1 / 1; }
  .cam__ident { padding: 36px 12px; gap: 16px; }
  .osd, .slot__role { font-size: 10px; letter-spacing: 0.16em; padding: 4px 5px 3px; }
  .osd--tl, .osd--tr { top: 6px; }
  .osd--bl, .osd--br { bottom: 6px; }
  .osd--tl, .osd--bl { left: 6px; }
  .osd--tr, .osd--br { right: 6px; }
  .slot__role { left: 6px; bottom: 6px; }
  .cam__msg-big { font-size: 22px; }
  /* two columns: CAM 02's bottom-left is mid-wall, so the punch takes the
     wall's outer bottom-left corner instead (CAM 04), clear of every chip */
  .starburst--wall { grid-area: c04; width: 48px; height: 48px; transform: translate(-8px, 50%); }
  .console { gap: 16px; padding: 12px 0 14px; }
  .console__read { gap: 10px; }
  .console__ctas { flex-direction: column; align-items: stretch; width: 100%; }
  .facts--left { flex-direction: row; align-items: center; }
  .tapes { grid-template-columns: minmax(0, 1fr); }
  .field { padding-left: 16px; padding-right: 16px; }
  /* the bank fits in ~440px at 390 wide */
  .bank { gap: 6px; }
  .slot__screen { aspect-ratio: 16 / 10; }
  .slot--wide .slot__screen { aspect-ratio: 4 / 1; }
  .slot .redact { width: 96px; height: 16px; }
  /* channels become rows: screen, name, tag */
  .channels { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ch { display: grid; grid-template-columns: 120px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; row-gap: 4px; }
  .ch__screen { grid-row: 1 / span 2; }
  .ch__name { align-self: end; }
  .ch__tag { align-self: start; }
  .ch__chip { font-size: 9px; letter-spacing: 0.14em; padding: 3px 4px; }
  .ch__chip--on { left: 4px; top: 4px; }
  .exhibits { gap: 24px 10px; }
  .exhibit figcaption { font-size: 12px; }
}

/* a narrow phone keeps the OSD bar on one line: the clock drops its time */
@media (max-width: 480px) {
  .osdbar__clock .time { display: none; }
}