/* ── U0 · THE SHELL ──────────────────────────────────────────────────── Ink, paper, ochre — the three named colours of the drawn screens — and the neutrals between them, every one biased toward the ink's blue so no grey on the page is an unchosen grey. `--accent` is the ochre darkened to #8A5A14: #C8862A on paper is 2.9:1, under the 4.5:1 that body-size link text needs, so the pure ochre is kept for rules and the lit tab, where it carries no words. NOTHING IS FETCHED. The screens link Google Fonts; /privacy promises no third party learns of a visit and the CSP is `style-src 'self'`. The stacks NAME Noto first, so a machine that has it uses it. */ /* The palette and type tokens live in tokens.css (S1, 2026-09-29), linked before this file; every rule below reads them as variables. */ *{box-sizing:border-box} body{margin:0;background:var(--paper);color:var(--ink); font:16px/1.6 var(--serif); /* The bar is fixed to the bottom on a phone; without this it covers the last lines of every page. */ /* `--bar-h` is the height of a TAB; the bar is that plus its own 1px top border, so the reserve carries the border too. */ padding-bottom:calc(var(--bar-h) + 1px + env(safe-area-inset-bottom,0px))} a{color:var(--accent)} a:hover{color:var(--ink)} :focus-visible{outline:2px solid var(--ochre);outline-offset:2px} .bar{display:flex;justify-content:space-between;align-items:center;gap:1rem; padding:.7rem 1.25rem;border-bottom:1px solid var(--line);background:var(--card)} .brand{display:flex;align-items:center;gap:.7rem;min-height:44px; text-decoration:none;color:var(--ink);font-weight:600;font-size:1.1rem; line-height:1.1} .brand:hover{color:var(--ink)} /* THE MARK IS A MARK, NOT A TILE (2026-10-19). It was an over an ink background with a 10px radius, and the SVG it loaded painted its own opaque black rect edge to edge — so the header showed a black square on cream and neither the radius nor this background was ever visible. `scripts/generate_mark.py` now cuts the mark with no background of its own, in ink/paper/ochre, so the bar's own colour shows through and the box is the ring itself. 48px is the size the ring is drawn for; the comment that said 36px had been wrong since the rule said 48. `block` removes the inline-image baseline gap that would otherwise push the name down a pixel. */ .mark{display:block;width:48px;height:48px;flex:none} .lang{display:flex;gap:0;max-width:none;border:1px solid var(--ink); border-radius:6px;overflow:hidden;flex:none} .lang button{background:transparent;color:var(--ink);border-radius:0; padding:.35rem .7rem;min-height:40px;font:14px/1 var(--sans)} .lang button[aria-current]{background:var(--ink);color:var(--paper)} /* THE BAR. Bottom of the screen on a phone, where a thumb is. */ /* THE TAB COUNT IS NOT FIXED: three signed out (Today, Timing, Sign in), four signed in (People joins, 0010), and five once Ask is built. A hardcoded `repeat(3, …)` wrapped the fourth tab onto a second row, making the bar 121px tall against the 60px `--bar-h` the page reserves — 61px of every signed-in page sat under it. Auto-flow takes the count from the markup, so adding a tab cannot reopen this. */ body>nav{position:fixed;left:0;right:0;bottom:0;z-index:10;display:grid; grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);background:var(--card); border-top:1px solid var(--line);font:12px/1.2 var(--sans); padding-bottom:env(safe-area-inset-bottom,0px)} body>nav a{display:flex;flex-direction:column;align-items:center; justify-content:center;gap:4px;min-height:var(--bar-h);color:var(--muted); text-decoration:none;border-top:2px solid transparent} body>nav a:hover{color:var(--ink)} body>nav a[aria-current]{color:var(--ink);font-weight:600; border-top-color:var(--ochre)} /* …and under the header from 900px: the same three links, reflowed. One template, this breakpoint only. */ @media (min-width:900px){ body{padding-bottom:0} body>nav{position:static;display:flex;justify-content:center;gap:6px; padding:.5rem 1.25rem;border-top:0;border-bottom:1px solid var(--line); font-size:14px} body>nav a{flex-direction:row;gap:8px;min-height:40px;padding:0 16px; border:0;border-radius:6px;color:var(--ink)} body>nav a svg{width:18px;height:18px} body>nav a[aria-current]{background:var(--ink);color:var(--paper)} body>nav a[aria-current]:hover{color:var(--paper)} } @media (max-width:420px){.bar{padding:.6rem 1rem}.brand{font-size:1rem;gap:.55rem}} .note.breach{border-left:4px solid #a00} /* Devanagari, from the reader's own machine. Nothing is fetched: a webfont link is a third party learning that you visited, which /privacy promises does not happen, and `style-src 'self'` blocked it anyway. So the stack names the faces each platform actually ships — Noto Sans Devanagari (Android, most Linux), Kohinoor Devanagari (macOS, iOS), Nirmala UI and Mangal (Windows) — before falling back. 16px body / 14px floor: below that the anusvara and the candrabindu merge, and अं vs अँ is a MEANING distinction, not a style one. `th` and `.card dt` are set at .78rem for English small-caps labels, which is under the floor, so Hindi raises them. */ html[lang="hi"] body{font-family:"Noto Serif Devanagari","Noto Sans Devanagari", "Kohinoor Devanagari","Nirmala UI","Mangal",system-ui,sans-serif} html[lang="hi"] th,html[lang="hi"] .card dt{font-size:.875rem} main{max-width:56rem;margin:0 auto;padding:2rem 1.5rem} h1{font-size:1.7rem;font-weight:600;line-height:1.15;margin:0 0 .5rem;text-wrap:balance} h2{font-size:1.25rem;margin:2rem 0 .75rem;border-bottom:1px solid var(--line); padding-bottom:.35rem} .lede{color:var(--soft);margin:0 0 2rem} /* ── THE MEASURE ─────────────────────────────────────────────────── `main` is 56rem so tables, charts and the two-column cards have room. Prose does not want that room: at 1400px the body text on /privacy ran 108 characters to the line, measured against the rendered font rather than estimated (848px of box, 7.83px average advance). Comfortable reading is 45-75, and 80 is the usual ceiling. 38rem is about 75 characters at this face and size. Applied to the text elements rather than by narrowing `main`, because the same page holds a position table and a varga grid that need every pixel of the 56rem — narrowing the container would fix the paragraphs by breaking those. */ main p,main li,main dd{max-width:38rem} /* The exceptions are the places where a short string is laid out rather than read: a table cell, a definition grid inside a card, and the caption under a chart are positioned by their container and a measure cap would leave them hanging in the middle of it. */ main td p,main .card dd,main .legend,main .meta{max-width:none} form{display:grid;gap:1rem;max-width:34rem} label{display:block;font-family:var(--sans);font-size:.85rem;color:var(--muted);margin-bottom:.25rem} /* ── FORM CONTROLS NEVER FALL BELOW 16px ─────────────────────────── `font:inherit` alone takes the size from whatever encloses the control, and on /matching the inputs sit INSIDE their `