/* ==========================================================================
   Founder — the KYC/human-trust anchor. First light (paper) section on the
   page: a deliberate shift out of the hero's dark register into something
   quieter and closer to being read, not looked at.
   ========================================================================== */

.founder {
  background-color: var(--color-paper);
  color: var(--color-ink-on-paper);
  /* Regular --color-slate/--color-brass only clear ~2.9:1 against paper —
     shadow both to their paper-safe variants (tokens.css) for every
     descendant in this section, rather than patching each usage. */
  --color-slate: var(--color-slate-on-paper);
  --color-brass: var(--color-brass-on-paper);
}

.founder-grid {
  display: grid;
  /* A pure fr split let the image column shrink faster than the text column
     as the viewport narrowed (text is floored by its own max-width, the
     image wasn't) — at ~1024px the portrait ended up 140px shorter than the
     text beside it. minmax() gives the image column a floor and a ceiling
     instead of a bare proportion, so the two columns stay in balance across
     the whole desktop range, not just at one lucky width. */
  grid-template-columns: minmax(18rem, 24rem) 1fr;
  gap: var(--space-12);
  /* Was align-items:start with a fixed aspect-ratio on the portrait — the
     text column (quote + overview) reliably runs taller than a 3:4 photo,
     which left a dead paper-colored gap under the portrait. Stretch instead,
     so the portrait's height always matches whatever the text column ends
     up being, and let object-fit:cover (below) handle the crop. */
  align-items: stretch;
}

.founder-portrait {
  /* Holds in place while the text scrolls past it — the contrast between a
     still photo and moving copy is the effect, not a scroll-driven crop. */
  position: sticky;
  top: 8rem;
  width: 100%;
  max-width: 24rem;
  overflow: hidden;
  border-radius: var(--radius-md);
}

.founder-portrait-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.founder-content {
  padding-top: var(--space-2);
}

.founder-location {
  margin-top: var(--space-1);
  font-size: var(--text-nav);
  letter-spacing: 0.02em;
  color: var(--color-slate);
}

.founder-message {
  margin-top: var(--space-6);
  max-width: 34rem;
  color: var(--color-ink-on-paper);
}

.founder-overview {
  margin-top: var(--space-6);
  max-width: 34rem;
  color: var(--color-ink-on-paper);
}

/* Stacks through tablet, not just phone — a squeezed two-column layout
   between ~768-1023px was the other place the image/text balance broke
   down, since neither column had enough room to breathe at that width. */
@media (max-width: 1023px) {
  .founder-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .founder-portrait {
    /* Stacked layout has no text-column height to stretch to match, so this
       is the one place the portrait needs its own explicit ratio again. */
    position: static;
    max-width: 20rem;
    aspect-ratio: 3 / 4;
    /* The grid column is full-width here, so a narrower max-width left the
       portrait flush against the left edge with all the slack on the right
       instead of centered. */
    margin-inline: auto;
  }
}