/* CHAPTER 02 — ABOUT. Narrative, progression rows and the brand line
   left; the Karnataka survey map right. Every motion state is set in
   JS (non-static branch only): these defaults are the complete,
   readable scene. */
.intro { padding-bottom: 0; overflow: clip; }
.intro__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: start;
}
.intro__text { grid-column: 1 / span 6; }
.intro__body { font-size: clamp(1.05rem, 1.35vw, 1.2rem); line-height: 1.7; max-width: 56ch; }
.intro__progression { margin-top: 44px; }
.intro__progression li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  column-gap: 20px;
  align-items: baseline;
  padding: 18px 0;
  border-top: 1px solid var(--hair-bone);
}
.intro__progression li:last-child { border-bottom: 1px solid var(--hair-bone); }
.intro__progression .p-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.4rem, 1.9vw, 1.8rem);
  line-height: 1.1;
}
.intro__progression .p-role {
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 76%, transparent);
}
.intro__line { margin-top: 28px; white-space: normal; }

/* ---------- the survey map ---------- */
.intro__aside { grid-column: 8 / span 5; }
/* no padding here: the pulse is placed by percentage of the map box */
.intro__map { position: relative; }
.intro__svg { width: 100%; height: auto; display: block; }
.intro__outline {
  fill: none;
  stroke: var(--amber-deep);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  opacity: .82;
}
/* India horizon arc: ambition, not claim, so it stays faint */
.intro__arc { fill: none; stroke: var(--ink-soft); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .3; }
/* Karnataka parcel-dot field */
.intro__dots { opacity: .85; }
.intro__dots circle { fill: var(--amber-deep); }
/* the survey crosshair converging on Bengaluru */
.intro__cross line { stroke: var(--amber-deep); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .32; }
.intro__blr { font-family: var(--font-display); font-style: italic; font-size: 15px; fill: var(--amber-deep); }
/* Bengaluru origin marker; the pulse is an HTML ring over the map so it
   animates on the compositor instead of repainting the whole drawing */
.intro__origin-dot { fill: var(--amber-deep); }
.intro__origin-ring { fill: none; stroke: var(--amber-deep); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .8; }
.intro__pulse {
  position: absolute; left: 70.06%; top: 77.23%; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border: 1px solid var(--amber-deep); border-radius: 50%; opacity: 0; pointer-events: none;
  will-change: transform, opacity;
}
.intro__pulse.is-lit { animation: intro-pulse 2.8s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes intro-pulse {
  0% { transform: scale(.5); opacity: .8; }
  75%, 100% { transform: scale(2.6); opacity: 0; }
}
body.is-static .intro__pulse { opacity: .5; transform: scale(1.6); animation: none; }

.intro__band { margin-top: var(--section); }
@media (max-width: 899px) {
  .intro__grid { grid-template-columns: 1fr; row-gap: 56px; }
  .intro__text, .intro__aside { grid-column: auto; }
  .intro__map { width: min(78vw, 420px); padding-top: 0; }
  .intro__blr { font-size: 24px; }
}