/* Team (/team): the studio in four facts, one glass slate per person (gold-graded portrait, name, role,
   background, LinkedIn), then a pointer to the R&D work. Shared components live in piw.css. */

/* ---------- intro + studio facts */
.team-hero{padding-block:calc(var(--header-h) + clamp(36px,6vw,88px)) clamp(32px,4vw,56px)}
.team-intro{display:grid;justify-items:start;gap:var(--s5)}
.team-intro .lede{max-width:44em}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(28px,3.6vw,48px);--tick:16px}
.facts>div{display:grid;align-content:start;gap:var(--s2);padding:clamp(16px,2vw,24px)}
.facts>div+div{border-left:1px solid var(--line)}
.facts dt{font-size:var(--fs-micro);font-weight:600;font-stretch:75%;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-dim)}
.facts dd{font-size:clamp(15px,.3vw + 13.5px,17px);line-height:1.45;color:var(--cream)}
@media (max-width:900px){
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts>div:nth-child(3){border-left:0}
  .facts>div:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:480px){.facts{grid-template-columns:1fr}.facts>div+div{border-left:0;border-top:1px solid var(--line)}}

/* ---------- people: portrait left, story right; stacked on phones */
.people{padding-top:0}
.people-list{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(16px,2vw,28px)}
.person{display:grid;grid-template-columns:minmax(200px,320px) minmax(0,1fr);gap:clamp(20px,3vw,48px);padding:clamp(14px,1.8vw,22px);--tick:18px;scroll-margin-top:calc(var(--header-h) + 16px)}
.person-photo{display:grid;align-content:start;gap:var(--s3);margin:0}
.person-photo img{width:100%;aspect-ratio:1;object-fit:cover;border:1px solid var(--line);background:var(--ink)}
.person-body{display:grid;align-content:start;justify-items:start;gap:var(--s3);padding:clamp(4px,1vw,14px) clamp(0px,1vw,14px) clamp(4px,1vw,14px) 0}
.person h2{font-size:clamp(22px,1.6vw + 16px,40px);line-height:1.04;overflow-wrap:break-word}   /* "Harshavardhan" fits a 320px phone at 22px */
.person-role{font-weight:500;color:var(--gold-hi)}
.person-bio{max-width:62ch}
.person-facts{width:100%;margin-top:var(--s2);border-top:1px solid var(--line)}
.person-facts li{display:grid;grid-template-columns:120px minmax(0,1fr);gap:var(--s4);padding:10px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.5}
.person-facts b{padding-top:3px;font-size:var(--fs-micro);font-weight:600;font-stretch:75%;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-dim)}
.person .btn{max-width:100%;margin-top:var(--s3);padding-block:12px;line-height:1.35;white-space:normal;text-align:left}   /* full LinkedIn names wrap on phones */
@media (max-width:760px){
  .person{grid-template-columns:minmax(0,1fr)}
  .person-photo{max-width:340px}
  .person-body{padding:0 4px 6px}
}
@media (max-width:420px){.person-facts li{grid-template-columns:1fr;gap:2px}}

/* ---------- what we're building */
.build{display:grid;justify-items:start;gap:var(--s4);padding:clamp(24px,4vw,56px);--tick:20px}
.build .lede{max-width:56ch}

/* viewfinder marks on the portraits: the studio's monitor frame, tightening on hover */
.shot::after{content:"";position:absolute;inset:7%;pointer-events:none;--c:rgba(236,210,155,.55);--l:16px;
  background:linear-gradient(var(--c),var(--c)) top left/var(--l) 1px,linear-gradient(var(--c),var(--c)) top left/1px var(--l),
    linear-gradient(var(--c),var(--c)) top right/var(--l) 1px,linear-gradient(var(--c),var(--c)) top right/1px var(--l),
    linear-gradient(var(--c),var(--c)) bottom left/var(--l) 1px,linear-gradient(var(--c),var(--c)) bottom left/1px var(--l),
    linear-gradient(var(--c),var(--c)) bottom right/var(--l) 1px,linear-gradient(var(--c),var(--c)) bottom right/1px var(--l);
  background-repeat:no-repeat;transition:inset .6s var(--ease)}
.person:hover .shot::after{inset:4.5%}
.person:hover .shot::before{opacity:.1}