/* =========================================================
   NEF Latest — Interview subpage layout
   Large-format portrait + editorial 2-column body.
   Reuses tokens/classes from style.css; adds only the
   interview-specific layout here (no conflicts with others).
   ========================================================= */

/* ===== Hero meta: name + role under the .ph-title ===== */
.ph-meta{margin-top:clamp(1.8rem,3vw,2.6rem);display:flex;flex-wrap:wrap;
  align-items:baseline;gap:.6rem 1.4rem}
.ph-name{font-weight:400;font-size:clamp(20px,2.4vw,32px);letter-spacing:-.01em;color:var(--mercury)}
.ph-role{font-family:var(--font-m);font-size:.78rem;letter-spacing:.06em;
  text-transform:uppercase;color:rgba(232,230,224,.7)}
.page-hero .ph-lead{max-width:52ch}

/* ===== ① Full-bleed portrait (taller than the 21/8 .vfull) ===== */
.iv-portrait{aspect-ratio:16/7}
@media(max-width:720px){.iv-portrait{aspect-ratio:4/5}}

/* ===== Lead + PROFILE (left) / ② work photo (right) ===== */
.iv-intro{max-width:1920px;margin:0 auto;padding:clamp(4.5rem,9vw,9rem) var(--frame);
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.iv-lead{font-weight:400;font-size:clamp(17px,1.6vw,22px);line-height:1.95;letter-spacing:-.005em}
.iv-profile{margin-top:2.6rem;border-top:1px solid var(--line);padding-top:1.4rem}
.iv-profile .iv-profile-label{color:var(--blue);margin-bottom:1rem;display:block}
.iv-profile p{font-size:clamp(14px,1.1vw,16px);line-height:1.9;color:var(--blue)}
.iv-profile .iv-note{font-family:var(--font-m);font-size:.68rem;color:#8a8a90;
  text-transform:uppercase;letter-spacing:.05em}
.iv-figure{margin:0;overflow:hidden;background:var(--navy);aspect-ratio:1/1;position:sticky;top:14vh}
.iv-figure img{width:100%;height:100%;object-fit:cover}
@media(max-width:820px){
  .iv-intro{grid-template-columns:1fr;gap:2.4rem}
  .iv-figure{order:-1;aspect-ratio:4/3;position:static}
}

/* ===== ③ Interview cut (left) + closing pull-quote (right) ===== */
.iv-close{background:var(--navy);color:var(--mercury);padding:clamp(4.5rem,9vw,9rem) var(--frame)}
.iv-close-in{max-width:1920px;margin:0 auto;display:grid;grid-template-columns:.85fr 1.15fr;
  gap:clamp(2rem,5vw,5rem);align-items:center}
.iv-close figure{margin:0;overflow:hidden;background:var(--blue);aspect-ratio:4/3}
.iv-close figure img{width:100%;height:100%;object-fit:cover}
.iv-quote{font-weight:400;font-size:clamp(23px,3vw,46px);line-height:1.55;letter-spacing:-.01em}
.iv-quote .iv-quote-by{display:block;font-family:var(--font-m);font-size:.78rem;
  color:rgba(232,230,224,.6);margin-top:1.8rem;letter-spacing:.06em;text-transform:uppercase}
@media(max-width:820px){.iv-close-in{grid-template-columns:1fr;gap:2.2rem}}

/* ===== Related interviews + navigation ===== */
.iv-related{max-width:1920px;margin:0 auto;padding:clamp(4.5rem,9vw,9rem) var(--frame) clamp(2rem,4vw,3rem)}
.iv-related-label{margin-bottom:2.6rem;color:var(--blue)}
.iv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.iv-card{display:block;border:1px solid var(--line);transition:transform .3s var(--ease),border-color .3s}
@media(hover:hover){
.iv-card:hover{transform:translateY(-4px);border-color:var(--blue)}
}
.iv-card-ph{aspect-ratio:4/3;overflow:hidden;background:var(--navy)}
.iv-card-ph img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
@media(hover:hover){
.iv-card:hover .iv-card-ph img{transform:scale(1.05)}
}
.iv-card-body{padding:1.3rem 1.4rem 1.6rem}
/* OTHER INTERVIEWS card: large job title (JP) + small name below */
.iv-card-body b{font-weight:400;font-size:clamp(18px,2vw,24px);display:block;letter-spacing:-.01em}
.iv-card-name{color:var(--blue);opacity:.7;margin-top:.5rem;display:block;font-size:clamp(13px,1.1vw,15px)}
.iv-card-role{color:var(--blue);opacity:.7;margin-top:.45rem;display:block}   /* legacy, unused */
/* the card for the interview you're already on: dimmed + not clickable */
.iv-card--current{opacity:.4;pointer-events:none}

/* hover: same effect as the interview list cards — photo B&W+blur sweep (R→L) + body navy wipe + text invert (ivGray keyframe defined in style.css) */
.iv-card{position:relative;overflow:hidden}
.iv-card-ph{position:relative}
.iv-card-ph::after{content:"";position:absolute;inset:0;pointer-events:none;
  -webkit-backdrop-filter:grayscale(1) blur(4px);backdrop-filter:grayscale(1) blur(4px);clip-path:inset(0 0 0 100%)}
@media(hover:hover){
.iv-card:hover .iv-card-ph::after{animation:ivGray .95s var(--ease)}
}
.iv-card-body{position:relative;z-index:2;transition:color .45s var(--ease)}
.iv-card-body::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--navy);
  transform:scaleX(0);transform-origin:left center;transition:transform .5s var(--ease)}
@media(hover:hover){
.iv-card:hover .iv-card-body::before{transform:scaleX(1)}
}
@media(hover:hover){
.iv-card:hover .iv-card-body,
.iv-card:hover .iv-card-body *{color:var(--mercury)}
}
/* one card can act as a link to another section (business/value) */
.iv-card--link{display:flex;align-items:center;justify-content:center;text-align:center;
  padding:2rem 1.4rem;min-height:120px}
.iv-card--link b{font-size:clamp(17px,1.9vw,22px)}
@media(max-width:820px){.iv-grid{grid-template-columns:1fr}}

/* ===== Q&A split: sticky portrait left, questions right ===== */
.vqa--split{max-width:1920px}
.vqa-split{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2.4rem,5vw,5rem);align-items:start}
.vqa-photo{position:sticky;top:96px;margin:0;overflow:hidden}
.vqa-photo img{width:100%;display:block;aspect-ratio:3/4;object-fit:cover}
.vqa--split .vqa-item:first-child{border-top:1px solid var(--line)}
@media(max-width:900px){
  .vqa-split{grid-template-columns:1fr}
  .vqa-photo{position:static;max-width:440px}
}

/* ===== iPad extension: safe mobile refinements up to 1080px ===== */
@media(max-width:1080px){
  .iv-portrait{aspect-ratio:4/5}
}