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

   A sheet on a desk, carrying prose instead of the form the sheet was drawn
   for. The chrome, the crest header and the dividers are at the foot of this
   file; they came from survey.css until that file was deleted.

   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 {
  /* The header ends on 'Our Mission' and the statement begins immediately
     under it. On the survey a line of italic intro sat between the two and
     held them apart; there is none here, so the gap is set explicitly
     rather than left to whatever margin the first paragraph happens to
     have. */
  margin-top: var(--sp-7);
  /* 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);
}

/* ===========================================================================
   THE SHEET, THE CREST AND THE CHROME
   ---------------------------------------------------------------------------
   These rules used to live in survey.css and were loaded here alongside it.
   Closing the survey deleted that file and took the whole of this page's
   layout with it: the sheet, the mounts, the corner scrollwork and the crest
   header all lost their sizing, so the crest rendered at its natural 202x317
   and the corner ornaments at their own, and the page fell apart — worst on a
   phone, where there was no width to absorb any of it.

   They are copied here verbatim rather than left in a shared file. This is
   the only page that draws a sheet now, and a stylesheet named for a form
   that no longer exists is exactly how the link got broken in the first
   place.
   =========================================================================== */

.sheet-wrap {
  padding: clamp(var(--sp-5), 4vw, var(--sp-9)) clamp(var(--sp-3), 3vw, var(--sp-6));
}

.sheet {
  position: relative;
  max-width: var(--page);
  margin: 0 auto;
  padding: clamp(var(--sp-7), 6vw, var(--sp-9)) clamp(var(--sp-5), 5vw, var(--sp-8));
  background-color: var(--ivory);
  color: var(--ink);
  /* Lifted off the desk. The long soft shadow is what sells it as a physical
     sheet rather than a coloured div. */
  box-shadow:
    inset 0 0 0 1px var(--ivory-shade),
    0 0 0 3px var(--ivory),
    0 0 0 4px var(--copper),
    0 0 0 7px var(--ivory),
    0 0 0 8px var(--brass-deep),
    0 18px 50px rgba(0, 0, 0, 0.55),
    0 2px 10px rgba(0, 0, 0, 0.4);
}

/* The sheet needs its own parchment texture: the page behind it is wood. */
.sheet::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: multiply;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.045' numOctaves='5' seed='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)' opacity='0.3'/%3E%3C/svg%3E"),
    radial-gradient(115% 95% at 50% 45%, transparent 55%, rgba(57, 35, 23, 0.14) 100%);
  background-size: 320px 320px, cover;
}

/* --- Corner scrollwork ---------------------------------------------------
   One symbol, mirrored into each corner, set inside the brass mounts. */
.sheet__corner {
  position: absolute;
  width: clamp(2.4rem, 6vw, 3.75rem);
  height: clamp(2.4rem, 6vw, 3.75rem);
  color: var(--copper-burnished);
  opacity: 0.45;
  pointer-events: none;
}

.sheet__corner--tl { top: var(--sp-4); left: var(--sp-4); }
.sheet__corner--tr { top: var(--sp-4); right: var(--sp-4); transform: scaleX(-1); }
.sheet__corner--bl { bottom: var(--sp-4); left: var(--sp-4); transform: scaleY(-1); }
.sheet__corner--br { bottom: var(--sp-4); right: var(--sp-4); transform: scale(-1); }

@media (max-width: 34rem) {
  /* At phone width the lower corners collide with the copy. */
  .sheet__corner--bl,
  .sheet__corner--br { display: none; }
}

/* --- Crest ---------------------------------------------------------------- */
.crest {
  text-align: center;
}

/* The crest, 202x317. Height-driven so the artwork keeps its own proportions
   whatever its pixel dimensions; only the height is ever specified. */
.crest__mark {
  height: clamp(4.5rem, 16vw, 7rem);
  width: auto;
  margin: 0 auto var(--sp-4);
  /* Sits on the sheet rather than floating over it. */
  filter: drop-shadow(0 2px 6px rgba(57, 35, 23, 0.3));
}

.crest__mark--drawn {
  /* 300 x 400 viewBox */
  width: calc(clamp(4.5rem, 16vw, 7rem) * 0.75);
  color: var(--copper-burnished);
  filter: none;
}

.crest__blend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(var(--sp-2), 3vw, var(--sp-5));
  margin-top: var(--sp-3);
  max-width: 100%;
  /* The house name has to hold one line: the flanking crosses are centred on
     the row, so a wrap strands them out at the margins with nothing beside
     them. The name measures 13.65em in this face, and the ceiling here is the
     largest that still clears the crosses inside the sheet. */
  font-size: clamp(0.8rem, 4.4vw, 2.3rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.crest__blend > span {
  white-space: nowrap;
}

.crest__blend .display {
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.6));
}

.crest__flank {
  flex: none;
  width: 0.5em;
  height: 0.75em;
  color: var(--copper-burnished);
}

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

.crest__title {
  font-size: var(--step-2);
  color: var(--copper-text);
  text-indent: var(--track-secondary);
}

/* --- Sheet footer --------------------------------------------------------- */
.sheet__foot {
  max-width: var(--measure);
  margin: var(--sp-9) auto 0;
  text-align: center;
}

.orn-sm { width: 1.9rem; height: 1.9rem; }
.orn-xs { width: 1.25rem; height: 1.25rem; }