/* uilib's own stylesheet: the block library, described as structure.
 *
 * No literal colour and no font name appears below this comment. Every value
 * painted here is read from the `--uilib-*` custom properties that
 * `static/css/theme.css` defines, each with a `var()` fallback: a structural
 * fallback is an ordinary length, a colour fallback is `currentColor`,
 * `transparent` or `inherit`. That is the seam — swap the one theme `<link>`
 * in the page shell and the whole site changes appearance without a rule
 * here moving. If it doesn't, something below has drifted off the contract.
 *
 * The vocabulary this file styles is exactly the set of classes the
 * templates under `uilib/templates/uilib/` write, and nothing else.
 *
 * Two shapes recur, and they are the design rather than decoration:
 *
 *   The spec plate — a label/value row, the label in the display face in
 *   caps in the accent, the value in ordinary copy, ruled off from the row
 *   below it. It is what a band's `specs` renders as, what a `list_group`
 *   renders as, and what the shell's form labels and footer contact row
 *   echo. A site that states facts should look like it states facts.
 *
 *   The chamfer — one cut corner, top-right, on anything that reads as a
 *   plate: a card, an icon cell, a testimonial. A cut, not a curve, and the
 *   only ornament here. Its size is `--uilib-chamfer`, so a theme that sets
 *   it to `0px` gets square plates and nothing breaks.
 */

/* --------------------------------------------------------------------------
 * Shared vocabulary
 * ----------------------------------------------------------------------- */

/* A Section block is full-bleed: it owns its own background and its own
 * vertical rhythm and supplies its own container. It never constrains its
 * own width — that is the job of whatever measure or grid its content
 * wants. */
.section {
  padding-block: var(--uilib-rhythm, 4rem);
  padding-inline: var(--uilib-gutter, 1rem);
  background-color: var(--uilib-paper, transparent);
  color: var(--uilib-ink, inherit);
}

/* The sanctioned bridge from the full-bleed stream into the measured prose
 * stream: a section carrying nothing but a column of body copy. It reads as
 * a lighter transition than a marketing band, so it takes less rhythm. */
.section--prose {
  padding-block: calc(var(--uilib-rhythm, 4rem) * 0.6);
}

.section__measure {
  max-width: var(--uilib-measure, 60ch);
  margin-inline: auto;
}

/* The wide container every non-prose section lays its content in. Wider than
 * the reading measure, because a grid of cards is not a paragraph. */
.section__frame,
.band__measure,
.card-grid,
.icon-grid,
.gallery,
.list-groups,
.process-steps,
.testimonials,
.profile,
.feature-essay,
.notice,
.statement-band {
  max-width: 68rem;
  margin-inline: auto;
}

/* The eyebrow — the small label above a heading, and the site's most
 * repeated mark. The leading rule is the one flourish it carries: it turns a
 * caps label into something that looks placed rather than typed.
 *
 * Reads `--uilib-highlight`, not `--uilib-accent`. The two are different
 * jobs: the accent is what a visitor can *act on* — a button, a link, the
 * edge of a plate — and the highlight is what the site *labels itself with*.
 * Pointing both at one token is what made an earlier pass of this design
 * read as a single colour: every coloured thing on the page was the same
 * colour, so there was nowhere for a second hue to live. */
.eyebrow {
  display: block;
  margin: 0 0 1rem;
  font-family: var(--uilib-font-display, sans-serif);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--uilib-highlight, currentColor);
}

.eyebrow::before {
  content: "";
  display: inline-block;
  width: 1.75rem;
  height: 0;
  vertical-align: 0.28em;
  margin-inline-end: 0.7rem;
  border-block-start: 2px solid currentColor;
}

/* Every section heading, in one place. The display face, set tight and
 * large, balanced so a two-line heading does not strand a word. */
.band__heading,
.card-grid__heading,
.icon-grid__heading,
.gallery__heading,
.list-groups__heading,
.process-steps__heading,
.testimonials__heading,
.profile__heading,
.feature-essay__heading,
.notice__heading {
  margin: 0;
  font-family: var(--uilib-font-display, sans-serif);
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.06;
  text-wrap: balance;
  color: inherit;
}

/* Body copy inside a section: the reading measure, whatever the section's
 * own container is. */
