/* m-base.css (m12, 2026-10-20): the PHONE version of the r11 desktop design. Phone only: every rule sits
   inside @media (max-width: 767px); desktop must stay pixel-identical. Spec: tools/mob/SPEC-M.md,
   section "The phone system" (the numbers below are the ones written there; change both together).

   What this file owns: the phone tokens (--m-*), the section rhythm of .step.r11, and the classes every
   r11 section shares (.r11-sec .r11-head .r11-pen .r11-q .r11-h .r11-lede .r11-p .r11-card .r11-label
   .r11-cap .r11-src .r11-num .r11-ink .r11-ink-svg). Section parts (s2's cards' insides, s4's ledger,
   s5's emails, s6's steps, the end) belong to m-s2 / m-s4 / m-s5 / m-s6 / m-end.css, which load after
   this file and reuse the tokens.

   The reference is #s3 on the phone (off limits, never styled here): a 24px gutter, its title Newsreader
   32/36 weight 450, its lede 17/27, its map card radius 12, its caption 13/18 in #5D6168, 28px of
   padding above and below (story.css --join). Every section around it is set to the same scale. */

@media (max-width: 767px) {

  :root {
    /* ---------- Space: one scale, used everywhere ---------- */
    --m-gutter: 24px;           /* = story.css --story-left / --story-right on the phone (hero, #s3) */
    --m-1: 4px;
    --m-2: 8px;
    --m-3: 12px;
    --m-4: 16px;
    --m-5: 24px;
    --m-6: 32px;
    --m-7: 48px;
    --m-8: 72px;

    --m-sec: var(--m-8);        /* last line of a section -> first line (the pen) of the next: 72px */
    --m-sec-half: 36px;         /* .step.r11 padding top and bottom (36 + 36 = --m-sec) */
    --m-head: var(--m-5);       /* a head (pen, heading, lede) -> its first block: 24px */
    --m-block: var(--m-4);      /* block -> block inside a section (card -> card): 16px */
    --m-fig: var(--m-5);        /* text -> a figure, a figure -> the text after it: 24px */
    --m-cap: var(--m-2);        /* a card / figure -> its caption or source line: 8px */
    --m-measure: 34em;          /* text never runs wider (only bites from ~600px wide) */

    /* ---------- Cards and touch ---------- */
    --m-card-pad: 20px;         /* white paper card: 20px in, so its text measure is 312px at 402 */
    --m-card-r: 12px;           /* = the map card's radius on the phone */
    --m-panel-r: 8px;           /* inner panels and strips (s4's supplier strip, s5's invoice list, s8's boxes) */
    --m-tap: 44px;              /* every control's hit area, at least */

    /* ---------- Colour ---------- */
    /* the page's one flagged pale gold, = the desktop's --r11-wash since its polish r3: s4's flagged row,
       s5's 24862111.pdf chip, the Score box, the sheets' find rows and flag note (round 4, B2 / D7) */
    --m-wash: #F6F0E0;

    /* ---------- Type (402px values; the clamps follow #s3's title down to 360px) ---------- */
    --m-h: var(--title-size);           /* section heading, serif 450: 32px (= #s3's title) */
    --m-h-lh: var(--title-lh);          /* 36px (34 under 390, 32 under 375: story.css) */
    --m-q: clamp(25px, 7vw, 28px);      /* the two questions, bold sans: 28px */
    --m-q-lh: 34px;                     /* whole px: 32 under 390px, 30 under 360px */
    --m-pen: clamp(24px, 6.5vw, 26px);  /* the gold pen label, Caveat 600: 26px */
    --m-pen-lh: 28px;
    --m-lede: 17px;   --m-lede-lh: 27px;   /* = #s3's lede */
    --m-body: 16px;   --m-body-lh: 26px;   /* running text outside cards */
    --m-small: 15px;  --m-small-lh: 24px;  /* text inside cards, step text, email bodies */
    --m-meta: 13px;   --m-meta-lh: 18px;   /* captions, meta lines (= the map's caption) */
    --m-src: 12px;    --m-src-lh: 17px;    /* source lines: the smallest text a reader must read */
    /* the page's one label voice (= the desktop's .r11-label since polish r1): IBM Plex Mono 500 11/16,
       uppercase, tracked .1em. "DATA FROM", s4's head and supplier key, "3 DAYS LATER", the s6 kickers and
       the footer heads all use these two tokens (round 3, B1 / the director's D1). */
    --m-label: 11px;  --m-label-lh: 16px;
    --m-label-track: .1em;
    --m-label-font: 500 var(--m-label)/var(--m-label-lh) var(--mono);
    --m-step-h: 22px; --m-step-h-lh: 27px; /* step / sub-heading in the serif, 500 */
    --m-ink: 24px;    --m-ink-lh: 28px;    /* the gold hand (questions, prices), Caveat 600 */

    /* ---------- s6: the gold rail of the three steps (m-s6.css draws it) ---------- */
    --m-rail-n: 28px;           /* the number's circle */
    --m-rail-w: 1.5px;          /* the rail's stroke */
    --m-rail-x: 13.25px;        /* the rail's left edge: centred under the circle */
    --m-rail-indent: 40px;      /* text and figure hang here: a 314px column at 402 */
    --m-step-gap: 48px;         /* step -> step (desktop 72) */
  }

  /* ---------- Section rhythm: 72px between any two sections ----------
     .step.r11 has no padding of its own on the phone (story-v3.css .step.v3); #s3 keeps its 28px
     (story.css --join), so the two r11 sections that touch it give 72 - 28 = 44px on that side. */
  .step.r11 { --step-pt: var(--m-sec-half); --step-pb: var(--m-sec-half); }
  #s2.r11 { --step-pt: var(--m-7); --step-pb: calc(var(--m-sec) - var(--join, 28px)); }   /* 48px under the hero */
  #s4.r11 { --step-pt: calc(var(--m-sec) - var(--join, 28px)); }
  /* #s7 is the disclaimer's full-bleed band: the band itself is the section's box, so the section adds
     nothing; m-end.css sets the band's margin-top to var(--m-sec-half), so its edge sits 72px under s6. */
  #s7.r11 { --step-pt: 0px; --step-pb: 0px; }

  .r11-sec { max-width: none; min-width: 0; }
  .r11-sec > *,
  .r11-head > * { margin: 0; }

  /* ---------- The head: pen, heading or question, lede ---------- */
  .r11-head { padding: 0; }
  .r11-sec .r11-head + * { margin-top: var(--m-head); }   /* also when the head sits in a wrapper (s5) */

  .r11-pen {
    display: block;
    margin: 0 0 var(--m-1);
    font-family: 'Caveat', 'Bradley Hand', cursive;
    font-weight: 600;
    font-size: var(--m-pen);
    line-height: var(--m-pen-lh);
    letter-spacing: 0;
    color: var(--r11-ink);
  }

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

  .r11-q {
    max-width: none;
    font-family: var(--sans);
    font-weight: 700;
    font-size: var(--m-q);
    line-height: var(--m-q-lh);
    letter-spacing: -.012em;
    text-wrap: balance;
    color: #1B1C1F;
  }

  .r11-lede {
    max-width: var(--m-measure);
    margin: 0;
    font-family: var(--sans);
    font-weight: 400;
    font-size: var(--m-lede);
    line-height: var(--m-lede-lh);
    text-wrap: pretty;
    color: var(--r11-dim);
  }
  .r11-head > .r11-h + .r11-lede { margin-top: var(--m-4); }   /* = #s3: title -> lede 16px */
  .r11-head > .r11-q + .r11-lede { margin-top: var(--m-3); }   /* the bold sans sits tighter: 12px */

  .r11-p {
    max-width: var(--m-measure);
    margin: 0;
    font: 400 var(--m-body)/var(--m-body-lh) var(--sans);
    text-wrap: pretty;
    color: var(--slate-800);
  }

  /* ---------- Paper card: white, a hairline, no shadow (as on desktop) ---------- */
  .r11-card {
    box-sizing: border-box;
    min-width: 0;
    background: var(--white);
    border: 1px solid var(--slate-200);
    border-radius: var(--m-card-r);
    padding: var(--m-card-pad);
  }

  /* ---------- Labels, captions, source lines ---------- */
  .r11-label {
    margin: 0;
    font: var(--m-label-font);
    letter-spacing: var(--m-label-track);
    text-transform: uppercase;
    color: var(--slate-800);
  }

  .r11-cap {
    max-width: var(--m-measure);
    margin: var(--m-cap) 0 0;
    font: 400 var(--m-meta)/var(--m-meta-lh) var(--sans);
    text-wrap: pretty;
    color: var(--hero-lede);   /* = the map's caption */
  }
  .r11-cap b,
  .r11-fig-n { font-weight: 600; color: var(--slate-800); }

  .r11-src {
    max-width: var(--m-measure);
    margin: var(--m-cap) 0 0;
    font: 400 var(--m-src)/var(--m-src-lh) var(--sans);
    text-wrap: pretty;
    color: var(--ink-dim);
  }
  .r11-cap + .r11-src { margin-top: var(--m-3); }   /* 12: the caption belongs to its figure (8), the source is a footnote */

  /* ---------- Figures in the serif ---------- */
  .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 ---------- */
  .r11-ink {
    font-family: 'Caveat', 'Bradley Hand', cursive;
    font-weight: 600;
    font-size: var(--m-ink);
    line-height: var(--m-ink-lh);
    letter-spacing: 0;
    text-wrap: balance;
    color: var(--r11-ink);
  }
  .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;
  }
}

/* Narrow phones: the question's line box follows its clamp (26.25px at 375, 25.2 at 360); under 360px
   (story.css sets #s3's lede 16/26 there) the ledes follow. */
@media (max-width: 389px) {
  :root { --m-q-lh: 32px; }
}
@media (max-width: 359px) {
  :root { --m-q-lh: 30px; --m-lede: 16px; --m-lede-lh: 26px; }
}