/* story-map.css: the autoencoder's 2-D map in s3 (#aemap .aemap-stage), built by story-map.js.
   Without JS the stage holds only img.aemap-fallback (the still map, the same framing as the map's
   last state); it is styled here as the white card, in the flow. story-map.js moves that image into
   .aemap-box, draws the live map over it (WebGL) and hides it once the canvas has drawn (.is-drawn).
   The pin: the stage is the wrapper, the frame (ONE white card: the square, and the legend as its
   footer strip) is position: sticky inside it,
   centred in the small viewport, and the empty .aemap-room after it is the scroll the zoom plays over.
   So the stage is the frame plus the room, nothing else: no space before the pin starts, and the
   caption comes right after it lets go. The paragraph above (#aemap-lede) stays in the flow and
   scrolls at page speed. The card itself never moves, scales or fades with scroll; only the camera
   inside the canvas and its overlays do. No pin (the map in the flow) under reduced motion,
   on a screen under 520px tall, or without .is-pin (no JS, no WebGL at start).
   Stage states (story-map.js): .is-live (built) · .is-pin (may pin; set once) · .is-ready (data in) · .is-drawn (canvas up) ·
   .is-found (the credit note is marked) · .is-onscreen ·
   .is-small (the square is under 420px: smaller label card, kicker and rank only) · .is-tight (under 300px: the core label
   takes two lines) · .is-static (no WebGL or no data: the still image with its label card).
   --aemap-fh (story-map.js, measured on resize): the frame's height, for the sticky offset.
   story-map.js may instead hold the whole opening of s3 still, the title, the paragraph, the card and
   the caption, in one sticky .aemap-pin inside .aemap-hold (phone: stacked, snug levels; desktop: three
   columns, title on the left edge, card centred on the page, paragraph to its right; or stacked; see
   "the held frame" below); then the stage does not pin. The caption is always shown, never faded.
   Tokens come from hero.css :root and story.css (--card-radius, --card-shadow).
   Desktop rules are the defaults; the phone layout lives in ONE block: @media (max-width: 767px). */

.aemap {
  /* The square: at most 620px, never wider than the column, and short enough to be seen whole on
     screen with its legend strip (the frame is at most the small viewport less about 84px). */
  --aemap-size: min(100%, 620px, calc(100vh - 120px));
  --aemap-min: min(100%, 280px);
  /* The scroll the pinned frame sticks through: the slow pull-back and the mark play over it. */
  --aemap-room: 200vh;
}

/* A repeated custom property is not a fallback (the last one always wins, valid or not), so the
   small-viewport values only go where svh is known. */
@supports (height: 1svh) {
  .aemap {
    --aemap-size: min(100%, 620px, calc(100svh - 120px));
    --aemap-room: 200svh;
  }
}

/* Laptops: a floor under the room, so a short window still gets the slow pull-back (the zoom plays
   over 64% of the room, at least 1050px; the finished card holds over the last 12%, at least 200px).
   1680px is what 200vh is at 840px tall; taller windows keep 200vh. The phone block sets its own. */
@media (min-width: 768px) {
  .aemap { --aemap-room: max(200vh, 1680px); }

  @supports (height: 1svh) {
    .aemap { --aemap-room: max(200svh, 1680px); }
  }
}

.aemap-stage { position: relative; }

/* ---------- No JS (and before story-map.js runs): the still map as a card ---------- */

.aemap-stage > .aemap-fallback {
  width: var(--aemap-size);
  min-width: var(--aemap-min);
  max-width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--card-radius, 14px);
  box-shadow: var(--card-shadow, 0 10px 30px rgba(48, 50, 54, .12));
}

/* ---------- Frame: one white card, the square on top and the legend as its footer strip ----------
   Only this card pins; nothing outside it does. */

.aemap-frame {
  width: var(--aemap-size);
  min-width: var(--aemap-min);
  max-width: 100%;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--card-radius, 14px);
  box-shadow: var(--card-shadow, 0 10px 30px rgba(48, 50, 54, .12));
  overflow: hidden;
}

.aemap-frame > .aemap-box,
.aemap-frame > .aemap-legend { width: 100%; }

/* The caption: under the card, left-aligned and no wider than it (.is-held, below): the map of all
   291,292 invoices of fiscal year 2023, how to read it, the gold credit note. Always shown, never faded. */
.aemap > .aemap-cap {
  margin-top: 12px;
  font-size: 13px;
  line-height: 18px;
  color: var(--hero-lede);
}

/* ---------- Pin ---------- */

.aemap-room { display: none; }

