/* Who We Are grid and individual team profile pages. */

/* ── Who We Are: one row across the content column ──────── */
/* --team-cols is set per page from the number of people actually shown (capped
   at 4), so three people spread across the row instead of leaving a hole on the
   right. The 360px ceiling stops one or two people blowing up into giant cards:
   four across land at 290px each and fill the column exactly, two sit on the
   same 760px measure as the intro paragraph. Beyond four wraps to a second row. */
.team-grid{display:grid;grid-template-columns:repeat(var(--team-cols,4),minmax(0,360px));
                 gap:44px 40px;margin-top:8px}
.team-card{display:block;text-decoration:none;color:inherit;position:relative;
                 transition:transform .3s var(--ease-out)}
.team-card:hover{transform:translateY(-4px)}
.team-card:focus-visible{outline:2px solid var(--gold-deep);outline-offset:6px}
.team-photo{position:relative;width:100%;aspect-ratio:4/5;overflow:hidden;
                  background:var(--paper-2);margin-bottom:18px}
.team-photo img{width:100%;height:100%;object-fit:cover;display:block;
                      filter:saturate(.94);transition:transform .5s var(--ease-out)}
.team-card:hover .team-photo img{transform:scale(1.03)}
.team-photo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
                         background:var(--gold);transform:scaleX(0);transform-origin:left;
                         transition:transform .35s var(--ease-out)}
.team-card:hover .team-photo::after{transform:scaleX(1)}
.team-name{font-family:'Switzer',sans-serif;font-weight:500;font-size:22px;
                 letter-spacing:-.018em;color:var(--ink);margin-bottom:6px}
.team-role{font-family:'Switzer',sans-serif;font-size:14px;color:var(--muted);
                 letter-spacing:.04em;text-transform:uppercase;margin-bottom:10px}
.team-more{font-family:'Switzer',sans-serif;font-size:14px;color:var(--gold-deep);
                 display:inline-flex;align-items:center;gap:7px}
.team-more span{transition:transform .25s var(--ease-out)}
.team-card:hover .team-more span{transform:translateX(4px)}
/* ── Individual profile page ────────────────────────────── */
.person{display:grid;grid-template-columns:360px 1fr;gap:60px;align-items:start}
.person-photo{width:100%;aspect-ratio:4/5;overflow:hidden;background:var(--paper-2);
                    position:relative}
.person-photo img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.94)}
.person-photo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;
                           background:var(--gold)}
.person-name{font-family:'Switzer',sans-serif;font-weight:500;font-size:40px;
                   line-height:1.08;letter-spacing:-.03em;color:var(--ink);margin-bottom:10px}
.person-role{font-family:'Switzer',sans-serif;font-size:14.5px;color:var(--gold-deep);
                   letter-spacing:.08em;text-transform:uppercase;margin-bottom:26px}
.person-rule{width:54px;height:1px;background:var(--line);margin-bottom:26px}
.person-bio p{font-family:'Switzer',sans-serif;font-size:16px;color:var(--ink-soft);
                    line-height:1.7;margin-bottom:1.1em}
.person-bio p:last-child{margin-bottom:0}
.person-contact{margin-top:30px;padding-top:24px;border-top:1px solid var(--line-soft);
                      font-family:'Switzer',sans-serif;font-size:15px;color:var(--ink-soft)}
.person-contact a{color:var(--ink);border-bottom:1px solid var(--gold-deep);
                        text-decoration:none;transition:opacity .2s ease}
.person-contact a:hover{opacity:.7}
.back-link{display:inline-flex;align-items:center;gap:8px;font-family:'Switzer',sans-serif;
                 font-size:14.5px;color:var(--muted);text-decoration:none;margin-bottom:34px;
                 transition:color .2s ease}
.back-link:hover{color:var(--ink)}
.back-link span{transition:transform .25s var(--ease-out)}
.back-link:hover span{transform:translateX(-4px)}
/* Placeholder state - visible until a real photograph is dropped in */
.photo-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;
                         align-items:center;justify-content:center;gap:10px;
                         background:var(--navy);color:rgba(232,223,199,.55);
                         font-family:'Switzer',sans-serif;text-align:center;padding:20px}
.photo-placeholder .initials{font-size:34px;font-weight:500;letter-spacing:.06em;
                                   color:var(--gold)}
.photo-placeholder .note{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase}
@media (max-width:1080px){
        /* Below this a full row gets too narrow to read, whatever --team-cols
           says: two across, on the same 760px measure as the intro paragraph. */
        .team-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px}
      }
@media (max-width:880px){
        .team-grid{gap:34px 26px}
        .person{grid-template-columns:1fr;gap:34px}
        .person-photo{max-width:380px}
        .person-name{font-size:32px}
      }
@media (max-width:560px){
        .team-grid{grid-template-columns:minmax(0,1fr);gap:38px}
        .team-name{font-size:20px}
      }