/* /staff, the team page (7.7.0). Every member speaks the way the game's NPCs do: their portrait in the game's gold plate
   on the edge of a dialogue box (a small stone window), the name on the box's nameplate riding its top edge, the role in
   the game's blue label and the bio as the line they say. Categories are stone nameplates between gold filigree.
   The page's HTML is built on the server (site/staff_page.js); staff.js only types the lines in as they scroll into view. */

.staff > .crumbs + * { margin-top: 18px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font: 800 14px/1.3 var(--body); color: var(--muted); }
.crumbs a { color: var(--label); text-decoration: none; text-shadow: var(--outline-sm); }
.crumbs a:hover { color: var(--rim-hi); }
.crumbs [aria-current] { color: var(--cream-dim); }

/* ------------------------------------------------------------------ the head */
.staff-head { display: grid; justify-items: center; text-align: center; }
.staff-head h1 .logo-word { display: block; }
.staff-nobreak { white-space: nowrap; }
.staff-intro { display: grid; gap: 10px; justify-items: center; margin-top: 18px; }
.staff-intro .lede { margin: 0; text-wrap: pretty; }
.staff-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; margin-top: 28px; }
.staff-jump .pill { gap: 9px; padding-right: 7px; }
.staff-jump-n {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  padding: 0 6px 1px;
  font: 700 14px/1 var(--display);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--rim-hi);
  background: var(--inset-2);
  border-radius: 999px;
  box-shadow: 0 0 0 1.5px var(--keyline), inset 0 2px 3px rgba(0, 0, 0, .6);
}

/* ------------------------------------------------------------------ a category: a stone nameplate between filigree */
.staff-cat { scroll-margin-top: 110px; }
.staff-plate { display: grid; justify-items: center; gap: 10px; text-align: center; }
.staff-plate h2 {
  position: relative;
  max-width: calc(100% - 300px);
  padding: 3px 22px 7px;
  overflow-wrap: anywhere;
  background: linear-gradient(180deg, #5e6072, var(--stone) 55%, var(--stone-lo));
  border-radius: 12px;
  box-shadow: 0 0 0 2px var(--keyline), inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -2px 0 rgba(0, 0, 0, .25), 0 6px 8px -2px rgba(0, 0, 0, .6);
}
.staff-plate h2::before, .staff-plate h2::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 132px;
  height: 18px;
  margin-top: -9px;
  background: url("/images/game/ui/filigree.webp") left center / contain no-repeat;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .5));
  pointer-events: none;
}
.staff-plate h2::after { left: calc(100% + 14px); }
.staff-plate h2::before { right: calc(100% + 14px); transform: scaleX(-1); }
.staff-plate-count { font: 900 14px/1.2 var(--body); color: var(--label); text-shadow: var(--outline-sm); }
.staff-cat-note { max-width: 62ch; margin: 10px auto 0; text-align: center; color: var(--cream-dim); text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.staff-cat-empty { margin: 22px 0 0; text-align: center; color: var(--muted); }

/* ------------------------------------------------------------------ the people: NPC dialogue boxes */
.staff-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 54px 40px;
  margin: 46px 0 0;
  padding: 0;
  list-style: none;
}
.npc { --pic: 120px; --edge: 14px; min-width: 0; scroll-margin-top: 120px; }
.npc-card { position: relative; display: grid; grid-template-columns: var(--pic) minmax(0, 1fr); align-items: start; height: 100%; }