.band__body,
.notice__body,
.profile__lead,
.profile__body,
.feature-essay__intro,
.feature-essay__body {
  max-width: var(--uilib-measure, 60ch);
}

.band__body > :first-child,
.notice__body > :first-child,
.profile__lead > :first-child,
.profile__body > :first-child,
.feature-essay__body > :first-child {
  margin-block-start: 0;
}

.band__body > :last-child,
.notice__body > :last-child,
.profile__lead > :last-child,
.profile__body > :last-child,
.feature-essay__body > :last-child {
  margin-block-end: 0;
}

/* A link inside a run of body copy. Underlined — an underline is the
 * affordance, and colour alone is not one. */
.band__body a,
.notice__body a,
.profile__lead a,
.profile__body a,
.feature-essay__intro a,
.feature-essay__body a,
.paragraph a {
  color: var(--uilib-accent, currentColor);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

/* --------------------------------------------------------------------------
 * Button
 * ----------------------------------------------------------------------- */

/* The one control the library renders. Filled in the accent, cut square but
 * for the small radius that says pressable, and inverted on hover so the
 * change is structural rather than a shade of the same colour. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--uilib-font-display, sans-serif);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.8rem 1.6rem;
  border-radius: var(--uilib-radius, 2px);
  border: 1px solid var(--uilib-accent, currentColor);
  background-color: var(--uilib-accent, transparent);
  color: var(--uilib-accent-ink, currentColor);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.btn:hover {
  background-color: transparent;
  color: var(--uilib-accent, currentColor);
}

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
}

/* Focus visibility. Keyed on the interactive elements themselves rather than
 * on this library's class names: the claim is "every interactive element,"
 * and a class-keyed selector would drift the moment a block wraps its link
 * in another element. `:focus-visible`, not `:focus`, so a mouse click does
 * not ring anything — that pressure is what produces `outline: none` in the
 * first place. The colour reads the contract with a `currentColor` fallback,
 * so a half-themed site still shows a ring rather than a transparent one. */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--uilib-focus, currentColor);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
 * Band family
 * ----------------------------------------------------------------------- */

.band {
  text-align: left;
}

.band__measure {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}

/* The one place the three blocks `BandBlock` replaced still differ: which of
 * the contract's grounds the band reads. `spotlight` is the quiet default,
 * `callout` lifts onto the surface pair to read as a distinct band, and `cta`
 * drops to the deepest plate and takes an accent edge.
 *
 * `cta` used to fill itself with `--uilib-accent` outright, on the argument
 * that being the loudest thing on the page was its whole job. That was the
 * wrong reading of "loudest": a full-bleed slab of the accent puts the two
 * brand colours on the page in roughly equal measure, and two colours in
 * equal measure read as a *kit* — a uniform — rather than as a palette. The
 * band is now the darkest thing on the page instead of the brightest, which
 * is just as strong a break before the footer, and the accent stays what it
 * is everywhere else on the site: an edge, a label, a control. */
.band--spotlight {
  background-color: var(--uilib-paper, transparent);
  color: var(--uilib-ink, inherit);
}

.band--callout {
  background-color: var(--uilib-surface, transparent);
  color: var(--uilib-surface-ink, inherit);
}

.band--cta {
  background-color: var(--uilib-shade, transparent);
  color: var(--uilib-shade-ink, inherit);
  border-block-start: 3px solid var(--uilib-accent, currentColor);
}

.band--cta .band__heading {
  font-size: clamp(2rem, 1.3rem + 3vw, 3.5rem);
}

.band__body {
  font-size: 1.0625em;
}

/* The spec plate: the site's signature, and the reason a band can carry
 * facts without a table. A two-column grid on a wide viewport — label, then
 * value — collapsing to a stack when there is no room for two. Every row is
 * ruled off from the next; the first carries a heavier rule in the accent,
 * which is what makes the whole block read as a plate rather than a list. */
.band__specs {
  display: grid;
  width: 100%;
  margin-block-start: 0.5rem;
  border-block-start: 2px solid var(--uilib-highlight, currentColor);
}

.band__spec {
  display: grid;
  grid-template-columns: minmax(9rem, 14rem) 1fr;
  gap: 0.25rem 2rem;
  padding-block: 0.9rem;
  border-block-end: 1px solid var(--uilib-border, currentColor);
}

