/* 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: 900px) {
  .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; } }
.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 > *,
.donors > * {
  margin-inline: auto;
}

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

/* ============================================================
   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 Hermi'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%); }
}