/* Shared editorial rhythm. These rules never reach into the product iframes. */
.case-page {
  --case-section-gap: 96px;
  --case-content-gap: 32px;
  --case-divider-inset: 32px;
}
.case-page > * + *,
.case-page .case-stream > * + * { margin-top: var(--case-section-gap); }
.case-page .case-stream > .rule-dots { margin-top: 0; }
.case-page .case-stream > .rule-dots + :is(.case-proof, .case-story) { margin-top: var(--case-content-gap); }
.case-page .case-stream .case-story__body {
  padding: var(--case-divider-inset) 0 0;
  min-height: 0;
}
.case-page .case-story__prose { margin-top: var(--case-content-gap); gap: var(--case-content-gap); }
.case-page .case-story blockquote { margin-top: var(--case-content-gap); padding-bottom: 0; }
.case-page .case-stream > .case-story + :is(.exact-case-showcase, .snack-analytics, .case-diagram, .campaign-archive),
.case-page .case-stream > #product-mock,
.case-page .case-stream > #team-mock,
.case-page .case-stream > #currency-mock {
  margin-top: var(--case-content-gap);
}
.case-page .case-stream > .case-story + .case-diagram {
  border-top: 0;
  padding-top: 0;
}
.case-page .case-showcase--product.exact-case-showcase {
  width: 100%;
  margin-inline: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.case-page .exact-case-shot figcaption {
  padding: 16px 0 0;
  column-gap: var(--case-content-gap);
}
.case-page .case-diagram figcaption { margin-top: var(--case-content-gap); padding-top: 0; }
.case-page .case-stream .case-outcome {
  padding-top: var(--case-divider-inset);
  padding-bottom: 0;
  border-bottom: 0;
}
.case-page .case-outcome__text > p { margin-top: var(--case-content-gap); }
.case-page .more-cases > h2 { padding-block: var(--case-divider-inset); }
.case-page .more-cases__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.case-page .more-case { padding: 32px; }

/* Two compact credentials, not two half-page billboards. */
.project-case--hypershadow .case-proof { width: 50%; }
.project-case--hypershadow .case-credential { padding: 24px; }

@media (max-width: 1100px) {
  .case-page { --case-section-gap: 80px; }
  .case-page .case-diagram .dg { min-width: 1200px; }
  .case-page .case-diagram__figure { overflow-x: auto; overscroll-behavior-x: contain; }
  .project-case--hypershadow .case-proof { width: 75%; }
}
@media (max-width: 767px) {
  .case-page { --case-section-gap: 64px; --case-content-gap: 24px; --case-divider-inset: 24px; }
  .case-page .case-toc a { width: auto; }
  .project-case--hypershadow .case-proof { width: 100%; }
  .project-case--hypershadow .case-credential { padding: 16px; }
  .case-page .more-case { padding: 20px; }
  .case-page .more-cases__grid { grid-template-columns: 1fr; }
  .case-page .exact-case-shot figcaption { grid-template-columns: 1fr; row-gap: 8px; }
}