/* leadership.css — /leadership/. Loaded after site.css.
   A pinned portrait rail on the left, bios scrolling on the right. The rail
   only exists on a desk; on a phone each person is a card with its own photo. */

/* hero ------------------------------------------------------------------- */
.ld-hero{padding-top:clamp(120px,17vh,190px);padding-bottom:clamp(40px,6vh,72px);border-bottom:1px solid var(--line)}
.ld-hero .label{display:block;margin-bottom:18px}
.ld-hero h1{font-weight:500;font-size:clamp(40px,7vw,104px);line-height:.96;letter-spacing:-.04em;max-width:12ch}
.ld-hero h1 .dim{color:var(--grey-2)}
.ld-hero .lead{color:var(--grey-1);font-size:clamp(17px,1.5vw,21px);max-width:46ch;margin-top:26px}
/* the index is a row of small pills; it doubles as the jump list on phones */
.ld-index{list-style:none;margin:clamp(26px,4vh,44px) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.ld-index a{display:inline-block;font-size:13.5px;padding:8px 14px;border:1px solid var(--line);border-radius:999px;color:var(--ink);transition:border-color .25s,background .25s}
.ld-index a:hover{border-color:var(--ink)}
.ld-index a.on{background:var(--ink);color:#fff;border-color:var(--ink)}

/* the two columns ---------------------------------------------------------- */
.ld{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,96px);padding-top:clamp(40px,7vh,90px)}
.ld-rail{position:relative}
.ld-stage{position:sticky;top:96px;height:calc(100vh - 130px);min-height:520px;display:grid;place-items:center}

/* the huge first name behind the portrait, drawn in the wordmark face and
   only outlined, so it is texture rather than a second heading */
.ld-big{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) translateY(14px);font-family:var(--mark);font-weight:800;font-size:clamp(58px,8.5vw,140px);line-height:1;letter-spacing:-.03em;color:transparent;-webkit-text-stroke:1px var(--grey-3);white-space:nowrap;max-width:none;opacity:0;transition:opacity .5s,transform .7s cubic-bezier(.2,.7,.2,1);pointer-events:none;user-select:none}
.ld-big.on{opacity:1;transform:translate(-50%,-50%)}

/* portrait: every image is stacked in one frame and the active one fades up.
   The rest is grayscale, the active one keeps its colour, same idiom as the
   work grids elsewhere on the site. */
.ld-frame{position:relative;width:min(100%,440px);aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;background:var(--paper);box-shadow:0 30px 70px rgba(11,13,14,.14)}
.ld-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 18%;opacity:0;filter:grayscale(1);transform:scale(1.04);transition:opacity .5s,transform 1.2s cubic-bezier(.2,.7,.2,1),filter .8s}
.ld-frame img.on{opacity:1;transform:none;filter:none}
/* no script: show the first person rather than an empty frame */
.ld:not(.ready) .ld-frame img:first-of-type,.ld:not(.ready) .ld-big:first-of-type{opacity:1;filter:none;transform:translate(-50%,-50%)}
.ld:not(.ready) .ld-frame img:first-of-type{transform:none}
/* inside the frame, so it tracks the portrait rather than the taller stage */
.ld-count{position:absolute;right:18px;bottom:16px;z-index:1;font-size:13px;color:#fff;mix-blend-mode:difference;letter-spacing:.06em;display:flex;gap:4px;align-items:baseline}
.ld-count b{font-weight:500;font-size:20px}

/* bios -------------------------------------------------------------------- */
/* above the sticky rail in paint order, so a long name set behind the portrait
   can never land on top of a bio */
.ld-list{position:relative;z-index:1;display:grid;gap:clamp(48px,9vh,120px);padding-bottom:clamp(60px,10vh,120px)}
.ld-person{min-height:52vh;display:grid;align-content:center;gap:22px;scroll-margin-top:110px}
.ld-person header{display:grid;gap:6px}
.ld-person .n{font-size:13px;letter-spacing:.08em;color:var(--grey-1)}
.ld-person h2{font-weight:500;font-size:clamp(34px,4.2vw,62px);line-height:1;letter-spacing:-.035em}
.ld-person .role{color:var(--grey-1);font-size:clamp(16px,1.35vw,19px)}
.ld-person .bio{display:grid;gap:14px;max-width:52ch;color:var(--grey-1);font-size:clamp(16px,1.3vw,18.5px);line-height:1.55}
.ld-person .bio p:first-child{color:var(--ink)}
.tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tags li{font-size:12.5px;letter-spacing:.04em;padding:6px 11px;border-radius:999px;border:1px solid var(--line);color:var(--grey-1)}
/* the per-person photo is only for phones */
.ld-photo{display:none}

/* the person in view gets a dark heading and number; the rest stay grey. Only
   the heading changes colour: dimming the whole card put the body copy at
   1.85:1 against white, which is well under the 4.5:1 floor for body text. */
.ld-person h2,.ld-person .n{color:var(--grey-1);transition:color .45s}
.ld-person.on h2,.ld-person.on .n{color:var(--ink)}

/* closing ------------------------------------------------------------------ */
.ld-after{padding-block:clamp(40px,7vh,90px);border-top:1px solid var(--line)}
.ld-cta{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:end}
.ld-cta .label{display:block;margin-bottom:14px}
.ld-cta h2{font-weight:500;font-size:clamp(28px,3.6vw,52px);line-height:1.02;letter-spacing:-.03em;max-width:18ch}
.ld-cta p{color:var(--grey-1);max-width:52ch;margin-top:16px}
.ld-cta .cta{display:flex;gap:12px;flex-wrap:wrap;justify-self:end}

@media (prefers-reduced-motion:reduce){
  .ld-big,.ld-frame img,.ld-person h2,.ld-person .n{transition:none}
}

/* phones and narrow tablets: no rail, one card per person ------------------ */
@media (max-width:860px){
  .ld{grid-template-columns:minmax(0,1fr);padding-top:clamp(28px,5vh,48px)}
  .ld-rail{display:none}
  .ld-list{gap:22px;padding-bottom:40px}
  .ld-person{min-height:0;gap:16px;padding:18px;border:1px solid var(--line);border-radius:22px;scroll-margin-top:90px;grid-template-columns:104px minmax(0,1fr);grid-template-areas:"photo head" "bio bio" "tags tags";align-items:center}
  .ld-photo{display:block;grid-area:photo;margin:0;width:104px;aspect-ratio:4/5;border-radius:14px;overflow:hidden;background:var(--paper)}
  .ld-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;display:block;filter:grayscale(1);transition:filter .6s}
  .ld-person.on .ld-photo img{filter:none}
  .ld-person header{grid-area:head}
  .ld-person h2{font-size:26px}
  .ld-person .bio{grid-area:bio;font-size:15.5px;max-width:none}
  .tags{grid-area:tags}
  .ld-cta{grid-template-columns:minmax(0,1fr)}
  .ld-cta .cta{justify-self:start}
}