/* r11-s2.css: 02 The data, desktop (owner sketch 1; owner fixes 2026-10-20). A hand-written "the data"
   (r11-pen) over the lead question (r11-q: bold sans, black), the dim lede, then the source card (about
   30% narrower than the first build) with its source line under it, and the three figures set large in
   a second card, no label. Entrances: story.js [data-reveal], fade only in #s2. Phone: the r10 beat (.ph). */

@media (min-width: 768px) {
  #s2 .r11-head > .r11-s2-lede { margin-top: 10px; max-width: 46em; }

  /* The pair: the source card (480 of the 1200 column) | the figures; the source line under the card. */
  .r11-s2-pair {
    display: grid;
    grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: var(--r11-gap);
    align-items: stretch;
  }
  .r11-s2-pair > * { margin: 0; min-width: 0; }
  /* One card inset with s5's email cards (polish r3, recruiter): 24px, was the shared 28px. At 1512 the card
     text starts at x 181, the same as the s5 card text. */
  #s2 .r11-card { padding: 24px; }

  /* Left: the source. */
  .r11-s2-src { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; }
  .r11-s2-src > * { margin: 0; }
  .r11-s2-lead {
    margin-top: 14px;
    font: 400 23px/1.3 var(--serif);
    letter-spacing: -.01em;
    font-optical-sizing: auto;
    text-wrap: balance;
    color: var(--slate-900);
  }
  .r11-s2-src > .r11-s2-body { margin-top: 14px; }
  .r11-s2-body > p {
    margin: 0;
    font: 400 15px/1.6 var(--sans);
    text-wrap: pretty;
    color: var(--slate-800);
  }
  .r11-s2-body > p + p { margin-top: 10px; }
  .r11-s2-src > .r11-s2-link { margin-top: auto; padding-top: 20px; }
  .r11-s2-link a {
    font: 600 14px/20px var(--sans);
    color: var(--slate-900);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--slate-500);
    text-underline-offset: 4px;
    transition: text-decoration-color .18s ease;   /* the s5 "Enlarge" hover's timing (polish r3) */
  }
  .r11-s2-link a:hover { text-decoration-color: currentColor; }   /* slate-900, not gold: gold marks the finding only (polish r3; was var(--r11-ink)) */
  .r11-s2-link a:focus-visible { outline: 2px solid var(--slate-900); outline-offset: 2px; border-radius: 3px; }
  .r11-s2-arr { color: var(--r11-ink); text-decoration: none; }

  /* 12px: the page's one caption-to-source step, as in s4 and s5 (polish r2: was 10px). */
  .r11-s2-pair > .r11-s2-srcline { grid-column: 1; grid-row: 2; margin-top: 12px; }

  /* Right: the three figures as one sentence (the owner's pick D, 2026-10-20): the figures large in the
     serif, the words between them small and italic, a gold pen stroke under the invoice count. The
     sentence block sits in the middle of the card (both ways), its lines left-aligned. */
  .r11-s2-facts { grid-column: 2; grid-row: 1; display: flex; align-items: center; justify-content: center; }
  .r11-s2-sent { display: grid; row-gap: 16px; }
  .r11-s2-line {
    margin: 0;
    font-family: var(--serif);
    line-height: 1.05;
    font-optical-sizing: auto;
    font-variant-numeric: lining-nums;
    color: #1B1C1F;
  }
  .r11-s2-fig { font-size: clamp(38px, 4vw, 58px); letter-spacing: -.025em; white-space: nowrap; }
  .r11-s2-fig--s { font-size: clamp(28px, 2.8vw, 40px); letter-spacing: -.02em; }
  .r11-s2-w {
    font-size: clamp(20px, 2.1vw, 30px);
    font-style: italic;
    letter-spacing: 0;
    color: var(--slate-800);
  }
  .r11-s2-mark { position: relative; display: inline-block; }
  .r11-s2-ul {
    position: absolute;
    left: -2%;
    bottom: -.2em;
    width: 104%;
    height: .24em;
    overflow: visible;
  }
  .r11-s2-ul path { fill: none; stroke: var(--r11-mark); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
}

/* Narrow desktop (768-1023): the cards share the column evenly. */
@media (min-width: 768px) and (max-width: 1023px) {
  .r11-s2-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}