@supports (position: sticky) or (position: -webkit-sticky) {
  @media (prefers-reduced-motion: no-preference) and (min-height: 520px) {
    /* Centred in the small viewport: top = max(16px, (100svh - the frame) / 2). A declaration with
       var() is never a fallback either, so each step up is gated. */
    .aemap-stage.is-pin > .aemap-frame {
      position: -webkit-sticky;
      position: sticky;
      top: 16px;
    }

    @supports (top: max(1px, 2px)) {
      .aemap-stage.is-pin > .aemap-frame { top: max(16px, calc((100vh - var(--aemap-fh, 100vh)) / 2)); }
    }

    @supports (height: 1svh) {
      .aemap-stage.is-pin > .aemap-frame { top: max(16px, calc((100svh - var(--aemap-fh, 100svh)) / 2)); }
    }

    .aemap-stage.is-pin > .aemap-room {
      display: block;
      height: var(--aemap-room);
    }
  }
}

.aemap-box {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--white);
  contain: layout paint;
  -webkit-user-select: none;
  user-select: none;
}

@supports not (aspect-ratio: 1 / 1) {
  .aemap-box::before { content: ""; display: block; padding-top: 100%; }
  .aemap-stage > .aemap-fallback { height: auto; }
}

.aemap-box > .aemap-fallback,
.aemap-canvas,
.aemap-svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.aemap-box > .aemap-fallback {
  display: block;
  max-width: none;
  object-fit: contain;
}

/* The live map fades in over the still one, which then steps aside. */
.aemap-canvas {
  display: block;
  opacity: 0;
  transition: opacity .5s ease;
}

.aemap-stage.is-drawn .aemap-canvas { opacity: 1; }

.aemap-stage.is-drawn .aemap-box > .aemap-fallback {
  visibility: hidden;
  transition: visibility 0s linear .5s;
}

/* Once the credit note is marked the crowd steps back a little, so the gold reads first. */
.aemap-stage.is-drawn.is-found .aemap-canvas {
  opacity: .8;
  transition-duration: .8s;
}

.aemap-svg {
  overflow: visible;
  pointer-events: none;
}

/* ---------- Overlays (all aria-hidden; story-map.js positions them every frame they move) ---------- */

/* The viewfinder: the square that holds 90% of the invoices. It is the frame at the start, and
   shrinks with the pull-back until it is a speck in the middle of the map. */
.aemap-corners {
  fill: none;
  stroke: var(--slate-900);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .7;
}

.aemap-core-label {
  position: absolute;
  left: 0;
  top: 0;
  padding: 3px 6px;
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--slate-200);
  border-radius: 5px;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 10.5px;
  line-height: 14px;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--slate-800);
  pointer-events: none;
  will-change: transform;
}

.aemap-stage:not(.is-ready) .aemap-core-label,
.aemap-stage:not(.is-ready) .aemap-corners { visibility: hidden; }

/* The credit note: a soft gold halo, a ring that springs in, the gold dot (story-map.js). */
.aemap-halo {
  position: absolute;
  left: 0;
  top: 0;
  width: 76px;
  height: 76px;
  margin: -38px 0 0 -38px;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

.aemap-halo-i {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(216, 174, 72, .5), rgba(216, 174, 72, .2) 45%, rgba(216, 174, 72, 0));
}

.aemap-ring {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.5;
}

.aemap-dot {
  fill: var(--gold);
  stroke: var(--white);
  stroke-width: 1.5;
}

.aemap-lead {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-dasharray: 1 2;
}

/* The still image already carries its own gold dot and ring. */
.aemap-stage.is-static .aemap-ring,
.aemap-stage.is-static .aemap-dot,
.aemap-stage.is-static .aemap-halo { display: none; }

/* The label card. */
.aemap-card {
  position: absolute;
  left: 0;
  top: 0;
  box-sizing: border-box;
  width: max-content;
  max-width: min(236px, calc(100% - 20px));
  margin: 0;
  padding: 10px 13px 11px;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(48, 50, 54, .06), 0 10px 26px -10px rgba(48, 50, 54, .3);
  color: var(--slate-900);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

.aemap-card > * { margin: 0; }

.aemap-card-kicker {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 10.5px;
  line-height: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-lo);
}

.aemap-card-name {
  margin-top: 5px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -.005em;
  text-wrap: balance;
}

.aemap-card-amt {
  margin-top: 7px;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 13px;
  line-height: 18px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.aemap-card-rank {
  margin-top: 1px;
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 18px;
  color: var(--slate-800);
  white-space: nowrap;
}

/* ---------- Legend ---------- */

.aemap-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 16px;
  box-sizing: border-box;
  margin: 0;
  padding: 8px 12px 9px;
  border-top: 1px solid var(--slate-100);
  font-family: var(--mono);
  font-weight: 500;
  font-size: 10.5px;
  line-height: 14px;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--slate-800);
}

