/* Shared large-screen rhythm. Mobile rules remain owned by each page. */
@media (min-width: 900px) {
  body {
    font-size: clamp(17px, 1.12vw, 19px);
  }

  .wrap {
    max-width: 1200px;
    padding-inline: clamp(36px, 5vw, 72px);
  }

  p,
  ul,
  .lead,
  .sub,
  .pull,
  .status-note,
  .why,
  .about-lead {
    max-width: 800px;
  }

  h1 {
    max-width: 980px;
  }

  h2 {
    max-width: 760px;
  }

  section {
    padding-block: clamp(82px, 7vw, 112px);
  }

  .shot {
    width: 100%;
    max-width: none !important;
    margin-block: 42px;
  }

  .workcard {
    grid-template-columns: minmax(0, .85fr) minmax(440px, 1.15fr);
    gap: clamp(64px, 7vw, 104px);
    padding-block: 64px;
  }

  .workcard .wshot img {
    max-height: 390px;
  }
}

/* The feature case study already has a wider layout system; let it use more of
   large displays while preserving comfortable reading measures. */
@media (min-width: 1200px) {
  :root {
    --max: 1280px;
  }

  .wrap {
    max-width: 1280px;
  }

  .reading,
  .section-intro {
    max-width: 860px;
  }

  .hero-showcase,
  .visual,
  .journey-figure,
  .profile-story,
  .ai-prototype {
    margin-top: 60px;
  }

  .hero-desktop {
    height: 620px;
  }
}