@layer blocks {
  /* The landing's voices: a hand-drawn quote mark hanging in the left margin,
     attribution in the same hand. */
  .testimonial {
    position: relative;
    max-inline-size: var(--column-narrow);
    padding-inline-start: var(--space-l); /* spec 42px */
    font-size: var(--text-base);
  }

  .testimonial blockquote::before {
    content: "\201C";
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    font-family: var(--font-hand);
    font-size: var(--text-3xl);
    font-weight: var(--weight-bold);
    line-height: var(--leading-none);
    color: var(--color-decorative);
    rotate: -4deg;
  }

  /* Quote and attribution run as one line, the way a remark is written out,
     rather than stacking into a block quotation with a byline under it. */
  .testimonial blockquote,
  .testimonial cite {
    display: inline;
  }

  .testimonial cite {
    font-size: var(--text-md);
  }

  .testimonial cite::before {
    content: " - ";
  }
}