/* Bottle alpha ends 63 pixels above the bottom of its 512 × 768 canvas.
   Both the bottle and contact shadow share a ground line at 84% of the scene. */
#notes .note-visual {
  container-type: inline-size;
  --bottle-width: clamp(112px, 26cqw, 182px);
  --alpha-tail: clamp(13.78px, 3.1992cqw, 22.40px);
  background: #e5deca url('assets/notes/limestone-backplate.webp') center bottom / cover no-repeat;
}
#notes .note-trigger, #notes .note-bottle-static {
  width: var(--bottle-width);
  max-width: none;
  bottom: calc(16% - var(--alpha-tail));
}
#notes .note-visual::before {
  left: 50%;
  bottom: calc(16% - 8px);
  width: var(--bottle-width);
  height: 16px;
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse 31% 17% at 50% 50%, rgba(37, 31, 23, .68), rgba(37, 31, 23, .28) 55%, transparent 100%),
    radial-gradient(ellipse 45% 27% at 64% 57%, rgba(56, 49, 38, .29), rgba(56, 49, 38, .12) 58%, transparent 100%);
  pointer-events: none;
}
#notes .note-bottle { filter: none; }
#notes .note-trigger:hover .note-bottle { transform: none; }
#notes .note-trigger-caption, #notes .note-botanical span { color: var(--ink); text-shadow: 0 1px 3px #f5f0dc; }
#notes .note-trigger:focus-visible .note-bottle { outline-color: var(--ink); }
@media (max-width: 680px) {
  #notes .note-visual {
    --bottle-width: clamp(112px, 26cqw, 144px);
    --alpha-tail: clamp(13.78px, 3.1992cqw, 17.72px);
  }
}