/* Desire Child Care Organization
   Palette and type read from the live Wix site on 2026-08-04.
   Jost stands in for Futura LT, which is what Wix was serving. */

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: local('Jost'), url('https://fonts.gstatic.com/s/jost/v18/92zPtBhPNqw79Ij1E865zBUv7myjJQVGPokMmuHL.woff2') format('woff2');
}

:root {
  --green:        #35ad3d;
  --green-deep:   #1c8a43;
  --green-forest: #3f7652;
  --green-light:  #92de97;
  --green-wash:   #f2faf3;
  --orange:       #d84c00;
  --ink:          #181818;
  --ink-soft:     #4a4a4a;
  --white:        #ffffff;
  --rule:         #dfe8e0;

  --measure: 68ch;
  --pad: clamp(1.25rem, 4vw, 3rem);
  --stack: clamp(3rem, 7vw, 5.5rem);

  --font: 'Jost', 'Futura', 'Avenir Next', 'Century Gothic', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  font-weight: 300;
  font-size: clamp(1.03rem, 0.5vw + 0.95rem, 1.18rem);
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--green-deep); }
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
  border-radius: 2px;
}

h1, h2, h3 { font-weight: 500; line-height: 1.15; margin: 0 0 0.5em; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.1rem, 5.5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.35rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
p  { margin: 0 0 1.15em; max-width: var(--measure); }

.wrap { width: min(1140px, 100% - (var(--pad) * 2)); margin-inline: auto; }
.center { text-align: center; }
/* Both shapes: a paragraph INSIDE a .center container, and an element that
   carries .center itself (the year pages emit `<p class="center">`). The
   second was missed originally and left two lines on every Year in Review
   page sitting 348px off. */
.center p, .center { margin-inline: auto; }

/* ---------- skip link, for keyboard and screen reader users ---------- */
.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--white);
  padding: 0.75rem 1.25rem; z-index: 100;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--white);
  border-bottom: 1px solid var(--rule);
}
/* Mobile first: the header stacks. Three items side by side does not fit 375px,
   which was overflowing the page by 256px and forcing a sideways scroll. */
.header-inner {
  display: flex; flex-direction: column; align-items: center;
  gap: 0.85rem; padding-block: 0.8rem; text-align: center;
}
@media (min-width: 960px) {
  .header-inner {
    flex-direction: row; align-items: center; gap: 1.5rem;
    justify-content: space-between; text-align: left;
    padding-block: 0.7rem;
  }
}
.brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; color: inherit; flex-shrink: 0; }
.brand img { width: 46px; }
.brand-name { font-weight: 500; font-size: 1.22rem; letter-spacing: 0.01em; line-height: 1.1; }
.brand-sub { display: block; font-size: 0.62rem; letter-spacing: 0.14em; color: var(--green-forest); text-transform: uppercase; }

.nav ul {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.1rem 1rem; list-style: none; margin: 0; padding: 0;
}
.nav a {
  display: flex; align-items: center;
  min-height: 44px;              /* thumb-sized tap target, WCAG 2.5.8 */
  text-decoration: none; color: var(--ink);
  font-size: 0.93rem; padding: 0.35rem 0.15rem;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
@media (min-width: 900px) { .nav a { min-height: 0; } }
/* Menu spacing (2026-10-10). A touch smaller type and tighter
   gaps keep the menu to two rows on a phone (header stays 234px tall) and to
   one row beside the logo and button from about 1150px wide. */
.nav ul { column-gap: 0.5rem; }
.nav a { font-size: 0.88rem; }
@media (min-width: 960px) { .nav ul { column-gap: 0.6rem; } }
/* Beside the menu, the header button keeps its short label on one line rather
   than folding into a tall two-line pill that squeezes the menu. */
@media (min-width: 960px) { .header-inner > .btn { white-space: nowrap; flex-shrink: 0; } }
/* Where the seven menu items cannot share one line, break them three over
   four, never four over three or six over one (2026-10-13, Board of Directors
   added). Below 400px the type and gaps tighten a little more so a phone still
   shows two rows. */
@media (min-width: 400px) and (max-width: 699px), (min-width: 960px) and (max-width: 1239px) { .nav ul { max-width: 22rem; margin-inline: auto; } }
@media (max-width: 399px) { .nav a { font-size: 0.82rem; } .nav ul { column-gap: 0.4rem; max-width: 20.5rem; margin-inline: auto; } }

.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--green); color: var(--green-deep); }

