/* ==========================================================================
   Team page (body.tm-page). Loaded after main.css.
   ========================================================================== */

.tm-page{--tg-gap:clamp(1rem,1.8vw,1.7rem)}

/* ---------- groups ---------- */
/* the first group sits directly under the hero; the section padding is enough air */
.tm-page .team-group:first-child{margin-top:0}
.tm-page .team-group__title{text-wrap:balance}

/* ---------- grid ----------
   Every row is left-aligned, like the rest of the page; a short last row
   reads as the natural end of the grid rather than a featured card.
   desktop 5 across (team 5 + 4, committee 4, partners 3), tablet 4 across
   (committee one row of four), small tablet 3, phones 2. */
.tm-page .team-grid{column-gap:var(--tg-gap)}
@media (min-width:1100px){
  .tm-page .team-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media (min-width:768px) and (max-width:1099.98px){
  .tm-page .team-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:640px) and (max-width:767.98px){
  .tm-page .team-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:639.98px){
  .tm-page .team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- person card ---------- */
/* photo row, then a meta row that fills the card: names line up under the
   photos and every "Read bio" link sits on the same baseline across a row */
.tm-page .person{grid-template-rows:auto 1fr;align-content:stretch}
.tm-page .person .meta-block{display:flex;flex-direction:column;align-items:flex-start}
.tm-page .person .tl{text-wrap:pretty}

/* portraits come from different shoots: a hairline keeps pale backgrounds
   from dissolving into the paper, a per-photo zoom evens out head size and
   a per-photo tone evens out exposure (kept on hover) */
.tm-page .person .ph{position:relative}
.tm-page .person .ph::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(20,24,26,.09);
}
.tm-page .person .ph img{
  --tone:contrast(1);
  transform:scale(var(--z,1));transform-origin:var(--zo,50% 38%);
  filter:saturate(0) var(--tone);
}
.tm-page .person:hover .ph img,
.tm-page .person:focus-within .ph img{filter:saturate(1) var(--tone)}
.tm-page .person[data-bio]:hover .ph img{transform:scale(calc(var(--z,1) * 1.055))}
.tm-page .person .ph img[src*="team-mark-cole"]{--z:1.16;--zo:52% 26%}
.tm-page .person .ph img[src*="team-jeffrey-giles"]{--tone:brightness(.9) contrast(1.1)}
.tm-page .person .ph img[src*="team-kenneth-polk"]{--tone:brightness(.93) contrast(1.06)}

/* "Read bio" is a real button, always shown in a quiet state so visitors
   know the bios exist; it takes the accent colour on hover and focus */
.tm-page .person .more{
  appearance:none;-webkit-appearance:none;background:none;border:0;
  margin-top:auto;padding:.6rem 0 0;line-height:1.3;text-align:left;cursor:pointer;
  opacity:1;transform:none;color:var(--ink-soft);transition:color .35s var(--ease);
}
.tm-page .person[data-bio]:hover .more,
.tm-page .person .more:focus-visible{color:var(--teal)}
.tm-page .person .more svg{transition:transform .45s var(--ease-out)}
.tm-page .person[data-bio]:hover .more svg{transform:translateX(3px)}
.tm-page .person .more:focus-visible{outline:2px solid var(--teal);outline-offset:4px}

@media (prefers-reduced-motion:reduce){
  .tm-page .person[data-bio]:hover .ph img{transform:scale(var(--z,1))}
  .tm-page .person[data-bio]:hover .more svg{transform:none}
}

/* ---------- join band ---------- */
/* a short footnote to the team, not a second hero band before the CTA */
/* 2026-09-23: this is now the page's closing band — dark pine like the other pages' CTA bands,
   which it replaces on /team/, so it takes the standard section padding. */
/* centred single column: headline, one line of copy, the button (client request 2026-09-23) */
.tm-join{display:grid;gap:clamp(1.2rem,2vw,1.6rem);justify-items:center;text-align:center}
.tm-join .d2{margin:0;text-wrap:balance}
.tm-join .lede{text-wrap:balance;max-width:44ch;margin-inline:auto}
.tm-join__side{display:grid;gap:clamp(1.3rem,2vw,1.7rem);justify-items:center}

/* ---------- bio dialog ---------- */
/* The panel colour lives on the dialog and the close button sits outside the
   scrolling .inner, so the X stays put while a long bio scrolls. Text fades
   through the top and bottom padding instead of being sliced at the edge;
   at rest (top or end of a bio) the padding is empty, so nothing is faded. */
.tm-page .bio-dialog{--bio-pad:clamp(1.9rem,4vw,3.2rem);background:var(--paper)}
.tm-page .bio-dialog .inner{
  background:transparent;padding:var(--bio-pad);max-height:86vh;max-height:86dvh;
  overscroll-behavior:contain;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 var(--bio-pad),#000 calc(100% - var(--bio-pad)),transparent);
          mask-image:linear-gradient(to bottom,transparent,#000 var(--bio-pad),#000 calc(100% - var(--bio-pad)),transparent);
}
.tm-page .bio-dialog .close{z-index:2;background:var(--paper)}
.tm-page .bio-dialog .close:hover{background:var(--ink);color:var(--paper)}
.tm-page .bio-dialog .close:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
/* keep a long title clear of the close button; set bios for easy reading */
.tm-page .bio-dialog .tl{padding-right:3.2rem;line-height:1.35;text-wrap:balance}
.tm-page .bio-dialog .bio{gap:1.1em}
.tm-page .bio-dialog .bio p{text-wrap:pretty}