/* r11-s6g.css (2026-10-20): #s6 item 2, "169 gifts for employees with long service": the quiet gift
   plot (the owner's Quiet Editorial pick). Seven sunflower clusters in one row, one dot per gift (area =
   count), the 42 gold chains in gold, an italic serif label under each. Static SVG in the markup
   (scratchpad r11/frags/s6b.html, written by s6g-tools/gen_s6b.py): no JS, nothing moves but story.js's
   once-only entrance (the row is a data-reveal="list": the clusters fade in left to right).
   Desktop only (#s6 .dk.r11-sec).

   Grid: the clusters' centres sit at one even pitch, set so that the first cluster's left edge is on the
   item's text edge (the heading, the caption) and the last label ends on the column's right edge. The
   clusters stand on one baseline: the foot of a band as tall as the largest (105px), the labels share one
   top line 16px under it (polish r1: the band now applies; before, the clusters hung from the top and the
   labels sat at seven heights). 768-1023: four, then three, at the same kind of pitch; each row the same. */

@media (min-width: 768px) {
  .r11-s6g-fig, .r11-s6g { --s6g-band: 105px; }

  .r11-s6g-fig { margin: 0; container-type: inline-size; }

  .r11-s6g-row {
    --s6g-first: 51.5px;   /* half the chains' cluster (103px) */
    --s6g-last: 60px;      /* half the last label, "1 diamond bracelet" */
    --s6g-n: 6;            /* steps between the first and the last centre */
    --s6g-pitch: calc((100cqw - var(--s6g-first) - var(--s6g-last)) / var(--s6g-n));
    display: grid;
    grid-template-columns: repeat(7, var(--s6g-pitch));
    align-items: start;
    margin: 0 0 0 calc(var(--s6g-first) - var(--s6g-pitch) / 2);
    padding: 0;
    list-style: none;
  }
  .r11-s6g-c {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .r11-s6g-dots {
    display: flex;
    align-items: flex-end;             /* one baseline: every cluster stands on the band's foot */
    justify-content: center;
    height: var(--s6g-band);
  }
  .r11-s6g-svg { display: block; overflow: visible; fill: var(--slate-700); }
  .r11-s6g-c.is-gold .r11-s6g-svg { fill: var(--r11-mark); }

  .r11-s6g-l {
    display: block;
    max-width: calc(var(--s6g-pitch) - 12px);
    margin-top: 16px;
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: 15px;
    line-height: 20px;
    font-variant-numeric: lining-nums;
    text-align: center;
    text-wrap: balance;
    color: var(--slate-800);
  }
  .r11-s6g-c.is-gold .r11-s6g-l { color: var(--r11-ink); }

  .r11-s6g-cap { margin-top: 28px; }
  .r11-s6g-cap > .r11-cap { margin-top: 0; }
}

/* 768-1023: one row would crowd; four clusters, then three. The labels keep a short measure (7.4em), so
   the second row's first label ("19 diamond / pendants") never hangs left of the item's text edge. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .r11-s6g-row {
    --s6g-n: 3;
    grid-template-columns: repeat(4, var(--s6g-pitch));
    row-gap: 28px;
  }
  .r11-s6g-l { max-width: min(calc(var(--s6g-pitch) - 12px), 7.4em); }
}