/* ============================================================================
   Page layer — The Future of Membership whitepaper landing page.

   Everything structural comes from the Rottman Creative Landing Pages system
   (styles.css). Six rules live here, each one a pairing or a modifier the
   system does not carry yet. Nothing here restyles a system component.
   ========================================================================= */

/* The whitepaper is a portrait document. .lp-cover__art is 7/5 landscape and
   its object-fit:cover would crop the cover's own type away. 8.5 x 11 = 17/22,
   which is also the artwork's own ratio, so cover and contain agree. */
.lp-cover__art--portrait { aspect-ratio: 17 / 22; }

/* Both apparatus rows here follow a band body, which the system does not pair
   — it pairs .lp-section-title with .lp-continuum__grid, and the reference
   pages set the numbered panel's gap inline. Same two gaps, named instead. */
.lp-band-body + .lp-numbered { margin-top: calc(var(--k) * 70px); }
.lp-band-body + .lp-sessions { margin-top: calc(var(--k) * 56px); }

/* Two places send the reader back to the card: the mid-page band and the
   cover. Land the card clear of the viewport edge, not flush against it. */
#read { scroll-margin-top: calc(var(--k) * 40px); }

/* Stacked, the cover closes the band and its button becomes the band's action,
   which is where a reader who has just read the contents wants it. It needs a
   width, though: released to the column it renders 876px wide and 1134 tall at
   980, more than a screenful of cover. */
@media (max-width: 980px) {
  .wp-cover-col .lp-cover { max-width: calc(var(--ks) * 420px); }
}

/* .lp-session__title rides --k, the display channel, which drops fast. Beside a
   1920 body that is right; beside a phone body it inverts. Measured: at 440 the
   title renders 14.4px against a 15.6px body, so the heading becomes the
   smallest type in its own block. Give it a --ks step below 700, the way the
   system gives .lp-mark its own size channel for the same reason.
   At 25px the longest of the five ("The cost of competing on access") measures
   379.6px in a 644px column at 700 and 366.3 in 400 at 440 — one line at both. */
@media (max-width: 700px) {
  .lp-session__title {
    font-size: calc(var(--ks) * 25px);
    line-height: calc(var(--ks) * 29px);
  }
}