/* About the Founder — light brand palette */

body.about-page {
  background: var(--parchment);
  color: var(--shadow-grey);
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
}

.about-backdrop {
  background: var(--parchment);
}

/* Both blobs share one hue: Soft Periwinkle (--soft-periwinkle, styles.css),
   one of the five official brand colors — this was the original top-right
   blob's hue (the one that read well), just now applied consistently to the
   smaller bottom-left blob too instead of leaving it on an off Orchid tint.
   Orchid was tried here first (to match the homepage's shape rule) but
   didn't hold up once the Bone arch sat on top of it — see the arch comment
   below for why, and for the fix that lets Periwinkle stay in the backdrop. */
.about-backdrop::before,
.about-backdrop::after {
  background: rgba(131, 119, 209, 0.14);
}

/* Same body-copy treatment as .about-gbd-page .approach-body (approach.css)
   so the two "About" pages read as one consistent typographic system —
   responsive size up to 1.1rem instead of the plain-.approach-body 1rem
   default, color pinned to --shadow-grey. Scoped to .about-page so this
   doesn't leak into other pages that also load approach.css. */
.about-page .approach-body {
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  color: var(--shadow-grey);
}

/* Name + title masthead: .masthead/.masthead-title/.masthead-subtitle now
   live in approach.css since About GBD's heading uses the same treatment
   (just without the subtitle line) — see the comment there for the full
   brand-guide rationale. */

/* Two-column layout: bio copy on the left (same column as About GBD's
   text), founder photo on the right. Mirrors the old founder-intro grid
   but with the photo and text columns swapped. */
.founder-layout {
  display: grid;
  grid-template-columns: minmax(0, 680px) minmax(0, max-content);
  column-gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.founder-copy-col {
  grid-column: 1;
  grid-row: 1;
}

.founder-photo-col {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
}

.founder-photo-wrap {
  position: relative;
}

/* Arch frame, matching the homepage's Diana photo treatment (index.css
   .hc-story-photo/.hc-story-frame): rounded top like a doorway, square
   bottom corners, with an offset arch peeking out behind the photo's
   lower-right edge instead of a symmetric shadow-box all the way around.

   Tried solid Bone here first (the homepage's own rule: a card is always the
   OTHER light neutral from its backdrop) — but unlike the homepage, this
   page's backdrop carries a Periwinkle wash (.about-backdrop, above), and
   warm Bone against that cool wash read muddy at the edge instead of crisp.
   Solid Parchment was tried too and nearly vanished, since it matches this
   page's true base background exactly. What actually reads clean: a richer,
   more saturated instance of the SAME Periwinkle hue as the wash — one
   color family at two strengths (pale wash, solid accent shape) instead of
   two different neutrals meeting at an edge. */
.founder-photo-wrap::before {
  content: "";
  position: absolute;
  inset: -1rem -1.25rem 1rem 1.25rem;
  border-radius: 999px 999px 1.5rem 1.5rem;
  background: var(--soft-periwinkle);
  opacity: 0.4;
  z-index: -1;
}

/* Fixed-size clipping frame: the img inside is rendered ~20% larger than
   this box (see .founder-photo transform below) and overflow:hidden crops
   the excess, which is what actually achieves a "zoom in" (tighter crop,
   less background) rather than just enlarging the whole photo card. */
.founder-photo-frame {
  width: clamp(176px, 22.4vw, 288px);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 999px 999px 1.5rem 1.5rem;
  box-shadow: 0 1.5rem 3rem rgba(29, 28, 31, 0.18);
}

.founder-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* transform-origin anchored near the top (rather than dead-center) so the
     1.2x zoom crops mostly from the bottom of the frame instead of trimming
     evenly off all four edges — that's what was eating the headroom above
     Diana's head. Shifting the origin up moves the effective crop window
     down, preserving space above the head. */
  transform: scale(1.2);
  transform-origin: 50% 15%;
}

.founder-linkedin-wrap {
  max-width: 680px;
  /* Equal top/bottom margin so the gap above and below the button reads as
     balanced — margin collapsing with the surrounding paragraphs (which
     only set margin-bottom) means both sides settle to this same 1.5rem
     rather than the bottom gap winning out at a larger value. */
  margin: 1.5rem 0;
  text-align: center;
}

.founder-linkedin {
  display: inline-block;
  padding: 0.7rem 1.5rem;
  border-radius: 999px;
  background: var(--velvet-orchid);
  color: var(--parchment);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.founder-linkedin:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

@media (max-width: 760px) {
  .founder-layout {
    grid-template-columns: 1fr;
  }

  .founder-copy-col,
  .founder-photo-col {
    grid-column: 1;
  }

  .founder-photo-col {
    grid-row: 1;
    justify-self: center;
    margin-bottom: 2rem;
  }

  .founder-copy-col {
    grid-row: 2;
  }

  .founder-photo-frame {
    width: clamp(160px, 44vw, 224px);
  }
}