/* ===========================================================================
   THE MISSION

   The same sheet as the survey — the chrome, the crest header and the
   dividers all come from survey.css — carrying prose instead of a form.

   The page is built to end well. Everything above the charge is set quietly so
   that the three lines, and the seal under them, are the only places the page
   raises its voice.
   =========================================================================== */

.mission {
  /* Outside the sheet is the dark desk; the sheet sets its own ink. */
  color: var(--on-dark);
  /* Matches the survey, so the two sheets read as the same stock. */
  font-size: clamp(1.06rem, 1rem + 0.34vw, 1.22rem);
}

/* --- The statement ------------------------------------------------------ */

/* Every paragraph is set the same way: centred, one size, one leading. The
   statement was centred on its own for a while with the two paragraphs under
   it ranged left, which gave the page two different textures and read as
   though the explanation belonged to a different document. */
.creed {
  /* Narrower than --measure. Centred type has a ragged left as well as a
     ragged right, and a shorter line keeps both edges close enough to the
     centre that the block still reads as a column rather than as a drift. */
  max-width: 30rem;
  margin: 0 auto;
  text-align: center;
}

.creed p {
  margin-top: var(--sp-6);
  font-size: var(--step-1);
  /* Looser than the default: this is read slowly, and the extra leading is
     what makes a page of prose feel unhurried rather than dense. */
  line-height: 1.75;
  color: var(--ink);
  /* Centred lines live or die on where they break. `pretty` evens the rag and
     keeps a single word off the last line, which is far more obvious when
     that line is centred than when it is ranged left. */
  text-wrap: pretty;
}

.creed p:first-child {
  margin-top: 0;
}

/* Short enough for the browser to balance outright rather than merely tidy. */
.creed__lead {
  text-wrap: balance;
}

.creed__divider {
  margin: var(--sp-8) auto var(--sp-7);
  max-width: 24rem;
}

/* --- The charge --------------------------------------------------------- */

/* Three lines, each on its own — they are a sequence, not a sentence, and
   running them together would flatten them into a slogan. */
.charge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  /* The display FACE, but not the .display class: that class sets uppercase,
     and three short lines in full capitals read as shouting rather than as a
     charge. Title case carries it. */
  font-family: var(--font-display);
  letter-spacing: var(--track-display);
  color: var(--copper-text);
  text-align: center;

  /* The lines are sized against this box rather than the viewport, so the fit
     is exact no matter what the sheet's padding works out to at a given
     width. See .charge__line. */
  container-type: inline-size;

  /* Fallback for anything without container units: the viewport factor that
     clears the tightest case (a 320px screen). Browsers that do support them
     never use this — the rule below wins. */
  font-size: clamp(1.05rem, 6vw, 1.8rem);
}

.charge__line {
  /* Every line has to hold on one line: a charge that breaks mid-phrase
     reads as a fragment.

     The longest is "Share the Gospel" at 11.33em, so a line fits while the
     font stays under 1/11.33 = 8.83% of the container. 8.2cqw holds that with
     room to spare, and never exceeds the 1.8rem the charge is designed at, so
     nothing changes on a desktop. */
  font-size: min(1.8rem, 8.2cqw);

  /* Belt and braces: should a longer line ever be added here, it wraps as
     whole phrases rather than orphaning a word. */
  text-wrap: balance;
}

/* --- Back out ----------------------------------------------------------- */

.creed__foot {
  margin-top: var(--sp-9);
}

.creed__back {
  font-family: var(--font-secondary);
  font-size: var(--step--1);
  letter-spacing: var(--track-secondary);
  text-transform: uppercase;
  text-indent: var(--track-secondary);
}

.creed__back a {
  color: var(--ink-soft);
  text-decoration-color: var(--copper-a55);
  text-underline-offset: 0.35em;
}

.creed__back a:hover {
  color: var(--copper-text);
  text-decoration-color: var(--copper-text);
}