/* ── THE KONSENSUS READS TYPOGRAPHY — ONE SOURCE ───────────────────────────
   Niko, 2026-07-30: *"i did tell you in the spec that the blog will be made in the
   konsensus reads style, not whatever copypaste dump this is. what happened to
   putting in the standard formatting?"*

   What "reads style" IS, taken verbatim from the live blog reader
   (`blog/index.html`, `.reader-article`) rather than reinvented — these are the
   numbers a reader on this site already gets:

     column      max-width 65ch, centred
     body        1.02rem × the reader's scale, line-height 1.7
     headings    Playfair Display 700 — h2 1.4rem, margin-top 1.5em
     images      full width of the column, 10px radius, 24px above and below
     caption     the `<em>` directly after an image, centred and dim
     lists       0.55em between items, line-height 1.6

   Fonts are NOT a choice made here: DESIGN-GUIDE.md §3 is the only authority and
   it says konsensus.net is Inter for body and Playfair Display for headings. The
   reader's serif/book-mode toggle was deliberately removed on 2026-07-16 (§ Fixed
   #1) because it switched to a face that was never loaded. No new font payload.

   Used by: the SSR article page (`konsensus-seo/src/render.js` shell) and the blog
   reader. A page adopts the treatment by linking this file and putting `.reads` on
   the prose container — never by copying the numbers. */

.reads {
  max-width: 65ch;
  margin: 0 auto;
  font-size: calc(1.02rem * var(--reader-scale, 1));
  line-height: 1.7;
  color: var(--text);
  /* Long words in a 65ch column leave rivers without this; the site's body face
     has the hyphenation data. */
  hyphens: auto;
  overflow-wrap: break-word;
}

/* Paragraph rhythm. A wall of text is not a reading experience, and the space
   between paragraphs is what makes an argument legible as a sequence of steps. */
.reads > p { margin: 0 0 1.15em; text-wrap: pretty; }
.reads > p:last-child { margin-bottom: 0; }

/* Section headings — the thing the X import was losing. Playfair, and enough air
   above to read as a new section rather than a bold sentence. */
.reads h2,
.reads h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  line-height: 1.3;
  margin: 1.5em 0 0.5em;
  text-wrap: balance;
}
.reads h2 { font-size: 1.4rem; }
.reads h3 { font-size: 1.15rem; }
.reads h2:first-child,
.reads h3:first-child { margin-top: 0; }

.reads blockquote {
  margin: 1.4em 0;
  padding: 0 0 0 18px;
  border-left: 2px solid var(--orange, #F7931A);
  color: var(--mut, #6b6560);
  font-style: italic;
}

.reads ul,
.reads ol { margin: 0 0 1.15em; padding-left: 1.35em; }
.reads li { margin-bottom: 0.55em; line-height: 1.6; }

.reads img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  margin: 24px auto;
}
/* An `<em>` after an image is its caption — the shape the markdown converter
   emits for `![alt](src)` followed by a line of italic text.
   TWO selectors, because md.mjs emits that caption as `<p><em>…</em></p>`: a
   standalone image is deliberately NOT wrapped in a paragraph, so the caption's
   own paragraph is the image's next sibling and `img + em` alone never matched
   anything on a published post. */
.reads img + em,
.reads img + p > em:only-child {
  display: block;
  text-align: center;
  color: var(--mut, #6b6560);
  font-size: 0.9rem;
  margin: -14px 0 24px;
}
/* …and that wrapping paragraph must not add a second rhythm around it. Dropped
   whole by a browser without :has(), which costs the spacing and keeps the
   caption. */
.reads img + p:has(> em:only-child) { margin: 0; }

.reads hr {
  border: 0;
  border-top: 1px solid var(--border, rgba(0, 0, 0, .12));
  margin: 2.2em auto;
  width: 42%;
}

.reads a { color: var(--orange-text, #B96C00); text-underline-offset: 2px; }

/* On a phone the column is the screen, so the measure yields and only the rhythm
   matters. */
@media (max-width: 700px) {
  .reads { font-size: calc(1.06rem * var(--reader-scale, 1)); }
  .reads h2 { font-size: 1.28rem; }
}