/* jdtheme26 - THE THEME'S NOTE TAG (2026-10-03, operator: the standard background for small remark / note elements).
   A short remark printed on a hand-painted pink brush stroke (assets/img/note/jd-note-bg-720.webp, 1200 / 720 copies from jd_note_bg.png).
   USE   <p class="jd-note-tag">text</p>                       straight
         <p class="jd-note-tag jd-note-tag--tilt">text</p>     tilted (angle = --jd-note-tag-tilt)
   The picture stretches to the text box; keep the text short (one or two short lines). Size / weight / letter-spacing / padding / colour / angle are tokens (--jd-note-tag-*) - set them on the
   element's own block class, never with a stronger selector. */
.jd-note-tag {
  --jd-note-tag-img: url("../img/note/jd-note-bg-720.webp");
  --jd-note-tag-fs: 12px;
  --jd-note-tag-color: var(--jd-text-title);
  --jd-note-tag-tilt: -4deg;
  --jd-note-tag-fw: 500;
  --jd-note-tag-ls: .06em;
  --jd-note-tag-pad: 1em 1.8em 1.1em;
  --jd-note-tag-ff: inherit;   /* font family token; default = the page font */
  --jd-note-tag-lh: 1.5;
  display: inline-block;
  margin: 0;
  padding: var(--jd-note-tag-pad);
  background: var(--jd-note-tag-img) center / 100% 100% no-repeat;
  color: var(--jd-note-tag-color);
  font-family: var(--jd-note-tag-ff);
  font-size: var(--jd-note-tag-fs);
  font-weight: var(--jd-note-tag-fw);
  line-height: var(--jd-note-tag-lh);
  letter-spacing: var(--jd-note-tag-ls);
  text-align: center;
}
.jd-note-tag--tilt {
  transform: rotate(var(--jd-note-tag-tilt));
}