/* ==========================================================================
   EricLander.com — About page (page-about.php) — v2 new voice
   Ported 1:1 from docs/mockups/v2/about.html: the classes NOT already in
   design-system.css. Scoped under .about-main.
   Reused from design-system.css (not repeated): .crumb, .ahero, .cgrid/.ccard,
   .exp/.job/.expnote, .qgrid/.quote, .model/.mcard, .cta, .signal, .label.
   Body/heading line-heights follow the reconciled 1.6/1.08 (DESIGN-SPEC 4),
   not the mockup's 1.65/1.1.
   ========================================================================== */

.about-main section.block{padding:60px 0}
.about-main .block h2{font-size:clamp(26px,3.2vw,38px);margin-bottom:8px}
.about-main .block .k{margin-bottom:16px;display:block}

/* FACTS strip */
.about-main .facts{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--fill)}
.about-main .facts-in{max-width:var(--maxw);margin:0 auto;padding:20px 28px;display:flex;gap:26px;flex-wrap:wrap;justify-content:center;font-size:13.5px;font-weight:600;color:var(--ink)}
.about-main .facts-in span{display:flex;align-items:center;gap:9px}
.about-main .facts-in span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green)}

/* STORY + PORTRAIT */
.about-main .story{display:grid;grid-template-columns:1.55fr 1fr;gap:40px;align-items:start}
.about-main .story .body p{font-size:16.5px;color:var(--body);margin-bottom:18px}
.about-main .story .body p:last-child{margin-bottom:0}
.about-main .story .body .big{font-size:19px;color:var(--ink);font-weight:600;line-height:1.5}
.about-main .portrait{position:sticky;top:96px}
/* .photo now holds the real portrait; keep the 4:5 frame and clip the image. */
.about-main .photo{aspect-ratio:4/5;background:linear-gradient(160deg,#123f5c,#0b2c42);border-radius:10px;border:1px solid var(--line2);overflow:hidden;display:flex;align-items:center;justify-content:center}
.about-main .photo img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.about-main .portrait .cap{font-size:13px;color:var(--muted);margin-top:14px;line-height:1.5}
.about-main .portrait .cap b{color:var(--ink);display:block;font-size:14.5px}

/* CREDENTIALS (bg wrapper) + PUBLICATIONS */
.about-main .creds{background:var(--fill);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.about-main .pubs{margin-top:30px}
.about-main .pubs .pl{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:center;margin-bottom:14px}
.about-main .logos{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.about-main .logo-ph{height:40px;padding:0 18px;border:1px solid var(--line2);border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:13px;color:#5C6B76;background:#fff;font-weight:700}
.about-main .pubs .dis{text-align:center;font-size:11.5px;color:#9aabb5;margin-top:12px}

/* TEAMS grid (auto-fit ccards) */
.about-main .teamgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin-top:26px}

/* RECOMMENDATIONS (bg wrapper) + "more" link */
.about-main .recs{background:var(--fill);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.about-main .recmore{text-align:center;margin-top:24px;font-size:14.5px;color:var(--muted)}
.about-main .recmore a{color:var(--blue);font-weight:600;border-bottom:1px solid var(--line2)}

/* PERSONAL */
.about-main .life{text-align:center}
.about-main .life p{font-size:17px;color:var(--body);max-width:62ch;margin:14px auto 0}
.about-main .life .tags{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:24px}
.about-main .life .tags span{font-size:13px;font-weight:600;color:var(--ink);background:var(--fill);border:1px solid var(--line2);border-radius:999px;padding:8px 16px}

@media(max-width:860px){
  .about-main .story{grid-template-columns:1fr}
  .about-main .portrait{position:static;max-width:340px}
  .about-main .cgrid{grid-template-columns:1fr}
  .about-main .qgrid{grid-template-columns:1fr}
  .about-main .model{grid-template-columns:1fr}
}