/* ==========================================================================
   Thota Vaikuntam — /biography/
   Builds on main.css tokens only; no new colours.
   ========================================================================== */

/* ------------------------------------------------------------ dark hero band */
.bio-hero {
  background: var(--white);
  color: var(--ink);
  padding-block: 60px;
}
.bio-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-y) var(--gap-x);
  align-items: center;
}
.bio-hero__media picture { width: 100%; }
.bio-hero__media img { width: 100%; height: auto; }
.bio-hero__body .eyebrow { color: var(--grey-1); }
.bio-hero__quote { margin: 0; width: 100%; max-width: 30ch; }
.bio-hero .figcaption__credit { color: var(--grey-2); }
@media (min-width: 1024px) {
  .bio-hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .bio-hero__body { padding-left: 50px; }
  .bio-hero__media { max-width: 640px; }
}

/* ------------------------------------------------------------ lede */
.bio-lede__body { max-width: 78ch; }
.bio-lede__body .lede { max-width: 72ch; }
.bio-lede__body .lede:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------ timeline */
.bio-timeline-wrap { position: relative; }
/* no rule of its own on top: the section head's hairline is the top rule, and its 50 leads straight into 1942 */
.bio-timeline__row:first-child { padding-top: 0; }
.bio-timeline__row {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 0 var(--gap-x);
  padding: 22px 0;
  border-bottom: 1px solid var(--hairline);
}
.bio-timeline__year {
  font-size: var(--fs-meta);
  line-height: 3.1rem;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--grey-1);
  white-space: nowrap;
}
.bio-timeline__text { max-width: 70ch; }
.bio-timeline__text p { margin: 0 0 .5em; max-width: 70ch; }
.bio-timeline__text p:last-child { margin-bottom: 0; }
.bio-timeline__pubs { margin-top: .5em; font-size: var(--fs-meta); line-height: 2.1rem; letter-spacing: var(--track); text-transform: uppercase; color: var(--grey-1); }
/* B1: 14px text was a 14px target at 21px pitch; pad the anchors to ~32px tall and
   keep >= 8px clear between the two links (flex gap, not whitespace). */
.bio-timeline__pubs li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; margin-top: 0; }
.bio-timeline__pubs a { display: inline-block; padding: 6px 0; text-decoration: none; }
@media (max-width: 640px) {
  .bio-timeline__sep { display: none; } /* a wrapped "· PDF" would orphan the dot */
}
.bio-timeline__pubs a:hover, .bio-timeline__pubs a:focus-visible { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.bio-timeline__sep { color: var(--grey-2); }
@media (max-width: 640px) {
  .bio-timeline__row { grid-template-columns: minmax(0, 1fr); gap: 4px 0; }
  .bio-timeline__year { line-height: 2.1rem; }
}

/* parrot: top-right of the chronology, in the gutter beside the section head; 20px in so the tail never meets the window edge */
.bio-parrot { position: absolute; top: -70px; right: 20px; width: clamp(120px, 10vw, 180px); height: 1px; pointer-events: none; }
.bio-parrot .parrot { position: absolute; top: 0; right: 0; width: 100%; }
@media (max-width: 1024px) { .bio-parrot { display: none; } }

/* ------------------------------------------------------------ studio grid */

/* ------------------------------------------------------------ LLP feature */
.bio-llp .feature__body p { max-width: 62ch; }
.bio-llp .figure__media { background: var(--bg-soft); }
/* the shared .feature__media crops to a square; this portrait photograph must show whole (owner 2026-09-11) */
.bio-llp .feature__media { max-width: 480px; }
.bio-llp .feature__media .figure__media { aspect-ratio: auto; overflow: visible; }
.bio-llp .feature__media .figure__media picture,
.bio-llp .feature__media .figure__media img { width: 100%; height: auto; object-fit: contain; }
@media (min-width: 1025px) { .bio-llp { grid-template-columns: minmax(0, 480px) minmax(0, 1fr); } }