.btn {
  display: inline-block;
  background: var(--orange); color: var(--white);
  text-decoration: none; font-weight: 500;
  padding: 0.72rem 1.5rem; border-radius: 999px;
  border: 2px solid var(--orange);
  transition: background .18s ease, color .18s ease;
  /* Deliberately NOT white-space:nowrap. A long label such as "The Goloba
     Ibrahim Memorial Water Tank Fund" forced a 70px sideways scroll on a
     375px phone. Buttons wrap; only the nav keeps its labels on one line. */
  max-width: 100%;
  text-align: center;
}
.btn:hover { background: #b83f00; border-color: #b83f00; }
.btn-ghost { background: transparent; color: var(--orange); }
.btn-ghost:hover { background: var(--orange); color: var(--white); }

/* ---------- hero ---------- */
.hero {
  background: linear-gradient(170deg, var(--green-deep) 0%, var(--green) 62%, #4bbd52 100%);
  color: var(--white);
  padding-block: clamp(3rem, 8vw, 5.5rem);
}
.hero .kaale {
  font-size: clamp(0.78rem, 1.6vw, 0.92rem);
  letter-spacing: 0.3em; text-transform: uppercase;
  margin: 0 0 1rem; opacity: 0.9;
}
.hero h1 { color: var(--white); max-width: 20ch; margin-inline: auto; }
.hero p { color: rgba(255,255,255,0.94); font-size: 1.12em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; justify-content: center; margin-top: 1.9rem; }
.hero .btn-ghost { color: var(--white); border-color: rgba(255,255,255,0.75); }
.hero .btn-ghost:hover { background: var(--white); color: var(--green-deep); border-color: var(--white); }

/* ---------- the DESIRE acronym, the spine of the brand ---------- */
.acronym {
  background: var(--green-wash);
  padding-block: var(--stack);
}
.acronym-grid {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 10px; overflow: hidden;
  margin-top: 2.2rem;
}
.acronym-grid div { background: var(--white); padding: 1.5rem 1.15rem; text-align: center; }
.acronym-grid .letter {
  display: block; font-size: 2.5rem; font-weight: 600;
  color: var(--green); line-height: 1; margin-bottom: 0.3rem;
}
.acronym-grid .word { font-size: 0.94rem; color: var(--ink-soft); letter-spacing: 0.02em; }

/* ---------- the milestone ---------- */
.milestone {
  padding-block: var(--stack);
  border-bottom: 1px solid var(--rule);
}
.milestone-badge {
  display: inline-block;
  background: var(--green-light); color: var(--green-deep);
  font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  font-size: 0.76rem; padding: 0.45rem 1.15rem; border-radius: 999px;
  margin-bottom: 1.25rem;
}
.milestone .count {
  font-size: clamp(3.4rem, 11vw, 6.5rem); font-weight: 600;
  color: var(--green); line-height: 0.95; display: block;
}
.milestone .count-label {
  font-size: clamp(1.15rem, 2.6vw, 1.6rem); font-weight: 400;
  color: var(--ink); display: block; margin-top: 0.4rem;
}
.covers {
  display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center;
  margin: 2rem auto 0; max-width: 46rem; padding: 0; list-style: none;
}
.covers li {
  background: var(--green-wash); border: 1px solid var(--rule);
  border-radius: 999px; padding: 0.42rem 1rem; font-size: 0.9rem;
}

/* ---------- generic section ---------- */
.section { padding-block: var(--stack); }
.section--wash { background: var(--green-wash); }

.split {
  display: grid; gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 820px) { .split { grid-template-columns: 1fr 1fr; } }
.split img { border-radius: 12px; }

.eyebrow {
  font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--green-forest); margin: 0 0 0.7rem; font-weight: 500;
}

/* ---------- the statistic ---------- */
.stat {
  background: var(--ink); color: var(--white);
  padding-block: var(--stack); text-align: center;
}
.stat .figure {
  font-size: clamp(3.6rem, 13vw, 7.5rem); font-weight: 600;
  color: var(--green-light); line-height: 1; display: block;
}
.stat p { color: rgba(255,255,255,0.9); margin-inline: auto; }
.stat cite { display: block; margin-top: 1.1rem; font-size: 0.86rem; font-style: normal; opacity: 0.62; }

/* ---------- closing call ---------- */
.closing { padding-block: var(--stack); text-align: center; }
.closing .line {
  font-size: clamp(1.3rem, 3.4vw, 1.95rem);
  font-weight: 400; max-width: 24ch; margin: 0 auto 0.35em; line-height: 1.3;
}
.closing .invite { color: var(--green-forest); font-size: 1.1em; }

/* ---------- centring, applied once rather than per-element ----------
   text-align:center centres the WORDS inside a box. It does not centre the box.
   The global `p { max-width: 68ch }` gives every paragraph a box narrower than
   its column, so inside a centred container a paragraph without auto side
   margins hugs the left edge and looks wrong while the CSS looks right.
   That is what put the donor counter 74px from the left of its column and
   381px from the right, and it was doing the same to the homepage welcome
   line, the closing invitation, and the paragraphs holding the closing
   buttons on every page that has one.
   Declared here, after those rules, so it also overrides the explicit
   `margin: 0 ...` shorthands that were zeroing the side margins. */
.hero > .wrap > *,
.closing > .wrap > *,
.stat > .wrap > *,
.milestone > .wrap > *,
.plan > .wrap > *,
.donors > * {
  margin-inline: auto;
}

/* The school plan: a little air between the legend and its button. */
.plan .covers + p { margin-top: 2.25rem; }

/* ---------- footer ---------- */
.site-footer {
  background: var(--green-forest); color: rgba(255,255,255,0.9);
  padding-block: 3rem 2rem; font-size: 0.93rem;
}
.footer-grid {
  display: grid; gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  padding-bottom: 2rem; border-bottom: 1px solid rgba(255,255,255,0.2);
}
.site-footer h2 { font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--white); margin-bottom: 0.85rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.15rem; }
.site-footer li a { display: inline-flex; align-items: center; min-height: 38px; }
.site-footer a { color: var(--white); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.3); }
.site-footer a:hover { border-bottom-color: var(--white); }
.site-footer p { max-width: 34ch; }
.colophon { padding-top: 1.5rem; font-size: 0.84rem; opacity: 0.78; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ============================================================
   Interior pages
   ============================================================ */

.page-hero {
  background: var(--green-wash);
  border-bottom: 1px solid var(--rule);
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.page-hero h1 { max-width: 18ch; }
.lede { font-size: 1.15em; color: var(--ink-soft); max-width: 56ch; }

.prose > p { max-width: var(--measure); }
.prose > p + p { margin-top: 0; }

/* pull quotes */
.pull { margin: 2.5rem 0; padding: 0; }
.pull blockquote {
  margin: 0; padding: 0 0 0 1.4rem;
  border-left: 4px solid var(--green);
  font-size: 1.22em; line-height: 1.45; color: var(--green-forest);
  max-width: 46ch;
}
.pull--stark blockquote { border-left-color: var(--orange); color: var(--ink); }
.pull--wide blockquote { max-width: 62ch; font-size: 1.12em; }
/* A short section built around one quotation: the column sits centered on the
   page instead of hugging the left with empty space beside it. */
.prose--centered { width: min(52rem, 100% - (var(--pad) * 2)); }
.pull figcaption { margin-top: 0.9rem; padding-left: 1.75rem; font-size: 0.92rem; color: var(--ink-soft); }

.verify { font-size: 0.92rem; color: var(--ink-soft); line-height: 1.5; }

/* FAQ accordions */
details {
  border-bottom: 1px solid var(--rule);
  padding: 0.35rem 0;
}
details summary {
  cursor: pointer; list-style: none;
  padding: 1rem 2rem 1rem 0; position: relative;
  font-size: 1.08em; font-weight: 500; color: var(--green-deep);
}
details summary::-webkit-details-marker { display: none; }
details summary::after {
  content: '+'; position: absolute; right: 0.25rem; top: 50%;
  transform: translateY(-50%); font-size: 1.5rem; font-weight: 300;
  color: var(--green); line-height: 1;
}
details[open] summary::after { content: '\2212'; }
details summary:hover { color: var(--orange); }
details > p { padding-bottom: 0.35rem; }

.founder-quote {
  margin: 0 auto; max-width: 30ch;
  font-size: clamp(1.4rem, 4vw, 2.1rem); line-height: 1.3;
  color: var(--green-light); font-weight: 400;
}
.stat cite { color: rgba(255,255,255,0.7); }

/* team */
.people { display: grid; gap: 2.75rem; }
@media (min-width: 760px) { .people { grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); } }
.person img { border-radius: 50%; width: 168px; height: 168px; object-fit: cover; margin-bottom: 1.1rem; }
.person h2 { font-size: 1.4rem; margin-bottom: 0.2rem; }
.role { color: var(--green-forest); font-size: 0.94rem; margin-bottom: 0.9rem; }
.contact-line { font-size: 0.94rem; color: var(--ink-soft); }

/* phases */
.phases { display: grid; gap: 1.5rem; margin-top: 2.5rem; }
@media (min-width: 860px) { .phases { grid-template-columns: repeat(3, 1fr); } }
.phase {
  background: var(--white); border: 1px solid var(--rule);
  border-radius: 12px; padding: 1.9rem 1.6rem;
}
.phase-label {
  font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--green-forest); font-weight: 500; margin-bottom: 0.5rem;
}
.phase h3 { margin-bottom: 0.8rem; }
.phase-win {
  background: var(--green-light); color: var(--green-deep);
  font-weight: 500; padding: 0.6rem 0.9rem; border-radius: 8px;
}
.phase-figure { font-size: 1.9rem; font-weight: 600; color: var(--green); margin-bottom: 0.6rem; }
.phase p { max-width: none; }

