/* fix.css — loaded after heroes.css, on / only.
 *
 * The copied sheets stay byte-identical to design/v3 (verify-verbatim gates
 * that); this file holds only additive repairs to the prototype's
 * 641px–1369px gap. The design draws two layouts — a side-by-side desktop
 * hero that needs ≥1370px and a ≤640px mobile stack — and nothing between,
 * so at tablet widths the hero copy ran off-canvas and three fixed-size
 * pieces pushed the document sideways. Every rule either extends the
 * design's own narrow treatment or clamps a fixed size with min(); nothing
 * binds at ≤640 (the mobile sheet owns that band) or at ≥1370px (the
 * desktop row fits there).
 */

/* ---------- the hero stacks until its row fits ----------
 * .t5-r sits at left:830px;width:540px — off-canvas or cut below 1370px.
 * Stack it over the wall exactly like the mobile design does; below 1370px
 * the wall becomes the same single-column marquee the ≤640px rules draw.
 */
@media (min-width:641px) and (max-width:1369px) {
  .hz.t5{height:auto;display:flex;flex-direction:column;padding:120px 0 56px}
  .t5::before,.t5::after{display:none}
  .t5-r{position:relative;left:auto;top:auto;width:auto;max-width:840px;padding:0 40px;order:1;align-self:center}
  .t5-r .hz-sub{margin-left:auto;margin-right:auto}
  .w5{position:relative;order:2;left:auto;top:auto;bottom:auto;width:auto;height:auto;margin-top:48px;display:block;perspective:none;overflow:hidden;
      -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
      mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
  .w5col.k0,.w5col.k2{display:none}
  .w5col.k1{width:auto;transform:none;opacity:1}
  .w5col .run{flex-direction:row;width:max-content}
  /* w5x declares only a `to`, so its implicit `from` reads the element's
     computed transform — which the Wall tween keeps writing as
     translate3d(0,y,0) in a real browser, letting the marquee wander
     vertically and snap back. An explicit `from` ignores the inline
     transform entirely; the band gets a clean horizontal marquee. */
  @keyframes w5fix{from{transform:none}to{transform:translateX(calc(-50% - 8px))}}
  .w5col .run.js{animation:w5fix 40s linear infinite!important}
  .w5col .run .w5c{width:250px}
}

/* ---------- fixed-size pieces clamp to the viewport ---------- */
@media (min-width:641px) {
  /* the statement's .scr spans are white-space:pre — they cannot wrap, so
     the font steps down until the longest line fits */
  .v-st h2{font-size:min(150px,19vw);padding:0 16px}
  /* --fw already drives .film, .ctl and the JS translate; one clamp repairs
     the whole carousel */
  .films{--fw:min(1080px, calc(100vw - 32px))}
  .cta h2{font-size:min(88px,10.5vw)}
  .cta .cp{width:min(620px, calc(100vw - 32px))}
  /* the benchmark heading is white-space:nowrap — same story as the
     statement: step the font down until the line fits */
  .v-hd h2{font-size:min(68px, calc(7.9vw - 6px))}
}

/* ---------- the feature frames fold or shrink instead of clipping ---------- */
@media (min-width:641px) and (max-width:880px) {
  /* three columns cannot fit their content under ~890px; stack like the
     mobile rules do rather than letting the grid run off-page */
  .v-grid,.v-grid.b{grid-template-columns:1fr;gap:28px}
  .v-fr{aspect-ratio:auto;height:388px}
}
@media (min-width:881px) and (max-width:1369px) {
  /* three columns still, with the min-content floor lifted so the row fits;
     frames keep their designed height, just narrower */
  .v-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .v-grid.b{grid-template-columns:2fr minmax(0,1fr)}
  .v-fr{aspect-ratio:auto;height:388px}
}

/* ---------- fixed-width sheets may always shrink to the screen ---------- */
.v-modal .sheet{max-width:calc(100vw - 24px)}