/* Phone reading scale for Turbulent Ground (Graham, 2 Oct 2026). Separate from
   tokens.css on purpose: it defines only --read-* and --nav-related sizes, so it
   can be linked on any page without changing that page's colours. */

/* ── Reading on phones (Graham, 2 Oct 2026) ──────────────────────────
   Below 640px NO visible text is under 18px. Body text and card summaries are
   20px at 1.55; tappable text (links, buttons, tabs, card titles) is at least
   20px; supporting text (dates, bylines, labels, eyebrows) is at least 18px;
   headings stay larger than body. Pages opt in with class="reading-copy" on the
   content and class="reading-page" on <body>; 641px and up is untouched.
   Sizes are px, not rem, because pages set different root sizes.

   COVERED (class="reading-page"): the ten articles, /privacy, /learnings, /about,
   the /take-part start-screen intro, the homepage, /writing and
   /research/privacy (a redirect whose no-JS fallback shows the text), and the
   shared footer on every page that includes it.

   EXEMPT on purpose (small text is expected and allowed; mirrored in the allowlist
   in tests/smoke/mobile-nav.spec.js): the admin pages
   (/admin/invitations, /research/admin-tools, /research/admin), the Decap CMS
   (/admin), and the internal preview and email pages (research/*-preview.html,
   research/ux-review.html, research/legacy-v3.html, research/results-preview-*.html).

   DEFERRED, not exempt: the research survey after the start screen (consent,
   context, the 24 statements, response controls, results). It is a measurement
   instrument, so it changes only through a methodology-reviewed proposal
   (research/openspec/changes/survey-mobile-type-scale). */
@media (max-width: 640px) {
  :root {
    --read-size: 20px;          /* body text, card summaries */
    --read-leading: 1.55;
    --read-support: 18px;       /* dates, bylines, labels, eyebrows, notes */
    --read-tap: 20px;           /* links, buttons, tabs, card titles: 20px or larger */
    --read-heading-min: 24px;   /* card titles and other small headings stay above body */
    --read-para: 1em;
    --read-h2-top: 1.75em;
    --read-h2-bottom: 0.5em;
    --read-page-top: 28px;      /* gap between the header or hero and the first content */
  }
  body .reading-copy p,
  body .reading-copy li,
  body .reading-copy dd,
  body .reading-copy dt { font-size: var(--read-size); line-height: var(--read-leading); }
  body .reading-copy p { margin-bottom: var(--read-para); }
  body .reading-copy a { overflow-wrap: anywhere; }   /* long addresses must wrap at 20px */
  body .reading-copy h2 { margin-top: var(--read-h2-top); margin-bottom: var(--read-h2-bottom); }
  /* Text sized with inline style="font-size:Npx" (older pages): 10-13px labels
     become supporting text, 14-18px copy becomes body text. !important is needed
     to beat the inline style. */
  body.reading-page [style*="font-size:10px"],
  body.reading-page [style*="font-size:11px"],
  body.reading-page [style*="font-size:12px"],
  body.reading-page [style*="font-size:13px"] { font-size: var(--read-support) !important; line-height: 1.5 !important; }
  body.reading-page [style*="font-size:14px"],
  body.reading-page [style*="font-size:15px"],
  body.reading-page [style*="font-size:16px"],
  body.reading-page [style*="font-size:17px"],
  body.reading-page [style*="font-size:18px"] { font-size: var(--read-size) !important; line-height: var(--read-leading) !important; }
  /* Inline two-column grids stack on phones (class="stack-sm"). */
  body .stack-sm { grid-template-columns: 1fr !important; gap: 32px !important; }
}

/* ── CTA rule (Graham, 2 Oct 2026) ───────────────────────────────────
   Every call to action fits on ONE line at 320px. Desktop keeps the long label
   (.cta-long); at 640px and below the button shows the short label (.cta-short)
   and the line "Put your experience on the record" (.cta-lead) sits above it.
   Button text is 18px (the floor) with about 12px 20px padding. Markup:
     <p class="cta-lead">Put your experience on the record</p>
     <a class="btn ..."><span class="cta-long">...</span><span class="cta-short">Take part · 10 min</span></a> */
.cta-short, .cta-lead { display: none; }
@media (max-width: 640px) {
  .cta-long { display: none; }
  .cta-short { display: inline; }
  .cta-lead { display: block; font-size: 18px; line-height: 1.4; color: var(--ink-mid, #c8b89a); margin: 0 0 12px; }
  * + .cta-lead { margin-top: 20px; }   /* space above the line when something precedes it */
  /* !important: pages set their own button sizes and wrapping (e.g. body.reading-page .btn-primary) */
  .cta-btn, .btn.cta-btn { font-size: 18px !important; padding: 12px 20px !important; white-space: nowrap !important; max-width: 100%; }
}