/* campaigns */
.campaigns { display: grid; gap: 1.5rem; margin-top: 2.25rem; }
@media (min-width: 860px) { .campaigns { grid-template-columns: repeat(3, 1fr); } }
.campaign {
  background: var(--white); border: 1px solid var(--rule);
  border-radius: 12px; padding: 1.8rem 1.5rem;
}
.campaign h3 { font-size: 1.2rem; }
.campaign p { max-width: none; font-size: 0.97em; }
.warn {
  background: #fff4ed; border-left: 3px solid var(--orange);
  padding: 0.7rem 0.9rem; font-size: 0.9em; color: #7a3200;
}

/* the children */
.kids {
  list-style: none; margin: 2.5rem 0 0; padding: 0;
  display: grid; gap: 1.4rem 1rem;
  grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
}
.kids li { text-align: center; }
.kids img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: 12px; margin-bottom: 0.55rem;
  background: var(--rule);
}
.kid-name { font-size: 0.88rem; color: var(--ink); line-height: 1.3; display: block; }

.memorial { border-top: 1px solid var(--rule); }
.memorial-portrait { border-radius: 50%; width: 168px; height: 168px; object-fit: cover; margin: 0 auto 1.2rem; }
.memorial-years { color: var(--green-forest); letter-spacing: 0.1em; margin-bottom: 1.2rem; }

