/* Unified, centred reading column — 2026-08-13.

   The editions CSS sizes the reading measure in `ch` (h1 16ch, .lead 42ch,
   h2/p 68ch). Because `ch` scales with each element's own font-size those
   resolve to DIFFERENT pixel widths, so text blocks never shared a right edge
   and were all left-aligned in a much wider container. Measured before this file:
     1780px viewport - body text ended at x=1004 inside a 1072px container
                       centred under a 1180px header: ~420px dead space right.
      980px viewport - 213px of ragged right edge between blocks.
      900px viewport - 133px ragged.
      <=600px         - already clean (blocks fill the width).

   Fix: one measure for every block, centred. `min(660px, 100%)` leaves phones
   exactly as they were (100% of the container) while capping and centring
   from tablet up. Verified aligned + centred at 320/375/414/600/768/900/980/
   1024/1280/1440/1920/2560 with no horizontal overflow at any width.

   `!important` is required: the rules being overridden already use it
   (`body.ed-member h1|h2|h3 { margin: ... !important }` and the <=980px
   `max-width: none` rules), so specificity alone cannot win.

   SCOPE — deliberately limited to prose pages:
     - .grid card layouts are excluded, so hub pages stay full-width.
     - main.contact-page (forms), main.section.catalog-page (app/game
       catalogues) and the class-less game hero mains are NOT targeted; they
       are layout pages, not reading pages, and a prose measure would break them. */

/* Pages that wrap content in .section > .section-inner */
body.ed-member main.legal-page > .section > .section-inner > :is(h1, h2, h3, h4, h5, h6,
    p, ul, ol, dl, blockquote, figure, .cmp-wrap, .fact-wrap, .cmp-tldr, .actions, .notice),
body.ed-member main > .section > .section-inner > :is(h1, h2, h3, h4, h5, h6,
    p, ul, ol, dl, blockquote, figure, .cmp-wrap, .fact-wrap, .cmp-tldr, .actions, .notice),
/* Pages that put prose directly under main.legal-page (privacy, terms, support, refund) */
body.ed-member main.legal-page > :is(h1, h2, h3, h4, h5, h6,
    p, ul, ol, dl, blockquote, figure, .cmp-wrap, .fact-wrap, .cmp-tldr, .actions, .notice) {
  max-width: min(660px, 100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* .eyebrow is inline-flex (dot + label), so auto margins cannot centre it.
   Make it block-level flex - no background or border, so nothing stretches. */
body.ed-member main .section > .section-inner > .eyebrow,
body.ed-member main.legal-page > .eyebrow {
  display: flex !important;
}