/* MODE3 v6 · task 054: the founder photo and the field note photo. */
.founder-q { margin: 0; }
.founder-media { position: relative; margin: 0 0 1.6rem; }
.founder-media picture, .founder-media img { display: block; width: 100%; height: auto; }
.founder-media img { aspect-ratio: 1080 / 1842; object-fit: cover; object-position: 50% 0; border-radius: 4px; }
/* phones: the first line sits on the plain wall at the top of the photo, dark on light */
.founder-line { position: absolute; left: 0; right: 0; top: 0; padding: 1.1rem 1.1rem 0; margin: 0; max-width: 21ch; font-size: clamp(1.25rem, 5.4vw, 1.6rem); color: #0b0d10; }
.founder-sig { margin-top: 1.2rem; }
.fnote { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 1rem 1rem; align-items: center; }
.fnote-txt { display: contents; }
.fnote-body { grid-column: 1 / -1; }
.fnote-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 3px; }
.fnote-label { margin-top: 0; }
@media (min-width: 900px) {
  /* desktop: the photo on the left, the line and the text beside it */
  .founder-q { display: grid; grid-template-columns: minmax(0, 40vw) minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 4vw; align-items: start; }
  .founder-media { display: contents; }
  .founder-media picture { grid-column: 1; grid-row: 1 / span 3; }
  .founder-media img { max-height: 86svh; width: auto; max-width: 100%; }
  .founder-line { position: static; grid-column: 2; padding: 0; color: inherit; max-width: 20ch; font-size: clamp(1.8rem, 3vw, 3rem); }
  .founder-q > .lead { grid-column: 2; margin-top: 1.4rem; }
  .founder-q > .founder-sig { grid-column: 2; }
  .fnote { grid-template-columns: 200px minmax(0, 1fr); gap: 1.6rem; align-items: start; margin-left: calc(40vw + 4vw); }
  .fnote-txt { display: block; }
  .fnote-body { grid-column: auto; }
}
.founder-sig, .fnote-label { color: color-mix(in srgb, var(--ink) 80%, transparent); }

/* 055 · the guarantee line wraps instead of running off the edge; focus targets moved to by an anchor show no ring */
.guarantee-micro { white-space: normal; }
[tabindex="-1"]:focus { outline: none; }

/* 058 · CLS: the founder photo reserves its box before it loads (width from the column, height from the real crop 1080 x 1842) */
.founder-media picture { width: 100%; aspect-ratio: 1080 / 1842; }
.founder-media img { width: 100%; height: 100%; aspect-ratio: 1080 / 1842; }
.fnote-photo picture { display: block; width: 100%; aspect-ratio: 4 / 5; }
@media (min-width: 900px) {
  .founder-media picture { width: min(100%, calc(86svh * 1080 / 1842)); height: auto; }
  .founder-media img { max-height: none; width: 100%; height: 100%; }
}

/* 060 · MY OLD DAY: the heading on the wall of the photo (phones) or beside it (desktop), the day in short lines below */
.founder-day { margin: 0; max-width: 40ch; }
.founder-day p { margin: 0 0 0.35rem; font-size: var(--t-body); line-height: 1.5; color: color-mix(in srgb, var(--ink) 86%, transparent); }
.founder-day .founder-day-turn { margin: 1rem 0; font-size: clamp(1.25rem, 5vw, 1.6rem); font-weight: 900; letter-spacing: -0.03em; line-height: 1.15; color: var(--ink); }
.founder-day .founder-day-end { font-weight: 700; color: var(--ink); }
.founder-line { letter-spacing: 0.02em; }
@media (min-width: 900px) {
  .founder-q > .founder-day { grid-column: 2; margin-top: 1.4rem; }
}

/* 062 · the one small line above the field note (context, not part of the quote), same muted label style */
.fnote-intro { margin: 2.4rem 0 0; color: color-mix(in srgb, var(--ink) 80%, transparent); }
.fnote-intro + .fnote { margin-top: 0.9rem; }
@media (min-width: 900px) { .fnote-intro { margin-left: calc(40vw + 4vw); } }