/* The drawing well. The reference's `.image_wr` / `.image_area`: a square, with the drawing
   at 60 percent of it anchored to one of five positions, so nothing lines up mechanically
   down the page. Their measurements exactly (ADR-001 decision 7). Linked on every page,
   because doors, stages and module pages all use it. */
.fig{position:relative;padding-top:100%;margin:0}
.fig > svg{position:absolute;width:60%;height:60%;top:20%;left:20%;overflow:visible}
.fig.tl > svg{top:0;left:0;bottom:auto;right:auto}
.fig.tr > svg{top:0;right:0;bottom:auto;left:auto}
.fig.bl > svg{bottom:0;left:0;top:auto;right:auto}
.fig.br > svg{bottom:0;right:0;top:auto;left:auto}
/* A drawing anchored to the bottom stops above the note, which also sits on the bottom edge:
   three lines of it at 17px, the most a note takes in the narrowest well. */
.fig:is(.bl,.br):has(.imgnote) > svg{bottom:84px}
.imgnote{
  position:absolute;bottom:0;left:0;right:0;margin:0;
  font-size:17px;font-style:italic;text-align:center;color:var(--muted);line-height:1.4;
}

/* A square of empty space is not a layout on a phone: the drawing goes inline and the
   well stops reserving height for it. Their own breakpoint. */
@media(max-width:900px){
  .fig{padding-top:0;display:flex;flex-direction:column;align-items:center}
  .fig > svg{position:static;width:min(100%,260px);height:auto}
  .imgnote{position:static;margin-top:12px}
}