/* Pigeon Studios: the mascot. Loaded LAST on the home and Packs pages, after hype.css.
   Our pigeon (the logo bird: plain white line art, never tinted) hosts the site and talks in speech bubbles.
   Markup: <figure class="pg [pg-l] [pg-sm]" aria-hidden="true"><span class="pg-say">…</span><img …></figure>
   Default: bubble on the left, pigeon on the right, beak pointing at the bubble (the art faces left).
   .pg-l: pigeon on the left (mirrored so it still faces its bubble).
   hx.js shrinks each bubble to its longest line (text-wrap: balance alone leaves an empty strip on the right).
   Decorative only: aria-hidden, and nothing it says is the only place a fact appears. Motion off with reduced motion. */
.pg { --pg-w: 92px; --f: 1; --pg-bg: #121318; position: relative; display: inline-flex; align-items: flex-end; gap: 4px; margin: 0;
  pointer-events: none; z-index: 3; }
.pg img { flex: none; display: block; width: var(--pg-w); height: auto; transform-origin: 50% 100%;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.6)); transform: scaleX(var(--f)); animation: pg-bob 4.8s ease-in-out infinite; }
.pg-l { flex-direction: row-reverse; --f: -1; }
.pg-sm { --pg-w: 84px; }
@keyframes pg-bob {
  0%, 100% { transform: scaleX(var(--f)) translateY(0) rotate(0deg); }
  30% { transform: scaleX(var(--f)) translateY(-3px) rotate(-3deg); }
  55% { transform: scaleX(var(--f)) translateY(0) rotate(1.5deg); }
  70% { transform: scaleX(var(--f)) translateY(-1px) rotate(-1deg); }
}

/* the bubble: drawn in the same thick white line as the pigeon */
.pg-say { position: relative; display: block; box-sizing: border-box; flex: 0 1 auto; min-width: 0; align-self: flex-start;
  width: max-content; max-width: min(240px, 100%); margin-bottom: calc(var(--pg-w) * 0.55); padding: 9px 14px 10px;
  border: 2.5px solid #fff; border-radius: 16px; background: var(--pg-bg); color: #fff;
  font: 400 1.0625rem/1.25 var(--hand, var(--sans)); letter-spacing: 0.01em; word-spacing: 0.04em; text-align: left;
  white-space: normal; overflow-wrap: break-word; text-wrap: balance; -webkit-font-smoothing: antialiased;
  box-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.8); }
.pg-say:empty { display: none; }
/* tail: one drawn shape (two white legs, dark fill) that covers the bubble's bottom line between its legs,
   so it joins the bubble cleanly. Points down-right at the pigeon; mirrored for .pg-l. */
.pg-say::after { content: ""; position: absolute; top: 100%; right: 16px; width: 18px; height: 13px; margin-top: 0;
  background: no-repeat center / 100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 13'%3E%3Cpath d='M1.5 -1 L16.5 11.5 L11 -1' fill='%23121318' stroke='%23fff' stroke-width='2.5' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E"); }
.pg-l .pg-say::after { right: auto; left: 16px; transform: scaleX(-1); }

/* ---------- placements ---------- */

/* section heads: the pigeon sits at the right end of the heading row */
.sec-head.has-pg { position: relative; max-width: none; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 24px; }
.sec-head.has-pg > .sh-text { max-width: 680px; }
.sec-head.has-pg > .pg { max-width: 100%; }
/* contact: the pigeon introduces the panel */
.contact-panel .pg { display: flex; width: max-content; max-width: 100%; margin: 0 0 10px -6px; }
.contact-watermark { display: none; }

/* packs page hero: top left of the stage, bubble ABOVE the pigeon so it never covers the cards */
.hx-pk-wrap .pg { position: absolute; left: -8px; top: -34px; flex-direction: column; align-items: flex-start; gap: 6px; --pg-w: 76px; }
.hx-pk-wrap .pg .pg-say { margin: 0; max-width: 260px; }
/* tail drops from the bubble's lower left onto the (mirrored) pigeon's head */
.hx-pk-wrap .pg-l .pg-say::after { left: 40px; transform: none; }
.hx-pk-wrap .pg img { margin-left: 2px; }

@media (max-width: 900px) {
  .hx-pk-wrap .pg { display: none; }
}
@media (max-width: 640px) {
  .pg-say { max-width: min(210px, 100%); font-size: 1rem; padding: 8px 12px 9px; }
  .sec-head.has-pg .pg { --pg-w: 60px; }
}
@media (prefers-reduced-motion: reduce) { .pg img { animation: none; } }