/* ============================================================================
   ara-data.com · /how-we-build — ROUTE CHROME ONLY
   Front-end integration layer. 2026-08-05.

   This sheet exists so `how-we-build.css` (the design deliverable) ships
   byte-identical to the design source and can be diffed against it. Nothing
   here touches the three acts. It carries exactly two things:

     1. The route's own H1. `styles.css` styles h2/h3 but has no generic h1
        rule — the homepage's only h1 is `.hero-h1`, sized for a full-viewport
        hero. A section-opener H1 needs the h2 treatment with h1 semantics, so
        this mirrors the h2 rule's values rather than reweighting the scale or
        editing the shared stylesheet.
     2. The five optional footage slots from VEO-SHOTLIST.md.

   No new tokens, no new colours, no new type. Every value below is either a
   token from styles.css or a copy of an existing rule's value.

   ZERO NETWORK: no @import, no @font-face, no url(). The footage slots carry
   no media reference at all until route.js attaches one.
   ============================================================================ */

/* ---- 1. The route H1 -------------------------------------------------------
   Values copied verbatim from the `h2` rule in styles.css so the opener sits
   in the established type scale. Semantics change, appearance does not. */
.route-h1 {
  font-size: var(--fs-h2);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin-bottom: 24px;
}

/* ---- 2. Footage slots (VEO-SHOTLIST.md delivery contract) -------------------
   Two forms, one behaviour. Both ship EMPTY and INERT: the element carries the
   shot id in `data-veo` and nothing else. No src, no poster, no <source>, no
   <img>. With no JS, or with no footage declared in video/manifest.js, the
   page makes zero requests for these and renders exactly as it does today.

   Contract rules held here:
   · Height comes from CSS, never from the media's intrinsic size, so an
     arriving or absent file cannot move the page (contract rule 4).
   · A slot with no usable media stays `hidden`, so there is no empty navy
     band sitting between the acts while the footage does not exist. A slot
     that HAS media and whose media fails still resolves to a flat navy field
     at the declared height, which is on-brand rather than broken (rule 3).
   · Nothing here gates a diagram (rule 5): the acts do not reference,
     observe, or wait on any of this. */

/* form A — a full-bleed transition band between two acts */
.veo-band {
  position: relative;
  overflow: hidden;
  height: clamp(160px, 22vh, 260px);
  background: var(--navy-dk);
}

/* form B — a background layer inside an existing dark band */
.veo-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--navy-dk);
  z-index: 0;
}
/* the band's own content always sits above its footage layer */
.has-veo-bg > .wrap { position: relative; z-index: 1; }

.veo-band video,
.veo-bg video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}