/* magalia.wiki — the shared type layer (2026-09-23). * One body size, a five-step scale and a label step, two leadings for running text, three line lengths, two * breakpoints. Link it after css/tokens.css with a ?v= content hash (stamp_asset_versions.py * pins it), put class="mw-type" on , and class="mw-prose" on each column of running text. * Nothing that does not carry those classes is restyled. * * The line lengths were counted, not estimated: 16 px text laid out in each of the site's font * stacks, characters per full line counted from the rendered lines * (research/interface-design-2026-09/type-layer.md). Gate: scripts/check_type_layer.mjs. * * Breakpoints. A media query cannot read a custom property, so they are written as numbers: * max-width:700px phone one column, compact chrome * 701px – 840px tablet one column * min-width:841px desktop a second pane (evidence, apparatus) may sit beside the text * * The page's parts, in this order wherever they occur (the gate checks it on every page that * links this file): skip link → site bar → page title (h1) → view tabs → the text → related * pages → provenance footer. */ :root{ /* five steps */ --fs-small:.9375rem; /* 15 px: the floor for anything read as text (notes, captions) */ --fs-body:1rem; /* 16 px */ --fs-lede:1.125rem; /* 18 px: an opening paragraph; h3 */ --fs-heading:1.375rem; /* 22 px: h2 */ --fs-title:1.75rem; /* 28 px: h1, the page title */ /* a label step (2026-09-24, for apps and tables): short interface labels, never a sentence — tags, chips, counts, keys, year stamps, column headers. Nothing is set smaller. */ --fs-label:.8125rem; /* 13 px */ /* leading, as a ratio of the type size */ --lh-text:1.5; /* Latin, Greek, English */ --lh-cjk:1.7; /* Chinese */ --lh-heading:1.2; /* line length */ --measure:30em; /* one column: Latin 62–69, Greek 60, English 65 characters */ --measure-narrow:22em; /* beside a pane: Latin 46–47, Greek 43, English 47 */ --measure-cjk:36em; /* Chinese on its own: 38 characters */ } .mw-type{font-size:var(--fs-body);line-height:var(--lh-text)} .mw-type h1{font-size:var(--fs-title);line-height:var(--lh-heading)} .mw-type h2{font-size:var(--fs-heading);line-height:var(--lh-heading)} .mw-type h3{font-size:var(--fs-lede);line-height:var(--lh-heading)} .mw-type .mw-lede{font-size:var(--fs-lede)} .mw-type small,.mw-type .mw-small{font-size:var(--fs-small)} .mw-type .mw-label{font-size:var(--fs-label)} /* a column of running text: Latin, Greek and English ragged right */ .mw-prose{max-width:var(--measure);text-align:start} .mw-prose.mw-narrow{max-width:var(--measure-narrow)} .mw-prose:lang(zh),.mw-prose.mw-cjk{max-width:var(--measure-cjk)} /* Chinese: a higher leading, justified, strict line breaking (no closing punctuation at a line start). Blocks only, so an inline Chinese gloss does not open up an English line. In the Chinese-only view a block can be lang="en" and show only its Chinese half, hence the body[data-lang="zh"] form. */ .mw-type :is(p,li,dd,dt,blockquote,figcaption,td,th,div):lang(zh), body.mw-type[data-lang="zh"] :is(p,li,dd,dt,blockquote,figcaption,td,th){line-height:var(--lh-cjk);line-break:strict} .mw-prose:lang(zh), .mw-prose :is(p,li,dd,blockquote):lang(zh), body.mw-type[data-lang="zh"] .mw-prose, body.mw-type[data-lang="zh"] .mw-prose :is(p,li,dd,blockquote){text-align:justify}