/**
 * Board quote (navy).
 *
 * Ported from `.p-board` in `_mockups/team.html`. `.section`, `.sr-only`,
 * `.tag` and `.tag--on-dark` come from the kit.
 *
 * This is a contained card on a light section, not a band, so it cannot use
 * `.dark-band` – that class paints a full-width ground. The gradient, the arc
 * and the on-dark text colours are therefore declared here, all through
 * `--on-dark-*` tokens rather than white and gold literals.
 */

.board-quote__figure {
  max-width: var(--container-narrow);
  margin-inline: auto;
  background: linear-gradient(150deg, var(--navy), var(--blue-deep));
  color: var(--white);
  border-radius: var(--r-card);
  padding: clamp(2.5rem, 5vw, 4.5rem);
  position: relative;
  overflow: hidden;
}

/* The open-quote glyph. Decorative and enormous – the quotation marks that are
   read out live in the text itself, so this one is background, not content. */
.board-quote__figure::before {
  content: "\201C";
  position: absolute;
  top: -0.12em;
  inset-inline-start: 0.12em;
  font-family: var(--display);
  font-weight: 800;
  line-height: 1;
  font-size: clamp(7rem, 14vw, 11rem);
  color: var(--on-dark-arc);
  pointer-events: none;
}

/* The dashed route arc, echoing the logo, as on every other navy surface. */
.board-quote__figure::after {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  border: 1.5px dashed var(--on-dark-arc);
  bottom: -260px;
  inset-inline-end: -160px;
  pointer-events: none;
}

.board-quote__figure > * {
  position: relative;
  z-index: 1;
}

.board-quote__figure blockquote p {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--white);
  text-wrap: balance;
  max-width: 24ch;
  margin-block: var(--s-4) var(--s-5);
}

.board-quote__name {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-style: normal;
  font-size: var(--text-lg);
  color: var(--gold);
}
.board-quote__role {
  display: block;
  font-size: var(--text-s);
  color: var(--on-dark-muted);
  margin-block-start: 0.25em;
}

/* Why there is no portrait. Kept legible rather than whispered – it is the
   affordance that stops anyone "fixing" the gap with a stock face. */
.board-quote__note {
  display: block;
  font-size: var(--text-xs);
  color: var(--on-dark-muted);
  font-style: italic;
  margin-block-start: var(--s-3);
}