/* ==========================================================================
   VerityAgentic reading typography
   Added 2026-08-02. This file is the single place the reading measure is set,
   for the marketing pages and, since 2026-08-02, the article template too.
   Change it here, not in a page's <style> block.

   The standard (Annette, 2026-08-01):
     body prose at 20px or larger
     65 to 75 characters on a line

   Body font: regular-width Arial (Annette's decision, 2026-08-02)
   ---------------------------------------------------------------
   Body copy was "Arial Narrow" until 2026-08-02. It moved to
   `Arial, "Helvetica Neue", Helvetica, sans-serif` because a condensed face is
   built for headlines, not for reading, and because Arial Narrow is not
   installed on iOS, so iPhone visitors were falling through to Helvetica Neue
   and seeing non-condensed type anyway. The site now renders one width
   everywhere. Impact and Oswald keep the headlines and must stay condensed.

   Why the cap is never in ch units, and why it is in rem
   ------------------------------------------------------
   One ch is the width of the digit zero in the current font, so any font change
   silently moves every cap. A 62ch cap under the old Arial Narrow collapsed to
   roughly 480px and stranded the reading column; nine of them were on
   bottleneck-audit.html, which is why it rendered the narrowest text on the
   site. Thirteen ch caps were retired from this site on 2026-08-02. Do not
   bring any back.

   The caps are stored in rem rather than px (converted 2026-08-02) so the
   column widens for a reader who raises their browser's default font size,
   instead of holding a fixed pixel column and squeezing the enlarged type into
   fewer characters. One rem is 16px at the default root, so every value below
   renders identically to the pixel value it replaced. The pixel equivalent is
   in the comment beside each one, because the measuring is done in pixels.

   Where 712px comes from
   ----------------------
   Measured on the rendered page in headless Chromium at a 1440px viewport, by
   walking DOM ranges to find where the browser actually broke each line.

   The previous value was 584px, calibrated in Arial Narrow. Regular Arial is
   wider per character (the same string measures 296.1px in Arial Narrow versus
   361.1px in Arial at 16px), so every measure was scaled by 361.1 / 296.1 =
   1.2195 to hold the same character count. Leaving them at 584px would have
   dropped the pages to about 57 characters a line, overshooting the band in the
   other direction.

   .article-container moved with it: 640px - 56px padding = 584px became
   768px - 56px = 712px, so the whole site still reads at one width.

   IF THE BODY FONT EVER CHANGES AGAIN, these four numbers must be re-measured.
   Re-run: py -3.13 scripts/measure-line-lengths.py

   The larger tiers below keep the same character count for type that is
   deliberately bigger than body copy: the cap scales with the font size, so a
   23px hero lede at 672px still breaks at about 70 characters.

   Weight moves the count as much as size does
   -------------------------------------------
   Corrected 2026-08-02. The larger tiers were first derived by scaling the
   20px cap by the font size alone, which ignores that this site sets almost
   every emphatic line in bold or extrabold, and heavier Arial puts fewer
   characters in the same column. Measured, --measure-sub at its old 783px was
   rendering the 22px weight-800 section subheads at 57 to 67 characters, not
   the 70 the arithmetic promised. It was swept against the built pages and
   moved to 900px, which reads 70. --measure-bold is the same correction for
   20px copy set at weight 700, which needs 656px rather than the 712px that
   suits the same size at normal weight.

   Scope
   -----
   Only the reading column narrows. Section backgrounds stay full bleed, and
   card grids, tables and image rows are left at their own widths on purpose,
   because a table that loses a column is a worse fault than a long line.
   ========================================================================== */

:root {
  --measure:       44.5rem;      /* 712px, 20px body prose */
  --measure-lede:  46.75rem;     /* 748px, 21px page and section ledes */
  --measure-sub:   56.25rem;     /* 900px, 22px section subheads at weight 800 */
  --measure-hero:  51.25rem;     /* 820px, 23px hero lede */
  --measure-bold:  41rem;        /* 656px, 20px body copy set bold */

  /* The article template. Its container carries 28px of padding on each side,
     so this outer value is the text column plus 56px. See section 3. */
  --measure-article: 44rem;      /* 704px, a 648px column plus its padding */
}

