/* One reading edge per desktop page, shared by heroes, copy and closing asks.
   Mobile layouts and the families' artwork, type and palettes stay independent. */
@media (min-width: 761px) {
  html[data-suite] {
    --content-width: 1180px;
    --content-gutter: max(6vw, calc((100% - var(--content-width)) / 2));
  }

  /* The original two families use a narrower editorial canvas. */
  html:is([data-suite=blueprint], [data-suite=harbor]) {
    --content-width: 1052px;
  }

  html[data-suite] #main .hero,
  html[data-suite] .screen :is(.hero, .section, .closing, .success,
    .booking-hero, .booking-section, .booking-layout, .booking-success,
    .booking-nav, .booking-note, .site-nav),
  html[data-suite] .screen > .sec,
  html[data-suite] .wl-wrap {
    padding-inline: var(--content-gutter);
    max-width: none;
    margin-inline: 0;
    text-align: left;
  }

  /* Original wrappers must not add a second, narrower inset. */
  html:is([data-suite=blueprint], [data-suite=harbor]) .screen :is(.hero, .sec) > .wrap {
    max-width: none;
    width: auto;
    padding-inline: 0;
    margin-inline: 0;
  }

  html[data-suite] .screen .script-section {
    display: block;
  }
  html[data-suite] .screen .script-section[data-script-beat] .script-copy {
    width: 100%;
    max-width: 850px;
    margin-inline: 0;
    text-align: left;
    transform: none;
  }
  html[data-suite] #main .hero-copy,
  html[data-suite] .screen :is(.intro, .hero-copy) {
    margin-inline: 0;
    text-align: left;
  }
  html[data-suite] #main .hero-copy,
  html[data-suite] .screen .hero-copy {
    padding-inline: 0;
  }
  html[data-suite] #main .lede,
  html[data-suite] .screen :is(.lede, .booking-lede, .closing h2) {
    margin-inline: 0;
  }
  html[data-suite] .screen .session-meta {
    justify-content: flex-start;
  }

  /* Keep the original two-column photo treatment with copy on the reading edge. */
  html[data-suite] .script-illustrated > .script-copy {
    grid-column: 1;
    grid-row: 1;
  }
  html[data-suite] .script-illustrated > .ph {
    grid-column: 2;
    grid-row: 1;
  }

  /* Petal's framed invitation keeps its ornament, with consistently aligned text. */
  html[data-suite=petal] .screen .offer {
    text-align: left;
    align-items: flex-start;
    padding-inline: 0;
  }
}