/* Compact phone layout for the case pages. Desktop is untouched. The same
   hierarchy, less air: the header sits on one screen, facts and credentials
   size to their content, sections breathe at 48px instead of 64px. */
@media (max-width: 767px) {
  .case-page {
    --case-section-gap: 48px;
    --case-content-gap: 20px;
    --case-divider-inset: 20px;
  }

  /* Header: title first, no reserved height above it. */
  .case-page .case-hero__copy,
  .case-page .case-hero .case-hero__copy {
    min-height: 0;
    padding: 28px 20px 26px;
    background-size: 100% 100%, 28px 28px, 28px 28px;
  }
  .case-page .case-hero h1 { margin-top: 0; font-size: clamp(52px, 17vw, 76px); }
  .project-case--hypershadow .case-hero h1 { font-size: clamp(38px, 12vw, 66px); }
  .case-page .case-hero__lead { margin-top: 14px; max-width: 20ch; }
  .case-page .case-hero__note { margin-top: 10px; }
  .case-page .case-hero__media--square,
  .case-page .case-hero .case-hero__media--square { aspect-ratio: 1; height: auto; }

  /* Facts: content height, tighter padding. */
  .case-page .case-fact { min-height: 0; padding: 14px 16px 16px; }
  .case-page .case-fact dt { margin-bottom: 8px; }
  .case-page .case-fact dd { margin-top: 10px; font-size: 15px; line-height: 1.3; }

  /* Chapter strip. */
  .case-page .case-toc { min-height: 40px; }
  .case-page .case-stream > .rule-dots + :is(.case-proof, .case-story) { margin-top: 16px; }

  /* Credentials and press. */
  .case-page .case-credential { min-height: 0; padding: 16px; }
  .case-page .case-credential p { margin-top: 14px; }
  .case-page .case-press { margin-top: 16px; }
  .case-page .case-press a { min-height: 54px; }
  .project-case--hypershadow .case-proof { width: 100%; }

  /* Stories and captions. */
  .case-page .case-story__prose { margin-top: 18px; gap: 16px; }
  .case-page .case-story h2 { font-size: clamp(30px, 8.6vw, 38px); }
  .case-page .exact-case-shot figcaption { padding-top: 12px; row-gap: 6px; }
  .case-page .case-diagram figcaption { margin-top: 16px; }
  .case-page .exact-window__bar > span { display: none; }
  .case-page .product-notes { padding: 24px 0; }
  .case-page .product-decisions li { padding: 16px 0; gap: 8px; }
  .case-page .product-notes__intro { margin-bottom: 16px; }

  /* Related cases: two small cards instead of two tall ones. */
  .case-page .more-cases > h2 { padding-block: 16px; }
  .case-page .more-cases__grid { grid-template-columns: 1fr 1fr; }
  .case-page .more-case { padding: 14px; }
  .case-page .more-case img { aspect-ratio: 1; }
  .case-page .more-case > span { padding-top: 10px; }

  /* Footer. */
  .case-page .footer__top { gap: 28px; margin-top: 48px; }
  .case-page .wordmark { margin-top: 40px; }
  .case-page .footer { padding-bottom: 28px; }
}