/* Complete grid cells with one stroke per edge; shared by hero and closing. */
html body main [data-foam-grid] {
  position: relative;
  isolation: isolate;
}
html body main [data-foam-grid][data-foam-grid]::before {
  content: "";
  display: block;
  position: absolute;
  inset: 32px;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0 solid rgba(200, 214, 218, .25);
  border-top-width: 1px;
  border-left-width: 1px;
  box-sizing: border-box;
  border-radius: 0;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22128%22%20height%3D%22128%22%20viewBox%3D%220%200%20128%20128%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%20127.5H127.5V0%22%20fill%3D%22none%22%20stroke%3D%22%23C8D6DA%22%20stroke-opacity%3D%22.25%22%20stroke-width%3D%221%22%20vector-effect%3D%22non-scaling-stroke%22%2F%3E%3C%2Fsvg%3E");
  background-size: 128px 128px;
  background-position: 0 0;
  /* Fit complete, equally sized cells to both edges at every viewport size. */
  background-repeat: round;
  background-origin: padding-box;
  background-clip: padding-box;
  box-shadow: none;
  transform: none;
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}
html body main [data-foam-grid] > * {
  position: relative;
  z-index: 1;
}
/* Everyone's hero body is inside a width-limited wrap; extend only the artwork. */
html body #main .hero-body[data-foam-grid][data-foam-grid]::before {
  left: 50%;
  right: auto;
  width: calc(100vw - 64px);
  transform: translateX(-50%);
}
/* The template's closing section retains its existing Mineral Blue surface. */
html body main .lineage[data-foam-grid][data-foam-grid]::before {
  border-color: rgba(26, 0, 51, .15);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22128%22%20height%3D%22128%22%20viewBox%3D%220%200%20128%20128%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%20127.5H127.5V0%22%20fill%3D%22none%22%20stroke%3D%22%231A0033%22%20stroke-opacity%3D%22.15%22%20stroke-width%3D%221%22%20vector-effect%3D%22non-scaling-stroke%22%2F%3E%3C%2Fsvg%3E");
}
@media (max-width: 640px) {
  html body main [data-foam-grid][data-foam-grid]::before {
    inset: 20px 18px;
    background-size: 88px 88px;
  }
  html body #main .hero-body[data-foam-grid][data-foam-grid]::before {
    left: 50%;
    right: auto;
    width: calc(100vw - 36px);
  }
}
