/* r11-base.css (2026-10-20): the shared system of the desktop redesign below the hero (the owner's
   three sketches). A research publication, not a scroll-story: compact sections that follow each other
   at a steady rhythm, a hairline above every section, a small numbered kicker that matches the rail,
   serif headings, sans body, figure labels and source lines like a research note or an audit report.
   One accent: the gold of the site (--gold-lo for text and ink, --tile-gold for marks).

   Desktop only (768px and up), except where a rule says otherwise. The phone keeps the r10 story
   (.ph blocks); r11 blocks live in .dk.r11-sec (story-v3.css switches .dk / .ph at 768).
   Section files: r11-s2 (question + data), r11-s3 (the map's frame), r11-s4 (the outlier's ledger),
   r11-s5 (the emails), r11-s6t (the two timelines + gold questions), r11-s6g (the gifts), r11-s7
   (the disclaimer, every width). Entrances: story.js [data-reveal] (fade only in #s2 / #s3). */

:root {
  --r11-h: 34px;              /* section headings */
  --r11-h-lh: 1.14;
  --r11-measure: 640px;       /* the text column */
  --r11-rule: var(--slate-200);
  --r11-radius: 10px;
  --r11-pad: 28px;            /* card padding */
  --r11-gap: 24px;            /* between cards / columns */
  --r11-ink: var(--gold-lo);  /* gold text, the hand-drawn ink */
  --r11-mark: var(--tile-gold);
  --r11-dim: var(--hero-lede);   /* #5D6168: "a tiny bit dimmed" body (6.2:1 on white, 5.8:1 on slate-50) */
}

