/* dvi block deltas (plan §5) — the standalone geometric Data·Value·Impact mark,
 * centred and sized up as a punchline. The SDS .sph-dvi rides currentColor (so it
 * follows the theme) with VALUE + circle brand-locked to --sph-primary. */
@layer web {
  .block-dvi { text-align: center; }
  .block-dvi__content {
    --dvi-mark-size: clamp(1.5rem, 4.5vw, 3rem);
  }
  .block-dvi__eyebrow {
    display: flex;
    width: fit-content;
    justify-content: center;
    color: var(--sph-text-muted);
    margin: 0 auto clamp(1rem, 3vw, 1.5rem);
  }
  .block-dvi__eyebrow::after {
    content: "";
    width: 28px;
    height: 1px;
    background: currentColor;
    display: inline-block;
  }
  .block-dvi__title {
    font-family: var(--sph-font-display);
    font-weight: var(--sph-weight-extrabold);
    font-size: var(--dvi-title-size);
    line-height: var(--sph-lh-tight);
    letter-spacing: var(--sph-tracking-tight);
    color: var(--sph-text);
    max-width: 20ch;
    text-align: left;
    margin: 0 0 clamp(var(--sph-space-4), 3vw, var(--sph-space-6));
  }
  .block-dvi__title .sph-accent { color: var(--sph-primary); }
  .block-dvi__mark {
    font-size: var(--dvi-mark-size);
    color: var(--sph-text);
  }

  /* Semantic title level also establishes the visual hierarchy: the brand mark
     remains one deliberate type step below its heading. */
  .block-dvi__content--heading-1 {
    --dvi-title-size: clamp(var(--sph-fs-2xl), 5vw, var(--sph-fs-4xl));
    --dvi-mark-size: clamp(var(--sph-fs-xl), 4vw, var(--sph-fs-3xl));
  }
  .block-dvi__content--heading-2 {
    --dvi-title-size: clamp(var(--sph-fs-xl), 4vw, var(--sph-fs-3xl));
    --dvi-mark-size: clamp(var(--sph-fs-lg), 3vw, var(--sph-fs-2xl));
  }
  .block-dvi__content--heading-3 {
    --dvi-title-size: clamp(var(--sph-fs-lg), 3vw, var(--sph-fs-2xl));
    --dvi-mark-size: clamp(var(--sph-fs-md), 2.5vw, var(--sph-fs-xl));
  }
  .block-dvi__content--heading-4 {
    --dvi-title-size: var(--sph-fs-xl);
    --dvi-mark-size: var(--sph-fs-lg);
  }
  .block-dvi__content--heading-5 {
    --dvi-title-size: var(--sph-fs-lg);
    --dvi-mark-size: var(--sph-fs-md);
  }
  .block-dvi__content--heading-6 {
    --dvi-title-size: var(--sph-fs-md);
    --dvi-mark-size: var(--sph-fs-base);
  }

  @media (max-width: 44rem) {
    /* The full DATA · VALUE · IMPACT mark is intentionally non-wrapping.
       Scale it below the deck-oriented 24px floor so it fits the 320px web
       measure without changing its one-line brand composition. */
    .block-dvi__content {
      --dvi-mark-size: clamp(var(--sph-fs-md), 6vw, 1.5rem);
    }
  }
}