.aemap-key,
.aemap-each {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Five dots, usual to unusual: the shades the map draws with. */
.aemap-dots {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.aemap-dots i,
.aemap-one {
  display: block;
  border-radius: 50%;
  background: var(--slate-900);
}

.aemap-dots i:nth-child(1) { width: 4px; height: 4px; opacity: .28; }
.aemap-dots i:nth-child(2) { width: 4px; height: 4px; opacity: .42; }
.aemap-dots i:nth-child(3) { width: 4.5px; height: 4.5px; opacity: .6; }
.aemap-dots i:nth-child(4) { width: 5px; height: 5px; opacity: .8; }
.aemap-dots i:nth-child(5) { width: 5.5px; height: 5.5px; }

.aemap-one { width: 4px; height: 4px; opacity: .55; }

/* "Each dot: one invoice"; on a small square the short form, so the strip stays one line at 402. */
.aemap-each-short { display: none; }
.aemap-stage.is-small .aemap-each-long { display: none; }
.aemap-stage.is-small .aemap-each-short { display: inline; }

/* ---------- Motion ---------- */

/* The halo takes two slow breaths once the credit note is marked, then rests at its static state
   (finite, under 5 s: it never keeps moving beside the text). It plays again only when the mark is
   entered again. */
@media (prefers-reduced-motion: no-preference) {
  .aemap-stage.is-found.is-onscreen .aemap-halo-i {
    animation: aemap-breathe 2.4s ease-in-out .4s 2 both;
  }
}

@keyframes aemap-breathe {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.08); opacity: .8; }
}

@media (prefers-reduced-motion: reduce) {
  .aemap-canvas,
  .aemap-stage.is-drawn .aemap-box > .aemap-fallback { transition: none; }
}

/* ---------- A small square (phone, or a short landscape screen): story-map.js sets .is-small ---------- */

.aemap-stage.is-small .aemap-core-label {
  padding: 2px 4px;
  font-size: 10.5px;
  line-height: 14px;
  letter-spacing: .05em;
}

/* Under 300px the one-line label no longer fits beside the core (it would drop under it, into the
   label card's way): "90%" over "of invoices". */
.aemap-stage.is-tight .aemap-core-n,
.aemap-stage.is-tight .aemap-core-t { display: block; }

.aemap-stage.is-small .aemap-halo {
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px;
}

.aemap-stage.is-small .aemap-card {
  max-width: min(188px, calc(100% - 16px));
  padding: 8px 10px 9px;
  border-radius: 9px;
}

.aemap-stage.is-small .aemap-card-kicker { font-size: 11px; line-height: 14px; letter-spacing: .05em; }
.aemap-stage.is-small .aemap-card-name { margin-top: 4px; font-size: 14px; line-height: 17px; }
.aemap-stage.is-small .aemap-card-amt { margin-top: 5px; font-size: 12px; line-height: 16px; }
.aemap-stage.is-small .aemap-card-rank { font-size: 11.5px; line-height: 16px; }

/* On a small square the card carries only the kicker and the rank, so it stays clear of the marked
   point and the find line below the map reveals the name (story-map.js measures the card at layout). */
.aemap-stage.is-small .aemap-card-name,
.aemap-stage.is-small .aemap-card-amt { display: none; }
.aemap-stage.is-small .aemap-card-rank { margin-top: 3px; font-size: 13px; color: var(--slate-900); }

/* ---------- Phone ---------- */

@media (max-width: 767px) {
  /* The column's width, and the frame (square + legend strip) never taller than the small viewport
     less about 90px, so the pinned card is seen whole with air above and below. */
  .aemap {
    --aemap-size: min(100%, calc(100vh - 120px));
    --aemap-min: 0px;
    --aemap-room: 180vh;
  }

  @supports (height: 1svh) {
    .aemap {
      --aemap-size: min(100%, calc(100svh - 120px));
      --aemap-room: 180svh;
    }
  }

  .aemap-frame { border-radius: 12px; }
  .aemap-legend {
    gap: 4px 10px;
    font-size: 10px;
    letter-spacing: .05em;
  }

  .aemap > .aemap-cap { margin-top: 8px; }   /* the phone's one caption step (story.css); 13/18 kept */
}

