/* Pull quote — snippets/quote.php, used by the quote block and inside the statement band.
   One style everywhere (review 2026-09-24, G7): Why Co.Si's (Body/LG medium, black, the
   opening mark hanging; "- Name, Role" in grey below), in Home's position, off to the
   right at 481 wide (V0.1). Classes are namespaced .quote* rather than .block--quote so
   the statement band can reuse them. */

.quote { max-width: 100%; }
.quote__text { font-weight: 500; line-height: 1.2; letter-spacing: -0.04em; text-indent: -0.4em; /* the opening mark hangs, as in V0.1 */ }
.quote--center .quote__text { text-indent: 0; }
.quote__by { margin-top: var(--space-24); color: var(--ink-subtle); line-height: 1.3; letter-spacing: -0.04em; }

/* Positions */
.grid > .quote--text { grid-column: text; }
.grid > .quote--right { justify-self: end; width: min(100%, 481px); /* V0.1 */ }
.grid > .quote--center { justify-self: center; width: min(100%, 900px); text-align: center; }

/* Motion (H6), made subtler (Nick, 2026-09-26): the quote fades in as one piece, with no
   per-word stagger and no grey → black. The byline types in while the quote is still
   landing, one character every 12ms, so it's done with the quote (Tucker, 2026-10-21:
   the old 700ms wait + 28ms a character got missed mid-scroll). */
.quote .words--fade .w { transform: none; color: inherit; transition: opacity 800ms var(--ease-out); transition-delay: 0ms; }
.quote__by .c { opacity: 0; transition: opacity 150ms linear; } /* going out: all at once */
.quote__text.is-in + .quote__by .c { opacity: 1; transition: opacity 1ms linear; transition-delay: calc(250ms + var(--c) * 12ms); }
.no-js .quote__by .c { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .quote__by .c { opacity: 1 !important; } }

@media (max-width: 1023px) {
  .grid > .quote--text { grid-column: content; }
}
@media (max-width: 767px) {
  /* Stepped right, the desktop's "off to the right" (mobile experience, 2026-09-30). */
  .grid > .quote--right { width: 86%; }
}