/* Shared inner-page styles (About, Programs, later pages) */
.page-header { background: var(--green-900); color: var(--white); padding-block: var(--s-7) var(--s-7); position: relative; isolation: isolate; border-bottom: 4px solid var(--gold-500); }
.page-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cpath d='M28 4l24 24-24 24L4 28z' fill='none' stroke='%23c99a2e' stroke-opacity='.14' stroke-width='1.5'/%3E%3C/svg%3E") 0 0/56px 56px; }
.page-header__title { color: var(--white); font-size: var(--fs-900); margin-bottom: var(--s-3); }
.page-header__intro { font-size: var(--fs-500); color: var(--green-100); margin: 0; max-width: 46rem; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0 0 var(--s-4); padding: 0; font-size: var(--fs-300); }
.crumbs li + li::before { content: "/"; margin-right: var(--s-2); color: var(--gold-200); }
.crumbs a { color: var(--gold-200); }
.crumbs [aria-current] { color: var(--white); }
.page-header :focus-visible { outline-color: var(--gold-200); }

.draft-tag { display: inline-block; padding: .1em .55em; border: 1px dashed currentColor; border-radius: 4px; font: 500 .75rem/1.5 var(--font-body); vertical-align: middle; opacity: .8; }

/* About */
.mv { display: grid; gap: var(--s-5); }
@media (min-width: 56.25rem) { .mv { grid-template-columns: 1fr 1fr; } }
.mv__panel { padding: var(--s-6); border-radius: var(--r-lg); }
.mv__panel--mission { background: var(--green-800); color: var(--white); }
.mv__panel--mission .mv__title { color: var(--gold-200); }
.mv__panel--vision { background: var(--gold-200); color: var(--green-900); }
.mv__title { font-size: var(--fs-700); }
.mv__text { font: 500 var(--fs-600)/1.4 var(--font-display); margin-bottom: var(--s-3); max-width: none; }
.values { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-5) var(--s-7); }
@media (min-width: 48rem) { .values { grid-template-columns: repeat(2, 1fr); } }
.values__item { padding-left: var(--s-4); border-left: 4px solid var(--gold-500); }
.values__name { font-size: var(--fs-600); margin-bottom: var(--s-1); }
.values__text { margin: 0; color: var(--ink-soft); }
.values__note { margin: var(--s-5) 0 0; }

/* Programs */
.program { display: grid; gap: var(--s-5); }
@media (min-width: 56.25rem) { .program { grid-template-columns: 1fr 1.6fr; gap: var(--s-8); } .program__head { position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; } }
.program__head { display: flex; align-items: center; gap: var(--s-4); }
.program__icon { flex: none; display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%; background: var(--green-800); color: var(--gold-200); }
.program__title { margin: 0; font-size: var(--fs-700); }
.program__label { font: 600 var(--fs-300)/1.4 var(--font-body); color: var(--gold-700); margin-bottom: var(--s-2); }
.program__objective { font: 500 var(--fs-600)/1.45 var(--font-display); color: var(--ink); margin-bottom: var(--s-5); }
.across { padding: var(--s-5); border: 1px solid rgb(255 255 255 / .25); border-radius: var(--r-lg); }
.section--green .across__title { color: var(--gold-200); font-size: var(--fs-600); }
.across p { margin: 0; color: var(--green-100); }
.note-box { max-width: 40rem; padding: var(--s-5); border: 1.5px dashed var(--earth-600); border-radius: var(--r-lg); }
.note-box__title { margin: 0 0 var(--s-2); font: 600 var(--fs-500)/1.3 var(--font-display); color: var(--green-900); }
.note-box p:last-child { margin: 0; }

/* Team */
.members { list-style: none; margin: 0 0 var(--s-5); padding: 0; display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.member { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-4); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); }
.member .avatar { flex: none; }
.member__name { font: 600 var(--fs-500)/1.3 var(--font-display); color: var(--green-900); overflow-wrap: anywhere; }
.members__note { font-size: var(--fs-300); color: var(--ink-soft); }

