@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@200;300;400;500&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
/* ── Families: two, two jobs ────────────── */
--font-display:"Outfit",system-ui,sans-serif;
--font-body:"Outfit",system-ui,sans-serif;
--font-mono:"IBM Plex Mono",ui-monospace,monospace;

/* ── Weights (nothing above 300 in body) ── */
--w-display:200; /* @kind font */
--w-body:300; /* @kind font */
--w-emphasis:400; /* @kind font */
--w-mono:400; /* @kind font */

/* ── Tracking ───────────────────────────── */
--track-display:-0.045em; /* @kind font */
--track-numeral:-0.05em; /* @kind font */
--track-mono:0.20em; /* @kind font */
--track-mono-tight:0.14em; /* @kind font */

/* ── Slide scale · 1920 × 1080 ──────────── */
--t-cover:158px;
--t-title:104px;
--t-subhead:56px;
--t-numeral:132px;
--t-lead:31px;
--t-body:25px;
--t-chrome:17px;

/* ── Print scale · letter / A4 ──────────── */
--p-cover:56pt; /* @kind font */
--p-title:30pt; /* @kind font */
--p-subhead:15pt; /* @kind font */
--p-numeral:42pt; /* @kind font */
--p-lead:13pt; /* @kind font */
--p-body:10.5pt; /* @kind font */
--p-chrome:7.5pt; /* @kind font */

/* ── Line heights ───────────────────────── */
--lh-display:0.98; /* @kind font */
--lh-lead:1.45; /* @kind font */
--lh-body:1.55; /* @kind font */
--lh-mono:1.75; /* @kind font */
}

/* ── Semantic classes ─────────────────────
   Display type is ALWAYS uppercase. Body is
   never uppercase. Mono is never body. */
.display,.title,.subhead{font-family:var(--font-display);font-weight:var(--w-display);text-transform:uppercase;letter-spacing:var(--track-display);line-height:var(--lh-display);margin:0}
.display{font-size:var(--t-cover)}
.title{font-size:var(--t-title)}
.subhead{font-size:var(--t-subhead)}
.numeral{font-family:var(--font-display);font-weight:var(--w-display);font-size:var(--t-numeral);letter-spacing:var(--track-numeral);line-height:0.9;font-variant-numeric:tabular-nums}
.lead{font-family:var(--font-body);font-weight:var(--w-body);font-size:var(--t-lead);line-height:var(--lh-lead);margin:0}
.body{font-family:var(--font-body);font-weight:var(--w-body);font-size:var(--t-body);line-height:var(--lh-body);margin:0}
.secondary{color:var(--text-secondary)}
.label,.chrome{font-family:var(--font-mono);font-weight:var(--w-mono);font-size:var(--t-chrome);letter-spacing:var(--track-mono);text-transform:uppercase;color:var(--text-chrome)}
.caption{font-family:var(--font-mono);font-weight:var(--w-mono);font-size:15px;letter-spacing:var(--track-mono-tight);text-transform:uppercase;color:var(--text-chrome);line-height:var(--lh-mono)}