/* Full-bleed figures (October 2026).
   A picture inside a section runs from its column out to the display edge, the way
   .ff-split__media does on /scientific/phonos/how-it-works/: on wide screens from the centre
   column to the left or right edge, on phones (one column) across the whole width.

     <figure class="ff-figure ff-bleed ff-bleed--start">   left column → left edge
     <figure class="ff-figure ff-bleed ff-bleed--end">     right column → right edge

   The negative margins mirror the section paddings in site.css (.ff-section / .ff-pagehead:
   left = --gutter, right = --gutter + 2 cells + the remainder to a whole cell; on phones
   --gutter-sm and the remainder). The remainder is taken against <main>'s width, so <main> is an
   inline-size container (100cqw = the page width without the scrollbar). <main> clips any
   sub-pixel rest horizontally, so a bleed can never cause a horizontal scrollbar. */
main#main { container: ff-main / inline-size; overflow-x: clip; }

.ff-bleed {
  --ff-bleed-l: var(--gutter);
  --ff-bleed-r: calc(var(--gutter) + 2 * var(--ff-cell) + mod(100cqw, var(--ff-cell)));
  max-width: none;
  width: auto;
}
.ff-bleed--start { margin-left: calc(-1 * var(--ff-bleed-l)); }
.ff-bleed--end { margin-right: calc(-1 * var(--ff-bleed-r)); }
/* The window opens from its inner edge, the side that faces the copy. */
.ff-bleed--start[data-ff-reveal] { transform-origin: right center; }
.ff-bleed--end[data-ff-reveal] { transform-origin: left center; }
/* Credits sit on the inner, visible side of the picture. */
.ff-bleed--start > .ff-credit { right: var(--space-4); left: auto; }

@media (max-width: 860px) {
  .ff-bleed {
    --ff-bleed-l: var(--gutter-sm);
    --ff-bleed-r: calc(var(--gutter-sm) + mod(100cqw, var(--ff-cell)));
    margin-left: calc(-1 * var(--ff-bleed-l));
    margin-right: calc(-1 * var(--ff-bleed-r));
  }
}