/* Full-bleed loop heroes and bands. Traps closed, each paid for before:
   1. reduced-motion resolves to the FINISHED state - never a frozen mid-frame,
      never nothing. A blank band is a worse failure than movement.
   2. opacity:0 is NEVER the default. Hidden-before-reveal applies only under
      html.js, which an inline <head> script sets before paint. With scripting
      off, nothing ever hides.
   3. The still is ALWAYS in the markup and never lazy - in reduced-motion it IS
      the scene, and a lazy image that is the scene can fail to arrive.
   4. The scrim is the real contrast surface. It must be strong enough for type
      and weak enough that the picture survives - the two gates pull against
      each other on purpose. */
.bleed{position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(430px,62vh,660px);display:grid;align-items:center}
.bleed.tall{min-height:clamp(520px,82vh,820px)}
.bleed>.still,.bleed>video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;margin:0}
.bleed>video{opacity:0;transition:opacity .5s ease}
.bleed>video.on{opacity:1}
.bleed>.scrim{position:absolute;inset:0;z-index:1;pointer-events:none}
/* dark-ink hero: light type over footage */
.bleed.ink>.scrim{background:
  linear-gradient(180deg,rgba(8,7,5,.60) 0%,rgba(8,7,5,.42) 42%,rgba(8,7,5,.70) 100%)}
/* A SECOND, LOCAL wash under the text column only. Deepening the whole scrim to
   reach AA kills the footage - the contrast gate would go green while the
   picture died. This darkens where the glyphs actually are and leaves the rest
   of the frame alive, which is what the two opposing gates are for. */
.bleed.ink .bin{position:relative}
.bleed.ink .bin::before{content:"";position:absolute;inset:-10px -22px;z-index:-1;
  background:linear-gradient(90deg,rgba(5,4,3,.80) 0%,rgba(5,4,3,.72) 44%,rgba(5,4,3,.30) 78%,rgba(5,4,3,0) 100%)}
.bleed.ink .bin{color:#fff}
.bleed.ink .bin h1,.bleed.ink .bin h2{color:#fff;text-shadow:0 2px 22px rgba(0,0,0,.55)}
.bleed.ink .bin p{color:#f2ece1}
/* --gold-hi (#f0d0a0) measures 4.3:1 on the brightest footage in the set. The
   label is 11.5px caps, which is SMALL text, so the bar is 4.5:1 not 3:1. */
.bleed.ink .bin .label{color:#f8e4c6}
/* paper hero: dark type over a lightened plate */
.bleed.paper>.scrim{background:
  linear-gradient(180deg,rgba(247,243,236,.90) 0%,rgba(247,243,236,.80) 50%,rgba(247,243,236,.93) 100%)}
.bleed.paper .bin{color:var(--ink)}
.bin{position:relative;z-index:2;max-width:var(--wrap);margin:0 auto;padding:56px 22px;width:100%}
.bin .lede{max-width:62ch}
/* the still IS the poster (no video poster= attr — that would double-fetch the jpg).
   identical first frame, so the swap never flashes */
.bleed>.still{z-index:0}
@media (prefers-reduced-motion:reduce){
  .bleed>video{display:none}          /* the still IS the finished state */
}
/* reveal-on-scroll — only ever hidden when JS is actually running */
html.js .rev{opacity:0;transform:translateY(14px)}
html.js .rev.in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease}
@media (prefers-reduced-motion:reduce){
  html.js .rev{opacity:1!important;transform:none!important;transition:none!important}
}