/* type.css — the reading layer.
 *
 * Measured on the live booking page, 2026-08-01: body prose was set in
 * JetBrains Mono at 13–15px running 80–95 characters per line. Comfortable
 * reading is 45–75 characters, and monospace belongs at the low end of that
 * because every character occupies the same width — which removes word shapes,
 * and word shapes are what let someone read at speed instead of letter by
 * letter. Alex's verdict on the result: "it just visually doesn't read at all.
 * too complex to commit to reading."
 *
 * WHAT THIS DOES NOT TOUCH, on purpose. Mono is most of the site's character
 * and it works everywhere it is short: section labels, the rates line, buttons,
 * nav, form labels and inputs, the footer. All of those are divs, spans,
 * buttons and inputs, so the `p, li` selector below leaves them alone.
 *
 * !important is load-bearing here and is not laziness. Every paragraph on the
 * site carries its typography in an inline style attribute, and an inline
 * style beats a stylesheet. The alternative was rewriting several hundred
 * multi-line style attributes by hand, which is more code, more risk, and
 * harder to undo. Deleting this file reverts the whole change.
 *
 * SELECTOR NOTE. The first version of this file targeted `x-dc p`, matching the
 * wrapper element in the source. That element does not survive to the rendered
 * DOM — support.js replaces <x-dc> with a plain div — so the stylesheet loaded
 * and matched nothing at all. Verified in a browser, which is the only way that
 * failure is visible: the file is present, the request is 200, and the page is
 * unchanged. `section` is the right anchor: all prose lives inside one, and the
 * nav (a <header>) and the footer do not.
 */

:root {
  --prose:
    Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui,
    sans-serif;
  --measure: 34em; /* ≈65 characters at 16px — the target, down from 95 */
}

/* Prose only. Everything structural keeps its monospace. */
section p,
section li {
  font-family: var(--prose) !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
  letter-spacing: 0 !important;
}

/* The measure. Applied to paragraphs rather than list items, because a list
 * already sits inside a padded parent and capping both compounds the indent. */
section p {
  max-width: var(--measure) !important;
}

section li {
  max-width: calc(var(--measure) - 2em) !important;
  margin-bottom: 0.4em;
}

/* One real step of hierarchy instead of three sizes a reader cannot tell
 * apart. 13 / 14 / 15px was not a hierarchy, it was drift.
 *
 * SCOPED TO THE FIRST SECTION ON PURPOSE. Written first as `section > p`, which
 * fires once per section — so the-day, which has four, opened four paragraphs
 * at 19px and the emphasis meant nothing. A size that appears repeatedly is not
 * emphasis, it is a second body size. Caught by assert-rendered.sh, which is
 * why the "at most ONE enlarged opening line" assertion now exists. */
section:first-of-type > p:first-of-type {
  font-size: 19px !important;
  line-height: 1.6 !important;
  color: #111 !important;
}

/* Light text on the black panels needs a touch more room to stay legible at a
 * proportional weight. */
div[style*="background: #000000"] p,
div[style*="background: #000000"] li,
div[style*="background:#000000"] p,
div[style*="background:#000000"] li {
  line-height: 1.75 !important;
}

/* Anchors inside prose inherit the prose face rather than reverting to mono
 * mid-sentence. Standalone nav-style links are not inside a p or li. */
section p a,
section li a {
  font-family: inherit !important;
  font-size: inherit !important;
}

@media (max-width: 640px) {
  section p,
  section li {
    font-size: 17px !important; /* slightly larger on a phone, held closer */
  }
  section:first-of-type > p:first-of-type {
    font-size: 19px !important;
  }
}