.reports { list-style: none; padding: 0; margin: 1.75rem auto 0; display: grid; gap: 0.6rem; max-width: 30rem; }
.reports a {
  display: block; background: var(--white); border: 1px solid var(--rule);
  border-radius: 8px; padding: 0.85rem 1.15rem; text-decoration: none;
  color: var(--green-deep);
}
.reports a:hover { border-color: var(--green); }

.donors {
  max-width: 62rem; margin-inline: auto; font-size: 0.9rem;
  color: var(--ink-soft); line-height: 2;
}

/* contact form */
.contact-block { font-size: 1em; margin-bottom: 1.3rem; }
.contact-form label { display: block; font-size: 0.9rem; font-weight: 500; margin-bottom: 0.3rem; }
.contact-form input, .contact-form textarea {
  width: 100%; font: inherit; font-size: 0.98em;
  padding: 0.7rem 0.85rem; margin-bottom: 1.1rem;
  border: 1px solid var(--rule); border-radius: 8px;
  background: var(--white); color: var(--ink);
}
.contact-form input:focus, .contact-form textarea:focus {
  outline: 3px solid var(--green-light); outline-offset: 1px; border-color: var(--green);
}
.contact-form button { border: 0; cursor: pointer; font: inherit; font-weight: 500; }
.form-note { font-size: 0.86rem; color: var(--ink-soft); margin-top: 1rem; }

/* mailing list band, at the top of every footer.
   Posts to events.thevirtualhermit.quest/api/desire-subscribe. Each message
   stays hidden until its id is the URL fragment (how a form posted without
   JavaScript comes back) or the footer script marks it .is-shown. */
.join {
  display: grid; gap: 1.1rem 2.5rem;
  padding-bottom: 2rem; margin-bottom: 2rem;
  border-bottom: 1px solid rgba(255,255,255,0.2);
}
@media (min-width: 900px) {
  .join { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: end; }
  .join-after { grid-column: 2; }
}
.site-footer .join p { max-width: none; margin: 0; }
.join-lead h2 { margin-bottom: 0.45rem; }
.join-lead p { font-size: 1.05rem; color: var(--white); }
.join-form { display: grid; gap: 0.8rem; }
@media (min-width: 640px) {
  .join-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; }
}
.join-form label { display: block; font-size: 0.86rem; font-weight: 500; margin-bottom: 0.3rem; color: var(--white); }
.join-form label span { font-weight: 400; opacity: 0.8; }
.join-form input {
  width: 100%; font: inherit; font-size: 1rem;
  padding: 0.66rem 0.85rem; border: 2px solid transparent; border-radius: 8px;
  background: var(--white); color: var(--ink);
}
.join-form input:focus { outline: 3px solid var(--green-light); outline-offset: 1px; }
.join-form .btn { font: inherit; font-weight: 500; cursor: pointer; }
.join-form .btn:disabled { opacity: 0.7; cursor: progress; }
.site-footer .join .join-note { font-size: 0.84rem; opacity: 0.8; }
.site-footer .join .join-msg { display: none; margin-top: 0.6rem; font-weight: 500; }
.site-footer .join .join-msg:target,
.site-footer .join .join-msg.is-shown { display: block; }

/* ============================================================
   Individual child pages
   ============================================================ */

.kids a { text-decoration: none; color: inherit; display: block; border-radius: 12px; }
.kids a:hover img { transform: scale(1.03); box-shadow: 0 6px 20px rgba(0,0,0,.14); }
.kids a:hover .kid-name { color: var(--green-deep); }
.kids img { transition: transform .18s ease, box-shadow .18s ease; }

.child-page { padding-block: clamp(2rem, 5vw, 3.5rem) var(--stack); }
.child-page .eyebrow a { color: var(--green-forest); text-decoration: none; }
.child-page .eyebrow a:hover { color: var(--orange); }

.child-head {
  display: grid; gap: clamp(1.5rem, 4vw, 2.75rem);
  grid-template-columns: 1fr; align-items: center;
  margin-bottom: clamp(2rem, 5vw, 3rem);
}
@media (min-width: 720px) { .child-head { grid-template-columns: 300px 1fr; } }

.child-photo {
  width: 100%; max-width: 300px; aspect-ratio: 1;
  object-fit: cover; border-radius: 16px; background: var(--rule);
}
.child-head h1 { font-size: clamp(1.9rem, 5vw, 2.9rem); margin-bottom: 0.6rem; }

