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

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

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