/* ─────────────────────────────────────────────
   tv.css — TV stack (work page) + About-page TV.
   The work-page stack is now a single animated
   .webp; the glitch/RGB/scanline styles below are
   used only by the About page's static TV.
   ───────────────────────────────────────────── */

/* ── Work section / stack ───────────────────── */
.work {
  display: flex;
  justify-content: center;
  padding: 40px 0 40px;
}
.stack {
  position: relative;
  width: min(1151px, var(--stack-width));
  aspect-ratio: 1200 / 1690;   /* main-KV is 1200/2113; box hugs the 80%-tall content (2113 × 0.8) */
  --stack-shift: -10%;   /* horizontal nudge for the whole wall: −left / +right */
}
/* The base TV image and the hover-layer container share the SAME box, so the
   hover hotspots/screens/tags track the TVs whenever the base's size or
   alignment changes. Coordinates in projects.js are % of this box. */
.stack__base,
.stack__fx,
#stack-layers {
  position: absolute;
  inset: 0;
  margin: 0 auto;   /* horizontal auto → centers horizontally; vertical stays at top */
  width: 80%;
  height: 100%;
  transform: translateX(var(--stack-shift));
}
.stack__base { display: block; }

/* Decorative datamosh smudges, positioned (% of this box) behind the TVs. */
.stack__fx { z-index: 0; pointer-events: none; }
.stack__fx img { position: absolute; height: auto; opacity: .6; }

/* Hover regions over each TV screen (JS positions them from data) */
.hotspot { position: absolute; cursor: pointer; }

/* Colour KV shown on a screen while hovered. Rendered immediately (no
   transition). Positioned (left/top/width/height) inline by JS from each
   project's `screen` rect; object-fit: contain fills the screen. */
.screen-kv {
  position: absolute;
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
  display: block;
}
.screen-kv.on { opacity: 1; }

/* PT torn-paper title tag shown while hovered. object-fit: contain keeps the
   tag's aspect ratio; position/size set inline by JS from each project's
   `tagBox` rect. */
.screen-tag {
  position: absolute;
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
  display: block;
}
.screen-tag.on { opacity: 1; }

/* Description shown beside the hovered screen (immediate, no transition).
   Width is set inline by JS from each project's desc.w. */
.desc {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  font-family: 'Zilla Slab', serif;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text);
}
.desc.on { opacity: 1; }

/* ── About page single TV ───────────────────── */
.about-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 70px 24px 40px;
}
.about-tv {
  position: relative;
  width: min(500px, 60vw);
}
.about-tv__img { display: block; width: 100%; position: relative; z-index: 1; }

/* Decorative signal graphics around the TV (positions % of the TV box).
   Sit behind the TV; edit positions with calibrate-about.html. */
.about-fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.about-fx img { position: absolute; height: auto; display: block; -webkit-user-drag: none; }

.bio {
  max-width: 760px;
  margin-top: 110px;
  font-size: 16.5px;
  font-weight: 400;
  color: var(--text);
  line-height: 1.55;
}
.bio p { margin: 0 0 28px; }
.bio p:last-child { margin: 0; }

@media (max-width: 720px) {
  .bio { margin-top: 56px; font-size: 15px; }
  .desc { font-size: 10px; }
}