/* mission-fresh.css : homepage "why chaplains matter" accordion, Fresh layout (2026-10-31).
   Stone ground, no panel, numbered neomorphic spine. Small portrait portals; the three "people"
   portraits appear when their card is clicked. Everything is scoped to .fm.
   Sizes scale with the width of the content column (container query units); the phone layout
   starts below 640px of column width. */

.fm { margin: clamp(8px, 2vw, 28px) 0; color: #10283d; }
.fm .hub-width { container: fm / inline-size; }

.fm-in {
  --g: #f0eee8; --dk: #d3cdbf; --lt: #ffffff; --ink: #10283d; --bd: #2c4257; --gd: #87662d; --gl: #d2b575;
  --serif: var(--gx-serif, "Cormorant Garamond", Georgia, serif);
  --sans: var(--gx-sans, "Nunito Sans", system-ui, sans-serif);
  --node: 64px; --nf: 24px; --ns: 6px; --rg: 56px; --gw: 5px;
  --h2: clamp(30px, calc(4.87cqw + 13px), 64px);
  --st: clamp(36px, 6.15cqw, 64px);
  --sub: clamp(24px, 3.65cqw, 38px);
  --lead: clamp(30px, 4.42cqw, 46px);
  --qt: clamp(26px, 4.04cqw, 42px);
  --h3: clamp(40px, 7.5cqw, 78px);
  --tx: clamp(18px, 2.12cqw, 22px);
  --cm: clamp(28px, 4.23cqw, 44px);
  --turn: clamp(48px, 9.2cqw, 96px);
  --mis: clamp(24px, 3.27cqw, 34px);
  --pk: clamp(24px, 3.08cqw, 32px);
  --ct: clamp(17px, 1.92cqw, 20px);
  --ch: clamp(22px, 2.7cqw, 28px);
  --st2: clamp(34px, 5.4cqw, 56px);
  --rowpad: clamp(72px, 11.5cqw, 120px);
  --indent: clamp(0px, 11.5cqw, 120px);
  max-width: 1100px;
  color: var(--ink);
  font-family: var(--sans);
}

/* ---------- header (the click target) ---------- */
.fm-details > summary { list-style: none; }
.fm-details > summary::-webkit-details-marker { display: none; }
.fm-details > summary::marker { content: ""; }
.fm-details { position: relative; }
.fm-hd {
  position: relative; display: block; cursor: pointer; background: #142b3b; color: #f0ede3;
  padding: clamp(34px, 5vw, 58px) 0;
}
.fm-hd-in { display: flex; align-items: center; gap: 30px; }
.fm-hd:focus-visible { outline: 3px solid #cfb478; outline-offset: -8px; }
.fm-arrow {
  flex: none; width: 64px; text-align: center; color: #cfb478; font: 400 60px/1 var(--sans);
  transition: transform .35s ease;
}
.fm-details[open] .fm-arrow { transform: rotate(180deg); }
.fm-hd:hover .fm-arrow { color: #f0ede3; }
.fm .fm-hd h2 {
  flex: 1 1 auto; margin: 0; padding: 0; color: #f0ede3; text-align: left;
  font: 500 var(--h2)/1.04 var(--serif); letter-spacing: -.015em; text-wrap: balance;
}
.fm .fm-w2 { color: #dbc38e; }
.fm-portal-hd { margin-top: 14px; --g: #1c3b53; --rd: #0b1b27; --rl: #2f5776; }
.fm-body { padding-top: clamp(28px, 5vw, 56px); }

/* ---------- portrait portal : a sunken ring, a dark well, a head that breaks the rim ---------- */
.fm-portal {
  --u: 1px;
  position: relative; display: block; flex: none; box-sizing: border-box;
  width: calc(var(--S) * var(--u)); height: calc(var(--S) * var(--u));
  padding: calc(var(--p) * var(--u)); border-radius: 50%; background: var(--g, #f0eee8);
  box-shadow: inset calc(var(--sh) * var(--u)) calc(var(--sh) * var(--u)) calc(var(--sh) * 2 * var(--u)) var(--rd, #d3cdbf),
              inset calc(var(--sh) * -1 * var(--u)) calc(var(--sh) * -1 * var(--u)) calc(var(--sh) * 2 * var(--u)) var(--rl, #ffffff);
}
.fm-well {
  position: relative; display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 50% 28%, #35597d 0%, #1a3550 55%, #0d2034 100%);
}
.fm-img {
  position: absolute; display: block; height: auto; max-width: none;
  left: calc(var(--l) * var(--u)); top: calc(var(--t) * var(--u)); width: calc(var(--w) * var(--u));
}
.fm-rim {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 50%;
  box-shadow: inset calc(var(--sh) * var(--u)) calc(var(--sh) * 1.17 * var(--u)) calc(var(--sh) * 2.17 * var(--u)) rgba(4, 12, 22, .6),
              inset calc(var(--sh) * -.83 * var(--u)) calc(var(--sh) * -.83 * var(--u)) calc(var(--sh) * 1.67 * var(--u)) rgba(120, 160, 200, .18),
              inset 0 0 0 calc(var(--sh) / 3 * var(--u)) rgba(210, 181, 117, .4);
}
/* Second copy of the picture, in flow after the well: only the strip above the rim shows, so the head stands out of the circle. */
.fm-pop {
  position: relative; display: block; height: auto; max-width: none; pointer-events: none;
  left: calc(var(--l) * var(--u));
  top: calc((var(--t) - (var(--S) - 2 * var(--p))) * var(--u));
  width: calc(var(--w) * var(--u));
  filter: drop-shadow(calc(4 * var(--u)) calc(5 * var(--u)) calc(6 * var(--u)) rgba(16, 40, 61, .32));
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(var(--a) * var(--u)), transparent calc(var(--b) * var(--u)));
  mask-image: linear-gradient(to bottom, #000 calc(var(--a) * var(--u)), transparent calc(var(--b) * var(--u)));
}

/* ---------- the spine ---------- */
.fm-body { display: flex; flex-direction: column; }
.fm-row { display: flex; gap: var(--rg); }
.fm-rail { flex: none; width: var(--node); display: flex; flex-direction: column; align-items: center; }
.fm-node {
  flex: none; width: var(--node); height: var(--node); border-radius: 50%; background: var(--g);
  box-shadow: var(--ns) var(--ns) calc(var(--ns) * 2) var(--dk), calc(var(--ns) * -1) calc(var(--ns) * -1) calc(var(--ns) * 2) var(--lt);
  display: flex; align-items: center; justify-content: center;
  font: 600 var(--nf)/1 var(--serif); font-variant-numeric: lining-nums; color: var(--gd);
}
.fm-groove {
  flex: 1 1 0; width: var(--gw); margin-top: 14px; border-radius: 3px; background: var(--g);
  box-shadow: inset 1px 1px 3px var(--dk), inset -1px -1px 3px var(--lt);
}
.fm-main { flex: 1 1 0; min-width: 0; padding-bottom: var(--rowpad); }
.fm-row-04 .fm-main { padding-bottom: clamp(48px, 7.7cqw, 80px); }
.fm-row-end .fm-main { display: flex; flex-direction: column; align-items: flex-start; padding-bottom: 8px; }

/* type */
.fm .fm-st, .fm .fm-lead, .fm .fm-comm, .fm .fm-mis, .fm .fm-h3, .fm .fm-sub, .fm .fm-quote p {
  margin: 0; color: var(--ink); font-family: var(--serif); font-weight: 500; text-wrap: pretty;
}
.fm .fm-st { font-size: var(--st); line-height: 1.08; letter-spacing: -.015em; }
.fm .fm-sub { margin: clamp(28px, 5.4cqw, 56px) 0 0 var(--indent); font-size: var(--sub); line-height: 1.16; letter-spacing: -.01em; color: var(--bd); }
.fm .fm-lead { font-size: var(--lead); line-height: 1.1; letter-spacing: -.015em; }
.fm .fm-h3 { font-size: var(--h3); line-height: 1.03; letter-spacing: -.02em; text-wrap: balance; }
.fm .fm-comm { font-size: var(--cm); line-height: 1.16; letter-spacing: -.01em; }
.fm .fm-comm em { color: var(--gd); font-style: italic; }
.fm .fm-mis { max-width: 780px; margin-top: 26px; font-size: var(--mis); line-height: 1.2; letter-spacing: -.01em; }
.fm .fm-txt { margin: 0; font: 400 var(--tx)/1.65 var(--sans); color: var(--bd); }
.fm .fm-txt-narrow { max-width: 700px; margin-top: clamp(28px, 4.6cqw, 48px); }
.fm .fm-txt-wide { max-width: 780px; }
.fm .fm-q-pre { margin-bottom: 18px; }
.fm .fm-gap-md { margin-top: clamp(28px, 3.85cqw, 40px); }
.fm .fm-gap-lg { margin-top: clamp(32px, 4.6cqw, 48px); }
.fm .fm-gap-xl { margin-top: clamp(40px, 5.4cqw, 56px); }
.fm .fm-row-end .fm-gap-xl { margin-top: clamp(44px, 6.1cqw, 64px); }

/* 02 : three raised cards, then a sunken statement */
.fm-cards { margin-top: clamp(28px, 3.85cqw, 40px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.fm-bar { display: block; width: 30px; height: 3px; border-radius: 2px; background: var(--gl); margin-bottom: 20px; }
/* The four dilemmas. Each is a raised card showing the problem. A click lifts that card up and away like a flap, and the solution is the card beneath. One open at a time. */
.fm-cards { align-items: start; }
.fm-dil { position: relative; border-radius: 22px; background: var(--g); box-shadow: 9px 9px 18px var(--dk), -9px -9px 18px var(--lt); }
.fm-dq, .fm-da { display: block; width: 100%; box-sizing: border-box; text-align: left; margin: 0; border: 0; background: none; color: var(--ink); font: inherit; cursor: default; }
.fm-dq { padding: 32px 56px 12px 28px; }
.fm-da { padding: 0 28px 34px; }
.fm .fm-dil .fm-card-h { display: block; font: 500 var(--ch)/1.15 var(--serif); letter-spacing: -.005em; color: var(--ink); }
.fm .fm-dil .fm-card-t { display: block; margin: 0; font: 400 var(--ct)/1.6 var(--sans); color: var(--bd); }
.fm .fm-dil .fm-plus, .fm-da .fm-bar { display: none; }
.fm .fm-dil .fm-card-t2 { margin-top: 12px; }
.fm .fm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* with scripts on: stacked faces, the problem face hinged at its top edge */
.fm.fm-ix .fm-dil { background: none; box-shadow: none; transition: height .55s cubic-bezier(.3,.1,.2,1); }
.fm.fm-ix .fm-dq, .fm.fm-ix .fm-da { position: absolute; left: 0; top: 0; border-radius: 22px; background: var(--g); cursor: pointer; }
.fm.fm-ix .fm-dq, .fm.fm-ix .fm-da { padding: 32px 56px 34px 28px; }
.fm.fm-ix .fm-da .fm-bar, .fm.fm-ix .fm-dil .fm-plus { display: block; }
.fm.fm-ix .fm-da .fm-plus { transform: rotate(45deg); }
.fm.fm-ix .fm-dil .fm-plus { position: absolute; top: 14px; right: 18px; }
.fm.fm-ix .fm-dq {
  z-index: 2; box-shadow: 9px 9px 18px var(--dk), -9px -9px 18px var(--lt);
  transform-origin: 50% 0; transform: perspective(900px) rotateX(0deg);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  transition: transform .75s cubic-bezier(.55,0,.25,1);
}
.fm.fm-ix .fm-da {
  z-index: 1; height: 100%; overflow: hidden; visibility: hidden;
  box-shadow: inset 9px 9px 18px var(--dk), inset -9px -9px 18px var(--lt);
  transition: visibility 0s .75s;
}
.fm.fm-ix .fm-dil.is-on .fm-dq { transform: perspective(900px) rotateX(100deg); pointer-events: none; }
.fm.fm-ix .fm-dil.is-on .fm-da { visibility: visible; transition: visibility 0s; }
.fm-dq:focus-visible, .fm-da:focus-visible { outline: 3px solid #957141; outline-offset: 4px; }
.fm-lead-row { display: flex; align-items: center; justify-content: space-between; gap: clamp(20px, 3cqw, 30px); }
.fm-lead-row .fm-lead, .fm-lead-row .fm-st { flex: 1 1 auto; margin: 0; }
.fm .fm-lead-2 { display: block; margin-top: 16px; font-size: var(--sub); line-height: 1.15; letter-spacing: -.01em; }
/* finished circular portraits (frame and pop-out already in the picture) */
.fm-pre { flex: none; display: block; height: auto; max-width: none; pointer-events: none; }
.fm-pre-pair { width: 176px; }
.fm-pre-solo { width: 218px; margin: -14px -24px -14px 0; }
.fm .fm-dilemma { margin-top: 18px; max-width: 720px; }
.fm .fm-st-long { font-size: var(--st2); line-height: 1.1; }
.fm .fm-sub-2 { margin-top: 20px; }
.fm-quote {
  margin-top: clamp(40px, 6.15cqw, 64px); padding: clamp(30px, 5.4cqw, 56px) clamp(24px, 5.8cqw, 60px);
  border-radius: 28px; background: var(--g);
  box-shadow: inset 10px 10px 20px var(--dk), inset -10px -10px 20px var(--lt);
}
.fm .fm-quote p { font-size: var(--qt); line-height: 1.17; letter-spacing: -.01em; }
.fm .fm-quote em { color: var(--gd); font-style: italic; font-weight: 600; }

/* 03 : the people */
.fm-people { margin-top: 24px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.fm-person { display: flex; flex-direction: column; }
.fm-slot { height: 160px; display: flex; align-items: flex-end; justify-content: center; pointer-events: none; }
.fm-slot-in { transition: opacity .4s ease, transform .4s ease; transform-origin: 50% 100%; opacity: 0; transform: translateY(14px) scale(.8); }
.fm-person.is-on .fm-slot-in { opacity: 1; transform: none; }
.fm-pick {
  position: relative; display: block; flex: 1 1 auto; width: 100%; box-sizing: border-box; text-align: left;
  border: 0; cursor: pointer; margin: 0; padding: 36px 28px; border-radius: 22px; background: var(--g); color: var(--ink);
  font: inherit; transition: box-shadow .3s ease;
  box-shadow: 9px 9px 18px var(--dk), -9px -9px 18px var(--lt);
}
.fm-pick[aria-pressed="true"] { box-shadow: inset 9px 9px 18px var(--dk), inset -9px -9px 18px var(--lt); }
.fm-pick:focus-visible { outline: 3px solid #957141; outline-offset: 4px; }
.fm-pick-t { display: block; font: italic 500 var(--pk)/1.12 var(--serif); }
.fm-plus {
  position: absolute; top: 12px; right: 18px; font: 400 26px/1 var(--sans); color: var(--gd);
  transition: transform .3s ease;
}
.fm-pick[aria-pressed="true"] .fm-plus { transform: rotate(45deg); }
.fm .fm-txt-chips { max-width: 880px; margin-top: clamp(40px, 5.4cqw, 56px); line-height: 2.1; }
.fm-chip {
  padding: 4px 14px; border-radius: 999px; background: var(--g); color: var(--ink);
  box-shadow: inset 3px 3px 6px var(--dk), inset -3px -3px 6px var(--lt);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.fm-chip { display: inline-block; max-width: 100%; box-sizing: border-box; line-height: 1.35; text-align: center; vertical-align: baseline; }
.fm-chip-nw { white-space: nowrap; }
.fm .fm-nb { white-space: nowrap; }
.fm .fm-nb .fm-chip:not(.fm-chip-nw) { white-space: normal; }
.fm-chip::after { content: attr(data-t); display: block; height: 0; overflow: hidden; visibility: hidden; font-weight: 700; white-space: nowrap; pointer-events: none; }
.fm-chip:hover { font-weight: 700; }

/* the turn */
.fm-turn { margin: 40px 0 0; padding: clamp(96px, 14.4cqw, 150px) 40px; text-align: center; }
.fm .fm-turn p {
  margin: 0; font: 600 var(--turn)/1.02 var(--serif); letter-spacing: -.025em; color: var(--gd); text-wrap: balance;
}

/* 05 : the ask */
.fm .fm-donate {
  display: inline-flex; align-items: center; gap: 14px; margin-top: 36px; min-height: 64px; padding: 0 44px;
  background: var(--gl); color: var(--ink); border-radius: 999px; text-decoration: none;
  font: 600 18px/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase;
  box-shadow: 8px 8px 16px var(--dk), -8px -8px 16px var(--lt); transition: box-shadow .25s ease;
}
.fm .fm-donate:hover, .fm .fm-donate:focus-visible { color: var(--ink); box-shadow: 4px 4px 8px var(--dk), -4px -4px 8px var(--lt); }
.fm .fm-donate:active { box-shadow: inset 4px 4px 8px #b99a55, inset -4px -4px 8px #e6cf9a; }
.fm .fm-donate:focus-visible, .fm .fm-close:focus-visible { outline: 3px solid #957141; outline-offset: 4px; }
.fm .fm-close {
  margin: 56px 0 0; min-height: 52px; padding: 0 30px; border: 0; border-radius: 999px; background: var(--g); color: var(--ink);
  font: 600 14px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
  box-shadow: 6px 6px 12px var(--dk), -6px -6px 12px var(--lt); transition: box-shadow .25s ease;
}
.fm .fm-close:hover { color: var(--gd); }
.fm .fm-close:active { box-shadow: inset 4px 4px 8px var(--dk), inset -4px -4px 8px var(--lt); }

/* ---------- the opening flip : the blue cover lifts up and away, the cream section is beneath ---------- */
.fm.fm-js .fm-hd {
  transform-origin: 50% 0; transform: perspective(1400px) rotateX(0deg);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  transition: transform .9s cubic-bezier(.55, 0, .25, 1);
}
.fm.fm-js .fm-details[open] > .fm-hd {
  position: absolute; left: 0; right: 0; top: 0; z-index: 5; pointer-events: none; visibility: hidden;
  transform: perspective(1400px) rotateX(100deg);
  transition: transform .9s cubic-bezier(.55, 0, .25, 1), visibility 0s .9s;
}

/* ---------- phone ---------- */
@container fm (max-width: 640px) {
  .fm-in {
    --node: 40px; --nf: 16px; --ns: 4px; --rg: 16px; --gw: 4px;
    --h2: 28px; --st: 36px; --sub: 26px; --lead: 28px; --qt: 28px; --h3: 44px; --tx: 18px; --cm: 30px;
    --turn: 52px; --mis: 26px; --pk: 26px; --ct: 17px; --ch: 24px; --st2: 34px; --rowpad: 72px; --indent: 28px;
  }
  .fm-hd { padding: 30px 0; }
  .fm-hd-in { gap: 10px; align-items: flex-start; }
  .fm-arrow { width: 30px; font-size: 30px; line-height: 1.1; }
  .fm .fm-hd h2 { line-height: 1.05; letter-spacing: -.01em; }
  .fm-portal-hd { --u: .565px; margin-top: -2px; }
    .fm-lead-row { flex-direction: column; align-items: flex-start; gap: 12px; }
  .fm-pre-pair { width: 150px; }
  .fm-pre-solo { width: 170px; margin: -8px 0 -10px -10px; }
  .fm-brd { display: none; }
  .fm-groove { margin-top: 10px; }
  .fm-row-04 .fm-main { padding-bottom: 48px; }
  .fm .fm-sub { margin-top: 32px; line-height: 1.18; }
  .fm .fm-lead { line-height: 1.1; }
  .fm .fm-h3 { line-height: 1.03; letter-spacing: -.015em; }
  .fm .fm-comm { line-height: 1.18; }
  .fm .fm-mis { margin-top: 22px; }
  .fm .fm-txt-narrow { margin-top: 32px; }
  .fm .fm-q-pre { margin-bottom: 12px; }
  .fm .fm-gap-lg { margin-top: 32px; }
  .fm .fm-gap-xl, .fm .fm-row-end .fm-gap-xl { margin-top: 40px; }
  .fm .fm-gap-md { margin-top: 28px; }
  .fm .fm-row-end .fm-gap-xl { margin-top: 44px; }
  .fm-cards { margin-top: 32px; grid-template-columns: 1fr; gap: 20px; }
  .fm-dil { border-radius: 20px; box-shadow: 7px 7px 14px var(--dk), -7px -7px 14px var(--lt); }
  .fm-dq { padding: 24px 50px 10px 22px; }
  .fm-da { padding: 0 22px 26px; }
  .fm.fm-ix .fm-dq, .fm.fm-ix .fm-da { padding: 24px 50px 26px 22px; border-radius: 20px; }
  .fm.fm-ix .fm-dq { box-shadow: 7px 7px 14px var(--dk), -7px -7px 14px var(--lt); }
  .fm.fm-ix .fm-da { box-shadow: inset 7px 7px 14px var(--dk), inset -7px -7px 14px var(--lt); }
  .fm.fm-ix .fm-da .fm-bar { }
  .fm.fm-ix .fm-dil .fm-plus { top: 10px; right: 16px; }
  .fm .fm-cards .fm-dil:nth-child(n) { --dx: 0px; }
  .fm-bar { width: 26px; margin-bottom: 14px; }
  .fm-quote { margin-top: 40px; padding: 30px 24px; border-radius: 24px; box-shadow: inset 8px 8px 16px var(--dk), inset -8px -8px 16px var(--lt); }
  .fm .fm-quote p { line-height: 1.2; letter-spacing: 0; }
  .fm-people { grid-template-columns: 1fr; gap: 18px; margin-top: 18px; }
  .fm-slot { height: 0; transition: height .35s ease; }
  .fm-person.is-on .fm-slot { height: 170px; }
  .fm-person.is-on .fm-slot-in { transform: translateY(-8px); }
  .fm-pick { padding: 22px; border-radius: 20px; box-shadow: 7px 7px 14px var(--dk), -7px -7px 14px var(--lt); }
  .fm-pick[aria-pressed="true"] { box-shadow: inset 7px 7px 14px var(--dk), inset -7px -7px 14px var(--lt); }
  .fm-pick-t { padding-right: 28px; }
  .fm-plus { top: 50%; right: 18px; margin-top: -13px; }
  .fm .fm-txt-chips { margin-top: 40px; }
  .fm-chip { padding: 3px 10px; }
  .fm-turn { margin: 0; padding: 96px 0; }
  .fm .fm-donate { gap: 12px; margin-top: 28px; min-height: 56px; padding: 0 24px; font-size: 14px; letter-spacing: .05em; white-space: nowrap; justify-content: center; box-shadow: 6px 6px 12px var(--dk), -6px -6px 12px var(--lt); }
  .fm .fm-close { margin-top: 40px; padding: 0 26px; font-size: 13px; }
}

/* ---------- headline : line one arrives, a beat, then "police chaplains" and the portrait together ---------- */
.fm.fm-js .fm-w1, .fm.fm-js .fm-w2 { opacity: 0; filter: blur(8px); transition: opacity 1s ease, filter 1s ease; }
.fm.fm-js .fm-portal-hd { opacity: 0; transform: scale(.9); transition: opacity 1.1s ease, transform 1.1s ease; }
.fm.fm-js .fm-hd-on .fm-w1 { opacity: 1; filter: none; transition-delay: .2s; }
.fm.fm-js .fm-hd-on .fm-w2 { opacity: 1; filter: none; transition-delay: .8s; }
.fm.fm-js .fm-hd-on .fm-portal-hd { opacity: 1; transform: none; transition-delay: .8s; }

/* ---------- 2026-11-02 : the one-two punch. Front: THE PROBLEM. Click "The innovation" to flip to the answer. ---------- */
.fm .fm-eye { display: block; margin: 0 0 10px; font: 800 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--bd); opacity: .7; }
.fm .fm-da .fm-eye { color: var(--gd); opacity: 1; }
.fm .fm-dil .fm-card-a { display: block; margin: 0 0 12px; font: italic 600 var(--ch)/1.18 var(--serif); color: var(--gd); }
.fm .fm-more { display: none; }
.fm.fm-ix .fm-more {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 9px 16px; border-radius: 999px;
  font: 800 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gd);
  box-shadow: 4px 4px 8px var(--dk), -4px -4px 8px var(--lt); transition: box-shadow .25s ease;
}
.fm.fm-ix .fm-more span { display: inline-block; transition: transform .3s ease; }
.fm.fm-ix .fm-dq:hover .fm-more { box-shadow: inset 3px 3px 6px var(--dk), inset -3px -3px 6px var(--lt); }
.fm.fm-ix .fm-dq:hover .fm-more span { transform: translateX(4px); }
.fm.fm-ix .fm-dil .fm-plus { display: none; }
.fm.fm-ix .fm-da .fm-plus { display: block; }

/* the two endings: give, or find out */
.fm-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; }
.fm-ctas .fm-donate { margin: 0; }
.fm-calling { font: 600 18px/1.3 var(--sans); color: var(--gd); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.fm-calling:hover { color: var(--ink); }
.fm-calling span { display: inline-block; transition: transform .3s ease; }
.fm-calling:hover span { transform: translateX(4px); }
.fm-calling:focus-visible { outline: 3px solid #957141; outline-offset: 4px; border-radius: 4px; }
.fm-row-end .fm-close { margin-top: 36px; }

/* the three people: the empty circle always shows; a click brings the person up into it */
.fm .fm-slot { height: 160px; }
.fm .fm-slot-in, .fm .fm-person.is-on .fm-slot-in { opacity: 1; transform: none; }
.fm .fm-people .fm-img, .fm .fm-people .fm-pop {
  opacity: 0; translate: 0 34px;
  transition: opacity .45s ease, translate .6s cubic-bezier(.2,.8,.25,1);
}
.fm .fm-person.is-on .fm-img, .fm .fm-person.is-on .fm-pop { opacity: 1; translate: 0 0; }
.fm .fm-person.is-on .fm-pop { transition-delay: .08s; }
@container fm (max-width: 639px) {
  .fm .fm-slot, .fm .fm-person.is-on .fm-slot { height: 150px; }
  .fm .fm-person.is-on .fm-slot-in { transform: none; }
}

/* ---------- motion : each piece rises gently as it scrolls into view, in reading order ---------- */
.fm.fm-js .fm-rv { opacity: 0; transform: translateY(18px); transition: opacity .7s ease var(--rd, 0s), transform .8s cubic-bezier(.2,.75,.25,1) var(--rd, 0s); }
.fm.fm-js .fm-rv.fm-pre, .fm.fm-js .fm-rv.fm-slot { transform: scale(.92); }
.fm.fm-js .fm-rv.is-in { opacity: 1; transform: none; }
/* the cards lift and settle one after another */
.fm.fm-js .fm-dil.fm-rv { transform: translateY(30px) scale(.97); transition: opacity .7s ease var(--rd, 0s), transform .9s cubic-bezier(.2,.75,.25,1) var(--rd, 0s), height .55s cubic-bezier(.3,.1,.2,1); }
.fm.fm-js .fm-dil.fm-rv.is-in { transform: none; }
/* the spine draws itself down as each section arrives */
.fm.fm-js .fm-groove { transform-origin: 50% 0; transform: scaleY(0); transition: transform 1.4s cubic-bezier(.3,.1,.2,1) .2s; }
.fm.fm-js .fm-row.is-in .fm-groove { transform: none; }
/* the turn lands a touch slower, as a pause */
.fm.fm-js .fm-turn.fm-rv { transform: translateY(10px); letter-spacing: .02em; transition: opacity 1.1s ease, transform 1.1s ease, letter-spacing 1.4s ease; }
.fm.fm-js .fm-turn.fm-rv.is-in { transform: none; letter-spacing: 0; }

@media (prefers-reduced-motion: reduce) {
  .fm.fm-js .fm-rv, .fm.fm-js .fm-groove, .fm.fm-js .fm-turn.fm-rv { opacity: 1 !important; transform: none !important; transition: none !important; }
  .fm-dil, .fm-dq, .fm-da { transition: none !important; }
  .fm-arrow, .fm-slot, .fm-slot-in, .fm-plus, .fm-pick, .fm .fm-people .fm-img, .fm .fm-people .fm-pop { transition: none !important; }
  .fm.fm-js .fm-w1, .fm.fm-js .fm-w2, .fm.fm-js .fm-portal-hd { opacity: 1; filter: none; transform: none; transition: none; }
  .fm.fm-js .fm-hd { transition: none !important; }
}

/* 2026-11-02 : the payoff after the four cards */
.fm .fm-quote.fm-payoff p { font-size: calc(var(--qt) * .78); line-height: 1.22; }
.fm .fm-quote.fm-payoff p + p { margin-top: .6em; }
.fm .fm-quote.fm-payoff .fm-payoff-3 { font-size: var(--qt); line-height: 1.15; }

/* ---------- 2026-11-02 : the blue band sits in the site frame, rounded; smaller title; two chaplains ---------- */
.fm .fm-hd {
  box-sizing: border-box; width: var(--gx-frame, calc(100% - 120px)); margin-inline: auto;
  border-radius: var(--gx-r, 20px); padding: clamp(26px, 3.6vw, 42px) 0;
  box-shadow: 0 10px 24px rgba(16, 40, 61, .16);
}
.fm.fm-js .fm-details[open] > .fm-hd { left: 0; right: 0; margin-inline: auto; }
.fm-in { --h2: clamp(26px, calc(2.6cqw + 14px), 44px); }
.fm-hd-pair { display: flex; align-items: flex-end; flex: none; }
.fm-hd-pair .fm-portal-hd-w { margin-right: -14px; position: relative; z-index: 0; }
.fm-hd-pair .fm-portal-hd-m { position: relative; z-index: 1; }
.fm-img-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.fm.fm-js .fm-hd-pair { opacity: 0; transform: scale(.92); transition: opacity 1.1s ease, transform 1.1s ease; }
.fm.fm-js .fm-hd-on .fm-hd-pair { opacity: 1; transform: none; transition-delay: .8s; }
.fm.fm-js .fm-portal-hd { opacity: 1; transform: none; }

/* the type that follows, a step down */
.fm-in {
  --st: clamp(30px, 4.6cqw, 50px);
  --sub: clamp(21px, 2.8cqw, 29px);
  --lead: clamp(26px, 3.5cqw, 37px);
  --qt: clamp(23px, 3.2cqw, 34px);
  --h3: clamp(34px, 5.6cqw, 58px);
  --cm: clamp(24px, 3.4cqw, 35px);
  --turn: clamp(40px, 7cqw, 72px);
  --mis: clamp(21px, 2.6cqw, 27px);
}
@container fm (max-width: 640px) {
  .fm-in { --h2: 24px; --st: 30px; --sub: 22px; --lead: 24px; --qt: 24px; --h3: 36px; --cm: 26px; --turn: 42px; --mis: 22px; }
  .fm .fm-hd { padding: 24px 0; }
  .fm-hd-pair .fm-portal-hd-w { --u: .5px; margin-right: -8px; }
}
@media (prefers-reduced-motion: reduce) { .fm.fm-js .fm-hd-pair { opacity: 1; transform: none; transition: none; } }
@container fm (max-width: 640px) {
  .fm-hd-in { flex-wrap: wrap; row-gap: 14px; }
  .fm-hd-pair { order: -1; width: 100%; padding-left: 40px; }
  .fm-hd-pair .fm-portal-hd-w { --u: .45px; }
  .fm-hd-pair .fm-portal-hd-m { --u: .5px; }
  .fm .fm-hd h2 { flex: 1 1 0; }
}
/* tighter approach to "That's where ChaplainUSA comes in." */
.fm .fm-row-04 .fm-main { padding-bottom: 12px; }
.fm .fm-turn { margin-top: 0; padding: clamp(36px, 5cqw, 60px) 0 clamp(56px, 8cqw, 96px); }
@container fm (max-width: 640px) { .fm .fm-turn { padding: 32px 0 56px; } }

/* 2026-11-02 : phone header. Headline on the left; the two chaplains stacked in the lower right, she just below him, both heads breaking the rim. */
@container fm (max-width: 640px) {
  .fm-hd-in { flex-wrap: nowrap; align-items: flex-end; column-gap: 8px; }
  .fm .fm-hd h2 { flex: 1 1 auto; align-self: center; }
  .fm-hd-pair { order: 0; width: auto; padding-left: 0; flex-direction: column-reverse; align-items: flex-end; }
  .fm-hd-pair .fm-portal-hd-m { --u: .5px; margin: 0; }
  .fm-hd-pair .fm-portal-hd-w { --u: .5px; margin: -18px 30px 0 0; }
}
@container fm (max-width: 640px) { .fm-hd-pair .fm-portal-hd-w { z-index: 2; } }
@container fm (max-width: 640px) { .fm-arrow { align-self: center; } }

/* 2026-11-02 : him on the left, her on the right, a little smaller and lower (all widths) */
.fm-hd-pair { flex-direction: row-reverse; align-items: flex-end; }
.fm-hd-pair .fm-portal-hd-w { margin: 0 0 -10px -16px; z-index: 0; }
.fm-hd-pair .fm-portal-hd-m { z-index: 1; }
@container fm (max-width: 640px) {
  .fm-hd-pair { flex-direction: row-reverse; align-items: flex-end; }
  .fm-hd-pair .fm-portal-hd-m { --u: .46px; }
  .fm-hd-pair .fm-portal-hd-w { --u: .46px; margin: 0 0 -6px -10px; z-index: 0; }
}
/* phones: only the male chaplain, so the headline keeps its width */
@container fm (max-width: 640px) {
  .fm-hd-pair .fm-portal-hd-w { display: none; }
  .fm-hd-pair .fm-portal-hd-m { --u: .5px; }
}

/* 2026-11-02 : the ending. "Do you have what it takes?" right under the last line; then Support (plain link) left, Close right. */
.fm .fm-row-end .fm-calling { display: inline-block; margin-top: 10px; font: 600 clamp(19px, 2cqw, 22px)/1.3 var(--sans); }
.fm-endrow { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; width: 100%; margin-top: clamp(36px, 5cqw, 52px); }
.fm-support-link { font: 700 15px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--gd); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.fm-support-link:hover { color: var(--ink); }
.fm-support-link span { display: inline-block; transition: transform .3s ease; }
.fm-support-link:hover span { transform: translateX(4px); }
.fm-support-link:focus-visible { outline: 3px solid #957141; outline-offset: 4px; border-radius: 4px; }
.fm .fm-row-end .fm-endrow .fm-close { margin: 0 0 0 auto; }