/* =========================================================================
   v2 additions: credibility-first "visual CV" layout (approach A).
   Loads AFTER styles.css; only new/overriding rules live here.
   ========================================================================= */

/* ---- Hero: two-column, face + identity above the fold ----------------- */
.hero-cv {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  padding-top: clamp(2.5rem, 6vw, 5rem);
  padding-bottom: clamp(1.4rem, 3vw, 2.3rem);
}
/* let the text column shrink below its content's min-content so the
   grid track never forces the page wider than the viewport on phones */
.hero-cv-text { min-width: 0; }
.hero-headline {
  font-family: var(--serif); font-weight: 420;
  font-size: clamp(2.3rem, 1.6rem + 3vw, 3.7rem); line-height: 1.06;
  letter-spacing: -0.02em; color: var(--ink); text-wrap: balance;
  overflow-wrap: break-word; max-width: 24ch; margin: 0 0 1.15rem;
}
.hero-subhead {
  font-size: var(--step-1); color: var(--ink-muted);
  line-height: 1.45; max-width: 42ch; margin: 0 0 1.9rem;
}
/* right column: portrait with the name + role caption beneath it */
.hero-aside { justify-self: end; align-self: center; display: flex; flex-direction: column; max-width: 420px; width: 100%; }
.hero-portrait { max-width: 100%; width: 100%; margin: 0; }
.hero-portrait img { width: 100%; }
.hero-id { margin-top: 1.05rem; }
.hero-name {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.4rem, 1.15rem + 1vw, 1.85rem); line-height: 1.05;
  letter-spacing: -0.01em; color: var(--ink); margin: 0 0 0.2rem;
}
.hero-kicker {
  font-family: var(--sans); font-weight: 500; font-size: var(--step-0);
  letter-spacing: 0.005em; color: var(--ink-muted); margin: 0;
}

@media (max-width: 860px) {
  .hero-cv { grid-template-columns: 1fr; gap: clamp(1.4rem, 5vw, 2.2rem); padding-top: clamp(1.5rem, 5vw, 3rem); }
  .hero-aside { order: -1; justify-self: start; align-self: start; max-width: none; }
  .hero-portrait { max-width: 240px; }
  .hero-id { margin-top: 0.85rem; }
}

@media (max-width: 600px) {
  /* disable balance on phones; the headline wraps naturally within the column */
  .hero-headline { text-wrap: wrap; max-width: 100%; }
}

/* ---- Proof: one "track record" section, numbers then a roomy logo row -- */
/* no top hairline: the numbers/logos read as part of the identity block above */
.proof { border-bottom: 1px solid var(--hairline); }
.proof .wrap { padding-top: clamp(0.8rem, 1.8vw, 1.3rem); padding-bottom: clamp(1.8rem, 3.4vw, 2.7rem); }

/* achievements as stat cells: a big serif lead + small caption */
.proof-facts {
  list-style: none; padding: 0; margin: 0 auto; max-width: 1100px;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(1.6rem, 3.4vw, 2.8rem) clamp(1rem, 2.2vw, 1.8rem);
  align-items: start;
}
.proof-facts li { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; text-align: center; min-width: 0; }
.proof-facts .n {
  font-family: var(--serif); font-weight: 400; line-height: 1;
  font-size: clamp(2.2rem, 1.5rem + 2.2vw, 3.3rem); letter-spacing: -0.02em; color: var(--ink);
}
.proof-facts .lbl {
  font-family: var(--sans); font-weight: 500; font-size: var(--step--1);
  color: var(--ink-muted); line-height: 1.35;
}
.proof-facts .lbl em { font-style: italic; }
.proof-facts .lbl b { color: var(--ink); font-weight: 600; }
@media (max-width: 720px) {
  .proof-facts { grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 5vw, 2.1rem); }
}

/* affiliations: muted greyscale logos, enlarged so they balance the numbers above */
.proof-logos {
  list-style: none; margin: clamp(1.6rem, 3vw, 2.3rem) auto 0; padding: 0; max-width: 1100px;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: clamp(1.6rem, 4.6vw, 3.6rem);
}
.proof-logos li { display: inline-flex; align-items: center; }
.proof-logos img.logo-img { display: block; width: auto; height: 31px; opacity: 0.92; }
.logo-yale      { height: 33px; }
.logo-lse       { height: 26px; }   /* dense, opaque box: sized down so it doesn't shout */
.logo-darpa     { height: 35px; }
.logo-trainline { height: 26px; }
.logo-nume      { height: 27px; }
.logo-huma      { height: 24px; }   /* very wide + light: trimmed so it doesn't dominate */

/* ---- "Why me" lead heading above the pillars -------------------------- */
.why-h { font-size: var(--step-2); font-weight: 420; max-width: 20ch; margin-bottom: 1.1rem; }
.why-lead { margin-bottom: 0.5rem; }

/* ---- Selected work: scannable company + outcome roster ---------------- */
.work { margin-top: 2.4rem; max-width: 960px; }
.work-row {
  display: grid; grid-template-columns: minmax(0, 0.34fr) minmax(0, 0.66fr);
  gap: clamp(1rem, 4vw, 3rem); padding: 1.35rem 0;
  border-top: 1px solid var(--hairline); align-items: baseline;
}
.work-row:last-child { border-bottom: 1px solid var(--hairline); }
.work-co { font-family: var(--serif); font-weight: 460; font-size: var(--step-1); color: var(--ink); line-height: 1.1; }
.work-co .yr { display: block; font-family: var(--sans); font-size: var(--step--1); color: var(--ink-faint); font-weight: 500; letter-spacing: 0.02em; margin-top: 4px; }
.work-desc { color: var(--ink-muted); margin: 0; }
.work-desc b { color: var(--ink); font-weight: 600; }
@media (max-width: 600px) {
  .work-row { grid-template-columns: 1fr; gap: 0.35rem; padding: 1.15rem 0; }
}

/* demoted insight reads a touch quieter than when it led the page */
.insight.pov .statement { font-size: var(--step-2); max-width: 26ch; }