/* ==========================================================================
   /people — "Who's with them". Human and editorial: one real photo with
   everyone in it (tap a person), a cast list, and a magazine spread on
   the founder. Only confirmed facts; no invented quotes or biographies.
   ========================================================================== */

.people-page { background: var(--cream); }

.pp-head { padding-bottom: var(--s6); }
.pp-head__title { margin-top: var(--s4); }
.pp-head__lead { margin-top: var(--s4); max-width: 50ch; }

/* ---- The group photo ---- */
.pp-group__photo { position: relative; margin: 0 auto; width: min(100%, calc((100svh - 150px) * 1080 / 950)); }
.pp-group__photo > img {
  display: block; width: 100%; height: auto; border-radius: var(--r-lg);
  box-shadow: 0 0 0 6px #fff, var(--sh-3);
}
.pp-group__photo figcaption { margin-top: var(--s5); display: grid; gap: 4px; max-width: 60ch; color: var(--text-2); }
.pp-group__photo figcaption time { font: 800 .72rem/1.2 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--red-ink); }

.pp-spot {
  position: absolute; translate: -50% -11px; z-index: 2;
  display: grid; justify-items: center; gap: 4px; padding: 0; border: 0; background: none; cursor: pointer;
  min-width: 44px; min-height: 44px;
}
.pp-spot__dot {
  width: 22px; height: 22px; border-radius: 50%; background: var(--yellow);
  box-shadow: 0 0 0 4px #fff, 0 6px 14px rgba(27, 26, 51, .45);
  animation: pp-pulse 2.4s ease-in-out infinite;
}
.pp-spot:nth-child(3) .pp-spot__dot { animation-delay: -.6s; }
.pp-spot:nth-child(4) .pp-spot__dot { animation-delay: -1.2s; }
.pp-spot:nth-child(5) .pp-spot__dot { animation-delay: -1.8s; }
@keyframes pp-pulse { 50% { box-shadow: 0 0 0 9px rgba(255, 255, 255, .55), 0 6px 14px rgba(27, 26, 51, .45); } }
.pp-spot__name {
  padding: .3em .7em; border-radius: var(--r-pill); background: var(--ink); color: #fff;
  font: 700 .72rem/1 var(--font-body); white-space: nowrap; box-shadow: var(--sh-1);
}
.pp-spot:focus-visible .pp-spot__dot { outline: 3px solid var(--sky-ink); outline-offset: 4px; }
@media (hover: hover) { .pp-spot:hover .pp-spot__dot { background: #fff; } }
/* keep the edge labels inside the photo */
.pp-spot[style*="left:95"] .pp-spot__name, .pp-spot[style*="left:9"] .pp-spot__name { translate: -30% 0; }
.pp-spot[style*="left:6"] .pp-spot__name { translate: 30% 0; }

/* ---- The cast: branded staff cards (studio portrait, like a staff ID) ---- */
.pp-cast {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(72vw, 300px); gap: 16px; margin-top: var(--s7);
  margin-inline: calc(-1 * var(--gutter)); padding: 8px var(--gutter) var(--s5);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none;
}
.pp-cast::-webkit-scrollbar { display: none; }
.pp-cast li { scroll-snap-align: start; }
.pp-card {
  position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; padding: 12px 12px 0;
  border: 0; border-radius: 28px; background: #fff; cursor: pointer; text-align: left; color: var(--ink); overflow: hidden;
  box-shadow: var(--sh-2); transition: translate .45s var(--ease-spring), box-shadow .45s var(--ease-out);
}
/* the person's colour runs along the foot of the card */
.pp-card::after { content: ""; position: absolute; inset: auto 0 0; height: 8px; background: var(--p); }
.pp-card__img { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 20px; overflow: hidden; background: #E6E6EA; }
.pp-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: scale .8s var(--ease-out); }
/* The card header: the brand's 3D logo lockup on its red ground (as in the
   brand kit): raised yellow badge, yellow wordmark with its shadow, white CRÈCHE.
   Sits above the photo, never on a face. */
.pp-card__head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 12px; padding: 10px 14px; border-radius: 18px;
  background: radial-gradient(120% 140% at 30% 20%, #E0301E, #C4291A 60%, #A92214);
}
.pp-card__logo { gap: 10px; }
.pp-card__logo .brand__badge {
  width: 38px; height: 38px; font-size: 1.6rem; padding-bottom: 3px; rotate: 0deg;
  background: radial-gradient(circle at 34% 28%, #FFF1B8, #FFE066 45%, #FFD23F 75%);
  color: #D7261B;
  box-shadow: 0 3px 0 #D8B33A, 0 8px 14px -4px rgba(80, 10, 0, .55);
}
.pp-card__logo .brand__word .a { font-size: 1.22rem; color: #FFDF4F; text-shadow: 0 2px 0 rgba(120, 20, 10, .45); }
.pp-card__logo .brand__word .c { font-size: .56rem; color: #fff; }
.pp-card:hover .pp-card__logo .brand__badge { rotate: 12deg; scale: 1.08; }
.pp-card { container-type: inline-size; }
@container (max-width: 250px) { .pp-card__tag { display: none; } }
.pp-card__tag { white-space: nowrap; font: 800 .62rem/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .88); }
.pp-card__text { display: grid; gap: 4px; padding: 16px 8px 8px; }
.pp-card__text small { font: 800 .72rem/1.3 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--p); }
.pp-card__text b { font-family: var(--font-display); font-weight: 800; font-size: 1.55rem; letter-spacing: -.035em; line-height: 1.05; }
.pp-card__text > span { color: var(--text-2); font-size: .94rem; line-height: 1.45; }
.pp-card__more { display: inline-flex; align-items: center; gap: 8px; margin: auto 8px 22px; padding-top: 10px; font: 700 .92rem/1 var(--font-body); color: var(--p); }
.pp-card__more .i { width: 18px; height: 18px; transition: translate .4s var(--ease-spring); }
.pp-card:focus-visible { outline: 3px solid var(--sky-ink); outline-offset: 3px; }
@media (hover: hover) {
  .pp-card:hover { translate: 0 -6px; box-shadow: var(--sh-3); }
  .pp-card:hover .pp-card__img img { scale: 1.04; }
  .pp-card:hover .pp-card__more .i { translate: 4px 0; }
}
@media (min-width: 900px) {
  .pp-cast { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; margin-inline: 0; padding-inline: 0; }
}
@media (prefers-reduced-motion: reduce) { .pp-card, .pp-card__img img, .pp-card__more .i { transition: none; } }

/* ---- The founder: a magazine spread ---- */
.pp-founder { display: grid; gap: var(--s7); padding-top: var(--s9); }
.pp-founder__kicker { font: 800 var(--fs-label)/1.2 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--red-ink); }
.pp-founder__name { margin-top: 8px; font-size: clamp(2.6rem, 1.6rem + 5vw, 5.5rem); letter-spacing: -.05em; line-height: .95; }
.pp-founder__role { margin-top: 10px; font-size: 1.1rem; color: var(--text-2); }
.pp-facts { margin: var(--s6) 0; display: grid; gap: var(--s4); }
.pp-facts li { display: grid; grid-template-columns: 8.5rem 1fr; gap: 12px; align-items: baseline; padding-top: var(--s4); border-top: 1px solid var(--rule); }
.pp-facts b { font-family: var(--font-display); font-size: 1.35rem; letter-spacing: -.02em; color: var(--red-ink); }
.pp-facts span { color: var(--text-2); }
.pp-founder__photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.pp-founder__photos figure { margin: 0; }
.pp-founder__photos figure:nth-child(2) { margin-top: 48px; }
.pp-founder__photos img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 20px; box-shadow: var(--sh-2); display: block; }
.pp-founder__photos figcaption { margin-top: 8px; font-size: .82rem; line-height: 1.35; color: var(--text-2); display: grid; gap: 2px; }
.pp-founder__photos time { font: 800 .64rem/1.2 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--red-ink); }
@media (max-width: 599px) {
  .pp-founder__photos { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 62vw; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scrollbar-width: none; }
  .pp-founder__photos figure { scroll-snap-align: start; }
  .pp-founder__photos figure:nth-child(2) { margin-top: 0; }
  .pp-spot__name { display: none; }
}
@media (min-width: 1024px) {
  .pp-founder { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(3rem, 6vw, 6rem); align-items: center; }
}
@media (prefers-reduced-motion: reduce) { .pp-spot__dot { animation: none; } }