/* Team · a profile (/team/<slug>, team/_entry.php → partials/team/profile/*): the portrait beside who they are, the long
   bio beside what they know, their work, their writing, their colleagues. Over assets/css/team.css (the shared card,
   monogram and pills). Tokens only. */

/* ---------- top ---------- */
.tpf-hero{padding-top:var(--bdh-hero-t)}
.tpf-hero__preview{display:inline-flex;margin-bottom:22px;padding:6px 12px;border-radius:var(--r-sm);background:var(--blue-wash);color:var(--blue-d);
  font-family:var(--f);font-size:var(--t-xs);letter-spacing:.04em}
.tpf-crumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;font-family:var(--f);font-size:var(--t-lbl);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.tpf-crumb li:not(:last-child)::after{content:"/";margin-inline:10px;color:var(--ghost)}
.tpf-crumb a{display:inline-flex;align-items:center;min-height:32px;color:var(--muted)}
.tpf-crumb a:hover{color:var(--ink)}
.tpf-crumb [aria-current]{color:var(--ink)}
/* the portrait beside who they are and the rest; on phones the name comes first (grid areas keep the reading order) */
.tpf-hero__grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);grid-template-areas:"side head" "side body";grid-template-rows:auto 1fr;
  column-gap:var(--bdh-gap-l);row-gap:20px;align-items:start;margin-top:28px}
.tpf-hero__head{grid-area:head;display:flex;flex-direction:column;gap:18px;min-width:0;padding-top:8px}
.tpf-hero__side{grid-area:side;min-width:0}
.tpf-hero__body{grid-area:body;display:flex;flex-direction:column;gap:20px;min-width:0}
/* the compact top: a smaller, square portrait beside a profile with only the essentials */
.tpf-hero__grid--compact{grid-template-columns:minmax(0,3.2fr) minmax(0,8.8fr)}
.tpf-hero__grid--compact .tpf-hero__pic{aspect-ratio:1/1}
.tpf-hero__know{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:22px var(--bdh-gap);padding-top:22px;border-top:1px solid var(--line)}
.tpf-hero__kb{display:flex;flex-direction:column;gap:12px;min-width:0}
.tpf-hero__pic{position:relative;margin:0;aspect-ratio:4/5;overflow:hidden;border-radius:var(--r-xl);background:var(--paper-3);box-shadow:var(--sh-2)}
.tpf-hero__pic picture,.tpf-hero__img{display:block;width:100%;height:100%;object-fit:cover}
.tpf-hero__mono .tm-mono__i{font-size:clamp(4rem,9vw,7.5rem)}
.tpf-hero__links{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.tpf-hero__links ul{display:flex;flex-wrap:wrap;gap:8px}
.tpf-hero__link{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border:1px solid var(--line-3);border-radius:var(--r-pill);
  font-size:var(--t-sm);font-weight:500;color:var(--ink);transition:border-color var(--d1) var(--e-io)}
.tpf-hero__link:hover{border-color:var(--ink)}
.tpf-hero__link .i{color:var(--blue);font-size:var(--t-xs)}
/* the role can run to two lines: give them room, the dot stays on the first */
.tpf-hero__ey{line-height:1.5;align-items:flex-start}
.tpf-hero__ey .dot{flex:none;margin-top:calc((1.5em - 6px) / 2)}
.tpf-hero__eyd{min-width:0}
.tpf-hero__h{overflow-wrap:anywhere}
.tpf-hero__tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:-6px}
.tpf-hero__tags .tm-card__badge{margin:0}
.tpf-hero__pro{font-family:var(--f);font-size:var(--t-xs);color:var(--muted)}
.tpf-hero__lead{max-width:54ch}
.tpf-hero__quote{margin:6px 0 0;padding:4px 0 4px 22px;border-left:2px solid var(--blue);max-width:46ch}
.tpf-hero__quote p{font-family:var(--f-h);font-size:clamp(1.15rem,1.6vw,1.4rem);font-weight:400;letter-spacing:-.01em;line-height:1.45;color:var(--ink)}
.tpf-hero__facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:18px var(--bdh-gap);padding-top:22px;border-top:1px solid var(--line)}
.tpf-hero__facts div{display:flex;flex-direction:column;gap:6px;min-width:0}
.tpf-hero__facts dt{font-family:var(--f);font-size:var(--t-lbl);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.tpf-hero__facts dd{font-size:var(--t-body);line-height:1.5;color:var(--ink)}
.tpf-hero__facts a{color:inherit;text-decoration:underline;text-decoration-color:var(--line-3);text-underline-offset:3px}
.tpf-hero__facts a:hover{text-decoration-color:currentColor}

/* ---------- about ---------- */
.tpf-about__grid{display:grid;grid-template-columns:minmax(0,7.4fr) minmax(0,4.6fr);gap:var(--bdh-gap-l);align-items:start}
.tpf-about__main{display:flex;flex-direction:column;gap:18px;min-width:0}
.tpf-about__prose{margin-top:10px}
.tpf-about__prose .xb{margin-inline:0}
.tpf-about__side{display:flex;flex-direction:column;gap:28px;padding:26px;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--paper)}
.tpf-about__grid--solo{grid-template-columns:minmax(0,8fr)}
.tpf-about__box{display:flex;flex-direction:column;gap:12px}
.tpf-about__tags{display:flex;flex-wrap:wrap;gap:6px}
.tpf-about__inds{display:flex;flex-direction:column;gap:2px}
.tpf-about__inds .tl{min-height:36px}