.child-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.child-facts li {
  font-size: 0.98rem; color: var(--ink-soft);
  padding-left: 1.1rem; position: relative;
}
.child-facts li::before {
  content: ''; position: absolute; left: 0; top: 0.62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--green);
}

.child-story { max-width: var(--measure); }
.child-story p { font-size: 1.06em; }
.memorial-note {
  border-left: 3px solid var(--green); padding-left: 1rem;
  color: var(--green-forest); font-style: italic;
}

/* Long bare URLs pasted into prose (up to 63 characters with no break point)
   have no wrap opportunity and push the page sideways on a phone. This lets
   them break rather than overflow. Applied to text containers only, so it
   cannot affect layout elements. */
p, li, h1, h2, h3, blockquote, .post-body, .prose, td { overflow-wrap: break-word; }


/* ── Meet the Family ──────────────────────────────────────────────────────
   The portraits were 168px circles with object-fit:cover, which cropped the
   faces off images whose aspect ratios run from 0.69 to 1.12. Nothing is
   cropped here: the images are shown whole, letterboxed to a common height so
   the row still lines up. */
.family-hero { margin: 0 0 2.5rem; text-align: center; }
.family-hero img {
  width: 100%; max-width: 34rem; height: auto;
  border-radius: 12px; display: block; margin: 0 auto;
}
.family-hero figcaption {
  margin-top: 0.85rem; font-size: 0.94rem; color: var(--green-forest);
}
.family-leads {
  display: grid; gap: clamp(1.6rem, 4vw, 3rem);
  margin-bottom: 3.25rem; padding-bottom: 2.75rem;
  border-bottom: 1px solid var(--rule);
}
.people--three { grid-template-columns: 1fr; }
.people--three .person img {
  width: 100%; height: 240px; object-fit: contain;
  background: var(--green-wash); border-radius: 12px;
}
@media (min-width: 760px) {
  .family-leads { grid-template-columns: 1fr 1fr; }
  .people--three { grid-template-columns: repeat(3, 1fr); }
}


/* A full-width photograph used to break up a page of prose. Images are shown
   whole, never cropped. */
.photo-band { margin: 2.5rem 0; }
/* Quartered 2026-08-29 at the Chair's direction. Full width this collage was 1140px
   square, which is a whole screen of page given to four small photographs. A
   quarter of that width is 285px, so it now reads as a supporting picture
   rather than a feature, and the caption sits under it centred. */
/* Capped on BOTH axes. Width alone is not enough: a portrait photograph held
   to 285px wide is still 507px tall, which is what the FAQ picture was doing.
   Bounding the height too gives every one of these the same visual weight
   whatever shape it is. */
.photo-band img {
  width: auto; height: auto;
  max-width: 285px; max-height: 340px;
  margin-inline: auto; border-radius: 12px; display: block;
}
/* Below the campaign cards this is a closing picture rather than something
   interrupting the prose, so it is allowed real presence. The plain .photo-band
   cap of 285px is right for a picture sitting mid-paragraph and too timid for
   one that closes a section. */
.photo-band--feature img { max-width: 520px; max-height: 520px; }

/* A wide, shallow strip rather than a picture in a column. The plain
   .photo-band cap of 285px wide is right for a squarish photograph and wrong
   for a 6:1 band, which at that width becomes a sliver. This runs the full
   column and stays shallow, so it reads as a banner and costs almost no
   vertical space. */
.photo-band--strip img {
  max-width: 100%; max-height: none;
  width: 100%; border-radius: 10px;
}

.photo-band figcaption {
  margin-top: 0.7rem; font-size: 0.92rem; color: var(--green-forest); text-align: center;
}


/* A photograph at the head of a campaign card. Sits inside the card's padding,
   shown whole rather than cropped to a shape. */
.campaign-photo {
  /* contain, not cover: one of these photographs has a quotation printed inside
     it, and cropping to a tidy rectangle would cut her words off. Consistent
     height keeps the three cards aligned; nothing is cropped. */
  width: 100%; height: 170px; object-fit: contain;
  border-radius: 8px; margin-bottom: 1.1rem; display: block;
  background: var(--green-wash);
}

/* ---------- the donor roll ----------
   The names are carried across from the old site EXACTLY as they were
   published there, line for line. They are deliberately NOT re-split into one
   name per line: the separator is only a space, and the list mixes
   "A. Pardo Moreno", "Dr J. A. Wells", "Saúde Integral Ltd." and
   "Brand X Concrete Pumping", so any automatic split mangles real people's
   names. Fidelity beats tidiness on a page that thanks donors by name. */
.donors { margin-top: clamp(3rem, 6vw, 4.5rem); }
.donors h2 { margin-bottom: 0.6rem; }
.donors-intro {
  max-width: 54ch; margin-inline: auto; color: var(--ink-soft);
}
/* The donor counter, built to read as a counter rather than a number in a
   sentence: dark tiles, one digit each, like an odometer.
   margin-inline is explicit because the global `p { max-width: 68ch }` was
   holding this paragraph in an off-centre box, 74px from the left of the
   column and 381px from the right. text-align alone centres the words INSIDE
   that box, which is not the same as centring the box. */
