/* ==========================================================================
   Help The Poor Initiative — About page
   Page-specific only. Tokens, header, footer, page banner and the closing
   CTA band all come from css/style.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Our story
   -------------------------------------------------------------------------- */
.story { padding: 84px 0; }

.story-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 58px;
  align-items: center;
}

.story-media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow-md);
}

.story-media .media { height: 100%; border-radius: var(--radius-lg); }

/* Founding year badge tucked into the photo */
.story-badge {
  position: absolute;
  left: 22px;
  bottom: 22px;
  z-index: 3;
  padding: 14px 20px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: var(--shadow-sm);
}

.story-badge b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 800;
  line-height: 1;
  color: var(--green);
}

.story-badge span {
  display: block;
  margin-top: 4px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

.story-copy p { margin-top: 16px; line-height: 1.82; }

/* Sends the reader to the founder's full account on our-story.html. */
.story-copy .link-more { margin-top: 22px; }

.story-lede {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1.9vw, 1.35rem);
  font-weight: 600;
  line-height: 1.62;
  color: var(--ink);
}

.pullquote {
  margin: 28px 0 0;
  padding: 22px 26px;
  border-left: 4px solid var(--orange);
  background: var(--surface-alt);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.pullquote p {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-style: italic;
  line-height: 1.65;
  color: var(--ink);
}

.pullquote cite {
  display: block;
  margin-top: 12px;
  font-family: var(--font-body);
  font-size: .8125rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   2. Mission / Vision pillars
   -------------------------------------------------------------------------- */
.pillars { padding: 78px 0; background: var(--surface-alt); }

/* Narrative that sets up the two formal statements below it. */
.pillars-intro {
  max-width: 900px;
  margin: 0 auto 44px;
  text-align: center;
}

.pillars-lede {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.3vw, 1.6rem);
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
}

/* Two columns of body copy: four paragraphs in one column would be a wall.
   Left-aligned inside a centred block, because centred body text is hard to
   read once it runs past a couple of lines. */
.pillars-copy {
  margin-top: 26px;
  column-count: 2;
  column-gap: 44px;
  text-align: left;
}

.pillars-copy p {
  margin-bottom: 15px;
  line-height: 1.8;
  /* Never split a paragraph across the column break. */
  break-inside: avoid;
}

.pillars-copy p:last-child { margin-bottom: 0; }

.pillar-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

/* The formal mission / vision statements. Sized up and set in the display
   face so they read as a declaration rather than as body copy. */
.pillar-statement {
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1.9vw, 1.28rem);
  font-weight: 600;
  line-height: 1.55;
}

/* The card body text is deliberately muted; the statement itself is not. */
.pillar--mission .pillar-statement { color: #fff; }
.pillar--vision  .pillar-statement { color: var(--ink); }

.pillars-close {
  max-width: 46ch;
  margin: 40px auto 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 700;
  line-height: 1.5;
  color: var(--green);
}

.pillar {
  position: relative;
  padding: 38px 34px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  isolation: isolate;
  /* "Our Mission" / "Our Vision" in the nav link straight to these cards, so
     they must not land under the fixed header. */
  scroll-margin-top: calc(var(--header-h) + 24px);
  transition: box-shadow .5s var(--ease);
}

/* Arriving from a nav link: ring the card you actually came for, so it is
   obvious which of the two answered your click. */
.pillar:target {
  box-shadow: 0 0 0 3px var(--orange), var(--shadow-md);
}

.pillar--mission {
  background: linear-gradient(155deg, var(--green) 0%, var(--green-deep) 88%);
  color: rgba(255, 255, 255, .84);
}

.pillar--vision {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--muted);
}

/* Oversized watermark glyph */
.pillar-mark {
  position: absolute;
  right: -30px;
  bottom: -34px;
  z-index: -1;
  width: 190px;
  height: 190px;
  opacity: .10;
  pointer-events: none;
}

.pillar--vision .pillar-mark { color: var(--green); opacity: .07; }

.pillar-eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  font-family: var(--font-display);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.pillar--mission .pillar-eyebrow { color: var(--orange-warm); }
.pillar--vision  .pillar-eyebrow { color: var(--orange); }

.pillar h2 {
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  line-height: 1.2;
  margin-bottom: 14px;
}

.pillar--mission h2 { color: #fff; }

.pillar p { line-height: 1.8; }

.pillar-list {
  margin-top: 20px;
  display: grid;
  gap: 10px;
}

.pillar-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .9375rem;
  line-height: 1.6;
}

.pillar-list svg { flex: none; margin-top: 3px; }
.pillar--mission .pillar-list svg { color: var(--orange-warm); }
.pillar--vision  .pillar-list svg { color: var(--green); }

/* --------------------------------------------------------------------------
   3. Values
   -------------------------------------------------------------------------- */
.values { padding: 84px 0; }

.value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.value {
  padding: 28px 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform var(--speed) var(--ease),
              box-shadow var(--speed) var(--ease),
              border-color var(--speed) var(--ease);
}

.value:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--accent, var(--green)) 38%, var(--line));
  box-shadow: var(--shadow-md);
}

.value-icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  margin-bottom: 17px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--accent, var(--green)) 12%, #fff);
  color: var(--accent, var(--green));
  transition: transform .5s cubic-bezier(.34, 1.56, .64, 1);
}