/* the portrait in the game's gold plate, overlapping the box's left edge */
.npc-portrait {
  position: relative;
  z-index: 2;
  width: var(--pic);
  aspect-ratio: 1;
  margin-top: -12px;
  background: url("/images/game/ui/plate-gold.webp") center / contain no-repeat;
  filter: drop-shadow(0 7px 6px rgba(0, 0, 0, .6));
  transition: transform .35s var(--ease-out);
}
.npc-portrait img { position: absolute; inset: 10%; width: 80%; height: 80%; border-radius: 50%; object-fit: cover; background: var(--inset-2); }
.npc-portrait::after {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--keyline), inset 0 -10px 14px -6px rgba(0, 0, 0, .55), inset 0 6px 8px -6px rgba(255, 255, 255, .25);
  pointer-events: none;
}
/* no picture: the site's hooded silhouette on the plate's slate */
.npc-portrait-empty::before {
  content: "";
  position: absolute;
  inset: 24% 22% 12%;
  background: var(--stone-hi);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 3c-6.6 0-11 5-11 11.4 0 3.9 1.6 7.2 4.2 9.2C7.4 25.4 3 29.7 2 36.5V40h36v-3.5c-1-6.8-5.4-11.1-11.2-12.9 2.6-2 4.2-5.3 4.2-9.2C31 8 26.6 3 20 3Z'/%3E%3C/svg%3E") center bottom / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 3c-6.6 0-11 5-11 11.4 0 3.9 1.6 7.2 4.2 9.2C7.4 25.4 3 29.7 2 36.5V40h36v-3.5c-1-6.8-5.4-11.1-11.2-12.9 2.6-2 4.2-5.3 4.2-9.2C31 8 26.6 3 20 3Z'/%3E%3C/svg%3E") center bottom / contain no-repeat;
}
.npc-card:hover .npc-portrait { transform: translateY(-3px) rotate(-4deg); }