/* ---------- Phone: the held frame (story-map.js builds it only under 768px wide) ----------
   div.aemap-hold > div.aemap-pin (sticky: the title, the paragraph, the figure: card and
   caption) + .aemap-room. Not gated by a media query: it exists only while story-map.js holds, and so
   it stays whole in the moment between a layout switch and the re-measure. The type and the gaps
   are the phone's own (story.css), so nothing changes but that it all stands still; only on a short
   small viewport (a phone's browser bars) is it snug (.is-snug / 2 / 3, below) so it still fits. */

.aemap-hold { position: relative; }

.aemap-hold > .aemap-pin {
  position: -webkit-sticky;
  position: sticky;
  top: var(--aemap-ptop, 14px);
}

.aemap-pin > * { margin: 0; }
.aemap-pin > .aemap-lede { margin-top: 16px; }
.aemap-pin > .aemap      { margin-top: 20px; }

/* The card is the square story-map.js measured (--aemap-hsize), and the stage no longer pins it. */
.aemap.is-held .aemap-frame { width: var(--aemap-hsize, 100%); }
.aemap.is-held > .aemap-cap { max-width: var(--aemap-hsize, 100%); }
.aemap.is-held .aemap-stage.is-pin > .aemap-frame { position: relative; top: auto; }

/* The legend strip stays one line (its height is in the fit); on a square under 300px (.is-tight)
   it is the key alone, "Usual ••••• unusual". */
.aemap.is-held .aemap-legend { flex-wrap: nowrap; }   /* both parts need 296px at 10px type */
.aemap.is-held .aemap-stage.is-tight .aemap-each { display: none; }

/* A short small viewport (a real phone's browser bars; story-map.js decides, at layout only, never
   on scroll): first snug gaps (.is-snug); .is-snug2 sets nothing, so the #s3 title keeps the phone's
   title size, like the #s2 and #s3b titles; only the last level (.is-snug3, an SE-class screen) sets
   the title, the paragraph and the caption a size smaller together. The snug gaps are 12 / 14 / 8;
   once the snug square is the whole column, story-map.js (openHold) opens them toward the phone's
   16 / 20 / 8 with the height to spare (--aemap-snug-*), so the frame grows into level 0 smoothly. */
.aemap-hold.is-snug > .aemap-pin > .aemap-lede { margin-top: var(--aemap-snug-lede, 12px); }
.aemap-hold.is-snug > .aemap-pin > .aemap      { margin-top: var(--aemap-snug-fig, 14px); }
.aemap-hold.is-snug .aemap.is-held > .aemap-cap { margin-top: var(--aemap-snug-cap, 8px); }

.aemap-hold.is-snug3 { --title-size: clamp(26px, 7.4vw, 28px); --title-lh: 30px; }   /* 28 at 402, 27.75 at 375 */

.aemap-hold.is-snug3 .aemap-lede { font-size: 16px; line-height: 24px; }
.aemap-hold.is-snug3 .aemap.is-held > .aemap-cap { font-size: 12.5px; line-height: 18px; }

.aemap-hold > .aemap-room {
  display: block;
  height: max(180vh, 1250px);   /* the zoom plays over 64% of it: at least 800px of scroll */
}

@supports (height: 1svh) {
  .aemap-hold > .aemap-room { height: max(180svh, 1250px); }
}

/* The caption is there, whole and still, for the whole hold (no text fades in on scroll): the held
   frame is title, paragraph, map and caption together from the first pass (the owner's phone view). */

/* ---------- Desktop: the held frame (story-map.js, 768px and up) ----------
   The phone's div.aemap-hold > div.aemap-pin, with the desktop rhythm. Stacked: title, paragraph, card,
   caption down the story's left edge. Three columns (.is-cols): the title across, on the grid's left
   edge; the card centred on the page (--aemap-hx is the empty first column, --aemap-hsize the card) with
   the short caption under it; the paragraph in a column to its right (--aemap-hg + --aemap-hl),
   top-aligned with the card and ending on the grid's right edge. story-map.js sets them all on the hold. */
@media (min-width: 768px) {
  .aemap-pin > .aemap-lede { margin-top: 26px; }   /* .step-title + * */
  .aemap-pin > .aemap      { margin-top: 24px; }   /* .step-body > .aemap */

  .aemap-hold > .aemap-room { height: max(200vh, 1680px); }   /* the card pin's room: the same pace */

  .aemap-hold.is-cols > .aemap-pin {
    display: grid;
    grid-template-columns: var(--aemap-hx, 0px) var(--aemap-hsize, 620px) calc(var(--aemap-hg, 32px) + var(--aemap-hl, 240px)) minmax(0, 1fr);
    column-gap: 0;
    align-items: start;
  }
  .aemap-hold.is-cols > .aemap-pin > .step-title { grid-column: 1 / -1; grid-row: 1; }
  .aemap-hold.is-cols > .aemap-pin > .aemap      { grid-column: 2; grid-row: 2; margin-top: 26px; }
  .aemap-hold.is-cols > .aemap-pin > .aemap-lede {
    grid-column: 3;
    grid-row: 2;
    max-width: none;
    margin-top: 26px;
    padding-left: var(--aemap-hg, 32px);
    font-size: 17px;
    line-height: 27px;
  }
}

