/* world.css — what a hero slot becomes when it names a block world.
   Written 2026-09-04, when the scenes started landing on real pages. The rules here are the
   homepage's, generalised: they were proved on index.html against Phil's eye over an evening,
   and the service pages should not each re-derive them.

   The pages carry an empty .heroviz as a card — a bordered, hatched box that reserves room for
   an illustration. A slot that NAMES a world stops being a card, because the world's whole
   grammar is that the page is the ground and nothing stands on it. A frame around it would be
   a ground, drawn. */

.heroviz[data-world]{
  border:0;background:none;border-radius:0;overflow:visible;
  /* NOT align-self:stretch. The pages set that on .heroviz so an empty illustration card would
     match the copy column's height, and it makes min-height a FLOOR rather than a height — the
     row stretches the slot to whatever the copy happens to be. The engine now sizes this slot to
     hit one scale for the whole site (see fit()), and a floor it cannot go under defeats that:
     custom-ai-build sat 14px taller than it asked for and drew 2.6% bigger than everything else.
     A slot that names a world is the drawing's box, and the drawing decides how big it is. */
  align-self:center;
}

/* The canvas spans the slot and paints to transparent.
   pointer-events:none — the pane sits under the copy and turning listens on the window, so it
   never needs to receive a pointer itself.
   touch-action:auto — NOT none. On a full-width pane behind the copy, touch-action:none eats the
   page scroll on a phone: you touch the hero to scroll and nothing happens. Harmless on a small
   panel, a defect at this size; the property did not change, its blast radius did. */
.heroviz[data-world] canvas.bwcanvas{
  display:block;width:100%;height:100%;position:absolute;inset:0;
  background:transparent;pointer-events:none;touch-action:auto;z-index:0;
}

/* the copy sits above the drawing wherever the two share a box */
.herogrid{position:relative}
.herogrid > *:not(.heroviz){position:relative;z-index:1}

/* On a phone the drawing becomes a LAYER behind the copy rather than a band above it.
   Phil, 2026-09-03: "it can even go under the text, right? like... it would look fine if it
   did." A layer costs no vertical space, so the fold does not move and the drawing can be two
   and a half times bigger. It gives way by DARKENING in the fragment shader, never by opacity —
   opacity fades the solids and the world shows through its own walls, which reads as a
   rendering fault rather than a choice. */
@media(max-width:720px){
  /* align-content, not align-items: the pages set align-items:center for the desktop two-column
     row, and once blockworld.js holds the grid open to the world's height (2026-09-24) a centred
     single column would slide the copy, and its button, down the screen. The copy stays at the
     top; the room grows underneath it. */
  .herogrid{position:relative;align-items:start;align-content:start}
  .heroviz[data-world]{
    /* BOUNDED BLEED, 2026-09-04. A flat -4vw is a number, not a bound: between
       560 and 720 it reaches past the shell's own padding and puts 2–9px of
       horizontal scroll on the page. The shell pads 20px on a phone, so that is
       exactly how much room there is to bleed into. Same correction as the
       block ground's -12vw, one file over. */
    position:absolute;inset:0 calc(-1 * min(4vw, 20px));height:100%;min-height:0;margin:0;z-index:0;
    pointer-events:none;touch-action:auto;
  }
  .herogrid > *:not(.heroviz){position:relative;z-index:1}
}