/* ============================================================================
   Mission — missionary. Sand, dark olive-brown, gold, warm grey.
   ----------------------------------------------------------------------------
   Documentary rather than devotional: a dark opening with contour lines, a row
   of plain figures, condensed uppercase labels and monospaced numbering. The
   grid is deliberately asymmetric — a field letter index is a working document,
   not a brochure — which is what keeps it from reading as Grace in another
   colourway.
   ========================================================================== */

.demo-body--mission {
  --sand: #ede6da;
  --sand-2: #e2d9c9;
  --paper: #f7f3ea;
  --dark: #302d29;
  --dark-2: #3a3733;
  --gold: #c59a4a;
  /* Both darkened from the values in `ministry_templates`: the swatches
     describe the design's fills, and these two are used for SMALL TEXT.
     #8a8378 measured 2.68:1 on the sand footer and #8a6620 measured 3.75:1
     — the same trap styles.css documents for the brand gold. These clear
     4.5:1 on the darkest of the three light surfaces here. */
  --gold-deep: #75561d;
  --grey: #5f5a50;
  --ink: #2a2723;
  --ink-mute: #5f594f;
  --line: rgba(42, 39, 35, 0.14);

  background: var(--paper);
  color: var(--ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16.5px;
  line-height: 1.65;
}

.m-shell {
  width: 100%;
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}

.m-label, .m-letter__no, .m-letter__date, .m-figures dt, .m-region__since,
.m-give__label { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; }

h1, h2, h3 { font-weight: 650; line-height: 1.15; letter-spacing: -0.015em; }

.m-label {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 1rem;
}
.m-label--gold { color: var(--gold); }

.m-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0.6rem 1.5rem;
  border: 1px solid var(--gold-deep);
  border-radius: 0;
  background: var(--gold-deep);
  color: #fdf9f1;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.m-button:hover { background: #6d5019; border-color: #6d5019; }
.m-button--sm { min-height: 38px; padding: 0.35rem 1rem; font-size: 0.72rem; }
.m-button--outline { background: transparent; color: var(--gold-deep); }
.m-button--outline:hover { background: rgba(138, 102, 32, 0.1); color: var(--gold-deep); }
.m-button--light { background: var(--gold); border-color: var(--gold); color: #241c0d; }
.m-button--light:hover { background: #dcb672; border-color: #dcb672; color: #241c0d; }

.m-link {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold-deep);
  text-decoration: none;
  white-space: nowrap;
}
.m-link:hover { text-decoration: underline; }

/* ── Header ──────────────────────────────────────────────────────────────── */

.m-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(247, 243, 234, 0.93);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.m-header__inner { display: flex; align-items: center; gap: 1.5rem; min-height: 68px; }
.m-logo { display: flex; align-items: center; gap: 0.65rem; text-decoration: none; color: inherit; }
.m-logo__mark {
  width: 22px;
  height: 22px;
  flex: none;
  background: var(--gold-deep);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.m-logo__text {
  font-size: 0.94rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.1;
}
.m-logo__text span {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.m-nav {
  display: flex;
  gap: 1.5rem;
  margin-inline-start: auto;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.m-nav a { text-decoration: none; color: var(--ink-mute); padding-block: 0.5rem; }
.m-nav a:hover { color: var(--gold-deep); }

@media (max-width: 880px) {
  .m-nav { display: none; }
  .m-header__inner { justify-content: space-between; }
}

/* ── Hero ────────────────────────────────────────────────────────────────── */

.m-hero {
  position: relative;
  background: var(--dark);
  color: #ece7dd;
  padding-block: clamp(3.5rem, 8vw, 6rem) 0;
  overflow: hidden;
}
.m-contours { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.85; }

/* The outline button's bronze is a small-text colour for light backgrounds —
   on the dark hero it measured about 2.5:1. Inside the hero it re-scopes to
   the brighter gold, which clears 5:1 there. */
.m-hero .m-button--outline { color: var(--gold); border-color: rgba(197, 154, 74, 0.65); }
.m-hero .m-button--outline:hover { background: rgba(197, 154, 74, 0.16); color: var(--gold); }
.m-hero__inner { position: relative; max-width: 44rem; }
.m-hero__title { font-size: clamp(2rem, 5vw, 3.4rem); margin-bottom: 1.3rem; color: #fdfaf3; }
.m-hero__lede { color: #bdb6a8; font-size: 1.05rem; max-width: 36rem; }
.m-hero__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2rem; }

.m-figures {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(50%, 11rem), 1fr));
  margin-top: clamp(3rem, 7vw, 5rem);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.m-figures > div { padding: 1.4rem 1rem 1.5rem 0; }
.m-figures > div + div {
  border-inline-start: 1px solid rgba(255, 255, 255, 0.16);
  padding-inline-start: 1.4rem;
}
.m-figures dt {
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #a49c8e;
  margin-bottom: 0.35rem;
}
.m-figures dd { margin: 0; font-size: 1.85rem; font-weight: 650; color: var(--gold); line-height: 1.1; }

/* ── Sections ────────────────────────────────────────────────────────────── */

.m-section { padding-block: clamp(3.25rem, 7vw, 5.5rem); }
.m-section--sand { background: var(--sand); }

.m-head { max-width: 42rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.m-head h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); }
.m-head__lede { margin-top: 0.85rem; color: var(--ink-mute); }
.m-head--tight { margin-bottom: 1.75rem; }

/* ── Field letters ───────────────────────────────────────────────────────── */

.m-letters { border-top: 1px solid var(--line); }
.m-letter {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr) auto;
  gap: 1.25rem;
  align-items: start;
  padding-block: clamp(1.25rem, 2.5vw, 1.9rem);
  border-bottom: 1px solid var(--line);
}
@media (max-width: 720px) {
  .m-letter { grid-template-columns: 1fr; gap: 0.5rem; }
}
.m-letter__no { font-size: 0.78rem; color: var(--grey); padding-top: 0.15rem; }
.m-letter__date {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 0.4rem;
}
.m-letter h3 { font-size: 1.3rem; margin-bottom: 0.5rem; }
.m-letter h3 a { text-decoration: none; }
.m-letter h3 a:hover { color: var(--gold-deep); }
.m-letter__text { color: var(--ink-mute); font-size: 0.96rem; max-width: 46rem; }
.m-letter__action { padding-top: 0.35rem; }
.m-more { margin-top: clamp(2rem, 4vw, 2.75rem); }

/* ── Regions ─────────────────────────────────────────────────────────────── */

.m-regions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.m-region {
  padding: 1.4rem 1.5rem 1.6rem;
  background: var(--paper);
  border: 1px solid var(--line);
}
.m-region__art { color: var(--gold-deep); width: 100%; height: auto; margin-bottom: 1.1rem; opacity: 0.75; }
.m-region__since {
  font-size: 0.66rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 0.35rem;
}
.m-region h3 { font-size: 1.18rem; margin-bottom: 0.45rem; }
.m-region p { color: var(--ink-mute); font-size: 0.94rem; }

/* ── Prayer ──────────────────────────────────────────────────────────────── */

.m-pray {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: start;
}
@media (max-width: 820px) { .m-pray { grid-template-columns: 1fr; } }

.m-prayer { counter-reset: pray; }
.m-prayer li {
  counter-increment: pray;
  position: relative;
  padding: 1rem 0 1rem 3.25rem;
  border-top: 1px solid var(--line);
  color: var(--ink-mute);
}
.m-prayer li:last-child { border-bottom: 1px solid var(--line); }
.m-prayer li::before {
  content: counter(pray, decimal-leading-zero);
  position: absolute;
  inset-inline-start: 0;
  top: 1rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
  color: var(--gold-deep);
}

/* ── Giving ──────────────────────────────────────────────────────────────── */

.m-give { background: var(--dark-2); color: #e7e1d6; padding-block: clamp(3rem, 6.5vw, 5rem); }
.m-give__inner {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 820px) { .m-give__inner { grid-template-columns: 1fr; } }
.m-give h2 { font-size: clamp(1.5rem, 2.9vw, 2.1rem); margin-bottom: 1rem; color: #fdfaf3; }
.m-give p { color: #b7b0a2; max-width: 40rem; }
.m-give__panel { padding: 1.5rem; border: 1px solid rgba(255, 255, 255, 0.18); }
.m-give__label {
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.9rem;
}
.m-give__list { margin-bottom: 1.4rem; }
.m-give__list li { padding-block: 0.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.12); font-size: 0.94rem; }

/* ── Footer ──────────────────────────────────────────────────────────────── */

.m-footer { background: var(--sand-2); padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.m-footer__inner {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  font-size: 0.9rem;
  color: var(--ink-mute);
}
.m-footer__name { font-size: 1.05rem; font-weight: 700; color: var(--ink); margin-bottom: 0.4rem; }
.m-footer h3 {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 0.5rem;
}

/* ── Tap targets ─────────────────────────────────────────────────────────────
   The wordmark is two stacked lines of small type; as a link it was 27px. */
.m-logo { min-height: 44px; }
.m-nav a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; }
.m-link { display: inline-flex; align-items: center; min-height: 44px; }

@media (max-width: 820px) {
  .m-letter h3 a { display: inline-flex; min-height: 44px; align-items: center; }
}