/* Testimonials (T16): one quote on the white page ground. Tokens only; mobile first.
   Prototype ("In their words"): label 14 px bold in blue, quote 28–44 px light, 1000 px measure,
   a hairline, then the name and role at 15 px in slate.
   Section theme: the accent (label, quotation mark, rule) follows the page's theme from
   body[data-section-theme] (T11). Every accent is a dark blue that passes 4.5:1 on white. */

.testimonial {
  --testimonial-accent: var(--c-mid-blue);   /* Master, Presentation, Display */
}
[data-section-theme="acoustic"] .testimonial,
[data-section-theme="custom"] .testimonial {
  --testimonial-accent: var(--c-dark-blue);
}

.testimonial__label {
  margin: 0 0 var(--space-6);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
  color: var(--testimonial-accent);
}

.testimonial__figure {
  margin: 0;
  max-width: 1000px;
}

.testimonial__quote {
  margin: 0;
  padding: 0;
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: var(--fw-light);
  line-height: var(--lh-heading);
  letter-spacing: -0.018em;
  color: var(--color-heading);
  overflow-wrap: break-word;
}
.testimonial__quote p {
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}
.testimonial__quote p:last-child { margin-bottom: 0; }

/* Typographic quotation marks around the whole quote; the opening one hangs in the accent colour. */
.testimonial__first::before {
  content: "\201C";
  color: var(--testimonial-accent);
}
.testimonial__last::after { content: "\201D"; }

.testimonial__by {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: var(--border-width) solid var(--color-hairline);
  font-size: var(--fs-body);
  line-height: var(--lh-body-tight);
  color: var(--color-text);
  overflow-wrap: break-word;
}
.testimonial__name { color: var(--color-heading); }

@media (min-width: 1024px) {
  .testimonial__first::before {
    margin-left: -0.42em;   /* hanging punctuation: the text edge lines up with the label */
  }
}