/*
Block Treatment-05 "the pull quote". Every value comes from tokens.css, spec:
docs/blocks/treatment-05-quote.md.

Nothing is drawn here that the site does not already have: it is the shared two-tone heading at
its own size, centred, with the quotation marks added by this file.
*/

.treatment-quote {
  padding-block: var(--treatment-quote-top) var(--treatment-quote-bottom);
}

/*
The band is 1278 inside the 1440 column, i.e. inset by the same 81 the cards of About-02 and
Treatment-02 pad by. Stated as a maximum so it gives way rather than setting the page's width.
*/
.treatment-quote__inner {
  width: min(var(--treatment-quote-w), 100% - var(--page-inset) * 2);
  margin-inline: auto;
}


/*
margin: 0 because <blockquote> carries an em of it from the user agent, and the distance above and
below this block is the section's.
*/
.treatment-quote__body {
  margin: 0;
}

/*
The tones run on rather than taking a line each: the design breaks the sentence inside the accent
half, which a block segment cannot do. Same knob and same reason as Treatment-02; see
two-tone-heading.css.

Regular rather than the bold the other headings carry — the dark half still reads heavier, because
weight is part of what a tone means in this component, and that stays the component's decision.
*/
.treatment-quote__text {
  margin: 0;
  text-align: center;

  --heading-segment-display: inline;

  --heading-fs: var(--fs-treatment-quote);
  --heading-ls: var(--ls-treatment-quote);
  --heading-lh: var(--lh-treatment-quote);
}

/*
A word is a box so that it can arrive on its own.

inline-block and not inline: the Reveal component moves an item with `translate`, and translate has
no effect on an inline box. Words still wrap between themselves, and the line stays centred.

The instance tunes the component rather than restating it. The default stagger is 90ms, which over
a dozen words is more than a second of queueing — long enough that the last word lands after the
eye has finished reading the first line. At 40 the sentence assembles in about half a second and
still reads as one word after another. The travel is shorter than the component's own for the same
reason a word is not a paragraph: 24px under a 76px line is a lurch, 10 is a settle.
*/
.treatment-quote__word {
  display: inline-block;

  --reveal-step: var(--treatment-quote-word-step);
  --reveal-shift: var(--treatment-quote-word-shift);
  --reveal-dur: var(--treatment-quote-word-dur);
}