/* styles/sections/closing-statement.css
 * Statement closing (Code Review u6eJ8g, DWV0p, SC6Wj): the Closing CTA master (closing.modifiers
 * ['statement'], rendered by scripts/lib/workflow-page.js) with its heading overridden to 35, 64, 86 on
 * 1.04 lines (-0.022em), set greedy as the frames break it, and the frame's line break from D only.
 * Recipe settings through the recipe's custom properties. */
@layer sections {
  .closing-cta--statement {
    --closing-heading-size: 35px;
    --closing-heading-lh: round(nearest, 1.04em, 1px);
    --closing-heading-ls: -0.022em;
    --closing-deck-lh: round(nearest, 1.4em, 1px);
    /* The recipe's 1px rule sits above its padding; Pencil draws it inside the 32 */
    --closing-body-pad: 31px;
  }

  /* Pencil wraps greedily; the foundation's p { text-wrap: pretty } would rewrap the frame's lines */
  .closing-cta--statement p,
  .closing-cta--statement .closing-cta__heading { text-wrap: wrap; }

  .closing-cta--statement .closing-cta__heading br { display: none; }

  /* From D the heading's first line ("The repo explains how a name appeared.") is 16.3em: below 1440
     the size follows the content width so the frame's two lines hold, up to the frame's 64 */
  @media (min-width: 900px) {
    .closing-cta--statement { --closing-heading-size: min(64px, (100vw - 2 * var(--page-gutter)) * 0.06); }
    .closing-cta--statement .closing-cta__heading br { display: initial; }
  }

  @media (min-width: 1680px) {
    .closing-cta--statement { --closing-heading-size: 86px; }
  }
}