@media (min-width: 768px) {

  /* The one 'flagged' pale gold (polish r3): the wash behind the flagged credit note. The other files read
     it as var(--r11-wash, #F6F0E0), so each still works on its own. */
  :root { --r11-wash: #F6F0E0; }

  /* ---------- Rhythm: sections 112px apart, no full-screen beats ---------- */
  .step.r11 { --step-pt: 56px; --step-pb: 56px; }
  .r11-sec { max-width: var(--story-wide); }
  .r11-sec > * { margin: 0; }

  /* The section head: kicker, heading, lede. No rule between sections (owner, 2026-10-20). */
  .r11-head { padding-top: 0; }
  .r11-head > * { margin: 0; }

  .r11-kicker {
    display: block;
    margin: 0 0 12px;
    font: 500 11.5px/16px var(--mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--slate-800);
  }
  .r11-kn { color: var(--r11-ink); margin-right: .9em; }

  .r11-h {
    font-family: var(--serif);
    font-weight: 500;
    font-size: var(--r11-h);
    line-height: var(--r11-h-lh);
    letter-spacing: -.016em;
    font-optical-sizing: auto;
    text-wrap: balance;
    color: var(--slate-900);
  }

  /* The two questions (s2's lead, s6's "What was inside the invoice?"): bold sans in black, easy to read
     (owner, 2026-10-20: no gold, open tracking). 34px from 1200px up, as the serif heads (polish r2: it was
     30.7px at 1280); 29.6px at 1024, 28px at 768. */
  .r11-q {
    max-width: 30em;
    font: 700 clamp(28px, calc(4px + 2.5vw), 34px)/1.2 var(--sans);
    letter-spacing: -.012em;
    text-wrap: balance;
    color: #1B1C1F;
  }

  /* The pen: a hand-written gold label (Caveat, as the map's note), in place of a kicker. */
  .r11-pen {
    display: block;
    margin: 0 0 4px;
    font-family: 'Caveat', 'Bradley Hand', cursive;
    font-weight: 600;
    font-size: 28px;
    line-height: 1.1;
    color: var(--r11-ink);
  }

  .r11-lede {
    max-width: 46em;            /* 828px at 18px: s2's measure, so the s4 and s6 ledes hold one line (polish r1) */
    font: 400 18px/1.55 var(--sans);
    text-wrap: balance;         /* a two-line lede (s5) splits into two even lines, not a full line over a short
                                   one; the one-line ledes (s2, s4, s6) are unaffected (polish r2) */
    color: var(--r11-dim);
  }
  .r11-head > .r11-lede { margin-top: 12px; }

  .r11-p {
    max-width: var(--r11-measure);
    font: 400 16px/1.6 var(--sans);
    text-wrap: pretty;
    color: var(--slate-800);
  }

  /* The body under a head starts 28px down. */
  .r11-head + * { margin-top: 28px; }

  /* A paper card: white, a hairline, no shadow (the site's Source / Supplier paper). */
  .r11-card {
    background: var(--white);
    border: 1px solid var(--slate-200);
    border-radius: var(--r11-radius);
    padding: var(--r11-pad);
  }

  /* Small uppercase label inside cards and over figures: the page's one label style (mono 11/16, .1em),
     shared by s2's "Data from", s4's "The supplier" and the ledger's column heads (polish r1). */
  .r11-label {
    font: 500 11px/16px var(--mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--slate-800);
  }

  /* Figure caption and source line: "Figure 2." in the label weight, the rest dim; a source line under it.
     13/18, the same as the s3 map's caption (polish r2: was 13/19). One caption tier and one quieter source
     tier (polish r3): the caption in --r11-dim (#5D6168, the s3 map caption's colour), the source line stays
     --ink-dim (#686E7A). Used only in #s4. */
  .r11-cap {
    max-width: 52em;
    margin-top: 12px;
    font: 400 13px/18px var(--sans);
    text-wrap: pretty;
    color: var(--r11-dim);
  }
  .r11-cap b, .r11-fig-n { font-weight: 600; color: var(--slate-800); }
  .r11-src {
    margin-top: 4px;
    font: 400 12px/17px var(--sans);
    color: var(--ink-dim);
  }

  /* Aligned dates (polish r3): a cell whose day has one digit ("1 Dec 2023") gets a hidden tabular zero
     in front, exactly one figure wide, so its month and year sit on the same x as "15 Dec 2023" above it.
     Generated and hidden: not read aloud, not copied. Every .r11-d1 cell sets tabular figures (the s4
     ledger: tabular-nums; the sheets' .is-nw: lining-nums tabular-nums). No rule below 768, so the phone
     is unchanged. (Not U+2007 in the text: that would change the copy and the phone.) */
  .r11-d1::before { content: "0"; visibility: hidden; }

  /* Figures in the serif: tabular lining numbers. */
  .r11-num {
    font-family: var(--serif);
    font-weight: 400;
    font-variant-numeric: lining-nums tabular-nums;
    letter-spacing: -.02em;
    font-optical-sizing: auto;
    color: var(--slate-900);
    white-space: nowrap;
  }

  /* The gold hand: the map's note (story-map.css .aemap-ink-note), for the questions in s6. */
  .r11-ink {
    font-family: 'Caveat', 'Bradley Hand', cursive;
    font-weight: 600;
    font-size: 27px;
    line-height: 1.1;
    letter-spacing: 0;
    color: var(--r11-ink);
    text-wrap: balance;
  }
  .r11-ink-svg { overflow: visible; }
  .r11-ink-svg path {
    fill: none;
    stroke: var(--r11-ink);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .92;
  }
}

@media (min-width: 768px) {
  /* ---------- Numbered items inside a section (s6: three findings) ----------
     <div class="r11-item"><div class="r11-item-head"><span class="r11-item-n">1</span><h3 class="r11-item-h">…</h3></div>
     <div class="r11-item-body">…</div></div>. The body hangs under the heading's text (--r11-indent). */
  .r11-sec { --r11-indent: 40px; }
  .r11-item { margin-top: 64px; }
  .r11-head + .r11-item { margin-top: 36px; }
  .r11-item-head {
    display: grid;
    grid-template-columns: var(--r11-indent) minmax(0, 1fr);
    align-items: baseline;
  }
  .r11-item-head > * { margin: 0; }
  .r11-item-n {
    font: 500 13px/1 var(--mono);
    letter-spacing: .04em;
    color: var(--r11-ink);
  }
  .r11-item-h {
    max-width: 30em;
    font-family: var(--serif);
    font-weight: 500;
    font-size: 24px;
    line-height: 1.25;
    letter-spacing: -.01em;
    font-optical-sizing: auto;
    text-wrap: balance;
    color: var(--slate-900);
  }
  .r11-item-body { margin-top: 20px; padding-left: var(--r11-indent); }
  .r11-item-body > * { margin: 0; }
}

/* Owner, 2026-10-20: hide the Method's walk-through ("Each invoice becomes 8 numbers…", the five-step
   pipeline, the P(account | committee) gloss) and the evaluation quote, for now. Every width; the markup
   stays (tools/build_method.py), so taking these two lines out brings them back. */
#s8 .mx-how,
#s8 .mx-eval { display: none; }
/* With those two hidden, the Method's last block keeps only the data line: no full-screen beat around it. */
#s8 .mx-end { min-height: 0; justify-content: flex-start; padding-top: 32px; padding-bottom: 32px; }