/* ==========================================================================
   "What Peers Say" (Contact) — testimonial cards (js/peers.js)
   Same treatment as the About me story: cream paper, white frame, soft
   shadow, Instrument Serif for the words, near-black + warm grey text.
   ========================================================================== */
.contact .pill.peers-open { font: inherit; font-size: var(--pill-f); cursor: pointer; background: transparent; }
.contact .arrow--ne { transform: none; }
.contact .pill:hover .arrow--ne { transform: translate(2px, -2px); }
.contact__note { text-transform: none; }

.peers {
  position: absolute; inset: 0; z-index: 6;
  visibility: hidden; opacity: 0;
  overflow: hidden;
}
.peers__row { position: absolute; inset: 0; }

.peer {
  --ink-story: #161616; --grey-story: #6f6e6a;
  position: absolute; left: 0; top: 0; margin: 0;
  display: flex; flex-direction: column; gap: clamp(18px, 2vw, 28px);
  padding: clamp(20px, 1.8vw, 28px);
  background: #dadad7; color: var(--ink-story);
  border: 0; border-radius: 4px;
  box-shadow: 0 1px 2px rgba(40, 30, 20, .08), 0 18px 40px rgba(40, 30, 20, .2);
  transform-origin: 50% 100%;
  cursor: pointer; outline: none;
  transition: box-shadow .5s var(--ease);
}
.peer.is-up { box-shadow: 0 2px 4px rgba(40, 30, 20, .1), 0 30px 70px rgba(40, 30, 20, .28); }
.peer:focus-visible { box-shadow: 0 0 0 3px #1d1b19, 0 18px 40px rgba(40, 30, 20, .2); }
.peer__quote {
  margin: 0;
  font-family: var(--f-sans); font-size: clamp(16px, 1.15vw, 21px); line-height: 1.32; letter-spacing: -.015em;
}
.peer__quote::before { content: "\201C"; }
.peer__quote::after { content: "\201D"; }
.peer__who { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.peer__photo {
  flex: none; width: 46px; height: 46px; border-radius: 50%; object-fit: cover;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}
.peer__photo--ph {
  display: grid; place-items: center;
  background: repeating-linear-gradient(135deg, #cfcfcb 0 6px, #d6d6d2 6px 12px);
  color: var(--grey-story); font-size: 12px; letter-spacing: .04em;
}
.peer__id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.peer__name { font-weight: 500; font-size: clamp(14px, 1vw, 17px); line-height: 1.2; }
.peer__role { font-family: "JetBrains Mono", ui-monospace, monospace; text-transform: uppercase; letter-spacing: .02em; font-size: 10px !important; color: var(--grey-story); font-size: clamp(12px, .85vw, 15px); line-height: 1.25; }

.peers__close {
  position: absolute; right: var(--gutter); bottom: calc(56vh + 16px); z-index: 60;
  display: inline-flex; align-items: center; gap: .5em;
  height: 36px; padding: 0 14px; border-radius: 999px;
  background: rgba(255, 255, 255, .9); color: #1d1b19; border: 0; cursor: pointer;
  font: inherit; font-size: 14px;
  box-shadow: 0 6px 18px rgba(40, 30, 20, .15);
  visibility: hidden; opacity: 0;
}
.peers__close svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.peers__close:hover { background: #1d1b19; color: #fff; }

/* the cards own the bottom of the screen while open */
body.peers-on .ftr { opacity: 0; pointer-events: none; }

@media (max-width: 760px) {
  .peer { padding: 18px; gap: 16px; }
  .peer__quote { font-size: 16px; }
  .peers__close { bottom: auto; top: calc(var(--gutter) * .75 + var(--btn) + 14px); right: 16px; }
}

/* video testimonials */
.peer__media { position: relative; aspect-ratio: 4 / 5; border-radius: 4px; overflow: hidden; background: #cfcfcb; }
.peer__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.peer__vph {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: repeating-linear-gradient(135deg, #cfcfcb 0 8px, #d6d6d2 8px 16px);
  color: #6f6e6a; font-size: 13px; letter-spacing: .02em;
}
.peer__vph svg { width: 34px; height: 34px; padding: 10px; border-radius: 50%; background: #fff; fill: #1d1b19; box-shadow: 0 4px 12px rgba(40, 30, 20, .15); }
.peer__mute {
  position: absolute; right: 10px; bottom: 10px; width: 36px; height: 36px; border-radius: 50%; border: 0;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(255, 255, 255, .92); color: #1d1b19; box-shadow: 0 4px 12px rgba(40, 30, 20, .18);
  transition: background .3s, color .3s;
}
.peer__mute svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.peer__mute svg path:first-child { fill: currentColor; }
.peer__mute:hover:not(:disabled) { background: #1d1b19; color: #fff; }
.peer__mute:disabled { opacity: .55; cursor: default; }

/* video cards: the video runs edge to edge inside the white frame */
.peer--video { padding: 0; gap: 0; overflow: hidden; }
.peer--video .peer__media { border-radius: 4px 4px 0 0; flex: 1; aspect-ratio: auto; min-height: 0; }
.peer--video .peer__who { padding: 14px 18px 16px; margin-top: 0; }

.contact .pill.peers-open:hover { color: var(--ink); background: transparent; border-color: var(--ink); }