/* About Us: body copy at 18px on every section (client, 2026-09-18).
   The sections are 1672x941 artboards whose type is sized in cqw of the
   1184px canvas (the 1320px wrap less its padding), so 18px is 1.52cqw: the
   same 18px at every desktop width from 1456px up, a hair under on smaller
   laptops, and it keeps scaling with the artboard as it always has.

   The comps placed every paragraph at a fixed top with hard line breaks and
   no wrapping, which only holds at one size. At 18px they collide, so on the
   four artboard sections (chapter, community, gratitude, future) the copy now
   flows inside one absolutely placed wrapper per section, the way the
   question section already works: same left edge and start line, the same
   paragraph rhythm expressed in em, natural wrapping, and the closing line
   and rule follow the copy. Each canvas reserves the extra height below its
   artboard as a bottom margin (a % of its width, so it scales with the art). */

/* ---- size ---- */
@media (min-width: 901px) {
  .r3-page.c12 .fs2w .fs__letter p,
  .r3-page.c12 .qs .qs__lead,
  .r3-page.c12 .qs .qs__p,
  .r3-page.c12 .qs .qs__p2,
  .r3-page.c12 .nc .nc__col,
  .r3-page.c12 .cx .cx__p,
  .r3-page.c12 .gx .hg__p,
  .r3-page.c12 .fx .fx__p,
  .r3-page.c12 .fx .fx__still {
    font-size: 1.52cqw;
  }
  /* the letter's column divider takes its inset from the copy size */
  .r3-page.c12 .fs2w .fs__letter > .nc__divider {
    font-size: 1.52cqw;
  }
  /* the question lead no longer needs its comp break: one word was orphaning */
  .r3-page.c12 .qs .qs__lead br {
    display: none;
  }

  /* ---- flow wrappers ---- */
  .r3-page.c12 .nc__copy,
  .r3-page.c12 .cx__copy,
  .r3-page.c12 .hg__copy,
  .r3-page.c12 .fx__copy {
    position: absolute;
    margin: 0;
  }
  .r3-page.c12 .nc__copy > *,
  .r3-page.c12 .cx__copy > *,
  .r3-page.c12 .hg__copy > *,
  .r3-page.c12 .fx__copy > *,
  .r3-page.c12 .fx__col > * {
    position: static;
    left: auto;
    top: auto;
    right: auto;
    bottom: auto;
    width: auto;
    max-width: none;
    white-space: normal;
  }
  /* the closing display lines keep their single line as in the comps */
  .r3-page.c12 .nc .nc__close,
  .r3-page.c12 .cx .cx__values,
  .r3-page.c12 .gx .hg__call,
  .r3-page.c12 .fx .fx__l4 {
    white-space: nowrap;
  }
  .r3-page.c12 .nc__copy br,
  .r3-page.c12 .cx__copy .cx__p br,
  .r3-page.c12 .hg__copy br,
  .r3-page.c12 .fx__col br {
    display: none;
  }

  /* chapter: one column under the headline (two no-wrap columns need 46% of
     the canvas at this size and the collage starts at 41%) */
  .r3-page.c12 .nc .nc__copy {
    left: 7.3%;
    top: 43.54%;
    width: 33.6%;
  }
  .r3-page.c12 .nc .nc__col p + p,
  .r3-page.c12 .nc .nc__col1 + .nc__col2,
  .r3-page.c12 .nc .nc__divider + .nc__col2 {
    margin-top: .804em;
  }
  .r3-page.c12 .nc .nc__divider {
    display: none;
  }
  .r3-page.c12 .nc .nc__close {
    margin-top: 2.04cqw;
  }
  .r3-page.c12 .nc .nc__rule {
    display: block;
    width: 3.65cqw;
    margin-top: 1.97cqw;
  }

  /* community */
  .r3-page.c12 .cx .cx__copy {
    left: 52.75%;
    top: 37.33%;
    width: 47.25%;
  }
  .r3-page.c12 .cx .cx__p + .cx__p {
    margin-top: .804em;
  }
  .r3-page.c12 .cx .cx__pull {
    position: relative;
    width: 79.5%;
    height: 4.067cqw;
    margin: .55em 0 1em -1.77%;
  }
  .r3-page.c12 .cx .cx__values {
    margin-top: 1.5em;
  }

  /* gratitude */
  .r3-page.c12 .gx .hg__copy {
    left: 6.79%;
    top: 47.18%;
    width: 42.8%;   /* the comp's measure: the pinned photograph starts at 51% */
  }
  .r3-page.c12 .gx .hg__p + .hg__p {
    margin-top: .804em;
  }
  .r3-page.c12 .gx .hg__call {
    position: relative;
    margin: 1.55em 0 .75em;
  }

  /* future: two flowing columns with the divider between them, the close and
     its rule across both */
  .r3-page.c12 .fx .fx__copy {
    left: 51.6%;
    top: 39.4%;
    width: 48.4%;
    display: grid;
    grid-template-columns: 48% 1px minmax(0, 1fr);
    align-items: start;
  }
  .r3-page.c12 .fx .fx__col {
    min-width: 0;
  }
  .r3-page.c12 .fx .fx__colL {
    padding-right: 9%;
  }
  .r3-page.c12 .fx .fx__colR {
    padding-left: 7.9%;
  }
  .r3-page.c12 .fx .fx__col > * + * {
    margin-top: .804em;
  }
  .r3-page.c12 .fx .fx__divider {
    position: static;
    width: 1px;
    height: auto;
    align-self: stretch;
    margin: .675cqw 0;
  }
  .r3-page.c12 .fx .fx__l4 {
    grid-column: 1 / 4;
    margin-top: 2.04cqw;
    font-size: 2.449cqw;   /* the close shares .fx__p; keep its display size */
    line-height: 1;
  }
  .r3-page.c12 .fx .fx__rule {
    grid-column: 1 / 4;
    display: block;
    width: 3.65cqw;
    margin-top: 1.97cqw;
  }

  /* ---- room below each artboard for the copy that now runs past it.
     Measured at the 1184px canvas (copy bottom minus canvas bottom: 90, 57,
     150 and 142px) as a % of the canvas width, plus a hair for font rounding.
     Type and columns are both proportional to the canvas, so the wrap and
     therefore the overrun are the same at every desktop width. ---- */
  .r3-page.c12 .nc .nc__canvas { margin-bottom: 8%; }
  .r3-page.c12 .cx .cx__canvas { margin-bottom: 5.2%; }
  .r3-page.c12 .gx .gx__canvas { margin-bottom: 13%; }
  .r3-page.c12 .fx .fx__canvas { margin-bottom: 12.4%; }
  /* keep that margin inside the section box (no collapse through the wrap),
     so the section's own paper covers it */
  .r3-page.c12 .nc,
  .r3-page.c12 .cx,
  .r3-page.c12 .gx,
  .r3-page.c12 .fx {
    display: flow-root;
  }
}

/* ---- phones: the wrappers step aside and the existing stacked rules apply;
   the copy is 18px there too ---- */
@media (max-width: 900px) {
  .r3-page.c12 .nc__copy,
  .r3-page.c12 .cx__copy,
  .r3-page.c12 .hg__copy,
  .r3-page.c12 .fx__copy,
  .r3-page.c12 .fx__col {
    display: contents;
  }
  .r3-page.c12 .fs2w .fs__letter p,
  .r3-page.c12 .qs .qs__lead,
  .r3-page.c12 .qs .qs__p,
  .r3-page.c12 .qs .qs__p2,
  .r3-page.c12 .nc .nc__col,
  .r3-page.c12 .cx .cx__p,
  .r3-page.c12 .gx .hg__p,
  .r3-page.c12 .fx .fx__p,
  .r3-page.c12 .fx .fx__still {
    font-size: 18px;
    line-height: 1.6;
  }
}