/* ───────────────────────────────────────────────────────────────────────── /for-lawyers.html — the technical brief. TOKENS ARE DUPLICATED HERE ON PURPOSE, as they are in index.css, chat.css, coverage.css, legal.css and verify.css. One shared tokens file would couple pages that are otherwise edited independently; the known cost is that a token added to one file and used in another computes to nothing and the whole declaration is dropped, silently. So: every var() name used below is defined in the bare :root block, including --bad, which this page adds and index.css does not have. THE PRINT BLOCK AT THE FOOT IS NOT AN AFTERTHOUGHT. The PDF a lawyer gets by email is rendered from this page by headless Chrome, so print is a real output rather than a courtesy: "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" \ --headless=new --disable-gpu --no-pdf-header-footer \ --virtual-time-budget=25000 \ --print-to-pdf="wwwroot/for-lawyers.pdf" \ "http://localhost:5177/for-lawyers.html" IT MUST BE SERVED, NEVER file://. This page links /fonts/fonts.css and /css/for-lawyers.css root-relative, and under file:// those resolve against the filesystem ROOT, so neither loads: Chrome falls back to Times and Arial, none of this print block applies, and the PDF comes out 12 unstyled pages instead of 9. It fails silently and looks like a finished document — check the embedded fonts if the page count ever moves. Regenerate it whenever this page's words change, or the PDF and the page start saying different things. ───────────────────────────────────────────────────────────────────────── */ :root { --bg: #11141a; --surface: #171b22; --surface-2: #1c212a; --border: #262b35; --text: #e9e8e4; --text-muted: #8b92a0; --text-dim: #767e90; --brass: #b08d57; --brass-dim: #8a6f45; --brass-wash: #1e1a13; --signal: #6b93b5; /* What has to be dealt with. legal.css's --bad, same values, because the two surfaces should not disagree about the colour of a problem. */ --bad: #e5696b; --serif: 'Spectral', Georgia, serif; --sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; } html[data-theme="light"] { --bg: #f6f4ef; --surface: #ffffff; --surface-2: #eeebe3; --border: #ddd7c9; --text: #201d19; --text-muted: #5b5548; --text-dim: #726d5d; --brass: #9c7a3f; --brass-dim: #b08d57; --brass-wash: #f3ecdd; --signal: #3d6a8f; --bad: #b3261e; } /* FONTS DECLARED HERE OVERRIDE /fonts/fonts.css, which is loaded first, and both halves of that are deliberate. IBM PLEX SANS, STATIC RATHER THAN VARIABLE. Google now ships Plex Sans only as a variable font, and that is what fetch-fonts.py pulled — fine on screen, and HEADLESS CHROME CANNOT RENDER IT AT ALL. Since the PDF at /for-lawyers.pdf is printed from this page, every heading and table in it silently fell back to a system face. These three are the same typeface instanced at one weight each with fontTools, the way scripts/make-og-images.py already does it for the social card. A browser fetches only the winning declaration, so this costs no extra download. IBM PLEX MONO is not in fonts.css at all: this page is the first to want a monospace face, for the section numerals and the citations in the worked example, where a fixed advance is the point. If a second page ever wants either of these, teach fetch-fonts.py rather than copying this block. */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/ibmplexsans-400.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/ibmplexsans-500.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/ibmplexsans-600.woff2') format('woff2'); } /* SPECTRAL ITALIC, which fonts.css does not carry at all — it declares only normal 400/500/600, so every on this site is a mechanically slanted roman. That is tolerable elsewhere and not here: this document italicises case names, and a faux-oblique serif looks exactly as wrong as it is. */ @font-face { font-family: 'Spectral'; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/spectral-400i.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/ibmplexmono-400.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/ibmplexmono-500.woff2') format('woff2'); } * { box-sizing: border-box; margin: 0; padding: 0; } body { background: var(--bg); color: var(--text); font-family: var(--serif); font-size: 16.5px; line-height: 1.6; -webkit-font-smoothing: antialiased; } .wrap { max-width: 1080px; margin: 0 auto; padding: 0 28px; } /* ── Chrome, shared in appearance with the other pages ──────────────────── */ header { border-bottom: 1px solid var(--border); padding: 18px 0; } header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; } .mark { font-family: var(--serif); font-size: 20px; letter-spacing: -0.01em; text-decoration: none; } .mark-img { display: block; width: 160px; height: 46px; background: var(--text); -webkit-mask: url('/img/zerowitness-mark.png') no-repeat center / contain; mask: url('/img/zerowitness-mark.png') no-repeat center / contain; } .mark-print { display: none; } /* SCOPED TO THE HEADER. Unscoped, `nav { display: flex }` also caught the