/* ===========================================================
   Teamet: the six members in one compact portrait grid.
   Loaded only on teamet.html, on top of main.css, which gives
   the tokens, .phead, .sec, .lnk and the .rv reveal.
   Same shape lock as the rest of the site: photos keep the 2px
   --edge, links stay as .lnk.
   =========================================================== */

/* the section heading is for screen readers; the h1 already names the page */
.sr-only{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* the whole team on one row on desktop, 3 + 3 on tablet, 2 + 2 + 2 on phone */
.team{
  display:grid;
  grid-template-columns:repeat(6, minmax(0, 1fr));
  gap:clamp(36px, 4vw, 52px) clamp(14px, 1.6vw, 24px);
}

/* --- one member ------------------------------------------- */
.member__fig{
  position:relative; isolation:isolate; overflow:hidden;
  margin:0; border-radius:var(--edge);
  background:var(--bg-soft);
}
/* the Deep Purple wash the founders on Vår historie use */
.member__fig::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:var(--brand); mix-blend-mode:color; opacity:.3;
  transition:opacity .6s var(--ease);
}
.member__fig img{
  width:100%; height:auto; aspect-ratio:4 / 5; object-fit:cover;
  transition:transform 1s var(--ease);
}

/* pointing at a member lifts the wash and eases the photo in */
@media (hover:hover){
  .member:hover .member__fig img{ transform:scale(1.035); }
  .member:hover .member__fig::after{ opacity:0; }
}

.member__name{
  margin-top:16px;
  font-size:clamp(1rem, 1.15vw, 1.1rem);
  letter-spacing:-.025em; line-height:1.25;
}
.member__role{
  margin-top:5px;
  font-weight:600; font-size:.86rem; color:var(--ink);
}
.member__study{
  margin-top:3px;
  font-size:.8rem; line-height:1.5; color:var(--ink-mute);
}
.member__study span{ display:block; }

/* --- closing line under the grid -------------------------- */
.team__note{
  margin-top:clamp(48px, 5vw, 72px); padding-top:24px;
  border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; align-items:baseline;
  justify-content:space-between; gap:16px 40px;
}
.team__note p{ color:var(--ink-body); max-width:60ch; }

@media (max-width:1180px){
  .team{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}

@media (max-width:640px){
  .team{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:36px 14px; }
  .member__name{ margin-top:12px; font-size:.98rem; }
  .member__role{ font-size:.82rem; }
  .member__study{ font-size:.78rem; }
}