/* Homepage hero fold placement. Replaces the hero Thinking Orb (480) in .hero .core.
   Load after orbs.css. The About page .do-now 64px orb is untouched. */
.hero .core canvas[data-hero-fold] {
  width: 540px;
  height: 540px;
  max-width: none;          /* bleeds ~18px past the column; the sheet edge is already faded to Onyx */
  margin: -30px -18px;
  aspect-ratio: 1;
  display: block;
}
@media (max-width: 1100px) {
  .hero .core canvas[data-hero-fold] { width: 460px; height: 460px; margin: -20px -10px; }
}
@media (max-width: 900px) {
  /* Fold sits behind the type, not stacked above it. */
  .hero .core {
    order: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;           /* full screen width, not the padded grid box, so the dots run to the edges */
    height: 100%;
    transform: translateX(-50%);
    z-index: 0;
    display: block;
    overflow: hidden;       /* the wider-than-screen fold is trimmed evenly, no sideways scroll */
    pointer-events: none;
    opacity: 1;
  }
  .hero .hero-grid > :first-child {
    position: relative;
    z-index: 1;
  }
  .hero .core canvas[data-hero-fold] {
    width: min(140vw, 560px);
    height: min(140vw, 560px);
    max-width: none;
    margin: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -54%);   /* true centre, nudged up slightly behind the headline */
  }
}