/* show.css — page skin for show.html. Everything is scoped under body.show so nothing leaks.
   The TV itself (crt.css / crt.js) is a reusable component; this file only places it in a room. */

/* the room's glow and haze may spill past the wrap; clip (not hidden) so nothing ever scrolls sideways */
body.show main { overflow-x: clip; }

/* ── hero: copy left, TV right. On phones the TV sits directly under the headline. ───────── */
body.show .show-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "tv" "intro";
  row-gap: var(--s-3);
  padding-top: clamp(28px, 5vw, 60px);
}
body.show .show-head  { grid-area: head; }
body.show .show-tv    { grid-area: tv; width: 100%; max-width: 640px; margin-inline: auto; }
body.show .show-intro { grid-area: intro; margin: 0; }
body.show .show-rule  { margin: var(--s-4) 0 0; border: 0; border-top: 2px dashed rgba(233,222,195,.28); }

@media (min-width: 980px) {
  body.show .show-hero {
    grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
    grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas: ". tv" "head tv" "intro tv" ". tv";
    column-gap: clamp(32px, 4.4vw, 68px);
    row-gap: 0;
  }
  body.show .show-tv { max-width: none; margin-inline: 0; }
  body.show .show-intro { margin-top: var(--s-3); }
}

/* ── the room: a dim wall, a window of cold light, a little smoke ────────────────────────── */
body.show .show-room { position: relative; isolation: isolate; }
body.show .show-room > .crt { position: relative; z-index: 2; }

/* warm spill from the set itself, and a wash of cold light from the window side */
body.show .show-room::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none; inset: -10% -14% -6% -14%;
  background:
    radial-gradient(52% 46% at 50% 44%, rgba(242,169,59,.11), rgba(242,169,59,0) 72%),
    radial-gradient(46% 40% at 88% 4%, rgba(146,196,222,.13), rgba(146,196,222,0) 72%);
}

/* the window: four panes of cold fluorescent light on the wall behind the set, a faint skewed
   parallelogram. Mullions are cut with a mask; older engines just get an unbarred patch. */
body.show .show-window {
  position: absolute; z-index: 0; pointer-events: none;
  right: -16%; top: -13%; width: 54%; height: 50%;
  background: linear-gradient(205deg, rgba(168,212,232,.42), rgba(112,160,188,.12) 72%);
  -webkit-mask-image: linear-gradient(90deg, #000 0 47%, transparent 47% 53%, #000 53%), linear-gradient(0deg, #000 0 47%, transparent 47% 53%, #000 53%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, #000 0 47%, transparent 47% 53%, #000 53%), linear-gradient(0deg, #000 0 47%, transparent 47% 53%, #000 53%);
  mask-composite: intersect;
  transform: skew(-6deg, 3deg);
  opacity: .4;
  filter: blur(1.5px);
}

/* cigarette-smoke haze: two big soft ellipses drifting very slowly behind the set. They only move
   while the TV is live (on screen, tab visible, motion allowed), the same switch the TV uses. */
body.show .show-haze {
  position: absolute; z-index: 1; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(195,205,187,.20), rgba(195,205,187,.08) 55%, rgba(195,205,187,0));
  animation: show-drift 36s ease-in-out infinite alternate; animation-play-state: paused;
  will-change: transform;
}
body.show .show-haze-a { left: -24%; top: -10%; width: 92%; height: 58%; }
body.show .show-haze-b { right: -26%; bottom: -8%; width: 84%; height: 54%; animation-duration: 49s; animation-delay: -14s; opacity: .8; }
body.show .show-room:has(.crt.is-live) .show-haze { animation-play-state: running; }
@keyframes show-drift {
  from { transform: translate3d(-5%, 3%, 0) scale(1); }
  to   { transform: translate3d(7%, -6%, 0) scale(1.16); }
}
@media (prefers-reduced-motion: reduce) {
  body.show .show-haze { animation: none; will-change: auto; }
}

/* ── the rest of the page: same words, lightly dressed to match the room ─────────────────── */
/* section numbers become little black channel plates */
body.show .block h2 .num {
  display: inline-block; margin-right: 14px; padding: 0 .38em; vertical-align: .12em;
  font-size: .68em; line-height: 1.5; letter-spacing: .05em;
  color: var(--amber); background: #0b0c0d; border-radius: var(--r-1); text-shadow: none;
  box-shadow: inset 0 1px 0 rgba(255,222,160,.2), inset 0 0 0 1px rgba(0,0,0,.75), 0 3px 8px rgba(0,0,0,.55);
}
/* the cards read as programme-guide entries: amber spine instead of green */
body.show .plain-card { border-left-color: var(--amber); }
body.show .plain-card:hover { border-left-color: #ffc978; }
/* the teaser stills get a thin amber hairline like a lit frame */
body.show .wall-teaser .pin { border-color: rgba(242,169,59,.28); }
/* the cast stills now carry width/height attributes (real pixel sizes, so nothing shifts while they load);
   height:auto keeps the attribute from fixing the height, so the existing square mat (aspect-ratio 1/1) rules as before */
body.show .wall-teaser .pin img { height: auto; }
/* below 620px site.css drops the square mat to the art's natural shape (aspect-ratio: auto), which also
   throws away the ratio the width/height attributes give an unloaded lazy image, so it collapsed to ~5px
   and jumped when it arrived. Same natural shape once loaded; the real ratio is the fallback until then. */
@media (max-width: 620px) {
  body.show .wall-teaser .pin img[src$="cameo003_0.jpg"] { aspect-ratio: auto 604 / 900; }
  body.show .wall-teaser .pin img[src$="cameo005_0.jpg"],
  body.show .wall-teaser .pin img[src$="cameo008_0.jpg"] { aspect-ratio: auto 1 / 1; }
}

/* the cast row shows the art at its own shape (three different aspect ratios), top-aligned like prints on a wall,
   so no card carries dead bands and the row is not the same three squares as the home page. */
body.show .cast-row { align-items: start; }
body.show .cast-row .pin img { aspect-ratio: auto; height: auto; background: none; }