.donor-count {
  text-align: center;
  max-width: none; margin: 0.6rem auto 0;
}
.donor-odometer {
  display: inline-flex; gap: 5px; justify-content: center;
  margin-bottom: 0.7rem;
}
.donor-odometer .digit {
  min-width: 0.78em;
  padding: 0.2em 0.16em;
  background: var(--ink); color: var(--green-light);
  border-radius: 7px;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  font-weight: 600; line-height: 1; text-align: center;
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.4);
}
/* leading zeros are room to grow, not part of the figure, so they recede */
.donor-odometer .digit.pad { opacity: 0.32; }
.donor-count-label {
  display: block; color: var(--ink-soft); font-size: 1.02rem;
}

.donor-roll {
  max-width: 66ch; margin: 2rem auto 0;
  text-align: center;
  font-size: 0.98rem; line-height: 2; color: var(--ink);
}
/* Each name is one unbreakable unit, so "T. Abramovitz" can never be split
   across two lines with the initial stranded. The middle dots sit BETWEEN the
   spans in the markup rather than inside them, so the line breaks fall on the
   separators, which is exactly where a reader expects them. */
.donor-roll .donor { white-space: nowrap; }
/* Given its full width rather than a narrow column, so it reads as one running
   line instead of a stacked block. It is a long sentence, so on a laptop it
   settles to two lines; forcing it onto one would mean shrinking it past
   comfortable reading size. */
.donors-note {
  margin-top: 1.8rem; font-size: 0.92rem; color: var(--green-forest);
  max-width: none; margin-inline: 0;
  /* The sentence is about 190 characters. At a readable size it needs roughly
     1330px to sit on one line and the content column is 1140px, so one line is
     not achievable without shrinking it to about 11px. Balanced wrapping is the
     next best thing: it splits the two lines evenly so the break looks chosen
     rather than accidental. */
  text-wrap: balance;
}

/* ---------- a photograph behind the page title ---------- */
/* About Us is Bugingo's own story, so the photograph sits level with the title
   rather than waiting further down the page, and it is shown whole. Its own
   proportions are kept and it is sized by the height of the band, so nothing
   is cut off the top or bottom of it.
   The left edge is dissolved into the page with a mask rather than a hard
   border, so it arrives gradually instead of stopping dead. A wash is laid
   over the same span so the title keeps its contrast wherever it happens to
   fall, which a mask alone cannot promise once a face or a bright shirt
   drifts under a letter.
   Below 820px there is not enough width to put words over a picture and keep
   both, so the photograph steps below the title and shows at full width. That
   is the same breakpoint .split uses. */
.page-hero--photo { position: relative; overflow: hidden; }

.hero-photo {
  display: block; height: auto;
  width: min(1140px, 100% - (var(--pad) * 2));
  margin: 2rem auto 0;
  border-radius: 12px;
}

@media (min-width: 820px) {
  .page-hero--photo { min-height: clamp(27rem, 42vw, 38rem); display: flex; align-items: center; }

  .hero-photo {
    position: absolute; z-index: 0;
    top: 0; right: 0; height: 100%;
    /* The left edge of the picture is put exactly where the title column ends,
       so the fade starts on the last letter rather than a guessed distance
       after it. Derived, not eyeballed: the band is the full viewport, the
       text sits in a centred wrap, and the title is capped at 52% of that
       wrap, so the title ends at (viewport - wrap) / 2 + 0.52 * wrap. Take
       that from the viewport and the picture's width is half the viewport
       less 2% of the wrap. It holds at every width because it is the same
       arithmetic the layout itself uses, so the two cannot drift apart. */
    width: calc(50% - 0.02 * min(1140px, 100% - (var(--pad) * 2)));
    object-fit: cover; object-position: center 46%;
    margin-top: 0; border-radius: 0;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.45) 30%, #000 72%);
            mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.45) 30%, #000 72%);
  }

  /* the wash that guarantees the title's contrast */
  .page-hero--photo::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(to right,
      var(--green-wash) 0%,
      rgba(242,250,243,0.94) 30%,
      rgba(242,250,243,0.60) 48%,
      rgba(242,250,243,0) 68%);
  }

  .page-hero--photo > .wrap { position: relative; z-index: 2; width: min(1140px, 100% - (var(--pad) * 2)); }

  /* The photograph takes the right 52%, so the words are held inside 44% of
     the band and stop short of it with room to spare. Without this the byline
     is the line that reaches furthest right and it lands on the picture at
     around 840px wide, which is exactly where the wash has already thinned
     out and can no longer carry it. The wash is still there underneath as the
     second guarantee; this is the first one.
     52% is measured, not guessed: it is the narrowest column that keeps
     "'Wings of Desire'" whole on one line at every width, which is the break
     that matters because it is a quoted title. "My Story of Inspiration"
     folds to two lines below about 1200px, which is ordinary and reads fine.
     Tighten the column further and the quoted title itself snaps in half.
     The picture's width is derived from this 52%, so changing one number here
     moves the picture to match and the fade keeps meeting the text. */
  .page-hero--photo .eyebrow { max-width: 52%; }
  .page-hero--photo h1 { max-width: 52%; }
  .page-hero--photo .lede { max-width: min(34ch, 52%); }
}

