/*
 * Module: section-q-art
 *
 * From TEMPLATE_interpreted.json (anchor "Q: specific art" at y=1129):
 *   - Q-marker text  x=37 y=1440 w=43  Merriweather 43px #92AB71  "Q:"
 *   - L-bracket vertical    x=28 y=1447 h=30  stroke #FFFFFF 0.76px
 *   - L-bracket horizontal  x=0  y=1462 w=28  stroke #FFFFFF 0.76px
 *       (horizontal extends left from x=28 to x=0;
 *        vertical extends up and down 15px around the horizontal's y=1462)
 *   - Question text  x=94 y=1447 w=434  Merriweather 18px #547332
 *   - Body text      x=36 y=1512 w=528  Merriweather 16px #547332
 *
 * Layout: three-column row at top (bracket | Q-marker | question), then
 * a body row below. No panel fill — sits on white canvas.
 */

.fm-q-art {
  width: 100%;
  background: var(--fm-color-canvas-bg);
}

.fm-q-art-pair { width: 100%; }

.fm-q-art-bracket-cell {
  width: var(--fm-q-art-bracket-w);   /* 28 — the horizontal stroke's extent */
  padding: 0;
  vertical-align: middle;
  text-align: right;
}

.fm-q-art-bracket-rule {
  display: inline-block;
  width: var(--fm-q-art-bracket-w);
  height: 1px;
  background: var(--fm-color-white);
  font-size: 1px;
  line-height: 1px;
}

.fm-q-art-bracket-tick-cell {
  width: 1px;
  padding: 0;
  vertical-align: middle;
}

.fm-q-art-bracket-tick {
  width: 1px;
  height: var(--fm-q-art-bracket-h);   /* 30 */
  background: var(--fm-color-white);
  font-size: 1px;
  line-height: 1px;
}

.fm-q-art-marker-cell {
  width: var(--fm-q-art-marker-w);     /* 60 */
  padding: 0;
  padding-left: 9px;                   /* JSON: Q-marker x=37 − bracket right x=28 = 9 */
  vertical-align: middle;
  text-align: left;
}

.fm-q-art-marker {
  font-family: var(--fm-font-serif);
  font-size: var(--fm-fs-q-marker);
  line-height: 1;
  color: var(--fm-color-q-marker);
  font-style: italic;
  font-weight: 700;
}

.fm-q-art-question-cell {
  padding: 0;
  padding-left: var(--fm-q-art-marker-q-gap);   /* 14 */
  padding-right: var(--fm-body-inset);
  vertical-align: middle;
  font-family: var(--fm-font-serif);
  font-size: var(--fm-fs-question);
  line-height: 1.3;
  color: var(--fm-color-q-text);
}

.fm-q-art-body-cell {
  padding: var(--fm-q-art-q-to-body) var(--fm-body-inset) 0 var(--fm-body-inset);
  font-family: var(--fm-font-serif);
  font-size: var(--fm-fs-body);
  line-height: 1.6;
  color: var(--fm-color-q-text);
}

.fm-q-art-body-cell p { margin: 0; }
.fm-q-art-body-cell p + p { margin-top: 16px; }