/* --------------------------------------------------------------------------
   1. Body prose to 20px
   Every selector below is running prose that was measured under 20px.
   -------------------------------------------------------------------------- */

.audit-lede,
.faq-home-a,
.proof-card p,
.proof-quote,
.intro-copy p,
.story-copy p,
.story-block p,
.capgemini-callout p,
.faq-a,
.build-note p,
.article-card p,
.intro-body,
.track-intro,
.track-note,
.track-list li,
.prose-block p,
.tried-card p,
.tried-note,
.ms-intro,
.ms-foot,
.next-list li,
.next-note,
.step-card p,
.feature-card p,
.score-copy p,
.prose p,
.prose li,
.section-inner.narrow > p {
  font-size: 20px;
}

/* Type that is deliberately larger than body copy keeps its size; it only
   needs the matching wider cap so the character count stays the same. */
.hero-copy p                       { font-size: 23px; }
.services-sub                      { font-size: 22px; }
.header-sub, .page-sub, .hero-sub  { font-size: 21px; }

/* --------------------------------------------------------------------------
   2. The reading measure
   Applied to the prose element itself wherever possible, so a container's
   padding cannot quietly eat the column. min() keeps small screens untouched.
   -------------------------------------------------------------------------- */

.audit-lede,
.faq-home-a,
.faq-a,
.build-note p,
.intro-copy p,
.story-copy p,
.story-block p,
.capgemini-callout p,
.intro-body,
.track-intro,
.prose-block p,
.tried-note,
.ms-intro,
.ms-foot,
.next-note,
.proof-quote,
.prose p,
.prose li,
.score-copy p,
.section-inner.narrow > p {
  max-width: min(100%, var(--measure));
}

.hero-copy p                       { max-width: min(100%, var(--measure-hero)); }
.services-sub                      { max-width: min(100%, var(--measure-sub)); }
.header-sub, .page-sub, .hero-sub  { max-width: min(100%, var(--measure-lede)); }

/* Bold standfirst paragraphs. These carried their own hardcoded 560px and
   584px caps inline on about.html, contact.html and the coaches page, left
   over from the Arial Narrow calibration; in regular Arial they were reading
   about 59 characters and standing well short of the column beside them. The
   caps were deleted from the markup so this file owns them. */
.bold-copy {
  max-width: min(100%, var(--measure-bold));
}

/* Plain prose containers, so the block reads as one column rather than a
   ragged stack of differently sized paragraphs. */
.prose-block,
.story-block,
.faq-home-list,
.next-list,
.insight-grid .prose,
.score-copy {
  max-width: min(100%, var(--measure));
}

/* Padded or bordered blocks: the cap has to carry the box chrome as well,
   because the site is box-sizing: border-box. */
.capgemini-callout {
  max-width: min(100%, calc(var(--measure) + 64px));   /* 30px padding each side, 4px rule */
}

.faq-list {
  max-width: min(100%, calc(var(--measure) + 56px));   /* 26px padding each side, 2px border */
}

.track-note {
  max-width: min(100%, calc(var(--measure) + 50px));   /* 24px padding each side, 1px border */
}

.ms-card {
  max-width: min(100%, calc(var(--measure) + 50px));   /* 24px padding each side, 1px border */
}

.track-list li {
  max-width: min(100%, calc(var(--measure) + 24px));   /* 24px bullet indent */
}

/* Card grids are deliberately absent from the caps above. Their width is set
   by the grid, and narrowing a card would break the layout for no gain. */


