/* 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-hd {
  position: relative; display: flex; align-items: center; gap: 30px; cursor: pointer;
  padding: clamp(28px, 4vw, 44px) 0; border-radius: 28px;
}
.fm-details[open] > .fm-hd { padding-bottom: clamp(40px, 6vw, 64px); }
.fm-hd:focus-visible { outline: 3px solid #957141; outline-offset: 4px; }
.fm-arrow {
  flex: none; width: 64px; text-align: center; color: var(--gd); font: 400 60px/1 var(--sans);
  transition: transform .35s ease;
}
.fm-details[open] .fm-arrow { transform: rotate(180deg); }
.fm-hd:hover .fm-arrow { color: var(--ink); }
.fm .fm-hd h2 {
  flex: 1 1 auto; margin: 0; padding: 0; color: var(--ink); text-align: left;
  font: 500 var(--h2)/1.04 var(--serif); letter-spacing: -.015em; text-wrap: balance;
}
.fm-portal-hd { margin-top: 14px; }

/* ---------- 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)) #d3cdbf,
              inset calc(var(--sh) * -1 * var(--u)) calc(var(--sh) * -1 * var(--u)) calc(var(--sh) * 2 * var(--u)) #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-card {
  padding: 32px 28px 34px; border-radius: 22px; background: var(--g);
  box-shadow: 9px 9px 18px var(--dk), -9px -9px 18px var(--lt);
}
.fm-bar { display: block; width: 30px; height: 3px; border-radius: 2px; background: var(--gl); margin-bottom: 20px; }
.fm .fm-card p { margin: 0; }
.fm .fm-card .fm-card-h { font: 500 var(--ch)/1.15 var(--serif); letter-spacing: -.005em; color: var(--ink); margin-bottom: 12px; }
.fm .fm-card .fm-card-t { font: 400 var(--ct)/1.6 var(--sans); color: var(--bd); }
.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-nw { white-space: nowrap; }

/* 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); }

/* ---------- 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: 32px; --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 { gap: 10px; align-items: flex-start; padding: 28px 0; }
  .fm-details[open] > .fm-hd { padding-bottom: 48px; }
  .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-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-card { padding: 24px 22px 26px; border-radius: 20px; box-shadow: 7px 7px 14px var(--dk), -7px -7px 14px var(--lt); }
  .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: 1.5s; }
.fm.fm-js .fm-hd-on .fm-portal-hd { opacity: 1; transform: none; transition-delay: 1.5s; }

/* ---------- motion : each row eases in as it scrolls into view ---------- */
.fm.fm-js .fm-row, .fm.fm-js .fm-turn { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
.fm.fm-js .fm-row.is-in, .fm.fm-js .fm-turn.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .fm.fm-js .fm-row, .fm.fm-js .fm-turn { opacity: 1; transform: none; transition: none; }
  .fm-arrow, .fm-slot, .fm-slot-in, .fm-plus, .fm-pick { transition: none; }
  .fm.fm-js .fm-w1, .fm.fm-js .fm-w2, .fm.fm-js .fm-portal-hd { opacity: 1; filter: none; transform: none; transition: none; }
}