@media (max-width: 34rem) {
  .band__spec {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }
}

.band__spec-label {
  font-family: var(--uilib-font-display, sans-serif);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--uilib-highlight, currentColor);
}

.band__spec-value {
  font-size: 1rem;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
 * Statement band
 * ----------------------------------------------------------------------- */

/* One oversized line and nothing competing with it. Takes the surface pair,
 * so it lands as a change of ground between two ordinary sections. */
.section--statement-band {
  background-color: var(--uilib-surface, transparent);
  color: var(--uilib-surface-ink, inherit);
}

.statement-band__statement {
  margin: 0;
  max-width: 22ch;
  font-family: var(--uilib-font-display, sans-serif);
  font-size: clamp(2.25rem, 1.2rem + 5vw, 4.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  text-wrap: balance;
}

.statement-band__body {
  margin: 2rem 0 0;
  max-width: var(--uilib-measure, 60ch);
  font-size: 1.0625em;
  color: var(--uilib-muted, currentColor);
}

/* --------------------------------------------------------------------------
 * Wordmark band
 * ----------------------------------------------------------------------- */

/* A statement broken into words, any of which may be emphasised. The words
 * are the display text, so there is no heading above them. */
.wordmark-band__statement {
  margin: 0 auto;
  max-width: 68rem;
  font-family: var(--uilib-font-display, sans-serif);
  font-size: clamp(1.75rem, 0.9rem + 4vw, 3.75rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.1;
  text-transform: uppercase;
  text-wrap: balance;
}

.wordmark-band__word {
  color: var(--uilib-muted, currentColor);
}

.wordmark-band__word--emphasised {
  color: var(--uilib-accent, currentColor);
}

/* --------------------------------------------------------------------------
 * Notice
 * ----------------------------------------------------------------------- */

/* A signpost between two sections, not a division of the page's argument —
 * so it is ruled down its inside edge rather than given a ground of its
 * own. */
.notice {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-inline-start: clamp(1rem, 3vw, 2rem);
  border-inline-start: 3px solid var(--uilib-accent, currentColor);
}

.notice__heading {
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem);
}

/* --------------------------------------------------------------------------
 * Card grid
 * ----------------------------------------------------------------------- */

.card-grid,
.icon-grid,
.gallery,
.list-groups,
.process-steps,
.testimonials {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.card-grid__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.25rem;
}

.card-grid__note,
.icon-grid__note {
  margin: 0;
  max-width: var(--uilib-measure, 60ch);
  font-size: 1rem;
  color: var(--uilib-muted, currentColor);
}

/* A card is a plate: ruled, chamfered, lifted onto the surface tone, with
 * the accent along its top edge. The whole card is one column so a grid of
 * them lines up regardless of how much any one of them says. */
.card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.875rem;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background-color: var(--uilib-surface, transparent);
  color: var(--uilib-surface-ink, inherit);
  border: 1px solid var(--uilib-border, currentColor);
  border-block-start: 3px solid var(--uilib-accent, currentColor);
  clip-path: polygon(
    0 0,
    calc(100% - var(--uilib-chamfer, 0px)) 0,
    100% var(--uilib-chamfer, 0px),
    100% 100%,
    0 100%
  );
}

.card__icon {
  display: flex;
}

.card__icon img {
  display: block;
  width: 2.75rem;
  height: auto;
}

.card__badge {
  font-family: var(--uilib-font-display, sans-serif);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--uilib-highlight, currentColor);
}

.card__title {
  margin: 0;
  font-family: var(--uilib-font-display, sans-serif);
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.card__description {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--uilib-muted, currentColor);
}

/* The chips are a spec plate laid on its side: short caps labels, ruled
 * individually rather than as rows. */
.card__chips {
  margin-block-start: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
}

.card__chip {
  padding: 0.25rem 0.6rem;
  font-family: var(--uilib-font-display, sans-serif);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--uilib-border, currentColor);
  border-radius: var(--uilib-radius, 2px);
  color: var(--uilib-muted, currentColor);
}

/* A card's control sits at the foot of the card whatever the copy above it
 * does, so a row of cards has its buttons on one line. */
.card .btn {
  margin-block-start: auto;
  padding-block: 0.6rem;
}

/* --------------------------------------------------------------------------
 * Icon grid
 * ----------------------------------------------------------------------- */

