.wall {
  position: relative;
  background: #100a0d;
  padding: var(--space-6) var(--space-2);
  overflow: hidden;
}

.wall__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.wall__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

/* #wall-video-2 sits stacked on top of #wall-video, invisible until
   js/wall-video.js flips this on when the first clip ends — the same
   pattern as .hero__video--loop, except no transition here either way
   (see the HTML comment: this is a deliberate hard cut to a different
   time/place, not a seam meant to hide). */
.wall__video--handoff {
  opacity: 0;
}
.wall__video--handoff.is-active {
  opacity: 1;
}

/* darkness pass over the video: near-opaque across the whole left column
   where the headline/body copy sits, easing off past ~65% so the shot
   itself — the mural, then the S4S member — still reads through on the
   right, which is also where the frame's own subject ends up centered. */
.wall__texture {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg, rgba(16,10,13,0.96) 0%, rgba(16,10,13,0.93) 45%, rgba(16,10,13,0.6) 65%, rgba(16,10,13,0.82) 100%),
    linear-gradient(180deg, rgba(16,10,13,0.55) 0%, transparent 25%, transparent 65%, rgba(16,10,13,0.92) 100%),
    repeating-linear-gradient(115deg, rgba(255,255,255,0.015) 0 2px, transparent 2px 6px);
}

/* Left-anchored, not centered: with a full-height video behind it now
   (see .wall__bg above) instead of the old static mural photo, a centered
   60rem column put the gallery dead in the middle of the frame — right on
   top of the subject, who reads center-to-center-right in all three
   generated clips. Padding from the true edge (same left inset as
   .hero__content) plus a max-width on each piece below, rather than one
   wide wrapper, keeps everything inside the darkening gradient's opaque
   zone (.wall__texture stays >=0.93 out to ~45% width) and leaves the
   video's own center clear — the same asymmetric "safe zone left, stage
   right" split the hero already uses. */
.wall__content {
  position: relative;
  z-index: 2;
  padding-left: var(--space-3);
  padding-right: var(--space-4);
}

.wall__eyebrow { color: var(--orange); text-shadow: 0 1px 3px rgba(0,0,0,0.85), 0 2px 12px rgba(0,0,0,0.5); }

.wall__headline {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(4rem, 16vw, 9rem);
  line-height: 0.85;
  color: var(--magenta);
  -webkit-text-stroke: 2px rgba(255,255,255,0.08);
  filter: drop-shadow(0 4px 0 rgba(0,0,0,0.4));
  margin: 0 0 var(--space-4);
}

/* short two-line tagline, not a lore paragraph — sized and weighted to
   read at a glance against the video, full opacity (not the old body
   copy's 0.88) so it stays legible even where the darkening gradient
   eases off toward the frame's right side. */
.wall__body {
  max-width: 30ch;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: clamp(1.2rem, 2.8vw, 1.65rem);
  font-weight: 800;
  line-height: 1.3;
  color: var(--fg);
  text-shadow: 0 2px 6px rgba(0,0,0,0.92), 0 8px 26px rgba(0,0,0,0.6);
}
.wall__body em {
  color: var(--cyan);
  font-style: normal;
  text-shadow: 0 2px 6px rgba(0,0,0,0.92), 0 0 20px rgba(20,230,230,0.45);
}