/* twoplus11 — the fleet's typography, in one file.
 *
 * Reported 2026-09-18, from a screenshot of live twoplus11.com/blinkr/: "blinkr
 * font, even the twoplus11 logo uses that font. keep things consistent."
 *
 * It was right, and the wordmark was the tell. `shell.css` draws the twoplus11
 * lockup with `font-family: var(--font2)`, reading the token the page defines.
 * Measured across the 110 deployed app pages on 2026-09-18:
 *
 *     --font2 = SF Pro Display        101 pages
 *     --font2 = "New York", a SERIF     8 pages   blinkr, monthr + their legal pages
 *     .nav-name overridden to --serif   4 pages   shelfr + its legal pages
 *
 * So the one element that has to look identical everywhere, the company's own
 * wordmark, was set in a different typeface on twelve pages. Nothing could
 * notice, because each page owned its own copy of the answer.
 *
 * This is the split `shell.css` already makes, one layer down:
 *
 *   TOKENS  --font, --font2, --mono are decided HERE, for the whole fleet, and
 *           a page may no longer declare them. That is the fix: every
 *           `var(--font2)` already written into the pages and into every
 *           injected block resolves to one value, so the fleet cannot disagree
 *           with itself about what it is set in.
 *   SCALE   the headline, the section heading and the hero lockup are decided
 *           here too. Measured 2026-09-18, these were ALREADY near-unanimous --
 *           `.sec-h` was byte-identical on 22 of 24 index pages, the legal
 *           page's h1 on 69 of 84 -- so this mostly writes down what the fleet
 *           already agreed on and moves the few pages that had drifted onto it.
 *   COLOR   is NOT decided here. --t1 and the accents stay the page's own, the
 *           way shell.css leaves them.
 *
 * ⛔ Loaded FIRST of the shared stylesheets, on purpose. a11y.css (Larger text)
 * and shell.css (the chrome) both need to override the base scale, and a page's
 * own <style> sits above every /assets/ link in the head, so this file beats a
 * leftover page rule of equal specificity while still losing to the two layers
 * that should win.
 *
 * ⛔ Do not add a font token or a heading size to a page's <style>.
 * `tools/site/inject_type.py` strips it and
 * `tools/site/test_pages_share_one_type_scale.py` fails on it.
 */

/* ── Tokens ──────────────────────────────────────────────────────────────── */
:root {
  /* The system stack the root site's own body has always used. The app pages
     carried a shorter one that dropped BlinkMacSystemFont, which is the name
     older Chrome on macOS needs to reach San Francisco at all. */
  --font:  -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --font2: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --mono:  "SF Mono", Menlo, Monaco, monospace;

  /* Blinkr and Monthr were built on a different page template and named the
     body stack --font1; Shelfr named its display face --serif. Their markup
     still says var(--font1) and var(--serif) in places this file does not
     reach, so the old names stay valid and point at the fleet's value rather
     than being hunted down across three page trees. */
  --font1: var(--font);
  --serif: var(--font2);
}

/* ── Base ────────────────────────────────────────────────────────────────── */
body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
}

code, kbd, samp, pre { font-family: var(--mono); }

/* ── Scale ───────────────────────────────────────────────────────────────── */

/* The page title, as the legal, changelog and support pages set it. This is the
   base: every app page has exactly one <h1>, so the element selector is safe
   and it reaches both page templates -- the fleet's and the one Blinkr and
   Monthr were built on. */
h1 {
  font-family: var(--font2);
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -1.5px;
  margin-bottom: 8px;
}

/* The page title steps down on a phone. Measured on 39 legal and changelog
   pages, which all carried this exact step; the hero keeps its own clamp,
   which already scales with the viewport, because `.hero h1` outranks this. */
@media (max-width: 600px) {
  h1 { font-size: 30px; }
}

/* The hero headline, on the pages that sell something. `.vs-main` is named
   beside `.hero` because the two comparison pages are a hero under another
   container's name, and they were already shipping this exact scale -- one
   value, two known containers, rather than a second scale. */
.hero h1,
.vs-main h1 {
  font-size: clamp(38px, 6vw, 64px);
  letter-spacing: -2px;
  line-height: 1.06;
  margin-bottom: 20px;
}

/* The section heading on an app page. `.sec-h`, not `h2`: every h2 in the fleet
   that is a section heading carries this class, and a bare h2 rule would also
   land on headings that deliberately are not -- WinKeys' rename notice is a
   small in-page callout with a rule of its own. */
.sec-h {
  font-family: var(--font2);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800;
  letter-spacing: -1px;
  margin-bottom: 14px;
}

/* The section heading on a legal, changelog or support page, where the headings
   are structure rather than sales and are sized accordingly. `.doc h2` is named
   beside `.section h2` for the same reason `.vs-main` is named beside `.hero`:
   Blinkr's and Monthr's legal pages wrap their body in `.doc` and never had the
   `.section` divider, so without both spellings their headings would be reached
   by nothing at all. */
.section h2,
.doc h2 {
  font-family: var(--font2);
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--t1);
}

/* The twoplus11 wordmark in the nav. This is the element the report was about.
   `shell.css` draws it on the 26 index pages and still owns it there; the 84
   legal, changelog, support and comparison pages carry their own nav and got
   the rule from their own <style>, which is how Blinkr's privacy page was
   setting the company wordmark in a different face from Blockr's.
   The `em` inside it stays the page's -- that is the blue in "two*plus*11". */
.nav-twop11-name {
  font-family: var(--font2);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.2px;
  line-height: 1.1;
  color: var(--t2);
}

/* The app name in the hero lockup, under the icon. */
.hero-app-name {
  font-family: var(--font2);
  font-size: clamp(30px, 4.4vw, 40px);
  font-weight: 800;
  letter-spacing: -1.4px;
  line-height: 1;
  color: var(--t1);
}