.bureau-about-text {
  width: 100%;
}

.bureau-about-text > :first-child {
  margin-top: 0;
}

.bureau-about-text > :last-child {
  margin-bottom: 0;
}

/* Keep the inline image attached to the marked word. */
.bureau-about-text__inline-anchor {
  white-space: nowrap;
}

/* The wrapper reserves the image width, but only 1em of line height.
   The image itself can be larger without opening the line spacing. */
.bureau-about-text__inline-media {
  --bureau-inline-image-scale: 1.5;
  --bureau-inline-image-ratio: 1;
  --bureau-inline-image-y: 0em;

  position: relative;
  display: inline-block;
  width: calc(1em * var(--bureau-inline-image-scale) * var(--bureau-inline-image-ratio));
  height: 1em;
  margin-left: .12em;
  margin-right: .3em;
  vertical-align: -.12em;
  line-height: 0;
}

.bureau-about-text p > .bureau-about-text__inline-anchor:first-child .bureau-about-text__inline-media {
  margin-left: 0;
}

.bureau-about-text__inline-media picture,
.bureau-about-text__inline-media > img {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(calc(-50% + var(--bureau-inline-image-y)));
  display: block;
  width: auto;
  height: calc(1em * var(--bureau-inline-image-scale));
}

.bureau-about-text__inline-media img,
.bureau-about-text__inline-image {
  display: block;
  width: auto;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* Lightbox variant: Pure's responsive helper classes are block-level and
   100% wide by default. Inside bureau-about-text they must remain glyph-like. */
.bureau-about-text .bureau-about-text__inline-media.pure-image-desktop,
.bureau-about-text .bureau-about-text__inline-media.pure-image-mobile {
  width: calc(1em * var(--bureau-inline-image-scale) * var(--bureau-inline-image-ratio));
  height: 1em;
}

@media screen and (min-width: 992px) {
  .bureau-about-text .bureau-about-text__inline-media.pure-image-desktop {
    display: inline-block;
  }

  .bureau-about-text .bureau-about-text__inline-media.pure-image-mobile {
    display: none;
  }
}

@media screen and (max-width: 991px) {
  .bureau-about-text .bureau-about-text__inline-media.pure-image-desktop {
    display: none;
  }

  .bureau-about-text .bureau-about-text__inline-media.pure-image-mobile {
    display: inline-block;
  }
}

/* The desktop Lightbox adds an <a> around the picture. Position that link
   exactly where the old direct <picture>/<img> used to sit. */
.bureau-about-text__inline-media > a.lightbox {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(calc(-50% + var(--bureau-inline-image-y)));
  display: block;
  width: auto;
  height: calc(1em * var(--bureau-inline-image-scale));
  line-height: 0;
}

.bureau-about-text__inline-media > a.lightbox picture,
.bureau-about-text__inline-media > a.lightbox > img {
  position: static;
  display: block;
  width: auto;
  height: 100%;
  transform: none;
}

.bureau-about-text__inline-media > a.lightbox img {
  display: block;
  width: auto;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* Inline images are intentionally tiny; keep the Lightbox interaction but
   suppress Parvus' zoom indicator here. */
.bureau-about-text .parvus-zoom__indicator {
  display: none!important;
}