/* Faith in Motion presentation only. Ledger scripts and all financial hooks are unchanged.
   Brings the campaign pages into the Pamodzi editorial system. The type is the two house fonts declared once in
   css/brand.css, and the legacy family names written in the shared foundation resolve to them, so the foundation
   needs no edits and no page calls an external font service. */
.pci-fim-v3 {
  --paper: #faf6f1;
  --paper-2: #f2ebe3;
  --cream: #faf6f1;
  --ink: #1b0a0e;
  --ink-2: #3d272c;
  --muted: #66565a;
  --line: #e6dacb;
  --line-2: #cdbcab;
  --red: #b71935;
  --red-2: #d02a47;
  --red-dark: #8c1228;
  --red-soft: #fbe7e4;
  --accent-gold: #b71935;
  --radius: 20px;
  --radius-sm: 12px;
  --wrap: 1360px;
  --header-h: 80px;
  --shadow: 0 2px 4px rgb(27 10 14 / 6%), 0 30px 70px rgb(27 10 14 / 16%);
  --shadow-sm: 0 1px 2px rgb(27 10 14 / 6%), 0 10px 28px rgb(27 10 14 / 8%);
  --shadow-lg: 0 2px 4px rgb(27 10 14 / 6%), 0 40px 90px rgb(27 10 14 / 22%);
  --shadow-btn: none;
  --shadow-btn-hover: none;

  font-family: Manrope, "Inter Variable", system-ui, sans-serif;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  background: var(--paper);
}

/* Display type */
.pci-fim-v3 h1,
.pci-fim-v3 h2,
.pci-fim-v3 h3,
.pci-fim-v3 .disp,
.pci-fim-v3 .sec {
  font-family: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: var(--ls-h2);
  line-height: 0.98;
}

.pci-fim-v3 h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
}

.pci-fim-v3 h2,
.pci-fim-v3 .sec {
  font-size: var(--fs-h2);
  max-width: 20ch;
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
}

.pci-fim-v3 h3 {
  font-size: var(--fs-h3);
  font-weight: 620;
  letter-spacing: var(--ls-h3);
  line-height: var(--lh-h3);
}

.pci-fim-v3 .page-hero h1 {
  max-width: 16ch;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
}

.pci-fim-v3 .page-hero {
  background:
    linear-gradient(90deg, rgb(34 10 16 / 94%), rgb(34 10 16 / 80%) 60%, rgb(140 18 40 / 58%)),
    url("../assets/faith-in-motion/walking-rotarian-river-crossing.jpg") center 36% / cover
      no-repeat;
}

.pci-fim-v3 .page-hero::before {
  display: none;
}

.pci-fim-v3 .hero h1 {
  max-width: 15ch;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  text-shadow: none;
  letter-spacing: var(--ls-display);
}

