/* ============================================================
   Founder section. Approved build, variant E3.
   Prefix: lmf-
   Frame: 3:4 portrait at the split, 16:10 band when stacked.
   Rule that matters: the PHOTO sets the section height. The copy is
   fitted to the frame. Never the other way round. If the copy grows,
   the frame distorts, so copy changes are design changes.
   ============================================================ */

.lmf{
  background:var(--warm-white);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  /* full bleed, square corners, no radius anywhere in this section */
}

.lmf-wrap{
  display:grid;
  grid-template-columns:45% 55%;
  align-items:stretch;
}

/* ---- copy ---- */
.lmf-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(72px,5.6vw,96px) 76px clamp(72px,5.6vw,96px) 88px;
}

.lmf-eyebrow{
  display:inline-flex;      /* required. the rule marker is a ::before and
                               collapses silently on any other display value */
  align-items:center;
  gap:10px;
  font-size:12px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--stone);
}
.lmf-eyebrow::before{
  content:"";
  width:18px;
  height:1px;
  background:var(--accent);  /* required. undefined --accent in scope = no marker */
}

.lmf h2{
  font-family:'Cormorant Garamond',serif;
  font-weight:500;
  font-size:clamp(38px,3.35vw,50px);
  line-height:1.11;
  letter-spacing:-.006em;
  margin:19px 0 0;
  max-width:620px;
}

.lmf-prose{max-width:500px;margin-top:30px}
.lmf-prose p{
  font-size:16.5px;
  font-weight:300;
  line-height:1.76;
  color:var(--ink-mid);
  margin:0 0 21px;
}
.lmf-prose p:last-child{margin-bottom:0}

/* the two italic beats. specificity is deliberate: it has to outrank
   .lmf-prose p, which is (0,2,0). this is (0,2,1). */
.lmf-prose p.lmf-beat{
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-weight:500;
  font-size:24px;
  line-height:1.3;
  color:var(--ink);
  margin:25px 0;
}

.lmf-sig{
  margin-top:38px;
  padding-top:20px;
  border-top:1px solid var(--border);
  width:280px;
}
.lmf-sig .lmf-name{font-size:15px;font-weight:500;color:var(--ink);letter-spacing:.01em}
.lmf-sig .lmf-role{font-size:13.5px;font-weight:300;color:var(--stone);margin-top:5px}

/* ---- portrait ---- */
.lmf-portrait{
  position:relative;
  width:100%;
  background:var(--bg);      /* the empty state, and the letterbox behind the
                                image while it loads */
  overflow:hidden;
}
/* the aspect box. this is what gives the section its height. */
.lmf-portrait::before{content:"";display:block;padding-top:133.333%}  /* 3:4 */

.lmf-portrait img,
.lmf-portrait picture{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 32%;   /* bias up. faces sit above centre. */
  display:block;
}

/* empty state label. delete this block and the markup with it once the
   real photograph is in. */
.lmf-portrait-label{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--ink-light);
}

/* ---- stacked ----
   1400 is not arbitrary and must not be lowered to "get the split on more
   screens". Below it the copy column is narrow enough that 116 words wrap
   taller than the 3:4 frame, and the portrait stretches back into a column.
   Measured: at 1280 the split yields 1:1.53, at 1241 it yields 1:1.61.
   The stacked band is the correct layout at those widths, not a fallback. */
@media (max-width:1400px){
  .lmf-wrap{grid-template-columns:1fr}
  .lmf-copy{padding:88px 9vw 80px}
  .lmf-prose{max-width:600px}
  .lmf-portrait::before{padding-top:62.5%}   /* 16:10 */
  .lmf-portrait img{object-position:50% 30%}
}

@media (max-width:640px){
  .lmf-copy{padding:64px 24px 60px}
  .lmf h2{font-size:clamp(32px,8.4vw,38px)}
  .lmf-prose{margin-top:26px}
  .lmf-prose p{font-size:16px;margin-bottom:19px}
  .lmf-prose p.lmf-beat{font-size:22px;margin:22px 0}
  .lmf-portrait::before{padding-top:100%}    /* 1:1 */
}