/* ============================================================
   FABBRUCCIO: THE EDITORIAL ON-MODEL BAND (section)

   ONE primitive on three surfaces: the home page, the collection, and the
   PDP. Loaded on all three by the section map. The slug stays `ugc` so the
   existing map, its filter and any downstream reference keep working; the
   band it paints is design-language/components.md section 12.

   Ported from beta2 site.css:164-167 and :370-372.

   beta2 -> here
     .editorial   -> .fab-editorial
     figcaption   -> .fab-editorial__caption
     .ed-line     -> .fab-editorial__line

   ------------------------------------------------------------
   CROP DISCIPLINE, IN ITS STRICTEST FORM. THIS IS THE RULE THAT GOT AN
   EARLIER BUILD REJECTED, SO READ IT BEFORE CHANGING ANY LINE BELOW.
   ------------------------------------------------------------
   The sources are 2:3 PORTRAIT on-model frames (1069x1600 in the media
   library) WITH THE BOOTS AT THE BOTTOM OF THE FRAME. So:

     - There is NO container aspect-ratio at all. None. The image is
       inline-block at its own intrinsic size, capped by max-width and
       max-height, and shown WHOLE.
     - object-fit is contain, and it never has anything to do because
       nothing is forcing the box.
     - There is NO object-position. A top-biased object-position on a
       portrait whose subject is at the bottom guillotines the product,
       which is the specific failure this rule exists to prevent.
     - A full-length on-model shot is a framed PORTRAIT on the grey stage.
       It is NEVER a wide band, and it is never cropped through the
       subject.

   THE PRODUCT MUST BE VISIBLE IN EVERY PRODUCT PHOTOGRAPH.
   ------------------------------------------------------------ */

/* FULL-BLEED, AND IT NEEDS NO ESCAPE OF ITS OWN. THIS IS A FIXED BUG, SO
   READ IT BEFORE ADDING A NEGATIVE MARGIN BACK.

   This band lives inside <main class="fab-main">, and .fab-main has already
   escaped the .wp-site-blocks gutter once (fab-base.css 1b), so main
   already spans the true viewport width and a plain full-width child
   reaches both edges on its own. The first version of this rule ALSO did
   `margin-inline: calc(-1 * var(--fab-chrome-bleed, 0px))`, which escaped
   the same gutter A SECOND TIME. Measured: body.scrollWidth 1508 at a 1440
   viewport and 410 at 390, i.e. overflowing by exactly one gutter, and
   ONLY on the FSE routes (/shop/ and the PDP). The classic front page was
   clean, which is what made it look like a shop-and-PDP problem rather than
   a double-escape: on a classic route --fab-chrome-bleed falls back to 0px,
   so the second escape was a no-op there.

   The footer DOES still carry the escape, and that is not an
   inconsistency: the footer is a SIBLING of main, not a descendant, so
   nothing has escaped the gutter on its behalf.
   ------------------------------------------------------------ */
.fab-editorial {
  margin: 0;
  background: var(--fab-stage-grey);
  padding: clamp(48px, 7vw, 96px) var(--fab-gutter);
  text-align: center;
}

.fab-editorial img {
  display: inline-block;
  width: auto;
  height: auto;
  max-width: min(100%, var(--fab-portrait-max));
  max-height: 94vh;
  object-fit: contain;
  vertical-align: bottom;
}

/* Format as built: "Cleopatra, Brown. 2026." or, with a city,
   "Florence, Brown. New York, 2026." */
.fab-editorial__caption {
  margin-top: var(--fab-space-md);
  font-size: var(--fab-size-small);
  letter-spacing: var(--fab-track-caption);
  color: var(--fab-ink-secondary);
}

/* One product-truth sentence, centred, capped at 40ch, with the
   load-bearing fact in ink at 500. Emphasis inside a sentence, never a
   separate styled component. */
.fab-editorial__line {
  max-width: var(--fab-measure-prose);
  margin: 18px auto 0;
  font-size: .92rem;
  line-height: var(--fab-leading-editorial);
  color: var(--fab-ink-secondary);
}
.fab-editorial__line b {
  color: var(--fab-ink);
  font-weight: var(--fab-weight-medium);
}