.value:hover .value-icon { transform: scale(1.09) rotate(-6deg); }

.value h3 {
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--ink);
}

.value p {
  margin-top: 9px;
  font-size: .9375rem;
  line-height: 1.7;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   4. Timeline
   -------------------------------------------------------------------------- */
.journey { padding: 84px 0; background: var(--surface-alt); }

.timeline {
  position: relative;
  margin-top: 8px;
  padding-left: 34px;
}

/* The spine */
.timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(to bottom,
    var(--green) 0%, var(--green-mid) 55%, var(--orange) 100%);
}

.milestone {
  position: relative;
  padding-bottom: 32px;
}

.milestone:last-child { padding-bottom: 0; }

.milestone::before {
  content: "";
  position: absolute;
  left: -34px;
  top: 5px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--green);
  box-shadow: 0 0 0 4px var(--surface-alt);
  transition: transform var(--speed) var(--ease), border-color var(--speed) var(--ease);
}

.milestone:last-child::before { border-color: var(--orange); }

.milestone:hover::before { transform: scale(1.25); }

.milestone-year {
  display: inline-block;
  margin-bottom: 6px;
  font-family: var(--font-display);
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--green);
}

.milestone h3 {
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--ink);
}

.milestone p {
  margin-top: 7px;
  max-width: 62ch;
  font-size: .9375rem;
  line-height: 1.72;
  color: var(--muted);
}

.journey-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 54px;
  align-items: start;
}

/* --------------------------------------------------------------------------
   5. Team
   -------------------------------------------------------------------------- */
/* Linked to from the nav as about.html#team and about.html#values, so both
   need to clear the fixed header when targeted. */
.team,
.values { scroll-margin-top: calc(var(--header-h) + 12px); }

.team { padding: 84px 0; }

/* Two founders, not a directory. A 4-column track would stretch two cards to
   ~560px each and leave the section looking half-empty, so the grid is capped
   and centred instead. */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  max-width: 720px;
  margin-inline: auto;
}

.person {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  transition: transform var(--speed) var(--ease),
              box-shadow var(--speed) var(--ease);
}

.person:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }

.person .media { border-radius: 0; }

/* Team portrait placeholder.
   Deliberately NOT a stock photograph of a stranger: this page presents these
   people as the organisation's leadership, so inventing faces would be a lie
   the rest of the site then has to carry. A brand emblem on a soft green field
   reads as "photograph pending" rather than as a broken image. */
.person-avatar {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  background:
    radial-gradient(120% 120% at 50% 15%, var(--green-soft) 0%, #F3F7F3 60%, #EDF2ED 100%);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

/* Faint concentric rings, echoing the logo's circular badge */
.person-avatar::before {
  content: "";
  position: absolute;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--green) 14%, transparent);
  box-shadow: 0 0 0 14px color-mix(in srgb, var(--green) 6%, transparent);
}

/* The real portrait, layered over the emblem. If the file is not there yet the
   inline onerror removes the <img>, uncovering the emblem underneath — so the
   card never shows a broken image, and dropping the photo in needs no edit.
   Biased slightly above centre because heads sit high in a portrait crop. */
.person-photo {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  transition: transform .6s cubic-bezier(.34, 1.56, .64, 1);
}

.person:hover .person-photo { transform: scale(1.04); }

.person-avatar-mark {
  position: relative;
  width: 46%;
  height: auto;
  opacity: .9;
  transition: transform .6s cubic-bezier(.34, 1.56, .64, 1);
}

.person:hover .person-avatar-mark { transform: translateY(-4px) scale(1.05); }

.person-body {
  padding: 20px 22px 24px;
  text-align: center;
}

/* The name leads now that these are real people — the role is the qualifier,
   not the headline. (It was the other way round while the names were blank.) */
.person-name {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.28;
  color: var(--ink);
}

.person-role {
  margin-top: 6px;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--green);
}

.person-note {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   6. Accountability strip
   -------------------------------------------------------------------------- */
.accountability { padding: 0 0 84px; }

.account-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
  padding: 40px clamp(24px, 4vw, 46px);
  background: var(--cream);
  border: 1px solid #EFE7D6;
  border-radius: var(--radius-lg);
}

.account-card h2 {
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  color: var(--ink);
}

.account-card p {
  max-width: 60ch;
  margin-top: 12px;
  line-height: 1.78;
  color: var(--muted);
}

.account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* --------------------------------------------------------------------------
   7. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .value-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 992px) {
  .story-grid { grid-template-columns: 1fr; gap: 34px; }
  .story-media { aspect-ratio: 16 / 10; }
  .pillar-grid { grid-template-columns: 1fr; }
  /* Two text columns stop being readable once each is under ~30 characters. */
  .pillars-copy { column-count: 1; }
  .journey-grid { grid-template-columns: 1fr; gap: 30px; }
  .account-card { grid-template-columns: 1fr; gap: 26px; }
}

@media (max-width: 768px) {
  .story, .pillars, .values, .journey, .team { padding: 58px 0; }
  .accountability { padding-bottom: 58px; }
  .pillar { padding: 30px 26px; }
}

@media (max-width: 560px) {
  .value-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; max-width: 380px; }
  .timeline { padding-left: 28px; }
  .milestone::before { left: -28px; }
  .account-actions .btn { width: 100%; }
}