/* Biography page styles. Owned by the biography page agent. Shared classes live in ../style.css (see INNER-PAGE KIT); do not redefine them here. */
/* Composition: a portrait that rises out of the cobalt hero beside a 7-column lead; a timeline of huge serif keys that slide in from alternating sides; staggered two-column detail groups with dotted flowing lists.
   Copy always stays in the left 66% (the strings run at ~72%); photos and display type may cross the lane because they sit below / above the strings layer. */

/* ---------- 1. On stage ---------- */
.stage { --rise: clamp(40px, 6vw, 96px); }   /* how far the photo climbs into the hero's bottom padding (hero pad is >= 56px) */
.stage .inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(12px, 2vw, 28px); row-gap: clamp(22px, 3vw, 44px); align-items: start; }
.stage .label, .stage .lead, .stage .copy, .stage-photo { grid-column: 1 / -1; }
.stage .lead { font-size: clamp(2.6rem, 10.5vw, 4.5rem); }
.stage .copy { display: block; }
.stage .copy p { max-width: 46ch; margin-bottom: 1.1rem; }
.stage .copy p:last-child { margin-bottom: 0; }
.stage-photo { aspect-ratio: 1 / 1; }
.stage-photo img { object-position: 51% 50%; }
@media (max-width: 639px) { .stage-photo, .det-photo { margin-inline-end: calc(var(--lane) * -1); } }
@media (min-width: 640px) and (max-width: 799px) {
  .stage .label, .stage .lead, .stage .copy { max-width: 66%; }
  .stage .lead { font-size: clamp(3rem, 8vw, 4.6rem); }
  .stage-photo { aspect-ratio: 3 / 2; }
}
@media (min-width: 800px) {
  .stage .label { grid-column: 1 / 8; grid-row: 1; }
  .stage .lead { grid-column: 1 / 8; grid-row: 2; font-size: clamp(3rem, 6.2vw, 6.4rem); }
  .stage-photo { grid-column: 8 / 13; grid-row: 1 / 3; aspect-ratio: 3 / 4; margin-top: calc(-1 * (clamp(80px, 12vw, 180px) + clamp(36px, 5vw, 72px) + var(--rise))); }
  .stage .copy { grid-column: 1 / 9; grid-row: 3; columns: 2; column-gap: clamp(24px, 3vw, 48px); }
  .stage .copy p { max-width: none; }
}

/* ---------- 2. The years ---------- */
.yrs { list-style: none; max-width: 1560px; margin: clamp(28px, 5vw, 64px) auto 0; padding: 0; }
.yrs li { position: relative; z-index: 10; display: grid; gap: .7rem 0; padding: clamp(22px, 3.6vw, 48px) 0 clamp(26px, 4vw, 52px); border-top: 1px solid rgba(251, 244, 232, .2); }
.when { font: 300 22vw/.92 var(--serif); letter-spacing: -.035em; color: var(--cream); }
.when.nm { font-style: italic; font-weight: 400; letter-spacing: -.03em; color: var(--orange); }
.when.md { font-size: 13vw; letter-spacing: -.03em; }
.when.nm.md { font-size: 12vw; max-width: 6em; }   /* two words: stack them */
.what { max-width: 34ch; color: var(--mist); }
@media (min-width: 640px) and (max-width: 799px) {   /* single column, but the strings run at 72%: keep the keys left of them */
  .when { font-size: 18vw; }
  .when.md { font-size: 10.5vw; }
  .when.nm.md { font-size: 8.6vw; }
}
@media (min-width: 800px) {
  .yrs li { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(20px, 3vw, 48px); align-items: end; padding-inline-end: 34%; }
  .when { font-size: clamp(6rem, 12vw, 12rem); }
  .when.md { font-size: clamp(3.4rem, 6.6vw, 6.6rem); }
  .when.nm.md { font-size: clamp(3.2rem, 5.6vw, 5.8rem); }
  .what { padding-bottom: .5em; }
}
html.js:not(.static) .yrs li { opacity: 0; transform: translate3d(var(--sx), 0, 0); }
html.js:not(.static) .yrs li.in { opacity: 1; transform: none; transition: opacity .8s ease, transform 1.2s var(--ease); }

/* ---------- 3. In detail ---------- */
.det { display: grid; gap: clamp(36px, 5vw, 64px) 0; margin-top: clamp(28px, 4vw, 56px); }
.dg { padding-top: 1.1rem; border-top: 1px solid rgba(31, 63, 214, .32); }
.dg .label { margin-bottom: 1.1rem; }
.dg-orch p { font: 300 clamp(1.45rem, 3.4vw + .6rem, 2.9rem)/1.2 var(--serif); letter-spacing: -.012em; }
.dg-note { font-size: 1rem; line-height: 1.55; max-width: 40ch; }
.dg .flow + .dg-note, .dg .dg-note + .flow { margin-top: .9rem; }
.flow { list-style: none; padding: 0; font: 400 clamp(1.1rem, 1.45vw, 1.34rem)/1.5 var(--serif); }
.flow li { display: inline; }
.dg-cond .flow li { white-space: nowrap; }   /* a name never breaks across lines */
.flow li:not(:last-child)::after { content: "·"; margin: 0 .2em 0 .5em; font-weight: 600; color: var(--cobalt); }   /* the dot trails its item, so a wrapped line never starts with one */
.det-photo { aspect-ratio: 1 / 1; }
.det-photo img { object-position: 22% 50%; }
@media (min-width: 640px) and (max-width: 799px) { .dg { max-width: 66%; } .det-photo { aspect-ratio: 3 / 2; } }
@media (min-width: 800px) {
  .det { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(12px, 2vw, 28px); align-items: start; }
  .dg-orch { grid-column: 1 / 9; grid-row: 1; }
  .dg-fest { grid-column: 1 / 5; grid-row: 2; }
  .dg-cond { grid-column: 5 / 9; grid-row: 2; margin-top: clamp(56px, 8vw, 128px); }
  .dg-teach { grid-column: 2 / 6; grid-row: 3; }
  .dg-rec { grid-column: 6 / 9; grid-row: 3; margin-top: clamp(40px, 6vw, 96px); }
  .det-photo { grid-column: 9 / 13; grid-row: 2 / 4; aspect-ratio: 4 / 5; margin-top: clamp(0px, 4vw, 64px); }
}

/* ---------- 4. Next ---------- */
.close .label { margin-bottom: clamp(14px, 2vw, 28px); }
.close .ln { display: block; }
.close .mega em { color: var(--orange); }
.close .arrow-link { margin-top: clamp(24px, 4vw, 56px); padding: 1.05rem 0; }   /* >= 44px tall */
.close .arrow-link:active span { transform: translateX(12px); }
.close .arrow-link:active::after { transform: scaleX(.15); }

/* ---------- right to left (Hebrew): see the note in ../style.css ---------- */
html.js:not(.static):where([dir="rtl"]) .yrs li { transform: translate3d(calc(var(--sx) * -1), 0, 0); }
:where([dir="rtl"]) .close .arrow-link:active span { transform: translateX(-12px); }