/* =====================================================================
   One person, set like the inside of the folded business card: photo,
   a glass tile overlapping it with name and title, the role beneath the
   tile, and (on /team) a glass "Save contact" button on the photo's
   lower edge, where the card has its QR code, with the email beside it. Shared by /team and the contact pages (/contactjl, …); the
   markup comes from tools/build-contacts.mjs.

   Wide (the block is at least 480px): one composition on a 540-unit
   plane, --u = 1/540 of the block's width, so every overlap sits where
   the card has it at any size. Nothing in it uses a px minimum — text
   that stopped scaling would grow into its neighbours.

   Narrow (below 480px), /team: the same composition, redrawn for a phone
   on a 335-unit plane (--n) so the text stays readable — photo left, tile
   overlapping it, role beside the photo, button on its lower edge, email
   beside the button.
   Narrow, contact pages: the pieces in a grid, photo left, tile
   overlapping it, then the role. The name may wrap here.
   ===================================================================== */
.person{container-type:inline-size;color:#fff}

.person-plane{--u:calc(100cqw / 540);position:relative;height:calc(254 * var(--u))}
.person--solo .person-plane{height:calc(208 * var(--u))}

.person-photo{
  position:absolute;left:0;top:calc(13 * var(--u));
  width:calc(197 * var(--u));height:calc(195 * var(--u));
  border-radius:calc(12 * var(--u));object-fit:cover;
  background:#1c1c1f;
}
.person-tile{
  position:absolute;z-index:1;left:calc(170 * var(--u));right:0;top:0;
  height:calc(98 * var(--u));
  display:flex;flex-direction:column;justify-content:center;
  padding:0 calc(24 * var(--u)) 0 calc(53 * var(--u));
  border-radius:calc(14 * var(--u));
  background:rgba(40,40,44,.62);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 12px 40px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.06);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);
  overflow:hidden;
}
.person-name{
  margin:0;color:#fff;font-size:calc(36 * var(--u));font-weight:700;
  letter-spacing:-.02em;line-height:1.05;white-space:nowrap;
}
.person-title{margin:calc(10 * var(--u)) 0 0;color:rgba(255,255,255,.78);font-size:calc(12.5 * var(--u));line-height:1.3}

.person-role{
  position:absolute;left:calc(223 * var(--u));right:0;top:calc(112 * var(--u));
  margin:0;font-size:calc(14 * var(--u));line-height:1.3;
}
.person-role b{display:block;color:#fff;font-weight:700;white-space:nowrap}
.person-role span{display:block;margin-top:calc(2 * var(--u));color:rgba(255,255,255,.62);white-space:nowrap}

.person-save{
  position:absolute;z-index:1;left:calc(171 * var(--u));top:calc(161 * var(--u));
  width:calc(93 * var(--u));height:calc(93 * var(--u));
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(8 * var(--u));
  border-radius:calc(14 * var(--u));
  background:rgba(40,40,44,.62);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 12px 40px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);
  color:#fff;text-decoration:none;
  transition:background-color .2s ease,border-color .2s ease,transform .2s ease;
}
.person-save svg{
  width:calc(26 * var(--u));height:calc(26 * var(--u));
  fill:none;stroke:#3d8bff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.person-save span{font-size:calc(12 * var(--u));font-weight:700;letter-spacing:.01em;white-space:nowrap}
.person-save:hover{background:rgba(61,139,255,.18);border-color:rgba(61,139,255,.45)}
.person-save:active{transform:scale(.97)}
.person-save:focus-visible{outline:2px solid #3d8bff;outline-offset:3px}
.person-mail{position:absolute;left:calc(285 * var(--u));right:0;top:calc(176 * var(--u));margin:0}
.person-mail a{
  color:#3d8bff;font-size:calc(17 * var(--u));font-weight:700;
  text-decoration:none;white-space:nowrap;
}
.person-mail a:hover{text-decoration:underline}
.person-mail span{display:block;margin-top:calc(3 * var(--u));color:#3d8bff;opacity:.85;font-size:calc(13 * var(--u))}

@container (max-width:479px){
  .person--solo .person-plane{
    height:auto;display:grid;grid-template-columns:42% minmax(0,1fr);align-items:start;
  }
  .person--solo :is(.person-photo,.person-tile,.person-role){position:relative;left:auto;right:auto;top:auto}
  .person--solo .person-photo{grid-column:1;grid-row:1;width:100%;height:auto;aspect-ratio:1;border-radius:14px}
  .person--solo .person-tile{
    grid-column:2;grid-row:1;height:auto;
    margin:14px 0 0 -26px;padding:14px 14px 14px 22px;border-radius:14px;
  }
  .person--solo .person-name{font-size:23px;white-space:normal;line-height:1.08}
  .person--solo .person-title{margin-top:6px;font-size:12px}
  .person--solo .person-role{grid-column:1 / -1;margin-top:20px;font-size:14px}
  .person--solo .person-role b,.person--solo .person-role span{white-space:normal}
}

@container (max-width:479px){
  .person:not(.person--solo) .person-plane{--n:calc(100cqw / 335);height:calc(225 * var(--n))}
  .person:not(.person--solo) .person-photo{
    top:calc(12 * var(--n));width:calc(147 * var(--n));height:calc(147 * var(--n));border-radius:calc(12 * var(--n));
  }
  .person:not(.person--solo) .person-tile{
    left:calc(121 * var(--n));height:calc(67 * var(--n));
    padding:0 calc(12 * var(--n)) 0 calc(26 * var(--n));border-radius:calc(12 * var(--n));
  }
  .person:not(.person--solo) .person-name{font-size:calc(22 * var(--n))}
  .person:not(.person--solo) .person-title{margin-top:calc(5 * var(--n));font-size:calc(11 * var(--n));white-space:nowrap}
  .person:not(.person--solo) .person-role{left:calc(161 * var(--n));top:calc(80 * var(--n));font-size:calc(12 * var(--n))}
  .person:not(.person--solo) .person-role b,
  .person:not(.person--solo) .person-role span{white-space:normal}
  .person:not(.person--solo) .person-save{
    left:calc(117 * var(--n));top:calc(145 * var(--n));
    width:calc(80 * var(--n));height:calc(80 * var(--n));gap:calc(6 * var(--n));border-radius:calc(12 * var(--n));
  }
  .person:not(.person--solo) .person-save svg{width:calc(20 * var(--n));height:calc(20 * var(--n))}
  .person:not(.person--solo) .person-save span{font-size:calc(11.5 * var(--n))}
  .person:not(.person--solo) .person-mail{left:calc(211 * var(--n));top:calc(158 * var(--n))}
  .person:not(.person--solo) .person-mail a{font-size:calc(14 * var(--n));white-space:normal;overflow-wrap:break-word} /* breaks after the @ (<wbr>) */
  .person:not(.person--solo) .person-mail span{display:none} /* the button already says it */
}