/* ==========================================================================
   team.html / advisors.html / person.html
   Page-only rules. Everything structural comes from styles.css + css/vc.css.
   ========================================================================== */

/* ---------- Intro: how to pick who to contact ---------- */
.pick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:8px}
.pick .lbl{font-family:var(--font-mono);font-size:12px;line-height:16px;color:var(--muted-2);
  letter-spacing:.04em;text-transform:uppercase}
.pick h3{font-size:16px;line-height:24px;font-weight:600;margin-top:2px}
.pick p{color:var(--muted);font-size:14px;line-height:20px}
.pick .who{margin-top:auto;padding-top:12px;font-size:14px;line-height:20px;color:var(--muted-2);
  border-top:1px solid var(--hairline)}
.pick .who span{color:var(--text);font-weight:500}

/* ---------- Filter bar ---------- */
/* Sits between .pg-hero and .sec, both of which inset by --pad. Without the
   same inset the pills sat flush against the shell column and the whole bar
   read as misaligned with everything above and below it. */
.filter-bar{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  flex-wrap:wrap;padding:0 var(--pad);margin-bottom:32px}
.filter-bar .filters{margin-bottom:0;flex:1 1 auto}
.count{font-family:var(--font-mono);font-size:12px;line-height:16px;color:var(--muted-2);
  white-space:nowrap;padding-top:10px}

/* ---------- Person row ---------- */
.tm-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px;
  border-top:1px solid var(--border)}
/* Each row carries its own id, so #rohan-workman and the rest are real anchors — the
   portrait strip on about.html links straight to them. The header is sticky at
   --nav-h, so without the scroll margin the linked row lands underneath it. */
.tm-row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:24px;
  padding:32px 0;border-bottom:1px solid var(--border);
  scroll-margin-top:calc(var(--nav-h) + 24px)}
.tm-row[hidden]{display:none}
/* last row of a section carries no divider */
.tm-list > .tm-row:last-child{border-bottom:none}
@media (min-width:1101px){
  /* two-up: the second-last card shares the final row when it sits in column 1 */
  .tm-list > .tm-row:nth-last-child(2):nth-child(odd){border-bottom:none}
}
.tm-list[hidden]{display:none}
.pick-grid[hidden]{display:none}

.tm-ph{width:150px}
/* Square portraits. The source files are 3:4, so cover crops 25% of the height —
   biased up off centre so the crop takes it off the chest, not the head. The same
   treatment as the founder cluster and the investor contact card. */
.tm-ph img{width:150px;height:150px;object-fit:cover;object-position:50% 25%;border-radius:0;background:var(--card)}
.tm-ph .ph{width:150px;height:150px;border-radius:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#1c1814,#100e0c);border:1px solid var(--border);
  font-family:var(--font-head);font-weight:700;font-size:34px;letter-spacing:0;
  text-transform:uppercase;color:#494139}
/* Twelve portraits, one file each, landing in whatever order the network
   returns them — the roster snapped in a face at a time. Anything not already
   in cache starts transparent and fades once it has actually loaded.

   Opt-in per image, the same contract as the founder clusters in
   portfolio.css: main.js adds .im-fade only when it has hold of the image and
   is committed to revealing it, so a script that fails or never runs cannot
   strand a portrait at opacity 0. */
.tm-ph img.im-fade{opacity:0}
.tm-ph img.im-fade.is-in{opacity:1;transition:opacity .5s ease}
/* Reduced motion keeps the reveal, drops the movement. */
@media (prefers-reduced-motion:reduce){
  .tm-ph img.im-fade.is-in{transition:none}
}
.tm-ph .loc{font-family:var(--font-mono);font-size:12px;line-height:16px;color:var(--muted-2);margin-top:12px}
/* Top right, under the committee tag: where they are. When they joined sits
   under the portrait instead (.tm-ph .loc), so the two facts do not stack. */
.tm-meta{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:none;
  text-align:right;margin-left:auto}
.tm-place{font-family:var(--font-mono);font-size:12px;line-height:16px;color:var(--muted-2)}
@media (max-width:620px){
  /* stack, so a short place sits under the name like a long one, not beside it */
  .tm-top{flex-direction:column;align-items:flex-start}
  .tm-meta{align-items:flex-start;text-align:left;margin-left:0}
}

.tm-body{min-width:0;display:flex;flex-direction:column;gap:20px}
.tm-top{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap}
.tm-top h3{font-size:24px;line-height:28px;font-weight:600;letter-spacing:-.01em}
.tm-role{color:var(--muted-2);font-size:14px;line-height:20px;margin-top:4px}
.tm-role .ic{color:var(--accent)}
.tm-profile{font-size:14px;line-height:20px;font-weight:500;color:var(--text);white-space:nowrap;
  border-bottom:1px solid var(--faint);padding-bottom:2px;transition:border-color .18s}
.tm-profile:hover{border-color:var(--text)}

.tm-thesis{font-size:18px;line-height:28px;color:var(--text);max-width:64ch}

.tm-block{display:flex;flex-direction:column;gap:10px}
.tm-lbl{font-family:var(--font-mono);font-size:12px;line-height:16px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted-2)}
.tm-block p{color:var(--muted);font-size:15px;line-height:23px;max-width:70ch}
/* ---- Per-person disclosure -------------------------------------------------
   The four facets are .acc-item from vc.css, namespaced .tm-acc so the card
   gets a tighter rhythm and a label-weight trigger rather than the 16/600
   question weight the FAQ uses. One open at a time, so the row cannot grow
   unbounded inside the two-up grid. */
