/* ============================================================
   /programs/mission: one outreach mission in detail.
   Figma: mission-details 3774:12347 (desktop, 1512) and
   mission-details-mobile 5216:31782 (375), More Better file
   WmKUes42Xq4m4lJ956wuwe, finished 2026-10-01. Content 1344 wide
   (84px gutters), 24px gutters on mobile. Folds at 1100, 720 and 640.
   Class prefix: .ms-
   Hand-drawn rings: badges use the gentler page filter #ms-wavy (in the
   page); cards use the shared .wavy-edge (#sh-wavy from the footer).
   ============================================================ */

main#main { background: #fff; }

.ms-svgdefs { position: absolute; width: 0; height: 0; overflow: hidden; }
.ms-wavy { position: relative; isolation: isolate; }
.ms-wavy::after {
  content: ""; position: absolute; inset: -2px; border-radius: inherit;
  border: 5px solid var(--ms-ring, var(--grass, #A7C434));
  pointer-events: none; filter: url(#ms-wavy); z-index: -1;
}
.d-badge.ms-wavy::after { border-radius: 6px; }
.d-badge--sunny.ms-wavy { --ms-ring: var(--sunny, #FFD100); }

.ms-wrap { width: 100%; max-width: 1344px; margin: 0 auto; }
.ms-sec { padding: 96px 84px; }
.ms-head { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.ms-h2 {
  font-family: 'Fredoka', system-ui, sans-serif; font-weight: 600;
  font-size: clamp(30px, 3.2vw, 48px); line-height: 1.15;
  color: var(--carbon, #28201C); margin: 0;
}
.ms-lede { font-size: 20px; line-height: 1.6; color: var(--neutral-600, #5C534D); margin: 0; }
/* Focus rings: Carbon on the white and cream sections, white on the dark hero
   photo (a Grass 600 ring was lost on both). theme.css draws the .btn ring as
   a green box-shadow, so the plain button shadow is put back. */
.ms-sec a:focus-visible { outline: 3px solid var(--carbon, #28201C); outline-offset: 2px; }
.ms-hero a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.ms-sec .btn:focus-visible, .ms-hero .btn:focus-visible {
  box-shadow: 0 6px 6px rgba(0,0,0,.08), 0 2px 1px rgba(0,0,0,.06), inset 0 -1px 2px rgba(0,0,0,.1), inset 0 1px 2px rgba(255,255,255,.4);
}

/* Hero band: magnolia, rounded bottom, the photo card inside */
.ms-hero {
  background: var(--magnolia, #FDF9F1);
  border-bottom: 2px solid var(--neutral-200, #F1EDE5);
  border-radius: 0 0 32px 32px;
  padding: 144px 84px 80px;
}
.ms-hero-card {
  position: relative; overflow: hidden;
  height: 560px; border-radius: 32px; padding: 48px;
  display: flex; flex-direction: column; justify-content: flex-end;
  color: #fff;
}
.ms-hero-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.ms-hero-card::before { content: ""; position: absolute; inset: 0; background: rgba(40,32,28,.55); z-index: 1; }
.ms-hero-copy { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.ms-tags { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start; }
.ms-title {
  font-family: 'Fredoka', system-ui, sans-serif; font-weight: 600;
  font-size: clamp(34px, 3.2vw, 48px); line-height: 1.12; letter-spacing: -.5px;
  color: #fff; margin: 0;
}
.ms-hero-sub { font-size: 20px; line-height: 1.6; color: var(--magnolia, #FDF9F1); max-width: 800px; margin: 0; }
.ms-hero-actions { display: flex; gap: 12px; width: 100%; max-width: 580px; }
.ms-hero-actions > a { flex: 1 1 0; justify-content: center; min-height: 56px; }

/* Overview: the community + mission profile */
.ms-overview { display: flex; gap: 48px; align-items: flex-start; }
.ms-community { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.ms-community-more { font-size: 18px; line-height: 1.6; color: var(--neutral-600, #5C534D); margin: 0; }
.ms-btns { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; padding-top: 12px; }
.ms-profile { flex: 0 0 400px; display: flex; flex-direction: column; gap: 20px; }
.ms-profile-title { font-family: 'Fredoka', system-ui, sans-serif; font-weight: 600; font-size: 28px; line-height: 1.2; color: var(--carbon, #28201C); margin: 0; }
.ms-fact {
  display: flex; gap: 16px; align-items: center;
  padding: 24px; border-radius: 16px;
  background: var(--magnolia, #FDF9F1); --wavy-color: var(--magnolia, #FDF9F1);
}
/* Mission Profile cards are smooth in both frames (3941:22957 desktop, 5216:31913 phone). */
.ms-fact.wavy-edge::after { display: none; }
.ms-disc { width: 48px; height: 48px; border-radius: 24px; background: var(--sunny, #FFD100); display: flex; align-items: center; justify-content: center; flex: none; }
.ms-disc img { width: 24px; height: 24px; display: block; }
.ms-fact-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; line-height: 1.6; }
.ms-fact-label { font-size: 14px; color: var(--charcoal-soft, #6F6762); }
.ms-fact-value { font-size: 16px; font-weight: 600; color: var(--carbon, #28201C); }

/* Daily schedule: four phase cards */
.ms-schedule { display: flex; flex-direction: column; gap: 40px; }
.ms-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.ms-step {
  display: flex; flex-direction: column; gap: 16px;
  padding: 24px; border-radius: 16px;
  background: var(--magnolia, #FDF9F1); --wavy-color: var(--magnolia, #FDF9F1);
  transition: transform var(--ease), box-shadow var(--ease);
}
.ms-step:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.ms-step-when { font-family: 'Fredoka', system-ui, sans-serif; font-weight: 500; font-size: 24px; line-height: 1.25; letter-spacing: -.5px; color: var(--sunny-700, #A37A00); }
.ms-step h3 { font-family: 'Work Sans', system-ui, sans-serif; font-size: 20px; font-weight: 600; line-height: 1.6; color: var(--carbon, #28201C); margin: 0; }
.ms-step p { font-size: 14px; line-height: 1.6; color: var(--neutral-600, #5C534D); margin: 0; }

/* Team roles */
.ms-team { display: flex; gap: 48px; align-items: flex-start; }
.ms-team-head { flex: 0 0 500px; display: flex; flex-direction: column; gap: 24px; }
.ms-checks { list-style: none; margin: 0; padding: 12px 0 0; display: flex; flex-direction: column; gap: 12px; }
.ms-checks li { display: flex; gap: 8px; align-items: flex-start; font-size: 16px; line-height: 1.6; color: var(--carbon, #28201C); }
.ms-checks img { width: 24px; height: 24px; flex: none; }
.ms-roles { flex: 1 1 0; min-width: 0; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.ms-role {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 20px; border-radius: 12px;
  background: var(--magnolia, #FDF9F1); --wavy-color: var(--magnolia, #FDF9F1);
}
.ms-role--alt { background: var(--neutral-200, #F1EDE5); --wavy-color: var(--neutral-200, #F1EDE5); }
.ms-role-txt { display: flex; flex-direction: column; gap: 4px; line-height: 1.6; min-width: 0; }
.ms-role-name { font-size: 20px; font-weight: 600; color: var(--carbon, #28201C); }
.ms-role-sub { font-size: 14px; color: var(--charcoal-soft, #6F6762); }
.ms-pill { flex: none; padding: 4px 8px; border-radius: 9999px; font-size: 14px; font-weight: 600; line-height: 1.4; white-space: nowrap; color: var(--carbon, #28201C); }
.ms-pill--clinical { background: var(--sunny, #FFD100); }
.ms-pill--ops { background: var(--grass, #A7C434); }

/* Logistics */
.ms-logistics { display: flex; flex-direction: column; gap: 40px; }
.ms-logs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.ms-log {
  display: flex; flex-direction: column; gap: 16px; padding: 32px; border-radius: 16px;
  background: var(--magnolia, #FDF9F1); --wavy-color: var(--magnolia, #FDF9F1);
}
.ms-log-icon { width: 48px; height: 48px; border-radius: 12px; background: var(--sunny, #FFD100); display: flex; align-items: center; justify-content: center; }
.ms-log-icon img { width: 24px; height: 24px; display: block; }
.ms-log h3 { font-family: 'Fredoka', system-ui, sans-serif; font-weight: 500; font-size: 24px; line-height: 1.25; letter-spacing: -.5px; color: var(--carbon, #28201C); margin: 0; }
.ms-log p { font-size: 14px; line-height: 1.6; color: var(--neutral-600, #5C534D); margin: 0; }

/* Outreach histories */
.ms-highlights { display: flex; flex-direction: column; gap: 40px; }
.ms-quotes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.ms-quote {
  display: flex; gap: 24px; align-items: center; margin: 0;
  padding: 20px; border-radius: 12px;
  background: var(--magnolia, #FDF9F1); --wavy-color: var(--magnolia, #FDF9F1);
}
.ms-quote > img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; flex: none; display: block; }
.ms-quote-body { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ms-quote blockquote { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.6; color: var(--carbon, #28201C); }
.ms-quote figcaption { display: flex; flex-direction: column; gap: 2px; }
.ms-quote-name { font-size: 16px; font-weight: 600; line-height: 1.6; color: var(--carbon, #28201C); }
.ms-quote-role { font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--charcoal-soft, #6F6762); }
.ms-quote-role a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 1100px) {
  .ms-sec { padding: 72px 40px; }
  .ms-hero { padding: 130px 40px 56px; }
  .ms-hero-card { height: 480px; padding: 36px; }
  .ms-overview, .ms-team { flex-direction: column; gap: 40px; }
  .ms-profile, .ms-team-head { flex: none; width: 100%; }
  .ms-profile { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .ms-profile-title { grid-column: 1 / -1; }
  .ms-steps, .ms-logs { grid-template-columns: repeat(2, 1fr); }
  .ms-quotes { grid-template-columns: 1fr; }
}
/* ---- Phones: Figma "mission-details-mobile" 5216:31782 (375 wide) ----
   24px gutters, 56px between sections, 24px between a section's blocks.
   Cards are smooth with a thin border here (the desktop frame keeps the
   hand-drawn edge). Type: H3 36/1.2 for the first heading, 32/1.15 for the
   rest, body 16/1.6 in Neutral 600. */
@media (max-width: 720px) {
  .ms-sec { padding: 56px 24px; }
  .ms-head { gap: 24px; }
  .ms-h2 { font-size: 32px; line-height: 1.15; }
  .ms-lede, .ms-community-more { font-size: 16px; color: var(--neutral-600, #5C534D); }
  .ms-sec .wavy-edge::after { display: none; }

  /* Hero (5245:23983): the photo card starts 160px down, 614 tall, copy at the
     bottom. The overlay is darker than the frame's 55% so the white lead
     stays readable over the lighter parts of the photo. */
  .ms-hero { padding: 160px 24px 24px; }
  .ms-hero-card { height: auto; min-height: 614px; padding: 32px 24px; border-radius: 32px; }
  .ms-hero-card::before { background: rgba(40,32,28,.7); }
  .ms-hero-copy { gap: 12px; }
  .ms-tags { flex-direction: column; gap: 24px; }
  .ms-title { font-size: 36px; line-height: 1.2; }
  .ms-hero-sub { font-size: 18px; }
  .ms-hero-actions { flex-direction: column; max-width: none; gap: 12px; }
  .ms-hero-actions > a { flex: none; min-height: 44px; padding: 7px 20px; font-size: 18px; line-height: 1.6; white-space: nowrap; }
  .ms-hero-actions > .d-btn-light { font-size: 16px; }

  /* Overview + Mission Profile */
  .ms-overview { gap: 24px; }
  .ms-community { gap: 12px; }
  .ms-community .ms-head { gap: 12px; }
  .ms-community .ms-h2 { font-size: 36px; line-height: 1.2; letter-spacing: -.5px; }
  .ms-btns { flex-direction: column; align-items: stretch; width: 100%; gap: 16px; }
  .ms-btns > * { justify-content: center; min-height: 56px; padding: 12px 16px; font-size: 16px; line-height: 1.6; white-space: nowrap; }
  .ms-btns .d-btn-light { font-size: 16px; }
  .ms-profile { grid-template-columns: 1fr; gap: 16px; }
  .ms-profile-title { font-size: 22px; line-height: 1.25; }
  .ms-fact { padding: 20px; border: 2px solid var(--magnolia, #FDF9F1); }

  /* Schedule: 264px cards scrolling sideways, first card on the 24px gutter. */
  .ms-schedule, .ms-logistics, .ms-highlights { gap: 24px; }
  .ms-steps {
    display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 -24px; padding: 4px 24px 12px; scroll-padding-inline: 24px; scrollbar-width: none;
  }
  .ms-steps::-webkit-scrollbar { display: none; }
  .ms-steps + .sc-dots { display: none; } /* the frame has no dots here */
  .ms-step { flex: 0 0 264px; padding: 20px; gap: 12px; scroll-snap-align: start; border: 1px solid var(--neutral-200, #F1EDE5); }
  .ms-step:hover { transform: none; box-shadow: none; }
  /* The frame sets this label at 22px. It stays 24px (large text) because
     Sunny 700 on Magnolia is 3.74:1, which passes only at large-text size. */
  .ms-step-when { line-height: 1.3; letter-spacing: 0; }
  .ms-step h3 { font-size: 18px; }

  /* Team roles: the title and its pill share the first row and the detail
     line runs the full width under them, which keeps the cards short even
     though the site's role names are longer than the frame's. */
  .ms-team { gap: 24px; }
  .ms-checks { padding-top: 0; }
  .ms-role {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 4px; align-items: center;
    padding: 16px; border: 2px solid var(--neutral-200, #F1EDE5);
  }
  .ms-role-txt { display: contents; }
  .ms-role-name { grid-column: 1; grid-row: 1; font-size: 18px; }
  .ms-pill { grid-column: 2; grid-row: 1; }
  .ms-role-sub { grid-column: 1 / -1; grid-row: 2; }

  /* Logistics */
  .ms-logs { grid-template-columns: 1fr; gap: 16px; }
  .ms-log { padding: 24px; border: 1px solid var(--neutral-200, #F1EDE5); }
  .ms-log h3 { font-size: 22px; line-height: 1.3; letter-spacing: 0; }

  /* Outreach histories. The frame's 72 x 120 oval holds a single headshot;
     these two are landscape group photos and an oval that narrow slices
     through the people at its sides, so the photo stays a 96px circle. */
  .ms-quotes { gap: 16px; }
  .ms-quote { flex-direction: column; align-items: flex-start; gap: 16px; padding: 20px; border: 1px solid var(--neutral-200, #F1EDE5); }
  .ms-quote > img { width: 96px; height: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  .ms-step { transition: none; }
  .ms-step:hover { transform: none; }
}

/* Face-safe crop (YuNet audit 2026-09-24). */
img[src*="nicaragua-outcome"] { object-position: 44% 32% !important; }

/* Narrow phones (320 to 374px): keep the long outline button on one line inside the gutter. */
@media (max-width: 374px) {
  .ms-btns > * { font-size: 16px; padding-inline: 12px; }
  .ms-btns .d-btn-light { font-size: 16px; }
}