/* ==========================================================================
   Introduction + Interview (Figma 15:26) — page styles, shared by both pages.
   Geometry at 1920: text column x314 w741, photo x1195 y206 w410 h606,
   ghost script word centred on the photo's bottom edge.
   ========================================================================== */

.intro {
  --intro-text: 741;                    /* text column width (9:117) */
  --intro-photo: 410;                   /* photo width (9:130) */
  --intro-gap: clamp(2rem, 7.24vw, 139px);   /* 1195 - (314 + 741) */
  --intro-photo-lift: 35px;             /* photo top y206 vs H1 top y241 */
  --intro-sub-pad: 10.5px;              /* sub box 55 - 34 line, split */
  --intro-stats-top: 42px;              /* 408 - 366 */
  --intro-block-gap: 25px;              /* 545 - 520, 710 - 685 */
  --intro-lh: 1.647;                    /* 28 / 17 */
  --intro-track: .04em;                 /* .68 / 17 */
  --intro-ghost-opacity: .3;            /* 8:105 */
  --intro-ghost-shift: 40px;            /* ghost centre sits right of the photo centre */
}

.intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 741fr) minmax(0, 410fr);   /* text 741 : photo 410 */
  column-gap: var(--intro-gap);
  align-items: start;
}
.intro__text { min-width: 0; }

.intro__sub { padding-top: var(--intro-sub-pad); padding-bottom: var(--intro-sub-pad); }

.intro__stats { margin-top: var(--intro-stats-top); }
.intro__stats li,
.intro .prose p,
.qa__a {
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: var(--intro-lh);
  letter-spacing: var(--intro-track);
  color: var(--c-text-2);
}
.intro .prose { margin-top: var(--intro-block-gap); }
.intro .prose p + p { margin-top: var(--intro-block-gap); }

/* ---------- Photo + ghost word --------------------------------------- */
.intro__media {
  position: relative;
  width: 100%;
  max-width: calc(var(--intro-photo) * 1px);
  justify-self: end;
  margin-top: calc(var(--intro-photo-lift) * -1);
}
.intro__media .ghost-script {
  left: calc(50% + var(--intro-ghost-shift));
  top: 100%;
  transform: translate(-50%, -55%);
  opacity: var(--intro-ghost-opacity);
}

/* ---------- Interview Q&A -------------------------------------------- */
.qa { margin: var(--intro-stats-top) 0 0; }
.qa__item + .qa__item { margin-top: var(--intro-block-gap); }
.qa__q { margin: 0; }
.qa__a { margin: var(--sp-1) 0 0; }

/* ---------- Responsive ------------------------------------------------ */
@media (max-width: 1280px) {
  .intro { --intro-photo-lift: 0px; --intro-ghost-shift: 0px; }
}

@media (max-width: 991px) {
  .intro.has-footer { padding-bottom: var(--footer-bottom); }
  .intro .footer-line { position: static; margin-top: var(--sp-5); }
  .intro__grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-5); }
  .intro__text { max-width: calc(var(--intro-text) * 1px); }
  .intro__media {
    justify-self: center;
    max-width: min(calc(var(--intro-photo) * 1px), 78%);
    margin-bottom: calc(var(--fs-ghost) * .5);
  }
}

@media (max-width: 479px) {
  .intro { --intro-stats-top: var(--sp-3); }
}