/* The urgent appeal on the home page. The photograph is a tall selfie, so it is
   held to a sensible height and cropped from the top down, never the faces. */
.appeal .appeal-photo { width: 100%; max-height: 520px; object-fit: cover; object-position: center top; }
.appeal h3 { margin-top: 1.6rem; }

/* Join our boards page */
.boards { display: grid; gap: 1.5rem; }
@media (min-width: 860px) { .boards { grid-template-columns: 1fr 1fr; } }
.board-card { background: var(--white); border: 1px solid var(--rule); border-radius: 12px; padding: 1.8rem 1.5rem; }
.board-card p, .board-card ul { max-width: none; }
.board-who { font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--green-forest); font-weight: 600; }
.wrap.narrow { max-width: 720px; }
.board-form fieldset { border: 1px solid var(--rule); border-radius: 10px; padding: 0.9rem 1.1rem 0.6rem; margin: 0 0 1.2rem; background: var(--white); }
.board-form fieldset[hidden] { display: none; }
.board-form legend { font-weight: 500; padding: 0 0.3rem; }
.board-form legend span, .board-form label span { font-weight: 400; color: var(--ink-soft); }
.board-form .choice { display: flex; gap: 0.6rem; align-items: baseline; font-weight: 400; margin-bottom: 0.55rem; }
.board-form .choice input { width: auto; margin: 0; }
/* Every entry is required (2026-10-13). A blank entry the applicant has passed
   over is outlined in orange, and the send button stays greyed out until the
   list under the form is empty. */
