/* Sony's page silhouette: centred sections that open out and draw back in.
   Scoped to the landing page; the portfolio and legal pages keep their layout. */
@media (min-width: 801px) {
  .refined.landing-page .workshop-opening {
    width: min(1180px, calc(100% - 112px));
  }

  .refined.landing-page .workbench {
    width: min(1480px, calc(100% - 64px));
  }

  .refined.landing-page .more-work.page-width {
    width: min(960px, 72%);
    padding-block: 90px 96px;
  }
  .refined.landing-page .more-work > .section-heading,
  .refined.landing-page .more-work > .services-afterword,
  .refined.landing-page .more-work .work-examples {
    width: 100%;
  }
  .refined.landing-page .more-work > .section-heading {
    gap: 42px;
  }
  .refined.landing-page .more-work .section-heading h2 {
    font-size: clamp(44px, 3.8vw, 55px);
  }
  .refined.landing-page .more-work .section-heading > p {
    max-width: 255px;
  }
  .refined.landing-page .more-work .work-examples {
    gap: 48px;
  }
  .refined.landing-page .more-work .notes-illustration,
  .refined.landing-page .more-work .report-illustration {
    height: 280px;
  }
  .refined.landing-page .more-work .report-illustration {
    padding: 28px;
  }
  .refined.landing-page .more-work .bar-chart {
    height: 145px;
  }
  .refined.landing-page .more-work .note-slip {
    width: 175px;
    min-height: 140px;
    padding: 19px;
    font-size: 13px;
  }
  .refined.landing-page .more-work .client-brief {
    width: 310px;
    padding: 24px;
  }
  .refined.landing-page .more-work .example-copy {
    width: calc(100% - 24px);
  }
  .refined.landing-page .more-work .example-copy h3 {
    font-size: clamp(30px, 2.5vw, 34px);
  }

  .refined.landing-page .process-band {
    width: min(1480px, calc(100% - 64px));
    margin-inline: auto;
    padding-block: 74px;
  }
  .refined.landing-page .process-inner.page-width {
    width: calc(100% - 112px);
    max-width: 1290px;
  }
  .landing-page .process-heading { gap: 64px; }
  .landing-page .process-steps { gap: 48px; }

  .refined.landing-page .portfolio-entry.page-width {
    width: min(1080px, 80%);
    padding-block: 96px 76px;
  }
  .landing-page .portfolio-entry-heading { gap: 50px; }
  .landing-page .portfolio-grid { gap: 40px; }

  .refined.landing-page .founder-spread.page-width {
    width: min(880px, 68%);
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: 48px;
    padding-block: 82px 98px;
  }
  .landing-page .founder-side h2 {
    font-size: clamp(50px, 4.6vw, 66px);
  }
  .landing-page[data-language="pt"] .founder-side h2 {
    font-size: clamp(46px, 4.2vw, 58px);
  }
  .landing-page .sony-letter { padding: 35px 34px 30px; }
  .landing-page .sony-letter > p { font-size: 16px; }
  .landing-page .letter-rule { left: 16px; }
  .landing-page .letter-signoff { gap: 20px; }

  .refined.landing-page .project-price.page-width {
    width: min(1160px, 86%);
    gap: 90px;
    padding-top: 64px;
  }
  .refined.landing-page .faq.wrap {
    width: min(760px, 62%);
    padding-block: 16px 92px;
  }

  .refined.landing-page .contact-band {
    width: min(1480px, calc(100% - 64px));
    margin-inline: auto;
  }
  .refined.landing-page .contact.wrap {
    width: calc(100% - 112px);
    max-width: 1290px;
    gap: 68px;
  }
}

/* Preserve the same silhouette on smaller desktop windows. */
@media (min-width: 801px) and (max-width: 1100px) {
  .refined.landing-page .more-work.page-width {
    width: 78%;
  }
  .refined.landing-page .more-work .work-examples { gap: 34px; }
  .refined.landing-page .more-work .note-slip { width: 155px; padding: 17px; }
  .refined.landing-page .more-work .client-brief { width: 275px; padding: 20px; }
  .refined.landing-page .more-work .report-illustration { padding: 22px; }
  .refined.landing-page .process-inner.page-width,
  .refined.landing-page .contact.wrap { width: calc(100% - 72px); }
  .landing-page .process-heading { gap: 40px; }
  .landing-page .process-steps { gap: 28px; }
  .landing-page .portfolio-entry-heading { gap: 35px; }
  .landing-page .portfolio-grid { gap: 30px; }
  .refined.landing-page .founder-spread.page-width {
    width: min(720px, calc(100% - 176px));
    display: block;
  }
  .landing-page .founder-side { text-align: center; }
  .landing-page .founder-side h2 { max-width: none; }
  .landing-page .sony-letter { margin-top: 35px; }
  .refined.landing-page .project-price.page-width { gap: 50px; }
  .refined.landing-page .faq.wrap {
    width: min(660px, calc(100% - 208px));
  }
  .refined.landing-page .contact.wrap { gap: 42px; }
}

@media print {
  .refined.landing-page main > .page-width,
  .refined.landing-page .more-work.page-width,
  .refined.landing-page .process-band,
  .refined.landing-page .process-inner.page-width,
  .refined.landing-page .faq.wrap { width: 100%; }
}

/* Authored heading breaks grow from a shorter first line to a longer second
   line, following Sony's staircase example. Size follows the available column. */
.landing-page .founder-side,
.landing-page .example-copy { container-type: inline-size; }
.landing-page .stepped-title .title-line {
  display: block;
  white-space: nowrap;
}
.refined.landing-page .more-work .example-copy .stepped-title {
  font-size: clamp(24px, 10.3cqi, 34px);
}
.refined.landing-page .founder-side .stepped-title {
  width: max-content;
  max-width: 100%;
  font-size: min(62px, 17cqi);
  text-align: left;
}
.refined.landing-page[data-language="pt"] .founder-side .stepped-title {
  font-size: min(58px, 15cqi);
}
@media (min-width: 801px) and (max-width: 1100px) {
  .landing-page .founder-side .stepped-title { margin-inline: auto; }
}