/* ---------- selected work ---------- */
.tpf-work__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--bdh-gap)}
.tpf-work__grid--1{grid-template-columns:minmax(0,1fr)}
.tpf-work__grid--1 .tpf-work__card{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--bdh-gap-l);align-items:center}
.tpf-work__grid--1 .tpf-work__t{font-size:clamp(1.4rem,2.2vw,1.9rem)}
.tpf-work__card{display:flex;flex-direction:column;gap:16px;color:var(--ink)}
.tpf-work__ph{aspect-ratio:4/3}
.tpf-work__ph img{transition:transform .9s var(--e)}
.tpf-work__card:hover .tpf-work__ph img,.tpf-work__card:focus-visible .tpf-work__ph img{transform:scale(1.035)}
.tpf-work__b{display:flex;flex-direction:column;gap:6px}
.tpf-work__m{font-family:var(--f);font-size:var(--t-lbl);letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.tpf-work__t{font-family:var(--f-h);font-size:1.25rem;font-weight:500;letter-spacing:-.01em;line-height:1.25}
.tpf-work__card:hover .tpf-work__t{text-decoration:underline;text-underline-offset:4px}
.tpf-work__d{font-size:var(--t-sm);line-height:1.55;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- writing ---------- */
.tpf-writing__list{border-top:1px solid var(--ink)}
.tpf-writing__list>li{border-bottom:1px solid var(--line)}
.tpf-writing__a{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,7fr) 24px;gap:8px var(--bdh-gap);align-items:baseline;padding:22px 4px;color:var(--ink)}
.tpf-writing__m{display:flex;flex-wrap:wrap;gap:4px 12px;font-family:var(--f);font-size:var(--t-lbl);letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.tpf-writing__m span:first-child{color:var(--blue-d)}
.tpf-writing__t{grid-column:2;font-family:var(--f-h);font-size:1.25rem;font-weight:500;letter-spacing:-.01em;line-height:1.3}
.tpf-writing__d{grid-column:2;font-size:var(--t-sm);line-height:1.6;color:var(--muted)}
.tpf-writing__a .i{grid-column:3;grid-row:1;color:var(--blue)}
.tpf-writing__a:hover .tpf-writing__t{text-decoration:underline;text-underline-offset:4px}

/* ---------- colleagues and onward ---------- */
.tpf-col__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px var(--bdh-gap)}
.tpf-col__nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;margin-top:var(--bdh-block)}
.tpf-col__grid+.tpf-col__nav{padding-top:28px;border-top:1px solid var(--line)}
.band--tight .tpf-col__nav{margin-top:0}
.tpf-col__links{display:flex;flex-wrap:wrap;gap:12px}
.tpf-col__pn{display:flex;flex-wrap:wrap;gap:12px}
.tpf-col__p{display:flex;flex-direction:column;gap:4px;min-width:200px;min-height:44px;padding:12px 16px;border:1px solid var(--line);border-radius:var(--r);color:var(--ink);background:var(--paper)}
.tpf-col__p--next{text-align:right}
.tpf-col__p b{font-family:var(--f-h);font-weight:500;font-size:1.0625rem;line-height:1.3}
.tpf-col__p:hover{border-color:var(--ink)}

@media (max-width:1023px){
  .tpf-hero__grid{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
  .tpf-about__grid,.tpf-about__grid--solo{grid-template-columns:minmax(0,1fr)}
  .tpf-col__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tpf-work__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tpf-work__grid--1{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .tpf-hero__grid,.tpf-hero__grid--compact{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "side" "body";grid-template-rows:auto}
  .tpf-hero__head{padding-top:0}
  .tpf-hero__side{max-width:400px}
  .tpf-writing__a{grid-template-columns:minmax(0,1fr) 24px}
  .tpf-writing__m,.tpf-writing__t,.tpf-writing__d{grid-column:1}
  .tpf-writing__a .i{grid-column:2;grid-row:2}
  .tpf-work__grid,.tpf-work__grid--1{grid-template-columns:minmax(0,1fr)}
  .tpf-work__grid--1 .tpf-work__card{display:flex;align-items:stretch;gap:16px}
}
@media (max-width:600px){
  .tpf-hero__side{max-width:min(100%,340px)}
  .tpf-hero__pic{aspect-ratio:1/1}
  .tpf-hero__img{object-position:50% 30%}
  .tpf-col__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 14px}
  .tpf-col__p{min-width:0;flex:1}
  .tpf-hero__link{min-height:44px}
  .tpf-crumb a{min-height:44px}
}
@media (prefers-reduced-motion:reduce){
  .tpf-work__ph img{transition:none}
  .tpf-work__card:hover .tpf-work__ph img,.tpf-work__card:focus-visible .tpf-work__ph img{transform:none}
}

/* touch screens: the practice link in the hero facts is a full 44px target (css-rest integrator) */
@media (pointer:coarse){.tpf-hero__facts dd a{display:inline-flex;align-items:center;min-height:44px}}