.board-form .is-missing { border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange); }
.board-form label.choice.is-missing, .board-form fieldset.is-missing legend { color: var(--orange); }
.board-form label.choice.is-missing { box-shadow: none; }
.board-form .field-hint { margin: -0.1rem 0 0.4rem; }
.board-form .referees-title { margin: 1.6rem 0 0.2rem; font-size: 1.1rem; }
.board-form .need { margin: 0.4rem 0 0.8rem; }
.board-form button[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
#bf-status:not(:empty) { font-size: 1rem; font-weight: 500; color: var(--green-forest); margin-bottom: 1rem; }

/* ---------- the giving portal (/give), opened 2026-10-02 ----------
   Desire's own front door for donors who do not know the Chair. Every button opens
   a Stripe checkout made by the same endpoint the Hermits page uses. */
.give-controls { display: grid; justify-items: center; gap: 0.6rem; margin: 1.6rem auto 0; max-width: 40rem; text-align: center; }
.seg { display: inline-flex; border: 2px solid var(--green-deep); border-radius: 999px; overflow: hidden; }
.seg button {
  font: inherit; font-weight: 500; background: var(--white); color: var(--green-deep);
  border: 0; padding: 0.45rem 1.3rem; cursor: pointer; min-height: 44px;
}
.seg button[aria-pressed="true"] { background: var(--green-deep); color: var(--white); }
.seg--small button { padding: 0.3rem 1rem; font-size: 0.9rem; min-height: 40px; }
.give-note { font-size: 0.9rem; color: var(--ink-soft); margin: 0 auto; }
.feebar { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.86rem; color: var(--ink-soft); text-align: left; line-height: 1.45; cursor: pointer; }
.feebar input { width: 1.15rem; height: 1.15rem; margin-top: 0.12rem; flex: none; accent-color: var(--green-deep); }
.give-msg { color: #a33a00; font-weight: 500; font-size: 0.92rem; margin: 0.4rem auto 0; min-height: 0; }
.give-msg:empty { display: none; }
.give-charged { font-size: 0.86rem; color: var(--green-forest); margin: 0; min-height: 1.3em; }

.waiting { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.waiting h3 { color: var(--orange); letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.95rem; }
.waiting-grid { display: grid; gap: 1.5rem; margin-top: 1.2rem; }
/* (two-across rule removed 2026-10-03: with three children it left one alone) */
.waiting-card {
  display: grid; grid-template-columns: 130px 1fr; gap: 1.2rem; align-items: start;
  border: 2px solid var(--green-light); border-radius: 12px; padding: 1.4rem;
}
@media (max-width: 480px) { .waiting-card { grid-template-columns: 1fr; justify-items: center; text-align: center; } }
.waiting-card img { width: 130px; height: 130px; object-fit: cover; border-radius: 50%; }
.waiting-card h4 { font-size: 1.2rem; font-weight: 500; margin: 0 0 0.2rem; }
.waiting-card p { font-size: 0.97em; margin-bottom: 0.6rem; }
.waiting-facts { list-style: none; margin: 0 0 0.5rem; padding: 0; color: var(--green-forest); font-size: 0.92rem; }
.waiting-links a, .give-links a { font-size: 0.92rem; }
.waiting-btns { display: flex; flex-wrap: wrap; gap: 0.6rem; }
@media (max-width: 480px) { .waiting-btns { justify-content: center; } }
.waiting-btns .btn, .tier .btn, .give-row .btn { font: inherit; font-weight: 500; cursor: pointer; font-size: 0.95rem; }
.btn:disabled { opacity: 0.7; cursor: progress; }

.tiers { display: grid; gap: 1.5rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
@media (min-width: 860px) { .tiers { grid-template-columns: repeat(3, 1fr); } }
.tier {
  display: flex; flex-direction: column; text-align: center;
  border: 1px solid var(--rule); border-radius: 12px; padding: 1.8rem 1.5rem;
}
.tier h3 { font-size: 1.2rem; }
.tier p { max-width: none; font-size: 0.97em; margin-inline: auto; }
.tier-amt { margin-bottom: 0.2rem; }
.tier-amt .amt { font-size: 2.2rem; font-weight: 600; color: var(--green); }
.tier-amt .per { color: var(--ink-soft); margin-left: 0.15rem; }
.tier .btn { margin-top: auto; align-self: center; }

.give-boxes { display: grid; gap: 1.5rem; margin-top: 2.25rem; }
@media (min-width: 860px) {
  .give-boxes { grid-template-columns: repeat(2, 1fr); }
  /* Five boxes: Team Lwanga leads across the full width, the other four sit
     two by two, so no box is left alone on the last row. */
  .give-box.give-box--lead { grid-column: 1 / -1; display: block; }
  .give-box--lead .give-portrait { float: left; width: 140px; height: 140px; margin: 0 1.6rem 1rem 0; }
  .give-box--lead .give-form { clear: both; }
}
.give-box { background: var(--white); border: 1px solid var(--rule); border-radius: 12px; padding: 1.8rem 1.5rem; display: flex; flex-direction: column; }
.give-box h3 { font-size: 1.2rem; }
.give-box p { max-width: none; font-size: 0.97em; }
.give-portrait { width: 104px; height: 104px; object-fit: cover; border-radius: 12px; margin-bottom: 1rem; }
.give-form { display: grid; gap: 0.7rem; margin-top: auto; padding-top: 0.6rem; justify-items: start; }
.give-form .give-note { margin: 0; }
.give-row { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.amount {
  display: inline-flex; align-items: center; gap: 0.2rem;
  border: 1px solid #b9c7bb; border-radius: 999px; padding: 0 0.9rem; background: var(--white);
}
.amount input { font: inherit; border: 0; width: 6.5rem; padding: 0.55rem 0; background: transparent; }
.amount input:focus { outline: none; }
.amount:focus-within { outline: 3px solid var(--orange); outline-offset: 2px; }
.give-form .purpose { font: inherit; font-size: 0.92rem; width: 100%; border: 1px solid #b9c7bb; border-radius: 8px; padding: 0.55rem 0.8rem; }
.give-form .give-msg { margin: 0; }
.give-fine { font-size: 0.86rem; color: var(--ink-soft); text-align: center; margin: 2rem auto 0; }

@media (min-width: 860px) { .campaigns--two { grid-template-columns: repeat(2, 1fr); max-width: 52rem; margin-inline: auto; } }

/* Every give button elsewhere on the site lands on an anchor here (#waiting,
   #lwanga, #general and so on). Without this the sticky header sits on top of
   the box the donor was sent to. */
#sponsor, #waiting, #funds, #school, #reports, .give-box, .campaign { scroll-margin-top: 130px; }
/* On a phone the sticky header stands about 235px tall. */
@media (max-width: 959px) { #sponsor, #waiting, #funds, #school, #reports, .give-box, .campaign { scroll-margin-top: 250px; } }

/* Three children awaiting sponsorship (from 2026-10-03): three across on a
   wide screen, each card stacked, photo above, so none sits alone on a row. */
@media (min-width: 960px) {
  .waiting-grid { grid-template-columns: repeat(3, 1fr); }
  .waiting-card { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .waiting-btns { justify-content: center; }
  /* Buttons sit level across the three cards whatever the story length. */
  .waiting-card { align-items: stretch; }
  .waiting-card > div { display: flex; flex-direction: column; align-items: center; height: 100%; }
  .waiting-card .waiting-btns { margin-top: auto; }
}

/* The Emergency Reserve leads the Give page, above the children awaiting
   sponsorship (the Chair, 2026-10-03: "It is the top priority right now"). */
.give-box--priority { max-width: 46rem; margin-inline: auto; border: 2px solid var(--orange); }
.give-box--priority .eyebrow { margin-bottom: 0.4rem; color: var(--orange); }
.give-box--priority h3 { font-size: clamp(1.4rem, 2.6vw, 1.75rem); }
/* With the Reserve moved out, three boxes follow Team Lwanga: three across. */
@media (min-width: 960px) { .give-boxes { grid-template-columns: repeat(3, 1fr); } }