.icon-grid__cells {
  display: grid;
  gap: 1px;
  background-color: var(--uilib-border, transparent);
  border: 1px solid var(--uilib-border, currentColor);
}

/* The declared column counts. The 1px gap above plus a painted parent is
 * what draws the ruled matrix between cells without any cell carrying a
 * border that would double up against its neighbour's. */
.icon-grid--2 .icon-grid__cells {
  grid-template-columns: repeat(2, 1fr);
}

.icon-grid--3 .icon-grid__cells {
  grid-template-columns: repeat(3, 1fr);
}

.icon-grid--4 .icon-grid__cells {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 48rem) {
  .icon-grid--3 .icon-grid__cells,
  .icon-grid--4 .icon-grid__cells {
    grid-template-columns: repeat(2, 1fr);
  }
}

.icon-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background-color: var(--uilib-paper, transparent);
  color: var(--uilib-ink, inherit);
}

.icon-cell__icon img {
  display: block;
  width: 2.25rem;
  height: auto;
}

.icon-cell__label {
  font-family: var(--uilib-font-display, sans-serif);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.25;
}

/* --------------------------------------------------------------------------
 * Gallery
 * ----------------------------------------------------------------------- */

.gallery__images {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
}

.gallery__image {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--uilib-border, currentColor);
}

/* --------------------------------------------------------------------------
 * List groups
 * ----------------------------------------------------------------------- */

/* Like `feature_essay`, this section takes the surface pair rather than the
 * page ground. Both are sections that state rather than sell, and a long page
 * of nothing but the page ground reads as one undifferentiated block however
 * good the type on it is. Which sections change ground is a design decision
 * this library makes once, here, rather than one an editor has to remember. */
.section--list-groups {
  background-color: var(--uilib-surface, transparent);
  color: var(--uilib-surface-ink, inherit);
}

/* The spec plate, repeated across columns: a caps label in the accent over a
 * ruled list of short lines. This is what "who this is for" looks like when
 * it is a set of facts rather than a paragraph of adjectives. */
.list-groups__groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 2rem 2.5rem;
}

.list-group__label {
  padding-block-end: 0.75rem;
  border-block-end: 2px solid var(--uilib-highlight, currentColor);
  font-family: var(--uilib-font-display, sans-serif);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--uilib-highlight, currentColor);
}

.list-group__items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.list-group__item {
  padding-block: 0.7rem;
  border-block-end: 1px solid var(--uilib-border, currentColor);
  font-size: 1rem;
  line-height: 1.45;
}

/* --------------------------------------------------------------------------
 * Process steps
 * ----------------------------------------------------------------------- */

/* Numbered because the content genuinely is a sequence — the number is read
 * off the step's position at render time, so reordering the steps cannot
 * leave the page numbered 1, 3, 2. */
.process-steps__steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 2.5rem;
}

.process-step {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-block-start: 1.25rem;
  border-block-start: 1px solid var(--uilib-border, currentColor);
}

/* The number takes `--uilib-figure`, the third and quietest of the three
 * colour roles: it counts, it does not label and it cannot be acted on.
 * Tabular figures so a column of them lines up. */
.process-step__number {
  font-family: var(--uilib-font-display, sans-serif);
  font-size: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--uilib-figure, currentColor);
}

.process-step__title {
  margin: 0;
  font-family: var(--uilib-font-display, sans-serif);
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.005em;
}

.process-step__description {
  margin: 0;
  max-width: 38ch;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--uilib-muted, currentColor);
}

/* --------------------------------------------------------------------------
 * Profile
 * ----------------------------------------------------------------------- */

/* A portrait beside a lead-in, with a longer run of copy under the pair. */
.profile {
  display: grid;
  grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
  gap: 2rem clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.profile__portrait img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--uilib-border, currentColor);
}

.profile__intro {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
}

.profile__role {
  margin: 0;
  font-family: var(--uilib-font-display, sans-serif);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--uilib-muted, currentColor);
}

.profile__lead {
  font-size: 1.125em;
}

.profile__body {
  grid-column: 2;
  color: var(--uilib-muted, currentColor);
}

@media (max-width: 52rem) {
  .profile {
    grid-template-columns: minmax(0, 1fr);
  }

  .profile__body {
    grid-column: auto;
  }
}