/* The group is one flex child of .tm-body, so its 20px gap applies once
   around the set instead of between every divider and the next label. */
.tm-accs{display:flex;flex-direction:column}
.tm-acc{border-bottom:1px solid var(--border)}
.tm-accs > .tm-acc:first-child{border-top:1px solid var(--border)}
.tm-acc-q{padding:13px 0;font-family:var(--font-mono);font-size:12px;line-height:16px;
  letter-spacing:.04em;text-transform:uppercase;font-weight:400;color:var(--muted-2);
  transition:color .18s}
.tm-acc-q:hover{color:var(--text)}
.tm-acc.open > .tm-acc-q{color:var(--text)}
.tm-acc-q .ico{width:14px;height:14px}
.tm-acc-q .ico::before{top:6px;left:0;width:14px;height:1.5px}
.tm-acc-q .ico::after{left:6px;top:0;width:1.5px;height:14px}
.tm-acc-a > .co-tags{margin-top:0;padding-bottom:18px}
.tm-acc-a > .tm-cos{padding-bottom:18px}
.tm-acc-a > p{padding:0 0 18px;margin:0}
/* Without JS nothing sets max-height, so the panels would never open at all. */
html:not(.js) .tm-acc-a{max-height:none}
html:not(.js) .tm-acc-q .ico{display:none}

/* companies led — inline linked list */
.tm-cos{display:flex;flex-wrap:wrap;gap:8px}
.tm-cos > a{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:0;
  background:var(--chip);border:1px solid var(--border);font-size:14px;line-height:20px;
  transition:border-color .18s,background .18s}
.tm-cos > a:hover{border-color:var(--border-2);background:var(--surface)}
.tm-cos > a img{width:18px;height:18px;object-fit:contain;flex:none}
.tm-cos > a .yr{font-family:var(--font-mono);font-size:11px;color:var(--muted-2)}
.tm-cos .none{color:var(--muted);font-size:15px;line-height:23px;max-width:70ch}

/* inline links inside prose-ish blocks */
.tm-block p a,.tm-cos .none a{color:var(--text);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--faint)}
.tm-block p a:hover,.tm-cos .none a:hover{text-decoration-color:var(--text)}

.tm-act{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:auto;padding-top:4px}
.tm-act .tm-link{font-size:14px;line-height:20px;color:var(--muted-2);transition:color .18s}
.tm-act .tm-link:hover{color:var(--text)}

/* ---------- Advisor extras ---------- */
.av-for{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 24px;margin:0}
.av-for li{display:flex;gap:10px;align-items:flex-start;color:var(--muted);font-size:15px;line-height:22px;
  list-style:none}
.av-for li::before{content:"";width:5px;height:5px;border-radius:0;background:var(--accent);
  flex:none;margin-top:8px}
.av-meta{display:flex;flex-wrap:wrap;gap:8px 24px;font-size:14px;line-height:20px;color:var(--muted)}
.av-meta .k{color:var(--muted-2)}
.reach-yes{color:var(--accent)}
.reach-no{color:var(--to-grey-300)}