/* Impact: timeline (vertical on phones, horizontal from 900px) */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: none; }
.timeline__step { position: relative; padding: 0 0 var(--s-6) 3.5rem; }
.timeline__step::before { content: ""; position: absolute; left: 1.2rem; top: 2.5rem; bottom: 0; width: 2px; background: var(--gold-500); }
.timeline__step:last-child { padding-bottom: 0; }
.timeline__step:last-child::before { display: none; }
.timeline__num { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--green-800); color: var(--gold-200); font: 600 1.1rem/1 var(--font-display); }
.timeline__title { font-size: var(--fs-500); margin-bottom: var(--s-1); padding-top: .35rem; }
.timeline__text { margin: 0; color: var(--ink-soft); }
@media (min-width: 56.25rem) {
  .timeline { grid-template-columns: repeat(5, 1fr); gap: var(--s-4); }
  .timeline__step { padding: 3.5rem 0 0 0; }
  .timeline__step::before { left: 2.5rem; right: calc(-1 * var(--s-4)); top: 1.2rem; bottom: auto; width: auto; height: 2px; }
  .timeline__title { padding-top: 0; }
}

/* Impact: reports */
.reports { display: grid; gap: var(--s-5); }
@media (min-width: 48rem) { .reports { grid-template-columns: repeat(2, 1fr); } }
.report-group { padding: var(--s-5); border: 1.5px dashed var(--earth-600); border-radius: var(--r-lg); background: var(--cream-50); }
.report-group__title { font-size: var(--fs-500); margin-bottom: var(--s-2); }
.report-group__empty { margin: 0; color: var(--ink-soft); }
.report-group__list { margin: 0; padding-left: 1.1rem; }

/* ---- Public donation wall (Phase 9) ---- */
.wall { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); max-width: 44rem; }
.wall__item { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "heart name amount" ". when when"; gap: var(--s-1) var(--s-3); align-items: baseline; padding: var(--s-3) var(--s-4); background: var(--cream-50); border-radius: var(--r-md); border-left: 3px solid var(--gold-500); }
.wall__heart { grid-area: heart; color: var(--danger); align-self: center; }
.wall__name { grid-area: name; font-weight: 600; color: var(--green-900); overflow-wrap: anywhere; }
.wall__amount { grid-area: amount; font-weight: 700; color: var(--green-900); white-space: nowrap; }
.wall__when { grid-area: when; font-size: var(--fs-300); color: var(--ink-soft); }
.wall__count { margin: 0 0 var(--s-4); color: var(--ink-soft); }
.wall__note { margin: 0; color: var(--ink-soft); }
@media (min-width: 40rem) { .wall__item { grid-template-columns: auto 1fr auto auto; grid-template-areas: "heart name amount when"; } .wall__when { text-align: right; min-width: 7rem; } }
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-6); }
.pager__list { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-1); margin: 0; padding: 0; }
.pager__num, .pager__link { display: inline-grid; place-items: center; min-width: 2.75rem; min-height: 2.75rem; padding: 0 var(--s-3); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--white); color: var(--green-900); font-weight: 600; text-decoration: none; }
a.pager__num:hover, a.pager__link:hover { background: var(--cream-100); border-color: var(--green-700); }
.pager__num.is-current { background: var(--green-900); color: var(--white); border-color: var(--green-900); }
.pager__link.is-disabled { color: var(--ink-soft); background: var(--cream-50); }
.pager__gap { padding: 0 var(--s-1); color: var(--ink-soft); }

/* Legal pages (privacy, terms) */
.legal h2 { font-size: var(--fs-600); margin: var(--s-6) 0 var(--s-2); }
.legal > h2:first-of-type, .legal > .notice + h2 { margin-top: var(--s-5); }
.legal p, .legal li { max-width: 70ch; }
.legal__list { padding-left: 1.25rem; display: grid; gap: var(--s-2); margin: 0 0 var(--s-4); }
.program__photo { grid-column: 1 / -1; display: block; width: 100%; height: auto; max-height: 28rem; object-fit: cover; border-radius: var(--r-lg); }