/* =====================================================================
   SINGLE INTERVIEW ARTICLE — layers on top of single-post.css (same reading column, headline
   and body type) and interviews.css (reused .iv-grid/.iv-card from the archive, for "More
   Interviews"). Only the pieces unique to an interview article live here.
   ===================================================================== */

/* ---- Header additions: interviewee name/role line, under the standfirst ---- */
.iv-single-who{max-width:var(--read);margin:14px 0 0;font:600 1rem/1.3 var(--sans, var(--p-sans));color:var(--dark)}
.iv-single-role{margin-left:10px;font-weight:500;color:var(--fg2);letter-spacing:.02em}
.iv-single-role::before{content:"";display:inline-block;width:1px;height:12px;background:var(--rule);margin-right:10px;vertical-align:-1px}

/* ---- Interviewee profile box ---- */
.iv-profile{max-width:var(--read);margin:clamp(24px,3vw,32px) auto 0;padding:20px 24px;border:1px solid var(--rule);border-left:3px solid var(--dark);border-radius:4px;background:var(--bg2)}
.iv-profile-name{margin:0;font:700 1.05rem/1.25 var(--serif);color:var(--fg)}
.iv-profile-role{margin:4px 0 0;font:600 .85rem/1.3 var(--sans);letter-spacing:.03em;color:var(--fg2)}
.iv-profile-bio{margin:10px 0 0;font:400 .95rem/1.55 var(--sans);color:var(--fg2)}
.iv-profile-link{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font:700 .85rem/1 var(--sans);color:var(--dark);text-decoration:none}
.iv-profile-link:hover{text-decoration:underline;text-underline-offset:3px}

/* ---- "In this interview" highlights ---- */
.iv-highlights{max-width:var(--read);margin:clamp(20px,2.6vw,28px) auto 0;padding:20px 24px;border:1px solid var(--rule);border-radius:4px}
.iv-highlights-h{margin:0 0 10px;font:700 .76rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--dark)}
.iv-highlights-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.iv-highlights-list li{position:relative;padding-left:20px;font:400 .98rem/1.45 var(--sans, var(--p-text));color:var(--fg)}
.iv-highlights-list li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;background:var(--dark);border-radius:50%}

/* ---- Q&A paragraphs: an editor simply bold-formats a question like any other paragraph in
   the block editor (no new block, no code edit) — a paragraph that is ENTIRELY bold gets the
   distinct "question" treatment below. A paragraph with just a bold phrase inside normal text
   is untouched, so ordinary emphasis in a narrative interview never gets mistaken for a Q&A
   format. Progressive enhancement: on a browser without :has() support, it just reads as a
   normal bold paragraph — nothing breaks. */
.interview-body p:has(> strong:only-child){
  margin-top:40px;
  font-weight:700;
  color:var(--dark);
}
.interview-body p:has(> strong:only-child) + p{margin-top:12px}

/* ---- "More Interviews" section: reuses .iv-grid/.iv-card from interviews.css, just narrowed
   to 3 columns max (never 3 on a section this size looks cramped at full site width, so it's
   capped) and given the back-to-archive link's spacing. ---- */
.iv-more .iv-grid-related{grid-template-columns:repeat(3,1fr)}
.iv-back-link{margin:clamp(24px,3vw,32px) 0 0;text-align:center}
.iv-back-link a{font:700 .9rem/1 var(--sans);color:var(--dark);text-decoration:none}
.iv-back-link a:hover{text-decoration:underline;text-underline-offset:3px}

@media (max-width:960px){
  .iv-more .iv-grid-related{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .iv-single-role{display:block;margin-left:0;margin-top:4px}
  .iv-single-role::before{display:none}
  .iv-profile,.iv-highlights{padding:16px 18px}
  .iv-more .iv-grid-related{grid-template-columns:1fr}
}