/* inline links that need to read as links */
.callout p a,.av-meta a,.sec-sub a,.empty a{color:var(--text);text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:var(--faint)}
.callout p a:hover,.av-meta a:hover,.sec-sub a:hover,.empty a:hover{text-decoration-color:var(--text)}
.tbl td a{color:var(--text)}
.tbl td a:hover{color:var(--muted)}

/* ---------- person.html profile head ---------- */
.pf-head{display:grid;grid-template-columns:280px minmax(0,1fr);gap:48px;
  padding:48px var(--pad);border-bottom:1px solid var(--border);align-items:start}
.pf-photo img{width:280px;height:280px;object-fit:cover;border-radius:0;background:var(--card)}
.pf-main h1{font-size:40px;line-height:42px;letter-spacing:0;font-family:var(--font-head);
  text-transform:uppercase}
.pf-role{color:var(--muted-2);font-size:16px;line-height:24px;margin-top:12px}
.pf-focus{font-size:20px;line-height:30px;color:var(--text);margin-top:24px;max-width:56ch}
.pf-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:20px}
.pf-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.pf-kv{margin-top:32px;border-top:1px solid var(--border)}
.pf-kv .row{padding:12px 0;border-bottom:1px solid var(--hairline)}

.pf-two{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;align-items:start}
.pf-side .tm-lbl{margin-bottom:12px}
.pf-side ul{display:flex;flex-direction:column;gap:0;margin:0}
.pf-side li{list-style:none;border-bottom:1px solid var(--hairline)}
.pf-side li:last-child{border-bottom:none}
.pf-side li a{display:block;padding:12px 0;font-size:15px;line-height:22px;color:var(--text);
  transition:color .18s}
.pf-side li a:hover{color:var(--muted)}
.pf-side li .when{font-family:var(--font-mono);font-size:11px;line-height:16px;color:var(--muted-2);
  display:block;margin-top:2px}

/* filler cell so a ruled grid's last row completes its rules */
.grid-fill{display:block}
@media (max-width:620px){.grid-fill{display:none}}

/* lists inside a .callout */
.callout ul{margin-top:14px;display:flex;flex-direction:column;gap:8px;padding-left:18px}
.callout li{color:var(--muted);font-size:15px;line-height:23px;list-style:disc}
.callout li strong{color:var(--text);font-weight:600}

/* .kv values need room for full sentences on a profile */
.pf-kv .row .v{max-width:64ch}
.pf-kv .row .v a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--faint)}
.pf-kv .row .v a:hover{text-decoration-color:var(--text)}

/* template hint strip — reusable-profile marker */
.tpl-note{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px var(--pad);
  border-bottom:1px solid var(--border);background:var(--chip);
  font-family:var(--font-mono);font-size:12px;line-height:16px;color:var(--muted-2)}
.tpl-note a{color:var(--muted);border-bottom:1px solid var(--faint);padding-bottom:1px}
.tpl-note a:hover{color:var(--text)}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .tm-list{grid-template-columns:minmax(0,1fr);column-gap:0}
  .pick-grid{grid-template-columns:repeat(2,1fr)}
  .pf-head{grid-template-columns:200px minmax(0,1fr);gap:32px}
  .pf-photo img{width:200px;height:200px}
  .pf-two{grid-template-columns:1fr;gap:40px}
}
@media (max-width:820px){
  .av-for{grid-template-columns:1fr}
}
@media (max-width:620px){
  .pick-grid{grid-template-columns:1fr}
  .tm-row{grid-template-columns:1fr;gap:20px;padding:28px 0}
  /* single column here, so the photo box takes the full width and the date
     under it has room instead of wrapping against a 112px portrait */
  .tm-ph{width:auto}
  .tm-ph img,.tm-ph .ph{width:112px}
  .tm-ph img,.tm-ph .ph{height:112px}
  .tm-ph .ph{font-size:28px}
  .tm-top h3{font-size:20px;line-height:26px}
  .tm-thesis{font-size:16px;line-height:26px}
  .tm-act .btn{flex:1 1 auto;justify-content:center}
  .pf-kv .row{flex-direction:column;align-items:flex-start;gap:4px}
  .pf-kv .row .v{text-align:left}
  .pf-head{grid-template-columns:1fr;gap:24px;padding:32px var(--pad)}
  .pf-photo img{width:140px;height:140px}
  .pf-main h1{font-size:32px;line-height:34px}
  .pf-focus{font-size:18px;line-height:28px}
}