/* ================= ALL THE FRIENDS ================= */
.gang-grid { padding: var(--s7) 0 var(--s8); }
.friends { list-style: none; display: grid; gap: var(--s7) var(--s5); grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: var(--s6); }
@media (min-width: 700px) { .friends { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1050px) { .friends { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.pal {
  --tone: var(--lake);
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  height: 100%; padding: 0 var(--s3) var(--s4); text-decoration: none;
  background: var(--tone); border: var(--ink); border-radius: var(--r-tile); box-shadow: var(--lift);
  transition: transform var(--t-med) var(--ease-pop), box-shadow var(--t-med) var(--ease-pop);
}
.pal--sun { --tone: var(--sun); } .pal--fox { --tone: var(--fox); } .pal--tie { --tone: #ff8fa3; }
.pal--meadow { --tone: var(--meadow); } .pal--navy { --tone: #8fb8ff; }
.pal__art { display: block; height: 200px; margin-top: -48px; }
.pal__art img { height: 100%; width: auto; transform-origin: 50% 100%; transition: transform var(--t-med) var(--ease-pop); filter: drop-shadow(0 4px 0 rgba(24,33,88,.25)); }
.pal:hover { transform: translateY(-6px); box-shadow: var(--lift-hover); }
.pal:hover .pal__art img { transform: rotate(-5deg) scale(1.04); }
.pal:active { transform: translateY(3px); box-shadow: var(--lift-press); }
.pal__name {
  margin-top: var(--s2); padding: 0.35rem 1rem; background: var(--snow); border: 2px solid var(--navy); border-radius: var(--r-pill);
  font-family: var(--font-display); font-size: 1.35rem; line-height: 1;
}
.pal__role { margin-top: var(--s2); font-weight: 700; font-size: .95rem; line-height: 1.25; }

/* ================= ONE FRIEND ================= */
.friend-hero {
  --tone: var(--lake);
  position: relative; overflow: hidden; background: var(--tone);
  padding-top: var(--header-space); border-bottom: var(--ink);
}
.friend-hero--sun { --tone: var(--sun); } .friend-hero--fox { --tone: var(--fox); } .friend-hero--tie { --tone: #ff8fa3; }
.friend-hero--meadow { --tone: var(--meadow); } .friend-hero--navy { --tone: #8fb8ff; }
.friend-hero::after {
  content: ""; position: absolute; left: -10%; right: -10%; bottom: -1px; height: 70px;
  background: var(--meadow); border-top: var(--ink); border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.friend-hero--meadow::after { background: #1f9e55; }
.friend-hero__inner { position: relative; z-index: 1; display: grid; gap: var(--s5); align-items: end; padding: var(--s5) 0 var(--s6); }
@media (min-width: 900px) { .friend-hero__inner { grid-template-columns: 1fr 1.3fr; align-items: center; padding-bottom: var(--s8); } }
.friend-hero__art { position: relative; display: flex; justify-content: center; }
.friend-hero__art img { height: 280px; width: auto; filter: drop-shadow(0 8px 0 rgba(24,33,88,.3)); animation: wave-in 700ms var(--ease-pop) both; transform-origin: 50% 100%; }
@media (min-width: 900px) { .friend-hero__art img { height: 470px; } }
@keyframes wave-in { from { opacity: 0; transform: translateY(30%) scale(.85) rotate(-6deg); } to { opacity: 1; transform: none; } }
.bubble {
  position: absolute; top: 4%; right: 0; max-width: 220px; margin: 0;
  padding: var(--s3) var(--s4); background: var(--snow); border: var(--ink); border-radius: 26px;
  font-family: var(--font-display); font-size: 1.25rem; line-height: 1.15; box-shadow: 0 4px 0 var(--navy);
  transform: rotate(3deg);
}
.bubble::after {
  content: ""; position: absolute; left: 26px; bottom: -16px; width: 26px; height: 26px; background: var(--snow);
  border-right: var(--ink); border-bottom: var(--ink); transform: rotate(45deg);
}
@media (max-width: 899px) {
  /* Phones and tablets: the speech bubble sits above the friend, never over their face. */
  .friend-hero__art { flex-direction: column; align-items: center; gap: var(--s4); }
  .friend-hero__art .bubble { order: -1; position: relative; top: auto; right: auto; max-width: min(300px, 90%); text-align: center; transform: rotate(-2deg); }
  .friend-hero__art .bubble::after { left: 50%; margin-left: -13px; }
  .friend-hero__art img { height: 260px; }
}
.friend-hero__card {
  padding: var(--s5); background: var(--snow); border: var(--ink); border-radius: var(--r-tile); box-shadow: var(--lift);
}
.friend-hero__card h1 { font-size: clamp(2.6rem, 1.6rem + 4vw, 4.4rem); line-height: .95; margin-bottom: var(--s2); }
.friend-role { font-family: var(--font-display); font-size: 1.4rem; color: var(--tie-dark); }
.friend-role span { font-family: var(--font-body); font-weight: 700; font-size: 1rem; color: var(--navy-2); }
.friend-about { font-size: var(--text-lg); }
.facts { display: grid; gap: var(--s3); margin: var(--s4) 0 0; }
@media (min-width: 600px) { .facts { grid-template-columns: 1fr 1fr; } }
.fact { padding: var(--s4); border: 2px solid var(--navy); border-radius: 18px; }
.fact--sun { background: #fff3c4; } .fact--meadow { background: #e3f8ec; }
.fact dt { font-family: var(--font-display); font-size: 1.2rem; margin-bottom: var(--s1); }
.fact dd { margin: 0; }

.friend-stories { padding: var(--s8) 0 0; }
.friend-others { padding: var(--s8) 0; }

/* friend strip (shared look with the homepage) */
.gang__row {
  list-style: none; display: flex; gap: var(--s3); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: var(--s5) max(var(--gutter), (100% - var(--max)) / 2);
}
.gang__row::-webkit-scrollbar { display: none; }
.gang__row li { scroll-snap-align: start; flex: none; }
.friend { display: flex; flex-direction: column; align-items: center; gap: var(--s2); width: 130px; text-decoration: none; }
.friend img { height: 190px; width: auto; transform-origin: 50% 100%; transition: transform var(--t-med) var(--ease-pop); }
.friend:hover img, .friend:focus-visible img { transform: translateY(-10px) rotate(-3deg); }
.friend__name {
  font-family: var(--font-display); font-size: 1.2rem; line-height: 1; padding: 0.4rem 0.9rem;
  background: var(--snow); border: var(--ink); border-radius: var(--r-pill); box-shadow: 0 4px 0 var(--navy);
}