/* TYPOGRAPHY — four families, one job each. Never mix jobs.
   pixel = system/HUD chrome · ui = headings + interface · mono = data/meta/code · prose = long-form reading */
:root{
--font-pixel:"Silkscreen","Courier New",monospace;
--font-ui:"Space Grotesk",system-ui,-apple-system,sans-serif;
--font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;
--font-prose:"Source Serif 4",Iowan Old Style,Georgia,serif;

--fs-hud:10px;--fs-micro:11px;--fs-caption:12px;--fs-meta:13px;--fs-body-s:14px;--fs-body:16px;--fs-body-l:18px;--fs-h5:20px;--fs-h4:24px;--fs-h3:30px;--fs-h2:40px;--fs-h1:54px;--fs-display:76px;
--lh-tight:1.06; /* @kind font */
--lh-snug:1.2; /* @kind font */
--lh-ui:1.4; /* @kind font */
--lh-body:1.6; /* @kind font */
--lh-prose:1.72; /* @kind font */

--ls-pixel:0.08em; /* @kind font */
--ls-hud:0.16em; /* @kind font */
--ls-caps:0.11em; /* @kind font */
--ls-tight:-0.02em; /* @kind font */
--ls-tighter:-0.035em; /* @kind font */
--ls-normal:0; /* @kind font */

--fw-regular:400; /* @kind font */
--fw-medium:500; /* @kind font */
--fw-semibold:600; /* @kind font */
--fw-bold:700; /* @kind font */

--measure-prose:66ch; /* @kind font */
--measure-ui:52ch; /* @kind font */


/* composed roles */
--type-hud:var(--fw-regular) var(--fs-hud)/1 var(--font-pixel); /* @kind font */

--type-pixel-title:var(--fw-regular) var(--fs-h5)/1.25 var(--font-pixel); /* @kind font */

--type-display:var(--fw-bold) var(--fs-display)/var(--lh-tight) var(--font-ui); /* @kind font */

--type-h1:var(--fw-bold) var(--fs-h1)/var(--lh-tight) var(--font-ui); /* @kind font */

--type-h2:var(--fw-semibold) var(--fs-h2)/var(--lh-snug) var(--font-ui); /* @kind font */

--type-h3:var(--fw-semibold) var(--fs-h3)/var(--lh-snug) var(--font-ui); /* @kind font */

--type-h4:var(--fw-semibold) var(--fs-h4)/1.3 var(--font-ui); /* @kind font */

--type-body:var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-ui); /* @kind font */

--type-prose:var(--fw-regular) var(--fs-body-l)/var(--lh-prose) var(--font-prose); /* @kind font */

--type-meta:var(--fw-medium) var(--fs-meta)/var(--lh-ui) var(--font-mono); /* @kind font */

--type-label:var(--fw-medium) var(--fs-micro)/1 var(--font-mono); /* @kind font */

}
.u-hud{font:var(--type-hud);letter-spacing:var(--ls-hud);text-transform:uppercase;color:var(--text-muted)}
.u-label{font:var(--type-label);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-muted)}
.u-prose{font:var(--type-prose);color:var(--text-body);max-width:var(--measure-prose);text-wrap:pretty}
.u-mono{font:var(--type-meta)}