/* Release 61: additional service sculptures and balanced seven-story grid. */
@media (min-width: 761px) {
  body[data-page="home"] .case-detail {
    display: none;
  }

  body[data-page="home"] .monolith-scene {
    grid-column: 3 / 13;
  }

  body[data-page="home"] [data-open-monolith-book] {
    display: inline-flex;
    color: var(--text);
    border-bottom-color: var(--accent-hover);
  }
}

@media (min-width: 1101px) {
  body[data-page="home"] .showcase:nth-child(1),
  body[data-page="home"] .showcase:nth-child(5) {
    grid-column: 1 / 8;
  }

  body[data-page="home"] .showcase:nth-child(2),
  body[data-page="home"] .showcase:nth-child(6) {
    grid-column: 8 / 13;
  }

  body[data-page="home"] .showcase:nth-child(3) {
    grid-column: 1 / 6;
  }

  body[data-page="home"] .showcase:nth-child(4) {
    grid-column: 6 / 13;
  }

  body[data-page="home"] .showcase:nth-child(7) {
    grid-column: 1 / -1;
  }
}

body[data-page="home"] .showcase--succession .showcase__media img {
  width: min(88%, 760px);
  transform: translate(7%, 5%);
}

body[data-page="home"] .showcase--cybersecurity .showcase__media img {
  width: min(86%, 720px);
  transform: translate(8%, 4%);
}

body[data-page="home"] .showcase--succession::after,
body[data-page="home"] .showcase--cybersecurity::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, color-mix(in oklch, var(--surface-0) 95%, transparent) 0 34%, transparent 66%);
}

body[data-page="home"] .showcase--succession .showcase__content,
body[data-page="home"] .showcase--cybersecurity .showcase__content {
  position: relative;
  z-index: 2;
}

@media (max-width: 1100px) {
  body[data-page="home"] .showcase--succession,
  body[data-page="home"] .showcase--cybersecurity {
    grid-column: auto;
  }
}

@media (max-width: 760px) {
  body[data-page="home"] [data-open-monolith-book],
  body[data-page="home"] .book-reader {
    display: none !important;
  }

  body[data-page="home"] .showcase--succession .showcase__media img,
  body[data-page="home"] .showcase--cybersecurity .showcase__media img {
    width: min(96%, 620px);
    transform: translate(7%, 1%);
  }

  body[data-page="home"] .showcase--succession::after,
  body[data-page="home"] .showcase--cybersecurity::after {
    background: linear-gradient(180deg, transparent 12%, color-mix(in oklch, var(--surface-0) 97%, transparent) 64%);
  }
}