.pci-fim-v3 .hero h1 .em {
  color: var(--blush, #f3c9c8);
  font-family: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.pci-fim-v3 .hero .lede,
.pci-fim-v3 .lede {
  max-width: 55ch;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
}

.pci-fim-v3 .sec-sub {
  max-width: var(--measure);
  font-size: var(--fs-body);
}

.pci-fim-v3 .blk {
  padding-block: clamp(72px, 8vw, 140px);
}

.pci-fim-v3 .wrap {
  max-width: calc(var(--wrap) + 2 * clamp(20px, 3.6vw, 60px));
  padding-inline: clamp(20px, 3.6vw, 60px);
}

/* Labels */
.pci-fim-v3 .survey,
.pci-fim-v3 .eyebrow {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: 0.13em;
}

/* Header: a quiet full-width paper bar, matching the main site */
.pci-fim-v3 header {
  height: var(--header-h);
  padding: 0;
  border-bottom: 1px solid var(--line);
  background: rgb(250 246 241 / 90%);
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
  backdrop-filter: saturate(1.4) blur(16px);
  pointer-events: auto;
}

.pci-fim-v3 .nav,
.pci-fim-v3 header.solid .nav {
  min-height: var(--header-h);
  padding: 0 clamp(20px, 3.6vw, 60px);
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.pci-fim-v3 .brand {
  padding-right: 20px;
  border-right: 0;
}

.pci-fim-v3 .brand img {
  width: 56px;
  height: 42px;
  padding: 0;
  background: transparent;
  object-fit: contain;
}

.pci-fim-v3 .brand .t b {
  font-family: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: var(--ls-h3);
  line-height: var(--lh-h3);
}

.pci-fim-v3 .brand .t span {
  margin-top: 6px;
  font-size: var(--fs-caption);
  letter-spacing: 0.16em;
}

.pci-fim-v3 .nav-links a:not(.btn) {
  font-size: var(--fs-small);
  font-weight: 560;
  color: var(--ink-2) !important;
}

.pci-fim-v3 .nav-links a:not(.btn).act {
  color: var(--ink) !important;
}

.pci-fim-v3 .nav .btn {
  min-height: 48px;
  padding: 0 24px;
  font-size: var(--fs-small);
}

.pci-fim-v3 .burger {
  width: auto;
  min-width: 46px;
  height: 46px;
  border-color: var(--line-2);
  background: transparent;
}

/* Buttons */
.pci-fim-v3 .btn {
  min-height: 54px;
  padding: 0 28px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 620;
  letter-spacing: -0.005em;
  box-shadow: none;
}

.pci-fim-v3 .btn-gold,
.pci-fim-v3 .btn-cy,
.pci-fim-v3 .btn-wa {
  background: var(--red);
  box-shadow: none;
}

.pci-fim-v3 .btn-ink {
  background: var(--ink);
  box-shadow: none;
}

.pci-fim-v3 .btn-line {
  border-color: var(--line-2);
  background: transparent;
}

.pci-fim-v3 .btn-ghost {
  border-color: rgb(255 255 255 / 55%);
  background: transparent;
  color: #fff;
}

@media (hover: hover) {
  .pci-fim-v3 .btn-gold:hover,
  .pci-fim-v3 .btn-cy:hover,
  .pci-fim-v3 .btn-wa:hover {
    background: var(--red-dark);
    box-shadow: none;
  }

  .pci-fim-v3 .btn-ink:hover {
    background: var(--red);
    box-shadow: none;
  }

  .pci-fim-v3 .btn-line:hover {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--paper) !important;
    box-shadow: none;
  }

  .pci-fim-v3 .btn-ghost:hover {
    background: #fff;
    color: var(--ink);
  }
}

/* Mobile navigation */
.pci-fim-v3 .mnav {
  background: radial-gradient(closest-side at 90% 90%, rgb(183 25 53 / 50%), transparent), #220a10;
}

.pci-fim-v3 .mnav .wrap > a:not(.btn) {
  font-family: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  font-size: var(--fs-h2);
  font-weight: 600;
  letter-spacing: var(--ls-h2);
  line-height: var(--lh-h2);
}

.pci-fim-v3 .mnav a.act,
.pci-fim-v3 .mnav a.act::before {
  color: #f3c9c8;
}

/* Hero */
.pci-fim-v3 .sky {
  background:
    linear-gradient(
      90deg,
      rgb(34 10 16 / 88%) 0%,
      rgb(34 10 16 / 55%) 55%,
      rgb(140 18 40 / 45%) 100%
    ),
    linear-gradient(0deg, rgb(34 10 16 / 82%), transparent 55%),
    url("../assets/faith-in-motion/walk-day-procession-kiburara.jpg") center 28% / cover no-repeat;
}

.pci-fim-v3 .hero-meta {
  border-radius: var(--radius);
}

.pci-fim-v3 .hero-meta .m {
  background: rgb(34 10 16 / 55%);
}

/* Surfaces */
.pci-fim-v3 .tcard,
.pci-fim-v3 .paybox,
.pci-fim-v3 .sponsor-engine,
.pci-fim-v3 .journey-card,
.pci-fim-v3 .panel,
.pci-fim-v3 .figcard,
.pci-fim-v3 .ledger {
  border-radius: var(--radius);
  box-shadow: none;
}

.pci-fim-v3 .sponsor-engine,
.pci-fim-v3 .panel {
  background: #220a10;
}

.pci-fim-v3 .rtable-wrap {
  overflow-x: auto;
}

.pci-fim-v3 input,
.pci-fim-v3 select,
.pci-fim-v3 textarea {
  font-size: 16px;
}

.pci-fim-v3 :focus-visible {
  outline: 3px solid #9b1630;
  outline-offset: 4px;
}

/* Footer. The shared foundation forces footer paragraphs to var(--muted), which is too dark on night. */
.pci-fim-v3 footer {
  --muted: rgb(250 246 241 / 72%);

  background: #220a10;
}

.pci-fim-v3 footer h2 {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.pci-fim-v3 .fbrand b {
  font-family: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: var(--ls-h3);
  line-height: var(--lh-h3);
}

@media (max-width: 760px) {
  .pci-fim-v3 {
    --header-h: 68px;
  }

  .pci-fim-v3 .hero h1 {
    font-size: var(--fs-display);
    line-height: var(--lh-display);
    letter-spacing: var(--ls-display);
  }

  .pci-fim-v3 .hero-meta {
    gap: 20px;
  }

  .pci-fim-v3 .blk {
    padding-block: 60px;
  }

  .pci-fim-v3 .brand {
    padding-right: 8px;
  }

  .pci-fim-v3 .brand .t span {
    display: none;
  }

  .pci-fim-v3 .mnav .wrap > a:not(.btn) {
    min-height: 48px;
  }
}

/* Legibility and touch floor. The shared campaign foundation sets many labels at 8–10px; they stay
   small and mono here, but no smaller than 10px for chips and 11px for reading labels. */
.pci-fim-v3 .hero-meta .m > span,
.pci-fim-v3 .m .u,
.pci-fim-v3 .statline .s > span,
.pci-fim-v3 .ledger-head > span,
.pci-fim-v3 .tally .k,
.pci-fim-v3 .segbox .k,
.pci-fim-v3 .paybox .k,
.pci-fim-v3 .customrow > label,
.pci-fim-v3 .journey-label,
.pci-fim-v3 .journey-meta,
.pci-fim-v3 .lrow .i,
.pci-fim-v3 .lrow .seg,
.pci-fim-v3 .lrow .a > i,
.pci-fim-v3 .slot .cap,
.pci-fim-v3 .datalist .mk,
.pci-fim-v3 .milestone .badge > span,
.pci-fim-v3 .verb .n,
.pci-fim-v3 .fbot > span {
  font-size: var(--fs-caption);
}

.pci-fim-v3 .tier > span,
.pci-fim-v3 .pill {
  font-size: var(--fs-caption);
}

.pci-fim-v3 .crumb,
.pci-fim-v3 .crumb a,
.pci-fim-v3 .crumb b {
  font-size: var(--fs-caption);
}

.pci-fim-v3 .crumb a {
  display: inline-block;
  padding-block: 12px;
  margin-block: -12px;
}

/* Journey photographs: keep faces in frame when a wide or tall photograph is cropped into a card or tile.
   Nothing set a focal point, so every photograph was cropped about its centre. */
.pci-fim-v3 .journey-photo img[src*="walk-day-arrival-celebration"] {
  object-position: 26% 30%;
}

.pci-fim-v3 .journey-photo img[src*="walk-day-procession-kiburara"] {
  object-position: 52% 30%;
}

.pci-fim-v3 .journey-photo img[src*="walk-day-crowd-welcome"] {
  object-position: 62% 40%;
}

.pci-fim-v3 .journey-photo img[src*="river-crossing"] {
  object-position: 50% 62%;
}

.pci-fim-v3 .journey-photo img[src*="riverside-35km"] {
  object-position: 50% 52%;
}