/* --------------------------------------------------------------------------
   3. The article template
   The 27 pages under /articles/ have no shared layout either: each one carries
   its own copy of the same <style> block. Each now links this file after that
   block and takes its measure from here, and the hardcoded container width was
   deleted from all 27, so there is one owner rather than 27.

   Where 704px comes from
   ----------------------
   The container was 768px, giving a 712px column, the same number the
   marketing pages use. It still read too wide: 77 to 78 true characters a line
   against 72 to 74 on the marketing pages at the identical width and size.
   Article prose is the reason. It runs longer, plainer and lighter than the
   marketing copy the 712px was tuned on, which is bold nearly everywhere, and
   bold Arial sets fewer characters into the same column.

   So this value was swept, not calculated: every article page was rendered in
   headless Chromium at a 1440px viewport with the container forced to 640,
   656, 672, 688, 704, 720, 736, 752 and 768px in turn, and the real line
   breaks counted at each step. 704px put all eleven audited articles between
   69 and 71 characters, the middle of the 65 to 75 band. 720px reached 73 on
   two of them and 736px broke the band, so 704 also carries the most headroom.

   Re-run the sweep if the article body font or size ever changes:
   the harness is the same measuring code the audit uses.
   -------------------------------------------------------------------------- */

.article-container {
  max-width: min(100%, var(--measure-article));
}

/* The card grid uses the CONTAINER width, not the reading measure.

   It was capped to var(--measure-article), which put a 704px grid inside a
   1260px container and left the page looking half empty on any normal monitor.
   That was over-applying the reading rule: a card dek is not running prose, and
   its line length is set by the CARD's width, not by shrinking the whole grid.
   Measured against stripe, apple, github, linear and nytimes at 2560px, every
   one of them caps LAYOUT and TEXT separately, which is what this now does.

   Cards stay >=520px via the auto-fill minmax in articles.html, so this is
   two-up on a normal desktop and one-up on a laptop or phone. */
.articles-grid {
  max-width: min(100%, var(--max-container, 1260px));
}

/* --------------------------------------------------------------------------
   5. The 20px floor
   Added 2026-08-03 after Annette spotted that the site still had type under
   20px, a day after the "body prose at 20px" pass.

   WHY IT HAPPENED, because it will happen again otherwise: section 1 raises
   type by NAMING each selector. Anything a page invents that is not on that
   list keeps whatever size its own <style> block set, silently. A live sweep
   found 64 prose blocks between 13px and 19px, the worst being a 13px
   submit-note and 14px feature descriptions on the homepage.

   These are the classes that sweep found. Keeping the list is still fragile,
   so the real fix is to stop each page inventing its own prose sizes; until
   then, add anything new here and re-run:
     py -3.13 scripts/measure-font-sizes.py
   -------------------------------------------------------------------------- */

.feature-desc,
.tl-detail,
.deliver-desc,
.offer-desc,
.submit-note,
.track-close,
.paper-copy,
.aside-sub,
.email-body,
.capacity-line,
.stats-sub,
.faq-home-a,
.proof-quote blockquote,
.free-door p,
.readiness-body,
.origin-text,
.ms-foot,
.next-note {
  font-size: 20px;
}

/* Running prose inside the known prose containers, whatever tag it uses.
   Scoped deliberately: a blanket li/dd/p rule would also hit nav, footer,
   badges and card chrome, which are meant to be small. */
.section-inner p,
.section-inner li,
.section-inner dd,
.ladder-inner p,
.free-door-wrap p,
.end-cta p,
.track-list li,
.faq-list dd,
.deliver-list dd {
  font-size: 20px;
}

/* The stragglers the first pass missed, with the container that actually owns
   them. Each needed the parent chain rather than a bare class, either because
   the page rule was more specific or because the text sits in a plain tag. */
.end-cta .capacity-line,
.end-cta .capacity-line strong,
.form-card p,
.form-aside .expect-list li,
.form-aside .expect-list span,
.ms-card .ms-rows dd,
.services-inner .proof-list li,
.why-card p,
#thank-you p,
.proof-attrib i,
.proof-attrib span {
  font-size: 20px;
}