/* ============================================================
   v3-tight (2026-11-09, Kevin: "the break points on a lot of our text feel odd, orphans and lines that run too
   long"). Loaded last on every page. Three rules, the ones a typographer would set:
   1. Every headline and every short paragraph breaks into lines of even length (text-wrap: balance), so a
      sub-line never runs wide and then drops one or two words onto a line of their own.
   2. Long reading text (the About page) keeps its full measure and only guards the last line (text-wrap: pretty).
   3. One sub-text size under every headline: 18px on a laptop, 17px on a phone. One body size: 16px.
   tight.js adds the fourth: no line ends on a, an, or, of, to, in, on, by, at.
   ============================================================ */
.h1,.h2,.h3,.prog h3,.cs__cap b,.td-line b,summary{text-wrap:balance}
.c__h1{text-wrap:balance}
.c__sub,.sh__p,.lede,.body,.prog p,.cs__cap i,.faq__a p,.progs__end,.small,.td-line p,.td-qs li{text-wrap:balance}
.fill,.belief .body,.ab-bg{text-wrap:pretty}
#writing b{text-wrap:balance}

/* measures: sub-text never runs wider than about 60 characters */
.sh__p{max-width:60ch}
.sh__h:not(.sh__h--wide)~.sh__p{max-width:44ch}   /* under a narrow headline the sub-line stays about as wide as the headline, never one long line past it (Kevin, 11/09) */
.faq__a p{max-width:58ch}
.td-line p{font-size:16px;line-height:1.5}

/* the reel grows as the page scrolls (tight.js): from the page's column to the screen's edges, from its top edge */
.reel{transform-origin:50% 0;will-change:transform}

@media (max-width:700px){
  .c__sub,.lede,.sh__p{font-size:17px;line-height:1.5}
  .problem .h2{font-size:32px}   /* was 38px, larger than the page's own headline (34px) */
}