/* Founder's note (home), 2026-10-26. A portrait beside a short statement and a line of past
   employers. Colours come from the chapter ground it sits on (dusk, in the live desert build),
   so every value is a token — legible on the dark ground and on the plain light build alike.
   The homepage is exempt from the global body type scale (:not(.page-home) in desert-v2.css),
   so sizes here are explicit. */

.founder__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);  /* even columns give the larger portrait room */
  gap: clamp(2rem, 4.5vw, 4.5rem);
  align-items: center;
}
/* Statement leads on the left; the portrait sits on the right. This keeps every word clear
   of the floating "Meet CoreShift" intro player, which is pinned top-right across the page
   (intro-float-v1.js). On mobile the order resets so the portrait is on top (see below). */
.founder__note { order: 1; }
.founder__portrait { order: 2; justify-self: center; }

/* Portrait: a matted frame, thin brass hairline, soft drop. */
.founder__portrait {
  margin: 0;
  max-width: 546px;   /* +30% */
  width: 100%;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: 0 24px 60px rgba(10, 8, 6, .32);
  position: relative;
}
.founder__portrait::after {   /* a quiet brass rule inside the mat */
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid var(--accent);
  opacity: .38;
  border-radius: 2px;
  pointer-events: none;
}
.founder__photo img { border-radius: 2px; width: 100%; height: auto; display: block; }

/* Statement: the dominant voice of the section. Capped on the statement itself (not the
   whole note column) so the logo wall below can use the fuller column width. */
.founder__statement { max-width: 34rem; }
.founder__statement {
  margin: 0 0 1.6rem;
  padding: 0;
  border: 0;
  font-family: var(--sc-font-display, var(--display));
  font-weight: 600;
  font-size: clamp(1.5rem, 1rem + 1.45vw, 2.15rem);
  line-height: 1.2;
  letter-spacing: -.012em;
  color: var(--text);
  text-wrap: pretty;
}
.founder__statement p { margin: 0; max-width: none; color: inherit; }
.founder__statement p + p { margin-top: 1rem; }
.founder__statement em {     /* the goal itself, in brass, not italic */
  font-style: normal;
  color: var(--accent);
}

.founder__sign {
  margin: 0;
  max-width: none;
  display: flex;
  flex-direction: column;
  gap: .15rem;
  line-height: 1.3;
}
.founder__sign b {
  font-family: var(--sc-font-display, var(--display));
  font-weight: 700;
  font-size: 2.28rem;   /* +90% */
  color: var(--text);
}
.founder__sign span { font-size: 1.75rem; color: var(--muted); }  /* +90% */

/* Past employers: an understated credential row, text wordmarks (no logo soup). */
/* The logo wall leads the section (under the folio), so its spacing is below it. */
.founder__past { margin: 0 0 clamp(2.2rem, 4vw, 3.2rem); }
.founder__past-label {
  margin: 0 0 .9rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 1.37rem;   /* +90% */
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
}
.founder__logos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));  /* truly equal tiles, not content-sized */
  gap: 14px;
}
/* Equal white tiles so every mark stands out against the section ground and reads as one set. */
.founder__logo {
  background: #fff;
  border: 1px solid rgba(26, 23, 20, .10);
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(10, 8, 6, .10);
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
}
.founder__logo img { width: auto; height: auto; object-fit: contain; display: block; }
/* Per-logo caps balance five different logo shapes (wide wordmarks vs. a square box)
   to one optical weight, so the row looks uniform rather than literally same-pixel. */
.founder__logo.l-ms  img { max-height: 30px; max-width: min(128px, 100%); }
.founder__logo.l-li  img { max-height: 30px; max-width: min(116px, 100%); }
.founder__logo.l-an  img { max-height: 31px; max-width: min(118px, 100%); }
.founder__logo.l-bms img { max-height: 25px; max-width: min(152px, 100%); }
.founder__logo.l-ax  img { max-height: 48px; max-width: min(68px, 100%); }

@media (max-width: 860px) {
  .founder__inner { grid-template-columns: 1fr; gap: 2rem; justify-items: start; }
  .founder__portrait { order: 0; max-width: 416px; justify-self: start; }  /* portrait back on top, +30% */
  .founder__note { order: 0; max-width: none; }
  .founder__logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .founder__portrait { max-width: 338px; }  /* +30% */
  .founder__logos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .founder__logo { height: 72px; }
}