/* home.css: home-page-only tuning, loaded after arcade.css.

   THE STREET ON A PHONE (the gap the Sept 20 audit named and left open).
   The desktop street is an overlay: the copy sits on the picture. On a 360px
   phone that put the car behind the headline, so "one headlight" was written
   over a car whose headlight you could not see. Below 720px the section is now
   two stacked things: a picture band (lamp, plate, car, the one live headlight)
   and the copy underneath it on solid room-colour. Same layers, same parallax,
   different arrangement. */
@media (max-width: 720px) {
  .street { --band: min(330px, 92vw); min-height: 0; display: block; }
  .slayer {
    inset: 0 -6% auto -6%; height: calc(var(--band) * 1.12);
    -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
  }
  .car { width: 96%; right: 0; bottom: 16%; }
  .beam { right: 30%; bottom: 15%; width: 62%; height: 30%; }
  .sd3::after { right: 3%; bottom: 14%; width: 84%; height: 16px; }
  .street::after { display: none; }
  .street-copy { margin-top: var(--band); padding-top: 22px; background: none; }
  .street-copy .kicker { margin-top: 0; }
}

/* ── the original 16 poster, as the archive teaser on the home page ───── */
.poster-teaser {
  display: block; position: relative; margin-top: var(--s-4, 30px);
  border-radius: 6px; overflow: hidden; background: #0a0b0c; text-decoration: none;
  box-shadow: 0 0 0 2px #191b1d, 0 0 0 3px rgba(240,232,208,.22), 0 22px 40px -18px rgba(0,0,0,.95);
}
.poster-teaser img { display: block; width: 100%; height: auto; transition: transform .6s ease; }
.poster-teaser::after {                       /* the lamp over the wall */
  content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(90% 120% at 50% -25%, rgba(255,190,96,.24), transparent 62%);
}
.poster-teaser-cap {
  position: absolute; left: 12px; bottom: 12px; z-index: 1; padding: 10px 14px;
  background: rgba(6,10,9,.88); color: var(--cream); border-radius: 3px;
  font: 700 15px/1.1 var(--type); box-shadow: inset 0 0 0 1px rgba(240,232,208,.24);
}
.poster-teaser:hover img, .poster-teaser:focus-visible img { transform: scale(1.025); }
@media (prefers-reduced-motion: reduce) { .poster-teaser img { transition: none; } .poster-teaser:hover img { transform: none; } }

/* ── the show: copy left, the television right ────────────────────────── */
.show-split { display: grid; gap: var(--s-5, 44px); align-items: start; margin-top: var(--s-4, 30px); }
.show-split .lede { margin-top: 0; }
@media (min-width: 900px) {
  .show-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 4vw, 64px); }
}

/* ── pixel icons on the four plain-words cards ────────────────────────── */
.plain-card .pi { display: block; margin: 0 0 12px; color: var(--amber, #f2a93b); filter: drop-shadow(0 0 6px rgba(242,169,59,.35)); }

/* ── hero: a little air under the header ──────────────────────────────────
   At 1440 the headline started ~24px below the cigarette meter, which read as
   crowded against the bar. */
@media (min-width: 980px) {
  .copy { padding-top: 124px; }
}

/* the receipt's red 2%: the page-wide scanline overlay (site.css body.page::after) darkens every third row
   by 20%, and at #a42c18 (5.3:1 on the paper) those rows measured 3.4:1. A deeper red holds 5.3:1 on them. */
.row dd.low { color: #83200e; font-size: 19px; }   /* 19px bold = WCAG large text (>=18.66px), and the deeper red holds 4.5:1 even on the scanline rows */