@supports (height: 1svh) {
  @media (min-width: 768px) {
    .aemap-hold > .aemap-room { height: max(200svh, 1680px); }
  }
}

/* ---------- Desktop: the gold ink at the find (story-map.js, 768px and up) ----------
   Instead of the phone's springing ring, dotted leader and white card: a hand-drawn gold ring around
   the dot, a hand-drawn leader with its arrowhead (svg.aemap-ink) and a handwritten note
   (p.aemap-ink-note: five span.aemap-ink-l), all aria-hidden (the text alternative: the caption, s4's labels
   with their visually-hidden payment dates).
   story-map.js places them at layout (left / top, the paths' d), draws them in once (stroke-dashoffset
   on paths of pathLength 1; --w wipes each line in from the left) and .is-inked on #aemap fades them
   in and out after that. The gold dot and its halo stay. Nothing here reaches the phone. */
@media (min-width: 768px) {
  .aemap-card,
  .aemap-lead,
  .aemap-ring { display: none; }

  .aemap.has-ink { position: relative; }

  .aemap-ink,
  .aemap-ink-note {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s ease;
  }

  .aemap-ink { overflow: visible; }

  .aemap.is-inked .aemap-ink,
  .aemap.is-inked .aemap-ink-note { opacity: 1; }

  .aemap-ink path {
    fill: none;
    stroke: var(--gold-lo);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1 2;
    stroke-dashoffset: 1;
    opacity: .92;
  }

  .aemap-ink-ring { stroke-width: 2.3; }
  .aemap-ink-lead { stroke-width: 1.7; }
  .aemap-ink .aemap-ink-head { stroke-width: 1.7; stroke-dasharray: none; stroke-dashoffset: 0; }   /* shown whole by opacity */

  .aemap-ink-note {
    width: max-content;
    margin: 0;
    font-family: 'Caveat', 'Bradley Hand', cursive;
    font-weight: 600;
    font-size: 27px;
    line-height: 1.1;
    letter-spacing: 0;
    color: var(--gold-lo);
    -webkit-user-select: none;
    user-select: none;
  }

  .aemap-ink-l {
    display: block;
    width: max-content;
    white-space: nowrap;
    -webkit-mask-image: linear-gradient(90deg, #000 45%, transparent 55%);
    mask-image: linear-gradient(90deg, #000 45%, transparent 55%);
    -webkit-mask-size: 220% 100%;
    mask-size: 220% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: calc((1 - var(--w, 0)) * 100%) 0;
    mask-position: calc((1 - var(--w, 0)) * 100%) 0;
  }

  .aemap-ink-l.is-whole {
    -webkit-mask-image: none;
    mask-image: none;
  }

  /* Too narrow even at 18px: the lines wrap, balanced, at the width story-map.js gives the note. */
  .aemap-ink-note.is-wrap .aemap-ink-l {
    width: auto;
    white-space: normal;
    text-wrap: balance;
  }

  /* Inside the square (no margin beside it): a white halo keeps the hand legible over the dots. */
  .aemap-ink-note.is-inset { text-shadow: 0 0 3px #fff, 0 0 6px #fff, 0 0 2px #fff; }
}

@media (max-width: 767px) {
  .aemap-ink,
  .aemap-ink-note { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .aemap-ink,
  .aemap-ink-note { transition: none; }
}

/* ---------- Print: the still image alone (the overlays follow the live camera) ---------- */

@media print {
  .aemap-stage.is-pin > .aemap-frame { position: static; }
  .aemap-stage > .aemap-room,
  .aemap-hold > .aemap-room { display: none; }
  .aemap-hold > .aemap-pin { position: static; }
  .aemap-hold.is-cols > .aemap-pin { display: block; }
  .aemap-hold.is-cols > .aemap-pin > .aemap-lede { padding-left: 0; }
  .aemap-canvas,
  .aemap-halo,
  .aemap-svg,
  .aemap-core-label,
  .aemap-card,
  .aemap-ink,
  .aemap-ink-note { display: none; }   /* the still image carries its own ring; the caption the words */
  .aemap-stage.is-drawn .aemap-box > .aemap-fallback { visibility: visible; }
}