/* The portraits are supplied artwork. This layer only arranges the printed
   cutouts, editable nameplates and their shared interaction. */
.team-section { padding-block:clamp(64px,6vw,96px); }
.team-section > .wrap { max-width:1120px; }
.team-section .team-heading {
  margin-bottom:clamp(28px,3vw,42px);
}
.team-section .team-heading h2 { font-size:clamp(40px,4.5vw,64px); }
.team-portraits {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  align-items:start;
  gap:clamp(24px,2.5vw,36px);
  max-width:1120px;
  margin-inline:auto;
  padding:8px 9px 12px;
}
.team-member {
  --portrait-turn:-1.4deg;
  --portrait-axis:-5deg;
  --portrait-hover-turn:-.3deg;
  min-width:0;
  padding-top:0;
}
.team-member:nth-child(2) {
  --portrait-turn:1.2deg;
  --portrait-axis:5deg;
  --portrait-hover-turn:.3deg;
  padding-top:14px;
}
.team-member:nth-child(3) {
  --portrait-turn:-.8deg;
  --portrait-axis:-4deg;
  --portrait-hover-turn:.4deg;
  padding-top:0;
}
.team-member:nth-child(4) {
  --portrait-turn:1.5deg;
  --portrait-axis:5deg;
  --portrait-hover-turn:-.2deg;
  padding-top:14px;
}
.team-portrait-link {
  position:relative;
  display:block;
  max-width:240px;
  margin-inline:auto;
  color:var(--ink);
  text-decoration:none;
  transform:perspective(1100px) rotateZ(var(--portrait-turn));
  transform-origin:50% 72%;
  transition:transform .35s cubic-bezier(.2,.65,.25,1);
}
.team-cutout {
  position:relative;
  margin:0 auto;
  width:100%;
}
.team-cutout img {
  display:block;
  width:100%;
  height:230px;
  object-fit:contain;
  object-position:center bottom;
  filter:drop-shadow(3px 6px 0 #080808) drop-shadow(0 12px 16px #0005);
}
.team-nameplate {
  position:relative;
  z-index:1;
  margin:-24px -2px 0;
  padding:16px 16px 14px;
  background:var(--paper);
  color:var(--ink);
  box-shadow:4px 4px 0 #b0b0ad,7px 7px 0 #080808;
  transition:box-shadow .35s cubic-bezier(.2,.65,.25,1);
}
.team-nameplate h3 {
  font-size:clamp(22px,1.8vw,26px);
  line-height:1.1;
  letter-spacing:-.035em;
  word-spacing:.12em;
}
.team-nameplate .team-role {
  margin-top:8px;
  color:#555;
  font-size:15px;
  font-weight:500;
  line-height:1.3;
  min-height:2.6em;
}
.team-member:nth-child(4) .team-nameplate { margin-top:-30px; }
.team-profile-cue {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:12px;
  color:var(--accent);
  font-size:15px;
  font-weight:600;
  line-height:1.2;
}
.team-profile-cue span { font-size:22px; }
.team-member-bio {
  margin:18px auto 0;
  max-width:240px;
  color:#c6c6c3;
  font-size:16px;
  line-height:1.45;
}
.team-portrait-link:focus-visible { outline:none; }
.team-portrait-link:focus-visible .team-nameplate {
  outline:3px solid var(--coral);
  outline-offset:7px;
}
.team-portrait-link:focus-visible {
  transform:perspective(1100px) translateY(-6px) rotateX(2deg) rotateY(var(--portrait-axis)) rotateZ(var(--portrait-hover-turn));
}
.team-portrait-link:focus-visible .team-nameplate {
  box-shadow:5px 5px 0 var(--coral),9px 9px 0 #080808;
}
@media(hover:hover) and (pointer:fine) {
  .team-portrait-link:hover {
    transform:perspective(1100px) translateY(-6px) rotateX(2deg) rotateY(var(--portrait-axis)) rotateZ(var(--portrait-hover-turn));
  }
  .team-portrait-link:hover .team-nameplate {
    box-shadow:5px 5px 0 var(--coral),9px 9px 0 #080808;
  }
}
@media(max-width:999px) {
  .team-portraits {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:32px clamp(28px,5vw,48px);
    max-width:580px;
    margin-inline:auto;
    padding-inline:10px;
  }
  .team-member:nth-child(3) { padding-top:0; }
  .team-member:nth-child(4) { padding-top:14px; }
  .team-nameplate h3 { font-size:25px; }
}
@media(prefers-reduced-motion:reduce) {
  .team-portrait-link,
  .team-portrait-link:hover,
  .team-portrait-link:focus-visible {
    transform:rotateZ(var(--portrait-turn));
    transition:none;
  }
  .team-nameplate { transition:none; }
}

/* On a phone the printed portraits form a native, thumb-sized swipe deck.
   Every profile remains in the document and available without JavaScript. */
.team-deck-controls { display:none; }
@media(max-width:600px) {
  .team-section .team-heading { margin-bottom:24px; }
  .team-portraits {
    --team-card-width:min(72vw,238px);
    display:flex; align-items:stretch; gap:24px; max-width:none;
    /* Give the final card the same left alignment as every earlier card. */
    margin:0 -20px; padding:8px max(26px,calc(100vw - var(--team-card-width) - 24px)) 18px 24px;
    overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory;
    scroll-padding-inline:24px; scrollbar-width:thin; scrollbar-color:#777 transparent;
    overscroll-behavior-x:contain;
  }
  .team-portraits:focus-visible { outline:2px solid var(--coral); outline-offset:4px; }
  .team-member:nth-child(n) {
    flex:0 0 var(--team-card-width); min-width:0; margin:0; padding:0 5px 4px 0;
    scroll-snap-align:start; scroll-snap-stop:normal;
  }
  .team-portrait-link {
    max-width:none; margin:0;
    transform:perspective(900px) rotateY(var(--mobile-portrait-axis,0deg)) rotateZ(var(--portrait-turn));
    transition:transform .22s ease;
  }
  .team-cutout img { height:210px; }
  .team-nameplate { margin-top:-22px; padding:16px; }
  .team-member:nth-child(4) .team-nameplate { margin-top:-26px; }
  .team-nameplate h3 { font-size:24px; }
  .team-member-bio { margin-top:18px; padding-inline:2px; }
  .team-member.is-current .team-nameplate { box-shadow:4px 4px 0 var(--coral),7px 7px 0 #080808; }
  .team-portrait-link:active { transform:translate(2px,2px) rotateZ(0deg); }
  .team-deck-controls:not([hidden]) {
    display:flex; align-items:center; justify-content:space-between; gap:20px;
    margin-top:16px; min-height:48px;
  }
  .team-deck-name { color:#ddd; font-size:16px; }
  .team-deck-actions { display:flex; gap:12px; padding-right:3px; }
  .team-deck-actions button {
    display:grid; place-items:center; min-width:48px; min-height:44px;
    border:1px solid #b5b5b5; padding:8px 13px; border-radius:0;
    background:var(--paper); color:var(--ink); box-shadow:3px 3px 0 var(--coral);
    font-size:23px; line-height:1; transition:transform .15s,box-shadow .15s;
    touch-action:manipulation;
  }
  .team-deck-actions button:active { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--coral); }
  .team-deck-actions button:disabled { opacity:.35; box-shadow:none; cursor:default; }
}
@media(max-width:600px) and (prefers-reduced-motion:reduce) {
  .team-portrait-link,
  .team-portrait-link:active,
  .team-portrait-link:focus-visible { transform:rotateZ(var(--portrait-turn)); transition:none; }
  .team-deck-actions button { transition:none; }
}