/* ============================================================
   cube.css — the CommuniSENSE cube (homepage only, v6)
   Additive layer. To revert: delete this file, its <link> line,
   and restore the original .photo block in index.html §how.
   ============================================================ */
.cube-stage{
  position:relative;width:100%;aspect-ratio:1/1;
  cursor:pointer;border-radius:18px;overflow:hidden;
}
.cube-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.cube-tagline{
  position:absolute;left:0;right:0;bottom:4.5%;text-align:center;
  font-style:italic;color:var(--paper);
  font-size:clamp(14px,1.6vw,17px);letter-spacing:.04em;
  opacity:0;transform:translateY(8px);
  transition:opacity 1s ease,transform 1s ease;pointer-events:none;
}
.cube-tagline .dot{color:var(--orange);font-style:normal}
.cube-tagline.show{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .cube-tagline{transition:none;opacity:1;transform:none}
}

/* ---------- Cube + copy spacing ----------
   Keep the two columns closer so the object and the words read as
   one idea. (Connecting thread removed at Ash's request.) */
#how .grid{gap:48px}
@media(max-width:900px){#how .grid{gap:32px}}