/* --------------------------------------------------------------------------
 * Feature essay
 * ----------------------------------------------------------------------- */

/* A measure-width column of copy an editor orders, with an optional portrait
 * run between two stretches of it.
 *
 * The one section on the site that leaves the page's own colour. It takes
 * `--uilib-aside`, a ground no other block reads, because on this site it is
 * where a person speaks in the first person — a different kind of page from
 * the grids either side of it, not merely a lighter one. Giving it the
 * surface pair like every other banded section made it a variation; giving
 * it a ground of its own makes it a change of voice. */
.section--feature-essay {
  background-color: var(--uilib-aside, transparent);
  color: var(--uilib-aside-ink, inherit);
}

.feature-essay {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.feature-essay__intro {
  font-size: 1.1875em;
  line-height: 1.55;
}

.feature-essay__portrait img {
  display: block;
  max-width: 22rem;
  width: 100%;
  height: auto;
  border: 1px solid var(--uilib-border, currentColor);
}

.feature-essay__body {
  color: var(--uilib-muted, currentColor);
}

/* The pull line is allowed out of the reading measure its neighbours keep:
 * it is display type, and display type set to a body measure looks like body
 * type that has gone wrong. */
.feature-essay__body .feature-essay__line {
  max-width: 28ch;
  width: max-content;
  max-inline-size: min(100%, 34ch);
}

/* The pull line: the essay's own emphasis, ruled off from the copy either
 * side of it and set in the display face. Not a quotation — nobody is being
 * quoted — so it carries no marks. */
.feature-essay__line {
  margin-block: 2rem;
  padding-inline-start: clamp(1rem, 3vw, 2rem);
  border-inline-start: 3px solid var(--uilib-accent, currentColor);
  font-family: var(--uilib-font-display, sans-serif);
  font-size: clamp(1.25rem, 1rem + 1.4vw, 1.875rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--uilib-aside-ink, inherit);
}

/* --------------------------------------------------------------------------
 * Testimonials
 * ----------------------------------------------------------------------- */

.testimonials__items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1.25rem;
}

.testimonial {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background-color: var(--uilib-surface, transparent);
  color: var(--uilib-surface-ink, inherit);
  border: 1px solid var(--uilib-border, currentColor);
  clip-path: polygon(
    0 0,
    calc(100% - var(--uilib-chamfer, 0px)) 0,
    100% var(--uilib-chamfer, 0px),
    100% 100%,
    0 100%
  );
}

.testimonial__quote {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.6;
}

.testimonial__attribution {
  font-family: var(--uilib-font-display, sans-serif);
  font-size: 0.6875rem;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--uilib-highlight, currentColor);
}

/* --------------------------------------------------------------------------
 * Prose leaves
 * ----------------------------------------------------------------------- */

/* The blocks a Prose stream renders, inside a measure supplied by whatever
 * contains them. Each carries its own vertical rhythm and drops it when it
 * is the first thing in its stream. */
.heading {
  margin: 2.5rem 0 1rem;
  font-family: var(--uilib-font-display, sans-serif);
  font-size: clamp(1.375rem, 1.1rem + 1.4vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.15;
}

.heading:first-child {
  margin-block-start: 0;
}

.paragraph {
  margin-block: 1.25rem;
}

.paragraph:first-child {
  margin-block-start: 0;
}

.quote {
  margin: 2rem 0;
  padding-inline-start: clamp(1rem, 3vw, 2rem);
  border-inline-start: 3px solid var(--uilib-accent, currentColor);
}

.quote:first-child {
  margin-block-start: 0;
}

.quote__text {
  margin: 0;
  font-size: 1.125em;
  line-height: 1.55;
}

.quote__attribution {
  display: block;
  margin-block-start: 0.75rem;
  font-family: var(--uilib-font-display, sans-serif);
  font-size: 0.6875rem;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--uilib-highlight, currentColor);
}

.image {
  display: block;
  max-width: 100%;
  height: auto;
  margin-block: 2rem;
  border: 1px solid var(--uilib-border, currentColor);
}

.image:first-child {
  margin-block-start: 0;
}

.embed {
  margin-block: 2rem;
}

.embed:first-child {
  margin-block-start: 0;
}

.embed iframe {
  display: block;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
  border: 0;
}