/* the dialogue box: a small window in the game's stone frame */
.npc-box {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  min-height: calc(var(--pic) + 10px);
  height: 100%;
  margin-left: calc(var(--pic) * -.36);
  padding: 22px 22px 20px calc(var(--pic) * .36 + 16px);
  color: var(--cream);
  background: linear-gradient(180deg, #292a30 0, var(--inset) 46px) padding-box;
  border: var(--edge) solid transparent;
  border-image: var(--frame) 96 / var(--edge) / 0 round;
  filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .55));
}
/* the name rides the box's top edge on a stone nameplate; the role is the blue label under it */
.npc-head { display: grid; justify-items: start; gap: 8px; margin-top: calc(-22px - var(--edge) / 2 - 18px); }
.npc-name {
  max-width: 100%;
  padding: 3px 14px 6px;
  font: 700 clamp(21px, 2vw, 25px)/1.12 var(--display);
  text-shadow: var(--outline);
  overflow-wrap: anywhere;
  background: linear-gradient(180deg, #5e6072, var(--stone) 55%, var(--stone-lo));
  border-radius: 10px;
  box-shadow: 0 0 0 2px var(--keyline), inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -2px 0 rgba(0, 0, 0, .25), 0 5px 6px -2px rgba(0, 0, 0, .55);
  transition: box-shadow .2s ease;
}
.npc-role { margin: 0; font: 900 14px/1.25 var(--body); color: var(--label); text-shadow: var(--outline-sm); }
/* the line the member says */
.npc-line { display: grid; gap: 8px; }
.npc-say { margin: 0; max-width: 62ch; font: 700 16.5px/1.6 var(--body); color: var(--cream-dim); text-shadow: 0 1px 2px rgba(0, 0, 0, .65); overflow-wrap: anywhere; }
/* no bio: the box closes under the role instead of leaving an empty face */
.npc-box-short { min-height: 0; height: auto; padding-bottom: 16px; }

/* the Discord name: a small game pill at the box's lower right */
.npc-discord {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  min-height: 32px;
  margin-top: auto;
  padding: 0 13px 1px 10px;
  font: 800 14px/1 var(--body);
  color: var(--cream);
  text-decoration: none;
  text-shadow: var(--outline-sm);
  background: linear-gradient(180deg, #555665, #33343e 70%, #2b2c35);
  border: 2px solid var(--rim);
  border-radius: 999px;
  box-shadow: 0 0 0 1.5px var(--keyline), inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -2px 0 rgba(0, 0, 0, .25), 0 3px 4px rgba(0, 0, 0, .45);
  transition: border-color .16s ease, background .16s ease, transform .16s var(--ease-out);
}
.npc-discord span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.npc-discord svg { flex: none; width: 17px; height: 17px; filter: drop-shadow(1px 0 0 var(--keyline)) drop-shadow(-1px 0 0 var(--keyline)) drop-shadow(0 1px 0 var(--keyline)) drop-shadow(0 -1px 0 var(--keyline)); }
.npc-discord:hover { color: var(--cream); border-color: var(--rim-hi); background: linear-gradient(180deg, #646577, #3c3d48 70%, #32333d); transform: translateY(-1px); }
.npc-discord:active { transform: translateY(1px); box-shadow: 0 0 0 1.5px var(--keyline), inset 0 2px 4px rgba(0, 0, 0, .45); }

/* a link to one member (/staff#name): the game's selected frame is blue */
.npc:target .npc-name { box-shadow: 0 0 0 2px var(--keyline), 0 0 0 5px var(--select), inset 0 1px 0 rgba(255, 255, 255, .25), 0 5px 6px -2px rgba(0, 0, 0, .55); }

/* the line types in once as the box scrolls into view (staff.js) */
.npc-typing .w { opacity: 0; }
.npc-play .w { animation: npc-word .34s var(--ease-out) forwards; animation-delay: calc(var(--i) * 24ms); }
@keyframes npc-word {
  from { opacity: 0; filter: blur(3px); transform: translateY(3px); }
  to { opacity: 1; filter: none; transform: none; }
}
.npc-line .w { display: inline-block; white-space: pre-wrap; }

/* ------------------------------------------------------------------ the close */
.staff-close { text-align: left; }
.staff-close > p:not(.staff-updated) { max-width: 64ch; margin: 0 0 20px; color: var(--cream-dim); }
.staff-updated { margin: 20px 0 0; font: 800 14px/1.3 var(--body); color: var(--muted); }

/* ------------------------------------------------------------------ smaller screens */
@media (max-width: 1100px) {
  .npc { --pic: 104px; }
}
@media (max-width: 820px) {
  .staff-list { grid-template-columns: minmax(0, 1fr); gap: 50px; max-width: 640px; margin-inline: auto; }
}
@media (max-width: 640px) {
  .staff-plate h2 { max-width: 100%; }
  .staff-plate h2::before, .staff-plate h2::after { display: none; }
  .staff-plate::before {
    content: "";
    width: 132px;
    height: 18px;
    margin-bottom: -2px;
    background: url("/images/game/ui/filigree.webp") left center / contain no-repeat;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .5));
  }
}
/* phones: the box takes the whole width; the portrait sits on its top-left corner beside the nameplate */
@media (max-width: 520px) {
  .staff > .crumbs + * { margin-top: 10px; }
  .staff-head h1 { font-size: clamp(30px, 8.6vw, 36px); }
  .staff-intro { margin-top: 12px; }
  .staff-intro .lede { font-size: 16px; line-height: 1.5; }
  /* the jump pills stay all on screen, smaller */
  .staff-jump { gap: 8px; margin-top: 16px; }
  .staff-jump .pill { min-height: 34px; padding-left: 12px; font-size: 14px; }
  .staff-jump-n { min-width: 22px; height: 22px; font-size: 13px; }
  .page.staff > .staff-cat:first-of-type { margin-top: 30px; }
  .staff-plate { gap: 6px; }
  .staff-plate::before { display: none; }
  .staff-plate h2 { font-size: 26px; padding: 2px 18px 5px; }
  .staff-cat-note { margin-top: 6px; font-size: 15px; }
  .staff-list { gap: 58px; margin-top: 46px; }
  .npc { --pic: 84px; --edge: 12px; }
  .npc-card { display: block; }
  .npc-portrait { position: absolute; left: -6px; top: -30px; margin: 0; }
  .npc-box { margin-left: 0; min-height: 0; padding: 18px 16px 16px; }
  .npc-head { min-height: 52px; margin-top: calc(-18px - var(--edge) / 2 - 18px); padding-left: calc(var(--pic) - 2px); }
  .npc-say { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .npc-portrait, .npc-discord, .npc-name { transition: none; }
  .npc-card:hover .npc-portrait { transform: none; }
  .npc-typing .w { opacity: 1; }
  .npc-play .w { animation: none; }
}