/* ===============================================================
   Homepage hero — "Responsive Reach"
   Loaded ONLY on index.html, on top of css/styles.css. Self-
   contained (own file, own JS in js/sapiens.js) so the whole block
   can be swapped without touching the frozen homepage sheet.
   Added 2026-08-09, replacing the lattice placeholder that stood in
   this slot since 2026-07-22.
=============================================================== */

/* The tick frame — and therefore the mark's size. js/sapiens.js reads
   this box and fits the mark's RESTING bounding box to it exactly, so
   the ticks mark the unit's boundary rather than the canvas edge. */
.sapiens-stage {
  position: relative;
  width: min(100%, 500px);
  aspect-ratio: 1;
  margin-inline: auto;
  pointer-events: none;
}

/* The canvas is the arena, not the object. It overflows the tick frame up
   and to the left — the only two directions the reach ever travels — so the
   orange can visibly extend past the unit's boundary while the body and head
   stay inside it. Growing this headroom does not grow the mark.

   Right and bottom get 2% only, for the ±3px parallax and anti-aliasing. That
   is deliberate: the mark's resting box ends flush with the stage on those
   sides, so any more pushes the page into horizontal scroll on narrow screens
   (it did, by 4px at 390, before this was tightened).

   The size MUST be stated as width/height, not as right/bottom insets. A
   canvas is a replaced element, so with width:auto it ignores the insets and
   falls back to its intrinsic backing-store size — which js/sapiens.js then
   recomputes from the CSS box, feeding back and growing it every pass. */
.sapiens-canvas {
  position: absolute;
  left: -32%;
  top: -22%;
  width: 134%;
  height: 124%;
  display: block;
}

/* Registration crop-marks framing the unit — reuses the site's .rf-tick
   motif (see css/styles.css), anchored to this block's own corners
   instead of the viewport. */
.sapiens-stage .rf-tick {
  position: absolute;
}
.sapiens-stage .rf-tl { top: 0; left: 0; }
.sapiens-stage .rf-tr { top: 0; right: 0; }
.sapiens-stage .rf-bl { bottom: 0; left: 0; }
.sapiens-stage .rf-br { bottom: 0; right: 0; }

/* Stacked layout: the object gets the full column, so cap it rather than let
   a solid ink mark run the whole width and outweigh the headline. Matches the
   restraint of the wireframe placeholder this slot used to hold. Centring it
   also keeps the extended reach on-screen instead of clipped at the left. */
@media (max-width: 899px) {
  .sapiens-stage {
    width: min(68vw, 500px);
  }
}